How to Make an Animated GIF Image with GIMP

gimp   How to Make an Animated GIF Image with GIMPAnimated GIF images are a great way to attract attention to certain parts of your site, create simple but effective banner ads, or simply have fun. Memorializing your favorite scenes from movies in GIF format is a riot.

However, there are not very many good GIF editing programs available for free. Those which are available for free usually have some pretty hefty strings attached, such automatically placing a watermark on the image or requiring that the image size be below someĀ ridiculousĀ standard. Those animated .GIF programs which are truly free are usually web-based GIF maker apps, not tools which exist on your computer.


Luckily there is a powerful tool for creating animated .GIF images which doesn’t cost a dime. GIMP, the popular free image editing software, has the ability to create animated GIFs. Below are step-by-step instructions on how to make animated GIF images on GIMP.

Step 1: Starting Your GIF

In this tutorial, we are going to create a simple .GIF image in which we’ll have the words “This is how you make a .GIF image” appear in succession one by one.

To start go to File and then click on New. Create an image which is 300 pixels wide andĀ 100 pixels high.

Now, go to the Text Tool in the toolbox. It is represented by the large ‘A’ icon on the right side of the GIMP Toolbox.

gifwithgimp   How to Make an Animated GIF Image with GIMP

Click in the upper-right corner of the image. This should open a small window called GIMP text editor. Type in the word “This.”

Now go to Layer and then click on Duplicate Layer. Use the text editor again to include the word “is” after “This.” Duplicate the layer again and then type the new word, “how.” Continue this process until you have the entire sentence “This is how you make a .GIF image.” Don’t worry about having the words perfectly aligned – this is just a test, after all.

gifingimp2   How to Make an Animated GIF Image with GIMP

Step 2: Creating the Animation

You now have a .GIF image with numerous layers. This is the basis of what you need to create an animated .GIF with GIMP, but you’re not quite there yet. Right now, you just have an image which will display the text all at once.

First, let’s view the basic animation of your .GIF by going to Filters > Animation > Playback. Click on Play in the upper left. The animated .GIF will play back fairly rapidly, looking something like this.

giftest   How to Make an Animated GIF Image with GIMP

That’s way too fast for most .GIF images, so you will probably want to play with the timing a bit. There are two ways which you can do this.

Step 3: Manipulating Your .GIF

The easier way to change the timing is when you actually create your .GIF image. Go to File and then Save As. When you are prompted for a file name make sure you add .gif to the end of the file name. You will be prompted with a box which will ask if you’d like to flatten the layers in the image or convert them to animation. Click on the option to convert them to animation.

The next screen will have an option called Delay between frames where unspecified and then a number field. Change this field from 100 to 400 and then click Save. You will end up with something like this.

giftest2   How to Make an Animated GIF Image with GIMP

Much easier to read, isn’t it?

However, you may decide that you’d like to change the length of each frame of the .GIF individually. If you decide to do this you’ll need to edit the layers

Go to Windows > Dockable Dialogs > Layers. This will open the Layers window. Each individual layer in the .GIF file will be shown here. Right click on the first layer, which is called This, and click on Edit Layer Attributes. Type in the text (100ms) after the word ‘This’, then click Okay.

gifwithgimp3   How to Make an Animated GIF Image with GIMP

Do this for each layer after words, but increase the number by 100 each time. Now save the file as a .GIF, and make sure that the layers are saved as animation. You’ll end up with a .GIF where each word appears slower than the one prior, such as below.

giftest3   How to Make an Animated GIF Image with GIMP

These are the basics you need to know in order to create .GIF images with GIMP. By manipulating the timing of each layer, you can create very intricate .GIF images which are customized to fit your needs. Forget dedicated .GIF programs – GIMP can handle your animation needs without a problem.

Questions? As usual, let them loose in the comments.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

9 Comments -

AriesWarlock

Good stuff, Matt. Keep the Gimp tutorials coming!

Alex

Ooh, I might actually use GIMP now…

batik

Thanks, this is what i’m looking for. Yup, Keep the Gimp tutorials coming.. :)

DeadlyDad

Personally, I use Image Magick for my GIF’s. I can make a very basic animated GIF by simply typing ‘convert *.jpg anim.gif’, and there are lots of examples of more complicated setups here: http://www.imagemagick.org/Usage

Aibek

thanks for sharing, will check it out.

DeadlyDad

Personally, I use Image Magick for my GIF’s. I can make a very basic animated GIF by simply typing ‘convert *.jpg anim.gif’, and there are lots of examples of more complicated setups here: http://www.imagemagick.org/Usa

Erin E

We tried using GIMP to make quick and easy wireframes for a client. We blogged about it, giving a list of tricks.
http://blogs.perficient.com/portals/2010/06/07/gimp-for-quick-and-easy-wireframes/ It’s really a great tool under certain (not uncommon) constraints.

Erin E

We tried using GIMP to make quick and easy wireframes for a client. We blogged about it, giving a list of tricks.
http://blogs.perficient.com/po… It’s really a great tool under certain (not uncommon) constraints.

Michael

Thank you very much!