Tutorial: Making Your Own Blog Background


     So, I've been blogging for over a month now, and have been sprucing up the aesthetic portions of it as I go. It really has been quite the learning experience--and I've really enjoyed it.

     Until recently, my blog has just had a white background. I liked the clean look, but this weekend I decided to try to switch things up a bit and add a blog background. I basically hate all the presets on the Blogger interface, so I made my own on Photoshop Elements 6.0 (as with my other Blogger tutorials, which can be seen here and here). To be honest, I'm not sure if I like having a background as opposed to having the blank white space, but it's still handy to be able to make your own.

     It really was a simple, simple one to make. I did spend quite a bit of time fiddling with just the right dimensions, but I eventually found it. So, I'll save you the time, and give you the dimensions I used. Of course, I would encourage you to experiment to your heart's content. What worked for me won't necessarily work for you, and obviously whatever I say isn't a hard and fast rule. I'm only a beginner myself, after all.

     Anyway, here's how you can make your very own background.
1. Create a blank file in Elements with dimensions of 750 pixels wide by 667 pixels tall.

2. Modify the background to your liking. Save as a JPEG, PGN, or GIF. Be sure it is under 300KB in size, or Blogger will NOT allow you to use it.


Here's what mine ended up looking like. Just a solid background with some "stitch" brushes I downloaded online. (I can't remember where... sorry.) You could also make your own brushes. I've done that in the past and it is very easy to do as well. Perhaps I'll make a tutorial for that at some point as well? 
(Making brushes is handy for watermarking your images... just a random aside.)

3. Then, go to the Template menu on the Dashboard, and click "Customize." Then, go to the Background tab, and click on the "Background Image" button.


From there, select "Upload Image," and find your background to upload it.

4. Depending on your image, you may want to un-check the "Scroll with page" option. This makes it so your background remains stationary and the body of your text scrolls up and down independently.

     And, you are done. Super easy as promised, but hopefully having the dimensions provided helped a little.  Best of luck!

2 comments:

  1. I followed your directions on sizing exactly and it's still telling my file is too big - any suggestions?

    ReplyDelete
  2. Hi Beth, if you're in Photoshop, you can use "command, shift, I" (or "control, shift, I") to resize the image and make it smaller. Probably whatever image you're trying to use just has more data than the background in this tutorial.


    Thanks for dropping by. :0)

    ReplyDelete

Thank you so much for leaving me a note! I love hearing what my readers have to say--in fact, comments literally make my day.

Please be nice and don't use profanities or other negative language.