As ya’ll may have noticed from my constantly changing blog themes, I’m a background making maniac. Like to hear how I do it?
The Goodies!
I don’t want to do all the work, I just wanna download the background!!
{ get it here }
I took one look at the tutorial and there’s no way I’m gonna read all that! Just gimme the template, I’ll figure it out myself!
{ download the full PSD file with all the layers }
Now if you’re brave enough…
Stuff to know – This tutorial was written using Photoshop CS3 on Mac OSX. Things might be slightly different if you’re using Windows or a different version of Photoshop, but hopefully you’ll still be able to follow along. ;) Also, any time I refer to shortcuts, I will probably say something like CTRL-C (copy) or CTRL-V (paste). On Mac, use CMD (or the apple key) instead of CTRL. Even though I use a Mac now, I still say CTRL because I am just so used to Windows and I just recently switched. :)
In this tutorial, I use rulers and guides. I just found out that Photoshop Elements does not support rulers and guides. If you’d still like to try making a background, but don’t have a full copy of Photoshop, I would suggest using The Gimp. The Gimp is a free download that is very similar to photoshop. You can use layers, guides and rulers in the Gimp. Setting the guide is a little different, you don’t go to View > New Guide. All you have to do is open up your document, and on the side and top you will see the rulers. Click on the ruler and start dragging over to your document. This will make a guide. You’ll have to manually drag it over until it gets to 400 or 1200 or where ever you want it to go, but at least it works and you’ll have the guides!! :) I love the Gimp, it’s a great, free alternative to Photoshop. And I love free. :D
But enough about that.
This tutorial uses my Spring Mini Kit Freebie.
Let’s start making our background!
{ click on any image to see a larger version }
Go to File > New to create a new document and set your width at 1600 pixels and your height at 1100 pixels. Make sure the Background Contents is set to Transparent.
Now before we get started, you probably want to check and make sure your rulers are set to pixels instead of inches. Go to Preferences (on Windows it may be Options?) then Units and Rulers and make sure Rulers is set to pixels.
So, now we have a nice big blank canvas. The first thing we’re going to do is set up some guides for the part that will be behind the actual blog. I like to make this space 800 pixels wide, it’s a good size and works well with most blog themes, especially the Blogger Minima theme.
Go to View > New Guide and enter a vertical guide at 400 px.
Then do that again and set a vertical guide at 1200 px.
This is what it looks like so far…
Now using the Rectangular Marquee Tool, select the entire area inside the new guides you just made.
Right click in the middle of the selection and click on Fill from the menu that pops up.
For the Contents, use White.
Now, if you prefer, you could fill that area with a patterned paper or another color, but I like white. It’s nice and easy on the eyes when reading blogs. :D
But we do need a little decoration for the sides. So let’s open up the yellow damask paper from the kevinandamanda Spring Mini kit.
First thing we need to do is resize it for the web.
Go to Image > Image Size…
…and change the width and height to 1600 pixels. Hit CTRL-A to select the entire yellow damask paper and CTRL-C to copy it. Go over to the blank blog background document and hit CTRL-V to paste the yellow paper.
It will cover up the white background you just made, but if you look over in your Layers palette you should see the yellow layer and the white background layer. Just click and drag the yellow layer to go under the white layer. (if you don’t see the Layers Palette, look up in the menu bar where it says Windows and make sure Layers is checked)
That was fun, let’s do more! :)
Open up the green dots paper from the same kit. This time we’re going to resize it to 1100 px. CTRL-A to select the green paper, CTRL-C to copy, then come over to the blog background. If you look in the layers palette and make sure the yellow layer is selected, when you paste the green paper, it will paste it right on top of the yellow paper, right where we want it to be.
As it is right now, it’s a little too wide. We need to cut some off the sides. You could just take the selection tool and “eyeball it”, that is, select what you wanted to cut off and the hit Delete to delete it. But I’m kind of a party pooper and like things to be exact. And even.
So let’s set up some guides. I love using guides. Go again to View > New Guide and set a guide at 325 and then another one at 1275. For you math majors out there, that’s 75 pixels away from where we did our first guides. 72 pixels looks roughly about 1″ on most screens. In my experience. That was just for free.
So now we have our guides, and we can select the green paper that’s on the outside of the guides and delete it. I love how the selection tool snaps to the guides. If that ever gets annoying, you can easily turn it off and on by going to View and either checking or unchecking where it says Snap.
We can’t stop now, we’re almost done. Let’s put some stripey paper horizontally behind the green paper. And because I like to be all orderly, and exact and type-A, we’ll set up our guides first.
This time, when you’re setting up your guides, make sure Horizontal is checked! Go to View > New Guide and set a horizontal guide at 350 and 750.
So now we have a horizontal bar right in the middle of our blog background that’s 400 pixels tall. Let’s fill it with the stripey damask paper from the Spring kit. Open it up and resize it to 800 pixels wide (and high too, for that matter). Then you know the drill. Select all (CTRL-A) and copy (CTRL-C).
Over on our blog background, make sure the top (white background) layer is selected in your layers palette, then CTRL-V to paste the striped paper. It’ll paste it on top of the white paper (unlike what’s pictured.. Sorry, I must’ve been day dreaming at this point cause the layer order of the papers is a little funky for the next couple of pics, but try and stay with me here). Drag it over to the left, hit CTRL-J to duplicate it, and drag the duplicate over to the right.
Now if you look over in your layers palette, you should see these two layers. I like to go ahead and merge them right now. Makes it easier.
Now that they’re merged, drag that layer under the white background, but over the green paper.
Make sure the striped paper layer is still highlighted, the use the selection tool and select any paper that is outside of the guides. And delete it.
Yay, I finally got my act together and the layers in the right order.
Cool! That’s all for the paper, now for the embellishments…. Let’s open up the light brown stitches from my kit. Yes, were going to resize these too. I use stitches a lot on blog backgrounds, and I always like to set the longest side (in this case, the height) to 1200. Technically, we only need it to be 1100, cause that’s how tall our background is, but I like to give myself a little extra room to work with. And it makes it look like it’s stitched off the page. So that’s kinda cool. :)
So resize, select all, copy and paste the stitches onto our blog background. You’re getting to be a pro at this. Can you recite all the shortcuts for me right now? Oh, and make sure the white paper layer is highlighted when you paste, or else it’ll paste it behind it and then you won’t be able to see it. But if you do that, you could just press CTRL-T and that would select it for you so you could move it. Just in case.
Drag the stitches over to the left side of the green paper. It should snap into place. Arrange the layers in the layers palette so the stitches layer is just above the green paper layer. And below everything else. Hit CTRL-J to duplicate the stitches and drag the duplicate over to the right. Now just for kicks, I always like to hit CTRL-T to select the duplicated stitches, then right click on it and go to Flip Vertical. This just flips the stitches so they don’t look exactly like the ones on the left do. Yeah, I’m a maniac like that.
Look how awesome our background is looking!! Now, I want to add some stitched buttons to the right side of the background. But since I was a loser and only gave ya’ll plain buttons in my kit, I’ll just have to show you how to make your own. You already have all the tools you need right there in the kit.
First, let’s open up the light brown button and resize it a bit… 200 pixels for the width/height.
Now, let’s open up the brown stitches, and grab one… Select a single stitch, and copy and paste it over on the button.
Hit CTRL-T to put a transform box around the stitch. Rotate and resize the stitch until it looks right to you.
After you resize it, click the check mark up in the top tool bar to “set” it. You may need to move it around a bit to get it just right, and you might need to turn off Snap for this. Just go to View > Snap to turn it on and off.
Now. CTRL-A to select the button, but this time, instead of CTRL-C to copy it, we need to go to Edit and click on Copy Merged. This will ensure that we copy both the button and the stitch. But if you don’t believe me, you can do CTRL-C and try to paste it and see what happens. I always forget and do that anyway. Every. Single. Time. But that’s another story for another post!
So copy merged, then paste it onto the blog background.
Even though we resized the button earlier, it’s still too big! hit CTRL-T to bring up the transform box, and look up in the top toolbar. Set the W and H (that’s width and height for the newbies) to 50%. Click the checkmark to the right and that should be juuuust right. Now we need 2 more buttons, so just hit CTRL-J twice and it’ll make 2 more buttons magically appear. Drag and arrange them over on the right side of the blog.
After you get them where you want, you can hit CTRL-T to bring up the transform box and you can rotate the buttons in different directions. Just hold the mouse anywhere outside the box and you should see a funky looking rounded-corner shaped pointer appear. That’s your cue to click and rotate as desired.
Our background is looking awesome! There’s just one more thing I want to do to give it that 3 dimensional look. But first, if those guides are getting in your way, just hit CTRL-; (yes, that’s a semicolon) to hide them. If you want to see the again, just hit CTRL-; again.
So. 3D. In the layers palette, double-click on white background layer. That will bring up the Layer Style box. On the left, click where it says Drop Shadow. Here’s the settings I normally use, but you can play around with them to see what looks best:
Opacity: 25%
Angle: 120
Distance: 0 px
Spread: 0 px
Size: 15 px
If you have a favorite shadow setting you like best, please feel free to share it with me. I’m constantly stressing over realistic drop shadows.
Now, the cool thing is that once you’ve set that drop shadow, you can just right click on that layer in the layers palette and click Copy Layer Style.
Then you can paste it on all the other layers! I pasted it everything except the stitches and the yellow paper.
C’est parfait!!! Now, I like to save one copy with all the layers intact as a PSD file. Just as a template in case I want to do something similar with different papers sometime.
For the web version, I go to File > Save for web and devices and save it as a JPG, quality High.
Now what good is a blog background if you don’t know how to install it? Let’s see if we can do something about that.
First you’ll need to upload your background somewhere, like Photobucket. Even if you don’t make your own and just use mine, please save it and upload it somewhere first and don’t link directly to my background. It’ll use up my bandwidth and make my page slow for everyone and then I may have to spend time figuring out how to block hotlinking when I could be making more totally awesome papers and backgrounds. But enough about that.
Oh one quick thing about Photobucket. When you’re uploading the background, make sure it says something like this:
Cause if it says something like this, it’ll shrink it when it uploads and then it’ll be too small to use.
Install a Scrapbook Blog Background on Blogger:
Go to your Dashboard > Layout > Edit HTML.
Look in alllll that code for something that looks like this (don’t worry, it should be close to the top):
body {
background:$bgcolor;
And change it to something that looks like this:
body {
background: url(http://www.photobucket.com/background.jpg) no-repeat center fixed #FFFFFF;
Where http://www.photobucket.com/background.jpg is the direct link to the image.
check it out… here’s what the background looks like on a Blogger blog using the Minima theme.
Install a Scrapbook Blog Background on WordPress:
Ok, now this is going to be hard, because every single WordPress theme is different. And on some of them it may not even work at all. But basically, you’re going to do the same thing. In your WordPress, Dashboard, find your theme editor. Look at the Stylesheet.css file. Look in all that code. Near the top, there should be something like this:
body {
background: some stuff here ;
“background” may not be right underneath where it says body, but hopefully it’ll be close. And it may not even say background at all. If it doesn’t, you can just add it. It’ll be okay. Anyway, whatever it has for background, just delete it. There may even be lots of different things that say background like…
background-color
background-attachment
background-repeat
whatever. Delete it all.
Replace it with this:
background: url(http://www.photobucket.com/background.jpg) no-repeat center fixed #FFFFFF;
Where http://www.photobucket.com/background.jpg is the direct link to the image.
Whew! Did anyone actually make it all the way through? :D
If you have any questions, I’ll try to answer them in the comments!
Look for my replies with the red background to see if your question has been answered. :)
If you make a background using this tutorial I wanna see it!!! :D Leave me a link to your blog in the comments! :)
GOOD LUCK!!! :)
More from Amanda:
Share:
Filed Under: Blog Design • Tutorials
307 Comments
Thank you for doing this tutorial. I love how I can now make my own backgrounds.
Hey Amanda,
Thanks so much for your rockin tuts, they are so much fun! Your such a smarty…and you pretty everything up I just love lurking around your site! I finally got the nerve up to start my own blog now it has become an obsession. I am a photographer, scrapbooker, and now blogger so I just love your site it gives me so much inspiration! I thought I would list my link so you could check it out if you want to. I make digi scrapped recipe cards and started a link up for that too! Thanks again for all your fab stuff.
Thanks again!! Finally…someone who actually gives instructions on how to do all of this cool stuff!
Thanks so much for the tutorial! I could never get things quite right before. :)
I’ve been messing around with this for a couple of days and I’m having trouble. Specifically, because I’m using GIMP instead of Photoshop, I think. :P I’m having difficulty translating your step by step instructions because the programs aren’t the same. Your post #43 does indicate on how to make the guides, but other than that, I’m fairly lost. I think I’ve figured out how to create the first layer, with the white center, but when it comes to adding all of the additional layers, nothing looks right. Is there any help for me?? :) Thanks!!
I used your tutorial to make my blog gorgeous!! Great tutorial. Let me know what you think. I dedicated a post to your site I was so happy. BTW I was able to use gridlines and rulers in Adobe Photoshop Elements 3 (old version).
Thank you so much cant wait to get started!
I just found your site and all I can say is THANK YOU! What a great site. I tried the tutorial and I am having a problem. I used PS CS3 and followed step by step. I am testing it on my test blog http://luv2kreatetestblog.blogspot.com/ and the image is too big. What am I doing wrong?
I figured out the problem…I uploaded your image and then compared the two. It is now working. Thanks for a great tutorial!
I love the little ribbons above some of your buttons, Subscribe, Search, etc. I would love to add a Search button to my blog like yours. Is there a way I can do a search on all your comments for a faq?
I have skimmed my way up to question 300. Later tonight I will try skimming up until the end. Then I am going to click on and bookmark every link I see on your site. Work was never this much fun!
I literally toiled over this tutorial for an hour… I kept uploading my “saved file” and getting a tan background. At last it worked when I specifically went back and saved my file for web and devices. I guess that’s the key. Thanks so much!!! Yours is like the third and only successful method I’ve tried!
Thanks so much. I love your blog – a fellow pea mentioned it. I use a macbook and Photoshop Elements. I knew that I could not use guides (’cause you told me I could not) so I just use the marquee tool to make a rectangle the size you made your guides. It works perfect.
Hi amazing lady! I’ve been trying for hours to work with Gimp, and cannot get past creating the initial white area in the middle, tailored to my blog specs. Gimp is funky to me, the controls are so primitive and not easy to move from one thing to another, much less have things move with any kind of smoothness (example: stretching and dragging). I’m using Mac OSX. To mimic post #105 the Photoshop instructions are not translating to Gimp, and there are so many foreign options I’m lost even though I have a pretty decent background in designing websites. Can you help us frustrated Gimp users out? The time you take to spell these things out is IMMENSELY appreciated! Thanks!
Thank you so much for your easy to understand tutorial. The ONLY one I could find that was so straight forward and easy. I have PSE4 and used my Grants allignment tools to get the centre bits right ;)
The world is truley blessed ofr peopl like you!
You can check my blog out here if you want: http://scrapastrophe.blogspot.com/ not very interesting but at least it is pretty now!
Thank you this is so awesome!
Janine
Dear Amanda,
I really enjoyed your tutorials and followed step-by-step…and in addition I also made a header:))
I have a small problem…maybe you could help me. I’d like to make my background whole screen, but it’s not wide enough, I still can see those stripes on the two sides…What can I do??? The original templat is Minima ochre. (You can check my blog here: http://odianya.blogspot.com)
Thanks for your answer:))
odianya
Amanda,
You are AWESOME! (And yes, I was shouting that!)
I put a new font on my blog and LOVE it. Now I am going to work this weekend to make a new background of my very own. I have created 3 different headers and am going to let my family vote on which one they want to use! (It is a family blog after all!) I have a 3 column blog and am working on revamping it myself in between working full time, 3 kids, my sister getting married on Aug 28, school starting soon, helping a friend get her crafting business up and running, and trying to spend time with Hubs!
Thanks for making it easier to get these things done without spending hours and hours searching the internet!
Lori
Thanks so much for sharing with us!
Thanks for the tutorial. It was amazingly easy to follow. You did and awesome job of breaking it down into clear and easy to follow steps. I kind of rushed through the paper and element choices, so the page is not what it will be, but I wanted to focus on the process. I will update it and make it better, but now I understand the procedure. THANK YOU, THANK YOU, THANK YOU, THANK YOU,
Thanks so much for the info Amanda! I changed my blog background and I love it! But…. my words are all messed up now! What did I do wrong? Thanks again!
I think I actually love you!
Thanks so much!
:)
Cool thanks for the guide, but you can also you scrapblog.com!=)
Melodi!=)
Hey Guys
Thanks for the tutorial, i got a bit lost, but trying to juggle learning all this and with 2 kids and work…it got the better of me and i cheated and have now got one of your fabulous designs on my blog…from Allie Brown
I will keep trying to design my own..also will put a credit to you on my blog…please check it out and visit often 7 enter the giveaways…Let me know if you win :)
I love your blog,
Thanks so much…xxxxx
Thank YOU SO much! Your tutorial worked like a charm and i couldn’t resist using your stitches. i absolutely love stitches! I’ve been having so much trouble trying to get my backgrounds to work properly and your tutorial was absolutely right on! Thank you again!
Hi Amanda,
Thank you so much for the great tutorial! I just used it on my blog with a freebie I will be releasing soon. Please take a look and let me know what you think.
Thanks so much for being so thorough with the explanations, it was actually pretty easy thanks to you!
Have a great week-end,
Marie-France
Thanks for the template and directions on how to add it to my blog! The guides transferred into my PSE! :) Lovin’ my blog’s new look. Thanks! :)
Hi Amanda!
I’m having a heck of a time with the scale of things. I’ve tried 1582 x 1200 at various resolutions, 100 and 200. I’ve tried sizing the template to create the page at 14.4 by 11.
I see now you can’t have defined graphic edges (like distressed digital scrapbooking paper at the left and right hand sides), but I loose that same type of graphic at the top because the vertical dimension is 1200 or 11 inches since the finished graphic centers. Why create it at 1200 or 11 inches long since it looks like less than half of the designed page shows up on the blog vertically?
I upgraded to Photobucket Pro, thinking that would help, but it didn’t.
Can you offer some advice?
Thanks!
Wow! may i marry your talent?
Such a Godsent.
I need this, I just broke up and need something else and found this,
now I can really occupy myself.
Nice Blogs, Here I come!
This was super helpful. Thank you for posting it!
Awesome!! Thank you so much for giving away the psd file! I always wanted to create my ow, but I had always problems.
The psd file perfect, Thanks a lot!!
thank you, thank you, thank you!! I have been trying to figure out how to do this on my own for it seems like forever.. and after using your template in PSE, I no longer have the urge to toss my computer out the window in frustration! Thank you again for making this SO much simpler for me, and everyone else :)
Thanks so much for your tut on creating and posting backgrounds. It took me a while because i’m such a newbie at this,but i have learnt something that i wish to share for blogspot users.
You can post your new background as a gadget in html using the following code.
body{background: url(http://i864.photobucketbackgroundtest1.jpg) no-repeat center fixed #EADCB9;
of course you place your own URL of the image in between the brackets.
I’ve done it both ways and it works great.
Now I do have one question. When I work on creating a header let’s say 900×400. Do I use transparency or white background?
Again thanks ever so much, for all your info.
body{background: url(http://i864.photobucket.com backgroundtest1.jpg) no-repeat center fixed #EADCB9;
Sorry I posted the wrong code. the html is as above to load in blogspot as html gadget.
sorry this is weird, but as soon as i submit comment the htlm code disappears.
One more time add
then Amanda’s code here
Amanda, if it doesn’t take this time, you can email me and i’ll send you the code that you can post on your blog to share with others.
Help!
Hi Mrs Amanda,
I love this tutorial and I am so happy you made it so simple to follow. My friend referred me to you and I think you have a fabulous blog. However, I am stuck. I have made my background and sent it off to photobucket. After that I get the direct link just as you say (uploaded in 1 megabyte) and posted (copied) it right where you say. My problem is it comes up, but as a literal 5×7 size behind my blogs (mini) It is not filing the whole screen. Any suggestions? Thanks a bunch!
Dear Amanda, Thanks for all the tips. I made a background and uploaded it to photobucket and have tried and tried to enter it into my template which is minima. I just can’t seem to make it work. Any suggestions???
Amanda,
Your tutorials are so great! I changed my blog title and date font to one of your wonderful fonts and love it! I’m trying to use The Gimp to do my background, and I can’t figure out how to move the layers. I set the guide and filled the middle with white, but when I put my background, it won’t go to the back. I see the layers in the layer box, but I can’t move them. Any suggestions? Thanks!
Bailey
Amanda, Will you please look at my blog? I cannot figure out why my background I created is only in the middle of the screen! I followed your instructions exactly (I think). I guess I obviously missed something. Would you mind telling me what I did wrong? I am out of ideas! Thanks!
Kellie
brianandkellieanderson.blogspot.com
this tutorial was fabulous!!!!!!!! I have elements and was able to take what you said and figure out how to use it on elements. It all worked out great! For the mot part it was the same.
I made the same background but with different papers from your kit. It’s on my blog. it turned out great!!
hi!
thanks you for the tutorials.
I hv PS CS4′s trial version on my machine for other project then decided to give it a shot at doing my own background since it will expire in a week or so.
your instructions are good, eventho I’m quite new with PS, it’s a relief to able to figure it out – my blog is a 3 column minima.
here’s the link http://bluedamask.blogspot.com/
as you can see I keep it very simple. I did use yr kit in my test version but decided to keep only the stitches (TQ!)in the current design.
now i’m trying to figure out why it backgrond doesn’t move when we scroll down..
Absolutely awesome tutorial, I tried advice from another site before I found your blog and was unsucessful. Thank you so much.
Many many thanks for this wonderful tutorial !
I juste finished my blog’s design with it … The most difficult was to chose which kit to use ! :D
Thanks for this great post ! I’ll put your button on my page ;)
Amanda, I have just finished creating my first background with your tutorial and I am so excited! You instructions were easy to follow even though I was just using Elements 6 and I am thrilled with my result! I think I have yet ANOTHER creative addiction, as if I needed another one! Thanks so much!
First of all, thank you very much for the tutorial! Now I have a really nice, personalized blog just as I wanted.
However I did have a little bit of trouble uploading it, but when I realized that I just had to remove everything before a:link and replace that with the new code it worked out just fine :D
I can’t get this! for some reason my background in HUGE! i have tried a million different things to see why the elements are so big. can you help?
Used your fabulous tutorial to make my blog background my problem is while I can make it look great on my mac screen by command – everyone else that looks at it says it’s blown off the screen as in it’s too large any suggestions?
Amanda,
I used your awesome tutorial and made a blog background and header. Thanks for the great instructions, I love it! My problem is that though I can see it fine using my mac and the (Command-) to zoom out, everyone else who looks at my blog says its too big and blown off the page. Any suggestions?
P.S. Did you know that Photoshop Elements 8 does allow Guides?.. it works exactly the same as you show in your Gimp instructions. It was not an option in PSE 6.
i tried this one out but i can’t find where the “reduce” in photobucket is.
I don’t know if I ever showed you my blog backgrounds! I have been a background making machine! haha! My most recent background is Christmas themed. But I will probably have a different one in a week or 2. I also just did one for a friend of mine. So, go check them out!
http://wideawakewilliams.blogspot.com
http://jereandcara.blogspot.com
THANKYOU SSSSSSSSSSSSSOOOOOOOOOOO SSSSSSSSSSSSSSOOOOOOOOOOO MUCH!!!!!!!!!!!! I’m a really really big fan!!! I searched so much on how to make a background but didn’t get anything! And the things I came across were not clear and as I’m a new photoshop user I didn’t get much of it. But with your tutorial was so easy! Thanks for writing it step by step! You’re the best!!! Thanks for all the effort you’ve put into this!! :)
Love HM <3
Hi!
Thank you for this tutorial. I made background and I am going to make my blog 3 column, but my background is too tight. I made 1600 px x 1100 px and rulers at 300 and 1300, but It looks bad. ;/
Another problem is that I can see background under my image. Please help :)
my site – http://cullens-family-lover.blogspot.com
xxx
I cannot get my background to upload bigger than 1203px × 913px even with the 1 megabyte file size selected in photobucket. Its saved out of photoshop at nearly 2000px wide. ideas??
Thank you!
Dear Amanda, thanks to your tutorial. I managed to dress up my blog! Thank you, thank you again:))) (and sorry for my poor English)
This tutorial really helped me. I love your recipes as well! Thank you!
Thank you so much for this tutorial. I have been trying to figure this out for some time.
Question: How do I get my background to cover the whole screen as yours does? Why do I have these large white borders on the outside edges?
Thank you so much because for so long I have wondered how to do this even though you have provided the template thanks for the explanation on how to do it also
Amanda, thanks for the private email and suggestion!
Cherie, Amanda suggested that I make sure I save my background image using the “Save for web” option (I use Photoshop CS3). And that did the trick! Maybe it will do it for you too!
Hi Amanda!
I just implemented this tutorial, along with the custom text for titles and add a signature tutorials to my blog (www.thistexaslife.com). I also used the elements from your Spring and Fall digital scrapbook kits, I shifted the colors a little in Photoshop, hope that’s ok! I think it turned out super great, especially for my first time trying all this. Your tutorials were very detailed and easy to understand. Thanks a bunch for all this!
Bahhah, helps if I can spell my name right!
Meredith not Meredoith!
I used your tutorial to create a background …planning to put it on my Ma -in-lawz blog :)..take care and do the wonderful work u are doing
http://www.shamalakrishnan.blogspot.com
Susanne, thanks for the tip, but it didn’t work. Anyone else have a suggestion?
I tried it out and I am having a problem. I don’t know how to make my entries stay in a fixed width. Can you help? My web address is http://blog.lifeandlovestudio.com/.
Okay, I got my blog pretty well under control now, phew! I just need to anchor the background picture so it doesn’t slide with the sizing of your browser window.
I’ve tried your tutorial a few times. I’m using paint.net it works great in making a layout but I upload to photobucket and click the “Reduce to 1 megabyte filesize” and when I put it in my code in blogger it shrinks it REALLY small. I’m not sure what to do. can you help? I’ve even tried to do the “reduce to 2megabyte filesize” and it does the exact same thing. HELP!?!?!
I figured everything out. Thank you so much for this tutorial. Your designs are beautiful!!
I think i am in love. This tutorial was so great…it doubled as a “How to use fun stuff GIMP”…I have only used it for photo editing before.
Thank you so much!
Your tutorial was clear and very pretty too! I had a go, using a Mac and learned lots of good tips about Photoshop. Then I tried writing CSS to upload a background layout and banner on Typepad (btw if you don’t have the # key all you do is press ‘alt 3′) – with mixed results, but very encouraging. Thank you for explaining this all and giving me the confidence to ‘have a go’….very good teacher! Your site will be the first on my blogroll….coming soon
Done! Take a look when you get a chance!!! I’ll probably change it 14 times a day… LOL!
http://www.whimsywayparty.blogspot.com
Thanks! This is the best tutorial I have seen! I made mine!!! http://www.throughpinkcoloredglasses.com Hope you like it!
I made one using the kit from your tute…can’t wait until I find time to make one all me :) And then it’ll be on to figure how to change the titles & such into fun fonts!
btw – it’s up at http://tiltsgiveawayfinds.blogspot.com/
Wow.., this is great!
I’ve tried to make blog backgrounds, but it never worked! Then I found this tutorial and it’s.. SUPER! :P
But now I want to thank you so much.. :)
I did it! I used my own papers and embellishments and your instructions. Thanks so much for the instructions. I use Photoshop Elements. It doesn’t have guides but it does have grids. Not exactly the same but if you have snap to grid selected you can use the marquee tool and it will automatically snap to the nearest grid line.
Thanks again! The instructions were very easy to follow.
wow thank you so much for this incredible tutorial, you are so generous with your skills and knowledge! i have always wanted to create my own background but i don’t have the knowledge- i’m very sure that you will help me very much!
this website is so gorgeous :)
I just used this tutorial to update the design of my blog at http://morningcupwithmeg.blogspot.com! I’ve searched high and low for a tutorial like this, and for a background code that actually works! Thank you so much!!
Hi Amanda! First of all, let me say THANK YOU for your tutorials. I am VERY new to creating blogs and am trying to make a custom blog background. I followed the tutorial and everything looks great in photoshop. I saved the file as a jped, and I uploaded the photo to photobucket.com. I tried changing the html portion, and my blog background just turns all white. The only step I didn’t follow in your tutorial was the 1 megabyte file size because it never asked me for that option when I uploaded the image. Do you know what I’m doing wrong? I am so close!! :)
Thanks again!!!
Thank you so much for this awesome tutorial!
I tried uploading my jpg to photobucket but there isn’t anywhere to check that it’s loading at the 1 mg size. It just uploads and when i tried the link for my blog it didn’t work… any suggestions?
Thank you so much! I just made my first background using your instructions and paper pack. You can check it out here: http://i954.photobucket.com/albums/ae22/katieolsonprice/Blog%20Backgrounds/spring-blog-bg.jpg
I’m going to check out your fonts next..
Hey Amanda, Thanks SO much for this awesome info!! I’ve always loved your site/fonts! I can’t seem to understand what I’m doing wrong, I’ve checked my screen resolution & also can’t find on photobucket where to size the background when it is saving it (it doesn’t let me resize w/the option you mention) — so, I am not getting the background to be wide enough either. can you help? http://www.natashaprymak.blogspot.com
thanks!
Hey Girly!
First of all…THANKS for taking time to post such a GREAT tutorial! I think that is SOOO kind of you to help others out like that!
I do have a question for you….and I am hoping you will magically see this post and respond soon…because I am trying to finish up my layout today. LOL….and I am SOOO sorry if someone else has already asked this….I scrolled through the first 40 or so….but there were SO manu comments….and I hadn’t seen my question yet.
So – I followed all of your steps…and my question is about photobucket. When I upload my layout…it just does it, and doesn’t ask about the file size or reducing it or anything like that. I am assuming it’s being shrunk because it it too small when I put it on my blog. Any suggestions….or do you know what I could be doing wrong? Thanks SO much! Tara
You are FAST!! So…I figured it out! (I also just noticed that the two gals before me asked the SAME thing…sorry!) So – if future readers ask you that…tell them that they need to make sure to OPEN/CREATE a new album or make sure they are in an album….and then I needed to click on multiple uploads….and it was on the bottom of that. Was that confusing?? Hopefully that helps. Thanks again! You rock! Luvs, Tara
I have tried to upload my background to photobucket several times and I have the resize to 1 MB selected, however my photo keeps getting shrunk. Any suggestions?
Just figured out my problem. To those using photoshop, make sure you save for the web, not just save as a jpg. THANKS A MILLION Amanda for this AMAZING tutorial!! I love seeing the new things you have.
LOVE this tutorial! I have been wanting to do something like this for our family blog for a very long time. I have followed the steps but seem to missing something! The whole background is pushed to the right. Any ideas of what I might have missed? I would love a little knowledge and so would my husband…I can’t stop talking about it;)Thanks!
Hi,
I feel badly asking you this, but you seem to be okay answering questions about this post so I’ll give it a shot.
Before I made the background per your tutorial. I went in the html of my blog and increased the post column by 200 pixels – I have a two column blog so I THINK that this means I have about 860 pixels now to work with. So I changed the size of my white space on my background..from 900 then to 1000 just to make sure., but my background is still showing underneath my posts. My banner is only 850 pixels wide so I just don’t get why if my white space is 1000, it would show up narrower than my banner. The website is http://www.team-rockstar.blogspot.com. (It’s a door to door sales team, hence the non-cuteness).
Thanks so much for any help you can provide!
courtney
Followed your tutorial and was getting frustrated…thankfully some of the answers in your comments helped, hooray! Still not covering the entire page? and sometimes takes a while to load the background. Not sure how to fix those problems. I am super excited though and feel like I made a great start…
Excellent tut! thank you.
Rada
I have made a background using your wonderful tutorial here and everything works perfect from my computer. The problem is when other people try viewing from their computers the background is not showing at all. It’s just white! They can see my header image, but not the background. I keep thinking that I’ve done a typo in my code or something. I’m also thinking that it might be Internet Explorer vs. Firefox. I use Firefox and the 2 people that have tried to view it use Internet Explorer. I was hoping that you might have a suggestion for this problem. I’m making this blog mainly for family and friends that live out of town and I want everyone to be able to see the background. I would greatly appreciate it if you had a suggestion. Your blog is absolutely amazing and very inspirational!
I have made a background using your wonderful tutorial here and everything works perfect from my computer. The problem is when other people try viewing from their computers the background is not showing at all. It’s just white! They can see my header image, but not the background. I keep thinking that I’ve done a typo in my code or something. I’m also thinking that it might be Internet Explorer vs. Firefox. I use Firefox and the 2 people that have tried to view it use Internet Explorer. I was hoping that you might have a suggestion for this problem. I’m making this blog mainly for family and friends that live out of town and I want everyone to be able to see the background. I would greatly appreciate it if you had a suggestion. Your blog is absolutely amazing and very inspirational! Here is my blog http://www.kasey-thekilloughs.blogspot.com/
Ok, firstly, thanks for the tutorial! I have been wanting to learn how to do this.
I know it’s been a while since you posted this, but I am hoping you will still see my comment and maybe be able to help!
I followed the directions, but the background looks GINORM on my blog. (Actually, pardon the mess, but this is really my ‘experiment blog’ for doing things like this.)
So aside from the mess, can you see how huge the background looks?
Is that normal?
http://experimentblog-jackie.blogspot.com/
Also, instead of changing the HTML of my blog, I added a widget and used this html code to get the background:
body {background-image: url(http://i686.photobucket.com/albums/vv225/jackiewins/aprilbackground.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
make sense?
Hi! I made and AWESOME background, http://i906.photobucket.com/albums/ac261/iamldsru/backgroundblog-1.jpg
however, i put it in the html–and when I press “Preview” the background doesn’t show up. It is just white>>
? Do you have a suggestion?
Below is a smidge of the html so you can see if I coded it wrong. (note: the html is normally smack dab next to “url”) Does spacing really matter that much in some instances?
body {
background:url(http://i906.photobucket.com/albums/ac261/iamldsru/backgroundblog-1.jpg) no-repeat center fixed #FFFFFF;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
Help….I am having the same problem as Madeline.
What are we doing wrong????
Your tutorial for Photoshop was excellent, and I love the background I made, now if I could only get it to actually show up on my blog.
do you know if these will work on wordpress and if so, which template you need to use? Thanks in advance and thank you for all the awesome ideas and things you share!
Thank you SO much for sharing your helpful hints! I’m loving EVERY one of them. :)
Hi! Thanks for the tutorial! I’ve searched everywhere and yours is by far the easiest to follow! That being said….lol….I do just fine until I try to install the new background on my blog. Mine don’t come out too small, but too big (no matter what resolution I seem to set it on) It cuts off the bottom half of my image. It’s like it magnifies my image. I should mention i’m using GIMP. Any ideas what I could be doing wrong? Thanks again!
Rachel
Hi Amanda,
I love this! I just can’t seem to get it to be the right size for my blog. It’s too skinny! And it looks a little funny. HELP! Thank you, you’re amazing!
Thank you! I managed to get a header out of it. I’m still very much a beginner when it comes to Gimp.
Wow! I figured it out! I went through the steps using different graphics and was still able to figure it out! It only took me like 5 hours – but I’m totally NEW to this stuff! I just started my blog like a week ago! I am so psyched that I figured it out – now the skies the limit. I want to work on a few other things but have to get some sleep before the kids wake up… I’ll be back in a few hours to learn more.
Thanks so much for the AWESOME step-by-step guide. It is appreciated for sure!
Have a blessed day!
Yay! I did it. I had the little problem of not understanding at 1st where to go to get the image size to save correct in Photobucket- – but I figured it out. Thank you so much for the great tutorial! I love how easy it is, and customizable. :) Please feel free to check mine out. I’ll probably be posting about it tomorrow, but I’m done for the night- lol. This blog stuff can be so addictive!
Blessings!
-Sarah
I can’t TELL you how excited I was to find your site today! I have been trying to figure all of this stuff out and you have made it SO clear and easy! THANK YOU SO MUCH!!!
Thank you soooooo much for this! I used GIMP and wonder how I can make the background smaller cause you can’t see all my pretty papers that were used- I sized with the 1600×1100 and uploaded to Photobucket at 1G.
Overall I love it. Now I want to play more!
Hi! I need some help. I already finishes with my background on Photoshop. Then I joined Photobucket, but know I´m lost, I can´t use my background on my blog.
Thanks
Magdalena