Creating WebSite Header // Adobe Photoshop Tutorial

Step 1

First of all create a new document - for the purpose of this tutorial I have created a document 650 by 200 pixels although choose a size that you want :) We are going to be starting with creating a background so set your foreground colour to #525253 and your background colour to #2e2e2e. Select the gradient tool and set it to radial. Add a gradient to Layer 1 by left clicking somewhere in the middle and dragging to one of the sides and releasing.

Step 2

Secondly we are going to be adding a banner background. Create a new layer by going Layer > New > Layer. Select the rounded rectangle tool from the tools window and set the radius to 10 pixels. Make a fixed size selection of 600 by 170 pixels in the middle of your document. Set your foreground colour to #f9f8e4 and your background colour to #eae6c3 and using the techniques that we learnt in the first step with the gradient tool, add a gradient in the selection.

Step 3

Thirdly we are going to finish the backgrounds off by adding a background for the navigation. So create a new layer (Layer > New > Layer) and make another rounded selection of 600 by 50 pixels using the rounded rectangle tool. Now we are going to be adding another radial gradient to our selection, this time our foreground colour is #8ac43f and the background colour is #7ba642.

Step 4

Now we are going to be adding some layer styles to our navigation background. We are going to do this by going Layer > Layer Style > Gradient Overlay for our first layer style.

For our second layer style go Layer > Layer Style > Pattern Overlay - that is a 3 by 3 pattern with a diagonal line if you want to make it.

Your site header should now be looking something like this.

Step 5

Next up we are going to be adding in something to sit beside our soon-to-be-added text. This can either be your site's logo or just a custom shape which I've added below. I've done this by selecting the custom shape tool and selecting an arrow and then filling it with the colour #7aa641.

Step 6

We are now going to be adding a couple of layer styles to this arrow layer. Firstly go Layer > Layer Style > Outer Glow and enter these settings.

Secondly go Layer > Layer Style > Stroke. The 0% opacity of the stroke is intentional - it gives a 1 pixel transparent part around of the arrow (between the outer glow and arrow).

Now your arrow should be looking like this.

Step 7

Next up is the title text for the site header. Select the text tool and add your website's name (the colours I have used are #292929 and #7aa641).

Step 8

Now we want to have the text to have the same layer styles as the arrow does. So instead of just repeating step 6 for the text, we can right click the arrow layer and go Copy Layer Style and then on the text layer right click and go Paste Layer Style.

Step 9

Lastly we are going to be adding some text links to our navigation bar. So using the text tool chuck in some text links. The font styles that I have used are: Arial, Bold, 14pt, Smooth, #ffffff.

Step 10

Go Layer > Layer Styles > Outer Glow.

And you're finished.