CAA: Christian Anime Alliance

Welcome to the CAA Art School's February lesson.
This week the topic is: GIF Animation! \^_^/

Ever wondered how to animate your avatars? Make short animated images? Well, that's covered in this tutorial. At least, GIF animating is. A tutorial on creating animations in Macromedia Flash will probably come in a future CAA Art School session.

Any questions should be posted here. And if anyone makes an animation with this tutorial please: post it here! We'd love to see what you make. ^_^

You can find the original discussion thead for the CAA Art School here: http://www.christiananime.net/showthread.php?t=39580

Now for the tutorial:

Gif Animation Tutorial

Equipment:
*Computer drawing program (MSPaint or anything better)
*A program to put all the images together to make the animation (a simple free one can be downloaded legally here: http://www.whitsoftdev.com/unfreez/ )
If you're good at coding you can probably put the images together yourself.

Before you do anything else:
First, decide how you're going to create your images.
*Do you want to create them from scratch in MSPaint? Follow this tutorial.
*Do you already have the pictures you want to animate? Skip to Step Four.
*Do you want to make the next high-quality, full-screen Disney movie? Look for another tutorial.

Step One:

To make an animation, you need to have pictures to make that animation with. Since we're making a simple .gif animation, you'll need to have images saved into .gif format. If you want, you can 'Save As' your file as a .gif before you even begin to draw on it, or you can save it as any other type of file (.psd, .jpeg, .tiff, etc) while you work on it and convert it to a .gif later. But however you do it, you need to draw the pictures first.

:TIP 1: if you save your file as a JPEG in MSPaint, then try to save your picture only once. If you keep saving it, the quality will go down A LOT.

:TIP 2: If you want to draw all your pictures in .GIF format, then it's a good idea to save your file as a .GIF before you even start to draw. If you save it later your colours may become 'dithered'; that is, your colours will end up being made up of lots of little different coloured dots. It can be hard to animate well on top of that.

So open up your computer drawing program and draw something. If you're not used to animating, then draw something simple like a face.
Once you've finished save it with a name like 'frame1' so you know it's the first frame ('frame' is what we call the individual pictures in an animation) of your animation. Make sure to remember where you save it.

Here's my first frame, drawn in .gif format in MSPaint.


Step Two:

Yay! You have your first image. Now to make the rest. With your first picture open, 'File->Save As' it and give it a new name. Something like 'frame2'. This means you have your original picture already in front of you.
Now decide what you want your picture to do. Do you want it to smile? Blink? Get eaten by a chair? That last one's a little complicated. Try to keep it simple: smiling and/or blinking will be enough for now. Even making your character walk can be difficult.
So with your picture open, change it slightly. If you drew a character with its eyes open, then change (or you erase and redraw) the eyes and sketch closed eyes in their place. If you want the character to smile, change the mouth to how you want it to look.

My cat had its eyes open and a blank expression in my first frame: here's how it looks smiling with closed eyes.



While you can make a character blink or smile in just two frames, if you use more frames your animation will look better. E.g, if you're making your character blink, instead of drawing only two frames (one with eyes open, another with eyes closed), draw three or four frames: one with the eyes open, one with the eyes half-shut, another with the eyes almost shut, and then the last one with eyes closed).

Here are the two other frames I drew. But three frames are enough for a simple blinking or smiling animation.

Eyes starting to close:


Eyes almost closed:


Step Three

Make as many frames as you need to complete your animation. Make sure to save each picture as a new file each time. But keep in mind that the .gif animating program I've given will only make an animation about 30 frames long. But I doubt you'll have that many frames.

Step Four

If your pictures aren't in .gif format, open and 'Save-As' them as .gifs. They will certainly lose quality, but that's part of .gif animating.

Step Five

Now thta you have all your images it's time to animate them. Unless you want to animate your pictures another way, open up UnFreez, and open up the folder where you saved all your pictures.
You might want to resize the folder window with your files so that you can see both it and UnFreez at the same time.
(Screenshot)

Step Six

Now click, hold, and drag your first picture on top of the UnFreez program.
Screenshot 1
Screenshot 2
Let go. The name of your picture should appear in the UnFreez program.
Screenshot 3
Now go back to your folder and click, hold and drag your next picture/frame onto the UnFreez program and drop it there. Make sure you put the pictures into UnFreez in the right order.
If you need more information on how to do this, then read the text on the UnFreez page (the link to the site is under 'Equipment').

:Tip: If you want to make some parts of your animation last longer than others, then drag and drop the file/frame/picture you want to last longer into UnFreez several times. It will appear in UnFreez more than once, so you can have, for example, three of 'frame 1' appear one after the other in UnFreez. This means that the frame will last three (or how many times you dropped it in) times as long as the other frames in your animation. This is extremely useful if you want to 'loop' your animation, especially if you want the first or last frame to last longer than the others.


(Continued in next post)

(Continued from previous post)

Step Seven

Now that your pictures are in UnFreez you need to do two things.

First, decide if you want to 'loop' your animation or not.
Screenshot
'Looping' means that once your animation reaches the last frame, it will go back to the beginning and start the animation all over again. This will go on for as long as the animation is left open.
If you don't loop, then as soon as your animation reaches the last frame, it will stop there and show your last picture as long as your animation is left open. There will be no option to restart the animation again, you'll need to close and then re-open the animation (or if you're looking at it on the internet, you'd need to refresh the page) to make the animation start again.

Second, you need to put in the 'frame delay'.
Screenshot
That number affects how long each frame will last before the next one appears.
If you're doing a simple animation like blinking or smiling, you might want to put in something like '3' for the 'frame delay' option to keep your picture from looking like it's twitching. There's another way to vary the length of frames in your animation... just read the tip in Step Six.

For my cat animation, here's what my list of frames in UnFreez look like:
catframe1.gif
catframe2.gif
catframe3.gif
catframe4.gif
catframe4.gif
catframe4.gif
catframe4.gif
catframe4.gif
catframe3.gif
catframe2.gif
catframe1.gif
catframe1.gif
catframe1.gif

(screenshot)
I didn't put any figure in for frame delay: I left it at zero.
This is how my animation turned out.


:TIP: for a looped smiling or blinking animation, you might want to do the frames in order and then backwards in Unfreez to make it go smoothly from the start, to the end, and then back to the start again. For example, if you have three smiling frames: the first one frowning, the second with a straight line for a mouth, and the last one with a smile, then you might want to put them into Unfreez like this: Frame 1, frame 2, frame 3, frame 2 .
Your animation will loop back to frame 1 again so we don't need to put another 'frame 1' at the end. Although if you want to have your character stay frowning for more than one second, I WOULD put 'frame 1' in at the end, once or twice. See the tip at Step Six.

Step Eight

Now just save your animation.
(Screenshot)
But don't delete all your picture files just yet. First, open up your animation and see how it looks (don't open it up in a drawing program like GIMP, Photoshop or MSPaint, though; open it with a picture viewing program or even a web browser like internet explorer. Watch it, and see if you want to change anything.
Once you're happy with your animation, then bingo! You're done. You can delete the files you used to make the animation if you want, or you can keep them if you want to make a new animation with them or if you want to change your animation in the future.

And that's .GIF animation. Have any questions? Just ask.

Yay! I can't wait until I have free-time and can try this out. ^_^

Woah, greatly done

Ooh, thanks! This makes me want to try this out!

Ah, cool! I wanna try this now! XD Thanks for posting that; I think these tutorials are going to be really helpful!

Excellent. ^_^ I'm really glad, guys. Hope you have fun; and its definitely a good way to make some cool/cute animated avatars for here on CAA. ^_^

Nice tutorial Soph! Very cool. Might I add that your animated GIFs are always fun to look at! I got home a few hours early from work today and felt inspired so I made a 'blinking' GIF in ImageReady (I haven't done that in about three years, so it's not that great!). But at least your tutorial made me feel like doing one!

Nice! I might do something with my wolf's eyes if I get time.

I edited the title to reflect what this tutorial is for, to make it easier to find later on.

That's cool. Thanks Eire. ^_^

Excellent, Eso! I'm glad you were inspired to make an animaiton. ^_^ And I think it looks really cool; the change of expression with the eyes when he reopens them makes it more interesting than your common blinking animation, for sure. Great work mate. ^_^

Thanks for teaching that:).

You're welcome, Tigerchu. And thanks for your thanks. ^_^ It encourages me, so I appreciate it.

Well, I make flash videos all the time. I have quite a few on my computer, but this is my for try at a gif., because it looked easy enough, but I was always to lazy to try. :3
Is there any way to make it avatar size without changing each individual picture? ;o;....Host sites want me to shrink it before I can shrink it to their smallest size...and even then it's too small, and I'd still have to go back and change each one. u.u

((This gif was actually going to be in a flash a long time ago, but I don't trust my flashes being on the internet anymore :3))

Look at what I found. \o.o/
http://www.gifworks.com/cgi-bin/gifworks.pl?com=transfer_open
It's a gif editing site....but as you can tell by my avatar, it greatly reduces quality. ;o;....Got a better place?

I half-made this one quite a while ago... I should really finish it sometime.
It's stickman who peels himself off a page and jumps out. (Made in Paint, of course! And an old gif-making program called GIF Construction Set.)

Wow, those are really neat animations! Your cat one, SC, sort of reminds me of some of the pictures my sister, Creatureart does... something about the eyes, I think. ^_^ Looks good!
And even if you did it a while ago, I really like your anim, W4C. Looks really cool how the stickman peels himself out. Nice how you pulled off that effect, and idea. ^^

As for reducing the animations... sorry, I don't know of any other way to do it short of resizing each individual frame. ^_^" And of course, 90 x 90 is the pixel limit here. Aside from that, I think there are some html commands that you can use when you place a picture places that lets you set how large they are. Apart from that, I'm afraid I don't know any other way of resizing the finished animation. ^^" Gomen!

Flash animations rock. ^^ I need to start experimenting with flash sometime. It looks fun... even though I know creating a decent, long animation takes a lot of work. ^_^"

It's also a lot of fun to actually make lineart in Flash :3! It's like vector without all the bothersome clicking. You'd think a program like Flash would be able to convert animations into gifs >.>....Oh well...

*Sigh* Ah well. Or maybe it does have the option to convert it to gif, but it's just hidden. o_O Not too sure...
It's cool that the vector linework is much easier to do in Flash. Doing it in photoshop is, well... hard. >_< At least for me it is.

here's my attempt at an animation. . .drawn in paint

Wow, that's really cool! And not just a simple blinking one either. I think you drew it really well, and I like how you've animated it. Great stuff, bakura fan!

There should be a program for just vector, so they can focus on comfort in it. :3

ShadowCat wrote:There should be a program for just vector, so they can focus on comfort in it. :3

There are "vector only" programs. For drawing there are ones like, Freehand and Illustrator. For animation there is, Flash and I believe many of these new toon animation programs popping up are vector based.

Esoteric wrote:There are "vector only" programs. For drawing there are ones like, Freehand and Illustrator. For animation there is, Flash and I believe many of these new toon animation programs popping up are vector based.

Link to that Freehand thing? o.o

*looks* Hmm, I didn't know it had been acquired by Adobe...twice. There's a info and a link to the product page on here:

http://en.wikipedia.org/wiki/Macromedia_FreeHand

But perhaps you were looking for 'free' software? In that case, try doing a search for "free vector editing software".

Heheh; t'is the way. The best programs aren't usually for free; quite the opposite, they're usually VERY expensive. ^_^"
Ah well. I'm okay with the old method, for now. ^^

Lookie! ^o.o>
http://www.freeserifsoftware.com/software/DrawPlus/inAction.asp
This version is completely free, and I haven't used it much, but it looks great. \o.o/
*forgets to post this message while playing around with it...*
*comes back*
:O!
This program is awesome, but I'm still looking for pressure simulated things...but still AWESOME o.o;

Thanks for the links, guys. But how do you rate the programs? Any more information you can give me on them?

Okay, the program I posted is awesome. \o.o/
You don't have as many options, like pressure sensitive (as far as I know). It's highly suggested if you don't have PS or PSP for lineart. It's really easy, and it's a blessing to me. \o.o/
I would give it a 9/10, but there's this border thing that I can't get to go away, so it looses a point. o.<

8/10

Thanks. ^_^ It sounds good, from what you've described. Though at the mo, since I have PS, I think I'll stick with it. ^_^ Especially since I don't do much computer linework anyway.
But it's really good to know of a good vector program in case I ever need one... or feel the urge to try out making vector graphics. ^^

So I figured out how to use Photoshop's animation tool.
For some reason this makes me maniacally gleeful. It's super easy.

I was too lazy to do a whole new drawing, so I used the cover-art from my webcomic, since it still had all its layers separated, and was simple to tweak. The character is Adramus. I can't wait to have more time, the animation tool is totally going to get abused.

:edit: I noticed a weird flicker. Somehow the line-art is messed up between the two frames. Ah well.

:edit: I did my avatar too. *flees*