|
|
 |
|
|
University Information Technology Information Center
Creating Animated GIFs An animated GIF is a single GIF file that was created from multiple "frames". You can create these frames in photoshop or any other graphics program that saves images as GIFs. Then, to put them all together in one animated image, you need a special animator program. I recommend GifBuilder 0.5 for the Macintosh or GIF Construction Set for Windows. The former is freeware and the latter is "shareware" which costs $20 to register. Animated GIFs can make things appear to move, change colors, appear and disappear, etc. They can run once and then stop or they can run continuously. Although opinions about what makes a good animated GIF vary, I usually make my animations run only once, when the page first loads, and then stop. That way readers are not distracted by continuous motion while trying to read the rest of the page. An example The following is an example of an animated gif. To watch it animate again, click on it and press the "Reload" or "Refresh" button in your web browser:
 The following images are the individual frames created in Adobe Photoshop:
 Creating individual frames I used Adobe Photoshop to create the frames above. For more information about creating basic Photoshop images, see the Basic Graphics Class Handouts. - Start a new image in Photoshop, about 460 pixels wide by 100 pixels high. This will be the "base" of your animated image.
- Select the color for the title and use the type tool to put a title on the image. Then use the select tool to select a box around your title. Under the Edit menu, choose "crop" to crop down the size of the image to just what you need.
- For each distinct letter in your title, start a new image, about 100 by 100 pixels. Select the new color and use the type tool to put one letter in each image. Make sure the letters are the same font and size as the original image.
- For each of the letter images, zoom in a couple times and then use the select tool to draw a box around the letter, leaving very little white space around the letter. Under the Edit menu, select "crop".
- Now, thinking ahead: we know that all the frames are going to become part of one GIF, and that GIFs can only have 256 (indexed) colors. If we index the colors in each frame as we go along, we may end up with many more than 256 colors in the end, and the image won't look good. So we need to create a "palette" to apply to each of the frames. This is easier than it sounds. Just create a new image, maybe 200 by 200 pixels. Using the select tool, select part of the first image (the one with the whole title in the first color) and copy it (Edit:copy). Then click on the new image and paste it (Edit:paste). Do the same for one of the second-color letters. Now in that new image you should have (somewhere, anywhere) letters in both colors. Choose Mode:Indexed Color. In the option box, choose "8 bits/pixel", "adaptive" and "diffusion". Click OK.
- For each of the individual frames you've created, choose Mode:Indexed Color, but this time in the option box choose "previous" instead of "adaptive".
- For each of the frames, save them as CompuServe GIFs. I usually name them zoo1.gif, zoo2.gif, etc.
- Now, it isn't enough just to have all the frames. You also have to use Photoshop to figure out how they "fit" together. For example, each of the frames we made after the first one is smaller and needs to be placed in a certain place over the first frame. To do this, go under the Palettes menu and choose Show:Info. Since we want to see the mouse corrdinates in pixels, click on the small triangle in the upper corner and choose "Palette Options". Change the ruler units under Mouse Coordinates to pixels and click OK.
- For each of the smaller frames, choose Select:All (apple-a or Control-a) and then Edit:Copy (apple-c or Control-c) to copy the frame. Then go to the main frame and choose Edit:Paste (apple-v or Control-v). Move the letter into position but don't paste it down by clicking out of the selected area. Move the mouse to the top left corner (the exact corner, just to the edge of where the cursor becomes an arrow). Write down the coordinates as shown in the info box.
- Load GifBuilder. Under the File menu, use "Add Frame" to add each of the frames you created in Photoshop.
- For each of the frames (besides the first) double click on the coordinates shown, and then enter the ones you wrote down for that frame. Remember to add repeated letter in the appropriate places.
- If desired, change the delay time between the various frames by double clicking on the time shown. You may also choose to set whether the animation is repeated under Options:Loop
- You can preview the animation by choose Animation:Start, but remember the preview is considerably slower than it will run in Netscape.
Some Notes If you want something in your animation to appear and then disappear, you need to create a cover-up frame. For example, if we wanted our letters in the above example to change to light blue then back to dark blue, you should make a light blue Z frame, then a frame with a dark blue Z next to a light blue o, then a dark blue o next to a light blue o, etc. This will restore the color of each letter to dark blue and make it look like the color is along the word. Although GifBuilder has an option that also seems to do this more easily, it does NOT work when you view the image in Netscape. Be careful whenever you use the select tool! If you have something selected and you click inside the selected areas, you will drag that area somewhere you don't want it to go. If this or any other error occurs, IMMEDIATELY stop and choose Edit:Undo.
|
