How to Design and Upload a Blog Header

Last week we talked about how to make a blog button.  This week we’re going to talk about how to design and upload a blog header.  If you have a topic suggestion for my How To series, please feel free to leave it in the comments or send me an email!  I’ll keep the column going as long as there is interest (and topics.)

The process is really quite similar to the button.

1. Make A Plan

Before I begin designing a blog header, I determine the title, tagline, and the graphic(s) we will use.  I usually have a plan in my head before I start a new project.  That takes some thought (and discussion, if you are designing for someone other than yourself.)

Most people start with a title and tagline and work from there.  You probably want your design to reflect the title in some way.

Sometimes there is an obvious picture that represents the title and the theme of the blog.

Sometimes the concept is more abstract.  Or perhaps you have a favorite color.

If you already have a logo that represents your brand, you’re good to go!

It varies, but you need to find the elements for your header before you can create it.  Unless someone sends me a personal photo or a logo, I use iStockphoto.com to purchase my graphics.

2. Create Your Canvas

Using whatever graphics program you have on hand, create a new document in the proper size.

WIDTH:  For a 2-column design, I generally make a header that is 800 or 850 pixels wide.  For a 3-column design, I generally make a header that is 950 or 1000 pixels wide.  You can really make it any size you want, but those are typical sizes.  For instance, mine is 1000 pixels because I wanted a very wide sidebar and plenty of writing space.

HEIGHT:   Conventional wisdom states that you do not want your header taking up more than half the screen “above the fold” — the fold is the portion of a webpage that can be visible without scrolling, and the amount of space above the fold varies among computers.  I do not recommend making a header any more than 200 pixels tall if you can help it.  A huge header is a sure sign of an amateur designer.

Always remember — Content is King.  Don’t allow your header to overtake your precious content.

3. Design Your Space

If you have completed Step #1, then you have a pretty good idea where you are headed.  Upload your photo or graphic image.  Create a text box and input your title.  Make a separate text box for your tagline.  Depending on the length of the title, you may want to create a separate text box for each word so you can use different fonts or colors for different elements of the title.  I use multiple layers so I can manipulate them easily.  Sometimes I like to lock certain layers or even hide them while I work with other elements in the header.

Move things around, re-size them, change the colors, try out your ideas.

I love to take a graphic and change it up so no one else has the exact same thing.  I change hair colors and eye colors to resemble the person I’m designing for.

If we find a graphic the client likes but she’s not crazy about the colors, I change them.

Don’t like certain elements?  Remove them.

Of course you can be as creative as you want with this part.  You can combine several graphics for your own unique design.  Of course, that gets pricey, and it can also get busy.

Let’s say it again.  Content is King. You want your header to reflect YOU and your blog, and you certainly want it to capture your reader’s attention, but ultimately it’s your content that is primary so it’s best to keep things simple.

Last week I gave a few simple design tips for selecting fonts.  Selecting fonts is the hardest part of the process sometimes.  A good font can really make a header pop.  Think about how the words in your header sound, or the feeling you are trying to convey, and then pick a font that represents that.  Don’t go crazy with a bunch of different fonts.  Two, MAYBE three will suffice.  When selecting fonts, keep contrast in mind.  You don’t want two similar fonts.

I highly recommend The Non-Designer’s Design Book for simple tips and techniques to make your designs better.

4. Save for Web

With Illustrator, there is a “Save for Web and Devices” function that I use to convert my design from an Illustrator document to a jpeg file that is optimized for web use.  Here is some information on saving for web in Photoshop and Illustrator.  If you use another program, I’m afraid I’m not much help.  Google is your friend. ;-)

5. Install

Yes!  It is as simple as that!  Upload your new header to the blogging platform of your choice.  Then you can match the other colors in your theme to match.  This varies, of course, with each of the blogging platforms.  When in doubt, Blogging Basics 101 is a fabulous resource.  And I have learned a TON from Tips for New Bloggers.

If you take ONE THING away from this tutorial, let’s say it together now…  Content is King.

Yes, I know, this is about creating an eye-catching header.  But ultimately, your content is what will bring people back.  So keep that in mind when designing your header.  Don’t overdo it.  K.I.S.S.  (Keep It Simple, Stupid)

When I’m not blogging here at Musings of a Housewife, you can find me designing blogs (and buttons) at DCR Design.

Comments

  1. Didi says

    Jo-Lynne, thank you for this.

    My blog header was designed by a good friend. Now that I’ve learned from you how it’s done, I can experiment with creating my very own blog header.

    As always, you deliver such great posts.

    Bless you!

  2. says

    Thank you, I have been trying to figure out how to make my header not so big forever. I am going to try to work on this today. Thanks for the great tip.

    Your posts are always great!

  3. Jo-Lynne says

    Hey Amy. Thanks. I’ve seen it but I so rarely use photos in blog designs, I forget about it. However, I could use it for my posts. I’ve been trying to include photos with each post. Thanks for the reminder! :-)

  4. says

    You have no idea how long this self proclaimed googled and googled before I actually mastered the art of the header. I love it though! Great post.

  5. says

    I have always drooled over some awesome headers that I have seen … I have one particular one in mind that I would love to design, but it may be too technical for me. I have tried to find the exact character I want on iStock, but no luck. Do you have to design them as well? I am so lost … how much do you charge to do a header for me? LOL! Thanks for trying to help!! :o)

  6. says

    Thanks. Content IS king to me. Soooo…I had really wanted my blog to be very simple, so as to not detract from my writing (the primary reason for the blog!). I had even “bucked” at adding photos until a friend persuaded me to do so.
    Now, I am considering changing everything…we’ll see how it goes.I am also an artist so I think the design will add to my blog and not take away.
    Thanks for this post, and I am also excited to find your blog.I am looking forward to reading more in the future.

  7. says

    Another excellent post! You are so talented! :)

    You should do a post for your how-to series about iStockPhoto…how it works, how expensive it is, what you use it for, etc. :) Or you could do a broader post about where to obtain images for blog posts…

  8. says

    I am still puzzled about installing a new font to my header. Most of the instructions I have read are beyond my capabilities. However the title I have chosen begs for special font. Can I hire someone to do this? What would you suggest?

  9. says

    Thank you so much for all your help! I made my header for Lemonade Parade with your advice and I’m now working on installing my previous header that I had made for my Snickerdoodles blog, tonight:)

    Thanks again for your great advice!
    PS. It’s *so* much fun!!

  10. says

    I’m trying to learn how to change/create a blog template and improve our blog…big learning curve but your how-to series is clearly written and I’ve been able to learn quite a bit – THANKS! I have a suggestion for a new how-to: how do you get the picture of the handbag beside the title of your posts? And, how do you place the dividing line between the main content and the sidebar? Thank you!

  11. says

    I am trying to create my own header using 4 vertical pictures. When I resize and drag them onto my blank document, they are very distorted. I know I am doing something wrong, but not sure what. Thanks for any help you can give!

  12. says

    great post and awesome blog!(found you on google:) thanks for the tips. i’ve been wanting to create a new blog header for FOREVER! but haven’t yet…a little lazy lately:) i’ve had the same one for a long time and i’m ready for a change! i would love to become a blog designer someday but have a lot to learn. congrats on your blogs success!

  13. says

    Hi Jo-Lynne
    After trying to find some easy tutorials on blog header design and blog page designs I asked Sara at designerdigitals, who gave me a link to your site. I am so glad she did !

    Many thanks for such an easy tutorial and concise one to follow. Hopefully I can now start and make my own header.

    Thanks again

    Hugs
    Julie

  14. says

    Hi,
    I use typepad and would like to ad images to my side bar (advertising etc.)
    How do I upload an image to this particular area?

    Thanks
    Renee

  15. says

    Thanks. This is all new to me. I managed to get a great photo behind my title. My family is ready for me to stop this and make some nachos! If you want to peek you can see it at dalewayne.blogspot.com

  16. says

    Just started a blog of my own and found this posting very helpful in creating my blog header. I used Adobe InDesign. My blog is still heavily under construction, and I’m still toying with the look. Have you done a post on designing your own page tabs? I’d like to create a running look throughout, which requires undoing almost all the Blogger template presets. I’m learning.

  17. Wendy says

    Thank you so much for this!! While I liked my old “scrapblog” header, it was huge and a total PITA to update. Thanks to you, I can (and did) create my own little header. Fantastic and easy tutorial!

  18. Lindzie h says

    Thank you for this information
    I have a huge header right now and I don’t like it. I needed some help to fix it and this was perfect!

  19. Heather says

    Thanks for the tips! Found out I was guilty of a too big header=( Easy fix though so I am now no longer in the large header club=)

  20. says

    Thank you for this!! I’m going to try it this weekend…it’s just so overwhelming to me to pick all the pieces I want!! Your instructions make the technical part of it sound so simple…thank you!!

  21. says

    It really is a delicate balance, maintaining a design sensibility but also making your blog “readable” and useful. I’ve gradually opted to create somewhat abstract blog headers that set a mood without being too literal – so no photos of people taken from stock image sites, no photos. Just artwork that evokes a certian energy or feeling, with a little text thrown over top. So far the reactions to this work have been good and people are both enjoying my images and reading my blogs – so looks good so far!

  22. LD says

    I know you wrote this article many years ago, but I have been searching the web for about 12 hours (seriously) and this has been the most informative information I have found in order to actually design an attractive blog!

  23. says

    THank you so much for the tips. I just designed a header by following your simple rules. I hope you like it, please take a look. Thanks. Can you do a post on how to design the blog body

  24. says

    Thank Jo-Lynn. Ive been using Photoshop to create most of my blogs headers. It can be fun at times, but a headache at other times. Thanks for creative info.

  25. says

    Hmmm. Now that I’m rethinking my blog, my title, my tag, my reason for blogging, and all of that {sigh}… this is good info for when I’m ready to go forward with a new direction.
    Thanks for the valuable information!

  26. says

    Thank you for writing this! I have been away from my blog for a long time, and getting ready to resurrect it. This tutorial will help me in the redesign!!! Thanks a lot!

    Leslie, a.k.a.
    Menu Maker Mom

  27. says

    Thank you very much for sharing such an important topic. I was thinking for a long time to design my blog header. The article will help me much to design my blog header. To speak the truth, I came to learn many things from your site.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>