How to Make Your Own Blog Background --Updated!!

Updates for this tutorial are in red!!

Finally, the post you have all been waiting for ~ How to Make Your Own Blog Background! (For a background that does not require a lot of designing on your part follow the Instructions Here to Make Your Own Blog Background.)

To start, you will need to have software that is designed for editing/creating graphics. If you want to use Photoshop but have no plans for a profession in graphic design or photography or anything along those lines, I highly recommend Photoshop Elements. It can do almost everything the professional version (CS4) can do, it just takes a few extra steps sometimes. I bought it at Costco with a coupon for about $50 a few years ago and it worked great! You can also use Paint.net (for free, I haven't used it, only heard about it). Another option would be digital scrapbooking or card-making software like PrintMaster. I used PrintMaster for headers when I first started and it worked great. NEW: Another option for design software: is Pixlr (http://pixlr.com). It is very similar to Photoshop, it's free and requires no download of software. You do everything on the site and you can still save your work to your computer!

Although these instructions use Photoshop CS4, they can be adapted to Photoshop Elements or any other similar software.

Here are the instructions. Remember to click on an image to enlarge it.

**Before you start, you need the Minima template. However, this template is no longer available. Instead, follow steps 2-3 in the instructions here.)

1. Open a new file.

 The width and height of your file is up to you. I have a very wide screen and have found that these measurements work well for really wide screens. (This is about 27 inches wide and 15 inches high.) I use a resolution of 72 pixels/inch because some of the designers whose graphics I use have asked that I use that resolution. RGB is the color mode that is best for the web. I always use a transparent background, but for a blog background white is ok too.

2. Once your file is open, you need to mark the middle section where your blog is. If you are using the Minima template, then use my measurements below. If you use any other template, you will have to make your best guess of how wide to make it and then make adjustments after you place it on your blog.

To mark the middle section, select the Rectangle Tool from your toolbar.

Now, draw a rectangle that is centered on the page and is about 750 pixels or 10 1/4 inches wide:

In Photoshop, the color of this section does not matter right now. It can be changed at any time or covered with digital scrap paper. Right now it is just marking our center section.

3. Next, create your own pattern to fill the background OR find a digital scrapbook kit or something similar to fill the background. You can search online for digital scrap kits or go to the sites listed in my sidebar under "Design Elements". But be careful...not all kit designers allow you to use their kits for web pages. Read a designer's Terms of Use or email them before using their kits on your site. This is especially true if your blog is a commercial blog. I email designers all the time asking for permission and they all respond very quickly.

(From here to Step 5 I give detailed instructions on how to actually place elements from a digital scrap kit onto the background. If you don't need this, skip down to Step 6.)

In this example, I am going to use a kit from Just So Scrappy's kit Hope for Brady. In Photoshop, choose File, Open and find the folder that contains the kit you will use. Open the patterned paper that you would like to use for your background. To copy this paper to your background, go to the Layers panel on the right and right click on the layer that contains the paper image. Select Duplicate Layer.

A window will then pop-up allowing you to choose where you would like the duplicate to be placed.

The background that I am creating is called Puzzle Pieces. Therefore, I will select "Puzzle Pieces.psd" from the Document drop-down menu and then click OK.

When I do this, the new paper will show up as a separate layer in my background. If you have used the 72pixels/inch like I did, you will notice that the paper is huge, spreading way beyond the borders of my background. That is because this kit is created in 300pixels/inch. To fix this, simply drag the paper down with the Move Tool (the black arrow) until you see the corner and then shrink it down to a size that will fit on your image. I shrink it until the height matches the height of my image.

 Now, place the paper behind the center rectangle by dragging the corresponding paper layer below the layer containing the center rectangle.

 

We now have half of the background filled.

To fill the right side with the same pattern/paper, go to your Layers panel again and right click on the layer containing the paper. Choose Duplicate Layer. This time, click OK in the pop-up window without making any changes. You now have a duplicated layer on top of the original. With the new layer selected, use the Move tool to drag the new paper over to the right side. (If you hold down Shift it will keep it lined up with the paper on the left.)

 

4. It is time to make the center rectangle match our background. If you want to just change the color of it, go to the Layers panel, find the layer corresponding to the center rectangle and double click on the small black square. A window should pop-up allowing you to click on any color of your choice.

Another option is to replace the center section with a matching piece of scrapbook paper. To do this, choose File, Open and find the folder with the kit that you have been using. Choose the paper that you would like to fill the center rectangle. Duplicate the layer as shown in Step 3, re-size it and place it above the layer containing the center rectangle in the Layers panel. It is ok if the paper is bigger than the rectangle. You don't have to re-size it to fit exactly.

Your layers should be in this order.

To make the paper fit exactly, we are going to create a clipping mask. This means that the black rectangle we created is going be the mask for the paper, cutting off from view everything that does not fit in the black rectangle. So, to create the mask, hover your mouse on the line between the layer containing the center rectangle and the layer containing the new paper. Hold down ALT and you will see the following (or something similar) where your mouse is.

Click on the dividing line when you see this image. The paper should now be "clipped" to the size of the black rectangle.

5. Now it is up to you to add any other embellishments and effects that you like. I usually add a few shadows and/or ribbons. Here is what I came up with:

6. Before we can place the background on our blog, we need to save it as a jpg. Go to File, Save As. Name your file and then in the drop-down menu that says "Format", choose "JPEG". After you click Save it will allow you to choose how big to make your file. Make sure that the file is no larger than 1 megabyte. Otherwise your image will show up way too small on your screen.

The creation process is now done...time to upload it to the web. (Make sure your file is also saved as a Photoshop File, psd, so that you still have all your layers intact in case you need to make adjustments later.)

7. To place your image on the web, you need to find an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button.

UPDATE: After you click the green "Upload Now" button, you will see the following in the middle of the screen. Click "Bulk Uploader" as you see below:

You will then see a list of folders on the left where you will find the folder on your computer containing the background image you are uploading. Below that, you will see the following box. Click "More Options" before you choose your file.

A small window will appear just like the image below. (The column of options on the right will only be available if you have a Photobucket Pro account. This is not necessary for this tutorial. A free account will work just fine.) Choose "1 megabyte file size".

 
 If you do not choose 1 megabyte, your background will be too small on your screen. Once you click "1 megabyte file size", click Save. Then, find the folder with your image and click on it. Then you should see all of the images in the folder in the box marked "2". Find you background and click on it. It should now show up in the box marked "3". Now, click "Upload".

When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

The following screen should pop-up:

In the box that says, "Direct link" click anywhere in the box. This will copy the link code so that you can paste it in the next step.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until you see the option "Share". Click "Share" and then click "Get link code" from the pop-up window. Click the "Direct link" code until it is all highlighted and then copy it by choosing Edit, Copy or by pressing Ctrl-C on your keyboard.)

8. Time to go back to your blog. Go to your Design page from your Blogger Dashboard. Click "Edit HTML". Before you make any changes, back-up your blog. Scroll down in the middle box until you see this (it is near the top after all the "Variables definitions"):

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

Add the lines you see in red so that the code now looks like this:

body {
  background-image:url(Your Link Code Here);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:top center; 
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

Replace the "Your Link Code Here" with the link code you copied from Photobucket. Preview your changes, by clicking "Preview", before saving to make sure that you copied correctly. The semi-colon at the end of each line is VERY important, don't skip it.

**Occasionally the background does not show up when I edit the HTML as above. If this is the case for you too, try this instead:

A. Go to Page Elements from the Design tab.
B. Click Add a Gadget and choose HTML/JavaScript.
C. Type the following in the Content box:

<style type="text/css">
body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>

Be sure to replace Link Code with the Link Code you copied from Photobucket.**

Click "Save Template" and then "View Blog".

Congratulations! You created your very own blog background!! 

** Once your background is on your blog, you may need to make some adjustments. Just make sure that you save it as a jpg after you make changes, delete the old background from Photobucket and then upload it again. (If you delete the old background from Photobucket before uploading the new saved version of it you won't have to change any of the code.)

** If you previously had one of my free backgrounds on your blog, you will need to remove it so that the new background will show up.