HOW TO – Create a Header Image for a Blog or Web Site

NOTE TO WRTG 3020 STUDENTS: To learn about appropriate content for your blog header, read this guide first: Composing a Blog Header for the Rhetoric of Gender & Sexuality. Then follow the instructions below to make your header.


Below are some written instructions for how to make a new header for the class blog as well as a screencast. The instructions vary a bit in each format, but they should give you the basic idea.


TIP: View the screencast in one window in your web browser while you work on your header in a separate window. After I cover a step you need to follow, PAUSE the video, switch to the other window, and do the step. Then return to the video and continue. And so on.

Step by Step Instructions

You can create a header image in almost any image editing software, including the free applications that came with your computer. I’ve posted instructions on how to use a few common image editing applications here, under the Working with Images category.

You can also use online image editing tools, some of which are remarkably powerful. I recommend, which is very easy to use and works on both Macs and PCs with Windows. You don’t even need an account. Just go to the Pixlr web site and launch the editor there. (This is the tool I demo in the screencast above.)

(1) Create a blank image that is 990 pixels wide and 180 pixels tall.

(2) Open the first image you want to include on the banner and resize it so that it’s 160 pixels tall (don’t worry about the width).

(3) Copy the image and paste it into your blank banner. It will probably appear in the middle of a new layer, but you can select the move tool (has an arrow on it) from the toolbar available on most image editing apps and move the pasted image to the far left.

(4) Open the next image you want to include and resize it to 180 pixels tall.

(5) Copy the image and paste it into your blank banner. It will most likely appear on a new layer, and you can move it next to the first one the same way you moved the first one. Keep in mind that the tool you’ve selected to use only works on the image that appears in the layer you’re currently working on. To modify the location of the first image, select its layer first.

(6) Continue these steps until you’ve compiled all the images for your banner and lined them up the way you want.

(7) If you’re familiar with image editing tools, you might want to apply some blending effects.

(8) Save the image as a .jpg or .png file. (If prompted to flatten the image first, do so; that merges all the layers together.)