Menu

Create an Awesome (Free) Header in Ten Minutes

A custom header image is one of those personal touches that can really set the tone of your blog and…

A custom header image is one of those personal touches that can really set the tone of your blog and establish your visual brand. What’s that murmur in the back? You don’t have time to create a custom header? Image-editing software is too expensive? Think again. Today, we’ll show you how to create your own snazzy header quickly — and for free.

Creating the right header for the right blog

For this exercise, You’re the proud blogger at the imaginary Goodnight Loon, the web’s premier birdwatching-cum-parenting blog. You need a custom header that will channel your site’s blend of quirky humor, warm parenting advice, and love for all feathered creatures (well, maybe not Kukulkan). What do you do next?

Find a few images that speak to you

Comparing and contrasting a handful of pics can be really useful. You can use something from your own photo library, or a great find you stumbled upon while looking for Creative Commons-licensed images. Focus on high-quality, larger images, and take a look at your theme’s page to see if there’s a minimum-size requirement for the header.

Note: It’s ok if your chosen image is larger than the header image needs to be — you’ll be able to crop it once you’ve uploaded it to your blog.

Select the image you want to work with

We sometime stubbornly try to find images that literally channel what we’re saying. In this case, this would send you on a wild-goose chase (no pun intended) for a picture of two loving loons tucking their hatchling into bed. Good luck with that. Instead, aim for images that are somewhat abstract — a pattern, a landscape, a collection of items shot from afar — but are still evocative of your theme and your blog’s overall vibe. For the site in question, how about this lovely shot of painted eggs from Ukraine:

Pysanky2011

Image by Luba Petrusha (CC BY-SA 3.0)

The eggs create a direct mental link to both birds and the concept of offspring, and there’s a lot to work with here in terms of texture and color. We have a winner!

Edit your image to suit your specific needs

Using a free photo-editing service (in this case, picmonkey.com), you can then tweak your chosen image  – if its license allows users to adapt it — to make it header-friendly. With this one, I first cropped it into a narrower rectangle, to help it fit better into the header space. For readability, I’ve brightened up the image and lowered the contrast. I wanted to create a stronger nursery vibe, so I played with the color palette to give the image a soft, bluish tint. Finally, using the editor’s Texture settings, I made it look like a soft, woven fabric — an egg-patterned cloth diaper, anyone?

Screen shot 2014-02-13 at 12.09.25 PM

How long did this entire process take me? Roughly three minutes (and I’m about as proficient in stuff like Photoshop as a baby loon).

Add in your blog’s name

Still in the photo editor, you can insert your blog’s name into your header-in-the-making. (This is optional: if you opt to display your blog’s name through your theme, you’d want to avoid repetition.) You can choose among several dozen free fonts; here, I settled on a font — and a color — that makes a winking nod at the well-known cover of the classic Goodnight Moon. For good measure, I cropped the image a bit more, to better position the text:

goodnight-loon

Note: While you’re editing your image, you can save as many versions of your header as you like — that way you can always revert to an earlier state if you decide against a change you’ve introduced.

Final touches

Once you’re satisfied with your header, save the image to your computer and add it to your blog — you can do that either from your dashboard, by going to Appearance → Header, or in the Customizer, by clicking on the Header panel.

Then, check how your header fits into your overall look: does it work with your theme? Do the colors blend well with your custom background, if you have one? Does it help build a cohesive look to your blog?

In this case, I wasn’t too happy with the header’s whimsical font after all. A quick hop back to picmonkey.com was in order. There, I switched to a clean, serif font in more subdued colors, but kept the positioning of the text for a subtle echo of the original book cover. The final product:

goodnight-loon2.jpg.

A free, bespoke header tailored to a blog’s particular needs: yours is just a few minutes away, too.

For more tips on photo editing, check out PicMonkey’s free tutorials, including this one, designed for beginners.

Have you used an image editor to customize your blog before? What were you trying to achieve? Do you have any tips for users thinking of creating their first custom headers?

85 Comments

  1. My problem is that I have a header that can’t be beaten. It fits exactly what my blog is about (nickname means monkey in Dutch, writing about women, playful, sensitive) and by total chance I stumbled upon a piece of art, in a Dutch museum, took a photo of it, and ever since it has become my header. Cannot imagine I can ever find a better one :-) Well, this is a luxury problem one might say.

  2. A custom header really does give you a sense of identity. For both of my blogs I designed my own header, which gives my name and establishes what the blog is about. I even adapted the header to match my blogs colour schemes

  3. I choose an image from nature with nature’s colours. I once, tried changing my blog header to a photo of one of my abstract art pieces with a semi-transparent floral imagery. That was wrong in terms of “feel” for my blog which uses cycling, an outdoor activity to tie together my favourite subjects of travel, art, food, etc.

    But a person doesn’t always know the best artistic vision/statement for their custom header, particularly if it’s a permanent one until one tries different shapes, photo subject matters.

    I haven’t spent time making revolving, changing headers for my blog …just extra effort of combing through more personal photos distracts me from writing better words.

  4. I normally change my header for each post on my rough seas blog to reflect the text. I also have different headers for my pages. I have a default one which, surprisingly, is a sea photo, so if I don’t use a subject specific one that comes up.

    But it doesn’t take ten minutes to create a custom header photo. Just crop it. With my theme (2011) it needs to be 1000 wide. I’ll either downsize a pic to that requirement and let WP do the rest, or sometimes choose the part of the pic that I want to appear on the header. Sizing is the priority to look at. I don’t know about other themes, but it is important to check what the header size photo requirements are.

    I like custom headers, I think they are a great feature.

    1. Hi, I just posted below saying i would have loved to have different headers for different posts and i think you got that on your blog. Anyway how i could do this on mine? That’s a cool feature you have. I like it. Thanks. :)

  5. Love the inventiveness…. I stuck with a simplistic but individual approach for my blog. Just using my own photo and changing the theme colours seemed to work well, and followers have commented before they love it – so that’ll do for me :)

  6. I took a completely different approach that was also quick and free.

    I use a theme in which the background image shows a lot more than in other themes; I’ve also always used a fairly complex background image.

    So that the background wouldn’t clash with my header, I went for something ultra-simple. The header is nothing more than a couple of shapes with large text that I created as a Power Point slide. Then, I saved it as a .png and ran the image through a free program that made the background transparent.

    So my header image is two pieces that let the background image show between them. And when i scroll, the header image moves but the background stays put.

  7. What a pity that we can not choose the size of the picture !
    I want a header 1024 x 80 pixels but WordPress requires me to crop.
    I managed once but now it is no longer possible.

    1. If having a larger header image is important for you, you could experiment with other themes that feature a wide, splashy header.

      1. I do not want a wide header but a lower one (80 pixels height for 1024 pixels width). “Before”, it was possible. Not now.
        And I would not change theme.
        Am I being too demanding ? :)

    2. The technique I used might work for you. (It’s two comments up from here.) You’d probably end up with a little bit of empty space (in the same dark gray color that currently surrounds your header) above and/or below your header image, but the image itself would be 80 pixels in height.

      1. The size of my current header is ok for me but I would like to change this header.
        The problem is that it is no longer possible to create a header of this size (I do not know why).
        In fact, I do not want the header takes up too much space on the page. So 1024 x 80 pixels is the best size for me.
        Thank you for your help :)

  8. First of all, that is a beautiful photograph. Kudos to Luba Petrusha!
    I created a header image with Picasa for Fiction O’Clock, where I write. I didn’t create one for my photo blog though, wanted only the photo to be the highlight on the page. :)

    1. That’s a smart strategy — you definitely don’t your header to compete for attention with your content.

  9. I personally think if you want the header to be perfect for your individual blog, you need to design it yourself or have someone design it for you. My daughter created mine, and it really wasn’t all that hard to then crop it using the tools that WordPress gives its bloggers, and to also create the Gravatar image. I’ve been quite pleased with how easy WordPress makes it to design the web page.

    1. I absolutely agree with you!
      I’ve spent hours creating my header for I wanted it to be perfect, to show the concept of my blog, and to be strong and defined, just like I am :)
      Designed make it look so much more professional!
      Although this is a great start!!! :)

  10. My header of the acorn fits my blog perfectly but I would like to be able to use different headers for different posts, is that possible? Example the main header stays as it is but when a particular post is clicked, it brings up another header related to that post (if you know what I mean). Perhaps someone can share some tips here. thanks.

    1. On 2011 you go to bottom right, set featured image. Or in images media whatever, there is also an option to use that. It is per post. Your blog looks good btw. Nice and clean looking. Ask me if you have any more queries.

      1. No. You are on 2011. You can use multiple headers. Do you mean your browser /computer won’t let you?

        Go on the forum and ask for help. I’m not on there but plenty of other people will be able to help. Maybe include some screen snapshots.

        Did you get the pixel size right? That is essential. It MUST be 1000 for 2011. Save it and it will load. Just check my posts and pages. Same theme, lots of different headers. No need to give up.

  11. I often change my header yearly just to keep things fresh. Last year the header for my webcomic blog was a black-and-white photo I took of an iPad amidst some books. I wanted to give it a modern, elegant. I played around with the fonts a bit, going with a small computer look to a brash color palette.

    Sometime near the end of last year, I decided to revert to one of my original themes: one where the website style was based around the look of a luchador poster. The header is now a font based on a custom image. However, I made it transparent, so the background is also the site’s background. I had no idea this could be done before. As a result, the text of the header image scrolls while the background stays static. I love this effect, and I think it may be my go-to look for the time being.

  12. I think that a custom header makes a site look much more professional than it would with just normal text.

    Thanks for the great post,
    Tom

  13. I ended up using Picmonkey a couple months ago to make my own header. I had asked a friend to make me an image file of my title with some graphics worked into it, which I could lay over images I had been using as headers, sans title. I didn’t like what he came up with, but then you folks recommended Picmonkey, and I put together a lovely header what will be easy to swap out when the seasons change!

  14. Thanks for the suggestions. I am still building my blog and would love to include a nice header but was concern that the Google bots wouldn’t find my site if I decided to place the blog name inside the header versus using the “display site header and tag” feature. Any thoughts on this?

    1. As long as your site has a title and tagline, whether they’re displayed or not shouldn’t have any effect on your SEO (search engine optimization). You can easily make the change in the Site Title panel of the Customizer (from your Dashboard, go Appearance >> Customize). Just uncheck the “Display Header Text” box and you should be set!

  15. Hi, I uploaded an image to the header and it is really blurry and not as clear as the original image. Also when using picmonkey, the text is very blurry as well. Any suggestions would be greatly appreciated.

    1. When in PicMonkey, you can change the size of your font — increasing it should result in larger text in your finished header, too.

  16. My blog is only a month old but I did make my own custom header. Since I’m using the free version of wordpress and couldn’t edit the font nor the size of the header text, I wanted to do something that made the site look less “free” so to speak. Once made, I removed the header text all together. My theme had a black border around the header image so i used that to my advantage by blending the menu into the header image so it looked more seamless.

    An alternative to letting wordpress crop the image for you is to make it from an image editing program first. First, go to your site, right click the header image, and select “View Image Info”. From there, you can see the exact dimensions of the header image size for your theme. Take those dimensions and go into an image editing program (I use Hornil StylePix which was free on windows 8 store) and create a new image with the dimensions. It may be obvious to a lot of you but for some it isn’t. You can get this information from any image on the web. When customizing a website using code that little trick can come in real handy if you are trying to replace some standard images in your theme, that way it’s always exactly the right size.

  17. I knew I needed a new look. I had selected a theme that was good for awhile, but then it started to feel crowded. I found a new theme, then searched Google for (larger) background images. I found what I was looking for & then cropped it to fit the header. You know it’s right, when it all falls into place.

  18. Hello, Ben. Thank you for sharing this awesome header maker tool. What I want to know is could I use this same header tool for making a header in an email for an e-zine? I comment in other blogs. I don’t have my own blog. Thank you for your time in this matter. Take care. Happy Spring from Alaska! Rosella Young, AA-1 Designs, Invest in your shelf! P.S. This web site only operates in the United States, Ontario area of Canada, and in Australia. For all other locations, please check your area for one near you.

    1. Sure — this online tool (PicMonkey) is for any image editing, not just for things related to blogging.

  19. Hi, I’m actually a decent writer, I just never got into the blogs and forums on the internet. I just have one simple question. Is a blog a subject someone starts, and it takes off from there and may end in a different subject? Do you use a header just if you are the one starting the blog? Thank You, I want to learn something new. Mel

Comments are closed.