Create Glossy Buttons in Photoshop
Posted on Oct 01 2008 by Chad Casey
Glossy 'Web 2.0'-ish navigation buttons are all the rave. Find out how to make some of your own!
First, create a new document (File >> New), with size 700 x 70 pixles, 72 dpi (web standard).

Next, select the Shape tool (U), and create a rectangle. Type Command + T and resize it to 650px x 55px in the Options pallet. Press Enter twice to apply the changes. Rename the layer something like ‘Nav Background.’

 Now in the Layers Pallet, right-click the new layer and select Blending Options:

Click on the gradient to bring up the Gradient Editor:

Notice the four numbered color ‘flags.,’ 1-4. Click on 1 and set the color to  #7e7e7e. Click somewhere between 1 and 4, and set that flag color to #d3d3d3, and set the Location to 50%. Add another flag with color #c6c6c6, location 50%. Modify flag 4 to color #f1f1f1. Click OK.
Now your gradient should look something similar to this:

Now we create the rollover effect. Having selected the shape layer, click on the Layer menu, and then Duplicate Layer. Type Command + T and resize the width value to 130px. Apply the changes. Now with the Move Tool (v), align the left edge with the left edge of the Nav Background. Name this layer ‘Rollover.’

Now bring up the Blending Options window for this layer and find your way to the Gradient Editor. Click on and hold the lighter flag in the middle (formerly flag 3), and drag it off so it disappears. Click OK, and then in the Gradient Overlay window check ‘reverse’ to the right of the gradient preview.
Now let’s add an inner shadow to make the button seem as though it’s being pressed into the navigation:

Once you’ve done this, click OK.
Now duplicate this layer again, and move it so it’s just to the right of the Rollover button. Rename this duplicate layer to ‘Active.’ This is what the button will look like when it’s clicked. Go into the Blanding Properties and adjust the colors of the gradient to distinguish it from the Rollover.

Now just add some text with the Horizontal Type Tool (T).

Notice I added a Drop Shadow behind it. I did this by going into the Blending Properties of the Nav Background and checking ‘Drop Shadow,’ sticking with the default values.
Top
Lautus Design Bill Hine for Maine District 93 Lautus Design Stephen J Lattanzi Lautus Design Thruhiketrilogy Lautus Design Pricefalls