Monday, October 18, 2010

Easy Animations!

First, draw something simple in MS paint.

   (or use another drawing program of your choice) 

The simpler the better, to begin with.

To demonstrate, I drew a woodland creature of questionable species.

Inanimate object!

The poor creature is frozen in time, so we better free it fast!

First and foremost, name your creation! (optional)

This one's name is Rumbelly IV 

The next step is to determine the movement we want.  Anything is possible!  Since the drawing took about 20 seconds, lets take about that long to figure out the movement.  Then we can churn out our very own lo-fi forest!

I for one would like to see Rumbelly wag, and then have him growl.

Well, just go to your original wire-frame, and modify! To wag his tail, Rumbelly's tail must be erased and made to appear - in separate drawings - in the locations where it will move to.

The number of locations you move something to is important.  This is because if I animated Rumbelly's tail to seven different locations, it would look smooth, but if 6 of those seven locations were tiny adjustments, while the 7th moved a large amount, the animation would look smooth then jerky.  Basically, you can animate with a minimum of one change to one picture, and the human eye will fill in the movement.  More frames gives a smoother animation, and the human eye likes more than 24 frames per second!  

Cripes, eyes, calm down.  We are going to give you like 5 per second and you shall see it works much better for lo-fi things such as Rumbelly.  Eyeroll at my own eyes.

As you can see there are about infinity animation rabbit-holes above that you can go down and learn about endlessly.  Some people did this and they are now called Pixar and Dreamworks.

Like I said though, we are after some lo-fi goodness, and the basics of animation, so I'll just make 2 more pictures of Rumbelly's tail in different places.  
I like to name them starting with 1
This is #3
To make him growl, I'll just make an extra one with his mouth open.

Now what?
Now we get a GIF animator from the amazing intertubes!  I like one called "Easy GIF animator".  It is a demo download, but you can use it many times for this sort of thing.  By the time it runs out you are either sure you want to be an animator or you are done with this noise.  It's a tiny file and doesn't mess with your computer.

When you open your animator, start a new animation.  In Easy GIF, this will prompt you to upload pictures.  Just upload them in order (numbering them helps here).  I like indefinite animations, and I like my delay about .15 to .20/sec for lo-fi projects.  I also just set it as center, and so on.  

You can monkey with the setting all you want I guess.  I am going to load up Rumbelly!

Well now, we have a little creature that does our bidding, mwahahaha!

You can see here I did the frame sequence: 1-1-2-3-2-1-1-4:  This makes Rumbelly pause, wag, pause, growl.

A different sequence gets very different results!

 We can do whatever we want!

We could put a wizard's hat on the old fellow, or we could make Rumbelly scamper through some woodlands.

One of the best things is to color your animation once you have it moving how you want and where you want.


Usually for these I will drop the file into .gif format within MS paint itself.  The program will degrade the picture quality, which makes your lo-fi more savory.  Yes, savory.

There's a lot more you can add, and you can make huge scenes or entire epic sagas using this method.

That's all for now.  I can go into more detail if anyone wants, but that's the basic nuts and bolts to simple gif animation.

Questions? Comments? Creatures?


  1. Heh, lookit that cute lil bastard. I want a rumblebelly.

  2. and we have movement. fun blog! following.

  3. cool.. I like actually learning something when I read someones blog. thanks!

  4. awesome! Do an octopus next time lol!

  5. Excellent post!

    Read my latest post, Tutorial Tuesday Or How to do the damn thing!. You have to check it out if you haven't already. You'll be glad you did. Learn how to increase your earnings like the pros.

    See you real soon!

  6. i use imaageready before. it was included with photoshop cs2. noe i'm using photoshop cs4 and i can't make any more animation.

  7. That is awesome! I love simple stuff. Check out my new blog

  8. fantastic! doin one right now lol

  9. this is fkn epic haha have always wanted to know how to make gif's :D but what other prog's did you use other than paint?

  10. my bad, didnt realize that was a link there haha ;P

  11. haha thats an awesome tut. I love it.

  12. I remember when I first discovered the magic of creating animations on a PC. This post takes me back almost ten years. Lol. Good stuff.

  13. That's pretty cool. Do you know any other Gif animators one can use for this?

  14. Thanks everyone! Glad you enjoyed!

    @LoneIslander I don't know any others, but I will research and make a new post soon with a list of cool animation programs.