Photoshop  Home Photoshop Web Layout Basic Header and Navigation
rss

Basic Header and Navigation

Author: Ryan Trafford More by this author


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



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Basic Header and Navigation"