Two weeks ago, sitepoint.com published Part I of this tutorial on the subject of building navigation buttons to impress, using Photoshop. Targeted at Photoshop beginners, here’s the second instalment — it’s time to further develop your button-creating skills!
This chapter is an excerpt from my book
The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques, which is available for a limited time as a free PDF download, thanks to 99designs.com.
That’s right — the whole book can be downloaded for FREE.
Read the first part of this series if you missed it, or feel like a refresher.
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."
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.
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.
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.
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.
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.
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.
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.
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.
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.)
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.
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.
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.
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°.
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.
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.
Our embedded aqua button is complete! This image shows our normal and embedded aqua buttons.
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.
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.
Change the fill of the highlight layer to 0%.
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.
Making a Transparent Aqua Button
We can also make our aqua buttons see-through, like the one shown here.
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.
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%.
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.
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.
Next, select the Stroke style. Add a dark blue (#0d487b) 1px stroke, with about 75% opacity, as shown below.
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.
Click OK to apply these new styles. And — as you can see below — we’ve got our final transparent aqua button! Swish, very swish!
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.
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.
Add a dark green, 1px stroke layer style to your button, as shown below.
Add an outer glow using a bright version of the button color, as shown below.
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.
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.
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.
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.
Repeat step 7 with the bottom-right point. The sides of your shape should now look like those shown here.
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.
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.
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.
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.
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.
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.
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:
- 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.)
- 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
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.
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.
Not bad, huh? Now, select the Satin layer style and apply the settings shown here:
- 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.
At this stage, our button’s looking quite glassy, as can be seen in the image below.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
Add an anchor point to the side of the button as I’ve done in the example below (you might need to zoom in).
Choose the Convert Point Tool, which is also in the flyout menu of the Pen Tool (P).
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.
If you like, repeat the effect on the other side.
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.
Solution
- Start with a rounded rectangle vector shape, as shown below.
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.
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.
Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown below.
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.
This will draw a line connecting the two points and complete the shape, which is shown below.
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?
Solution
- 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).
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!
