How to Design Your Own Header Image


Seeing as blogs are really popular, I believed I’d teach you how to produce your own header images. In this way it is possible to include your character touches to your site. We are going to make use of the header image I recently completed for another site as an example to have you started.

If you have Photoshop Elements or another version of Photoshop start it up. I happen to be using Photoshop CS. Click File > New

This is where the dimensions of the header image (or canvas size) is entered. The header image for my blog is going to be 600 pixels by 175 pixels. Inside the pop up graphic (shown below) for the width I entered 600 pixels and for the height I entered 175 pixels. Your measurements may be different than what I have entered for mine.

After your new file is open, double click on the padlock symbol in the Layers pallet to unlock the layer. (As indicated below) A pop up will launch to rename the unlocked layer. The default is layer 0, click OK.

From the Tools pallet go for the Paint bucket. If the current color showing for the Foreground color is not the shade you wish for the header image, click on the color chip in the Tools pallet. The Color picker will pop up, select your desired tint and click on OK. Place the Paint bucket indicator into any region on the white canvas and click your left mouse button. The region should currently be what ever the color was that you decide on.

Next, produce a New Layer from the Layers pallet by clicking on the emblem at the bottom of the Layers pallet. I then clicked over the Shape Tool (in the Tools pallet) to sketch an ellipse within the inside of my canvas. Make sure you alter the color to help you see it on top of the background color. Something that complements the initial color you choose to use on your header image would be fine. Use the Move tool on the Tools pallet to maneuver the form to the specified position.

For some added texture for my header image I opened a photograph I have on my hard drive. Click on the photo and drag it on the canvas you’re working on. Reposition the photo about until you’re content with the region that will be showing in the header. I then altered the opacity of the picture to 50% from the Layers pallet. By doing this the shades from the bottom layers can show through.

Add a New Layer. Select the Text Tool on the Tools pallet. You may need to vary the color of the text in order to see it. Employ the same procedure to vary the color as we did before within the Tools pallet. Left click your mouse button to position the cursor in the region you intend to insert your text.

Employ the tool bar at the top of your monitor to pick out the Font and Font size that you like to use. I have chosen Arial Black using a 30 point font size. Then, using your keyboard, type your required title on top of the header image.

Make another New Layer and utilize this same process to type your subtitle. Don’t worry if it is not exactly in the correct region; you can use the Move tool to place the text in the right spot.

That’s what your layers pallet should appear like when you are done. If something isn’t showing merely click the layer and drag it to the precise position.

Finally, save your file by clicking on: File > Save As. On the display that pops up name your file something like “Blog header image” and then click Save. (This saves the Photoshop file incase modifications are needed.) To use the header image on your site just save the file again: File > Save For Web.

On the following display (a section shown at the left) be sure GIF or JPG is chosen for the file type, change quantity of colors used if required. Then click Save. Name the file and where to save it. Click Save again.

Open the finished header image, be certain that it meets your standards. After this you are able to FTP to your site.

To view the header image tutorial with pictures, drop by


Source by Joann Snell

Leave a Reply