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!!! :)
Yeah! I’m so excited to try this…thanks for sharing!
How wonderful Amanda! I can’t wait to use this! Only three more weeks of school and I can devote my time to pictures and digitial designs! Thank you so much, you are wonderful!!!!
Thanks so much for this tutorial I have always wanted to know how to make these patterned backgrounds they’re just so much fun looking. I have a three column can I still do something with it?
Sherrie
Thanks for sharing. I’ve been wanting to try to “dress up” my blog, thanks to your inspiration. I’ll give it a try now. I wonder if the html code will transfer in blogspot….oh well, guess I’ll give it a go.
K
Holy Cow! You are a complete and total DOLL COOKIE for doing this. I am soooo a step by step screen shot learner. While it is to early in the morning for my brain to be fully functioning, I have this bookmarked to read tonight. Yes I will share this post cause there are so many people who will love this
THANK YOU!!!
Thank you so much for this information. I am a new blogger and wondered how you and others created such beautiful bog backgrounds. Can’t wait to try it!
thanks-I always wanted to know how to do this!!
First of all thank you so much for creating that mini kit. I really hope you play around with some more. I love your style. And thank you for providing them FREE!!!
I have always wanted to try and make my own background. Since you just posted the directions, I had searched for how to do it and there are some directions on the websight for The Cutest Blog on the Block. So, I used that to help me with your papers and ribbons, etc… I was so excited that I was able to do it! Now the possibilities are endless. I just have to play around on my photoshop!!! Thanks again. Keep up the creativeness.
Wow! What an awesome tutorial and such great information! Thanks so much for sharing this. I just love your blog and always look forward to your posts. Thanks again!
@Sherrie
The good thing about this template is that it can be modified to fit any size blog. The only thing you have to change is making the white background part at the very beginning of the tutorial wider. In the tutorial I make it 800 pixels wide. You may have to play around with it and see what works best for your individual blog, but for a 3 column layout, I think around 1000 pixels wide would be a good place to start. So, at the beginning, instead of setting your guides at 400 and 1200, set them at 300 and 1300. Then just follow the tutorial like normal. You should be good to go! :)
@Kaylea
I think Blogger/Blogspot are very similar. As long as you can get to the HTML code to edit it, you’ll be good. Here’s a little tidbit of juiciness just for free: All blogs are designed in a language called CSS. So the cool thing is, no matter what kind of blog you have, the code for editing it is the same. You just want to follow these basic steps: Find in the code, near the top, where it says “body {”, then delete the lines where it says anything about background, and replace it with the code I provide in the tutorial.
Wow thanks. One question – and I am new to this..If I create my own design with your template why do you suggest photobucket(or sim.)? Can’t I just upload the .jpg file from my computer. Should I be doing this for my blog photo entries too?
@Nancy
Blogger doesn’t have an option to upload your own background. It does let you upload your own blog photo entries, sidebar pictures, and headers, but at this point in time, it doesn’t have the option to upload your own background. So that’s why I suggest uploading it somewhere else and linking it! :)
Just tried with your premade bg. uploaded it to photobucket and then changed html. it changed it but there are two inches on either side that it didn’t fill. don’t know what i did wrong. Help?
@noelle
Can you post a link to your blog so I can see what it’s doing? It might just be that your monitor’s screen resolution is set bigger than most. If this is the case, then I probably wouldn’t worry about it too much- everyone else will see it normally. If it really bugs you, you can download the PSD template file, open it in Photoshop go to Image > Canvas size and change the 1600 to however wide your monitor resolution is (find out your resolution here). Then resize the yellow paper to be the same width and copy and paste it over the existing yellow paper.
Hi Amanda, I just spent the morning doing my own blog makeover using some of the papers from your spring kit. I made my own header using Scrapbook Factory deluxe program. If you want to see what I did, check it out here:
http://jaime-and-theo.blogspot.com
I don’t have photoshop yet but when I do, I am definitely going to try out the techniques you talked about today. Thanks for everything! :)
Okay, Amanda, I tried it with a kit that I had and I think my blog looks great! Thank you so much. I don’t think I could have done it without all the photos..you rock!
Hi Amanda,
I thought I already left a comment but I don’t see it so in case it didn’t go through….
I just spent the morning doing my own blogmakeover using some of the papers/embellishments from your Spring Kit. I designed the header using a scrapbook program. I am so happy with the way it turned out. If you want to check it out, here it is:
http://jaime-and-theo.blogspot.com
I don’t have photoshop yet but when I finally get it, I’ll definitely try some of the techniques you talked about today. Thanks for everything!
Thanks for the tutorial! I had CS3 for the trial period and LOVED it! I’m now in the process of figuring out a way to convince my hubby that life just can’t go on without it and that maybe he should surprise me with a copy of my very own! Don’t know if it will work, though.
PS- is your current background Happy Go Lucky?
Hi Amanda;
wow you are just great!
question: it says to download bkground “click here”
so I do that and a picture of the bkground shows up
now do I just right click on the pic and save picture?
I am some what confused
Joann
@Lori
Yep! :) I always try to put credit links down at the bottom of the page in case anyone sees anything they want! :D
@Joann
You are correct, right click and save. :)
HI Amanda! I am working through your tutorial. when I get to the part where you set the guides under view, I don’t have the command – New Guide. I am using Adobe Photoshop Elements 6. What do I do?
@martina fegan
I don’t have Elements so I may be talking totally out of the wazoo here, but I did a quick google search and apparently Elements doesn’t have Guides like Photoshop does. Supposedly there’s an addon for Elements called Grant’s Tools that will allow you to use guides, but since I don’t have Elements, I don’t know anything about it. I found this while googling, maybe it will be helpful:
youtube video tutorial
Amanda,
This tut is just too fabulous!!
I’ve tried making my own backgrounds before,and they always turned out way too large. Now I know why! I was using inches not pixels! I’m going to try this tonight!
Off to visit your store too!
Thanks so much for doing this. I am having the same problem as Noelle, with the extra inches on either side. I don’t have a larger monitor, so I don’t think that is the problem. I also tried re-sizing the JPEG background, (I tried all the way to 3600 pixels wide). But when I paste it into the HTML and view my blog it looks the same…1600 pixels or 3600 pixels wide. Hmmm…. And I am making sure that when I upload it Photobucket it leaves it at the largest setting as well. Is there something with the “fixed” part of the HTML code that needs to change? I am working in Blogger. My blog is private, so I don’t know how to show you what it’s doing either.
Hi Amanda! This is such an awesome tutorial, I love it! I have a question about your real blog papers though… I love how they are torn and distressed. Did you go through and do that with a brush?
Thanks for responding. my res is 1366 X 768. My blog is: http://cdnewboldfamily.blogspot.com Thanks for your help
@noelle
I just checked and the background on your blog is 1024px × 704px. That means it’s getting shrunk somewhere, probably Photobucket. When uploading to Photobucket, make sure it says “Reduce to 1 megabyte filesize”. Anything else and it will keep making it too small. Keep me updated! :)
well I justcouldn’t wait to try this out!
I have elements 6
I goy to step two and that is as far as I got
can’t find where to make new guides
found one web site that said that it’s in the effects but can’t find any thing there so I searched and searched
and still can’t find where to make new guides
well I give up – I am going to bed – I’ve been at this for three hours!
Joann – maybe someone will have an answer for me
sorry I should have read commenbefore I left my comment
so it’s been answered already will check out your link thaat you posted thanks
Thankyou so much for your help! I got it! I love your website. I’ve downloaded a few fonts, they’re great. Thanks again. I’m bookmarking this place!
wow!! this is cool!! i love the step by step tuts.. you just made our lives easier hehe!! thanks for sharing ^_^
You are too kind to us! This is absolutely wonderful and I can’t wait to see I can actually do any of it… :D
This is what I have been looking for. Your tutorial is so easy to follow. Tonight I am going to give it a try and will leave an entry if it turns out good.
Thanks a lot. You are very sweet.
HUgs
Gayatri
Thanks so much for the reply Amanda I am going to try the tut this weekend when I have time and no work involved from the office…..
thanks Amanda for the link Grants tools
and how to install (I have PSE 6)
I watched the video looked very easy to -
I can’t find the reviews folder
doing a google but so far no luck
Joann
Hi, I love your tutorial, but do you know how to do it with elements? I’m having trouble setting the limits on the rulers.
veronica
I’ve been dying to learn this! Thanks for the tut! I have a new kit I’ve been working on and now I can use it for my blog too! Yeah!
Hi Amanda.
First, you did an awesome job with this. I spent most of yesterday ‘touring’ your sit. I love all of it. Yesterday, I made a background per your instructions. Uploaded it to Photobucket and then copied the html to my blog. I can see it just fine but my friend, who is co-author of the blog, can not see it at all. Any idea what is wrong?
Thanks for all your help and this awesome tutorial.
Mary
Hi Amanda, love what youre doing lately, please visit my website I included you in there :D The thing is I´m doing my first digiscrap kit, and dying in the trial haha, I just don´t figure how you make that realistic textures, If you can help me I´ll be so grateful!!! looking on youtube for tutorials with no cool success :( Thanks for all you share, I want to make mi first kit also free :D
You are the bomb! Thanks for sharing. I look forward to giving my blog a much needed makeover.
wow! I am soo excited to try this…thank you for putting it step by step…you are the first person that actually has made this make sense for me. you are wonderful! :D
Have a great day!
-michelle
@Mary
I’m not sure, because I can see it just fine! :) It looks awesome, I love what you did with the ric rac!!! :)
@veronica and those with Photoshop Elements
Since ya’ll can’t set guides in Elements, can you download the PSD template file at the beginning of the post and open that in Elements? Then can you use that as a template to add your own papers? You could create a clipping mask: resize, copy, and paste the paper you want to use into my template, right over my papers. Then in the layers pallete, drag your paper directly over my paper that you want to cover up. Then hold your mouse in between those layers. Hold down the ALT key and click in between those layers.
If that doesn’t work, 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
Keep me updated on how it’s going!! :)
Thanks, Amanda..one more question. Do you use Firefox or IE…I’m thinking the problem is with IE. I use Firefox and Nita uses IE…when I open IE and go to the blog, I can’t see the background either.
I have been to TONS of blogs in the past 2 1/2 years. HANDS DOWN—Yours is truly THE B-E-S-T one I’ve ever visited!!!! Your creativity, organization, recipes, photography, PRECIOUS sharing of knowledge, and giving spirit are just….just a complete breath of fresh air!!! I just discovered you yesterday by googling an image of CK mag. There was the cover pic and I saw your web address and decided to click. Maybe the best CLICK I’ve made on the web!!!! No joke, Amanda, you have so many gifts, that’s clear, but the biggest one that shines through is your willingness to share the goodness you’ve found. Thank you. I will certainly be back for MORE ALL THE TIME!!! Blessings on you and your family!
I’m about to bust into song and it goes a little something like this…”I think I love you…” Thank you so much for this tutorial, I can’t wait to play.
Thanks so much for making this 1,2,3. These steps are amazing. Thank you for your hard work. I love my blog NOW!
Amanda, I am the number 45 comment and just wanted you to know that I did a post about you and your great blog. Thanks for being so giving!!! ; )
You are amazing! Thanks for this great tutorial! I love that you also posted the full photoshop file. Now any ideas how to change the header on blogger? Thanks a million!
che belli!! Grazie!
:D