Web Graphics

Animated GIFS

Animated GIF 26 frames at 48K

A very popular professional Web graphics application used to create animations is ImageReady. ImageReady is included with Photoshop 5.5 and later versions. A better way to create animated graphics for the web is Macromedia Flash. Check out Flash on our learn/flash pages, or go to Macromedia.com

Like image maps, there are inexpensive tools and professional Web graphics programs that can create animated GIFs. An animated GIF consists of several frames, each of which is an individual GIF file. The individual frames can be created in any graphic application that supports the GIF format. A special animation utility can then take the individual frames and save them as an animated GIF.

To create an animated GIF without photoshop, begin by constructing individual frames using your favorite graphics program. Each frame must be the same size. Then import them into your gifbuilder software and save as a GIF.

Creating Animated GIFs with Photoshop and ImageReady: A Tutorial to create an animated GIF header.

Completed Animated GIF from this tutorial at 48K

Same Photoshop File with different color and type choices gives a much different feel.

Open up Photoshop (version 5.5 and newer)

Create a new document (File/New). Background should be Transparent, but not necessary. Lets create a new file that is going to be a header or title for a page that is 60 pixels h x 600 pixels w.

Go to PhotoShop/Preferences/Guides, Grid and Slices. Change the "gridline every" amount to "10" pixels. Subdivisions can be 1.

View/Show Grid, Snap should be checked, and Snap to Grid should be selected.

Look at the Layers pallette, and from the top right arrow on the pallette, use the pull down menu to create a new layer. If you have a transparent background, you make want to make a temporary background layer to cover the transparency "checkerboard" which can be confusing to see along with the grid.

Create a new layer that will be an element in the animation. For this example, I'm going to make some horizontal lines on this layer using the horizontal 1px selection with the shift key (to be able to drop a selection line on all the horizontal lines on the grid) the grid and "snap to grid".

Create a new layer. For this layer, I'm going to make some verticle lines the same way with the verticle 1px selection. (these can really be on the same layer, but everything can be animated, so I keep most things separate)

Create a new layer. This is going to be for one layer of "tiles". The way I did these layers was by making a fixed size selection box of 10px by 10px. and then holding the shift key, placing random selection boxes on the grid (snapping to the grid used to make the horizontal and vertical lines layers) It's easier to do this if you zoom in a little. (If you do drop one box in the halfway area in the grid, you can undo or step backward and with the shift key depressed, continue dropping selection boxes until you have them randomly placed all over the grid.

Fig 1. showing filled selection boxes (tiles) as well as the two line layers and grid. Background is invisible in these examples.	Fig 2. showing new layer with filled selection boxes (tiles) as well as the lines and grid.	Fig 3. showing all separate "tile" layers completed.

When you have a bunch of selection boxes, you need to fill these with color. For my example above, I used gradiations exclusively, changing the color gradiation and direction for each successive layer.

Repeat steps 8 and 9 until you've filled all the grid up. The example above has about 14 "tile" layers. The more boxes you fill on each layer, the faster it will play and fewer frames the animation will have, but it will look smoother the more layers you use.

Let's create some text for the title. I'm creating a new layer by using the text tool. When I've got a layer of text that looks the way I want it to, I'll move this layer to the very top of the layers pallette. I added a drop shadow and a 1 pixel outline to the text.

To pop the type off the background, I want to create a dark blue gradiation layer between the text and the "tile" layers that will fade on with the text.

Create a new layer underneath the text layer. Select the top color off the tools palette and make it a darkish color, like navy blue (or any darker color). Select the gradient fill tool and select the gradient that goes from the top color to transparent. I used the linear gradient type that goes from color to transparent. Fill this new layer with this gradient vertically. If you're happy with this then you're ready to edit in ImageReady. Save your file, then if available, choose File/Edit in ImageReady. If you have an older version of Photoshop, then after saving your file, close PhotoShop and open the file in ImageReady.

Animation Palette in ImageReady.. Frame 2 is selected

ImageReady allows you to create animations by using the Animation palette and the Layers palette. The Animation palette is used to define each frame and the Layers palette defines the image state associated with each frame.

In a multi-layered image, each layer will become an individual frame.

In the Animation palette, choose Make Frames From Layers from the arrow drop down menu in the upper right hand corner. Each layer will appear as a frame in the Animation palette. Now, in the Animation pallette, select frame 1. In your layers pallette, hide the gradient layer if it appears, turn on the horizontal and verticle layers and hide everything else.

In frame two, the hor and vert lines should be on, and turn off all layers except the first "tile" layer.

In frame three, keep the hor and vert lines, the first "tile" layer, and the next "tile" layer. Keep doing this frame by frame until all the layers are on except the text and gradient layers.

You may have a few extra frames at the end that you can delete by dragging the frame to the trashcan in the same palette. The last frame at this point should be the filled "tile" and lines.

From the animation palette, from the upper right arrow pull down menu, select New frame. This should copy your last frame. In the layers palette, make the gradient layer and text layer visible.

Go back to the animation palette, select the last two frames, which should be the last one with all the "tiles" and lines, and the new frame added with the title and gradient visable. From the upper right pull down menu, select Tween. The options should be Tween with Selection, All Layers and all Parameters seleted. Add 3 - 5 frames. Click OK.

Now the title and gradient will fade on at the end.

Test it by clicking the forward arrow on the animation palette. Then test it in a browser from File/Preview in: Safari, Internet Explorer, Opera or any of browsers in the list. It should play much faster this way. It will also display file info. And...it's probably looping and driving you nuts.

To make this animation play once and stop, go back to the animation palette and change the setting from "forever" to "once". Your users will be grateful. Unless an animation is very subtle, I'd stop it.

You can set a time delay between each frame, by positioning the pointer on the time beneath each frame in the Animation palette. Click to display the Frame Delay pop-up menu. Select one of the preset times, or choose Other and set the time desired. To set the time for all the frames at one time, choose Select All Frames from the Animation palette menu. Shift+click will select individual frames and Control+click (Windows) or Command+click (Macintosh) will select discontiguous multiple frames.

Frames can be reordered in the Animation palette by clicking on the frame you want to move and dragging it to the desired location.

To save the animation, choose File/Save Optimized As. Give the animation a new filename with an extension of .gif and click Save.

The animated image is now ready to be included in the HTML document using the <IMG> tag.

Here's the complete photoshop file. (sit) (zip)