Business Header

Step 1.

Open a new document or open an existing the one I'm using is 780x160. Fill the background with white (#FFFFFF).

Step 2.

Alright, first we're going to create a new pattern to use with this header. So go ahead and press Ctrl + N on your keyboard to create a new document, and set the dimensions at 10x6 with a transparent background (see image bellow):

Next set your foreground color to: #FFA800 and get out the Pencil tool ( ), with the following settings:

With the pencil tool, complete the following pattern by clicking until you have a pattern that looks exactly like this:

Step 3.

Now to make a pattern out of this go to: Edit->Define Pattern, name the pattern "angled lines" and press okay.

Now minimize the 10x6 image, and move back to our main layout image we're prepared to work.

Step 4.

Create a new layer, if you haven't done so already, and make a selection such as I have done here:

Click to enlarge

Note: This selection is 6 pixels in height, and spans the entire length of the canvas.

Next get out the bucket fill tool ( ) and set it up like so:

Make sure you select the new pattern we had made earlier in this tutorial.

Once that is done, fill in the selection on the canvas.

Result:

Step 5.

Next create a new layer, set your foreground color to #E1E1E1, get out the pencil tool again and apply the following settings:

Now draw a line all the way across the length of the canvas about 2 pixels above the orange pattern we just made like so:

Step 6.

Now using the same settings, create a new layer, and draw another line all the way across the length of the canvas about 2 pixels bellow the orange pattern this time like so:

Now double click this layer and apply the following blending options:

Drop Shadow:

Result:

Step 7.

Next create a new layer that is directly above the background (so the new layer is bellow each of the previous layers - see image)

On the new layer, using the rectangular marquee tool, make the following selection:

Click to enlarge

Fill this selection with white (#FFFFFF) and press Ctrl + D on your keyboard to deselect the area.

Now double click this layer, and apply the following blending options:

Inner Glow:

Result:

Step 8.

Next press Ctrl + T on your keyboard to open up the transform tool and drag the left and right sides of the box off of the canvas to hide the "inner glow" on the right or left sides: (see image sequence)

Drag each of the right and left sides outward:

Press return on the keyboard to finalize the transformation, result:

Step 9.

Create a new layer, and set your foreground color to: #EEEEEE. Get out the pencil tool and set it up like so:

Draw a line all the way across the entire canvas about 3 pixels bellow the box we'd just created in the previous step.

Result:

Step 10.

Now we'll make the buttons. Create a new layer. Make the following selection with the rectangular marquee tool somewhere on your canvas were you'd like your button:

Go to Select->Modify->Smooth with a setting of 3 pixels:

Fill this selection with #F3F3F3 and press Ctrl + D on your keyboard to deselect the area:

Double click this layer, and apply the following blending options:

Inner Shadow:

Outer Glow:

Stroke:

Result:

Step 11.

Next duplicate your button layer by pressing Ctrl + J then using the move tool to move your buttons to the left to right.

Tip: Holding Shift while you move the button will ensure that it stays in line with the other button(s).

Result:

Step 12.

Next we'll add the text to our button(s). Set your foreground color to: #575757 and apply text to your buttons.

The font used here is an 11pt verdana bolded.

Step 13.

Next we'll create a spot for the company logo to be placed. Create a new layer on top of all other layers:

Make the following selection with the rectangular marquee tool:

(notice I decided to spread the buttons out a little bit, I thought they needed more space between them...)

Click to enlarge

Go to Select->Modify->Smooth with a radius of 4 pixels:

Fill this selection with an off-white (#FEFEFE) and press Ctrl + D on the keyboard to deselect.

Double click this layer, and apply the following blending options:

Gradient Overlay:

Result:

Step 14.

Next apply your company logo, and name in this area. Notice that the logo and company name belongs in the top left corner of the page this is the first thing the user's eye sees when he/she views the page.

This is a very important design technique for any business site. Brand that company logo.

The font used for the common name is called Alexis.

Step 15.

At this stage you want to continue to refine the header design, here I've added a few small details to the buttons. Just basic circles on either side with a slight 'inner glow' blending option applied. As well as some orange bars across the top of them to help them stand out a little better. Finally I added the company slogan in the top right in a basic font.

Here's my final result:

Click to enlarge

I hope you've learned a few neat tricks while doing this tutorial, thanks for reading.