5 replies to this topic

[Lancer]

This is a very simple technique which even young school children can manage... use the method in class if you like (but show them for real rather than making them read something; they will pick it up a lot faster). I am using Gimp 2.4 for this tutorial.

When saving layered images in GIF format, the Gimp knows how to prepare them in a special way which will work automatically on websites. I recommend you are moderately familiar with the Gimp and at have at least a basic understanding of layers to follow this tutorial.


Part 1: Get Ready
1. Start a new image in Gimp
2. Make sure the layer window is showing (if not, hit CTRL+L or go to Dialogs => Layers in your image window menus)
3. The default layer is called "Background". It is in bold and has some special properties like not being able to be switched around (up or down) with other layers. I usually delete this layer because not being able to move it becomes a pain.
4. Make another layer white (not transparent) layer and name it "frame0001"

Part 2: Draw Your Frames
5. Draw the first frame of your animation on the main workspace window, this layer will be "frame0001", which is the very first fame of our animation.
6. To make the next frame, hit the "Duplicate Layer" button. Gimp will automatically name your new layer "Frame0001 copy". Double click the name to rename it as Frame002
Note: it is important to know that Gimp animates the layers upwards, that is... the first frame of your animation should be at the bottom bottom of your layer stack.
7. Redraw the next frame by making alterations as needed. Do NOT use the eraser tool, as this will poke transparent hole in the frame, showing what was on the last frame below it in your working window, bu not necessarily in the final animation (depending on layer name... see Part 5 step 12). For now, it is better to paint over in white.
A useful tip here is that by utilising the Opacity slider of your layer, you can see through to the previous frame. Be sure to move the slider back when you are done and be aware that whichever layer is highlighted, is the one you are currently painting on.

Part 3: Preview Your Animation, Touch Up Frames
8. In your image window, go to Filters > Animation > Playback
9. In the new window which appears, push the PLAY button.
The timing will probably be wrong, and you may spot things on frames you need to fix. Note that there is also a single frame step button... very handy.
10. Go back to step 6 and make adjustments as needed You do not need to reopen the Playback afresh each time, it will update automatically. You may have to use the eye icon on layers to hide the top ones temporarily so you can see what you are repainting on lower frames. Thankfully, hiding frames does not affect them showing in Playback, so you can work on lower frames and preview the animation at the same time without having to unhide everything.

Part 4: Fix the Timings
At this point, you might want to SAVE your work as the next stage is going to rename your layers. Use XCF format.
11. Go into the image window menu through Filters > Animation > Unoptimize. This will create a brand new Gimp file, but the layers all have (100ms)(replace) added to their previous name. The ms means milliseconds (1/1000 of a second) and is how long that frame should last. So, if you want a particular frame to hold for a second, double click the layer name and change the value to read (1000ms)(replace).

Part 5: Optimize the GIF and Save
Finally, you are happy with the timings and the look of your animation. It's good, but it's not efficient in terms of filesize. It's a waste of resources to redraw the whole image every frame when some parts don't move.
12. This time, go through Filters > Animation > Optimize (for GIF)
The resulting new file is specially made so that only what is needed to be replaced gets put on every layer. Notice that the layer names have changed from (replace) to (combine). This means that the new layer is combined over the top of the old one. In other words, a layer marked "combine" treats transparent areas as "see through" to the previous lower layer, whereas "replace" means to draw each frame afresh. This can be confusing to work with so I recommend you don't bother with transparency for your first animations.
13. Save your new work as GIF. Go through "Save as" so it asks for a name for the file. End the filename with .gif (e.g: myanimation.gif)
A box will appear asking whether you want to "Merge Visible Layers" or "Save as Animation". Choose the Animation option.
I usually keep my backup copies in Gimp's default .xcf format as other formats in case Gimp changes some of the colours or compress images to a poor quality, which can happen because of the filetype.

You are basically done. Put the animated GIF on your website and it should just work.

Please vote, and let me know of any errors you spot, or just anywhere I'm unclear so I can make appropriate alterations.

Edited by Lancer, 08 September 2008 - 11:08 PM.

[yordan]

Please excuse a newbie in this field, I'm interested in learning how to make animated gif's.
Do you mean that during the animation, the frame Frame0001 is first shown, after that Frame0002, Frame0003 ?
You also say that there is transparency effect, does that mean that you see all the layers at the same time ? Or do you see Frame0001 under Frame0002 only if you use the eraser ?
Regards
Yordan
--------------
P.S. Talking about young school children, could you please edit your post and correct your mistyping ? For instance replace "how to prepate them" with "how to prepare them"

[Lancer]

Do you mean that during the animation, the frame Frame0001 is first shown, after that Frame0002, Frame0003 ?

Yes, but the Gimp does not actually care what you name each layer. It plays them in order showing the bottom layer first, then working up through the stack. I just number them out of habit because it's "tidy" and makes it clear to the anyone editing the file which order they are in, and also anyone offering advice about improving an animation can specify exactly which frames are affected.

You also say that there is transparency effect, does that mean that you see all the layers at the same time ? Or do you see Frame0001 under Frame0002 only if you use the eraser ?

Transparency was something which I didn't want to get into because it could make the tutorial too long and confuse people. The tutorial is written assuming that no transparency is wanted for every frame, like a flipbook with solid pages, so your animation will have each frame in a white box. Of course, GIFs can handle transparency, so that your dancing banana could be floating in front of your website background. Using (replace) for any frame means that fame is drawn completely afresh whereas (combine) shows the lower layers through any transparent holes. If you make a transparent GIF, it looks confusing in the Gimp because you would see all the layers in the workspace window at the same time. The eraser tool punches a transparent hole in your layer showing what is in the next layer down (or previous frame) so I recommended to avoid it at this stage and just have no transparency.
If you would like to use transparency, I recommend you mark it in an unused colour (e.g bright red) while working on your base animation. When your animation is done, you can use the magic wand tool on these areas (or "select by colour") to select these area and delete then with "cut" (CTRL+X). You would have to do this for each layer as well as having to set each layer to (replace) and... well there's plenty of stumbling blocks. Experimentation will show you the way.

P.S. Talking about young school children, could you please edit your post and correct your mistyping ? For instance replace "how to prepate them" with "how to prepare them"

Yeah thanks. I cut my left index finger with a craft knife in class some time ago and the nerves are damaged; my keyboard spelling dropped bigtime and occasionally things like that seem to get by my spellchecking. I didn't have much time to include screenshot images which is what I would consider if presenting the tutorial to school children. Onto it now, thanks.

[Libensborn]

Well, at least makes it a bit easier than using Photoshop...or at least it seems like it is.

Nice tut