DeeDee Gambino's SIMPLE Blinkin Eye Animation Guide

[DeeDee Gambino]

I would like to appologise for the condition of this forum thread. For being a guide to creating simple blinking eye instruction for your avatar image, it is unfortunate that Photobucket has compromised my images.

I got a request from a friend of mine, Lainey, to help her create an animated eye-blinking avatar, but done quite simply. This inspired me to create a quick tutorial on the how-to of eye-blink animation for avatars.

To begin with, I would suggest you check out How to make 2d animations by []...[]Tasha[]...[] This thread will give you some simple instructions on how to create a 2-D animation using the Microsoft Gif Animator.

Here is a link to download the MS GIF Animator from the Softonic Website for free: http://ms-gif-animator.en.softonic.com/

You can also download the free MS GIF Animator from cnet:http://download.cnet.com/Microsoft-GIF-Animator/3000-18512_4-12053.html

Also, consider downloading IrFanView for your animation project. It is free to use, and is a great asset for animation creation! xD

~ ~ ~

[DeeDee Gambino]

Making a blinking eyes animation with Microsoft GIF Animator

Other basic essential software:
-- Microsoft Paint
-- IrFanView viewer

PART ONE: IN REFERENCE TO A "KAWAII BLINKING ANIMATION"



I used this kawaii ava-animation as an introductory example of what to expect when creating limited animation with your avatar. (Note: I did not create this, but thanks Lainey for "lending" it to me for this tutorial. Artist credit: SlaveOfAllSouls.)

First, download this kawaii gif animation to your computer, under your graphic files (MY PICTURES, as example) and then open your GIF Animator, to find find this file. If you open this in your GIF Animator (second button on the top row) you can follow along with this text with the kawaii ava-animation before you. Thank you! ^_^

[DeeDee Gambino]

1. To get the eyes to blink (in this case, double-blink) think about what happens to your own eyes when you break this sequence down into multiple pictures -- your eye is open, part of your eyelid comes down, your eyelid comes all the way down, and then your eye opens again. With gif animation, you do not have to show your eyelid coming up again, since our speed recognition within animation simplifies the motion. Our own retinas fill in the rest of the information -- and we can achieve some interesting effects, too, by inserting blank frames into an animation -- giving a slight "flash" effect when needed. To double blink, repetition is required (load the same sequential frames in the same order a second time.)



2. To animate the ears, a slight shift of position of the ears is created, flaring out (see illustration 2) and then they go back to the original position.(In fact, you can see how the slicing was done -- since the original was done as a transparency you didn't see how little more of the underside of the ear could have been removed, or "cleaned up", as you do in this copy.)

[DeeDee Gambino]

3. This animation was created with a transparent background; it could be easier to use a plain white background -- or to pick a very different key color to represent your transparency (sucn as very bright green because this color is not included in your color pallet. It is because so many graphic designers use the bright green for creating transparent layers, that Gaia avatars developed stray bits of "green goo" when the clothing items did not layer well.) If you are using the GIMP, Illustrator, or Photoshop, you can create transparent layers such as this. If you are using MS Paint, you will need to create your animation with a solid color background (I often choose white) unless your avatar is placed against a scene. (more on this to come.)

[DeeDee Gambino]

4. For this animation, because the ears wiggle at the end, the animation was broken down
into fifteen frames, beginning with one of the ear layers first.

5. With the GIF Animator, you load the frames backwards -- the last animated motion to be
created is inserted into the GIF Animator, first.

6. Therefore, the upload sequence is as follows:

01. ears (frame 15) -- ears movement shift
02. whole avatar (frame 14) -- ears are at "standard position" and eyes open
03. open blue eyes (frame 13)
04. eyelids half open (frame 12)
05. partial eyes closed (frame 11)
06. blank (frame 10)
07. ears (frame 9) -- ears have moved
08. whole avatar (frame 8 ) -- ears are at "standard position" and eyes open
09. open blue eyes (frame 7)
10. eyelids closed (frame 6)
11. eyelids half opened (frame 5)
12. open blue eyes (frame 4)
13. eyelids closed (frame 3)
14. eyelids half opened (frame2)
15. whole avatar (frame 1) -- ears are at "standard postiion," and eyes open

Note -- Options tab:
Thumbnails Reflect Image Position -- is checked
Main Dialog Window Always on Top -- is checked
Import Color Palette -- Optimal Palette
Import Dither Method -- Error Diffusion

Note -- Animation tab:
Animation Width: 120
Animation height: 150
Image Count: 15
Looping -- is checked
Repeat forever -- is checked

Note -- Image tab:
Image Width: 120
Image Height: 120
Duration (1/100s) 50
Withdraw Method: Leave
Transparency -- is checked, but transparent color is not known

~ ~ ~

[DeeDee Gambino]

PART TWO: ON YOUR OWN

Creating a double-blink animation with Microsoft Paint

Other basic essential software:
-- Microsoft Paint
-- IrFanview viewer



1. Begin by copying and pasting the whole avatar image, of preference, into MS Paint. Because the avatar was on a transparency, you will need to change the background to a color you like. I often choose white, because I might animate other parts other than the eyes, and white gives you more flexibility to make changes. Another idea is to color your background bright green (or any color that is not used in your animation) and when it comes to creating a transparency you would check off this background hue in the transparent color box in the GIF Animator. (But you will need to experiment with this.) I decided to pick an avatar placed in a scene (the castle) so my background was decided for me. xD

[DeeDee Gambino]

2. If you want to put a frame around your animated image, it would be best to do so with your first frame, because you will be saving the individual frame-cels repeatedly. (I once framed each graphic cel individually, after creating each frame for the animation, which added extra production time. But done with TDC, nonetheless! xD)

3. Keeping the size consistant for each frame is important. As you work, check your size attributes. I have learned by experience that if one or more frame cells end up being a different size, this will make a "jarring motion" in your animation that you hadn't planned for. The GIF animator will automatically accept any frame, even if it is a few pixels off, so it is up to the animator to keep the dimensions "clean." xD

4. You are working with the .gif format with the GIF Animator (of course) but this means that you could lose some loss of color when you save your individual cels through MS Paint. A way to keep your full color range is to save your file as a .PNG and convert your .PNG file to GIF with the IrfanView viewer. The IrfanView viewer can change your PNG file without any major color loss -- later, you can delete any files that are duplicated. To show the difference from PNG and GIF, I often put a "G" at the end of a gif file name, to make it easier for me to recognize. The IrfanView viewer is free to download and use.

[DeeDee Gambino]

5. Eye detailing (editing): Here is the part you have been waiting for!

1. You have saved your first avatar as a gif, or as a png and then converted to a gif file, and numbered your first file avatar01G.

[DeeDee Gambino]

2. Eye half closed: open avatar01 Using the color picker, choose a flesh tone that matches your avatar, for the lid portion, to make your avatar's eyes appear half-closed. Basically, cutting the eye in half, and using the straight line tool in black, works well. To do fine-detail work, feel free to enlarge your graphic. Save your file as a gif, or as a png and then converted to a gif, and number your second file avatar02G.

[DeeDee Gambino]

3. Eye completely closed: Open the first file again (avatar01) and paint in the entire eye area with matching flesh color, for a closed eyelid -- and paint in the lid/eyelash detail with half-circle black lines. (The curve-line tool is great for this.) To get into the detail work, feel free to enlarge this work area. Save your file as a gif, or as a png and then converted to a gif, and number your third file avatar03G.

[DeeDee Gambino]

4. Winking eye is similar, except you just block off one eye (using instructions 3 and 4.) for animation. You could make your eye wink AND blink/double blink -- depending on the effect you want.

5. Once you have your files saved (and all are EXACTLY the same size dimensions) as gif files, open your Microsoft GIF animator to create your animation, and choose New (first tab.) To find your completed files, choose OPEN (second tab.) To add each file choose the INSERT tab (page with plus +icon.)

You will be adding the files backwards, as to the motion that will be perceived.

This animation (version 2) contains 13 frames, but much is just do to duplication.

01. Frame 13 -- Load avatar01G.
02. Frame 12 -- Load avatar02G.
03. Frame 11 -- Load avatar03G.
04. Frame 10 -- Load avatar01G.
05. Frame 9 -- Load (or copy) avatar01G. (Having two files of avatar01G gives your avatar a rest in between blinks, and our eyes a rest, too.)
06. Frame 8 -- Load avatar02G.
07. Frame 7 -- Load avatar03G.
08. Frame 6 -- Load avatar01G.
09. Frame 5 -- Load avatar02G.
10. Frame 4 -- Load avatar01G.(the next three frames are copies of avatar01G)
11. Frame 3 -- Load avatar01G.
12. Frame 2 -- Load avatar01G.
13. Frame 1 -- Load avatar01G.

Note: having your animation begin and end with avatar01G will give more time to this frame, creating a longer time to look at your avatar, in between blinks. (To make a timing correction with my second version of my animation, I added in more copies of avatar 01G, so the time between blinks is extended. You can fiddle with your own animation to get the timing as you see fit.)

Look over your Options, Animation, and Image tabs.

Note -- Options tab:
Thumbnails Reflect Image Position -- is checked
Main Dialog Window Always on Top -- is checked
Import Color Palette -- Optimal Palette
Import Dither Method -- Error Diffusion

Note -- Animation tab:
Animation Width: 120
Animation height: 150
Image Count: 13
Looping -- is checked
Repeat forever -- is checked

Note -- Image tab:
Image Width: 120
Image Height: 120
Duration (1/100s) 50
Withdraw Method: Leave
Transparency? Check this if you have created your animation with a transparent background, otherwise leave unchecked.

[DeeDee Gambino]

6. "SAVE AS" your animation (Number 5 button/tab in the first series of 5 tabs) -- and give your completed animation a file title. I like to put "ani" in the title, so I can tell the difference between my completed animation and the other single frame files.

Correcting the timing of your animation is important.Sometimes I have needed to play with timing by fiddling with the Duration (1/100s) or adding extra frames into a new version of my animation (I will save each subsequent animation as 01, 02, etc. until I get it "right." xD) Check out your completed animation in IrFanView. Although the GIF animator gives you a preview option (arrow button before the question mark help button) I often find that this preview runs too fast.

[DeeDee Gambino]

Yes, you can view any gif animation in the GIF Animator, and it breaks down the animation into single cel files -- an asset for the animator to make corrections, or get ideas on how to make your own version of a previously created gif animation.

If you like your animation, check your file size to see if you can use it as a Gaia siggy (mine was over-the-limit xD) and upload it to Photobucket.

= = = =

Also, if you would like to EXTRACT a gif animation to see all of the single cel files (or you want a nice still from a gif animation) you can do this with IrfanView. ^_^

Note: I was able to make the horizontal panorama images (three frames side-by-side) with the IrfanView. You can find this option under the IMAGE tab.

~ ~ ~

[DeeDee Gambino]

~ Open ~

[BatChic]

A useful resource! *hugs* <3