Gimp Tutorial 2: Making Graphics For
A Free Site Or Tgp Gallery

The Gimp is a freeware image editor - and it's actually a very good one. Don't let the freeware price tag fool you. This is a powerful tool which can achieve most of the things that some of the more expensive options can do.

The install process for the Gimp is a bit fiddly, but please bear with me and don't let this put you off. It's an amazing bit of software and it's free.

1) Download this file:
http://www.topniche.com/newbie-booster/resources/gimp/download1.zip
And run the setup file.

2) Download this file:
http://www.topniche.com/newbie-booster/resources/gimp/download2.zip
And run the setup file.

3) Download this file:
http://www.topniche.com/newbie-booster/resources/gimp/download3.zip
And put gif.exe in:

c/program files/GIMP/lib/1.2/plug-ins/

Making a logo with a cool gradient

There's a lot of 'fast tools' out there which will create all kinds of logos for you. You can use something like http://www.flamingtext.com/ to rustle up a pretty impressive logo for your site in a matter of moments. But there are times when you might want to do something a bit more advanced. You might want to say create a graphic logo and some navigation links for your site that uses a font that's not included in the online tool. So today we're going to break away from that and make a graphic ourselves - 100% from scratch with the aid of our faithful Gimp.

Here's an example, which I made to show Trey:


The advantage here was that I wanted to use a font from my computer to give the logo an Asian-site type feel. You could use ANY font for this logo - and even make a matching ENTER link, set of buttons, tours, or some kind of advert. It's very difficult to get browsers to use the right fonts, but even the oldest of old browsers can read a good old-fashioned GIF. Once you've mastered this - you can use it throughout your time as an adult webmaster. I've used it on countless sites and pages.

OK - let's get started.

1) Fire up the GIMP!

2) Start a NEW file by going to File -> New.

Speedy shortcut: Press and hold Ctrl on the keyboard and press N.

There will be a number of windows open when you start the Gimp - that's how this software works... pretty cool! But the window with the File menu on it is the main tool box. It will something like this:



It's actually a good idea to close all the extra windows / panels in the gimp except for this one. This is the toolbox and it's the one we'll be using.

3) You'll come to this screen:



The only two boxes we're concerned with here are the very top two which say WIDTH and HEIGHT next to them. We're going to set up a new, blank document to work on at this stage. Let's make this larger than we need it so there's plenty of room to play with. Set the WIDTH to 700 and the HEIGHT to 300. Then press OK.

4) When that's done you'll have a blank document open and ready for some serious creativity.

The next thing to do is to make sure that we're viewing the image at actual size. On the keyboard, press the + a couple of times. You'll see the image ZOOM bigger as it's magnified on the screen. Then press the minus (-) key a couple of times. Note that % is shown in the document's title bar. Zoom in or out until the image is shown at 100%. This zooming business comes in handy on some graphics work and it's useful to know how to use it.

5) Next step is to set the background color. To do this, click on the background color chip in the toolbar:



6) You'll get a juicy color wheel where you can select the color for the background. This bit is important. We need to set the background color to the exact same background color that our webpage will be. This is pretty easy with the Gimp, because it has a box on this screen where you can add in the 6 digit color code. If you view the source code of your webpage in an HTML editor, you should be able to find the background color pretty easily. THAT's what we need to insert into this box. If it's a black background, then it's a lot easier. Just set that color to 000000. White would be ffffff and so on. Spend time getting the correct background color in here.

Pixie will help you find your background color easily:

Pixie Tutorial

For the purpose of this tutorial - set the background to BLACK...

7) Press OK once you've chosen the correct background color.

8) Now we need to fill the image with that color. That is done with the following steps.

- Make the blank document active.
- Right click on the blank area anywhere.
- Go to Select and then All
- Right click again
- Go to Edit and choose Clear
- Right click again
- Go to Select and choose None

Speedy keyboard shortcuts:
Ctrl + a
Ctrl + k
Shift + Ctrl + a

9) Now it's time to add the text. The Gimp has one of the best text tools I've used on any graphics software. In the control panel, click on the 'T' tool:



Then click on the blank document where we just set the background color. This brings up the add text window.

10) There's three parts to this stage, and they're both good fun.

- Typing your text.
- Picking the font.
- Setting the size.

The beauty of the gimp is that it will show you the font style as you click on it. Type your text into the very bottom box and then work on choosing a font. Then play with the size until it looks like it will fit into your document / is the right size. I'm going to make another Asian logo with my Bamboo font. When you're happy with the font and size, click OK.

11) Make sure the text is on the screen somewhere - and it's not running off the edge of the page. Move the cursor over the text and you'll see it turn into a cross. If you then click and hold the left mouse button, you'll be able to drag this text anywhere you want it to go.

12) Now we need to get a gradient going here. This is one of the great things about graphics software, and learning to make this kind of logo. YOU get to pick everything about the image and have 100% control over it. Go to the toolbox and first click the foreground color chip (just as we did to set the background) and pick any color you like. Then repeat the process and click on the background color chip. These are the two colors that are going to form our gradient. You can change these later - for now pick a bright RED and a bright YELLOW.



13) And then click on the gradient tool in the toolbox:



14) Then go back to the document with the text on it. This is the hard part. Move the mouse pointer to the top of the letters - the very tip. And then hold the left mouse button down. Then drag the mouse to the bottom of the letters:



15) Now the software should have filled the selection with a gradient.



This is starting to look gooooood! If you're not happy with the gradient - do it again until it looks the way you want it to. If you need to change colors - go back to step 12 and do it all over again. You're in control here.

Try pressing CTRL as you drag the line downwards - this will restrict the gradient to an angle and is a good way to get a really nice, straight gradient.

16) When you're happy, press CTRL + H to make it happen. You're now out of the gradient mode.

17) Nearly there! Now right click on the image and go to Tools, then Transform Tools, then Crop and Resize.

Speedy keyboard shortcut: Shift + C

18) Spend a bit of time choosing the area you want to keep. Drag the corners around until you're happy with the image. Get rid of as much of the blank areas that you can:



19) When you're happy, press OK.

20) That's it. To save the image:

- The image is currently in RGB mode. We need to make it Indexed color. Press ALT + i and then press OK.
- Then right click the image, go to File and Save As.
- Save the image as logo.gif or whatever you prefer.
- Press OK.

Check the image's size. If you need to compress it further for speed - check out this tutorial:

Optimizing GIFs tutorial (Animated and Static)

Here's my image:



The Gimp saved it as 5kb - so that's fine with me. Anything of around 5kb - 10kb for a logo and you're doing fine.

Homework!

Here's something fun that you might want to try...

- On your next TGP gallery or Free site, pick a THEME.

Read this if you're not sure on that one:

Waking surfers up with a THEME

- Choose a font for the theme eg. a futuristic font for a space girls site / gallery.

- You might want to DOWNLOAD a font (search google for 'free fonts').

- Then:
For a free site: Make a logo, enter link, and gallery links using the method described in this tutorial.

For a TGP: Make some simple ad graphics and integrate them with text ads to make the gallery look unique and exciting.

If missed my tutorial a while back on using the 'the Gimp', you might also want to have a look at this one:

Gimp Tutorial 1: Making A Pro Banner

Hope this helps.

TOM ^"^

ICQ 12616560
Email tom@tomsnewbiebooster.com

Enter TOM'S NEWBIE BOOSTER

">

---