When Adobe began bundling its stand-alone Web-graphics application, ImageReady, with Photoshop 5.5, the pair were a powerful one-two punch for Web designers. Photoshop, with its advanced image-editing features, provided the tools necessary for everyday graphics work, while ImageReady came packed with tools for creating dynamic Web elements such as rollovers and animations. In the latest versions of Photoshop and ImageReady (which has jumped from version 3 to version 7, to bring it into parity with Photoshop), Adobe adds some clever twists on image optimization, as well as several interface improvements geared toward increasing the productivity of Web-graphics pros.
Straight to the Web
The most essential and frustrating day-to-day task Web designers face is optimizing graphics for the Web--finding that delicate balance between maximum image quality and minimal image size. So it's not surprising that when Adobe looked at upgrading Photoshop and ImageReady, it focused most of its attention on the programs' optimization tools. ImageReady 7 and Photoshop 7 both feature several new tools aimed at giving designers more flexibility and better results when exporting their images to the Web.
Setting Your Priorities Optimizing Web output is all about making tough decisions. For example, keeping your company's name crisp and legible may be more important to you than preserving every detail of a background image.
Photoshop 7 and ImageReady 7 make it easier to tailor your GIFs and JPEGs by letting you prioritize layers of text and vector art, keeping them relatively intact when it's time to compress your images.
By clicking on a small button in the Optimize palette, you can set a range of quality levels for your images; the software then calculates appropriate settings (dither and lossiness for GIF; quality for JPEG) for your image and attempts to maintain as much quality as possible in those text and vector layers. The end result can be GIFs and JPEGs that retain crisp, clear text even though other parts of the images are dithered or show greater evidence of artifacts.
Transparent Changes The GIF file format doesn't support partial transparency. As a result, when you create a semitransparent effect on a GIF image--a feathered drop shadow, for example--you currently have to matte that image, replacing the semitransparent pixels with opaque ones, to match the background color of your Web page. If you don't, you'll be left with a strange halo effect where your smoothly antialiased text or drop shadow ought to be. Unfortunately, matting your graphic also requires that you open and re-export the image with a different matte every time you change your page's background color.
To address this dilemma, Photoshop 7 and ImageReady 7 offer dither transparency. This option creates the illusion of partial transparency by combining transparent and opaque pixels in a dither pattern. As with standard image dithering, you can choose from three different dither-pattern algorithms when setting up a transparency dither.
It's a clever idea that works, more or less--a GIF with dither transparency will look equally good on any solid-color background and will look fine even on a multicolored pattern background, unlike images with solid-color mattes. Unfortunately, the dithering is still rather visible (see "A Different Dither" below), and most conscientious Web graphics designers will likely continue to use matte colors (and create multiple iterations of graphics for pages with different background colors) rather than sacrifice the quality of their images.
Easy Access Another addition to both programs is a simplified way to define a GIF file's transparency. You can now quickly map any color to transparency by clicking on a button in the Color Table.
In both programs, the Color table has also been changed to give users much better feedback about changes to their images. Now when you change a color in your image--including making it transparent--the Color Table displays both the original color and the new color in diagonal wedges of its square.
In previous versions of ImageReady, creating rollovers--images that change when you move your mouse over them--could get confusing, requiring numerous, repetitive trips between the Rollover palette and the Layers palette. And it was far too easy to misassign layers or button states. ImageReady 7's new Rollover palette aims to change all that.
Unlike the old Rollover interface, which was modeled on the timeline-based Animation tab, the new Rollovers palette more closely resembles the Layers palette. The Rollovers palette lists each separate rollover action of your image, and beneath each action there's a breakout of what button states you've currently got programmed. By using the palette, you can make changes to rollover states with ease, especially if you're creating disjointed rollovers (where mousing over one item causes another item to change). You can also opt to have the Rollovers palette display animation states, making it your one-stop interface for modifying your design's dynamic characteristics.
Users of Photoshop's Web Gallery feature, especially those who are concerned with copyright infringement, will be happy with the new Watermark feature, which automatically generates watermarks, including ones that contain copyright information, photo or illustration credits, and just about anything else you might imagine.
In general, the new Web features of Photoshop and ImageReady 7 are modest in nature. But there's one big exception: ImageReady's Rollovers palette. If you've ever struggled while creating complex dynamic interfaces in ImageReady, you may feel that this one feature addition is worth the upgrade price.A Different Dither Traditional transparent GIF effects (top) are attractive, but must be matted to a particular background color. Using ImageReady 7's dither-transparency feature, you can create a transparent effect that looks the same on any background (bottom).