1. Open or create your graphic. I made mine using Gandalfs' tutorial on gradients. Click on the graphic to download and use this little guy if you like. In fact, Newbies may wish to just download the file, it will have all the parts necessary to create the animation, except the text. That we'll do in Ulead's Gif Animator.
2. Make a rectangular selection of both eyes. Extend this selection past both eyes at least 5 pixels or more. This will give you a lot of room to play with, and a bit of a margin for error. This is especially important to do if you are going to slice the graphic.
3. R/C, convert to object (CTO).
4. R/C, duplicate.
5. Drag on copy to a new window. R/C, Merge.
6. Make an elliptical selection of the left eye, R/C, and CTO.
7. Repeat selection with the other eye, R/C, CTO.
8. Select both eye objects, R/C, duplicate.
9. Take one pair of eyes, and edit with a pen tool to add two black lines,
one above, one below the pupil.
10. Edit the other pair of eyes to add a black line representing a closed eye.
11. Combine one of each object into your graphic. Save as a .ufo file. Make note of the file location.
12. Open Gif Animator 5 by clicking on the switch button at the program windows upper right corner.
13. When GA 5 opens, you need to open the file you just saved. It will look like the frame to the right, and will be located in the center of the GA screen.
14. The Gif Animator is laid out somewhat like PhotoImpact. If you click on the View menu at the top, you can toggle all the panels on and off to learn their names. You'll have the standard toolbar and the attributes toolbar at the top. On the left is the tool panel, and on the right is the object manager. At the bottom of the GA Window is the Frame Manager, and controls, and below that is the status bar.
When you open a ufo file, the object manager will be filled with all the
objects in the file you just opened. They are in layers, so you may need to
adjust them. Just be sure the eyes are closed on the top two layers, partially
opened on the middle two layers, and the rectangle layer is below the eyes but
above the background or face layer.
From here on out, we will be adding new frames, and turning layers on and
off in those new frames, so we can display different views. Then we'll add
text and adjust the timing.
13.
Look at the frame manager. You'll only see one frame now. Right click and click
on duplicate frame or you may click on the duplicate frame button at the bottom
of the frame manager. It's the overlapped rectangles just to the left of the
X.
14.
Click on the new layer in the frame manager, then switch the two closed eyes
off using the object manager.
15. Click on frame 1, then duplicate it and move it to the right of frame 2. It will become frame 3 and be identical to frame 1.
16. Duplicate frame 2, and move it to the right. Turn off the four top layers of closed and partially opened eyes, then click on the text tool and add some text, like this.
17. From here on out, I'm just going to show you what the duped frame should look like, and I'll tell you what text should go in. We'll do it three frames at a time, starting with the ones we've already done. You'll note the timing requirement at the bottom of each frame. You may do this as you go by highlighting the time and double clicking.
18. Frame4 Text: Oh, hi!
Frames 5-8, Text: And,
Frame 9, Text: Uh, Frame 10-12 Text: Happy New Year!
Remember the one hard and fast rule to animation: Timing and orientation is the key. There is an undo button, just like in PI...So don't panic.
19. When your layers are done, click on the animate button at the bottom of the frame manager and watch the animation, it should look something like this:
When you are happy with your animation, click on the optimize tab just to the right of the tool panel. Use the defaults, or experiment if you like..
When you have optimized your gif, save it and upload to your server.
Thanks for doing this tutorial.
