For this tutorial, I'm just going to show you how to make a simple banner with a border, the winner's bimbo, and what place they won / their name / etc. Like this:




First off, this: http://www.gimp.org/downloads/
Paint is kind of doable, I guess, but GIMP will make your life easier.
It's like Photoshop, but free.

Once you've got it download and set up, open it up.

Go to File > New...



Adjust the numbers to manipulate what size your image will be.
I normally make mine 250x200, but you can make it any size you'd like.
Press OK.

Make your image whatever color you want - this will be your border, so keep in mind that the edges are the important part.
You can use the bucket fill tool ( ) to make it one solid color, or use the paint tool ( ) to use multiple colors. If you use multiple colors, I suggest to smudge them afterward so that there's a smooth transition between the colors. To smudge the colors you use this tool ( ). Just play around with it for a bit until you get something you like.

I made this:


Once you've got that ready, select the Rectangle Select tool ( ) and make a rectangle within your picture. The area outside your rectangle will be your border. Try to make it as even as possible. It should look something like this:



Of course, you can make your border as wide or as thin as you'd like it to be.

Now look at the Toolbox.



Change the top box to white, like that is. ( To do this, click on it and click on the white area in the box that comes up. )

Now go to Edit > Fill with FG Color. It should make the inside of your rectangle white - now you're left with a border ! Mine looks like this:



Right click on the bimbo's image you're putting into the banner and choose copy. Return to GIMP and press CTRL+SHIFT+V. This will open the bimbo in a new GIMP window.

In order to get the bimbo to fit nicely into the border, we have to crop the image. Return to your banner and and select the Rectangle Select tool again ( ). This time select the area you want the bimbo to fit into, like this:



Right click inside the rectangle and choose copy. Then return to the GIMP window where you pasted the bimbo and press CTRL+V. The space you wanted your bimbo to fit into should paste into the image.

On the right there should be another box that we haven't yet dealt with. This is the layers box. The bottom layer should be the bimbo you pasted. The top layer should be named Floating Section (Pasted Layer #1). Right click on the name and choose "New Layer..." The name will change after you do this. Now right above where you just clicked it should say "Opacity:" and there should be a line with a little rectangular box at the end.



Drag the little rectangular box down to about 60%. Now choose the Move tool on the toolbox ( ). Click and drag the white box so that your bimbo is "inside" of it. You should be able to see her through the box.

On the toolbox, choose the Crop tool ( ). Click and drag it to create a new box around the old box. Once you have, the rest of the picture will become grayed out. Click somewhere in the rectangle to crop the image.

Look back to the layers box. Right click on the top layer ( Pasted Layer#1 ) and choose "Delete Layer." Now you should be left with a cropped image of the bimbo! Press CTRL+C to copy her and return to your banner. Press CTRL+V to paste her into the banner. She should immediately be placed where you wanted her to be, but if she isn't you can drag her there. On the layers box, it should have appeared above your original banner. Right click on it and choose "New Layer."

You're just about done!

Now you'll want to put their ranking & name - perhaps even your name and the contest title / round / etc.

To do this, choose the Text tool ( ). I think it's pretty self explanatory, but once you've chosen it click where you'd like to place text. A small box will pop up and you type into that box what you want it to say on the banner. You can choose from a huge variety of fonts, change the color, the font size, and so on using the bottom half of the toolbar. I think this is the easiest part, but if you're having any trouble let me know and I'll go more in depth with it.

Once you've got everything how you want it, go to File > Save and type in what you'd like to name the file. You've also got to include the file type. I recommend .png - so when you type it in, it should be like BANNER1.png | It will tell you that this format doesn't support layers. Check the "Flatten Image" option and click Export. Press OK on the next pop-up, as nothing really needs to be changed here.

Now you've got a banner !

Here's my final product:



I don't really like it, but I wasn't concerned with creativity - just getting the point across. (x

If anything is confusing you or unclear, please feel free to ask and I will attempt to make it more understandable. If there's something I didn't provide screenshots on that you need, feel free to ask for them and I'll take them for you. Lastly, if you'd like to know how to do anything else to spiff up your banner, ask ! I'll add on to the bottom of this post with requests if I get any - this was just a very, very basic thing and I know people will want to get a little more creative with their banners.



extra resources

PATTERNS/
001

EXAMPLES/
001

Last edited by KaiRuh (07-27-2009 00:14)