Web Domination Using Photoshop

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

As we're talking about buttons in this chapter, I'll show you how to create the button effect here, but if you've taken a particular liking to the brushed metal background I've used in this chapter, don't worry?we'll learn how to create that in the next chapter!

Solution

1. 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 box 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

2. In the dialog box, set the angle to 90° (shown above) and click on the Gradient patch to display another dialog box for the Gradient Editor, shown below.

Changing the gradient settings

3. 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.

4. Back in the Layer Style dialog box, 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

5. 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 might 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

6. Click OK to apply all the styles.

7. 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

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

Editing the gradient

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

10. 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 below.

Step 10: Creating a white-to-transparent gradient

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

12. 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 at right.

Step 12: Changing the fill of the highlight layer

13. 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.

14. 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 image below. Apply the transformation by double-clicking inside the box, or pressing Enter (Return on a Mac.)

Step 14: Transforming the highlight layer

15. 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

16. 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

17. 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 below.

Duplicating the button layer

18. Hide all the layer styles on our emboss layer by clicking their respective eye icons in the Layers palette. Open the Layer Style dialog box 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

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

20. 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 box and give your button a 1px black stroke with 60% opacity, as shown in the dialog below.

Adding a Stroke layer effect

21. Click OK to apply the layer styles.

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

Changing the fill of the emboss layer

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

Completed 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.

1. 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 below.

Copying styles to another layer

2. 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 above.

3. Change the fill of the highlight layer to 0%.

4. Add the button text and repeat step 2 to copy the drop shadow style we used for the original text.

Button layer with styles applied

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


Highlight layer with styles applied

The final rectangular button, and the rounded button on which it was based