Druid's Gimp Animation Tutorial:
Using Gimp to create animations may seem mysterious, but this tutorial will attempt to outline the basic procedure involved, and explain how Gimp is a
very nifty tool for making .gif files. The possibilities are only limited by your own imagination!
The primary reason for creating this tutorial is to explain a easy way to make animated avatars with subtle effects for people who normally sport a
profile background, but want to add a bit of animation to it. I'll explain a technique to make a lizard walk across your screen every five seconds.
The end result is an avatar, ready to go into your avatar spot, without changing your background image. The effect is sure to make members do a
double take, as the little guy is quick, and you won't really see him the first time, but your peripheral vision will.
I found this little guy somewhere on the internet, after googling a bit.
He came from a free animated gif site, and there
are many to choose from. Using a pre-built gif simplifies things, and this one is only 4 frames, with a total file size of 4.1kb. Remember,
avatars, animated or not, must be no larger than 75kb.
The first step is to open Gimp, and you'll see three windows appear:
The Layer Window:
And the Main Window:
Start by clicking "File", and "New".
You'll want to change the image size to 170 by 240, the dimensions of an avatar. Go to Advanced Options, and where it says fill with, pick the
transparency option. Then, click OK.
You'll get a blank slate to start working with.
Your Layers window will look like this.
The first step is simply to duplicate that layer. Right click, and got to Duplicate Layer.
Make 5 new layers, for a total of six.
Since our little friend is four frames, it'd be a good idea to open him up in Gimp as well, as we'll be borrowing his frames to create our own
Time to start copying frames back and forth. You can use keyboard shortcuts, or right click edit copy, but the point is to take the first frame and
place it in the second layer. Leave the first one blank at this point in time.
until the window is full-o-lizards.
The Layer window will look something like:
We are almost done with our very first Gimp animation!
Time to check it out.
Go to Filters in the Main window, and scroll down to animation and playback,
and you'll get an animation playback window:
This is very useful for testing and tweaking animations.
Well, that just makes a screen full of lizards, so we need to edit the layer attributes. Right click on a layer and scroll to edit layer attributes:
I edited the first frame already, and renamed it from Background to Frame 1, and added in an important animation attribute, (5000ms), which happens to
be a 5 second pause. (10000ms) would be a 10 second pause, etc.
The second frame needs a little more work:
I'm calling it Frame 2, adding in a wee delay (200ms), and also adding in the
(replace) attribute. I want the lizard to disappear, and be replaced by the one in the third Frame.
This is what it looks like with all the attributes properly edited.
This animation starts at Frame 1, pauses for 5
seconds, and then goes to Frame 2, pauses, then erases it, on to Frame 3, etc.
Go back to the Animation Playback window and test it out again:
Ok, so let's save it.
Now we go to File, Save As:
Be sure to rename the file, and select the file extension. We want it to be a .gif, so it
isn't flattened. Once you click save, Gimp will want you to Export.
Make sure to Save as Animation! Click Export, and
you are all done.
Here's the final product:
edit on 2/28/13 by Druid42 because: FINAL FILE SIZE? 4.2kb!