Web Domination Using Photoshop

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.

Transparent aqua button

Solution

1. Place your basic aqua button on top of a faint, patterned background, as shown here.

Basic aqua button on top of faint,. striped background

2. Double-click on the f icon for the layer -- this will bring up the Layer Style dialog box. Select the Gradient Overlay style and click on the Gradient swatch to bring up the Gradient Editor.

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

4. Click OK to exit the Gradient Editor, and OK again in the Layer Style dialog box to apply the style.

5. Set the fill of the button layer to 0%, as shown at left. 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.

Changing the fill of the button layer

6. Double-click the f icon to open the Layer Style dialog box, 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

7. Next, select the Stroke style. Add a dark blue (#0d487b) 1px stroke, with about 75% opacity, as shown below.

Adding a stroke

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

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