Tools of The Trade Day 2: How to Make a Header (for Blogger)

How to Make a Header (for Blogger)

I LOVE making headers for my blog (and blog buttons but that’s another post for another day ;)). It’s just a really fun way of using creativity and artistic-ness and bringing what I imagine for my blog to something that actually exists. Or sometimes it ends up looking like I used the crayon tool on Paint and didn't spend two hours on it.  At this point, no. No, it isn't fun. But the rest of the time it is. *grins*

I know a lot of people are at a loss as to how they can make a header that looks good for their blog. So I’m going to teach you a few steps and tips, and pretty soon you’ll be making your own gorgeous headers. Easy peazy lemon squeazy!

First of all, let me just say that for those of you who don’t really want to put that much time and effort into creating a design for your blog, there are two websites you need to know about:

~Hot Bliggity Blog (Free backgrounds in three sizes: standard, widened, and full-width.)

~Shabby Blogs (Free EVERYTHING. I’m serious. Backgrounds, headers, buttons, etc.)

And if you still want to dive into the scary world of header creation… welcome to the dark side. Mwahaha. Just kidding, but really, kudos to you and let’s get started. For the purpose of this tutorial, I’m going to use Ninja Reader as the blog name. If a book blog already has that name, sorry. It wasn't intentional. Because let’s face it, if I knew there was a blog called Ninja Reader, I’d be all over it. ;)

Step 1: Find your header size.

This is really important. While it doesn't matter how tall your header is (in theory), it has to be a certain width/length.

You find it by going to your Blogger homepage, clicking on your blog name, and going to LAYOUT.

Once you’re on the Layout page ( you've probably been there a lot already) you need to click Edit in the Header section which I have marked in red with extreme precision.

A smaller window will pop up that looks like this:

Underlined in red, is the width of the header area—920 pixels. In order to find this, you’ll have to remove your current header. Don’t worry though, once you've checked for the width of the header you can click CANCEL and everything is exactly the same as it was before you made the change.

Note: You probably notice the green rectangle around “Instead of titled and description.” This option needs to be selected when you’re using a header you've created for your blog.

Step 2: Brainstorm.

Now that we know that the header space is 920 pixels wide, we can leave headache-inducing parts of the header making process for a little while and have fun. Brainstorm! What kind of look do you want your blog to have? There is an amazing rainbow of possibilities—professional, artsy, cute, vintage, etc.

You need to decide what you want for your blog. In the case of my imaginary blog, Ninja Reader, I’m going to go with a slightly abstract look while also tying into the Asian aspects that the word “ninja” brings to mind. I also decide that I’m going make the background clear (I’ll explain that later) and just make the header pop with awesome font and color accents.

Obviously, you’re not going to get it exactly the way you want it on your first try. Maybe you won’t like the colors, maybe you’ll decide that you don’t want professional; you want artsy. It’s a given that you might have to make tweaks. Therefore, even though I put the brainstorming step here, brainstorming is going to happen all throughout the whole process.

Step 3: Start creating your masterpiece.

Now I know what I want, so…uh….what do I do now?
First, I go to a very handy website called PicMonkey.com because I need to make a blank to use as my canvas.
There will be four icons up front and center. Click on the Design one.

This brings up a page that’s possibly going to make you freak out. Don’t freak out. You've got this. *grins*

You’ll automatically be in the first section that kind of looks like a gray square (circles above in red) as soon as the page loads. Then click on Resize which is also circled in red. I like red.

As you can see from my awesome artwork, the number on the left is the width in pixels and the number on the right is the height in pixels. The option “Keep proportions” will also automatically be selected. We don’t want that since that makes our header square. So unselect that.

Remember the width we found near the beginning? Put 920 in the left square and, because I don’t want my header to be too tall or too skinny, I put 300 in the right square. I've chosen for my header to be 300 pixels tall but you can adjust this measurement to whatever you want. Don’t forget to hit Apply!

Now that you have your canvas the right size, we need to change the background to transparent like we talked about before.

As you can see, it will be in the same section as the Resize option. Instead, though, you’ll click on Canvas Color. 

Click the Transparent option and leave everything else alone.

The checkered grey and white background means that my header space is now transparent. It’s really important to remember that the same is true for images found through Google or any other search engine. If they have this background or a similar one like this:

Then only the image will show when used (not a white background). If possible, these are the images you want to find to use on your header. They will fit seamlessly into your header whether the background is transparent or orange or black or any other color.
Now that we’re ready for application of awesomeness to our header, we need to first choose a font for our blog title. You can find the fonts by clicking on this:

There are an amazing variety of fonts for you to choose from and most of them are completely free. For our example blog, I choose the font Nightbird.

Then I’m off to find images to incorporate into the design. When you do this, you’re going to have to save the image to your computer in order to load it onto PicMonkey.

To load the picture, you have to click on the butterfly option from the menu of icons. When you’ve done that, click on the ‘Your Own’ button.

Find the image (you can only choose one at a time). Once you’ve selected it, it will appear on your header. You can adjust size, color, and rotate it.

Note: A problem that might come up is that your image is over your blog title and you want it to be behind it. If so, all you have to do is right click on the image and choose the Send to back option. Now you’re all set. 

Have fun with it! This is my favorite part of the whole process. Tweak this all you want.

On my personal blog I don’t have a tagline, but for this blog I decide, “Hmm, I think a tagline would look cool.” Of course, following the whole coolness of ninjas. ;)

I choose to make up my own instead of using a quote or something like that and come up with “Read, Review, Ninja Kick.” (It stinks I know. But it’s kick butt.)
This is what my header looks like now…

Push save. After you do that, this page will come up.

PicMonkey will automatically have the file named ‘Untitled’. In the part circled in red, you can change the name to whatever you want. Make sure you’ll be able to remember it easily though. Otherwise, you’ll NEVER be able to find it if you’re like me and have a gazillion downloaded files.

Now you have two options. Either you can choose Save to my computer which will place the file in your Pictures folder (most likely) or you can choose the Download it link (in blue) at the bottom left-hand corner. It’s completely up to you and personal preference.

YOU HAVE SUCCESSFULLY CREATED YOUR OWN HEADER. *cheers* I knew you could do it.
Just for fun, and because I want to see the result of my work (hehe), I’m going to try it out on a nameless blog I keep to test out designs.

And there it is.

What do you think? Are there any other questions you have that I didn’t cover?

Skylar Finn is the pen name of a recent high school graduate (who never gets tired of saying she's graduated). Her real name is top secret because she's secretly a spy. That does spy stuff. Secretly. When she's not spying, she blogs about books, life, and chocolate at Life of a Random. Skylar loves talking with bookworms about everything so don't be shy. She's probably weirder than you anyways.