Webwork
/
Photoshop - GIF Animation

In addition to its ability to compress large graphic files, a single GIF can contain multiple images and display them sequentially making it a useful format for simple frame animation.

As with other types of animation, you first need to make a series of individual frames/drawings and then save them as a single GIF. Photoshop has tools that make this easy.

Photoshop Layers:
anima_layers
Individual Images:
a an ani anim anima

To export the animation, open Photoshop's Animation palette:

animation_palette

In the Layers palette, select the items you want to appear in Frame #1 of your animation.

photoshop-a

In the Animation palette, create a new frame and, in the Layers palette, select the items you want to appear in Frame #2 of your animation.

photoshop-an

Keep going until you're done. At this stage, this animation has a total of 5 frames:

photoshop-anima

Tuning the Results

Once all of the frames are in the Timeline, play the animation to test pacing. This animation needed a pause between cycles so an empty, 1-second frame was added at the beginning and a 1-second pause was added at the end.

anima_tuned

Once the animation is tuned, you save it as a GIF using Save for Web and Devices.

Source:
<img src="a-n-i-m-a.gif" width="336" height="98" />
Web page:
a-n-i-m-a

Variations:

Source:
<img src="anima-fade-in.gif" width="336" height="98" />
Web page:
Source:
<img src="anima-dropdown.gif" width="336" height="98" />
Web page:
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma