Animated, Interactive, and Data-Driven Graphics


► Jump to ImageReady for Animation and Rollovers 394

► Use Layers to Build Animation 395

► Use the Animation Palette to Build Animation 398

► Copy and Paste the Contents of Frames 400

► Preview an Animation and Adjust the Timing 400

► Tween Frames for Instant Animation 401

► Optimize GIF Animations 403

► Preview Animation in a Browser 404

► Animate with the Liquify Command 405

► Place Layered Photoshop Files into LiveMotion when Creating Flash (SFW)

or QuickTime (MOV) Content 408

► Use the Rollovers Palette to Build Rollovers 409

► Add Layer Styles for Quick and Easy Rollover Effects 412

► Create Rollover Styles to Speed Development of Navigation Systems 413

► Preview Rollovers 414

► Optimize Rollovers 415

► Combine Animation and Rollovers 417

► Create an Image Map 417

► Preview and Optimize an Image Map 420

► Combine Image Maps and Rollovers 420

► Create a Template Used to Bulk-Produce Multiple Graphics with Adobe AlterCast 421

► Create a Web Photo Gallery 423

► Create High-Resolution, Web-Friendly Images 425

If you've spent any amount of time on the Web, you know that it's not all flat, static graphics— things are moving and doing things! For example, buttons depress when you move the cursor over them, photos change, music plays, advertisements try to get our attention, navigation bars collapse and expand, and pages otherwise react to our input.

While some of these things are primarily accomplished outside of a graphics program like Photoshop, others can be created and developed almost entirely within Photoshop's sister program, ImageReady, which is customized specifically for web design.

This chapter focuses on providing tips related to other techniques for web design not previously discussed in other chapters. For the most part, these tips fall into three key categories:

• Data-driven graphics

A few other tips relate to more interactive ways to use traditional web graphics, such as with image maps and web galleries. Before I dive into the tips, consider the following overviews of the three key areas discussed in this chapter.


In its simplest form, animation involves the display of two or more images shown in succession, to give the appearance of motion. Remember those little flip books—the ones that look like a mini-filmstrip if you flip the pages really fast? Those are an example of the most basic form of animation.

At the other end of the spectrum, you might find something like Disney's The Lion King, which was a fully animated 90-minute cartoon, complete with music and voice-overs. Even some live-action movies like Titanic include forms of animation—such as computer-animated people in crowd scenes—with truly amazing high-tech special effects.

Two popular animation formats on the Web are GIF and Flash. While Photoshop is not capable of saving either type of format, two of its sister applications—ImageReady (which ships with Photoshop) and LiveMotion—take care of that problem and integrate quite well with Photoshop files.

GIF animation is by far the easier type to implement. As such, GIF animation is popular and has been for some time. Lucky for us, Adobe packaged ImageReady—a fully capable GIF animation tool—with Photoshop.

One of the major benefits of GIF animation is its capability to reach the widest possible audience, given that it doesn't require a plug-in or certain version of browser. An animated GIF is saved as a single GIF file, even though it contains two or more frames of animation.

The most common uses of animation GIFs typically involve advertising—albeit somewhat annoying advertising. This is because, for better or worse, movement on an otherwise static page catches our eyes. And advertising on the Web is certainly all about catching the user's eye, as well as their full attention.

Was this article helpful?

0 0

Post a comment