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