Previewing Your Graphics

Previewing Your Graphics

ImageReady provides several features you can use to view file size, estimated download time, and preview what an image will look like if it’s saved in a specific way.

You can access these features using either the Status bar at the bottom of the image window or the Preview tabs at the top of the image window.

Viewing image size and download times

If you’ve ever surfed to a Web site and found yourself going nuts waiting for images to appear (also called build) on-screen, then you have an idea of how important managing image file size and figuring out how long images will take to load is.

Using ImageReady’s Status bar, you can find out estimated times based on file size and connection speeds. Figure shows two slots on the Status bar that you can use to view image size and download times. You can use these slots to compare two possible download scenarios and see how long each image takes to load depending upon the connection speed.

Click To expand
Figure: Use the Status bar to find out estimated download times.

Using ImageReady previews

At the top of the ImageReady image window are four tabs: Original, Optimized, 2-Up, and 4-Up. These tabs show different views of the Web graphic you’re working on, as shown in Figure.

Click To expand
Figure: The four views of an image using the Preview tabs in the image window.

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

  • The Original tab displays the image without any optimization. Optimization is the process that saves files with specific file sizes and formats.

  • The Optimized tab shows the image using the current settings in the Optimize palette. The Optimized preview updates every time a setting on the Optimize palette changes. To find out more about optimizing files and using the Optimize palette, turn to Technique 57.

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

  • The 4-Up tab shows the original image, an optimized image based on the settings in the Optimize palette, and two other previews based on setting variations from the Optimize palette.

Previewing your graphics in a browser

You can preview your Web graphics right from ImageReady. You can check out image maps, rollovers, or any animations that you create to make sure that they’re working without leaving ImageReady. Previewing your images is great for checking out things and making any necessary adjustments.

Adding browsers

When you launch ImageReady for the first time, ImageReady finds the default browser installed on your computer and uses this browser to generate the preview. But, if you want to view your graphics in other browsers to see how they look (and they can look quite different from browser to browser), you need to add the browsers to the Browser List.

Here’s how:

  1. Choose File>Preview In>Edit Browser List.

    The Edit Browser List dialog box opens (shown in Figure).

    Figure: Click Find All to let ImageReady find the browsers installed on your computer.

  2. Click the Find All button.

    ImageReady automatically locates and loads all the available browsers it can find that are installed on your computer.

  3. Select the browser you want to use as the default browser from the Browser List on the left side of the dialog box.

  4. Click the Set As Default button.

  5. When you finish adding browsers, click OK to close the Edit Browser List dialog box.

    After setting a default browser, the Preview in Default Browser button in the Toolbox will have changed to the icon of the default browser you selected.

Previewing graphics

After you add all the browsers you want to use to the Browser List, previewing your graphics in a browser is easy. Simply click the Preview in Default Browser button in the ImageReady Toolbox.

To view a graphic in another browser, click the tiny arrow next to the Preview in Default Browser button and select a browser from the fly-out menu, as shown in Figure.


At the bottom of the browser fly-out menu in Figure is a tiny downward-pointing arrow. Drag your mouse over the arrow, and then release the mouse button to create a mini-browser toolbar. You can use this mini-toolbar for quick previews in different browsers.

Figure: Choose a browser from the fly-out menu.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows