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
This is also a pretty old article, but the methods shown
for animation still should work.
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
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
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
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
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
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
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
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
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.
Increase ad revenue 50-250% with Ezoic
More Articles by Tony Lawrence
Find me on Google+
© 2011-05-06 Tony Lawrence