Introducing the ImageReady CS Window

The ImageReady CS window is organized just like the main Photoshop window. The Menu bar and Options bar are at the top of the screen, the Toolbox is on the left side, and various palettes line the right side, as shown in Figure 18-1.

Figure 18-1: The ImageReady window with palettes and Toolbox in their default locations.

Viewing image size and download times

If you’ve ever accessed a Web site with a dial-up modem and found yourself going nuts waiting for images to build on-screen, then you have an inkling as to how important it is to manage file size and figure out just how long your images will take to load. You can test your images with a variety of connection speeds to get a good idea of what the range of online visitors will experience when they view your pictures.

To know how long an image will take to load on a Web page, you need to know the file size of a compressed image. Use the ImageReady Image Information menu at the bottom of the image window on the Status Bar to get this information (see Figure 18-2).

Figure 18-2: Use the Image Information menu on the status bar to find out how long it will take an image to load on the Web.

You can use the Image Information menu to select various connection speeds and to find out approximately how long an image will take to load. For instance a 240K image would take 44 seconds to load with a 56.6 Kbps modem connection, whereas that same 240K image would take 3 seconds to load with a broadband or DSL connection. As a general rule, you should try to keep image load times below 5 or 10 seconds. Remember, that this loading time is just for one image. If you have several images on a page, each one takes time to load. So, if you have four images that take five seconds to load, anyone viewing your Web page is going to have to wait for 20 seconds. Twenty seconds may not sound like a long time, but waiting even a minute for a Web page to load can be really frustrating.

As you can see in Figure 18-2, there are two slots on the status bar, where you can view image size and download times, compare two possible download scenarios, and see how long it would take for your image to load depending upon the connection speed.

Using ImageReady previews

You may have noticed that there are four tabs in the ImageReady image window that show different views of an open image (see Figure 18-3).

Figure 18-3: The four views of an image, one with each tab selected: Original, Optimized, 2-Up, and 4-Up.

Here’s a quick look at what the tabs mean:

• The Original tab shows the image without any optimization. (Optimization is the process that saves a file with a specific file size, file format, and color palette.)

• The Optimized tab shows the image using the current settings on the Optimize palette. This Optimized preview updates every time a setting or value on the Optimize palette changes. (I discuss the Optimize palette later in the Chapter in the “Optimization” section.)

  Tip

  An optimized file is one that has been saved with the smallest possible file size and the fewest colors, but whose image quality has not been degraded.

• The 2-Up tab shows two versions of the image. On the left is the original image that you would view if you selected the Original tab. On the right is the optimized image that you would view if you selected the Optimized tab.

• The 4-Up tabs show the original image, the optimized image based on the settings in the Optimize palette, and two other optimized previews based on variations of the settings in the Optimize palette.

Remember

You can use these different views of an image to compare the original image to optimized versions, checking for image quality. There’s a real balance when an image is optimized. You can radically reduce file size by reducing an image’s color palette, but you end up with a low-quality image. If you let the image have a larger color palette and better view quality, the file size is bigger. There’s a breaking point where reducing colors for the sake of file size starts to impinge on image quality. Using these different view tabs in the image window can help you watch for that breaking point.

Using the ImageReady Toolbox

If you’ve used Photoshop, most of the tools in the ImageReady Toolbox are already familiar, though some tools are grouped differently. Also, there are a few extra Web related tools that are used for creating and viewing image maps, viewing and hiding slices, previewing rollovers and animations, and viewing documents in a Web browser. Figure 18-4 shows the ImageReady Toolbox and its fly-out tool menus.

Figure 18-4: The ImageReady Toolbox contains a few tools you won’t find in Photoshop.

Tip

Anytime a tool is selected in ImageReady, the Options bar changes to display that tool’s settings.

A great feature (which, in my humble opinion, the folks at Adobe should include in Photoshop!) is the ability to create mini toolbars containing the tools on a flyout menu. If you open one of the flyout menus on the ImageReady Toolbox, you may notice the tiny downward pointing arrow (look at Figure 18-5). If you drag the mouse down over that arrow, and then release the mouse button, a mini toolbar containing the tools on that flyout menu appears. You can drag the toolbar anywhere in the window and when you’re finished with it, just click the Close button to make it disappear.

Figure 18-5: In ImageReady, you can open handy mini toolbars.

Palettes

Being the sister program of Photoshop, ImageReady contains many palettes that are probably familiar to you, including the Color, Swatches, Layers, History, Character, and Paragraph palettes (just to name a few). You can use the palettes just like the ones in Photoshop. To find out how to use these palettes turn to the relevant chapters earlier in this book.

There are several Web-related palettes that are used for creating animations, tables, managing image maps and slices, and for optimizing image size and quality when you save them. Figure 18-6 shows some of these Web-specific palettes.

Figure 18-6: Several ImageReady palettes are made just for creating specific Web content such as tables, animations, and slices.

Two palettes that deserve special mention are the Color and Swatches palettes, as shown in Figure 18-7. They are set up with all the Web-safe colors. Any color you pick using these palettes for your Web graphics looks good on the Web.

Figure 18-7: The Color palette and Swatches palette are loaded with Web-safe colors.

Moving back and forth between ImageReady and Photoshop

While working on Web graphics, leave both Photoshop and ImageReady open so that you can quickly jump from one to the other, making changes to the same open file.

To jump back and forth between the programs, just click the Jump To button at the bottom of the Toolbox in either program or select File→Edit in Photoshop or File→Edit in ImageReady (depending upon which program you’re in).

Previous versions of ImageReady and Photoshop kept an image open in both programs at the same time. When working on the image in one program, the image was grayed out in the other program.

With this version of Photoshop and ImageReady, the image is open in only one program at a time. Jumping back and forth between the programs is now faster, because the two programs only exchange layers that have changed (instead of opening and closing the entire image).

If you jump to Photoshop, perform some edits, then jump back to ImageReady, the Photoshop edits are identified in the History palette in ImageReady as a history state named Update from Photoshop. Any changes made in ImageReady are listed in Photoshop’s History palette as Update from ImageReady. And, you can undo any edits made in the other program by selecting an earlier history state at any time. (To find out more about the History palette, turn to Chapter 14.)