Wednesday, September 14, 2011

DIY Custom Blog Background

So today I was puttering around on the Picnik photo editing website after seeing a tutorial posted on Pinterest for making your own printables for cupcake toppers, etc.  The tutorial that was pinned was from "Homemade by Jill" and can be found on her blog here.  While playing around on the website, though, I kind of decided to go my own way just a tad bit.  First, I made a banner, and while it looked good... it didn't seem complete without a background.

I am one of those people who will NOT pay for web design.  I don't care how long it takes, I will figure it out on my own.  The only downside is that I'm a bit... err.. technologically challenged.  Simple is key, and making this background image is as simple as you can get.

Step 1-  Just like in the tutorial on "Homemade by Jill", you want to start with a blank .jpg image.  Open up Microsoft paint and it should immediately have a blank image.  I saved that to my desktop as "blank.jpg".  Next, upload it to Picnik.com.

Saving a blank picture in Microsoft Paint.  Upload to Picnik.com

Step 2- After uploading to Picnik.com, click on the "Stickers" tab.  In the left-hand column, you will see a bunch of options.  Scan through and pick what you would like your background image to be.  Some of the options reguire a Premium membership, but I was able to do my entire blog using freebies.  Once you've chosen the design you like, click it once. 
Step 3- I moved my sticker image up and to the left a bit, just to center it.  (Felt better that way, but doesn't matter, you'll be cropping it later.)  When your sticker image is selected, a toolbar titled "Sticker Properties" pops up and it looks like this.

Use your mouse to click on the dot in the color scale and to slide it around.  Your sticker image will change color.  Drag it around until you find a color that you like.  I'm going to use purple this time.


Step 4-  Now, we're going to fade the image.  Background images shouldn't be super-bold or they take away from the rest of your website.  They should be seen, but not OBSCENE.  (Bad, I know.  I thought it was funny.)

     To fade the image, look right below the color scale in the sticker properties toolbox.  You'll see a sliding tab under "Fade".  Use your mouse to slide it back and forth until you think it "feels" right and looks good.  In my case, I went with 70% fade on this one because I wanted it soft (though the one on my website is 50%), it just depends on the color and how bold you are trying to make it.

Step 5- Now, right click the image and a menu will pop up. 

   Scroll down to "Duplicate Shape" and click.
  Now you have two images that are exactly the same.  Place your second image where you want it to be and use your mouse to choose another color in the color scale.  Fade should still be uniform and set to 70% because of the duplicated image, however, if you want to adjust it, feel free.  For my second image, I chose blue.
Step 6-  If you want to add one more image of another color, repeat Step 5.
Step 7- Now, look at the tabs on the top of the page and select "Basic Edits" and click on "Crop" in the left-hand column.
Slide the crop box around your image until it fits the way you want it to.  I wanted mine to have an unbroken, continuous look, so I cropped it super close.  If you'd like a border, but sure to leave a little bit of space around the edge of your image. 

Click "Apply" (left-hand column) and your image is cropped.

Step 8- In the tabs section, click "Save & Share" and save the image to your desktop.  (Pick a name that's easy to remember or you'll have to wade through to find it.)

Now you have a background image to put on your blog!  The next few steps will tell you how to add it to a "Blogger.com" blog.  That's what I have and that's what I know.  Anything else and you might have to look it up.

Adding it to Blogger-

Step 1- Sign into your Blogger account.  You should be taken to your Dashboard.  On your Dashboard, click on "Design".  Under "Design", click "Template Designer".

Step 2-  When your Template Designer shows up, click on "Background" in the left-hand column.  Then click on the white "background" image.

Step 3- A menu will pop up.  Select "Upload Image" and upload the image that you created.  (I stayed with my original background in this one instead of using the tutorial one.  Was too lazy to change it.)  :)

  Select "Done" and you're good to go!
 


4 comments:

  1. No problem! I actually enjoyed posting a computer-related how-to (Didn't know how it'd go). However, I'm always up for a DIY challenge! ;)

    ReplyDelete
  2. Thanks! I am so new to this blogging stuff!

    ReplyDelete
    Replies
    1. No problem! I believe the Picnik site has closed down, but if you click on the link, they should redirect you to the Google program that took over their photo editing software. (Or you can do a search for "free photo editing". I've also used Photobucket in the past.) Good luck with your blogging! :)

      Delete