Make a new document. For this tutorial you can use 800x50 with a resolution of 72 pixels/inch with Colour Mode set to RGB Colour 8 bit. But for the purpose of this tutorial i will just show you how to make the buttons for the navigation bar. You can use a bigger canvas for many buttons, or do each button individually.

Make a box that takes up most of the area, but leave a border around your button.

Right click the layer and click Blending Options. Use these options for your button. The colours are a variable.

(Click for larger version)

Colour: Black (#000000)

(Click for larger version)

Colour: #99FFFF

(Click for larger version)

Colour: #003399

(Click for larger version)

Highlight: White (#FFFFFF)

Shadow: #000099

(Click for larger version)

(Click for larger version)

(Click for larger version)

(Click for larger version)

Colour: #66CCFF to #0066CC

(Click for larger version)

Colour: #000000

Click OK

Now to make the white gradient, use the Eliptical Marquee Tool and draw an elipse covering the top half of the button and draw a Gradient from White to Transparent on a new layer.

Now Ctrl + Click the layer with the Blending Options applied

Go to Select » Modify » Contract and select 2px

Then Select » Inverse

Then press Delete

Add the text for the button, and there you have it. You can play with the text, putting it above the gradient or below or in a different colour