Creating Animated GIF Images

Remember how PNG-8 and GIF were compared and found to be virtually identical? Well, here's one big difference that has nothing to do with file size or image quality: PNG images can't be animated, and GIF images can. So if you want to make your images hop, skip, jump, or flash on and off, you need to use GIF. The ability to animate graphics from within Photoshop is new to CS2, and the tools to do it are found in the Save For Web dialog box.

Although a primitive animation standard compared to Macromedia's vector-based Flash program, Photoshop's GIF animation can be very effective when used properly. "Used properly" is the operative phrase here. Anyone reading this who still remembers the Web of the early '90s, when every home enthusiast was packing his or her pages with animated whirly-winks, will appreciate the veracity of that statement. In fact, nearly all Web advertising relies on animated GIF files. (Yet another point in favor of PNG.) Sometimes, to get someone's attention, you have to wave at them.

If you open an animated GIF file in Photoshop, it automatically places each frame on an independent layer. Figure 14-24 shows an animated GIF file opened in Photoshop. You can see the layers of frames in the Layers palette on the right and the Animation palette (Window Animation), with each layer assigned to a frame, along the bottom.

image from book
Figure 14-24: A simple animation, showing the Layers and Animation palettes.
Tip  

You can test your animation in the Save For Web dialog box. If the image doesn't have frames and animation settings in place, the Animation buttons ” across the bottom of the dialog box, just above the Edit in ImageReady button ” are dimmed.

STEPS: Creating an Animation

  1. Create an image in which each layer acts as an individual frame of the finished animation .

  2. Access the Animation palette (Window Animation). The first frame is already waiting, displaying whatever layers you currently have active in the Layers palette.

  3. Click the New Frame button (labeled in Figure 14-24) to insert the next frame and make any necessary changes to the visibility of your various layers to advance the action in your animation.

  4. Increase or decrease the amount of time a frame stays on-screen using the pop-up menu located directly beneath the frame on the Animation palette(see label in Figure 14-24).

  5. Choose how many times your animation will play. The button appears as "Forever" by default, but you can choose Once or Other, which allows you to specify a number of replays.

  6. If your animation simply requires moving an object from point A to point B, create only a single layer. Place the object in its starting position in frame 1, click the New Frame button in the Animation palette, and go back to your layer and reposition the object in its final location.

  7. From here, click the Animation palette's Tween button (meaning to create the frames "in between," labeled in Figure 14-24). The Tween dialog box(Figure 14-25) provides fields to specify how many frames Photoshop should place between your two starting frames, as well as which direction the tween should go (tweening between the selected frame and the frame before it or after it, depending upon which frame you have selected at the time).

    image from book
    Figure 14-25: The Tween dialog box allows you to specify how many frames Photoshop should place between your frames, as well as which direction the tween should go.

After you've created your animation, you can play it using the buttons labeled in Figure 14-26. You can save the animation and preview it by opening the Save For Web dialog box ” within the dialog box, use the Preview in Default Browser button (the globe/question mark combination) at the bottom of the dialog box. If you like the way the animation runs ” how many times it loops , how long the individual frames remain on-screen ” go ahead and save it. You can Cancel out of the Save For Web dialog box and go back to the main workspace (and the Animation palette) to make any changes your preview indicates are required.

image from book
Figure 14-26: A big image will load faster if you slice it up first, creating several smaller files that work together to build the image on the Web.
Note  

Click the options menu (click the triangle button on the far right end of the long Animation palette) to choose commands that mirror several of the palette's buttons (New Frame, Delete Frame, Copy Frame, Tween), and to control how your frames and layers are built and relate to each other.



Photoshop CS2 Bible
Photoshop CS2 Bible
ISBN: 0764589725
EAN: 2147483647
Year: 2003
Pages: 95

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net