Computer Graphics-Tutorial

GIF ANIMATION TUTORIAL

Gif Animations can be made in a number of different ways using different software. The one above was made using two in combination - Adobe Illustrator and ImageReady, which is a part of Abobe Photoshop.

Creating an animation in this way is fairly simple and gives you a chance to see how layers work in both programs (layers are one of the most useful features in both Illustrator and Photoshop) and how ImageReady coverts layers into frames in its animation tool.

Open Illustrator and create the first image of your animation. Make sure the Layers palette is open when you can see the first layer. At the right there is small arrow. Click on it and then click on Duplicate Layer (this will be repeated for every layer you need). For this animation it is duplicated four times. Each time it was duplicated the image was increased in size 120% and the color was changed.

When the layers are done the file is both saved as an Illustrator file (.ai) - so it can be returned to for any changes that need to be made - and exported as as Photoshop file (.psd).

Open Photoshop and then on the Tool Bar go to Edit in ImageReady. Within ImageReady open the exported Photoshop file. The file will appear in three places - the primary window, the Layers palette and the Animation palette.

On the right on the Animation Palette click on the small arrow and click on Make Frames from Layers. Select the first two Frames , using the Shift key to select the second Frame. Return to the small arrow on the right, open that Menu and click on Tween - a pop-up will appear that allows for how many frames to add. In this animation three frames were added.

On the left bottom of the Animation palette there is another small arrow. It menu allows a choice of how many times the animation will repeat. For this one the number is three.

Next go to File> Save Optimized.

Insert in a web page as an image. Refresh the page to view it.