Adobe ImageReady

Web Graphics creation and optimization tools are all the rage lately and the competition should only get fiercer as the big boys continue to enter the fray. Tools like Ulead's GIF Animator and GIF Construction Set brought about the emergence of web graphics tools, but while these apps focused primarily on creating animated GIFs, the new class of products widens the scope to creation, manipulation, and optimization capabilities for all types of web graphics. The latest web graphics tools from the likes of Adobe (ImageReady), Macromedia (FireWorks), and to a lesser extent Microsoft (Liquid Motion) fill a need currently lacking in commercial graphics applications like Adobe Photoshop. And while most of the new tools may be a bit on the expensive side, if you spend any significant amount of time developing or working with graphics for the web, the high price of one of these tools is more than offset by the savings in time, frustration, and overall satisfaction. Adobe ImageReady is the perfect complement to Photoshop and Illustrator. The app gives users a complete set of tools for publishing graphics on the web. Image compression in real-time, built-in editing tools, quick and easy animation features, and batch-processing capabilities help you develop, optimize (via the LiveView window -- see Figure 1), and animate images. The interface is a breeze to get up and running with, especially for users of Photoshop or Illustrator. Many (but not all) of Photoshop's design tools have made their way into ImageReady, including key tools like marquee, lasso, eraser, pencil, paintbrush, and eyedropper; resizing commands; image adjustment commands; and Photoshop filters; and the new tools are simply intuitive web extensions of existing features in Photoshop. Figure 1. The LiveView Window Photoshop is the premier imaging software app, but it has always been geared more towards print media -- i.e. publishing images in advertisements, newsletters, magazines, etc. Rather than incorporating a complete set of web graphics tools into Photoshop, Adobe decided to develop the standalone ImageReady client instead. While many users might prefer to have ImageReady's set of web tools built into Photoshop, one advantage to keeping them separate is that Adobe will be able to release ImageReady on a faster development cycle, insuring that users have the latest tools at their disposal for the always rapidly evolving web. ImageReady is now in its second beta and is about a month away from official release. The second beta release adds several new features, including improved color reduction for better optimization, support for the recently released Photoshop 5.0, the ability to import a folder as a group of animation frames (with support for Adobe After Effects), and the ability to make a group of animation frames from a set of layers. As part of its support for Photoshop 5.0, ImageReady also offers Layer Effects, one of the new features in the latest release of Photoshop. Much like Fireworks' LiveEffects, Layer Effects allow you to apply effects like drop shadows and bevels to an image layer, and then any time the layer is modified ImageReady will dynamically update the effect as well. One particularly useful feature in ImageReady is that when you select any pixel in an image, you are not only given its RGB (Red, Green, and Blue) values but also its hexadecimal value and its X and Y position in the image. The hexadecimal value is valuable if you want to blend a graphic in with a background color on a web page. If you've been using Photoshop or a similar tool to create web images, you've probably had to open a third-party utility or an HTML editor like HotDog Pro in order to find the hexadecimal value of a color. Thanks to ImageReady, no longer will you have to leave your graphics program in order to find a color's corresponding hexadecimal value. Macromedia's Fireworks offers a similar feature except it shows the RGB values or the hexadecimal values but not both at the same time. Creating animated graphics with ImageReady is a relatively straightforward process, but unless you are creating an extremely simple animation, you'll save yourself a lot of time and frustration by using a specialized tool like Ulead's GIF Animator. GIF animation tools offer a variety of features and effects that you won't find in apps like ImageReady and Fireworks. These tools not only make it easier to create animations, they also allow you to create more effective and better optimized animations (for example, the animation in Figure 2 optimized with GIF Animator uses only 8.4 KB whereas with ImageReady it occupies 12.8 KB). Two areas of animation where ImageReady does excel, however, are in its ability to import a folder as a group of animation frames and the ability to make a group of animation frames from an existing set of layers -- two features not available in most GIF animation tools. Figure 2. The ImageReady Animation Palette Features in the current release of ImageReady include support for Photoshop API filters; editable/scalable text (a new feature in Photoshop as of v5.0), tweening (a cool morphing-like feature that blends aspects of different images, creating interim instances with transitional attributes), the ability to create client-side image maps (by assigning URLs to layers in an image), two adaptive color palette controls (straight adaptive and perceptual, which weights colors for human sensitivity and significantly improves quality in most cases), a lock button on optimized color palettes that allows you to "lock down" specific colors so that they won't be dropped when reducing the overall number of colors, and a web shift button for automatically shifting a specific palette color to the closest web-safe palette color. Additional features include a Droplets tool that allows you to drag and drop a batch of files and have them automatically compressed using a set of user-defined options, a history palette that keeps track of every compression scheme you've tried for an image and allows you to step through previous versions to compare image quality, a browser dither view that simulates the preview of a browser on an 8-bit (256 color) display, automatic rasterization of Illustrator and other vector-based image files, gamma preview and correction capabilities that automatically account for differences between viewing images on Windows and Mac platforms, and automated image slicing capabilities (allows designers to split an image along user-defined guidelines for more precise layout control on the web). ImageReady definitely isn't perfect, which shouldn't really come as a surprise considering the client is still in beta release. The client is quite buggy in a number of areas and needs considerable tweaking in terms of performance. The real-time image optimization is an extremely cool feature, but in the beta release it takes entirely too long to convert images -- especially for large graphics. Online help documentation is also absent in the beta release. ImageReady lacks a few of Fireworks' more web-centric features as well, including its JavaScript rollover capabilities (automatically generates HTML code for interactive buttons and other graphics), its support for server-side image maps in addition to the more popular client-side image maps, and its vector-based interface, which allows you to apply customizable Live Effects to any object. Fireworks also edges out ImageReady in terms of optimization capabilities. The ability to view a non-optimized image side-by-side with an optimized image (or even three different optimized images) is a standard feature in Fireworks that is sorely missed in ImageReady. And in terms of optimization effectiveness and quality, for the most part Fireworks again edges out ImageReady, largely due to its support for LZW interframe optimization. However, ImageReady does a much better job of optimizing JPEG images than Fireworks (except it takes ImageReady considerably longer to optimize them). Overall, ImageReady serves as a great sidekick to Adobe Photoshop, but at $199 ($100 cheaper than Fireworks incidentally) ImageReady isn't for everyone. And at this early stage, you definitely won't want to throw out your specialized GIF animation, image optimization, and image creation tools. ImageReady is a huge step forward, but the specialized tools still offer more features and functionality. Still, if you're a current user of Photoshop and have been looking for an all-in-one web graphics suite, ImageReady makes for the perfect companion. Pros: Excellent tools for publishing graphics on the web, LiveView optimization window, Photoshop interface Cons: Lacks some of the features found in specialized image animation, optimization, and creation apps For the latest information on Adobe ImageReady, check out: http://cws.internet.com/32webimg.html#imageready