Creating a Web Page Header in Photoshop

The most important graphical element of any website is its header image. It's the image that will be seen more than any other on your web site, so it's important to get it looking good.

This tutorial gives an example of how to use Adobe Photoshop to make a graphical header image for your web page, that has some button functionality too.

1 – Creating some curves with the Freeform Pen Tool

Open Adobe Photoshop and make a new image. Set the image's width to the width you'd like your header to be on your web page.

Hold down on the Pen tool, and select Freeform Pen. Draw a small line. (Make sure you have the "Paths" option at the top left of the screen selected.) You can hold down Ctrl and drag the points around, or you can manipulate a single point by dragging its "arms". Remember to always hold down Ctrl while you do it.

Use curves liberally in your web pages. A number of factors, including the easy use of tables, has made modern web design very straight-edged. By using curves in your pages, you can give your page a much more organic feel.

2 – Manipulating the Path

Hold down Ctrl and drag one point to each side of your image. Drag the arms away from the points to make the curves more gradual. To see outside the canvas, you may need to maximise the window you're working in, or zoom out (Ctrl -).

3 – Extending the Path

It's important that you form a whole shape with the Freeform Pen tool. Simply creating a line isn't enough.

Without pressing Ctrl, click on the line just next to the leftmost point. This will create a new point. You can then drag the leftmost point up above the top of the image as shown.

4 – Creating a full circuit

Repeat the process, by clicking just below your highest point, to make a new point and then moving your highest point way over to the right.

5 – Creating a selection and filling it with the Paint Bucket

Right click your line (you must right-click a part of the line that's inside your image.) Click Make Selection. This connects the last point on your line to the first point. (In Adobe Photoshop 5.0, you may have to right-click again and click Turn off Path, to make the line go away. In Adobe Photoshop 6.0 and Adobe Photoshop 7.0, it's automatic.)

Make a new layer, select a colour, click on the Paint Bucket tool, and fill the selected area.

6 – Creating a shadow and bevel

Right click on your layer, and select effects (Adobe Photoshop 5.0) or Blending Options (Adobe Photoshop 6.0 and Adobe Photoshop 7.0). Give the layer a Shadow and an Inner Bevel.

This page of the tutorial deals with adding gradients and watermarks.

7 – Making an uneven Gradient

Click on the Gradient Tool. Then click on the visual representation of the gradient.

Put in an alternating series of about eight black and white tabs, as shown, and click Ok.

8 – Applying the Gradient

Create a new layer. If the blue area isn't already selected, Ctrl+Click the layer that the blue area is in.

Click on your new layer in the layer list, and apply the Gradient Tool across it. Change the layer from Normal to Overlay.

9 – Choosing a colour and texture

Press Ctrl+D to deselect your selection. Click on your blue layer again. Press Ctrl+U to bring up the Hue/Saturation properties. Play with the sliders until you've got a nice color.

Although Adobe Photoshop 6.0 and Adobe Photoshop 7.0 have special texturing effects, I still prefer the old Sandstone texture. Click Filter > Texture > Texturizer, and choose "Sandstone".

Whenever you make anything coloured in Adobe Photoshop, always play around with the Hue/Saturation Properties (Ctrl+U) to see if you can find a better colour. Don't be afraid to reduce the saturation - your image may look drab at first, but you'll find it will add some realism.

10 – Creating a watermark

Click on your topmost layer in the layers list.

Click on the text tool and type "kj" in Wingdings font, with the colour set to black, and the font size set to 100 or more. Change the layer from Normal to Overlay. This is a simple way of creating some nice swirly watermarks.

You may notice, however, that parts of the watermark extend over the edge of the area and into the shadow.

11 – Cropping the watermark

Right-click on your swirly watermark layer in the Layers list, and Rasterize it. It can now be edited.

Ctrl+Click on your gold-coloured layer to select it. Press Shift+Ctrl+I to invert your selection (this selects the white area) and press Delete.

12 – Creating a button layer

In the layers list, Ctrl+Click on your gold layer to select it. Create a new layer and drag that new layer almost to the bottom of the layers list.
Select a colour (I've chosen orange here) and fill the area with the Paint Bucket.
Select the Move tool and press the down key several times to move the layer downwards.

13 – Making notches with the Freeform Pen Tool

Press Shift+P to switch to the Pen Tool. Make a series of points as shown, simply by clicking to place the points. Photoshop will connect them with straight lines.

14 – Cutting the Selection

Right-click the line you've made, and select Make Selection. Press Delete to cut the selected area, leaving you with these buttons. Press Ctrl+D to deselect the area.

15 – Putting text on your buttons

Using the text tool, put in some black text on each button. With a short amount of text, you can just rotate it slightly (press Ctrl+T) instead of trying to use curve effects on it.

16 – Inserting some header text

Add in some header text, in white. It looks nice as it is, but due to the varying darkness of the header image, some parts of the text don't show up properly.


On the layers list, Ctrl+Click on the gold layer to select it, choose the Selection Tool, then hold Alt and drag the cursor across the top of the selected area, to cut the top off the selection, then do the same for the bottom, leaving just a band.

17 – Making the semitransparent band

Create a new layer at the top of your layer list and reduce its opacity to 30% or as much as you feel is necessary.


With the Paint Bucket tool, fill the area with black.


Save the picture For the Web (on the File menu) as a jpeg with quality 60. In your web page editor, select the Hotspot tool and draw an area over each button to turn them into links.
That's it! :)