Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Basic Header and Navigation

Basic Header and Navigation


1) Make a new document, anysize doesn't matter. I used 600x100. Start out with #E5E5DD as the background color.

2) Now using the Line Tool we want to make 4 lines. 2 of the lines will be spred apart and the other 2 will be joinged to make the line 2px wide. First do the first line. Then duplicate the layer. For example:

Move the duplicated line layer down 2 nudges and do the same for line 3 and 4 but join them together:

3) The simple part is done. Now using the Rounded Rectangular Shape Tool make a shape like this on a new layer:

4) Apply these blending options to the layer:

5) Now we got our navigation almost done. Using the Line Tool again we want to make small horizontal lines in the navigation, this will break apart the buttons and links. So make a new layer and grab your line tool:

6) Select your font tool and now start adding your font. I used these font settings:

7) Add your logo and company name and your done! Now use this to incorporate into your basic layouts and so forth:

Basic Header and Navigation Tutorial: Final Result


Author's URL: Ryan Trafford
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Basic Header and Navigation"

Only registered users can write comment

No comments yet...