Freckles in April: Blog Design Part 5: Header

Tuesday, June 19, 2012

Blog Design Part 5: Header

Before I get started I want to make a disclaimer- I am NOT an expert. No one taught me any of this stuff..I figured it all out by dinking along and Googling stuff I wanted to know. Which means my solutions may or may not be the best way to accomplish something. My code is usually a rather inelegant copy/paste job. I am big on trial and error. I'm not that great of a designer. Proceed with caution!

I was pretty thrilled when I drew Summer's number. I can nitpick on her "Before" design because I'm the one that did it! Hers was one of my very first blog designs outside of my own blog. Her brother is married to my sister and so she got to be my guinea pig.

Her header was definitely too big...amateur mistake! It does brand her blog and it's interesting in it's own way but it needed a reboot.

I e-mailed with Summer a bit to get a feel for what she was looking for. She was mercifully easy- she knew what colors she wanted but, beyond that, was open to whatever I wanted to do. I sent over this inspiration board-

I used my Wacom tablet to write "Sumo's" in Illustrator. The font is Neutra Text (Angela used it in our branding for work and I fell in love) and the pattern is from ColourLovers

Summer approved the board and I got cracking on the header!

Reader question!

Kathryn asked-
 I do have one important, though maybe silly, question. What is a good standard size for an image based blog header to have it be as wide as the screen.
That's actually a really good question! My answer here goes two directions, so bear with me-

1. Screens come in all different sizes and settings, which means the header is going to fit every screen differently. No matter what size you make your header, it won't perfectly fit every screen. Believe me when I tell you that differences between browsers and screens are a grand annoyance for for anyone who has ever built a website. I typically (though not always) do my headers at 1000px wide and center it. It looks pretty consistent across the board.

2. That being said, what you're looking to do IS possible, just not in the normal create header > upload > done! way. You're going to have to mess with the HTML. I did a little Googling and found this tutorial. I don't know how big you'd have to make the header image though--trial and error!


Summer's blog has a lot going on. She posts a lot of DIYs and tutorials and needs the room to post larger pictures. She also has a lot going on in her sidebars. I'm going to make her whole blog a little wider- 1100px instead of my normal 1000. Her sidebars are both 200 wide, which means she has just over 600 pixels in the middle (if you account for padding) for some nice, big pictures.

To make a header, I create a new document in Photoshop (or Pixlr!) that is 1100x500px and 72 dpi (which is best for web. If you were printing, you'd want more like 240 or 300 dpi). It's a lot taller than I'll want the finished product but I like room to move things around. I'll crop it down when I have it the way I like it.

You've got a lot of options for creativity here! You can do even more if you're willing to play with HTML. The standard (and easiest) option is to just create a rectangular header. Make it pretty! Again, go look at those blogs and websites you liked. What about their header appeals to you? Use your colors and fonts!

My go-to tutorial for doing headers is this one.  It completely changed how I do most of my headers. She also links to a handy video of her creating elements in Pixlr, which is really helpful if you're using it to create stuff for your design.

I dropped my hand-written "Sumo's" in there and typed in "sweet stuff" with Neutra Text. I used the gray from the color palette for lines along the sides (which I'll also be using down the sides of the central blog writing area...see that tutorial I linked to for creating and installing that). Then I used the gradient tool (in the paint bucket drop down menu) to do a white/transparent gradient (edit: which I ended up changing but didn't want to re-do the tutorial images :). My quatrefoil background will show through wherever you see the checks. I cropped it down to 1100x234.

I also created a background image that's 1100 wide and includes those same lines going down the sides. 

Again, go check out that tutorial for how to install this stuff. It's a little complex and involves CSS, so I don't want to recreate the tutorial here.

Here's what it looks like so far-

I ended up making a few changes after I did all these images (there's more white behind the text in the header so 'sweet stuff' is more visible) but you get the idea.

Next up- navigation!


  1. My sisters and I are starting to re do our header so this is great advice. Have you already covered how to make buttons with the bar underneath the header?

  2. Yay! I am so excited for this! :)

  3. you're inspiring me to finally get to my blog redesign. hopefully soon. and isn't neutra great? an absolute favorite of mine for sure.

  4. I am loving this DIY blog stuff... I just need to be brave and try some of it!!!!!!


Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...