Bride of Photoshop
Is ImageReady ready for Web design?
By Bob Schmitt
May 1, 1998
| Product | ImageReady 1.0 |
| Manufacturer | Adobe Systems, Inc. |
| Platforms | Macintosh, Windows |
| Price | ~$300 (est. retail) |
| Try it | Download the preview version of ImageReady and try it out for yourself. The preview version expires July 15, 1998. (Windows: 8.8 MB .zip; Mac: 6.1 MB .hqx or 6.6 MB .bin) |
In a fight over who will rule the creation of Web graphics, Adobe and Macromedia have faced off by releasing what they feel will be the next-generation of Web development tools. Macromedia started the fight with the public beta release of Fireworks, and Adobe soon followed suit with their beta of ImageReady.
With the battleground set, and a niche market chosen, both sides have drawn their weapons. To cater to Web designers, both applications are chock-full of features you might be able to find in individual programs, but not in one place.
ImageReady's Optimization Features
If you are a Photoshop user the ImageReady interface should look very familiar. You will notice some distinct differences, though — the toolbar on the left is lacking quite a few tools found in Photoshop, most noticeably the airbrush, rubber stamp, paths and gradation tools. You'll also find that several of the floating windows found in Photoshop are missing in ImageReady: navigator, paths and channels.
As ImageReady's environment has inherited a great deal of its older sibling's features, it's natural to assume that ImageReady is itself a very powerful and easy-to-use graphics program. ImageReady users benefit from a wealth of features innovated and refined by Photoshop. Powerful image-editing features brought over from Photoshop include layers, filters and actions, plus resizing and adjustment commands like hue/saturation, brightness/contrast and variations.
Image Optimization
What ImageReady adds, and Photoshop lacks, are two new floating windows, "Optimize" and "Animation."
ImageReady's Optimize window.
ImageReady's Animation window.
In the Optimize window, you can set a compression method (GIF, JPEG or PNG) and, as you apply different settings, ImageReady will display a separate Optimized document view along with the approximate file size. This allows you to quickly test a number of compression methods and refine the settings, without affecting the actual image or having to save the file and open it again to view the changes (as is the case with JPEG).
Unfortunately, while Adobe has done some nice work with the Optimize window, they've once again completely missed what Web developers really need. While the idea behind the Optimize palette is a good one, Adobe still hasn't been able to grasp the simple idea of retaining Web safe colors while creating an adaptive palette.
Typically, rather than constraining themselves to the 216-color Web-safe palette, Web designers will use a combination of both an adaptive palette and the Web palette. For example, the style for the cover graphics in Web Review calls for a photographic or illustrative treatment with colored type specced from the Web palette. When optimizing the graphic, you want to use an adaptive palette (meaning the palette is chosen from the most prominent colors in the image, producing the best looking results in high color), but you also want to retain any solid Web palette colors in the image so that your type will not dither on 8-bit systems. When making adaptive palettes, Photoshop has always inexplicably shifted Web-safe colors ever so slightly — just enough to cause them to dither. Unfortunately this annoying trait has been inherited by ImageReady.
In order to help Web developers correct for this shift, Adobe has supplied a Web Shift slider which uses a tolerance setting from 1 to 51 to shift colors back to the Web palette. Unfortunately, this tolerance method causes more problems than it fixes.
For example, while optimizing a test graphic for this article, using the
Web Shift slider to correct my solid Web-colored type caused ImageReady
to shift the white background to a light yellowish gray
(F7F7EF). By moving the slider further to the right, I was able
to get my type back into the Web palette and my background back to
white, but in doing so I had to lower the quality of my photo montage.
Graphic optimization test.
After spending far too long futzing with the Web Shift slider, trying to strike an acceptable balance, I went back to setting the tolerance to zero and directly editing the image color palette — the same technique I would employ in Photoshop to shift my colors back to Web-safe.
Fortunately, in ImageReady's "Optimized Colors"
window you can easily select the offending colors and click the Web-safe
conversion button to convert the selected color to the nearest Web-safe color.
Again, this is another feature that would help Photoshop to be complete. And,
while this is a nice feature, it doesn't make up for the fact that ImageReady
should be more intuitive about retaining Web-safe colors in the first
place — something Macromedia Fireworks does quite well. We'll be
discussing that further in the next part of this series.
ImageReady's Animation Features
Hands down, the nicest feature in Adobe's ImageReady is the new Animation window. I've looked at a lot of GIF animation packages, and ImageReady's is one of the most elegant, versatile and simple to use that I have ever seen. In this tutorial, I'll show you how easily you can create an animated GIF using just a few layers.
ImageReady takes Photoshop's layers feature to the next level by using it to create animated GIFs. If you're a seasoned Photoshop user, then creating animated GIFs with ImageReady's animation window will be a snap.
To build an animation, you simply create the elements of the animation on separate layers (or import a Photoshop file that has already been created). Then in the animation window, add as many frames as you need. Next, select each frame individually and make changes by turning layer visibility on or off, changing the opacity of layers, or moving layers around.
Making the art
To create the art for the animation
seen here, I used the oval tool and filled it with a Web-safe red
selected using the Color window with Web Color Sliders. Because
ImageReady shares the same plug-in architecture as Photoshop, I was able
to use the "Glass Lense Bright" filter from my Kai's Power Tool
collection to quicky create the 3D-shaded quality of the ball.
I then duplicated the red ball layer two times by dragging the layer onto the "New Layer" button at the bottom of the Layer window. Next, I created the blue and green colored balls by altering the color of the two new layers using the colorize option in the Image/Adjust/Hue/Saturation dialog. After lining the balls in a row across the top of the document, I opened the Animation window by choosing Window/Show Animation from the menu bar.
Making the animation
In the animation window, the image I just created appears as a composite thumbnail of the visible layers. The next step is to create the next keyframe of the animation. I start by duplicating the first frame, by selecting it in the Animation window and clicking the "duplicate current frame" button. Next, with this new frame selected, I made changes to the frame by using the "Move" tool in the main document window to position the balls where I wanted them.
The next step was to "Tween" — or create the inbetween frames — between the keyframes. This was done by selecting "Tween" from the Animation window popup menu. In the Tween dialog box I entered 4 in the "Frames To Add" box. I also selected "Previous Frame" with the "Tween With" popup menu and checked the "Position" checkbox. Clicking "OK" causes ImageReady to interpolate the steps between the two keyframes and instantly adds the four new frames to the Animation window.
The Tween dialog box.
Next, I built the rest of the animation, creating keyframes where needed to achieve the desired effect, and tweening between them. I tested the animation along the way using the VCR-like controls along the bottom of the Animation window to play the animation.
After accomplishing the basic animation of the balls falling and bouncing back up, I decided I wanted the balls to fade in and out. To do this I used layer opacity. I clicked the "Select First Frame" button to jump to the front of the animation. I then duplicated the first frame, and using the opacity slider in the Layers window, set the opacity of each ball to 1%. I then tweened the first and second frames using the "Tween" dialog. This time though, I chose "Tween With Next Frame" and checked the "Opacity" box. I then repeated these steps at the end of the animation.
The duplicated first frame with the ball's opacity set to 1%.
The Tween dialog box with the Opacity option selected.
The Animation window showing the new opacity tween.
Then I wanted to add a slight delay to the frames of the animation so it wouldn't move too quickly on faster machines. I added a tenth of a second delay to the animation by selecting "Set Delay For All Frames" from the Animation window popup menu and entering 0.1 in the "Seconds" box. I also made sure the animation would loop continuously by selecting "Play Options" from the Animation popup menu and choosing "Forever."
The Set Frame Delay dialog box.
To complete the animation, I used the "Optimize" window to reduce the colors in the entire animation, and saved it by selecting File/Save Optimized As.
The Optimize window.
The ease and versatility that ImageReady's layers and frames offer is
unmatched by any other animation tool that I've seen on the market.
Being able to create an animation of any length (in this case 43
frames), with just a few layers, is an astounding time saver. If I had
to create each of the individual graphics for this animation in
Photoshop or some other program, exported them as separate graphics, and
brought them into another animation program, I might still be at it now.
As it is, ImageReady left me lots of time to experiment with my
animation, as seen to the right.
ImageReady Extras
There are a lot of other little extras that make ImageReady preferable to Photoshop as a Web graphic creation environment. The addition of a Web colors slider to the color window is a good example. This set of three sliders (red, green and blue) stay with the valid browser-safe colors, not allowing any colors in between. And because the sliders are dynamic, meaning they show the changes as they're made, it is really easy to mix any Web color you want.
ImageReady also makes use of layers to help developers quickly create image maps. "Use Layer As Image Map" is included in the Layer Options dialog — accessible by double-clicking a layer in the Layer window.
Define the shape of the image map area by selecting either a circle, rectangle or polygon; and enter a URL for the shape. You can then save the HTML for the image map by selecting File/Export/Save HTML.
There are also several nice features under the View menu. "Browser Dither" lets you view your graphic as it will appear on 8-bit systems. And "Windows Gamma" lets Macintosh users view their graphics with the Windows monitor gamma, which is typically higher than the Mac's, and often making graphics appear much darker on Windows systems.
Sadly, this is a feature better suited to Photoshop, as the reduced feature-set in ImageReady does not include Levels or Curves, two tools crucial for making adjustments for gamma differences.
Is ImageReady Worth the Price?
I don't understand Adobe ImageReady. I mean, I understand what it does, but I don't get why Adobe has created this product. Their product materials state that it's their desire to "provide Web professionals with a comprehensive environment in which to refine and prepare Web graphics." But if that's the case, then why aren't these features being integrated into Photoshop 5.0?
Why has Adobe chosen to offer two programs — one to create graphics and one to optimize them — rather than offer one truly integrated product in Photoshop 5.0? Well, not because they had the needs of Web developers in mind, but rather it seems, because two products make more money than one.
So Adobe, who passed up a chance to deliver a finishing blow to its competition by providing the ultimate integrated Web production tool in Photoshop, has instead chosen to deliver a meager Photoshop 5 upgrade for $200 and ImageReady: A product that amounts to a watered-down version of Photoshop's tools with some nifty Web graphic optimization and animation features that will retail for $300.
It's impossible to review ImageReady without comparing it to Photoshop, as they share many similar traits. It's disappointing that these features aren't in Photoshop. It's also too bad that ImageReady is priced so high, as its animation window is really excellent. With most animation and graphic optimization tools ranging in price from free to around $30, it would seem that ImageReady is priced far beyond what Web developers are willing to pay for such products.
If you already own Photoshop and use other tools for optimization and animation, stick with them and keep hoping Adobe will integrate these features into Photoshop. However, if you don't own Photoshop and are looking for a mid-level graphics program at about half the price, ImageReady may be just the tool you need.
Copyright © 2012 Robert Schmitt. All rights reserved.