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.
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.
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.
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.
With the divider layer selected change the blending mode to "Soft Light".
You should get this. Ready for text and rollovers.
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.
