This is the second installment to a series of tutorials showing you how to make a quality interface. Make sure you have done tutorial #1 before doing this one.

 

Ok, you have made it this far. This section will show you how to make the navigation bar, and buttons.

 

The first step is to make a rectangular selection with your square tool and fill it with a dark gray like the picture below.

 

While selected, go to edit>stroke Make the settings that that the color is a very dark gray, the border is 1 px and it is bordering on the outside of your selection.

Your square should look like this when zoomed in.

Now, make a new layer and with the same selection, stroke your image with a light gray.

Now, in order to give it an inner bevel effect we are going to erase half of the light gray border. Select and delete it so that the light border is on the right, and bottom side of the rectangle, and the darker portion is on the top and left. Your image should look like the one below.

Now we are going to make the buttons. Zoom in on your selection by pressing ctrl and + select a small rectangle inside your newly made dark rectangle and make a new layer. Use your gradient tool with a light and dark gray to make a gradient so that the lighter portion is on the top. Your should be getting the gradients down pretty good by now. Now using the same stroke method, give it a nice dark border.

Your button should look like this when zoomed in.

Now, go to layer drop down menu and select "Duplicate layer" This will duplicate your new button. Keep duplicating and aligning them like the image below, just make as many buttons as you are going to need on your site.

Your interface should now look like the one below.