Basic Blog Designing–Templates and Backgrounds

 

After re-doing my blog design last week I got a lot of requests to do a post on how to design your own blog.  So I decided to do a little mini-series on blog design!  There is so much to say on the subject that if I said it all in one post it would be way too long.  Who am I kidding, even with splitting the posts up they are still going to be way too long, but I know if you really want to know how I do my blog designs you’ll stick with me.

 

Untitled-2 copycrop

Create A Test Blog

Before I start getting into the nitty-gritty of Blog Designing 101, I want to say that I am a huge proponent of having a test blog.  Back when I was still pretty new at doing my own blog designs I read “Blogging In Pink” by Michelle Mitchell (I recommend this book – very informative), and she suggested having a test blog when you mess with your template, because that way if you seriously mess something up it’s just on the test blog, not your real one. 

This was more important back in the day (I feel old saying that) when to adjust colors and widths you had to go into the actual html code of your blog and adjust it there – because if you mess up the html code, it’s really hard to figure out where the error is, and you could just crash your whole blog.  Thankfully Blogger came up with their “Template Designer”, so all of those adjustments can be made without going into the html code now.  Thus making it a lot less scary and more accessible! 

However, I still love having my test blog, because I can do all the final adjustments to details on there – that way my real blog isn’t in shambles for a day or two while I figure out exactly how I want it to look.  So yes, create a test blog.  My test blog is here, if you want to check it out.  It looks pretty similar to my real blog, you’ll notice, because I do all my adjustments on that blog before they go on my real blog.  Trust me, it’s handy.

On to what you really want to read about.

I’ve been doing my own blog designs for about three (?) years, and generally there are only three things you need to make your blog design – a layout you like, a background, and a header.  You can also do other details like buttons.  In this post I’m going to talk about templates/layouts and background images.

Choose A Layout

Before you even start thinking about colors and fonts and buttons, you have to decide generally how you want the layout of your blog to be.  Do you want it wide or narrow?  Do you want a three-column or two-column layout?

You can adjust all that in the Template Designer.

(Note: Click on any of the images in this post to make them bigger)

Blogdesignpost1

Choose a template first – I have mine set to Simple, because I think I have more room in that template to make it exactly what I want, and I like everything laying flat against the background of my blog – but you can also work with any of the other templates the same way.

Blogdesignpost1(1)

Next, choose a layout (three-column, two-column, etc.)

Blogdesignpost2 copy

Then you can adjust the widths of your different columns.  You can see in the photo what the widths of my blog are.

Blogdesignpost3

Note:  I have my blog set to be so wide because I don’t have a background with this design – if you want your background to show you’ll have to make your blog narrower than 1250 pixels.

Once you have that set how you want it you can start to work on the fun stuff!

Backgrounds

Like I said, for my current blog design I don’t have a background, but I have had backgrounds in most of my templates over the years.  There are a few ways to obtain a background image for your blog – (1) use pre-set backgrounds from blog design websites (I used Cutest Blog On The Block and Smitten Blog Design backgrounds in the early years of this blog), (2) make a background image from an image you get somewhere on the web, or (3) make your own.

Like I said, I used to stick with pre-made backgrounds from blog designing websites (there are a lot of websites that have freebies like that), but I got tired after a while of being confined to specific backgrounds and having the little tags on my backgrounds saying where they were made – so I looked into making my own.

I started making my own backgrounds and headers for my blog using digital scrapbooking websites.  But, as I learned after a while, when using other people’s graphics to design your blog you have to be aware of copyright laws.  It struck me one day that I wasn’t quite sure if using backgrounds from scrapbooking websites violated the Terms of Use.  I e-mailed the website I was using to try to find out, and they couldn’t really give me a straight answer, but this is what I gathered – if you purchase a digital scrapbooking kit, you most likely (they couldn’t tell me for sure) also purchased a license for private use that would allow you to use the graphics for your blog.  So basically, if you want to be safe, only use graphics that you purchased to create blog designs – then you are most likely fine.

Since I didn’t purchase anything from that website, I decided to stop using those free sites to design my blog and just invest in a digital scrapbooking software in the future.  Then I won a giveaway for My Memories scrapbooking software (it was very timely) and I started using that.

If you are going to use a digital scrapbooking software, I recommend using My Memories, because they straight-up say in their Terms of Use that it’s fine to use any digital scrapbooking kits for private blog designs as long as you give credit to the designer on your page – you can just add a text gadget on the footer of your blog to say what kit you used and who designed it, and you’re good to go.  Check my sidebar for a $10 off coupon. 

When you download the software I think they also give you a $10 coupon code to use toward scrapbooking kits, so you can buy one to use in designing your blog.  They also have a bunch of freebies.  Total, I think it comes out to about $30 for the software, including $10 worth of kits, which I think is worth it since it also gives you the freedom to change up your design in the future inexpensively.  I tend to change my design a lot, so for someone like me it’s a good investment.

Anyway, with the Blogger Template Designer, all you need to do to add a background to your blog is to have a JPEG image that you would like to use.

If you are using a background from a scrapbooking software and kit, just add the background of your choice to a new page, then save it as a JPEG.  In My Memories, this is what that looks like, and most scrapbooking programs should have a similar option:

Blogdesignpost4

Save the image to a JPEG.  Then add it to your blog in the template designer:

Blogdesignpost5

You’ll have to compress your image so that it’s no bigger than 300 KB.  I usually do this in Microsoft Picture Manager.   Note: Make sure to compress, not re-size – if you re-size it so that it’s only 300 KB it’ll be way too small!  You’ll also have to choose the option to tile your background image if it’s not the 1800 x 1600 pixels needed for a full background.

Making Your Own Background Image

You can also make your own background image for your blog, which I think is the most ideal option.  For one thing It will be exclusively yours – no other blog on the web will have that same background.  And when you make all your own graphics you don’t have to give credit to anyone else, which is always nice.  Plus there is the pride of a job well done!

There are many ways to make your own background image, but I’ll tell you a couple of methods I’ve used thus far. 

The first background image I made all by myself was by editing a photo of my own in Picnik (which is no longer available), but there are a lot of other photo-editing websites you can use, I’m sure. 

Note: I’ve heard (from Tami) that PicMonkey is a good replacement for Picnik.

Here is an example of a way I edited my own photo for a background  - I used the sketch filter on Picnik (along with a couple others I think) and adjusted the coloring to my liking.  Just be creative, combine filters, and see what you can come up with!

Picnik collage1

I used that background in my blog design last fall.

You can also create a simple background in Photoshop Elements, which I’ve done as well.  There are a lot of tutorials on how to do this, but I think the easiest way is to just create a blank file:

Blogdesignpost7

Fill in the blank file with the color of your choice using the paint can tool, then select the cookie cutter tool.  Click on the little arrows and select “All Element Shapes”.

Blogdesignpost8

Choose a shape you like and click and drag to create the shape over your color file.  Click on the checkmark if you like it. 

Blogdesignpost10

Then select your shape layer, right click, and duplicate it (many, many times).

Blogdesignpost9

Click and drag the duplicated shapes until they create a pattern.

Blogdesignpost9(1)

I’m not going to fill the whole page for this tutorial, but you’ll want to fill the whole page.  Then save the file as a JPEG, and you have yourself a background image!

Okay, I think that’s about all I could possibly say about choosing a template and creating a background – if you have any questions about any of what I covered so far, send me an e-mail at throughcloudedglass@gmail.com or leave a comment.

In the next post I’m going to cover headers, social media buttons, and other details, so stay tuned!



You may also like:
Kara @ Just1Step said...

Yay I'm excited to see what else you share!! Updating my blog is on my to-do list. I think I'm going to follow your suggestion and create a test blog.

Ashley said...

Cool! This is very helpful - blog re-designing can be so complicated, but you've described it so well!

Meghan said...

Loving this! Thanks for sharing all of this info Callie. I'll have to try to tackle this over summer vacation or maybe even spring break if I can hop to it fast enough!

Felicia said...

I've been wanting to have a more customized blog template for a long time! I think this will help me a lot! Thank you :)

Emily grapes said...

This was such a great detailed tutorial. You sure put a lot of work into this!

I never thought to create a test blog, but really like your idea. I've been dabbling in blog design for friends, and am dying to redo mine, and just might have to do it this way.

Thanks for a great guide! :)
Emily at Amazing Grapes

Anonymous said...

im so excited that you are doing these posts!!! i need some help figuring this out myself so i appreciate it and will look forward to the upcoming posts as well! :)

LeAnna said...

I have dreaded making the switch to the new templates, and keep doing my designs the hard way through HTML coding. You've inspired me to take the leap of faith! It looks so much easier.

© Through Clouded Glass. Design by MangoBlogs.