Blog Design Tutorial 2: Constructing a Background in GIMP

In the last tutorial, you should have downloading our program, GIMP, found a digital scrapbooking kit, and created a Photobucket account. We will be using all of these today, so if you didn't do those things,  go do them now..

...waiting...

.....waiting.....

.......waiting.......

Okay, hopefully you're back and ready to go! Just a clarification. I will try to explain the step the best than I can, then I will follow that up with a screen shot. [I know that I learn best by someone showing me what to do!] You may need to click on the picture to make it larger!

Okay, so first, you'll need to open up GIMP by clicking on the little fox icon. The main window should open up. Other tool windows may open. Here are the two that you actually need:

                                               

If you have any other boxes open, you can close them. If these two boxes don't show up, here's how you get them.

Now that you have these two boxes open, you'll need to open up a new image. This is just a background image that sets the size for your background. Here's where I wasn't sure what to do when I was making my first backgrounds. Different tutorials said to make your original image different sizes. But every time I made it different sizes, layers got cut off! So frustrating! So, I made mine 1200 x 1000.  Then, I set my background color in blogger to match my layout, in case people's screens are wider than mine, but I'm getting ahead of myself. [If you don't think this size will work for you, go a little bigger, like 1400 x1100.]

Here's how you open a new file. Go to File, then New.

Now that you have a new file ready, you'll need to decide what piece of digital scrapbook paper that you'd like to use as the base of your layout. You can always change the order of your layers later! Just open which one you think you want on the bottom. 

To do this, go to File, then Open as Layers. Now, you'll need to find the paper that you want! For this tutorial, I am going to use a kit called Citrus Punch from Creative Chaos. She releases a lot of great freebie kits! Once you find it, double click it to open it.

Now, it might look funny. That's because it is stretched. So here's what you need to do. Go to layer, then Scale Layer. Click it.

 Change the size to match your original image. To do that, you'll have to click that little chain. Otherwise, it won't allow you to change it the way you want to. Click Scale.

Abra-Ca-Dab-Ra!

Your first layer is done! If this is the only layer that you want, you can skip to the saving step. But, if you want to add another piece of paper and any embellishments, keep trucking along!

To add another layer, repeat the last few steps.
1. Go to Layer->Open As Layer
2. Find the paper that you want to use. Open it.
3. Resize it to the size of your original image.

Do those things, and you'll end up with this:

Both of your layers are still there! They are just the same size. Now, you'll have to change the size of the top layer so that the back one will peek out! Again.. go to Layer--> Scale Layer. This box will pop up. Don't change the height! Only change the width. This will make it skinnier. You can make it as thin or wide as you'd like. I'm making mine 1000.

Click Scale, and you'll get this!

Yay! Now, if you'd like to add another layer, go through the same steps! I'm going to stop at two. One more thing I'd like to show you before we're finished with the paper. If you want to make your thinner paper a little see through, here's what you can do.

Click your layer window, and click on the layer that you want to make see through. On the top of the layer box, there is the option of Opacity. It should currently be at 100%. To make it a little more transparent, lessen the percentage! [I'm going to leave mine at 100%]

Okay, we're done with he paper! Again, if you'd like to stop here, then skip to the saving step! If you'd like to add clip art or embelleshments from your kit, read on!

There are two things you should do before you start adding things. A good idea to do before you add any embellishments is to add "guides" if you'd like to center anything. I just put in a vertical and horizontal guide so that I can see my image's mid points. Go to Image-->Guides-->New Guides by Percent--> OK. Then do the same, but switch vertical to horizontal!

Another good idea is to lock down your two [or more] papers so that they don't move around while you'd moving around your embellishments.

Ok, now you're ready to add images. Go to File-->Open as Layers. Then open the image that you'd like to add to your background.

The image will appear in the middle of your background. If you'd like to resize it, click the Scale button in your toolbar [or scale layer, as you've done before] You can drag the corners of the image or use the scale box that pops up.

Now, you can move your image. Click the move button in your toolbar, and go for it! Use the guides if you want to center anything.

I'm going to center mine horizontally so that I can show you how to duplicate an image so you'll have a matching flower on the other side.

Go to Layer-->Duplicate Layer

When you do that, you won't see anything, because the new layer is directly on top of your original. Because I want it to be like a mirror image, I'm going to flip it horizontally. But you can use this to flip it vertically, too, if you wanted to. Go to Layer-->Transform-->Flip.

That's all I'm going to show you in terms of making the background. I hope this gave you a good foundation. Once you get comfortable, you can mess around with the other features.

It is time to save! I would make a folder that includes all of your background stuff, because you're going to save this twice. First, go to File-->Save As. It'll be saved as a .xcf. This is good, so that you can reopen it and tweak things if you need to. But we're also going to save it as a .png because you can't upload .xcf to Photobucket. So go back up to File-->Export To, and save it again, preferably in the same folder.

Go to your Photobucket account and upload your png image.

Go back to Blogger. Add an HTML box gadget to your layout. Paste the code below, then replace YOURIMAGELINK with the direct link to your PhotoBucket background, shown above.

NOTE-- I can't figure out how to show you HTML code without it disappearing. Grrrr. So I'm going to direct you to a site that will take it from here!

Click HERE and follow steps 4-8!

Save and view. You should see the background image!
Depending on the size of your screen, you may see some space on either side of your background. You have a couple of options, which I will get to in a later tutorial. This one is waaaayyyy too long already!

Please let me know if anything needs to be clarified. I hope this helps someone. Please leave a comment & let me know if it is helpful to you! This takes a long time, and I want to be sure it is being used. =)

The next tutorials will be Step 3: Making a Header and Button in GIMP

I already posted how to make a header/button in Pages or Word. If that is more your speed, feel free to check out this post in the mean time!

I will be uploading this background and future elements on my Tester Blog as I go along.