By proceeding to accessing this website, you unconditionally agree to its terms and conditions. If not, please stop and leave now.

Home RSS My Browser My Books My Newsletter Contact

Books On Sale

I started publishing books in 2020 and wrote 20 books in my first year. They are available at Amazon (USA, India, UK, Australia and Canada), Barnes & Noble (USA) and BooksWagon.com (India). BookDepository.com (UK) sources from Amazon UK, which has the cheapest prices, but does not charge for international shipping.

World Of Word Ladders Vastu Shastra Explained Ólafia L. Óla's Favourite Traditional Nursery Rhymes (Illustrated) A Really Traditional Alphabet Book 2020 Fresh Clean Jokes For Kids 2020 Fresh Clean Jokes For Everyone Animalia Humorosum Book cover: Dictionary Of Indian English Learn To Ride A Motorcycle In Five Minutes FFMPEG Quick Hacks Linux Command-Line Tips & Tricks CommonMark Quick Reference Email Newsletter Strategies For Profit Book cover: Cool Electronic Projects Book cover: How To Install Solar Book cover: How To Invest In Stocks

How To Create Animations Using GIMP

Learn to create animated GIF cartoons using Inkscape and GIMP.

In an older article, I described how to create cartoons using Inkscape. In this article, you can go further and learn how to create animated cartoons using both Inkscape and GIMP. The output for these animations will be the popular and Web-friendly GIF format.

GIF frames and GIMP layers

An animated GIF file is a collection of image frames that are displayed for specific durations, one after another, to create the illusion of a video. In GIMP terms, each image frame in a GIF file is a layer. If you plan on creating GIF animations with GIMP, you need to create several image layers.

So, what is a layer? Graphic artists prefer to place various components of an image separately in what is known as a layer. This enables them to modularise images. Several layers are placed one over another to form the final image, as shown in this screenshot.

Gimp layers panel

The Layers tab in the right panel showing various layers of an image

If you observe carefully, you will find that each layer has been given a different name. GIMP automatically and generates a unique name for each layer but the graphic artist usually renames them in a more meaningful way. However, when creating an animated GIF file, you do not have to worry about the names for the layers. Instead, you need to pay more attention to certain extra information that are suffixed to the layer names, i.e., frame disposal and frame duration.

GIF frame disposal and duration

Frame disposal tells the GIF-rendering application (usually an image viewer or a Web browser) how to display a new frame over the previous frame. Frame duration specifies exactly for how long a frame needs to be displayed.

In GIMP, frame disposal is specified by suffixing the layer name with "(replace)" or "(combine)". The first suffix option "(replace)" totally clears the previous frame before displaying the current frame. The second suffix option "(combine)" ensures that the current frame is merely pasted over the previous frame. The second option allows you to make cumulative changes over several frames and restrict background content to just one of the previous frames. The frame duration is specified in microseconds. For example, to display a layer for a second, you need suffix the layer name with "(1000ms)". Putting it all together, if you want a layer named "Frame 3" to totally replace the previous frame and be displayed for half a second, you will have to name the layer "Frame 3 (replace) (500ms)".

Layer names

Frame duration and disposal are suffixed to the layer name

It is not necessary to specify these suffixes manually. When you export a .XCF (GIMP project) file to .GIF format, GIMP will show a dialogue where you can specify the settings for the layers en masse or globally.

File save dialog box

The 'File - Save As' or export dialogue box (for GIF files) in GIMP

Here is the GIF animation created using GIMP using the screenshots of the Bing web page.

Bing Website Animation

Animation created using screenshots of a web page

Cartoon creation in Inkscape

For this article, I decided to create a jumping frog animated cartoon. The cartoon was created in Inkscape and assembled as a GIF in GIMP. The frog cartoon was created in Inkscape.

Frog vector image in Inkscape

The frog drawing (vector image) was created in Inkscape

In Inkscape, I selected all shapes of the frog and made them part of a group (by selecting Object - Group from the menu). This made it easier to duplicate the frog (Ctrl+D) and create different stages of the frog in motion. In each stage, I made changes to the frogs legs using the Node tool. The body of the frog (i.e., excluding the legs) was in a sub-group. This sub-group remained as a whole in all stages and was not modified. However, its position and orientation to the legs was changed. At this stage, the Inkscape drawing with different stages of the frog in motion was exported as a PNG image file.

The frog in motion

Several stages of the jumping frog were created in Inkscape and exported to PNG (raster) image format.

GIF assembly in GIMP

I then opened this PNG file in GIMP, cut the various stages of the jumping frog and placed them each in a separate layer. I added a vertical visual guide and aligned the frog's eye to it in each layer. This would create the illusion of the video camera following the moving frog. I saved the image to GIMP's native file format (.xcf extension).

Frog animation assembly

The frog stages were cut from the PNG file and assembled as separate layers in GIMP

To test the animation, I used the Filters - Animation - Playback menu option. The PNG image I exported from Inkscape was a huge one. GIF files are usually small. Hence, I downscaled the XCF image (without saving the file) and exported that to GIF format. In the save/export dialogue box, I set the global frame disposal to "replace" and the global frame interval to 100 milliseconds.

Getting creative with GIFs

I also created another GIF animation with the same layers. This time, I spread them out linearly so that it appeared like the frog was moving across the screen.

Frogs animation in GIMP

The layers were moved linearly

Then, midway in the layer stack, I introduced another frog. Hence, half the frames had two frogs. This made the animation appearing to have an endless stream of frogs.

Frog Animation 1

This animation has a frog moving linearly across the frame

Frog Animation 2

This animation follows a moving frog within the stationary frame

Frog Animation 3

This GIF animation has several frogs following the one before across the frame

Stealing ideas from other GIFs

GIF files do not need to be animated cartoons. GIF does not care what is in the frames. As you can see in Screenshot 2, GIF frames can contain screenshots or even photographs. However, remember that the GIF format uses a 256-colour palette and rich colours will be downsampled. Still, for what it is used (Web graphics and non-interactive animations), GIF is a good option.

And, just as Web programmers use the hallowed View Source option to learn cool tricks from others, you can also open downloaded GIF files in GIMP and learn from the experts in the field. If you prefer to go that way, then be sure to change the colour mode Indexed to RGB (View - Mode). If you forget to change this setting, then the image colours will appear like they are read-only.

Notes