Article
About the Author
Corrie Haffly
Corrie is the lead designer and developer for PixelMill and their in-house brand, jgtemplates. This would-be triathlete has a mathematics degree but wishes she had double-majored in computer science and art instead. Maybe next time...
Build Beautiful Buttons in Photoshop, Part II
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.
