Step 1
Change your Background Color to #232323 then create a new document
Width: 400 Pixels
Height: 400 Pixels
Background: Background Colour(should be the colour we just set)
Step 2
Create a new layer then take the Rounded Rectangle Tool.
Then Press X to switch your colours around so your foreground colour is #232323.
Step 3
With the Rounded Rectangle Tool click and drag a shape to look like a navigation bar, you shouldn't see anything when you let go, because it is the same color.
Step 4
Now while your on "Layer 1"(should be the layer that is active already) go to the Blending Options and create a black outer and inner glow.
Step 5
Now lets Load the Selection of this layer. The little navigation bar should be selected now.
Step 6
Lets reset your colors now. Then grab the Gradient tool with these settings:
And from above your selection you want to drag down to about the midpoint of the navigation bar like shown in the image below. It doesn't have to be EXACT, just roughly, experiment with going down more or less and see what you like.
Step 7
Now you can add whatever text you like to the navigation bar. If you want to make inset lines to separate each button then follow this step. Create a new layer then grab the pencil tool. Change the brush to a solid circle brush and have the diameter at 1px.
Step 8
You should have white and black as your foreground/background colors. Zoom in until you can clearly see the navigation bar top and bottom pixels. With the pencil tool drag a line down. Then change to the other color by pressing X and drag down on either side of the line you just made before, doesn't matter which side. Then finally change the blending mode to Overlay.
Final Product
And your done, doesn't that just look dandy?!?
