May 4, 2011

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.

31 comments:

  1. Hey there! Many thanks for starting this blog and showing us all how to make our own backgrounds. However I am having a bit of trouble... I have made my background, used all your coding etc to put it up and it goes on but it is really small? And doesn't show as big as your backgrounds... Can you tell me where I am going wrong? I am using the HTML/JavaScript way of coding as the other way the image doesn't show up at all. Many Thanks!

    ReplyDelete
  2. I am having the same trouble as VickyLouise did. I tried adding the code both ways and it didn't make a difference. Any help would be appreciated. Thanks.

    ReplyDelete
  3. Hi Jan,

    So sorry you are having trouble. I have updated my instructions to fix the problem mentioned. Just look for the part in red. Basically, you need to choose "Bulk Uploader" in Photobucket so that you can change the size of the image when you upload it. It needs to be able to upload images up to a "1 megabyte file size".

    Let me know if you still need help after trying the new instructions.

    ReplyDelete
  4. Thanks for your help Dani. I will give it a try.

    ReplyDelete
  5. Sorry to bother you again Dani but that part worked great. Thanks ffor that. The problem I'm having now is that I added some elements that go over the edges a bit on the sides. When I add it to my blog they are behind the scrolling middle part. How do I change that so they are on top? Here's what I mean on my practice blog http://wordartonly.blogspot.com/

    ReplyDelete
  6. Jan,
    I noticed a couple things that will help you. First, you need to widen the middle section. Go back to your original file where you created the design and make the middle space wider. Save your file again and then delete your old image from Photobucket. Once it is deleted, upload the new image to Photobucket. As long as they both had the same name, you won't have to change the code on your blog. Check your blog again and you should be able to see the changes.

    Second thing you need to do is go to your HTML (back it up before you make any changes). Find the part that says:

    #outer-wrapper {
    background:#6e5c52;

    You need to delete the part the entire line that says "background:#6e5c52;".

    This line was adding a background color to the middle section. If you erase the background, it will just be transparent.

    Let me know if this helps or not.

    Dani

    ReplyDelete
  7. Jan,
    Your background is gorgeous, by the way!

    ReplyDelete
  8. Hi Dani, I didn't have that color in the html. I changed it with the template designer. Anyway I widened the middle part and I'm happy with it now. Thanks for helping and the nice compliment. I will leave it up so you can see how it looks now. Hugs, Jan

    ReplyDelete
  9. hi Dani, I followed the directions, the background appears on the blog but it isn't in the center like i want it to be, any suggestions??

    ReplyDelete
    Replies
    1. Is this on your desserts blog that is listed on your profile? It looks pretty good but if you want it to look better you may have to just go back to the background image file that you created and move the sidebars until they are just right and then upload it to Photobucket again. Does that make sense?

      Delete
  10. Hi Dani,

    I read you had surgery so if you can't help right now I understand. I made a background using your tutorial but I can't seem to get my background to post to blogger. Any ideas? I tried to go to the old interface and new. What to do?

    P.S I love your blog! I have used all of your tutorials as I prepare to launch a new teacher blog for a friend and I.

    Sincerely,

    Alison

    ReplyDelete
  11. Dani,

    No worrie, I got it!

    Thank You,
    Alison Funk

    ReplyDelete
  12. Hey Dani,

    I had to make some changes to my background and now when I follow all the same steps to upload nothing is happening; Blogger is very frustrating. Any ideas

    ReplyDelete
    Replies
    1. Did you delete the old image from Photobucket before uploading the new one? Make sure that the direct link in your code matches the direct link in Photobucket. Let me know if that helps.

      Delete
  13. Hi Dani, I have created a background using your tutorial and am having a few problems.
    The first was when I went and tried to edit my HTML for my blog I could not find:
    body {
    background:$bgcolor;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    And then when I went in just to use the HTML/Java gadget and copy and pasted the code you gave for that I couldn't get the background to show up. Do you have any solutions? It took me forever to make my background and I'd love to use it!

    ReplyDelete
    Replies
    1. Hi Amanda,

      You probably don't have the Minima template. That is why you don't see the part you copied in your comment. You will have to do the gadget instructions but look again at my tutorial. You don't put the code "body {..." There is another code you have to enter. It's the code above that starts with <style type="text/css"> and ends with </style>. If it still is not working, did you upload your image to a site like Photobucket? Did you copy the direct link for your image? You can post here or email me at blogdesignsbydani[at]gmail[dot]com.

      Can you copy the code you entered into the gadget? Can I see your blog?

      Delete
    2. One more thing, if you have trouble typing code into one of these comments, just email it to me.

      Delete
  14. Hi Dani, I seem to be having problems with my blog background. This is the second tutorial i have used and nothing shows up on my blog? Any ideas?

    ReplyDelete
    Replies
    1. Sarah,
      Can you tell me what you have tried so far? Can I see your blog? You can post here or email me at blogdesignsbydani[at]gmail[dot]com.

      Delete
  15. hi dani, i have trouble in uploading my own background to photobucket, it always said "Upload failed due to IOException" any suggestions?

    ReplyDelete
    Replies
    1. I'm sorry I don't know. You could find the help section on Photobucket's website and ask them.

      Delete
  16. hi Dani ive been practicing and im having a problem with my background. i was able to upload it to my blog ( i will adjust the sizes again for now im practicing) but i cant remove another background that is from blogger. im not sure how to explain but heres my link i would love it if you can help ^_^

    increadiblewizbangs.blogspot.com

    ReplyDelete
    Replies
    1. Have you gone to the Template Designer in Blogger to find the background? If you click "Template" and then "Customize" you will be in the Template Designer. From there go through all the categories until you find the background shown on your blog and then remove it.

      Delete
  17. Dani,
    I don't have photoshop element, but I'm using pixlr. Do you have step by step directions for this? I can't get past the first step using pixlr. :(

    ReplyDelete
  18. Hi Dani,
    I'm using pixlr to create a background and I'm having trouble! Do you have step by step directions using pixlr?

    -Pulling out my hair!

    ReplyDelete
    Replies
    1. Hi Jamie,

      When you open pixlr, choose "Open Pixlr Editor (Advanced)".
      Then select "Create New Image" and enter the following width and height: 1950px (width) and 1100px (height).

      You'll have to manually enter those measurements.

      Was that where you are stuck? If I have time I will post a tutorial for this but it may be a while. If you have specific questions I can answer those. Good luck!

      Delete
  19. Hi Dani,

    I'm facing a problem with the new photobucket uploader..there's no MORE OPTION anymore at bulk uploader..

    please assist me..my background very small when I uploaded in blogspot. TQ

    ReplyDelete
    Replies
    1. Oh no! I was hoping that day would never come. Read this tutorial HERE and follow the instructions for hosting images in Blogger. I don't know if it will work but I would love for someone to try it and let me know.

      If that doesn't work, I will look at Photobucket and try to figure it out.

      Delete
  20. thanks for the information . visit my blog , maybe ?
    --> www.nalsurnafri.blogspot.com :)

    ReplyDelete
  21. I see that these tutorials are a couple of years old, and so you may not notice I asked this, but I have a question, that might be rather dumb. But, I was wondering is there a way I can use this in Dreamweaver to create my own page? Rather than following a blog template?

    ReplyDelete
  22. Really excellent article. One suggestion or caution with Godaddy though…Godaddy has a product called WordPress Hosting. I signed up for it, and all was fine until I installed a plugin which had a special requirement that needed to be set up by the webhost. (something in the server side settings). I called Godaddy and they advised they can’t make those changes. Only on their individual hosting plans would that have been possible. This is a rare event, but worth keeping in mind. When you go for your own hosting you have more flexibility.

    Regards
    Feedegg
    Howmate

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.