Having a simple, yet attractive navigation bar is important for a website.  An elegant but unobtrusive navigation system can really make a difference in the overal appeal of your site's design.  Ready to make one?  Good, let's get started.

Step 1:

First, open up a new document with the following settings:

I'm making my navigation bar short for the purpose of this tutorial.
In all likelihood, your navigation bar will need to be longer, so make the image wider.

Step 2:

I'm going to be using a dark background.  I filled the background layer with the color #21201E, but you can use whatever you want.

Step 3:

Bring out your rounded rectangle tool (pressing U on your keyboard will get you there quickly, or you can select the tool from the shapes box in the menu).
Make sure the settings are the following:

Step 4:

Use the tool to make a shape something like this:

Step 5:

Right-click on the layer in the layers window and press Rasterize Layer.  Then use the rectangular marquee selector (press M) to select the bottom half of the shape.  Once selected, it should look something like this:

Press delete on your keyboard to cut off the bottom half of the shape.

Step 6:

Now, go into blending options for the shape.  Use these settings:
Inner Shadow
Gradient Overlay (Gradient colors are #58504A on the left and #877E77 on the right.
Stroke (Stroke color is #4B4539)

You don't have to use those exact settings, but those are the ones I'll be using.  Feel free to play with the colors to achieve a more customized finished product.

After setting the blending options, your shape will look something like this:

• 1
• 2
• 3
• Next »