Stylish And Professional Navigation Bar

In this tutorial I’ll be showing you step-by-step how to make a very very sleek navigation bar, good for a business website template. You can view the result of this tutorial in the below image.

1.

Firstly start by making a new document in Photoshop, I used a size of 760×90 pixels. Leave the background color as white (#ffffff.)
Now make a rectangular selection near the bottom of the document sized 740×38 pixels, you can fill your selection with any color.

2.

Right-click the layer you created before and go into the Blending Options, now apply the following layer style settings:

1. Inner Shadow
2. Gradient Overlay (This is basically where you choose the main color of your bar.)

And your bar should now look like this:

3.

Select your main navigation bar again by holding ctrl and clicking the layer thumbnail. Move the selection down one pixel (down arrow key) then half the selection.

Inside of this selection draw a red or orange gradient. The color I used for my gradient was #e25333.

Now change the layer mode for this layer to Linear Dodge.

That layer mode change didn’t change much, but it blended it in a bit better with the red color.

4.

Now we’ll add in some nice buttons. Start by making a selection on the left side sized about 80 x 38 pixels.

If you’re on a new layer, draw a red gradient inside of your button selection. I grabbed the colors for my gradient from the gradient on the original navigation bar.
(#d02223 and #650b0b.)

Lower the Fill for this layer to 80% and apply this Inner Shadow.

Add in some nice button-text.

After writing out your text in a nice clean font apply the following layer style settings:

1. Drop Shadow
2. Gradient Overlay

Not much change, but nice subtle tweaks

5.

Duplicate the button and text layer and move them along so theres about 10 pixels space between the two, repeat this a couple more times.

Hide the button layers for all of them except one, this indicates that the home button is a rollover.

6.

Lastly for a small touch you can add in a company name logo or something.

It’s very simple, just some text, two different colors, with a Drop Shadow and Gradient Overlay.
Thanks for reading the tutorial, I hope you enjoyed it and learnt something from it. If you want you can download the PSD file for this tutorial from here.

You can view more tutorials here.

Topics: Design, Navigation, Photoshop