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:

image 1

image 2

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:

image 3

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


Author's URL: Ryan Trafford
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Basic Header and Navigation"

Captcha