Art 444 Lecture Notes

Syllabus
---------------------

Calendar/Schedule

---------------------

Lecture Notes

---------------------

Projects

---------------------

Resources

---------------------

Student Work

Art 444 Lecture Notes

Creating Animated Gifs with ImageReady

A GIF animation displays a series of static sequential images one after the other giving illusion of movement. In the past most Web designers used a shareware utility called GifBuilder to create GIF animations. For this class we will use ImageReady, the web optimization software that comes bundled with Photoshop 5.5 and above.

To begin, initiate ImageReady by starting the program directly or by toggling to it from Photoshop (use the toggle icon at the very bottom of Photoshop's Toolbar.) This way you can open a document you have been preparing in Photoshop for animation. Click the Optimized tab on the top of the document window and set your Optimize palette to the correct settings (be sure to set the color settings so final file size will be as small as possible. Note: Jpegs can not be animated this way (that's why they call them Animated Gifs!)

Creating a Frame-By-Frame Animation:

You will now need to open the Animation palettein ImageReady: Window> Show Animation. If you saved the various parts of your animation in Layers you should also open your Layers palette. You will now see the first frame of your animation appear on the animation timeline. The layers that are visible will determine what appears in this first frame. To add a new frame click the arrow on far top righthand select New Frame. Now change the layer visibility settings to a new frame in your animation sequence. Add frames until you have completed the stages of your animation. You will now need to set the Frame Delay of your animation which will determine how long each frame will appear during the course of the animation. Each frame's delay setting can be set independently. To test your animation, click the playback button on the Animation Timleline. Note: You must be in Optimized mode for the animation to appear. To prepare your animation to be saved, click the arrow again on the top right and select Optimize Animation making sure the Bounding Box and Redundant Pixel Removal are selected. Select whether you want the animation to Loop Forever or for a specific amount of times in the bottom far left of the Animation Timeline. Now go to the File Menu and select Save Optimized As... to save the final animated gif. You can playback the finished animated Gif by dragging & dropping it into the browser window.

Animated Gif Tweening Options:

You may also change Tweening options using one layer of artwork. There are 3 tweening parameters available: Position, Opacity and Layer Effects. Select Tween in the upper right pull-down menu of the Animation palette. Determine which layers you want to Tween; All Layers or Selected Layer. Select the proper parameter setting e.g. If you want to change the position of a layered object you would first create a new frame with the object placed at the new position and would then select Tween - Position. Now select Tween with Previous Frame or Next Frame and determine how many frames to add between the first & final frames. Click O.K. and you will see the in-between Frames appear. Test your animation with the playback button.

-- To change Opacity during an animation, create a new frame and change the Opacity setting of the layer in the Layers palette. Follow the steps above for adding a Tween (using the Opacity parameter rather than Position.)

-- To animate various Layer Effects during an animation, create a layer effect in Layer> Layer Style. Some of the Effects you may apply are Drop Shadow, Outer Glow, Bevel & Emboss. Follow the steps above for adding a Tween (using the Effects parameter rather than Position.)

Other options include Reversing a series of selected frames. You can also apply several Parameter effects at once to create complex animations. Note: If you want to save your animated Gif with a transparent background be sure that the background of the layer is not filled and shows the checkerboard pattern behind it. You should also make sure you save it with the proper Matte color selected (click the Show Options in the upper right pull-down of the Optimize palette.)