WORKING WITH THE IMAGEREADY DESKTOP

Before we start to use ImageReady, let's take a minute to look at the program. Much of it is already familiar from Photoshop. The Photoshop Save for Web dialog is very similar to the ImageReady interface. It has a toolbox at the left, a tool options bar across the top of the screen, and a collection of palettes on the right. Below the tool's Options bar you can see the Window tabs at the top of the window in ImageReady and starting in the upper-left corner of the Save for Web dialog. They determine the content of the preview area. You can show the original image alone, a single image that is updated to show you current optimization settings, or you can compare images. When you select 2-Up, a pair of images is visible in the preview area. By default, the original image and an optimized image are shown, although you can change the original to any optimization settings. When you choose 4-Up, you can see the original and three different optimization possibilities for comparison or see four different sets of optimization options.

In both the 2-Up and 4-Up views, you activate a pane by clicking it. That version's settings is shown and can then be changed. Figure 11.2 shows the 4-Up view.

Figure 11.2. The ImageReady 4-Up is the most useful view.

The Tools

To the left of the preview area, you have four tools available (see Figure 11.3). In 2-Up and 4-Up views, the tools can be used only in the active pane. They function similarly to the comparable tools in Photoshop:

• Hand tool: When the entire image doesn't fit in the window, click and drag with the Hand tool to reposition it. You can temporarily activate the Hand tool by holding down the spacebar.

• Slice Select tool: When the image has multiple slices, you can use the Slice Select tool to choose a slice to optimize. Different slices can have different optimization settings.

• Zoom tool: Click or drag to zoom in, and Option-click (on the Mac) or Alt-click to zoom out. You can also change the magnification by using the pop-up menu in the lower left of the dialog or by using the contextual menu.

• Eyedropper tool: The Eyedropper is used to select a color. You can select colors only in the active pane. If the optimization settings selected are GIF or PNG-8, the color you click is selected in the color table. For 24-bit images (JPEG and PNG-24), the color is shown only in the swatch below the Eyedropper tool on the left.

Figure 11.3. These are the tools in Photoshop's Save for Web dialog box.

The color swatch, which shows the color most recently selected with the Eyedropper, is below the tools. (When you open the Save for Web dialog, the last selected color is still visible, even if it's not present in the current image.)

Although the Save for Web dialog offers preset zoom magnifications from 12.5% to 1600%, you can use the Zoom tool to zoom out as far as 1%. Remember, however, that you should always make your final evaluation of web graphics at 100% zoomthat's how they'll be seen in a web browser.

The button below the color swatch toggles slice visibility on and off. Clicking the Slice Select tool automatically shows slices, too.

Figure 11.4 shows the ImageReady toolbox. As you can see, many of the icons are familiar from Photoshop. The tools work exactly the same in ImageReady, so it doesn't really matter which application you access them from. You can toggle back and forth between Photoshop and ImageReady by clicking the icon at the bottom of the toolbox.

Figure 11.4. Click the button at the bottom of the toolbox or press -Shift-M (on the Mac) or Ctrl+Shift+M (in Windows) to switch between ImageReady and Photoshop.

The tools that are unique to ImageReady enable you to create and view image maps, rollovers, and slices. The button with the browser icon opens your browser, displaying the image you're working on, so you can check to see that the actions you insert work as expected. The button with the browser icon opens your browser, displaying the image you're working on, so you can check to see that the actions you're inserting work as expected.

To use any of these tools, select the one you want and apply options as needed from the tool's Options bar.