What does a Garden Gnome do when she is not gardening, in the kitchen or doing genealogy? Well the answer might just surprise you so read the entries to find out more. This blog focuses on everything we do to make our house a home. There will be a strong emphasis on home energy efficiency and do-it-yourself (DIY) projects. At the same time there will also be crafts, knitting and crocheting projects along with any other little tips we do to create that down to earth, I want to be here home. Please enjoy your visit :)




Saturday, November 29, 2008

How to Make Your Own Scrolling Blog Background

Every blogger wants his or her blog to stand out from the crowd. This means stepping away from the generic blog templates that get you started. A couple of weeks ago I was surfing blogs and noticed a few scrolling type blog designs made by The Cutest Blog on the Block. The many designs were indeed cute and placing the backgrounds on the blog involved only the of a simple script. Adding the background in this method meant you would not lose any of your sidebar information which was a real plus. However, I saw two immediate problems for me. First I wanted to create and use my own designs and second by using one of their designs the script pointed to their Photobucket Album which meant if they closed that album the background would immediately disappear. So I wanted control of where the background was. With all this in mind I set about making new backgrounds for my blogs with the exception of my cooking blog that is using one of their designs temporarily [now my own © design].

I'm always looking for ways to use Photoshop® so as soon as I saw their backgrounds, I knew I could easily make my own. Making your own scrolling background and customized headers are easily done using Photoshop®, Photoshop Elements® or Paint Shop Pro®. This technique can also be used to create custom made backgrounds and elements for digital scrapbooking. I'm going to give you the basics of what I did so you can see how easy it is along with the script needed to install the background in Blogger. Their instructions said you set your template to Minima but I got my backgrounds to work using Rounders 2.

Background

Note: This background is © Garden Gnome and is for illustration purposes only. Please do not copy.

The first thing I did was to determine the necessary sizes by opening one of their backgrounds. After that I was on my own. Note that creating the background uses layers so when saving save as .psd file for later modification and as a .jpg for using as the background.

Create a new image 1450 x 1100 pixels. This will be your main background. Fill this layer with white. Create a new layer. Fill this layer with a pattern of your choice from the pattern selector. In this case I used a basket weave pattern. Create a new layer and fill this layer with the colour of your choice. I used a red that I liked using the colour picker. When you decide on the colour you want write the colour code down so you can co-ordinate other elements on your background, header and blog. Adjust the opacity on this layer to get the effect you want. Create a new layer and click on gradient overlay. Draw the gradient from top to bottom and adjust the opacity to get the effect you like. Leave the image open and create a second image 795 x 1100 pixels. This will be the panel where your header, posts and sidebar appear. Fill this layer with the colour or pattern of your choice. In this case I chose white and adjusted the opacity to the desired effect. Save this image as a .psd file for further modification. Merge the layers then use the move tool and drag the image onto the maid background. Centre the panel. Add a drop shadow to the centre panel adjusting as desired. Using the line tool create a line 20 pixels wide spanning the entire length of the centre panel. Fill with desired colour. Bevel and emboss as desired. Duplicate this layer. Use the move tool to move the duplicated layer to the other side of the panel. At this point you can now add any further embellishments you desire using additional layers. I chose not to add any but if you check out my personal blog you can see how I added a ribbon I made and use that as a guideline for placement. Other embellishments such as flowers, buttons and etc. can be found on a lot of scrapbooking websites or you can make your own using the shape tool.

Very important: Save your file as a .psd for Photoshop® and Photoshop Elements® or as a .psp for Paint Shop Pro®. This will preserve the layers so you can later modify any layer you choose to create a new background. Save the file again as a .jpg for uploading to a photo hosting website. If using Photobucket, upload the image at the 1 meg setting.

To install your background, upload it to a photo hosting site such as Photobucket. Copy the url location. Paste the location into the following script and save. Open the layout tab of your blog in Blogger. In the top header section, click on add a gadget. Click on html/javascript. Copy and paste the script into the box. Click save then preview to see your new, custom made background then click save.

Here's the code you need to install the background on Blogger:



Header

Now that you have made a custom background you can make a custom header. This is also very easy to do. Create a new image 700 x 300 pixels. You can leave this transparent if you want to use the background colour of your blog. If left transparent, the final header should be saved as a .gif and uploaded to a photo hosting site then placed on your blog using the header tool on your layout and the url. This will preserve the transparency on Blogger. In this case I used the colour of my blog background that came from the lightest pantone of the red. To get to the pantone I put the colour code of the red into the colour selector then clicked custom to bring up pantone. The border was created using stoke with the red I wanted. Then I duplicated the layer and used the marquee tool to outline the inner section and deleted that on one layer. This created the red frame. Then I inversed the selection to work on the frame and used the bevel and emboss style to create the raised effect. To get the vellum effect I created a new layer and used the marquee tool to create a smaller rectangle. I filled that with white. Then I used a fuzzball brush to go around the edges and added a drop shadow. I used the font brush script to write the title of my blog then beveled and embossed it and added a light drop shadow. Save the file as either a .psd or .psp as well as .jpg.

To install the header: Go to layouts, page elements for your blog and click on header. Click on add picture from your computer or you can choose from url if you uploaded to a photo hosting website. Click on your header file .jpg. In a couple of seconds you should see your header. Under placement click instead of title and description then click save. Hit preview to see how your new blog header looks. The blog header background will still be present around the image. There are three ways of dealing with this. The first is the easiest by just leaving as is. The second method is to go into layout then html and expand widgets. Change the background colour as desired. The third method is to delete the header background

I hope you found this method useful for creating your own uniquely designed backgrounds and headers for your blogs. If you use this method please leave a comment with your url so I can see what you came up with.


Garden Gnome
©2006-2008


42 comments:

WendyB said...

It seems the code for installing the background into Blogger is missing.....

olivetreegirl said...

Same as WendyB. Could you please add the code?

olivetreegirl said...

Wow, that was fast! Thanks a lot, great tud!

Garden Gnome said...

Sorry about that. The code was written in text in the article but Blogger didn't like that. I have re-inserted the code as a.jpg so you will have to type it out. Good luck and please post a link to the background you created.

Anonymous said...

I cannot get this to work at all. I am typing the code exactually as posted and inserting my url from photobucket. Any ideas as to what I am doing wrong??

Garden Gnome said...

Hi We Are Family,

First make sure you are only using the http direct link for your image. If you are and it still isn't working check for your gadget placement. It should be the first gadget under the header if you are using one or the first gadget if you aren't in the largest top elements section. If it is loading just not the proper size be sure you upload at the 1 meg setting on photobucket. If unsure what setting you used try setting to 1 meg under the image upload section on photobucket then upload again. If you still can't get it to work, send me a copy of your image url to my email sfg.oamc at yahoo dot com and I will send back the code. Hopefully that should work.

dancingqueen97 said...

I'm confused!!!??? is there any simpler way to do it??

Garden Gnome said...

Hi Dancingqueen, which step are you finding confusing - making the actual background or intalling the code?

The more you tinker with making your own backgrounds the easier it becomes. Just be sure to use the sizes mentioned in the method. If you are having problems with making the easiest method is to use a premade template as you have on your one blog. Installing the code is as simple as adding as an html/javascript gadget just under the header in layouts.

Niki Miller said...

Thank you for the tutorial. It was easy to make the background. I, too, am having problems installing it. I just can't get the code right. I will e-mail you to see if you can get it to work.

olivetreegirl said...

I finally did it. At first I created a background with a transparent part in the centre, but I didn’t like the result very much (it didn’t match well with my blog colours), so I just used an image I liked, followed your instructions and got myself a brand-new background! Thank you very much!

Garden Gnome said...

I like your design Olive Tree Girl. I'm glad you were able to get the background to work ;)

Donna said...

Hi ive just tried doing your tut for a blog background..i copied everything in the code as it should be but to no avail..As it is hard to see i may have mistyped something..Are you able to check it for me if i email you the code i did xx

Donna said...

Hi I'm also having a problem getting my background to show up, I've typed it exactly as you have it and followed the instructions but it just refuses to change for me. I'm doing it on a new blog until I get it right before putting it on my regular blog. Can I email you with what i have typed to see where i am going wrong. Thanks ever so much.

Garden Gnome said...

Try using the code without the br that blogger is putting in in the image. Just remove the br html. If you can't get it to work, email me the code you are using and the location of your image.

the Kargis Family said...

Thanks for the instructions. I did everything as you said and got it all to work except the top part of my background got cut off. I played with my image sizes on photoshop, but then it wasn't wide enough and repeated a little bit on each side. My blog is kargisfamily.blogspot.com

Garden Gnome said...

Hi Kargis family! Your blog background is looking really good. What likely caused the problem in sizing is when you go to upload to photobucket make sure the resolution is set to 1 meg or more. Your header is still off so you might want to play with that still. Try 400 wide pixels and let the height set itself to keep the perspective and see what you get.

Garden Gnome said...

Oh I see the main panel is off as well. Email me your url link for the background and I will see what I can do for you.

the Kargis Family said...

Thanks for helping all of us. I actually didn't even make a header, that was just the one that I had. I'm looking for your email address so I can send you the url for my background, but didn't see it anywhere.

Garden Gnome said...

Hi Kargis Family :) My email address is sfg.oamc at yahoo dot com.

Ila said...

Thank you so much for the tutorials!!...I've been enjoying surfing around your blogs...love the recipes!!...I'll be back!!

Anonymous said...

This is great info that I have been looking for. However, I am having problem merging my two layers once I created my first one (the background) I went to FILE>NEW> and then created the layer that would be for the post, info, ect...my problem is I cannot get these to merged together, as they are two different files, and an merge is not allowed...HELP, what am I doing wrong?

Sarah said...

I made my background pretty easily, but had trouble installing it. I followed the directions exactly, using all the correct sizes, but the background didn't fit. The posts and sidebars overlapped with the side. I played around with the measurements and had to use 2400 x 1100 pixels. Any idea why?
My blog is www.scrapcetera.com

Garden Gnome said...

Hi Raelynn, I'm not quite sure of the problem. File>new will give you the new image. Try duplicating that layer then do your work on that layer. Another thing that might be the problem is if merge layer is not highlighted see if flatten image is. If so flatten the image and that will solve your problem. Once flattened you will need to duplicate the layer or add new layers as you wish then either flatten or merge. I hope this solves your problem.

Garden Gnome said...

Hi Sarah, I checked out your blog and the background isn't quite right yet. Did you upload it to photobucket using the 1 megabyte setting? If not, try doing that first. If that doesn't work send me a link to your background at sfg.oamc at yahoo dot com I will see if I can fix it for you. HTH

KRiSTiN said...

i can't get it to work either and i uploaded as 1mb. the code is fuzzy. can you post it in a comment so we can copy/paste? thanks!!

Sarah said...

I finally got this to work! I was trying to paste the code into the html, not using a gadget. Worked like you said. Thanks for the help.
Sarah

spanky* said...

i'm having trouble. :o( i have the background all made, but i can't get it to post at all.
can you comment me back with your e-mail address? i think that i'm having trouble with the code itself.

helppp!

spanky* said...

i got it!!!


i think that the big thing that messed me up was the "text/css" added additional quotes so it looked like ""text/css"" - remove INNER quotes!

Dana said...

I had trouble using the URL code. So I used the DIRECT LINK and IT WORKED!!! Just copy the code Garden Gnome provided as is, but where it says "your url" copy and paste the DIRECT LINK instead. Good luck everyone!
Thanks so very much for this tutorial!

candyn said...

This is awesome! Thanks for the how to :)

A. said...

Hi!
Thank you so much for the instructions. It helped me so much.
If you want, please check my background -
www.cullens-family-lover.blogspot.com

see you :)

Askinnystateofmind.com said...

Thank you so much for this, I have been looking for an easy way to add a new background and you have made it very simple. Thank you.

Unknown said...

Hy Dear,
thank you so much for the instruction. It helped me al lot. Germany says hi loved Canada.

My blog http://handarbeitsfee.blogspot.com/

Catarina said...

Hello, I found your tip throught google. Thanks ;)

Watch my blog now, I made a post to your blog :)

ianaheart.blogspot.com

SweetPea&Co said...

Thank you so much for all this! It has helped a lot. My boyfriend made me a blog background but it keeps getting repeated or tiled instead of just being one image. No matter how big I make it, and I did set it to 1 meg, it keeps getting repeated. I would love some help if I email you! My blog is sweetpeaco.blogspot.com

Garden Gnome said...

Hi everydaymae and thanks for visiting. I checked out your blog and the background seems to be working fine now. It is quite pretty. You will likely want to remove the border on the original title box or you could leave it and adjust your pink panel so it is wider which you will need to do so your posts fit properly. Then make a graphic for your title with the same pink background to use as your title so it fits inside the border. HTH

RosPenGo said...

Discovered this looking for gnome pictures, and was pleasantly surprised. :)
However... I can't quite get it to work. I've tried both the URL code and the direct link code, but I'm thinking maybe I'm maybe having a problem with the actual code to upload it. All I get is the same black background I had before.

Garden Gnome said...

Hi RosPenGo and thanks for visiting. The code has to be typed exactly as is with the url for the location of your image. I'm away right now so can't get back to you quickly but if you send your image location to me at sfg.oamc dot yahoo.com then I will see how I can help you. HTH

Trai said...

I have been trying and trying to get my background to work but it never seems to come up as the right size. I followed your directions but still no luck. What am I doing wrong?

http://madgypsystudio.blogspot.com/

Garden Gnome said...

H Mad Gypsy, thanks for visiting. I checked your blog and your background appears to be working properly.

Tana Cox said...

Awesome, I couldn't get my background not to scroll. Thank you for helping me finish my code.

Garden Gnome said...

You are quite welcome Tana :)