Have you ever wanted to create a fun and fancy header for your blog but didn’t know where to start?  Or maybe you don’t feel like learning how to use photo editing software or downloading anything to your computer?  I’m here to tell you that it’s not actually that difficult to make a new header for your blog and that you can do it yourself for free.  Nothing to download.  Nothing to buy.

Step 1: Figure out the size of your header.

I’m going to use Pepper’s blog as an example because she made me happy today when I woke up and saw she had asked a couple of questions in our “ask us anything” section.  Pepper is on WordPress and these directions are geared towards WordPress because that is what I am familiar with.  Someone not working in WordPress still will learn how to create a header for free.

So if you want to follow along, open up Pepper Scraps in another window.

Here is what the top of her blog looks like:

And this is actually what just her header image looks like:

There are a couple of different ways that you can find the header image in your theme.

• You can look in your theme folder (via FTP or on your local computer) and search through the images folder and open each one up until you find the one that matches.
• You can use the Firebug plugin for Firefox to highlight the header, display the css and open the image directly in your browser.
• You can click on “view source” in the view tab of your browser to find it.  If you do not see a reference to an image in the header, scroll up and location the stylesheet your theme uses.  Click the link to the stylesheet and it will open in a new browser window.

• You can open your stylesheet (style.css in WordPress) and find the image associated with the header (assuming the theme designer put it in a logical place).   It will show you the name of the file, if you want to open the image in your browser, it would be relative to your theme folder, ie: http://yourdomain.com/wp-content/themes/yourthemename/yourheaderimage.jpg (or .gif or .png).  In Pepper’s case her image name from below is PS3.jpg so the location that she would type into her browser is: “http://pepperscraps.com/wp-content/themes/PS3/PS3.jpg”.

Any of those options will get you the information you need.  I prefer the Firebug plugin for Firefox.  It makes editing your theme so much easier.

Once you have isolated the header image you need to find out it’s dimensions.

• If you opened it in Internet Explorer, just right click on the image and go down to properties.

• If you opened it in Firefox, right click on it and go down to “view image info” and you will see (more or less) the same thing as in Internet Explorer.
• If you found the image on FTP you need to copy it onto your local computer so you can open it and view the size.

Pepper’s header is 940 pixels wide by 136 pixels high.

Step 2: Select graphics, patterns or images

You will now need an image (or images) or a pattern(s) or a graphic(s) that you want to use for the header.  If you found something online that you like, save it to your computer.

Step 3: Join (or sign-in if you are already a member) Picnik.com

Picnik is free to join to use their basic tools, although it is totally worth the $25 for the year.  Create your account and/or sign-in.

Upload all the images you would like to use in your header to your Picnik account.

Below is the home page of my Picnik account.  The little thumbnails show some of the images I am going to use for MY new header (using Pepper’s site).

The Picnik interface is fairly intuitive and easy to figure out.  You upload photos right on your homepage, you can view all of your uploaded photos by clicking the library tab, you can clean up your photos (touch ups, color adjustments, etc.) on the edit tab, and add fancy effects, text, add frames and “stickers” on the create tab.  The save and share tab lets you share with friends or save to your computer.

The only “drawback” to Picnik is that if you want to touch up your photos before you work on your header, you have to upload, edit, save to computer, then re-uploaded the edited photo.  But…it’s free so it’s a minor annoyance (even for the paid version).

Step 4: Use Picnik to setup the images for your header

In Picnik, click on home, then go to “collage”.  Depending upon the size of your header you are most likely going to be interested in a collage with a row of horizontal images as opposed to vertical, but feel free to get creative!

I decided to start with an collage that has three images across.

At this point, Picnik doesn’t give us the option to set the exact size we need but it does let us choose our proportions.  We can use our original image dimensions to figure out what proportion we need to set the collage at so it will fit in our header when we are done.  Pepper’s header was 940×136.   Picnik sets the width of the collage at 1024, which is too wide for us but so long as we have the right proportions, when we save the collage we will have the option for fit that.

On the lower right of the collage screen you can see the actual pixels of the collage.  On the left is a settings for “proportions”.  You will notice as you change those proportions, the pixel height of your collage changes, but the width stays the same.

You will need to do some math to determine the height you need.  The way you do it is to multiply 1024 by the height of your header (136 in Pepper’s case) and then divide that number by the width of you header (940 in Pepper’s case).  So 1024×136=139264.  Then 139264/940=148.  Now you need to set the proportions on the slider so the pixels on the right are “close” without going over.  I can get mine at 147 which is fairly close to the 148.  You are more likely to encounter problems if your image is bigger than the area dedicated to your header.

At this point you can drop your images or graphics or textures into your collage.  If your collage areas are somewhat rectangular, you will see it crops your images.  You can fix that by adding more “columns” on the bottom left, and hence having to add more images, or you will need to tinker with the images and crop them to similar proportions before putting them in Picnik.  Picnik does let you move the images around within the collage, so you can adjust them up or down so they look right.

There are some other tools you can play with for your collage as well.  You can have a border around the images, change the color of the border, or remove it all together using the “spacing” slider on the left.  Pay attention to your pixel sizing on the right though, if you have a border, it does increase it so you will need to play with the proportions slider again to get it back to the right size.  Play with the tools and get it just right and then click “done” on the top right to move on to the next step.

Step 5: Create effects

After you hit done from the collage screen, Picnik automatically brings you to the “create” tab.  This is my favorite tab!  You can head back over to the edit tab if you are not happy with the contrast or colors, but the effects you choose in “create” might make it a moot point anyway.

From here you can click “effects” on the top and do all sorts of fun stuff to make your header unique.  There are a lot of options and settings, so feel free to tinker around.  You can layer the effects for a really fun look.  Be careful here because some effects and frames affect the size of your header.

You can also add stickers, do some touch-ups and advanced editing from the create tab, and, of course, add text.  Picnik allows you to do a lot with the text.  They have a lot of great fonts and it’s easy to customize and get the look you want.

Step 6: Size and save

After you are happy with your new header, you need to click the “save & share” tab.

A screen will pop up with options and here is where you can set the final size to match exactly what you need.

Change the image width to the width of your header, and don’t worry – if you ended up with the height being too big because of effects and frames, you can re-upload the image and crop it to the right size in Picnik after you save it!  Or, it generally is also fairly easy to edit the height of your header in the blog so the new image height will fit and not get cup off.

Step 7: Put the header in your blog

There are 2 options here.  The first is simply to give your new header the same name as your old header and use FTP or your hosting file manage to over-write the original.  The second option is to upload the new header to the same directory as the old one, but with a different name, then edit your stylesheet to point to the new image.

I used a little trick in Firefox using the Firebug plugin to put my header on Pepper’s blog.

If you have any questions, feel free to leave them in the comments, or use our cool “ask us anything” feature.