Clean Business Header
Learn how to create a full header that can be used for a business site to even a small blog site.

author:
  Ryan
title:
  Clean Business Header
date:
  Fri 1 April 2005
category:
  Web Layout and Design
credits:
 


new document

Make a new document. I used 650x180



selection

Start out by making a new layer and grabbing the Rectangular Marque Tool. Make a selection like below:



Fill it in with a dark color. I used #555555.





Gradient Fill

Make a new layer. Using the Rectangular Marque Tool make a selection like this:



Grab the Gradient Fill Tool and use these gradient settings:



Fill in the selection by dragging from bottom to the top of the selected square box with the gradient fill tool:





make horizontal lines

Make a new layer. Now grab the Line Tool, and make horizontal lines accross the bottom of the gradient like below:



I made a dark line and a white line under it:



Lines are pretty basic stuff and can make anything look better just by placing them correctly.



button shape

Make a new layer. Grab the Rounded Rectangular Shape Tool and use these settings:



Now make your button shape:





Blending Options
Right click the button layer and go to Blending Options. Apply these following settings:





Now make sure the line layer is above the button layer:



This way you can nudge the button down a bit to cover the bottom rounded corners like below:





Duplicate
Duplicate the button and move it to the right, duplicate it 3 times so you will have 4 buttons to line up like below:





add fonts and logo
Now you can start adding the fonts and logo detail. I used Tahoma Font for the buttons:





add detail
Now you go on and add your own detail, this is what I completed with:



Enjoy.

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