In this tutorial I will show you how to make an easy but effective plastic style navigation bar like the image below:

The first step is to make a new image, about 200x200 px. depending on how big you want your nav to be. Use the square selection tool to make a rectangular selection like the one below.

 

Now make a new layer.

 

Change your foreground color to a very light gray. Now get out your gradient tool. Change the gradient setting to "Foreground to transparent"

Now use your gradient tool to make a gray gradient making sure that the gray starts from the top and fades out to the bottom. Now make a new layer and use the same method to make a small white gradient starting from the top and fading out in about the middle section of the button.

Now that we have our gradients all done we are going to give our button a nice border. So, keeping the same selection go to edit>stroke.

Make the size 1px

the color a medium gray

the layer style normal

and make it stroke on the inside

Your image should look like mine.

Now, merge your layers except for your bg layer. Duplicated your layer by selecting "duplicate layer" on the layer drop down menu. Keep duplicating your layer and positioning your buttons until you have enough to satisfy you.

Your image should look similar to mine:

Now I added a nice gray rectangle behind my buttons to help separate it from the rest of my page.

And just to make it a little more interesting I add a slightly lighter rectangle behind the last one.

The nest step is to add a small medium gray box at the top for a title bar.

And lastly, to add your text.

Now you are all done. You have learned a simple and effective way to make a nice professional navigation bar.