My first GIMP tutorial
This tutorial presumes a prerequisite knowledge of using individual images to create simple animate GIFs in the software program of your choosing. If
you do not know how to make these, see Druid42’s great tutorial Here
how to make animations in GIMP.
The following steps will focus on creating individual image frames for an avatar animation that will precisely overlay and blend in with an existing
The most common request I see is to makes someone’s eyes blink, squint or otherwise move, so I’ll show you how to do that for a simple example of
the process. Once you learn the basics, you can create a wide variety of creative overlay animations.
Start by opening up a standard 180X480 background image in GIMP.
Now, you’ll need to carve out the area of the background that you will be working with to make your animated avatar. THIS IS THE MOST CRUCIAL
STEP!!! If you don't get this right, the avatar and the background won't line up.
Using the “rectangle selection” tool, start the selection precisely at the coordinate for one of the following points, based on your custom title
example one-line custom title...
No custom title or one-line custom title: start at 4,57
Two line custom title: start at 4,71
Moderators: start at 4,69
Hover over the image with the rectangle selection tool until you are precisely on the appropriate coordinates described above, then click and drag the
selection down and to the right until you see “170x240” at the bottom right of the window... then let go. It should go something like this...
drag down and to the right...
Now, copy that selection into memory. [CTRL-C]. You’ll paste it into a new window in a second.
Next, Open a new image [CTRL-N] with a transparent background.
Then paste the contents of your selection in memory into the new image window [CTRL-V]. This will make it so the the background behind the image is
transparent, which is important for the next steps.
This is your new “canvas” to work with for the overlay animated gif frames. Be careful not to move the image around at all during the rest of the
process, as that will cause it to be out of alignment with your background.
Next, you’ll want to erase everything but the section you want to alter and animate. Do this by using the “eraser” tool.
The more you erase, the smaller the file size is going to be. Since I’m only working with the eyes, here’s what it looks like after all the
erasing is done…I could to even more, but it doesn't matter that much, as everything is going to line up perfectly.
Next, you need to do whatever alterations you want. In this case, I'm just going to do do a simple eye blink.
I usually zoom in and work with the color picker tool and a simple small-pixel paint brush. But you can use the clone tool, free-select… whatever
you are comfortable with to make your alterations.
So, I ended up with this blinked eye…
Once you are happy with the image, save it as a .gif and use it along with a transparent 170x240 .gif to create a simple 2-frame animation in your
For my blinky eye, I used a 170x240 completely transparent gif as frame #1 and a .15-second delay on the image I just created in this example as frame
#2 to create this animated gif that sits nicely over my background and blinks once every 5 seconds.
edit on 21-5-2013 by Zarniwoop because: (no reason given)