Tuesday, April 22, 2014

How to Blog Series: Making a (Free) Blog Header

This week marks Two It Yourself's First Blog-iversary.  We're celebrating a year in the blogisphere with a "How to Blog Series."  Today's topic is on how to make a free blog header.

Every blogger knows looks matter...I may be in my pajamas and makeup-less at the keyboard, but my blog's gotta look good. :) Since the blog header is the first thing people see when they come to your blog, you want to make a good first impression and that means having an eye catching blog header. 

Two It Yourself has gone through a series of blog headers, but in recent months we've finally found one that works, for us, for several reasons.
1) It immediately gives off the look, feel, and vibe of our blog.  It sets the tone that we use throughout the blog.
2) The header takes up the full width of the screen without forcing a scroll bar along the bottom.
3) The header is short enough that the ad above the first blog post is 'above the fold'
4) The background is transparent. 
Let's make one thing clear: I am in no way a blog graphics design expert. For all I know my blog header could make blog and graphics designers cringe, shriek, and go blind all at the same time.   All I'm here to do is to share with you what I have found works on my blog.

All four of the points above are made possible by a monkey.  PicMonkey.  You've heard me refer to PicMonkey many times over the last six months or so and I'm here to brag on 'em a little more.  PicMonkey is a free graphics designs and photo editing website and it's just.plain.awesome.

PicMonkey Photo editing made of win

It's where I made my header and where I re-made my header and where I re-made it again. The first thing you want to do when making a blog header is to know your size.   I am on blogger so to find out the width of your blog, and therefore your header, you go into Template > Click Customize > Adjust Widths.  My blog is 1200 pixels wide. 

I can then take that measurement and open PicMonkey > Design > Crop > Adjust Width to 1200 x (optional height).   The dimensions of my header are 1200 x 350.  The height of 350 makes the header big enough, but leaves enough room below the header that the tab bar and top banner ad are visible immediately.  Below is a screen grab of exactly what you see when you first land on Two It Yourself's home page.  This is is prime real estate and if you monetize your blog, you want to take full advantage. I have found that ad space is the most lucrative and has been even more so since I reduce the height of my blog header to ensure the ad was seen immediately.



 Two It Yourself's header is a white background with mostly pink and black font over it.  It's important to write down the exact color code of the colors you're using so you can use the exact same tones throughout your blog.  In PicMonkey you can find the code on the text tool box.  You can see it circled below. You can then use that color code in Blogger to indicate what colors you want used for your tab bar, post titles, etc. 



Now let's talk about having a white blog background.  Not all white is created equal...because as you'll see if you attempt to make a blog with a 'white' background, it's actually not white.  You end up getting what looks like a framed out header when you bring the header image into your blog. This happens because the header white isn't actually the exact same color as the background white of the blog.   Can you see how the background of this header almost looks like a pale pink? Uh that drives me bananas..it's just not seamless!


 To avoid this, make the header background transparent.  In PicMonkey click Crop Tool > Canvas Color > Check Transparent.  While you're editing the header will look like this...


But once it's uploaded into the blog it will look like this...see how there's no pinkish box now?  It just appears to be floating on the background of the blog.  Much better...

Once you are finished designing your free blog header in PicMonkey, save it as a jpeg and then upload it into your blog template.  I suggest NOT closing out the image in PicMonkey until you are completely satisfied with how the header looks on your blog.  If you keep it open after you save, you can still make changes to your design. 

Thanks for stopping by 2IY! If you like what you see, we'd love for you to pin it!

Note: This post contains affiliate links.  By clicking on them you are helping support the continued success of Two It Yourself.  As always, all opinions are 100% my own.

 photo 23de5266-91bc-4226-85c8-8c74cb4c20ee_zps1313e4f5.jpg


use twiter photo Twitter_48x48_zps4e06061c.png  photo 2b820f06-c93b-4b24-929c-96287390140f_zpsf3cd3a23.jpg use twiter photo Twitter_48x48_zps4e06061c.png Use Feed photo Feed_48x48_zps63f27a4f.png Use Feed photo Feed_48x48_zps63f27a4f.png Use Feed photo Feed_48x48_zps63f27a4f.png

PicMonkey Photo editing made of win