Frame animation

This time animation crash-course in Photoshop, everything based on the only one GIF i have ever made. Hopefully based on this tutorial everyone of you will be able to create your own animation, maybe even more complicated than this simple blinking.

Well it's not particularly hard, but it takes time, especially when you are not very talented in that kind of stuff - just like me :D

But let's get started! First some basic informations about how you can actually make an animation in Photoshop, how does that animation window look like and how you can use it. Animation window opens when you click Window->Animation. You'll get a floating little frame, just like for layers or brushes. You can see timeline there, some other stuff... We won't use that, we want frames. You'll have to press that small icon in the right-bottom corner. Then you'll get something like on the second screen and you can finally see some frames. At first - one, but you can make more by pressing that small icon (same you use when making new layers). Now we have two frames!

Frame animation Frame animation Frame animation

Important thing - layers are connected with frames of the animation. For an example let's see what happens on the first picture below. On the right you can see many layers, some of them are hidden, some are visible. If you have, for example, second frame selected and you make some layer visible (show it) it will be so ONLY on the second frame. When you click on the first frame, the layer will be still hidden (it will disappear).

That actually makes whole thing very easy for us - we just need to take some picture (take your own, ugh), on some separate layers paint different phases of eyes closing and on the separate frames you just hide or show particular layers. It seems we already know everything we need. Now how to save our work of art? There are several ways: File->Save for web and devices (and then save as GIF), File->Save as... PSD (for later edit, but nothing else), File->Export->Render video (QuickTime or images sequence, which you can glue into a movie later on in some movie-edit program).

Saving animation as a GIF lets you publish it easily (any browser will recognise it so you can put it on your blog and impress your friends) and make it loop forever (you just need to check this option while saving the file) but you will loose quality. GIF has only 256 colors. Personally I don't like QuickTime so I tried saving a sequence of images. You have to give it some additional work to glue it into a movie but at least the quality is as high as you want it to be.

Frame animation Frame animation Frame animation

Okay, we know everything about the tools now. Now how to make it look convincing? I will show you how I did it, frame by frame. Of course I am not a master of animation or anything like that (come on, after making one animation? pfff... :D) but some people were curious so I will share my way of doing this.

Let's take a look on the first screen from the ones below. We have my drawing here, group "mruganie" (means "blinking" in Polish :D) with some additional layers, which are hidden now, and group "kurz" (meaning "dust") where I've put 4 layers of floating dust-thingies. We will not bother with them, animating moving dust is just moving layers around, not interesting at all :D Let's take a look on the first group though. As you can see I prepared 5 phases of blinking here, each one on the separate layer. There is also layer "poprawka" which means "fix", because I needed to hide my little lousy animator miracles like jumping lower lids and so on :D Below you can see the animation frame by frame.

Frame animation Frame animation Frame animation
Frame animation Frame animation Frame animation

What next, since we have everything painted? We add many new frames. Let's say 20. Between one blink and another you will want to have some rest, right? You can add it by making one frame last longer (0 sec., 5 sec., whatever you want). I animated dust in the same time so I needed more frames instead of just waiting on the single one. And now you can see what is happening - every frame shows another layer. Opening eyes is exactly the same, just in the reverse order (obviously). Every frame has it's own layers so you just pick frame, adjust layer visibility and that's it.

Frame animation Frame animation Frame animation
Frame animation Frame animation Frame animation

That's all! You save animation (for example as a GIF) and plan the next one :) For me the hardest part was drawing those eyes closing phases in the right way, I didn't know how it should look like. You have it easy now since I showed you everything :D It helps to look on some slow-motion movies, you can find those on youtube. I liked it a lot, giving life to my character in such simple way. Try it yourself!

Good luck!