Photoshop Tutorials

Rounded Tab Button

2009-03-28T01:07:00.002-07:00

Making a Rounded Tab Button

The basic rounded rectangle button is very versatile. Here, we're going to convert it into the popular rounded tab button like the one shown here.

Rounded tab button (click to view image)

Solution

Start with a rounded rectangle vector shape, as shown below.
Rounded rectangle shape (click to view image)
Select the Convert Point Tool, which is in the flyout menu for the Pen Tool (P). Click once on each of the two anchor points, as shown below, to convert them from curve points to angle points.
Converting the anchor points (click to view image)
Use the Direct Selection Tool (A) to make a selection around the two bottom-most anchor points on the shape. To indicate that they have been selected, the points will turn from white squares to filled squares, as shown here.
Selecting the bottom two anchor points (click to view image)
Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown below.
Deleting the two points (click to view image)
With the Pen Tool (P), click first on the bottom anchor point on the left-hand side, and then on the point on the right-hand side, as shown below.
Closing the shape (click to view image)

This will draw a line connecting the two points and complete the shape, which is shown below.

Completed rounded tab button (click to view image)

Making a File Folder Tab Button

In this solution, you'll learn how to create a nice file folder tab, shaped much like those real folder tabs used in filing cabinets. Remember those old-fashioned things?

Example of a file folder tab button (click to view image)

Solution

Step-by-step file folder tab (click to view image)

Using the Pen Tool (P), click once to add an anchor point to your Photoshop document (step 1 in the image above.)

Position the cursor over the anchor point. Hold down Shift and Alt (Shift and Option on a Mac), click on the point, and drag the mouse towards the right to create a single horizontal handlebar (step 2 above).

Position the cursor as shown in step 3. Click and drag the mouse towards the right to add another anchor point. The line connecting the two points should display a nice curve, thanks to the positions of our control handles.

Holding down Shift, click and drag the mouse to the right of the last point we made in order to create another anchor point with horizontal control handles. Press Shift to ensure that the two points are aligned horizontally (step 4 above).

Move the cursor a bit lower and to the right so that it's aligned horizontally with our first anchor point (step 5). Click to add another anchor point and drag the handlebars out to the right.

Bring the cursor back over the last point we made. Hold down Alt (Option) and click to remove the right handlebar (step 6).

Bring the cursor back to our very first point and click on it to complete the shape (see step 7, and the graphic below).
Completed file tab button (click to view image)

Don't worry if your alignment's not perfect -- you can use the Direct Selection Tool (A) to select individual points, and the arrow keys to fine-tune them.

Summary

In the two instalments of this article, I showed you how to make all sorts of buttons! Beyond the obvious navigation buttons, the techniques you've learned here will allow you to make nifty bullet graphics and fancy title bars. For example, you could apply the plastic button effect to a longer rectangle that forms part of your interface, or use it as a bar for text links. You could also use the shiny metal button effect to create shiny metal bullets; you've got a gazillion options!

The experience you've gained with layer styles and vector shapes in this chapter will be invaluable when you're creating full web site comps. More, much more, on other elements of beautiful web site design can be found in the rest of my book, The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques. Don't forget to download your copy, courtesy of 99designs, before the opportunity is over!

Pearl Button - 1

2009-03-28T01:07:00.001-07:00

Making a Pearl Button

Here's a solution that uses real magic ... well, almost! We're going to take the glassy button we created in "Making a Glass Button" and turn it into a pearl button.

Example of a pearl button (click to view image)

Solution

Start with the glassy button you created in the solution titled "Making a Glass Button." Change the fill of the button layer to 100%, as shown, and use a very light, "pearly" color for the shape. I've used #fae1f9 for my pink, pearly button.
Changing the fill color (click to view image)
Enhance the three-dimensional effect of the button by adding a slight inner glow. Double-click on the f icon for the layer to bring up the Layer Style dialog, shown below.
Adding an Inner Glow effect (click to view image)

Select Inner Glow and change the Blend Mode to Normal and the Opacity to 10%. Increase the Size if you need to.
We'll also make the drop shadow a bit more subtle. Select Drop Shadow and decrease the shadow size to 3px or 4px.

Finally, add your text layer. Here we see our final button -- all done!
Example of a pearl button (click to view image)

Making Angled Tab Buttons

In this solution, I'll show you how to use vector graphic tools to create the angled tab buttons illustrated below.

Examples of angled tab buttons (click to view image)

Solution

Angled Tab

Start with a rectangular vector shape in a color of your choice. I've used a light blue in the image below.
Starting with a rectangular button (click to view image)
Using the Direct Selection Tool (A), select the top left-hand anchor point of the rectangle. Hold down the Shift key and move the point to the right by pressing the right arrow once or twice. Your image should look something like the one below.
Moving the anchor point (click to view image)

Release the Shift key and use the arrow keys to fine-tune the point. We'll go "old school" here and count the number of times we press the arrow key so that we know how far to move the point on the right-hand side when we get to it.
Repeat step 2 for the top, right-hand anchor point.

That's it -- believe it or not, our angled tab button is complete! If you don't believe me, look at the finished result below.

Completed angle button (click to view image)

Cut-corner Tab

This time, we'll make a tab button with a cut corner. Again, start with a rectangular vector shape. Select the Add Anchor Point Tool -- you'll find this in the flyout menu of the Pen Tool (P), shown here.
Selecting the Add Anchor Point Tool (click to view image)
Add an anchor point to the side of the button as I've done in the example below (you might need to zoom in).
Adding a point to the button (click to view image)
Choose the Convert Point Tool, which is also in the flyout menu of the Pen Tool (P).
Selecting the Convert Point Tool (click to view image)
Using the Direct Selection Tool (A), click on the top corner anchor point and use the arrow keys to move the anchor point across to form a "cut corner," as illustrated below.
Moving the anchor point (click to view image)

Completed cut-corner tab (click to view image)
If you like, repeat the effect on the other side.

Glass Button

2009-03-28T01:06:00.001-07:00

Making a Glass Button

In this solution, we're going to create an eye-popping glass button that's particularly effective when it's overlaid on photographs and non-solid backgrounds.

Example of a glassy button (click to view image)

Solution

Start with a vector button of any shape in a color that blends in with your background. Here, I'm using a pink that I color-picked from the sunset image onto which I'm going to place my button. Set the fill for the button layer to 0%. Open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss... from the menu that appears. Apply the settings used here, which are illustrated in the dialog below:
Bevel and Emboss settings for the glass button (click to view image)

<SCRIPT language='JavaScript1.1' SRC="http://ad.doubleclick.net/adj/N5620.sitepoint.com/B3463921;abr=!ie;sz=300x250;ord=[unique-string]?"> </SCRIPT> <NOSCRIPT> <a href="http://ads.aws.sitepoint.com/phpadsnew/www/delivery/ck.php?oaparams=2__bannerid=865__zoneid=76__cb=19e9c7c3c0__maxdest=http://ad.doubleclick.net/jump/N5620.sitepoint.com/B3463921;abr=!ie4;abr=!ie5;sz=300x250;ord=[unique-string]?" target="_top"> <IMG SRC="http://ad.doubleclick.net/ad/N5620.sitepoint.com/B3463921;abr=!ie4;abr=!ie5;sz=300x250;ord=[unique-string]?" BORDER=0 WIDTH=300 HEIGHT=250 ALT="Click Here"></A> </NOSCRIPT>
- Style: Inner Bevel
- Technique: Chisel Hard
- Depth: 800% (or larger, depending on the size of your button)
- Direction: Up
- Size: 13px (You may need to adjust this later.)
- Soften: 7px
- Angle: -65 degrees
- Altitude: 65 degrees
- Gloss Contour: Rolling slope-descending (Set this by clicking on the drop-down arrow next to the contour shape and choosing the Rolling slope-descending option, as depicted below.)
  Setting Gloss Contour (click to view image)
- Highlight Mode: White, 75%
- Shadow Mode: Dark gray, 75%
Setting Gloss Contour

Your button should be looking like the one shown below.

After applying a Bevel and Emboss effect (click to view image)

After applying a Bevel and Emboss effect
In the Layer Style dialog, click on the Contour style under Bevel and Emboss to select it. Click on the thumbnail image of the contour to bring up the Contour editor, shown below.
Changing the contour curve (click to view image)
Select and move the bottom-left point of the contour until it's positioned just above the first horizontal grid marker. Then, click on the contour line to add another point and drag it to form a curve.
The image below shows our button after the contour effect has been applied.

After applying the Contour curve (click to view image)
Not bad, huh? Now, select the Satin layer style and apply the settings shown here:
Applying the Satin layer style (click to view image)
- Blend Mode: Overlay; black
- Opacity: 30-40%
- Angle: 126 degrees
- Distance: 4px (You may need to adjust this later.)
- Size: 10px (You may need to adjust this later.)
- Contour: Cone-inverted

Select the Drop Shadow layer style. Change the Distance to 4px, the Size to 10px, and the Opacity to 50%, as shown in the example below.
Applying a drop shadow (click to view image)

At this stage, our button's looking quite glassy, as can be seen in the image below.

Satin and Drop Shadow layers applied (click to view image)
All we need to do now is add a simple text layer with a slight drop shadow! Your completed button should look like the image below.
Completed glassy button (click to view image)

You can easily copy this layer style to other shape layers. When you do, remember to set the new layer fill to 0%. Experiment with the layer effects to change the look of your button. The images here show variations of my glass button.

Glassy button style applied to various shapes (click to view image)

Plastic Button

2009-03-28T01:05:00.000-07:00

Making a Plastic Button

In this solution, we'll be using Photoshop magic to turn our friend, the basic gradient button, into a plastic button like the one shown here.

Plastic button (click to view image)

Solution

Start with a rounded rectangle gradient button that has a radius of 5px. You can change the radius in the Rounded Rectangle options bar. Use the color stops shown here in your gradient overlay layer style. If you're unsure of how to do this, look at the solution for "Making a Gradient Button." I've made my button green, but you can use different colors for yours if you like. Just choose a darker shade of your color for the color patch on the far right, a very light shade for the color patch on the far left, and a bright shade for the patch in between, as shown here.
Green rounded rectangle gradient button (click to view image)
Add a dark green, 1px stroke layer style to your button, as shown below.
Adding a stroke to the button (click to view image)
Add an outer glow using a bright version of the button color, as shown below.
Adding an outer glow (click to view image)
Select the button layer in the Layers palette and duplicate it using Control-J (Command-J on a Mac). Right-click (hold Control and click) on the new layer and select Clear Layer Style from the menu that appears, as shown.
Clearing the layer style (click to view image)
Change the Opacity of this layer to 50%, and double-click on its color patch to open the Color Picker. Set the color of the shape to white, as shown.
Changing the color of the shape layer (click to view image)
Now, click on the vector shape for the same layer in the Layers palette. Using the Direct Selection Tool (A), click on the bottom line of the rounded rectangle and drag it up a little bit, as shown. You may need to zoom in for this.
Editing the vector shape (click to view image)
Still using the Direct Selection Tool (A), click on the bottom-left anchor point so that you can see the handlebars of the point (zoom in if you need to). Click on the bottom handlebar, hold down Shift, and drag the handle up to curve the corner.
Curving the corner (click to view image)
Repeat step 7 with the bottom-right point. The sides of your shape should now look like those shown here.
Shape after modifications (click to view image)
With the Direct Selection Tool (A), click and drag the mouse to make a selection that captures all of the bottom points, as shown in the image here.
Selecting multiple points for editing. (click to view image)
Hold down Shift and drag the selected points up to make a thin strip, as shown below -- this is our highlight. Fine-tune the movement using the up and down arrow keys if you need to.
Making the highlight strip (click to view image)
Select the highlight layer in the Layers palette and duplicate it using Ctrl-J (Command-J). Select Edit > Transform > Flip Vertical to flip the duplicated layer.

Use the Move Tool (V) to move the flipped highlight to the bottom of the rectangular button, as shown here.
Adding bottom highlight (click to view image)
We're almost there! Now duplicate the button shape layer and name it middle highlight. Change the color of the shape to white.

Select the bottom anchor points of the middle highlight shape and move them up to the center of the original button shape. Change the opacity of this layer to 25%, as illustrated in the image below.
Modifying the third highlight shape (click to view image)
Add a text layer immediately on top of the original button shape (beneath the three highlight layers) and type your text. If you like, add a drop shadow for an added three-dimensional effect, as I've done for this completed button.
The completed plastic button (click to view image)

Buttons Page - 3

2009-03-28T01:04:00.000-07:00

Discussion

Since we created this aqua button using vector shapes and layer styles, we have a scalable button that's easy to edit. If we want to change its colors, all we have to do is change the colors of the gradients and effects in our layer styles. If we want our button to be slightly longer, we can use the Direct Selection Tool (A) to modify the vector path.

This solution has demonstrated an important concept about layers: even when the fill of a layer is set to 0%, the layer styles still show up! You may find this useful when you're creating your own effects.

Another cool thing about this technique is the fact that once you've created your first aqua button, it's very easy to create other buttons -- you just have to copy the layer effects. I'll quickly show you how you can make a rectangular aqua button in a few simple steps.

In the Layers palette, create the layers you'll need for the rectangular button: the base button layer, the highlight layer, and, if you're planning on using the embedding effect, an emboss layer, as shown here.
Copying styles to another layer (click to view image)
To copy the layer effects from the original aqua button to the rectangular button, hold down Alt (Option on a Mac) and drag the layer style icon from the original button layer over to its corresponding rectangular button layer, as shown in the image.
Button layer with styles applied (click to view image)
Change the fill of the highlight layer to 0%.
Highlight layer with styles applied (click to view image)
Add the button text and repeat step 2 to copy the drop shadow style we used for the original text.

That's it! Your rectangular aqua button is ready to be used, and should look like the one here.

The final rectangular button, and the rounded button on which it was based (click to view image)

Making a Transparent Aqua Button

We can also make our aqua buttons see-through, like the one shown here.

Transparent aqua button (click to view image)

In this solution we're going to begin with a basic aqua button. If you don't already have one (and everyone should!), you can make one by following steps 1-16 of the "Making an Aqua Button" solution.

Solution

Place your basic aqua button on top of a faint, patterned background, as shown here.
Basic aqua button on top of faint, striped background (click to view image)
Double-click on the f icon for the layer -- this will bring up the Layer Style dialog. Select the Gradient Overlay style and click on the Gradient swatch to bring up the Gradient Editor.

Click once above the gradient bar, in the position shown in this image, to create a new opacity stop. Change its opacity to 50%.
Adding new opacity stop (click to view image)
Click OK to exit the Gradient Editor, and OK again in the Layer Style dialog to apply the style.

Set the fill of the button layer to 0%, as shown below. The background will show through.
Changing the fill of the button layer (click to view image)

That's looking pretty good! But, as always, there are a couple of things we can do to make it look even more polished.
Double-click the f icon to open the Layer Style dialog, and select the Drop Shadow style. Choose a bright aqua color for the shadow (#90c9e7) and increase the Distance and Size slightly. Change the Opacity to 40%, as illustrated here.
Adding a drop shadow (click to view image)
Next, select the Stroke style. Add a dark blue (#0d487b) 1px stroke, with about 75% opacity, as shown below.
Adding a stroke (click to view image)
Finally, select the Inner Shadow style. Change the shadow color to a blue that's slightly darker than the one we used in the original gradient button. Lower the Opacity to 50%, and change the Distance to about 10px (or whatever suits the size of your button), as shown below.
Adding an inner shadow (click to view image)
Click OK to apply these new styles. And -- as you can see below -- we've got our final transparent aqua button! Swish, very swish!
See-through aqua button (click to view image)

Building Buttons Page - 2

2009-03-28T01:02:00.000-07:00

Double-click on the Gradient Overlay style name in the Layers palette. The Layer Style dialog will appear, with Gradient Overlay selected. Click on the Gradient patch to bring up the Gradient Editor.

Editing the gradient (click to view image)

Double-click on the color patches underneath the gradient bar in the Gradient Editor and set them both to white.

Click on the patch above and on the left-hand side of the gradient bar -- this is the left opacity stop. Set its Opacity field to 0%, as shown.

Creating a white-to-transparent gradient (click to view image)

Click OK to exit the Gradient Editor, and again to apply the new style.

In the Layers palette, change the fill for the shape to 0%. This will allow the button on the bottom layer to show through, as shown here.

Changing the fill of the highlight layer (click to view image)

With the highlight layer selected, open Edit > Free Transform or press Ctrl-T (Command-T on a Mac). A bounding box will appear around the highlight. Click on the bottom edge of the bounding box, and drag it upwards to squash the highlight a little bit.

Next, click on the right- and left-hand sides of the bounding box, and drag the edges of the highlight until they are just inside the button layer. Your highlight layer should look something like the one shown in the graphic here. Apply the transformation by double-clicking inside the box, or pressing Enter (Return on a Mac.)

Transforming the highlight layer (click to view image)

Switch to the Direct Selection Tool (A). Click and drag the bottom edge of the highlight path upwards to flatten it, as shown below. Use Ctrl-+ (Command-+ on a Mac) to zoom in if you need to.

Changing the shape of the highlight (click to view image)

We're finally ready to add the text! Create a text layer in between the highlight and button layer and type in your text. I've used a dark blue color for mine. I've also added a subtle drop shadow style to my text using the settings shown in the example below.

Applying a drop shadow to text (click to view image)

At this point, we've got a snazzy aqua button that will work well on most web sites, but since we've made a habit of taking things those few steps further, why stop now? Let's make our button look like it's been embedded into the page. Duplicate the button layer and drag it to the top, above the other layers. Let's call this top layer emboss; your Layers palette should now look like the image shown here.

Duplicating the button layer (click to view image)

Hide all the layer styles on our emboss layer by clicking their respective eye icons in the Layers palette. Open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss… from the menu that appears. Select Pillow Emboss from the Style drop-down menu and change the technique to Chisel Hard. Set the Size to 2px and the Angle to 90°.

Applying the Bevel and Emboss style (click to view image)

Towards the bottom of the dialog you'll see opacity fields for Highlight Mode and Shadow Mode. Set both of these to 93%.

Finally, apply a stroke to the edge of the button. You should be familiar with this by now! Select Stroke from the Layer Style dialog and give your button a 1px black stroke with 60% opacity, as shown in the dialog here.

Adding a Stroke layer effect (click to view image)

Click OK to apply the layer styles.

Let's change the Fill of the emboss layer to 0%, as shown, so that the button layer beneath it can show through.

Changing the fill of the emboss layer (click to view image)

Our embedded aqua button is complete! This image shows our normal and embedded aqua buttons.

Completed aqua buttons (click to view image)

Build Beautiful Buttons in Photoshop, Part II - 1

2009-03-28T00:58:00.000-07:00

Making an Aqua Button

In this solution, I'll show you how to make the brightly colored, glassy buttons that originated from Apple's Aqua interface many years ago, and since then have come to be affectionately known as "aqua buttons."

Examples of aqua buttons (click to view image)

Solution

Start with a rounded vector button. We're going to be adding a gradient overlay to it, so its color's unimportant -- use any color you like! The first step is to apply a gradient overlay to our button. Open the Layer Style dialog by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Gradient Overlay from the menu that appears.
Applying a gradient overlay to the button (click to view image)
In the dialog, set the angle to 90° (shown above) and click on the Gradient patch to display another dialog for the Gradient Editor, shown here.
Changing the gradient settings (click to view image)

&amp;amp;amp;amp;amp;lt;SCRIPT language='JavaScript1.1' SRC="http://ad.doubleclick.net/adj/N5620.sitepoint.com/B3463921;abr=!ie;sz=300x250;ord=[unique-string]?"&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;/SCRIPT&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;NOSCRIPT&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;a href="http://ads.aws.sitepoint.com/phpadsnew/www/delivery/ck.php?oaparams=2__bannerid=865__zoneid=76__cb=7435201dad__maxdest=http://ad.doubleclick.net/jump/N5620.sitepoint.com/B3463921;abr=!ie4;abr=!ie5;sz=300x250;ord=[unique-string]?" target="_top"&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;IMG SRC="http://ad.doubleclick.net/ad/N5620.sitepoint.com/B3463921;abr=!ie4;abr=!ie5;sz=300x250;ord=[unique-string]?" BORDER=0 WIDTH=300 HEIGHT=250 ALT="Click Here"&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/A&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;/NOSCRIPT&amp;amp;amp;amp;amp;gt;
Let's change our gradient settings using the Gradient Editor. Double-click on each of the tiny color patches below the gradient bar to change its color. Create an aqua-to-blue gradient by setting the color of the patch on the left to aqua (#3cc9e2), and the color of the patch on the right to blue (#1160c2). Set the Location of the aqua patch to 25%, and click OK to apply the gradient.

Back in the Layer Style dialog, click on Inner Glow. Set the Blend Mode to Normal, the Opacity to 50%, and the Size to about 10px, depending on the size of your button. Click on the color patch and change the color to a dark blue, as shown in the example below -- I've used #003298.
Applying an Inner Glow layer style (click to view image)
Next, we'll apply a slight glowing effect. Click on Outer Glow. Change the Blend Mode to Normal, the Opacity to 50%, the Spread to 4%, and the Size to 5px (you may need to tweak these settings to suit the size of your button). Change the color patch to a bright aqua color, as shown below -- I've used #00bae8.
Applying the Outer Glow layer style (click to view image)
Click OK to apply all the styles.

To create the button highlight, duplicate the button layer by pressing Ctrl-J in the Layers palette (Command-J on a Mac). Turn off the Outer Glow and Inner Glow styles for this layer by clicking on their corresponding eye icons, as shown here.
Turning off the layer styles of the highlight (click to view image)