Design Tutorial: How to Make a Custom Header

A header is the first thing a person sees on your blog. It should reflect you and your blog through its colors and graphics. Who wants a blog title in black as their header? Here is a simple tutorial on making a cute, custom header for your blog!

The first thing you need is a photo editing software. I have used paint.net, gimp, photoshop 7, and CS5. CS5 is my favorite but you have to pay for it. Paint.net is an awesome design program for PC’s and is free; the same is true of .gimp for Mac users.

After you have installed the program and know a little about how to use it, it is time to get to work on your header! You will first need to create a new document. Personally, I like 250px by 950px. However, that is not the standard size for a blogger header (if you know how to change the size in the HTML, go for it; if not, I’ll post a tutorial soon). The standard size of a blogger header is 250px by 660px.

Make sure your resolution is set to 72 pixels per inch. That is the standard size for the web. If you make it any larger it will bog down the site and make it slow to load. 300px is the standard size for printing, since you need such good quality. You should also make sure your color is set to RGB (red, green, blue) mode – the other modes will make your colors look strange.

So after you create the new image comes your imagination! Customize your new image with text, pictures, brushes, and anything else that represents you and your blog. A good rule of thumb is to stick to three main colors, not including your neutrals (the white for your posts, the black for the text, etc.). It is also good to keep the fancy fonts limited to three, and make sure they correspond.

Can you tell I just threw this together? :-)

So after you have your header all cute and ready to go, you are going to save it twice. Save it first as the program extension. On photoshop it is .psd, on paint it is .paint. This saves all of your different layers so that if you decide you don’t like something later on (or find you spelled something wrong) you can open this file back up and quickly edit the text or image you want without having to re-do the header. After you save its layers, save it again as a .png. This flattens the image (aka compresses all the layers to make one image) and makes it ready for the web. Congratulations, you just made a header!

Now it is time to upload it. Log into your blogger account and click on DESIGN. It will take you to a page showing all the elements on your blog. It should also be the place you use to upload widgets to your sidebars. At the top of the edit panel you should see a widget with your blog name. If you click edit a new window will open up asking you what you want it to do. You are going to upload the image. Make sure shrink image to size is checked and place image INSTEAD of title and description.

Save your widget and then save your changes. Check out your blog. How does the new header look? If it doesn’t look quite right keep playing with it in the editing program until you perfect it.

Now that wasn’t so hard, was it?