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.
 |
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!
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!
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!
Hey Jo-Lynne, nice tute! Have you ever used stock.xchng (http://www.sxc.hu/)? It’s mostly photos (as opposed to illustrations, although there are some) but they’re free!
Stumbled.
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.
Thanks for that
Since you first helped me last summer, I now change my blog header a few times.
Prompted my this, I made a new one today – you can check it out on my blog!
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!!
)
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.
Thank you. One day soon I’ll give it a try.
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…
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?
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!!
Thank you so much for this post! Could you please tell me what program you are using to create your header?
Anyone know of a good free graphic program to create a blog header using iStockphoto images? Thanks!
@Mary – Gimp. It’s great!
LOL, Amy, I emailed her with that exact suggestion.
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!
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!
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!
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
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
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
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.
thanks for this tutorial, found it a great help,
Jenny
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!
I love this. Thank you so much. Been thinking of doing a makeover on my blog header.
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!
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=)
Hi, that is a very informative post!
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!!
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!
What graphics tools are there? I don’t know if I have any…Do you have to buy them?
You can use Picnik.com or Gimp – both are free. I use Illustrator, but it is pricey.
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!
THANKS!!! That means a lot. I still get tons of hits on this post.
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
Looks great! I have been away from designing for Blogger for so long that I’m not sure I could even do a post on the blog body at this point, lol. Glad I could help!
I searched Google and found this site top of the list. Wish you a better life.
Thank you so much! This was so helpful. I used GIMP and put together a banner I really like. Thanks for the information!
Thank you very much for your advice. I created a few blog headers thanks to you and uploaded them in an online portfolio. If they can help people create a nice blog, I’ll be happy.
http://www.coolblogheaders.com/
Check it out if you can!
Those ARE really cool!
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.
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!
Hey! Awesome header tips! I am so happy I stumbled on this blog.
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
Perfect!!!! Yayy, I finally was able to do this with my coupon blog. Thank you!
Sizing… how do you know when you have the size you are looking for??? Like if I wanted something 800×850 pixels wide???
I am so sorry I took so long to reply!! You can usually find that in whatever program you are using. If you create the blank canvas that size, then you can fill it. Or if you create it, you can usually resize to the correct dimensions. What program are you using? Then I can give you a better answer.
I’m using publisher.
Okay, I’m not familiar with it. But you must be able to create the document the proper size, yes?
Thanks so much for the ideas!
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.