The Art of a Header

One of the joys of hosting a blog (for free) on wordpress is the goodies, particularly the themes. Custom Themes can add a sense of ownership to something that initially looks bland and lacks meaning. The theme of this (and my other) blog is Vigilance. It’s money. The colors of the background, border and links can be tweaked to your liking along with a custom header to seal the deal. Sure, wordpress offers the ability to modify each theme at the CSS level for a cost, but I am more than satisfied with what I can do right now, so I’ll save my pennies.

Aside from the color scheme and the widgets on the sidebar, the most important appearance change you can make is the Custom Header. Select a generic image and cropping as necessary or build an image from scratch to fit the size restrictions for the blog. For this theme, the header is 920 x 180 pixels. Plenty of room to get the point across, but not enough room to go crazy with designs. As you know, first impressions are everything. If the header clashes with the color scheme you select (or simply sucks), you run the risk of immediately turning off any newcomers. Not cool.

For this blog, it is my hope that I can keep things simple. Get to the podcast, get to the text, check out a few other relevant links and get on with your day. Clearly this is a fluid process, nothing is set in stone. As things progress you can be sure that I will be tweaking the layout to make sure I am taking up as little space as possible with the peripherals so the main content keeps the focus. With that in mind, let me walk you through some of the design choices I made.

The colors were inspired by Planters. I seem to always have a jar of lightly salted peanuts at my desk at work. It’s one of the few foods I can snack on “for free” so it has become a rather tasty habit to keep up with. Primary colors work for them and I’m hoping it will work for me.

The header itself went through multiple revisions. I always had the idea of dialog bubbles, one for each word. I knew that I couldn’t afford to have a crazy design when the goal is simplicity. So I went to work with Photoshop to see how I could put together the selected colors and the dialog bubble idea in to a final product.

A few things to notice as you scroll through the revisions. I changed the perspective of the bubbles to make them seem slightly more dynamic. Slightly less boring. Putting it at an angle accomplished that. Another change you will notice is the shadow. Initially the header was finalized at version C but it didn’t do enough on a plain white background. The shadow is another subtle touch that doesn’t go overboard, but adds a (very) little something to enjoy.

Version.A - Gotta start somewhere.

Version.A - Gotta start somewhere.

Version.B - Increased text size of 'Talking' to match 'Just'

Version.B - Increased text size of 'Talking' to match 'Just'.

Version.C - Spaced out Bubbles

Version.C - Spaced out Bubbles.

Version.D - More tweaking of spacing. 'Talking' takes up more space than anticipated.

Version.D - More tweaking of spacing. 'Talking' took up more space than anticipated.

Version.E - Added drop shadows.

Version.E - Added drop shadows.

Version.F - Changed color of shadow to a lighter shade of black/gray.

Version.F - Reduced size of bubbles to fit shadow in header without cutting image.

Final Version

Final Version (v1) - Used a lighter shade of black/gray for shadow.

I’m no Picasso, but it works for me. Overall the process took a little over an hour. Shoutout to Crystal for helping me throw some ideas on the wall until something stuck.

Advertisement

2 comments

  1. looks great! I’m still pouring through options…I can never decide lol

  2. I do love me some Photoshop. Final product is fanfreakintastic.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: