Step 1: Creating the Workspace:
Start by creating a 500 x 200 Document and filling in the background as #808080
Step 2: Make the base layer
Make a new layer and then grab your Rectangular Marquee tool and set the style to Fixed Size and specify the dimensions as 500 x 40 px. You should now have a selection like this on your document:
Right click within the selection and select fill. Fill it in with any colour you want because we will be applying a gradient very soon. Once you have filled in your selection make sure you change the style setting back as Normal:
Right click on the layer and select Blending Options and apply the following settings:
Drop Shadow:
Inner Glow:
Gradient Overlay:
Stroke:
Click OK and our base of our Navigation bar should look like this:
Step 3: Add in the gloss effect
Next it's time to add the gloss. So locate the layer with the base of navigation on, hold Ctrl on the keyboard and click on the thumbnail of it in the layers panel. This will select the layer again.
Once the layer is selected go to Select > Modify and then choose Contract. Set it to contract by 2px which should give you this result:
Make a new layer and then click fill and fill it in with #FFFFFF:
Resize the white shape we have created like so:
Finally lower the opacity to about 20% on the layer panel till you get the effect:
Step 4: Make the first button
Next make a new layer and make a selection with the Rectangular Marquee tool like so:
Right click within the layer and select fill. Fill it in with any colour because we will be applying a gradient colour soon.
Step 5: Apply some styles
Now on this tab right click on the layer it's on and select Blending options and apply these settings:
Inner Glow:
Gradient Overlay:
Stroke:
Apply all these then click Ok and our first nav bar section should look like this:
Step 6: Create the inner gloss
Now still on the current layer hold Ctrl on the keyboard and click on the layers thumbnail and then go to Select > Modify > Contract and contract by 2px:
Then make a new layer and right click within the selection and select fill. Fill it in with #FFFFFF:
Shrink the size of the square like so:
Then lower the opacity of the layer to about 20% and you should get this result:
Step 7: Duplicate your buttons
Make sure that the gloss on the nav button is in alignment with the gloss on the base of the navigation. I also extended the gloss on the nav button so it meets each end. For best result I think you should do this as well.
Finally duplicate the Nav button and Gloss layer until you have 4 buttons:
Step 8: Add in some text
Finally add in some text and your good to go!:
The Final result:
More Tutorials: 
