Class 4: Creating Animated GIFs

An animated GIF is actually a series of static images that are displayed one after the other in sequence, much like a slide show. The GIF file format allows for multiple images to be stored inside a single GIF document.

Photoshop can only be used to prepare images for animation, whereas ImageReady is where you can actually write animated GIFs using the animation and layers palettes.

GIF file format supports animation, whereas JPEG format does not. If you do use photographic images, be sure to add Lossy compression, it will make a big difference in file savings.

Animated GIFs do not require Plug-Ins, they are supported by all Web browsers.

The HTML code to include an animated GIF is no different from that of a static GIF. No extra programming knowledge is required whatsoever because the same <IMG SRC=”animation.gif”> tag that inserts regular GIF files into Web pages works for animated GIF files as well. Making animated GIFs involves using a software application that can create the format for you. Some software besides ImageReady includes: Macromedia Fireworks, GifBuilder (Mac Only), BoxTop Software’s GIFmation and others listed on pages 344 & 345 of your textbook.

However, the file size of an animated GIF will be larger then that of a static GIF. Page 105 of your textbook gives a good example on file sizes and animated GIFs.

Important Guidelines for Animated GIFs:

Animation calls attention to itself more than static images on a page. Make sure the content of your animation is something you want the most attention called to on your page. If it isn’t, the animation will effectively detract from what you’re trying to communicate.
Animation that loops (repeats or plays back endlessly) is much more annoying then an animation that only plays once or twice.
Try not to use more then one animation on a page. It may become overwhelming if there is more then one animation playing.
Make sure your animation loads quickly. Optimize it!

Finished Animations:

Animation.gif

Flower.gif

Flower2.gif

Photos.gif

Animation Terms – open animation.gif file

Animation Palette - where you create animations in ImageReady. It contains:

Frame Number - each frame(box) is given its own frame number
Looping - Forever, Once, Other (how many times the animation plays)
Frame Delays – used to alter the timing of each or multiple frames
Playback controls
New Frame – creates a new frame by duplicating the selected frame
Delete Frame

1. Frame-by-Frame Animation with Layers: Create this by turning on and off different layers over a series of frames

Open animation.gif to show class example. The word animation is moved by writing the word animation three times on three different layers and selectively turning different layers on and off

Open animation.psd

Window>Show Layers, Show Animation

Click new frame to create duplicate of the first frame, then create one more frame (3 frames total)

Now on frame 2, have the layers “animation 2” and “white background” visible

Now on frame 3, only have layers “animation 3” and “white background” visible

Change Once to Forever

Preview in a Browser. Will only know true speed when displayed in a browser

Select all frames and change frame delay to .1 seconds.

Now change to 1 second, too slow! Change back to .1 seoncds

2. Optimizing an Animated GIF

Go to Windows> Show Color Table, Show Optimize

Change lossy to 38 to make file smaller. (a new feature in ImageReady!)

File>Save Optimized As

3. Making a Transparent Animated GIF

Turn off eye icon for white background in layers palette. Leaves behind checkerboard pattern, this indicates a transparent GIF

Change you just made does not take place across entire animation, so therefore select the white background layer in the layers palette and select in the animation palette “Match Layer Across Frames”

Select a background image. File>Output Settings>Background, select fine_bg.gif

Make sure in the Optimize Tab, that Transparency is checked

Preview>Browser, image should have a background now! But need to get rid of unattractive white edge.

Return to ImageReady and open fine_bg.gif, and eyedrop an orange color

In optimization palette, click matte color, foreground color

Now preview again and white edge is gone!

1. Opacity Tween: One layer of artwork changes opacity over a number of frames

open flower.psd

select flower layer and change opacity to 1%

make new frame in animation palette, make this frame have opacity of 100%

Goto upper arrow and select TWEEN

Add 10 frames & select opacity

NOW, we will have it fade back in again.

Select all frames

Make new frame, this will duplicate ALL the previous frames (since all were highlighted)

Now click arrow>reverse frames. This puts all the frames in the REVERSE order

Click on forever & play!

Click on frame 12 and change timing to 1.0 second. This will cause it to pause in the middle

3. Position Tween: One layer of artwork changes position over a number of frames. You can create a tween by taking two different frames (called frames) and applying the Tween command, which will create the additional frames automatically

open flower.psd again

make sure flower layer is selected & at 100%

use move tool to move text to top of document window

make new frame, move text to bottom of this frame

>Tween, add 5 frames, Position checked

Play results, then arrow>delete animation

4. Layer Effects Tween: You can apply one layer of artwork a Layer Effect, which changes over a number of frames

Select flower layer and move back to middle of image

Then select (f) in layers palette, & gradient overlay (uses foreground & backgr colors)

Add a new frame

Window>Show Layer Options/Style, can change gradient settings in here

Change paint bucket to a purple color. Reverse gradient by checking Reverse box.

Tween, Previous Frame, 5 Frames, Effects

Play

1. Animated Slide Show

Create a slideshow of your photos, have one show up, then blend into another photo, etc.

open photos.psd

make a frame for each photo (turn one or the other off with eye) (3 frames total)

Select first frame and >Tween, Opacity, add 5 frames, next frame, all checked

Now select the last frame, and select TWEEN, select previous frame

Play

Now select last frame, add a new frame, only have rock layer in layers palette selected

Tween, Opacity, 5 frames, previous

Play

Know this study guide and Chapter 21 from your textbook.