Professional Top Nav Bar

This photoshop drawing tutorial does not need to be followed exactly. The idea here is to create a re-useable top navigation in photoshop for your website or your clients website.

Lets get started!

Step 1. Drawing The Shape

Open a new document with the dimensions of 700x60 pixels. Now using the Rounded Rectangle Tool  and set the radius to 6px.

Now draw a rectangle very close to the size below.

Note: Be sure not to draw it too large because we need to leave space for a drop shadow.

Click to enlarge

Step 2. Layer Styles

We are ready to apply the styles. Make sure the new layer that was created is selected and then navigate to Layer > Layer Style > Blending Options.

Drop Shadow: Apply these settings

Inner Shadow: Apply these settings

Gradient Overlay : Apply these settings

Stroke: Apply these settings

Click OK to apply the new settings. You should get this.

Click to enlarge

Step 3. The Dividers

To draw the dividers, first create a new layer and rename it to "divider" and draw a vertical divider with a 1px wide black vertical line on the left and a 1px wide white vertical line on the right, all on the same layer. The height will extend on the inside of the nav bar. Similar to this.

Next, drag the vertical divider to the left part of the the nav bar. like this.

We need 6 more of these to create our button dividers. To do this make sure the "divider" layer is selected and the move tool is selected. Hold down the ctrl+alt+shift keys together and drag a new copy of the "divider" to the right.

Note: Just eye-ball the positions for now, we will distribute them perfectly later.

Do this for a total of 6 times. This will leave you with 7 total divider layers.

Click to enlarge

For the most right divider align it to the right of the nav bar. Like this.

Link all 7 of the "divider" layers together.

Select the move tool and then at click on the "Distribute Horizontal Center" button. This align your dividers up perfectly.

Now, delete the outer most divider layers. We were just using them for even distribution. You should get this.

Click to enlarge

With the divider layer selected change the blending mode to "Soft Light".

You should get this. Ready for text and rollovers.

Click to enlarge

Step 4. Finally Touches

For mine I have added text and added a subtle Drop Shadow style to it. Then I added a small pixel arrow for a rollover and a page indicator. That's it! Be creative and try different color variations and different styles. You can download .psd source here.