Blog Tutorial 3: Making a Header and Button in GIMP

Hello & Welcome! A couple things before I get started with the tutorial!

Remember, I marked down my TPT products to $1 until sometime tomorrow evening. They are geared toward grades 2 - 4, depending on your students' abilities. Click here to view my last post with a more in depth description!

I am also still looking for helpers for my giveaway. Not much interest in helping, I guess? It'll just have to be a small event, no biggie! But thanks for those of you who are willing to help. I'll contact you soon! =)

---------------------------------------

Onto the tutorial. Just a reminder, I posted previously about how to make a header and button using Word/Pages. If this seems too complicated, feel free to use that tutorial by clicking here!

First thing's first-- open up GIMP! Open up new file. It doesn't really matter what size it is right now. Mine is something like 940x400.

Now, you'll have to choose the background [or base/outline] of your header. If you downloaded a scrapbooking kit, many of them come with frames that you can use. If not, you can find frames all over the place, just be sure to check the designers terms of use. If you can't find anything, just start out by making a rectangle-type shape in the color of your choosing in paint. You can jazz it up! Whichever one that you choose, go to File-->Open as Layer and open it up!

Depending on the size of the frame, you might not be able to see it because it is too large. So go to Layer--> Scale and make it something manageable. We can change the size of it later! Remember, if you want to change the proportions [make it taller or wider, not both], you'll have to click the chain to make it broken!

Here's what we have! If you look in your layers window [if you don't have that open, go to Windows-->Layers], you'll see that we have two layers open right now. One is the white background image. If you click the eye next to that, it will disappear. Do that now.

Okay, now this gets tricky, so try to stick with me! You need a paper/background to fill in the middle of your header. Do you see how, before we hid the white background, it covered all of the transparency? We want to keep the transparency on the outside so that our header keeps it cute shape! So we are going to need to choose a paper, then resize it so that it is only seen inside the frame!

[[This is the difference, to me, between using Word or Gimp. If you're fine with a perfect rectangle header (like on my blog), Word might be a good route for you!]]

So, I'm going to choose a paper from the same kit so it matches, and open it as a layer. Then I'm going to resize it to be 800x300. Remember, I can change the size again later.

Hm, notice how the new paper is on top of the frame? Not how we want it to look! So, we are going to change the order of the layers! By changing the order, we are switching which layer is on top. We want the frame on top. Look at your layer box. Your newest layer/paper should be on top. We want to move it back, behind the frame. Highlight [click] the newest paper, and click the down arrow. Here should be the result!

Looking good so far, right?! Now, lock down these layers so that they don't move around when you're messing with embellishments by clicking the blank space next to the eye [a chain will appear]. 

Now, we're going to decorate with pictures and words. Every header has words, but you don't necessarily have to use pictures. You can skip this part if you'd like!

Just like with the background, we are going to File-->Open as Layer. Find your first embellishment/clip art. Make sure that this layer is on the top of the list. If it isn't, move it up using the UP arrow. If you'd like the resize it, go to Layer--> Scale... or click the scale button in the tool bar.

[If you need a refresher on manipulating embellishments, revisit my last tutorial!]

A few things I don't think I mentioned in my last post regarding manipulating images, deleting and rotating. If you add a layer/image, but you don't end up liking how it looks, highlight the layer in your layer toolbar. Then, click the trashcan. This will delete your image!

If you would like to rotate an image. Click the rotate button on the toolbar, then click your image. A new box will pop up, and you can use the slider to rotate the image as much as you want!

I'm going to keep my flowers straight. Don't forget, you can move your image at any time by clicking the move button in the tool bar!

Repeat adding clip art/embellishments until you are happy. I added flowers and a bird!

The last step is adding text. If you have a set of letter images/clip art, you would add them like you added the embellishments. I am going to add regular text. GIMP has all of the fonts that you have on your computer. So if you're a font hoarder like me, you'll have a lot to choose from! However, it is kind of a pain, because you can't search for them. You have to type in what you want. A good idea is to use Wordmark to choose some fonts that you might like, so be ready for that.

Click the A in your tool bar, and click somewhere within your header. Type your title. Highlight your title, and then you can change your font, size, color [sorry, I left that out of the screenshot!] and spacing using the box that pops up. Notice that the text becomes a layer in your layer box.

So I changed mine a little bit, but I'm not satisfied. IMPORTANT: You can move the text while you're working on it, but not rotate. You can only rotate it when you're finished editing your text. You can add as many text layers as you'd like.

Here's my finished product! Not the coolest, but it'll do for a tutorial!

Now, you are going to save it like you saved your background. Once as a .xcf, and then you need to export it as a PNG. PNG is sooooo important! If you want the outside to remain transparent, this step is essential!

Now, upload this image to your Photobucket account. Once you've done that, keep that open and head over the Blogger. Go to your layout and edit the header.

Copy the direct link of your image and use that to upload it into blogger. Here's what you might see.

Do you see how it is cut off on the right side? That means we need to make the header smaller. Instead of going back into GIMP, we are going to fix it in Photobucket. SO much easier! So head back over to Photobucket, and click edit. Once you've clicked edit, go to the bottom and switch to advanced editor.

Now, you can change your image size. This will depend on the width of your blog and your personal preference, but I changed mine to 860 x 350. Then, you will save it again. Make sure it is a PNG so that you can keep your pretty edges! You may need to do this a few times to get your header exactly the size that you want it!

Upload this new, updated header onto your layout. And you're finished!

Phew! That was a lot of work. But it is SO worth it when you look at your pretty blog, and it is something that you are proud of making on your own!

This post was also supposed to be about making a button.

Here's the thing! You make a button in the same exact way, but it is obviously just wayyy smaller! In GIMP, start out with an image that is about 200 x 200 and go from there! [[Or, you can make it in Word if you want it to be a simple square/rectangle, like most buttons are. Here's that link again!]]

And I have to outsource when it comes to coding again, because I still can't get it to show up. But here is a great website that tells you how to upload your button with a grab box!

I hope these tutorials continue to help you. Not getting much feedback, but thanks to those who have commented! It is very much appreciated!

My next tutorial will be Blog Tutorial 4: Customizing your Tabs and Gadget Titles.