Home >> Software Help >> ImageReady >> Animated GIFs

Using ImageReady to create Animated GIFs

1. Create a seperate layer for each element you wish to animate

2. Window --> Show Animation

3. Add new frames to the animation

4. For each frame, show and/or hide layers so you see on the canvas only what you want that frame to contain.

5. You can also tween your animation, and have ImageReady create the frames in between two different states. Use this to fade alpha values or move the postioning of an element.

6. When you're done, choose Optimize Animation (which is under Tween in the extra options shown above)

7. Then make sure your optimize settings are set to GIF and not JPEG (which doesn't permit animation) To make sure go to Window-->Show Optimized and set to GIF

8. File-->Save Optimized As

9. Place the GIF in your HTML page like you would any other image.

Other Tutorials for Animated GIFs in Image Ready:

Create and Animate Masked Images - Create animations that appear inside text or an object using a clipping group mask in ImageReady

OR... You can Visit this guy's tutorial: A Simple Animated Rollover using ImageReady

Adobe's Tutorial: Add animated Rollovers to your Web pages - in pdf format or on the Web

The Basics of Animation:

Creating Animation - Screenshots of the basics

Animated GIFs in ImageReady 2.0 -

Animating with Layers - Step-by-Step tutorial from Adobe's ImageReady Tips and Techniques

ImageReady Animated Gifs - Learn the fundamentals of creating and animating GIF images in Photoshop 5.5 and ImageReady 2

One Day ImageReady Tutorial - also from WebMonkey, includes how to animate in ImageReady