Glossy Navigation Buttons

1. First of all as usual, create a new document so you have some space to make the buttons in.

I used a document size of 400 x 100 pixels.

2. First you'll need to make a selection, so use the rounded rectangle shape tool to make the selection, then fill your selection with a gradient of #6c7c84 to #5a676d.

3. Right-click the main layer and go into the Blending Options.

Apply and change the following layer styles:

You should now be left with a button like this:

4. Create a new layer (Layer > New > Layer...)

Select your main button layer by holding ctrl and clicking the layer's thumbnail. Now on the new layer draw a Whit to Transparent gradient from the top of the button to the bottom.

Cut the gradient exactly in half.

Change the layer mode to Soft Light and lower the opacity to 40%.

5. Again create a new layer. Now select the main button layer. Contract the selection by 1 pixel (Select > Modify > Contract) now fill the selection with white. Contract the selection by another 1 pixel then press delete.

Use a large, soft brush to erase away the bottom. Now change the layer mode to Soft Light and leave the opacity at 100%.

Apply the same method to a line for the bottom.

6. Now you just need to add text. For the arrow I used 11pt Tahoma, for the rest I used Tahoma 12pt, Bold.

I also added this Drop Shadow to the text layer.

Thanks for reading this tutorial. Hope you enjoyed.