How to Create an Animated GIF in GIMP
By comp3820
Have you ever seen those moving pictures on forums? Not the videos, of course, but next to people’s names you’ll sometimes find a picture with repeated motion. These are called animated gifs. They aren’t too hard to make, they look great, and you should try to make your own sometime! This is how you can do it.
Animated GIFs follow the basic principle of videos, but they don’t take it nearly as far. Essentially, they string together several frames to make a simple repeated motion. For example, you might see a horse running, or a plane flying. These are motions that are easy to show by playing the same frames over and over.
To get started, you’ll need an image editing program. You can use Photoshop, but GIMP is free, so that’s what I’m going to show you on. Go to www.gimp.org and download the latest version. It’s free, easy, and actually quite a bit of fun.
Now that you have the GIMP, you need an idea of what you’re going to animate. A very simple idea might be a ball bouncing, or some text glowing. As long as you can understand how the motion works, you’ll be fine.
Once you are in GIMP, you’ll need to create a new file. Go to File->New, and select the size you want. It doesn’t really matter what size you make, but bigger usually better because of the higher quality (and you can always make it smaller later). Under advance options, next to “Fill with:” click transparency. Then click OK.
The next thing you need to do is either draw your first frame, or insert a picture into GIMP to start. I’m going to do a bouncing ball, so I’ll just draw a circle and make it look nice with a bit of polish.
What I’m going to do is use the circle selection tool, on the upper left of the toolbox, and hold down the Shift key while I click and drag. This will create a perfect circle. I’ve only selected the area, though, so I need to fill it in with a color. I can do that by clicking the paint bucket, and clicking inside my selection. I can choose the color I want by clicking the square about halfway down t he toolbox window, and selecting the area of color that I want.
I can make it look a bit more realistic by going to Filters->Light and Shadow->Lighting Effects. This will make it look 3D, which will be all the better for the animation when I’m done.
Now we need to make our object move. We can do that by creating a new frame, or layer, in the current image. In the “Layers Channels and Paths” window, look for the box that displays your layers. There should be one layer already, called Background. That’s the one that you are working on now. Right click on that layer, and click “Duplicate Layer.” Now we have two layers.
Here is the process that you are going to use to make the animation:
1. Create an object (we did that already).
2. Duplicate the layer you’re working on.
3. Click on the original layer.
4. Move the object in the direction you want it to go.
5. Repeat Steps 2-3 until you have a satisfactory range of motion.
Once you are satisfied with your frames, go to File-> Save As. Insert a name for your image, then go down to “Select File Type.” Make it a .gif image, and then click save. GIMP should tell you that you have to export the image, and will ask you to flatten it or create an animated gif. Click the button that says “Save as Animation”, and then click export. You’ll get yet another dialogue box asking you some more specifics. Here you can set the frame rate (a higher number makes the animation go faster), and add a comment. Where it says “Frame Disposal where Unspecified,” click on the “One frame per layer (replace)” option, then click Save.
Once you’ve saved you’re gif image, open it up in your image viewer. If your normal image viewer doesn’t show the animation, try opening it in Firefox or Internet Explorer. You can do this by right clicking on the file, and selecting “Open With.” Then choose your internet browser, and you’re all set!
Making an animated gif is pretty easy, and really fun. Try experimenting with your favorite animal or even your car. Pretty soon, you’ll get good enough to make some really cool images, like full resolution images of people nodding, blinking, and talking. Have fun!
 | Amazon Price: $6.95 |
 | Amazon Price: $12.70 List Price: $26.99 |
 | Amazon Price: $1.83 List Price: $29.99 |
 | Amazon Price: $15.99 List Price: $44.99 |
Comments
I just wana say its excellent
good work
Good tutorial, already knew most of that though, actually looking for a way to make GIMP set the frame rate for each layer, it says it's in the layer attributes in the help file, but all that shows is a way to change the layer name, not the speed, as I have a transition in my animation that I want to run at 50ms and the actual frames between the transitions I want to be at 1000ms to give people time to view them.
Darren-
Try duplicating the layer you want people to be able to view in detail many times in a row, with the transition only repeating, idk, every once in awhile.
That way all of the layers will still be the same length, but the gif will just repeat the duplicates many times in a row, and since the frames are just duplicates, your eyes won't pick up movement. The repeated layers will act as one longer layer.
I hope this makes sense. I'm still a noob at this stuff, too.
It works
Hmm, good hubs. the result is good. I like it. thanks
How should I go about reducing the size of the .gif images after I have made them. You mentioned making the image bigger and reducing it later, how might I go about that?
Aaron: You can change the size of the /gif image by using the Image -> Scale Image function in Gimp, or you can upload your gif to http://www.blibs.com/editor/ and change it there. I just tried both, and got working results. Just make sure to save as an animation in Gimp if that's the program you decide to use.
There's also optimization options under Filters -> Animation. There you also have a playback.. :-)
OMG !!! Thank you sooo much. I thought my animation wasn't working! I mean it was, but my computer wouldn't show it, so I tested with opening with Internet and it worked! You're a lifesaver :D
Hey I made a gif and when I opened it on my computer it was animated but when I tried to post it on a site it wouldn't animate. Can you help me out?
@lalu: I think a lot of sites don't accept .gif images, or just pick one frame. I've seen them on some forums, but I know some other sites just don't use them.
Hi,
I have been using GIMP Image editing tool since a long time and looking for such kind of tips.
Thanks for sharing!
I can't seem to make it go any faster. It's the same speed every time. But when I go to Filters > Animation > Playback that can change speeds but not save anything. How do you change speed? [I understand you put it in there, but it has done nothing.] Help is helpful, haha.
When you save the file, and choose to save as an animation, there is an option for frame rate that should change the speed of the animation.
Thanks! Success! And it was so damn easy!
THANK YOU!!!
I couldn't understand it! Where is the "Layers CHannels and Paths" place?
the "layers, channels, and paths" should show up in a window by itself by default. If it doesn't, you should be able to find the layers under Windows->Dockable Dialogs
You should use Easy Gif Animator 5. I already made 2 animated gifs. Go check em' out
When I open my gif in Chrome to view it. Everything works fine, but it looks awful. There are little white boxes all over it! What happened?
Also, if there a way to change the size of the gif? Not like change the height and width. Like change the file size. The site I want to post it at only accepts gifs under 500kb.
I'm not sure what's going on with Chrome. Try it in another browser and see what happens there.
The size should be determined by the canvas size in gimp. If you want to change it after the fact, you could try using a photo manager like picasa (using export) or maybe office picture manager, but I haven't tried that before. To change the size in Gimp, I think you would have to change all the layers, but I'm not sure.
Better is the suggestion I posted to Aaron, above.
Why isnt the animation being animated on my desktop background?
I don't believe windows supports animated gifs as backgrounds. A friend of mine, however, used a photoshopped image of a mustang with its lights on with several images with lights off and set them up as a set of backgrounds in windows 7 so that it looks like the mustang flashes its lights every so often.
Where's Advanced Options!?
i don't know what version you have Dillon but advanced options for me (using version 2.6 on Linux Mint 12) appears at the bottom of the window that opens when you click on File-New.
Hello, I was wonddering what am I doing wrong? no matter what I put in for the frame rate the GIF goes the same speed!!!
http://i274.photobucket.com/albums/jj255/Shakaku19
that's the GIF I made, and it should be going at least twice as fast as it is, but no matter what I do the speed wont change for the final product. when I veiw it in the gimp playback window, it plays fine, but then once I save it it will only play like that, regardless of the specified frame rate!
I'm not sure how fast you wanted it to go, but it's going pretty quickly on my browser. If the preview was good, maybe it's just the playback program. Maybe try a different program to view it?
http://www.youtube.com/watch?v=XpuQyGc3rAA
that's the clip I took the frames from, it should be going about as fast as he is in the video. I don't know if the problem is somehow just my computer, but no matter what I view the GIF in (windows picture viewer, microsoft picture manager, IE, ect...) it only plays about half as fast as he goes in the clip. but if it works normal speed on your computer... 0_O
This is really great ,GIMP is great photo editing tool
@RandomPerson1 - the .gif does play that fast or a bit faster on my computer (actually on both of my computers), so I don't know what's going on there.
@htodd - thanks, gimp is quite useful when you don't want to pay for Photoshop!
I tried to create an animation but am still not able to create on with motion properly. If you can give me an option to send a .gif file of a lotus then I can probably let you know where I got stuck. Thanks for the post.
Marisa Wright 2 years ago
Thanks, I've always wondered how to get an animated GIF. I found a site that made them once, but the result was incredibly slow and clunky. I'm looking forward to trying this method!