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.  Once again, this topic was suggested by my friend Stephanie at Metropolitan Mama.  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 a project, 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 document.  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 and you are going to create some type of abstract design in your header.  Perhaps you have a simple logo, and that’s all there is to it!  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 for all of 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 850 pixels wide.  For a 3-column design, I generally make a header that is 950 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.

Just remember — Content is King.  Don’t allow your header to overtake your precious content.  I usually aim for a header that is between 250 and 300 pixels high and rarely more than 350 pixels.

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?  I 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.

Just remember — 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.

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

Tagged as: blog header, design a blog header, make a blog header, upload a blog header