Business Header and Navigation
Create a full blown business web page header complete with a navigation. You will also learn a lot of use of the Rectangular Marque Tool and Line Tool in this tutorial.

author:
  Ryan
title:
  Business Header and Navigation
date:
  Tue 28 June 2005
category:
  Web Layout and Design
credits:
 


new document

Make a new document. I used 600x120 for this tutorial. Leave the background white for the time being.



Marque Tool selection

Make a New Layer. Grab the Rectangular Marque Tool and make a thin selection at the top from the left to the right:



Fill it in with a dark medium red/maroon color. I used #C92F2F.



apply line

Using the Line Tool apply a black 1px line under the red thin rectangle you just created:



Using the Line Tool again make another line under the black line you just created. Use a nice soft grey. I used #CCCCCC. You wont be able to see it now, but you will in a few more steps.





make thin rectangle

Make a New Layer and use the Rectangular Marque Tool to make another thin rectangle:



Fill the selection in with any color you wish. Now right click the layer and go to Blending Options. Click on Gradient Overlay and apply these settings:



you should have something like this:



Ok now that the detailed part of the header is complete we can now apply the simpler detailing.



Marque Tool selection
Make a New Layer and select the Rectangular Marque Tool again and make a selection like below:



Fill it in with a light toned grey. I used #D2D2D2





Blending Options
Now right click the layer and go to Blending Options. Select Inner Shadow and apply these settings:



Now you got something like this:





Marque Tool selection
Make a selection with the Rectangular Marque Tool like below



Now press CNTRL+U. We are now going to change the color so it gives the grey a different toned feel instead of just a solid color.



Now you got something like this:





working on the navigation part
Now we can start working on the navigation part. This is pretty simple. We will be using the Marque Tools along with the Line Tool to accomplish the creation of the menu. First make a New Layer. Select the Marque Tool and make a selection like below:



Lets start out with a nice dark color for the menu. I used #121212.





makes line
Now its time to get creative and use the Line Tool. Make another New Layer and makes lines like I did below:



Also note for the top horizontal line I used 2px instead of 1px. Ok finish up with your lines and now lets move on to the final steps!



dark grey Fill
Make a New Layer. Grab the Rectangular Marque Tool and make a selection like below:



Fill it in with a dark grey. I used #5D5D5D.





final touches
Add your final touches, yes this is the part where you.. yourself get creative! Find a nice font to use, make an appealing logo and once your all done show it off to your friends! I hope you enjoyed the tutorial. Here is my final work:



Enjoy.

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