Introduction: How to Create Gif Animations

This tutorial shows how to create simple gif animations using Inkscape and Gimp, two very nice and free open source programs. Nothing big, but my first instructable, so don't be harsh;) Image below is the result of this tutorial, but you can make much more difficult animations when you master these programs. Example two is another animation i made in just a few minutes. It's very easy to do;)

Step 1: Beggining

1. Download both Inkscape and GIMP.
2. Open Inkscape, if you are not familliar with it, go through the tutorials, this will help you.
3. Draw the first frame of your animation(clock this time). I've drawn it using rectangles with rounded edges, a triangle and a circle, pendulum is made by placing an oval either over another one or a rectangle, selecting both of them and pressing ctrl+ + (Path/Union). By the way, the end of the pendulum is hidden under the lighter . Actually, to do this, you must duplicate the darker inner part of the place where the pendulum is, then select the duplicate and the lighter rectangle and press ctrl+ - (Path/Difference). Then arrange the pieces of the clock by sending them back/Forward to get something like the picture. Then draw a white rectangle without borders on top of the clock, and send it to back of the image. With this rectangle you will control the size of your gif and it's essential!

Step 2: Changing the Rotation Center of the Pendulum

Zoom in. Select the pendulum clicking it twice. Rotation arrows should appear on the edges of the border and a cross in the middle. That cross is the rotation center. You have to carefully move it upwards to the top of the pendulum to make it swing.
Pictures illustrate before(1) and after(2).

Step 3: Saving First Frame

Now zoom out and select the white rectangle in the back. Press File\Export Bitmap. A window will appear. Make sure that "Selection button is pressed, set the location and save

Step 4: Create Second and Third Frames

Saved? Ok, let's continue. Select the pendulum doubleclicking and rotate it rightwhile pressing ctrl. It will rotate at a fixed angle and now the second frame is done. Select the background rectangle and save again.
Now rotate it back to the original position and rotate left. Save again.

Ok, job with Inkscape finished. Save the svg file if you want, then close the program.

Step 5: Creating the Gif

Open the GIMP. Drag the first frame onto the program's main window. It will open, as shown in the first image. Now check if the layers dialog is open. If it isn't, open it by clicking ctrl+l or going to file\dialogs\layers. Now drop second and third frame onto the first one that's already open. They will appear in the layers window, like in second picture. Only the top layer will show, by the way. Now select the first layer, and duplicate it(right click on the layer in layers window and select duplicate). Drag the duplicate between the second and third frames. It should look like image 4. We're almost done.

Step 6: Saving the Gif

Press File\Save as..., select the file format as *.gif and press save. A window(1) should appear. Select "Save as Animation" and "Convert to indexed..." and press Export. Another window(2) will appear. Write a comment that you want, set the gif to loop forever and frame disposal as one frame per layer(replace). Set the delay to 200ms(100ms is too fast).
Now sit and glare at the results;D

Comments

author
kiwi_soccer_maniac made it!(author)2008-04-21

Haha nice instructable, here's mine I took a little cartoon of mine and scanned it, imported into inkscape then autotraced it to improve the quality then saved different frames after modifying it using the Simplify tool. Took me a while but here it is.

Finish hopefully this works.gif
author
Rye made it!(author)2008-06-04

Do you export the pictures seperately?

author
kiwi_soccer_maniac made it!(author)2008-06-05

From inkscape I exported 13 different or images/frames. Then drag the first one into a new document, then drag the next frames into the layers menu (one you have showed above.) It should list the different frames as different layers. Hope that helps.

author
Rye made it!(author)2008-06-05

thank you

author
CameronSS made it!(author)2007-09-01

I was having trouble with Inkscape, so I just made this in the GIMP. Simple, I know, but I made it in about 5 minutes, and it's my first ever animation. Thanks for showing me how to animate in the GIMP! That's one more thing to cross off my "stuff I need to learn" list.

Ball.gif
author
AmyR143 made it!(author)2017-03-06

Once the gif is made (and I made mine from a iMovie clip and GIMP), then what do I actually d to share it? How does one upload to Facebook? How about one's own blog (blogger) or wordpress?

author
SalmanM made it!(author)2014-08-26

https://play.google.com/store/apps/details?id=com.smak.animatedcamera

Check this Amazing App on Android for Remaking and Creating GIFs from Camera and Gallery ! =)

author
enam07 made it!(author)2013-08-20

nice

author
enam07 made it!(author)2013-08-20

hmmmm...

author
enam07 made it!(author)2013-08-20

nice work

author
DX+MRINAL made it!(author)2013-01-17
i got another easy method to make animated gif in less than a minute

CLICK HERE FOR MORE INFO
Animation: Make Your Own Joker Clapping Gif


V
IDEOCAST

author
sboddireddy made it!(author)2012-11-14

thats great and simple :)

author
samkel9 made it!(author)2012-03-25

i think i got it

rect2985.gif
author
samkel9 made it!(author)2012-03-25

i made another from frames of one of my videos.

Snapshot 1 (3-25-2012 3-57 PM).gif
author
dodo91 made it!(author)2011-10-26

Made this one.

Alex.gif
author
dodo91 made it!(author)2011-10-26

I dont know how to view it on my computer, so im putting on here to test it.

Ball Bounce.gif
author
siguym made it!(author)2011-09-10

Made an account just so I could post this. Thanks SO MUCH for the awesome instructable. It will help me a lot as i am making a web site (http://bobtheguy.yolasite.com/)

This took me over an hour, and it's not much, but I'm real pleased with it.

For some reason I cant post the actual image, so just click this link:
file:///E:/Photos/GIF%20Images/friendshredder/friendshredder.gif
If THAT doesnt work, just go to my site and look at Issue 3 on the online store.

author
siguym made it!(author)2011-09-10

I made an account just so I could post this... It took me over an hour, and it's not much, but I'm real pleased with it. Thanks SO MUCH for this awesome instructable! I'm going to use it alot when making my website,
http://bobtheguy.yolasite.com/

author
siguym made it!(author)2011-09-10

I made an account just so I could post this... took me over an hour, but I'm really pleased with it. Thanks SO MUCH for this awesome instructable! It will really help when I'm making stuff on my website,
http://bobtheguy.yolasite.com/

author
Capt.+Kidd made it!(author)2011-02-01

Heres a really short one i made. it's really simple, with two frames. I'll make a better one later, this is just an experiment.

M16.gif
author
godoggie made it!(author)2011-01-05

Here's a spiral... Don't get too dizzy! :-)

Finish.gif
author
drahz made it!(author)2008-01-18

Cyber road rage on the Internet Super Highway. Road Rage of the 21st century

head_bang.gif
author
hotanups made it!(author)2010-10-07

WOW very nice!!!! it have taken you a damn time!!! love it

author
QwertyuioLP made it!(author)2008-08-17

haha funny how long did it take to do??

author
Chicken2209 made it!(author)2008-10-05

i don't think he made that....

author
Dr.Paj made it!(author)2008-02-24

I've seen that before, a long time ago too.

author
killbulletbill made it!(author)2008-02-01

Sweet implementation!

author
arne+hendriks made it!(author)2010-05-02

Thanks, very easy and functional.

author
nutsandbolts_64 made it!(author)2010-05-01

 There is another software that's so easy to use. It's called Gifted Motion. It runs off Java. Extremely small size, as in 67KB. Here's the link to save you the Google search. You won't see the download link at first, but scroll down to the limit and you'll see a link that says something about Gifted Motion and the file size beside that etc. Just click on that link and it'll be instant download.


author
auguatua made it!(author)2010-02-05

thanks for the tut
that was painless

author
I3uckwheat made it!(author)2009-05-22

here is one i made by taking frames from a video i made

''hand gun''.gif
author
wenpherd made it!(author)2009-04-24

heres mine

zappy.gifconnon.gifendless hill.gifsubmarine3.gif
author
FaqMan made it!(author)2009-01-17

It aien't really that good but i think i'm getting the hang of it thanks for making the ible.

Happy Face.gif
author
bad+ass+pope made it!(author)2009-01-08

WOW! You have no idea how much you've just helped me! I'm doing a speech animation from photographs and have been looking for AGES to find out how to animate it. My art project is due in tomorrow, so it's a bit late, but thanks anyway!

author
John+Smith made it!(author)2007-06-03

Look, I got it! WARNING: Very graphic!

ABDUCTION!!!.gifSkyjumper.gifOuch!!.gif
author
bad+ass+pope made it!(author)2009-01-08

Haha, I'm glad you're not animating me!

author
6stygos made it!(author)2007-06-04

That's what I'm talking about :) Great job!

author
chaosvoider made it!(author)2008-10-24

That's a pretty handy instructable! I've never heard of Inkscape before.. I guess I'll have to play around with it! =D

author
threecheersfornick made it!(author)2008-10-09

space invaders

invaders_animation.gif
author
jon123321 made it!(author)2008-10-01

do you like mine?

gkgjkghgrgrwfwfwerfwef.gif
author
salbabob made it!(author)2008-09-07

this is a retarded1 i made :D

cool.gif
author
halzep made it!(author)2008-06-17

thanks a lot it really helped 5 stars

author
Rye made it!(author)2008-06-05

How did you save the layers as an animation? Every time I click file save as, the program tries to save images instead of all the layers.

author
Rye made it!(author)2008-06-05

Never mind. I got it. And to think that some other guy said his was cheep.

move da geeny.gif
author
Rye made it!(author)2008-06-04

I'm having trouble getting all of my pictures on the layering window thing.It's this window-

FEC7049F29SM6UJ_MEDIUM.jpg
author
egreen767 made it!(author)2008-03-28

Thanks, I've been wanting to learn how to do this. I made a really crappy one lol

clock.gif
author
Brennn10 made it!(author)2008-02-22

Awesome, I was searching on how to make one. Now I found it!

author
TheBikemaniac made it!(author)2007-08-08

I couldn't open my exported file from inkscape on GIMP, a message pops up telling me that the file format (png) is not compatible with GIMP! How can I get it to work? please help me!

author
TheBikemaniac made it!(author)2007-08-12

never mind

gun1.gif
author
John+Smith made it!(author)2007-12-16

AWESOME!

About This Instructable

147,821views

34favorites

License:

Bio: A scout, IT Hardware specialist and a maker @padirbtuves (www.padirbtuves.lt).
More by 6stygos:How to create gif animations
Add instructable to: