ImageReady notes: Animated GIFs
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Animated GIFs are sequences of images displayed over time.

Creating and Editing:

In Photoshop CS, use the animation palette in conjunction with the layers and web content (rollovers in 7.0) palettes.

• Each "cell" or frame of your animation should be on a separate layer.
• OPEN the animation palette under submenu: WINDOW. You should see one frame of your animation.
• Click the triangle (drop-down menu) in the upper right corner to add or delete frames.
• Once the new frame is added, adjust your layers by turning the visibility on or off.
• Press the play button at the bottom of the animation palette to test.

To add a frame in the middle of the animation, click the frame in the animation palette that will proceed the new frame and then click triangle (upper right) - NEW FRAME.

To change position of a frame, click and drag it to a new position in the animation palette.

To TWEEN (from the word between - adds smoothness to transitions):
• Choose a specific layer.
• Choose a specific frame by clicking on it.
• Click the TWEEN button at the bottom of the animation palette (looks like 4 floating circles - 2 left of trash can).

SAVE OPTIMIZED AS: yourFILE.gif and now you are ready to load into your HTML doc like any other image.