How to Design Your Own Header Image

Since blogs are really popular, I believed I would show you how to produce your own header images. Therefore you can include your own personal character touches to your site. We’ll use the header image I recentlycompleted for an additional site as an example so you can get 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 dimension) is entered. The header image for my blog is going to be 600 pixels by 175 pixels. In the pop up graphic (shown below) for the width I entered 600 pixels and for the height I entered 175 pixels. Your dimensions could be different than what I have entered for mine.

When your new file is open, double click on the padlock character 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.

Within the Tools pallet select the Paint bucket. If the current color showing for the Foreground color is not the color you need for your header image, click on the color piece on the Tools pallet. The Color picker will pop up, decide on your required shade and click on OK. Place the Paint bucket pointer into any part of the white canvas and click your left mouse button. The area should currently be what ever the color was that you choose.

Next, produce a New Layer from your Layers pallet by clicking on the image at the bottom of the Layers pallet. I next clicked on the Shape Tool (in the Tools pallet) to depict an ellipse in the inside of my canvas. You’ll want to alter the color in order to see it on top of the background color. Something that enhances the first tint you choose to work with in your header image would be nice. Use the Move tool from the Tools pallet to maneuver the form to the required position.

For some added texture for my header image I opened a photo I have on my hard drive. Click on the picture and drag it on the canvas you are working on. Shift the photo around until you’re satisfied with the region that will be showing within the header. I then changedthe opacity of the photo to 50% inside the Layers pallet. In this way the colors from the bottom layers can show through.

Adda New Layer. Pick the Text Tool from the Tools pallet. You may need to vary the color of the text to help you see it. Utilize identical procedure to change the color as we did earlier inside Tools pallet. Left click your mouse button to place the curser in the area you wish to add your copy.

Utilize the tool bar at the top of your monitor to pick the Font and Font size you want to use. I’ve selected Arial Black with a 30 point font size. Then, using your keyboard, type your desired title onto the header image.

Make another New Layer and apply this same process to type your subtitle. Don’t fret if it is not precisely in the correct vicinity; you should utilize the Move tool to position the text in the correct place.

That’s what your layers pallet should appear like when you are complete. If something isn’t showing up just click the layer and drag it to the correct position.

Lastly, save your file by clicking on: File > Save As. Within the screen that pops up title your file something like “Blog header image” and then click Save. (This protects the Photoshop file incase modifications are needed.) To apply the header image on your site just save the file again: File > Save For Web.

On the next screen (a section shown on the left) ensure that GIFor JPG is chosen as the file type, change number of colors used if wanted. Then click Save. Name the file and where to save it. Click Save again.

Launch the finished header image, be certain that it meets your standards. You then are able to FTP to your site.

To look at the header image tutouial with pictures, go to

Leave a Reply

Your email address will not be published. Required fields are marked *