Marens Blog: How to create a character idle animation and save it as .gif

This is my first tutorial which I hope will show you one easy way doing short animations for web.

Step 1 - Before creating a character -Think about what he will do in your animation!

If he will move his whole body like dancing you have to think about bones and joints.

My character Destroyer96 has no special breaks or joints in his body because I just want him stay and look around in a loop.

So please think about it before you start because it is horrible to make a character „animationable“ after creating him „non-animationable“.

Step 2 - Before you start to animate -Think about how much steps you need.

Normally an animated film is produced with 24 frames per second. And as you see in popular animation films, these characters are smooth in their movement because they have 24 steps in 24 frames per second.

If you do 24 steps with different positions of you character, it would be really annoying because it is really much!

In my game Wranglers, my walk cycles include 12 steps. My animations are not that smooth but for human eyes it is okay to watch if the movement is fast like running!

If you summon my requirements you need for example 12+12+12+12 steps for 4 seconds. 48 steps means 48 pictures to illustrate. The good point is that some of these steps have a repitition :)

Here you can see my illustrations so you can use them as an inspiration for yourself:

My Plan: Destroyer96 lifts his right foot 3-4 times while he's watching down. After that he will take a deep breath!

What I do is creating a character for my first frame as you see in the first picture. Destroyer96 stands here without anything special. Than I create my first special position like the highest point of lifting a feet. After that I use the Blend-Tool of Adobe Illustrator to create the steps between. If you use more steps your animation will be more smooth and slow.

I repeat this procedure until I have all steps of my animation.
There are a lot more ways to do this, but I think this is the easiest way to start with short animations.

Step 3 - Summon your steps to an animation

For this I use Adobe Photoshop and Photoshop's timeline. I copy my steps to Photoshop and create 48 layers. These layers I put in the timeline and Photoshop can export all these frames as a .gif. It is really easy but you have to make sure that your illustrations are all at the same position and not centered so that you don't have any jerkiness.