Hey there suckas and suckettes, so here I am again with an an animation tutorial. I don't really know what to write about so I'm just going to animate one of the sprites I did for a sprite jam. So let me just go get something to drink and I'll start as soon as I can. By the way, I'm using Adobe ImageReady because I like too and it's a nice little program.

Here he is, Phinneas Gage, a railroad worker back in the day. He was blasting a mountain for laying down track for western railroad expansion when accidentally a rod got shot through his head and brain. He didn't die. He didn't even really feel pain. He got up and walked to the on site doctor and lived for many years after.

What I think I'm going to do is have his right hand go up and pull the rod out of his face.

Friendly Reminder:
TURN OFF ANTIALIASING!

First thing I'm going to do is seperate the layers. I select the background colour and then hit CTRL + SHIFT + I, and that selects the inverse, so instead of the background, I now have Phinneas selected.

Then I hit CTRL + SHIFT + J, this takes the selection and makes a new layer from it and removes the image from the previous layer. This will also leave a transparent shadow on the coloured background. Just flood fill that in and move on.

Now we are ready to start animating. The real animation starts in your head. Think about the animation. What does it look like for an arm to rise up? Do it yourself. What usually happens to the arm is the hand leads the action. You move your hand first and then move your upper arm, you don't just stick your arm straight out and then bend it.

Knowing how we want the arm to move in our head, we can now transfer it to the image. I'm planning on four or five frames of animation for the arm lifting up and moving to the bar.

"FOUR OR FIVE?! I HAVE TROUBLE DRAWING TWO!"

I know I know, it sounds like a lot but don't worry. There's a little trick you can do that not everyone knows about...

Keyframes!

A keyframe helps a whole lot when drawing animation. Keyframes define the extremes in an animation and then you draw the frames between these extremes, called the inbetweens. Let me teach through example.

Using seperate layers for each frame of animation and quick stick drawings, I'm going to draw the 2 extremes.

The blue line is his arm at rest, and the yellow line is his arm holding the bar. So now we have the two extremes of his arm. Now, using this guide we can easily see the middle position. Remember how the arm moves, move the upper arm a little bit and the lower arm and hand more.

There we go, the middle position. The little curl is just to hint to me the position of the hand. Now, I'm just going to make a quick gif of it and see how it looks.

Looking good so far. So now that we have the two extremes and a middle position, we can easily see the inbetween of extreme one, his hand down, and the middle position. So let's draw that.

And then do the same thing for the inbetween from the middle position and the second extreme of his hand up holding the bar.

So basically we have 6 frames for his arm moving up to the bar and grabbing it.

And there we have it, the reference for the first part of our animation. I just pushed the sticks behind the body so it would look a little more like the finished animation. The next part wil handle drawing the arm in place of the sticks.
home - back - next