Creating a Header Image for Your Blog

picmonkeyheadersSo you want to make your header awesome, but you don’t have Photoshop or money to hire a designer. No worries – you can make one for freetoday! Depending on your platform and theme, headers can be anywhere from 800-1200 pixels wide and 100-400 pixels tall. (A good reference is 1000x300px).

The pictures below show headers in various sizes. The one on the far left is around  1000 x 400 and they get narrower as you go to the right.

I also have a post about creating a header in Canva if you like working in that graphic design program better!

Even if you know what size you would like, it’s important to check and see if your WordPress theme can handle it.  On Blogger, you can manually adjust the size to whatever you wish — on WordPress, the header size is constrained by the theme you’ve chosen (there are plenty of themes though that give you complete control over your header size). To check what size you need for your WP theme, go to APPEARANCE > HEADER and look at the number suggestion under the photo or image/title. Some themes will allow you to crop and/or stretch an image, but for the best look – go with the exact size.

finding the wordpress header pixel size

If you need a free theme that gives you a fair amount of control over your header without code, grab Weaver. Otherwise, for a beginner– go with Prophoto or Genesis. These are the only two themes I use!

For Blogger – You can create the header whatever size you want (because the platform allows you to adjust the width manually). A good size is 1000 x 300. To adjust the size, you must go into your template designer and click customize. Then choose “adjust widths.”

blogger template designer

Now that you know approximately how wide your header needs to be, time to go to PicMonkey and make one!

1. Go to http://www.picmonkey.com. It’s a free photo editing site – no software (or registration) required. If you want the pro-options, it’s $4.95 a month subscription. You’ll get extra fonts, overlays, and textures if you sign up for the premium option. Some of the tricks I’m about to show you will require the subscription. Try it out for a month and see how you like it!

2. Ask yourself this question: Do you want a header that is simply text and graphics or a photo (or collage)? If you want a graphics/text header, choose the DESIGN option. It’ll ask you what size you’d like. Choose the Facebook header option and we can make it bigger once the white canvas opens up. Skip down to step #4.

3. If you’d rather have a photo collage, here are the steps.

  • Click on the Create a Collage in Picmonkey.
  • Where it says OPEN PHOTOS, click on it and upload as many photos as you want to use. You may just want one image or perhaps you want ten! They will all line up on the left hand side.
  • Drag and drop your photo/s into the box. You’ll notice that you can eliminate boxes and spread the image out or you can add a bunch and make a collage. There are different default layouts you can choose, but don’t worry — you can delete and customize them by clicking and dragging.
  • Choose a layout and play around with the order and the size of each photo. The Facebook cover photo layout is a good starting template since it’s about 815px wide. To readjust the size, put your cursor in the size field at the bottom of the screen. Change the width to 1000px (or whatever it needs to be) and it’ll automatically change the height to keep everything in proportion.
  • Once you are done ordering the pictures as you like, click on the edit button at the top of the screen. PicMonkey will pull your collage into the editor where you can add text, overlays, and borders.

4. If you chose the option for text and graphics in step two, you should have chosen the DESIGN button on PicMonkey’s home screen. First have to resize it before doing much else. On the left hand side, hit the resize button.

resize

Change it to the dimensions you need (you may have to uncheck the keep proportions option).

5. Now you can edit! Add text, overlays, textures, and other fun elements. This article has a few tips for using Picmonkey. You can also watch the video below as I mess around and show you a few tips and tricks!

6. When you have it just right, click save again.

7. Now it’s time to upload it into your blog. If you are in WordPress, you’ll want to go to your dashboard > appearance > header. In Blogger, you need to go to layout and click edit header area.

A couple of helpful tips:

  • When you are done, you can go back to Picmonkey and create another one to use as your Facebook cover photo on your fan page!
  • If you want an advanced photo editor, go for GIMP. This is the free open source version of Photoshop. Need more control over creating graphics? You’ll want to use Inkscape– the free open source version of Illustrator.
  • I have another post that talks about the elements of a professional header. I also have a tutorial on creating a header image that spans the width of your site.
  • Have you thought about whether or not your blog needs a logo? A logo is slightly different than a header in that it is a smaller symbolic representation of your blog or brand. I wrote up a quick tutorial about the elements of a great logo too!

Let me know what you think!