Modern Layout Header and Navigation
Create a modern layout header and navigation from scratch in this very thorough step by step tutorial.

author:
  Ryan
title:
  Modern Layout Header and Navigation
date:
  Tue 30 November 2004
category:
  Web Layout and Design
credits:
 


New Document

Make a new document, anysize doesn't matter. I used 600x150. Start out with a white background.



Marque Tool

First off we want to make new layer now make selection with the rectangular marque tool like below:





Paint Bucket Tool

Fill it in with your paint bucket tool. Now use the Line Tool to make 4 lines, top near the top of the rectangle and 2 at the bottom like below:





Add a Soft Drop Shadow

Find the graphic you want to use in the header. I used a greyscale graphic of a building. I thought it best suited the layout. Add a soft drop shadow to the header aswell:





Rectangular Marque Tool

Make a new layer. Make a selection below using the rectangular marque tool:





Insert Color

There are the colors we will be using with the selections we make:



Ok back to using the select tool and paint bucket tool.
Make a new layer:



(You may add a drop shadow to this layer if you wish too, I used one).
Make a new layer just above the background layer:





Buttons

Now we got pretty much the whole header done, whats missing? Oh yes buttons. Use the Rounded Rectangular Tool and set the radius to 15. Make a new layer. Draw a shape like below.



Use the rectangular select tool to remove the access part of the button:



Press DELETE!


Edit Button

8) Ok lets make the buttons have some character. Make a little selection like below and fill it in with grey (note this is on the same button layer, dont need to make a new layer):



Add a soft drop shadow and your button is done!


Resize and Overlay

9) Now its up to you, I taught you the basics now use the skills to add more simple characteristics to the header. For example look at my finished header:



For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?