March 30, 2009

How to Make a Scrapbook Blog Background

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?

how to make a scrapbook blog background tutorial

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!

How to Make a Scrapbook Blog Background | Tutorial

{ 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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

Go to View > New Guide and enter a vertical guide at 400 px.

How to Make a Scrapbook Blog Background | Tutorial

Then do that again and set a vertical guide at 1200 px.

How to Make a Scrapbook Blog Background | Tutorial

This is what it looks like so far…

How to Make a Scrapbook Blog Background | Tutorial

Now using the Rectangular Marquee Tool, select the entire area inside the new guides you just made.

How to Make a Scrapbook Blog Background | Tutorial

Right click in the middle of the selection and click on Fill from the menu that pops up.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

Go to Image > Image Size…

How to Make a Scrapbook Blog Background | Tutorial

…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.

How to Make a Scrapbook Blog Background | Tutorial

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)

How to Make a Scrapbook Blog Background | Tutorial

That was fun, let’s do more! :)

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

First, let’s open up the light brown button and resize it a bit… 200 pixels for the width/height.

How to Make a Scrapbook Blog Background | Tutorial

Now, let’s open up the brown stitches, and grab one… Select a single stitch, and copy and paste it over on the button.

How to Make a Scrapbook Blog Background | Tutorial

Hit CTRL-T to put a transform box around the stitch. Rotate and resize the stitch until it looks right to you.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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!

How to Make a Scrapbook Blog Background | Tutorial

So copy merged, then paste it onto the blog background.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

Then you can paste it on all the other layers! I pasted it everything except the stitches and the yellow paper.

How to Make a Scrapbook Blog Background | Tutorial

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.

How to Make a Scrapbook Blog Background | Tutorial

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:

How to Make a Scrapbook Blog Background | Tutorial

Cause if it says something like this, it’ll shrink it when it uploads and then it’ll be too small to use.

How to Make a Scrapbook Blog Background | Tutorial

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 {

And change it to something that looks like this:

body {
background: url( no-repeat center fixed #FFFFFF;

Where 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…


whatever. Delete it all.

Replace it with this:

background: url( no-repeat center fixed #FFFFFF;

Where 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! :)


See More Posts About: Blog DesignTutorials


Glynis March 30, 2009 at 6:22 am

Yeah! I’m so excited to try this…thanks for sharing!


Barb DeSousa March 30, 2009 at 6:37 am

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!!!!


Sherrie March 30, 2009 at 6:38 am

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?


Kaylea March 30, 2009 at 6:57 am

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.


Brooke - in Oregon March 30, 2009 at 7:18 am

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



martina fegan March 30, 2009 at 7:57 am

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!


connie March 30, 2009 at 8:13 am

thanks-I always wanted to know how to do this!!


Casie March 30, 2009 at 9:31 am

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.


Lee Anne March 30, 2009 at 12:11 pm

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!


Amanda March 30, 2009 at 12:29 pm

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! :)


Amanda March 30, 2009 at 12:36 pm

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.


Nancy March 30, 2009 at 1:32 pm

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?


Amanda March 30, 2009 at 1:38 pm

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! :)


noelle March 30, 2009 at 1:44 pm

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?


Amanda March 30, 2009 at 2:07 pm

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.


Jaime March 30, 2009 at 2:43 pm

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:

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! :)


Glynis March 30, 2009 at 3:13 pm

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 rock!


Jaime March 30, 2009 at 3:20 pm

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:

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!


Lori March 30, 2009 at 3:52 pm

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?


Joann March 30, 2009 at 3:53 pm

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


Amanda March 30, 2009 at 3:58 pm

Yep! :) I always try to put credit links down at the bottom of the page in case anyone sees anything they want! :D

You are correct, right click and save. :)


martina fegan March 30, 2009 at 5:28 pm

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?


Amanda March 30, 2009 at 5:43 pm

@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


Nichole May 16, 2011 at 4:37 pm

@ Amanda,
I own PSE9 (Photoshop Elements 9), when I was doing the tutorial this morning following along in PSE9 Once the document is created Click on the View drop down at the bottom is New Guide then type in the 300 & another for 1300 for the 3 column set up.
I’m still new to PSE9 but I found that I was able to do the same steps using this program. The differences are: New Guide from the View drop down for guides set up one can also see the rulers in pixels set there as well. The other thing that is different in creating in PSE9 for your tutorial is when to delete the paper outside of guide, use the rectangular marquee tool then click on delete. Easy Peasy now that I know how to do it. I hope this helps with anyone interested in the PSE9 version.
I am having difficulty with getting the coding into my current blog. Sigh – 3 column is not wanting to work for me on background and all my page elements seem to scatter when I did attempt it. Here is the link to view a mock up of the background I did create in PSE9 with your tutorial though and Thank YOU sooo much for this.

Mary March 30, 2009 at 6:00 pm

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!


Shelley March 30, 2009 at 6:12 pm

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.


Laura March 30, 2009 at 6:35 pm

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?


noelle March 30, 2009 at 6:36 pm

Thanks for responding. my res is 1366 X 768. My blog is: Thanks for your help


Amanda March 30, 2009 at 7:51 pm

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! :)


Brenda July 28, 2010 at 3:00 am

Ok I read what you said about making sure in photobucket that it reduce to 1 megabyte filesize and I see where you can choose that on photobucket, but when I chose it there is no submit button and when close the window it goes right back to the 1024pxx704px size…any clue how to fix it?

Allison August 13, 2010 at 7:47 pm

I am having the same problem with Photobucket, Brenda. Did you get it resolved? I am going to email tech support on Photobucket tomorrow and see if they can help me. Good luck!

Joann March 30, 2009 at 7:56 pm

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


Joann March 30, 2009 at 8:03 pm

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


noelle March 30, 2009 at 8:35 pm

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!


ettey March 30, 2009 at 8:54 pm

wow!! this is cool!! i love the step by step tuts.. you just made our lives easier hehe!! thanks for sharing ^_^


Melissa March 30, 2009 at 10:09 pm

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


Gayatri March 31, 2009 at 12:55 am

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.


Sherrie March 31, 2009 at 3:12 am

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…..


Joann March 31, 2009 at 7:41 am

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


veronica March 31, 2009 at 7:59 am

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.



Shelly March 31, 2009 at 8:47 am

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!


Mary March 31, 2009 at 9:56 am

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.


Arody March 31, 2009 at 10:48 am

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


Gina March 31, 2009 at 12:32 pm

You are the bomb! Thanks for sharing. I look forward to giving my blog a much needed makeover.


michelle March 31, 2009 at 2:01 pm

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!


Amanda March 31, 2009 at 2:18 pm

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!! :)


Angel June 28, 2010 at 9:05 pm

Hi Everyone! for those who have PSE 6 – please see post #52 – Joann has referred me to If you email her…she will send you directions on how to download the guide application. These directions are only for xp, mac, vista. I have windows 7 so I had to keep digging for the proper directions. I now have them. If you have windows 7 and would like them….visit my website and click on ‘ contact me’ button….I would be MORE THAN HAPPY to sent the wealth your way…

ps: THANK YOU AMANDA for wonderful tut!

Mary March 31, 2009 at 4:38 pm

Thanks, 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.


PandaMom March 31, 2009 at 5:40 pm

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!


Sara March 31, 2009 at 6:19 pm

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.


Brittany March 31, 2009 at 9:35 pm

Thanks so much for making this 1,2,3. These steps are amazing. Thank you for your hard work. I love my blog NOW!


PandaMom April 1, 2009 at 5:23 am

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!!! ; )


Matana April 1, 2009 at 11:32 am

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!


eka April 1, 2009 at 1:49 pm

che belli!! Grazie!


Noelle April 1, 2009 at 3:48 pm

Thanks. I like it too. I gave you some “props” on my blog. :)


Joann April 1, 2009 at 3:54 pm

for you photoshop elements 6 with out guides
I am one of you but I got guides on my photoshope elements 6
if your interested in the info just email me and I’ll forward the info
sorry for not posting here but I didn’t want to take the chance of a miss type – it’s not hard at all
blessings, Joann
I got the info for xp and visita

joanndietrich AT hotmail DOT com


Stephanie Arnold April 1, 2009 at 4:11 pm

Holy crap. You’re frickin amazing girl… I don’t see how you have enough hours in the day to do all this jazz. RIDICULOUS.


Amber April 1, 2009 at 5:25 pm

Thank you so much for posting this tutorial. I totally wanted to know how to do this and you explained it perfectly!


Coleen April 1, 2009 at 6:39 pm

great tutorial; you’re awesome!


Gayatri April 2, 2009 at 6:36 am

I have photoshop 7 and I made the blog background using your step by step and it is fantastic. You are a wonderful person. Many thanks. But I am able to see it when I open using Firefox but not with Internet explorer.Can you please tell me why? Where have I gone wrong?
Here is the link to my blog.


Gayatri April 2, 2009 at 6:39 am

Thanks Amanda for a wonderful tutorial. I have made one and loaded into my blog. I was wondering why it does not show up on internet explorer? Where did I go wrong?
Help please


Amanda April 2, 2009 at 2:42 pm

Sorry to all those who are experiencing IE troubles! I have no idea what the problem could be?? I’m looking at all of ya’lls code, and it’s correct. It’s exactly the same code I’m using on my blogger blog and I can see my background in IE. Unfortunately I am unable to duplicate the problem in order to troubleshoot it! I googled and couldn’t really find any useful information.

Interestingly enough, Gayatri, I viewed your blog in IE and I can see your background. Did you do something to fix it? Please let us know! :)


Gayatri April 2, 2009 at 5:34 pm

I could not sleep last night. I wanted to fix it. Its a simple code mistake I made.

when you do this as you suggested, Amanda

body {
background: url( no-repeat center fixed #EADCB9;

I did not leave space after the closing bracket and “no-repeat”. So it did not show up on IE.

If you leave space after the closing bracket and “no-repeat”, it will show on IE.
Your code is correct, Amanda. I was a bit excited I think when I typed the code. Lol!!!

Thank you for your lovely comment in my blog. I really appreciate you doing this tutorial.


Melissa April 3, 2009 at 2:45 pm

Thank you Amanda! The tutorial was fabulous. I’m new to blogging and digi scraping. I’ve been searching everywhere to learn how to make my own background so my blog didn’t look like every other one. I love what I created. Thank you. And thanks to Gayatri’s comment. I did the same thing. Oops:) I appreciate you taking the time to teach us newbies. Thank you!


Miss CutiePie April 4, 2009 at 7:07 am

Thanks Amanda!
Also I just wanted to let you know how much I adore your digital kit! I used it to made some hybrid decoration, here’s the link if you wanna check them out.

Again thanks for such an awsome blog!


Shelley April 4, 2009 at 11:46 am

So I thought I had this all figured out. I got my blog looking perfect using your tutorial and then was re-doing my sister’s blog for her. I made her a blog background that is 1600X1100 and saved it for the web at 60%. I also made sure to save it at a 1MB file when I uploaded it to Photobucket. BUT when I put it into her blog it makes it too BIG. I cannot for the life of me figure out what it going on. When I click on the background properties, it says it is the same dimensions as my blog background, (which is working fine). Also, I tried putting my blog background into her blog and that works fine too. So I think it is some problem with the background I made and not the code. Any suggestions? Thanks in advance! :)


Stefany April 6, 2009 at 3:05 pm

Ok, i tried. I have blogger and it only changed the background to tan. I changed the template a few times, thinking that it didn’t like the one I had. I took out everything after ‘background’ and before ‘margin’ and then I tried taking it ALL out. Neither works…
body {
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;


Serenity April 6, 2009 at 4:04 pm

I loved this tutorial. Thank you so much!!!


Erin April 6, 2009 at 7:04 pm

hi amanda, this is such a helpful tutorial and i can’t wait to try it out.


Jenipher April 7, 2009 at 11:44 am

wow! How fun!


Becca April 7, 2009 at 12:04 pm

Hi Amanda! I love your work!

Quick question: how do I actually go about adding this into my Blogger HTML code? Do you have a tutorial for that or am I missing something?


Joy Gross April 8, 2009 at 7:17 pm

Thank you so much for this information… you are awesome. I cant wait to play with it more… check out my blog.


Tricia April 10, 2009 at 3:51 pm

I have a wordpress blog that I’m hoping to make as beautiful as the one you have here. Thanks so much for the detail in your tutorial. Hoping to get to this over the weekend. I have a 3 column blog so hope that I can fix the measurements properly. New to digi scrapping too so this will be my first attempt. I’ll let you know how it turned out.


Alyson April 14, 2009 at 9:06 am


Oh my goodness, THANK YOU so much for your excellent tutorial! I have been trying to learn how to make my own backgrounds for awhile now and your step by step tutorial was a life saver! My only question is: for the one of the first steps when you fill in the first layer with white, you state that you can use scrapbook paper instead…how would you go about doing that?




Amanda April 14, 2009 at 2:51 pm


Go ahead and fill it with white, then copy and paste whatever scrapbook paper you want on top of the white layer. In the layers palette, hover your mouse between the white layer and the paper layer. Hold down the CMD button and click in between the layers. This should make the paper the same size as the white background.


Tina April 14, 2009 at 4:15 pm

I love that you are posting these tutorials!! Thank you so much. I’m off to try the fonts tutorial, but first I wanted to thank you for this one and give you a link to my blog:
You are the best!!


Jenesse April 15, 2009 at 1:57 pm

It worked! It’s awesome!!!

Next time I’ll know better though, I didn’t plan for my layout to get cut off at the top and bottom, so I had to do a quick shuffle of my design.

Thanks a million!!!

P.S. I used GIMP and Photobucket, I love both. :)


Lori April 15, 2009 at 6:13 pm

I tried to link the image from photoshop–if I include just the direct link it show up but seems to wrap. If I include the words no-repeat center fixed #EADCB9 nothing shows up at all.

Any help sincerely appreciated!



Tierra April 16, 2009 at 11:06 am

Here is what I came up with. Thank you for sharing your secrets. I have been wanting to know how to do it.


Sew4Fun April 17, 2009 at 5:54 pm

I can’t thank you enough for this detailed tutorial!! I’ve been looking for something like this for two days. I’ve found other tutorials but all they did was leave me with a lot of unanswered questions because they missed some of the crucial details. Yours in right on the mark. Thanks again for sharing. I’m off to have some fun and create some blog backgrounds.


Megan April 20, 2009 at 6:47 pm

I was able to figure out how to make my own backgrounds and put them on my blog, and i was wondering if making a customized header is the same process. I made one in photoshop and saved it for web, uploaded it to photobucket…and now I dont know what else to do! :D I tried messing around with the url under the header sections in HTML code stuff, but that didnt work.
Thanks for all you do! I check your site almost everyday and always leave feeling inspired! :)


DigiDeb April 20, 2009 at 8:52 pm

Thanks for the tutorial. I’ve wanted to have a blog for a while, but a pre-made background was not going to cut it. Now I know what sizes to deal with!

Question: How do you make a pretty header like you have at the top of your blog? I know how to make the image, but how do you install it and link it?


Mana April 21, 2009 at 7:59 am

thank you sooo much for this great tutorial!
It’s great!
If you look to my blog, I’ll be very glad :)
Thank you again!


Brandy April 21, 2009 at 10:50 am

Hi and thanks so much for your tutorial! I have a bit of a problem though. :) If you look at the blog you can see that the other papers aren’t there. Do you have any idea what the problem could be??


Sandra April 22, 2009 at 9:17 pm

I had left an eariler comment that said my background would not come in. Well after reading all you post, which I such have done frist, I went back and DELETED ALL THE STUFF THAT HAD TO DO WITH THE BACKGROUND. IT WORKEDDDDDDDD. I love it, I made the middle to big, but I can fix that.
Your tutorial is the BEST BEST BEST. I have downloaded at least 5 easy tut. None work. Yours did. I love it and now I can redo my blog so it looks like others I have seen.
I would love for you to see it. Thanks again.
OH do you have any tut for the header. I need my centered.


tyne April 26, 2009 at 12:34 pm

Hey Amanda,

I am loving your blog. Thank you for your generosity! Quick question- I am in CS3 on Windows and when adding my last layer of scrap paper (your striped), I duplicated and dragged and set my horizontal guides, how the heck do you delete? I used the rectangle thing to select the area I don’t want, but can’t figure out how to delete it.


Sarah April 30, 2009 at 10:01 pm

I have followed your directions to use my signature font for post titles. Somehow the top of the font is getting cut off. Any ideas how to fix that with html? I’d love it if you can take a peek and see if there is a fix for this. I’d so appreciate it if you could drop me an e-mail. I’d love to give a shout out to your site if we can get this fixed. Thanks!


Heather May 1, 2009 at 5:31 pm

I am so glad I found this its helped me out a lot in making my blog background


The Mrs. May 10, 2009 at 9:09 pm

I did it, I did it! Well, I made mine just black and white, but I did it! AND I changed my title fonts! All thanks to you!!! Thank you so much for your fabulous instructions! :) xoxo!


Christy May 17, 2009 at 1:57 pm

THANK YOU SO MUCH! I never thought that I would be savvy enough to create my own blog background – you proved me wrong! Your directions on how-to where perfect and easy to use.
thank you again!


A+ Designs June 8, 2009 at 9:53 pm

WOW! Thank you so much for the tutorial! I had no problems following it whatsoever! FANTASTIC instructions. Thank you for taking the time out to write such an easy to follow tut!


Robyn June 10, 2009 at 8:36 am

This is a wonderful tutorial…….thank you so much! It’s so clear and precise and very easy to follow. I’m currently experimenting on my private/practice blog before I transfer everything over to my main blog. I’ve had to play around a bit because I’ve got a 20″ widescreen monitor. I’ve got dual monitors, the other one being a 17″standard one and I’m trying to make my blog so that it looks reasonable on both. I’ve basically got the graphics pretty much under control but I’d really like to bring the margins in for the actual text. Can you point me in the direction as to what code I should be looking at here. I would be extremely grateful if you could help me. Thanks so much. Robyn


Lindsay June 12, 2009 at 8:37 pm

Hey Amanda : ) I just wanted to let you know that I have been following your tutorials and have gotten so far with my blog design! I still have some work to do on it but I have been having so much fun with the backgrounds!

Let me know what you think…



Cathy June 13, 2009 at 4:14 pm

Oh my gosh! This is amazing!! I just put this background on my blog that I just started yesterday and I am obsessed! Thank you so much for showing us how to do this!


LIndsay M June 17, 2009 at 5:23 am

you are amazing – so glad I found this! Super easy to follow and I feel like I’ve actually learned enough to try a few more of these on my own! Thanks bunches!! :)


Helga June 17, 2009 at 5:25 pm

Amanda! How are you girl? Hope all is well… Hey I finally managed to upload my background, plus I made a header… Simple but cute. Hey, how do you insert your own signature on the posts? Will you teach me? Thanks!


sherri June 17, 2009 at 6:59 pm

I have been trying to make a background and Ihave gotten to the part you said was hard. And is it ever: I don’t know how to find my wordpress dashboard. Can tell me where I might look to find it?

Thank you


sherri June 17, 2009 at 7:18 pm

I did not give you the blog I was trying to get a background for.


Kathy-Catnip Studio June 19, 2009 at 10:48 pm

I have always wanted to know how to do this, and I can’t wait to try it! I found you by way of Shabby Blogs.


Emily Joy June 20, 2009 at 8:09 am

Could you PLEASE make a tutorial about how to do the comment thing? Like you have a little brown button for each commenter and you have the numbers. Thank you!

~Emily Joy


Tracy June 23, 2009 at 7:35 pm

How awesome your site is and the fonts, I followed your tut for customising my blog post titles to a custom font and it worked like a charm, thank you so much :)


Robyn June 25, 2009 at 5:53 pm

Amanda, I just want to THANK YOU big time! I have spent the last 4 months pulling my hair out trying to figure out why my custom blog layouts would not load correctly and then I found your FANTASTIC tut and it all became so clear. I didn’t realize when uploading to Photobucket that you had to have it on the 1 megabyte and well I did up a 4th of July layout at my blog and I hope you don’t mind but I put a link to your blog in my post so you can help more of us from becoming bald, LOL :-) Again THANK YOU SOOOOOO MUCH!!!!!!!!!!!!!!!!!


jenna June 25, 2009 at 8:20 pm

hello! i have looked all over and i cannot figure out how to add some buttons or tags to my blog. i think thats what you call them. they are like what you have for your blog that say subscribe, search, catergories and archives. i have the buttons i just dont know how or where to add them. please help.

thank you in advance :)


Robyn June 29, 2009 at 2:58 pm

Hi Amanda,

Thank you so much for checking out my blog that I made with your wonderful tut. I had one question that I thought maybe you could help me with. I have a another website and I did another custom blog layout for that one but I was wondering if you had some time maybe you could check that one out. The reason being is I love it but I would really like the white notebook area to move with the blog post and sidebar info. I believe but I’m not sure but I think I would need to separate the notebook from the rest of the background and save so they have their own html codes and post the background in the background area but were would I post the notebook image? I in the Outer Wrapper, Post body, or hmm I don’t know and thought maybe you could help me out. THANK YOU!


Comment Pages: 123Next »

Leave a Comment