Tuesday Tutorial: Blog Design

Now, I’m not claiming to be a genius when it comes to blog design, but a few people have asked me to make a tutorial on how to create a blog header and sidebar buttons, so here goes! And note, these are both things you can do whether you’re hosting your own blog or blogging free (with WordPress, anyway. I’m not sure how blogger works, but you can probably customize your header in relatively the same way.), and they’re both great and easy ways to make your blog look more personal and/or professional.

First, before you start making your image, you’ll want to find a font that suits you. You might already have one installed on your computer, but if you aren’t satisfied with the fonts your computer gives you, you can find tons of great, free fonts on 1001 Free Fonts , Font Space, or Urban Fonts. I’ve used all three of these sites to find fonts I like– the owl in my header is a font!

Once you’ve found fonts you like, you’ll have to install them on your computer (control panel>appearance and personalization>install or remove a font>file>install a new font… and select the zip folder with your downloaded font in it), and then you’re ready to start creating!

The Header

Now, you’ll need to find your header image size. This, in wordpress, can be found by clicking “appearance>header”  in your sidebar. The header image size is that line that tells you how big your image can be.  If you’re not sure what I’m talking about, it’s this line:

That underlined bit? That’s how big your header image can be. So now, in a photo-creating program (I use paint.net, which is a great free program that is (I’m assuming) similar but inferior to photoshop) you’ll want to open up a new image, find the option to resize the image, and change it to your header’s proportions, like so:

Be sure to un-check the “maintain by aspect ratio” box before you enter the correct pixels, or your image will try to stay uniformly sized as you change the width or height.

The next part is easy: find that font you loved, type out your blog’s name along with whatever other decorations you like,  save (be sure to save as a jpeg, as some sites don’t like to upload other images to their headers), upload, and voila! Your header is done!

The Sidebear Buttons

Creating sidebar buttons is nearly as easy as creating your own header. As before, you’ll want to find a font that you like before you start making your image. You’ll also need to figure out how wide your widget-area is. In wordpress, widgets are generally somewhere around 300 pixels wide, but if you want to figure it out with a free account, the best way I can tell you to do that is to take a screencap of your blog (the “print screen” button on your keyboard), paste that image into  your photo editing document, and crop it down to the size of your widget area.

Once you’ve done that, you can create your sidebar image as you wish (text, image, whatever).

Next, you’ll need to upload that image into a new post, as you would if you were inserting a picture into your blog post. Make sure that before you insert the picture into your post, you’ve selected the “none” for the image alignment, otherwise it might align funny in your sidebar. Once it’s uploaded, hit the “html” tab. You’ll see something like this:

Now, if you want your button to link to a page, you’ll first have to replace the highlighted link:

With your desired page url:

And then you copy the entire thing, paste it into a text-box widget, and voila!

The sidebar image:

…will display like a picture, and link to your desired page! If you want to do multiple images side-by-side, such as my follow buttons for bloglovin’, facebook, and etc., you’ll need to size them half of what your sidebar area is (mine is 300 pixels, so my follow buttons are 150 pixels wide), and you can simply paste the html codes for them beside each other in your widget rather than each one in a new paragraph.

If you’re wondering how I made the Eccentric Owl follow button, click over here. It’s a great little tutorial on how to make yourself a blog button.

A Few Notes on Design

Personally, when I visit a blog I don’t like to see header images that are multiple photographs of yourself, nor something with a font that is all over the place. It looks messy and amateur. This could be my own personal preferences, but to look more professional, choose a font that is easy to read and not too  distressed (such as this) or overly-decorated (like this), and instead of using a crazy font to show your personality, try finding an object to stick in your header that in a flash shows who you are. Such as my owl, or Feathers & Freckles’s bird, or Love, Meesh’s heart.

If you really, really want to have a picture of yourself in your header, try to make it something clean and focused, such as The Styling Dutchman or The Girls With Glasses headers– their background is plain, and there’s only one picture–, and don’t go too crazy with your font!

With your sidebar buttons, keep the same thing in mind. You don’t want your header or your buttons distracting people from your blog posts.

Those are about all the tips I can think of in designing your own header and buttons. If there’s a question you had that I didn’t answer, please ask! This is all relatively simple stuff to do, and everything I’ve learned about blog design, I’ve learned by trial and error.

I hope this was helpful to you!

Have a wonderful Tuesday!

P.S. In case you were wondering, the sign-out image (above) was created using the same method as creating a header or sidebar button. Simply type out and save a sign-off, upload it, and then in the future all you have to do is copy the image from a previous post and paste it into a new one. Easy-peasy!