Step 1
Open a new document of any size, for this tutorial I'm using 722x162.
Step 2
Create a new layer.
Set your foreground color to #D7D7D7. Using the rectangular marquee tool make a square selection in the center of the canvas, and fill this selection with the flood fill bucket.
Press CTRL + D on your keyboard to deselect the area.
Result:
Step 3
Double click this layer, and apply the following blending options:
Drop Shadow:
Inner Shadow:
Bevel And Emboss:
Don't forget to apply the Gloss Contour in the Bevel and Emboss Blending Options
Stroke:
Press Okay
Step 4
Hold CTRL on your keyboard and click this layer to select everything within this layer. Go to
"Select->Modify->Contract" with a setting of 10 pixels:
Your canvas should look similar to this:
Step 5
Press CTRL + J on your keyboard to duplicate this layer. Next double click this layer and apply the following blending options, or choose an alternate color:
Color Overlay:
Stroke:
Result:
Step 6
Get out the Polygon Lasso Tool (
) hold down the ALT key, and deselect a section of the selection as pictured bellow:
Tap 'Delete' on your keyboard to delete this portion of the image.
With the selection still active, click once on the layer bellow this, and tap 'Delete' on your keyboard once again.
At this point you can add some text to the header buttons.
Here's how these buttons might look in a vertical navigation system:
Download Stylized Glossy Navigation Source Package here.
