Taking Your Talent to the Web

237

Figure 9.12

PNG a ding-ding. On the Audion site, you can bask in the glories of the PNG format—glories that include true alpha channel transparency, rich color, and crisp detail. (But only if you’re packing the right browser.)

Notice that the PNG format offers true alpha channel transparency—it matches any background you drag it over. No more halo effects caused by mismatched anti-aliasing, no more ring around the collar. Notice too that PNG offers crisp imagery as well as rich color.

Notice that the page only works in IE5 for the Macintosh. Bummer. Eventually all browsers will support PNG natively.

ANIMATED GIFS

Animated GIFs are nothing more than a series of frames (or individual GIFs) that have been joined together to create the illusion of motion. They can loop endlessly or play once and then stop. We could include a screenshot here, but what’s the point? If you haven’t seen animated GIFs, you’ve never used the Web. (Hint: look at the ad banners that clutter most commercial content sites—web animation in a nutshell.)

Although the GIF format supported the embedding of multiple images in the late 1980s, it was not until 1995 or so that Netscape figured out how to hack the format’s multi-image capability to create flip-book-style animation. (Basically, Netscape did this by appropriating a Comments field and some unused but reserved bits in the GIF89A file format.)

238 HOW: Visual Tools: Creating Animations in ImageReady

Back in the day, web designers used free shareware tools to create animated GIFs, after first preparing each individual image, saving it as a GIF, and then running all resulting GIFs through DeBabelizer, a cumbersome color management tool that ensured that the colors would match between frames. (Nothing ruins the illusion of motion faster than an unexplained color shift between one frame and the next.)

Today all that work is merely a memory because Photoshop comes with ImageReady, and ImageReady makes it easy to create, optimize, and save GIF animations.

Animation for its own sake is charmless, abrasive, and amateurish. Good web designers use animation as they use everything else: with taste and skill in support of a concept and brand image. The creators of www.k10k.net employ animated GIFs well. The animations are revealed when rolling over the miniature content header graphics.

Care should be taken to avoid wasting bandwidth when creating animated GIFs. If one image uses x bytes, then ten images theoretically use 10x bytes, and your web page might bloat as a result. Fortunately, web designers can trim excess fat from their animations by telling the software to animate only the parts that change, rather than redrawing each frame in its entirety. This process is explained in the next sections. Web designers also can optimize their animations by leaving out inessential in-between frames, by keeping their images small (50 x 50 is better than 100 x 100), and by creating graphics that can be rendered in as few colors as possible.

CREATING ANIMATIONS IN IMAGEREADY

Adobe ImageReady simplifies the process of creating animated GIFs by allowing web designers to use Photoshop’s layers as a series of frames and enabling them to manually change the location of elements from one frame to the next.

For instance, if you wish to animate an arrow, you can draw the arrow on one layer in Photoshop then jump to ImageReady and open the animation palette. Create a new frame and drag the arrow manually to the left or

Taking Your Talent to the Web

239

right. Create a third frame and drag the arrow again. ImageReady “remembers” the location of each arrow and will render an animation as a result of these manual movements.

ImageReady can also generate tweens automatically. Start with an arrow on the left. Create a new frame. Drag the arrow to the right. Choose the Tween command and instruct ImageReady to tween between the first and second frames. ImageReady generates a smooth flow of images. You can then use the Optimize palette to ensure color consistency from the first frame to the last. Keep in mind that the more you tween, the smoother the motion but the larger the overall file size.

We could blab on about this, but the Photoshop owner’s manual does a great job of explaining everything. The way we see it, if you own Photoshop, read the manual. If you don’t own it, there’s no sense in reading about it here and probably not much sense in planning a web design career. (Gosh, that sounds like a product endorsement.)

TYPOGRAPHY

A designer’s interest in typography usually borders on obsession. On the Web, you’ll get plenty of opportunities to indulge your fetish. As part of establishing the look and feel of a site, the web designer is responsible for all of its typographic choices, including

■Body text typography (CSS)

■Logo (if not preexisting)

■“Type GIF” headlines, subheads, and so on

■Navigational typography (menu bar)

Body text typography is controlled with Cascading Style Sheets (CSS), a subject so important we devote an entire chapter to it (Chapter 10, “Style Sheets for Designers”) and still scarcely do it justice. All we’ll do here is remind you that 99% of the Web is text, most of it intended to be read, and that there is neither a reason nor an excuse to create hard-to-read text on your web pages.