Animated Egyptian Eye

11. In the Export dialog, choose the "Selected Only" check box. This will export only the selected objects as an image. Use a True Color file format. In this case I am using the Photoshop PSD file format. Give it a filename and click "Export". Save all the frame images in the same folder.

Click to enlarge

Tip: Name the sequence of frame images with the same file name ending with 1, 2, 3, etc. Many animation programs recognize files named this way as an image sequence. You can take advantage of this and load the whole frame sequence at once.

Note: You don't have to save images in Photoshop format. This format is just my personal preference. You can choose any of the other true color raster formats such as TIFF or PICT or BMP. Just don't use a lossy format such as JPEG or a format that isn't true color like GIF. The reason is that when the finished animated GIF is created the color depth will be reduced to a maximum of 256 colors. You don't want to start with a limited palette. Rather, you want all the colors available before the GIF animation is generated.

12. Next, you will see a dialog. Use the following settings circled or underlined in the graphic below:

RGB Color
Anti-aliasing
1 to 1 Size
72 dpi resolution

We want RGB color (24-bit True Color). The GIF file format only supports a maximum of 256 colors. If you save the frames as individual GIF images, each will have a different palette and and there may be flickering between the frames because of the different colors. By saving the frames in True Color, the animation program will generate a common palette for all the frames.

Anti-aliasing will give the images a smooth appearance. Otherwise the images will appear jagged.

Choose a 1 to 1 size. If you want the finished animation to be smaller or larger, then adjust this amount.

Since the finished animation is for a screen display, choose 72 dpi for the resolution.

You will use these same settings to export each frame in this tutorial.

13. While the first frame is still selected, duplicate it using Edit > Copy followed by Edit > Paste, then drag the duplicate to the right of the second frame and position it over the second frame in the template.

14. Switch to wireframe view and position this new frame directly over the template. Next, we'll reposition and shape the eyeball.

15. Zoom in on the eyeball and select it with the Pick Tool. Reposition it over the template as shown below.

16. The eyeball should be positioned over the template similar to the graphic below. Next we need to reshape it.

17. Starting from left to right in the image sequence below, using the Shape Tool, double-click to insert a new node and change it to a cusp (circled below left). Similarly, insert another node opposite the first (circled second from left) and change it to a cusp as well. Drag the top handle inwards toward the cusp. Next, select the topmost node and delete it (circled third from left). Finally, drag the handle of the left cusp node downwards (far right).

18. The frame is ready to export as a bitmap image. Marquee-select the frame then click File > Export....

19. Export the frame using the same settings as in a previous step. Give it the same filename as the one before except end it with a "2". Make sure to choose "Selected Only" (circled below) just like before.

Click to enlarge