The Gimp

© March 2000 Tony Lawrence

The Gimp is an Opensource image manipulation program. See Grokking the Gimp by Corey Bunks for more complete usage information; this article is just an introduction to some of its most basic capabilities.

The www.gimp-savvy.com site supposedly has this book available on-line under an "Open Publication License". I haven't been able to access the site as of yet.

This is also a pretty old article, but the methods shown for animation still should work.

Translation

One of the simplest uses of the Gimp is as a translator. For example, I use a fax to email service (Jfax). Faxes come into my email as attached files, but they are TIF images, which can't be opened by the Netscape 4.7 I use on my Unix desktop. However, I can simply open them with the Gimp, and immediately do a "Save As" to convert it to a a GIF. To do this, just left click on the image and choose Save As from the File menu. All you have to do is type in a new name and use the extension ".gif"; the Gimp will automatically convert it.

Animation

Ever wonder how those animated banners are made? Well, they are just a special kind of .gif file, and you can make them yourself with the Gimp. Here's the very first animated gif I made with the Gimp; it's deliberately a little crooked so that I can later show how easy it is to fix alignment problems: View Gif (click your browser's Back button when you are done).

How do you make something like that? It's not hard at all. First, start by creating a new image (File->New). Choose an appropriate size and check off RGB and a white background.

The Gimp can help you get windows like this from your desktop into web pages. I created this by running "xwd > /tmp/newfile" in an Xterm, and then clicked on the Gimps New File dialog window that I already had open. I then used the Gimp to open /tmp/newfile and saved it as /tmp/newfile.gif. These images are fairly small, so it doesn't slow down loading very much to include them.

Here's your new, empty image. If you right-click in it, you get a menu from which you can select Layers->Layers and Channels, which looks like this:

Right now, this image has only one layer. Layers are useful for all sorts of things in the Gimp, but they are critical for animation: it's the different layers that make the animation work. So the first thing we'll do is add a new layer.

Right-click on the "Background " text (in blue highlight), and a new menu will pop up. Choose "New Layer" and now you'll have this. Be sure to mark the layer "Transparent" if it isn't already. Leave this layer window open while we complete the rest of the work.

Next, go back to the tool bar and click on the "T" (text) box. If you have some free hand drawing ability, go ahead and use a brush tool instead, but I'll stick with the built-in text.

When you click in your image with the "T" tool chosen, this window appears. Notice that you can select different fonts, and can control the size of the text in pixels or points. You can do that even after typing some text, though you'll have to select another button on the form to get the changes to display. Once you have the text you want, click OK and the text will pasted in. But if you've followed this text exactly, it will just be the outline of the text, and a new line will have appeared in the layers window (if not, it's because you either didn't make the new layer, or you made the background layer active by clicking on it before you selected the text tool. You could fix this, but it's probably easier just now to start over).

The "float" stops all further work until you do something with it. Your choices (which come up when you right click on the "Floating Selection" text) are to Anchor it (which makes your letter appear in the current Layer) or to create another new layer. In this case we'll choose to Anchor it, and your Text letter now appears in the image.

Don't worry if it isn't just where you want it, we can fix that later.

But there is one thing we want to do that will just make things less confusing later, and that's to name the layer.

You do that by left clicking on the "New Layer" text and typing in another name. While we're here, we can also add timing information for the animation by adding that in parentheses after the name. So we'll call this "First Layer (800ms)". Make sure there is no space between "800" and "ms" (milliseconds). If you leave a space, this will not be recognized as timing information. You can also name layers as you create them, or change their names at any time. However- once you've saved this in its final form, the names you chose will not be there when you bring it back. If you have a complex project where you want to save this information, you need to save it separately in the Gimps native format (XCF).

Now we just want to continue adding layers, putting letters into them, and naming them with timing information in parentheses. You can, of course, add several letters in one layer. Again, don't be too concerned about positioning; you'll be able to fix it up later.

As you may have realized, you can skip the step of adding layers by selecting"New Layer" when it's time to place the float. It doesn't matter how you get there; we just want to end up with several layers.

So you'll now have something that looks like this. I'm sure you've noticed the Eye symbols to the left of each layer; if you click all but one off, your image will show only what's on that layer. Leave two on, and you see just those two layers. That's useful when you want to adjust the position of text in a particular layer.

To do that, select the Selection Tool from the Tool bar (with only the layer you want to work on having its Eye clicked on) and enclose the text you want to move. Then click inside the selection and you can move it to wherever you want. If things get frustrating, delete the text and start over with the Text tool. Turn the Eyes on and off to judge your overall progress. If you want, add a final layer with a White background. When the Eye for that layer is on, that's all you'll see in your image, and when the animation runs, it will be your final frame.

There is one more thing we have to do before we can save this as an animated gif. The image has to be "indexed".

Right-click on your image, and you'll find "Indexed" under "Image". That will bring up the pallette options shown here; you probably want to choose the "WWW-Optimised Pallete" unless you are sure everyone viewing your gif has high performance video cards. After doing this, you can do your "Save-As" to convert this to a .gif file. Call it up in your browser to see it work (there is also an animation play-back tool built into the Gimp if you want to check on it while working).

While your first attempts may be clumsy and difficult, the Gimp gets more familiar with practice, and you'll find that you can whip out simple animations in seconds. Adding graphics isn't all that difficult, either, so anyone with a modicum of talent (that wouldn't include me, but perhaps you fit in that category) can turn out very nice results with a small amount of effort.

I wouldn't normally plug the same book twice in one article, but if you are going to do any amount of graphics work, Grokking the Gimp by Corey Bunks is well worth its cost.

Got something to add? Send me email.

---

Have you tried Searching this site?

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us