Blogging Startup Edition Part 2 - Background Creation

If you have never set up a blog of your own, now might be a good time to check out my Blogging Startup Edition in order to pick out the appropriate blogging tool(s) for you.  If you've already done that, more power to you, and let us begin! 

In this tutorial, I am going to cover the basics of adding a background to your blog.  This is particularly for those of you who would like to create your own.  I'm taking care of you guys first because as a fellow designer of blogs, I know how much work you've put into this, or would like to put into it.

1. Start by creating your graphic or background.
• I use Photo Pos Pro for my editor, it is free and downloadable online, just Google or Bing it.
• Other free options are Gimp, Irfanview, Paint.net, or search on Bing for "free photo editors".
• Best photo editor around (in my humble opinion) is Photoshop but it cost more green than my money tree can grow.
2. For layered backgrounds, such as the one to the right, (note that it is different colors, and there is a layering effect). You will need to follow the following protocol (unless you already have a proven method):
• Open a new blank image; resize it to 1200 pixels (px) width and 900 - 1100 px height.  This should be colored the base color (in the example to the right, the color is creamy yellow).
• Open a second new blank image; resize it to 1450 px width by 1100 px height.  This should be your secondary color (the burgundy color in example).
• Paste second image over the first (you will need to open the layers window in your program, add a new layer, insuring that it is transparent prior to pasting).
3. Add any other elements, such as the cats and pawprints in example above.
• If you are having trouble deciding what sort of element to use, I recommend visiting DaFont.com for fonts.  That is how I handled the one above.  The cats, the pawprints, all of that is font that I edited a little.
4. Save your photo as a .jpg or .png and save on Photobucket, or another photo host. 
• In Photobucket, click Upload
• Click "Customize your upload options" link below the sharing options.
• I recommend choosing the "Best possible quality" option first.  If, when you are done, your background has white spaces on either side of the photo, go back into Photobucket and upload again with a higher resolution (1280x960 / 1600x1200 / 2048x1536).
• If this still does not work properly, go back to your photo editor and resize the image there.  Be certain to Preserve the Aspect Ratio.
5. Next, you need to prepare your template.  Go into your Dashboard and click Design.
• Now, don't get scared, but next you are going to click "Edit HTML".  If you find that you are a bit scared, Download the Full Template :D.
• Scroll down to the bottom of the page and click Select Layout Template (below "Old Templates" heading).
• Select one of the Minima templates and save.  Go back up top and click Edit HTML.  You should be back where you were a moment ago.
6. Inside the box full of funny stuff, scroll down until you see this code (<= link).
7. You will now add the code in red (<= link) to make it look the same as my code.
8. If you have not already done so, add the url to the background photo you would like in the section provided.
9. Click Preview.  If you like what you see, Save Template.

Be patient, take breaks if necessary.  Designing is a lot of work, so expect it to take some time.  Next week, I will be covering a few more basics, so please come back for more. 

Tutorials Coming Soon: Removing Blog Title Borders, Changing Alignment of Blog Posts, Creating New Header (and blog description), Changing Alignment of Header... and much much more.