Working with ImageReady

ImageReady is the workhorse for producing web graphics. Some of its capabilities have been covered in the previous sections; the following sections will cover its advanced features, including slices and rollovers.

Slice an Image

With Photoshop and ImageReady, you can slice an image. This means that you can “cut” an image into sections. You can apply different effects to each slice or each could be a hyperlink. To the user, the slices appear as a single image. You have four types of slices to choose from:

• Auto slices are created automatically. These are the areas in an image that are not defined by one of the other slice types.

• Use the Slice tool to create User slices.

• Select layers in the Layers palette to create Layer-based slices.

• Use the Web Content palette to create Table slices.

  Note

  Slices are always rectangular. You cannot have an oval or irregularly shaped slice.

View Slices

Slices can be viewed in Photoshop, ImageReady, and the Save For Web dialog box. You can distinguish between different types of slices by looking at the lines that define them and the color of their symbols.

• User and layer-based slices have solid lines and blue symbols by default.

• Auto slices have dotted lines and gray symbols by default.

Slices are numbered from the upper-left to lower-right of the image—a numeric symbol is in the upper-left corner of each slice. As you add or remove slices, the numbering for individual slices will change to reflect the changes.

Each slice also has a badge, or icon, that displays the properties of the slice:

To display or hide the badges in ImageReady:

1. Click the Web Content palette menu, and select Palette Options. The Web Content Palette Options dialog box is displayed.

2. Select or deselect the Show Slice Badges check box.

   

Create User Slices

To create a user slice:

1. Click the Slice tool in the toolbox.

   

2. Open the Style drop-down list in the options bar, and select a style.

   • Normal uses dragging to set the slice area.

   • Fixed Aspect Ratio uses a fixed width-to-height ratio set in the Width and Height text boxes. You set the size of the slice by dragging.

   • Fixed Size slices an area defined in pixels by the Width and Height settings.

   1. With Normal and Fixed Aspect Ratio slices, drag to select the area of the slice.

   2. With a Fixed Size slice, drag the selection outline to the area you want selected.

You can also create user slices using guides:

1. Place the guides on your image.

2. In Photoshop, click the Slices From Guides button in the options bar.

3. In ImageReady, click Slices | Create Slices From Guides.

In ImageReady, you can create a slice from a selection:

1. Use the Marquee tool to select an area of the image. The selection area can be any shape.

2. Click Select | Create Slice From Selection.

3. The slice will be a rectangle large enough to contain the entire selected area.

Create Layer-based Slices

A layer-based slice consists of the entire selected layer. These are very useful for rollovers. If you apply an effect, such as a drop shadow, to the layer to create a rollover state, the slice automatically adjusts to include the pixels created by the effect.

To create a layer-based slice in Photoshop or ImageReady, click the layer in the Layers palette. Then click Layer | New Layer Based Slice.

Use the Web Content Palette

The ImageReady Web Content palette has several uses: it displays information about slices, image maps, and animation frames; and it lets you create, edit, and set options for rollovers. Figure 9-4 shows the Web Content palette with slice and image map information displayed. To display the Web Content palette, click Window | Web Content.

Figure 9-4: The Web Content palette displays slice and image map information.

The Web Content palette menu contains a number of options for working with rollovers, slices, and image maps. You will learn more about the Web Content palette in the following sections.

Optimize Slices in ImageReady

Slices are optimized using the same tools as other graphic files. You can use the Save For Web dialog box in Photoshop or the Optimize palette, shown in Figure 9-5, in ImageReady.

Figure 9-5: The ImageReady Optimize palette displays the options for optimizing slices.

To optimize a slice in ImageReady:

1. Select one or more slices.

2. Open the Optimize palette and set options as needed.

3. Click the Optimize palette menu, and select Optimize To File Size. The Optimize To File Size dialog box will appear.

   

4. Set the file size in kilobytes in the Desired File Size text box.

5. Select the appropriate option button to use. Under Start With, select either Current Settings or Auto Select GIF/JPEG to allow ImageReady to automatically select GIF or JPEG settings.

6. Under Use, select the appropriate option to apply the optimization to the Current Slice, Each Slice, or the Total Of All Slices.

7. Click OK to apply your settings.

8. You can also copy optimization settings from one slice to another:

9. Select the slice with the optimization settings to be copied.

10. To apply these setting to a second slice, drag the Droplet icon found on the Optimize palette to the second slice.

    

Use Rollovers and States

Rollovers are an effect where an event is triggered by some user action. A typical use is to change an image when the pointer is rolled over it. Every image has a normal state—the image that is displayed when the web page is first loaded. Additional states (images) can be displayed based on a mouse action such as rolling or clicking.

Rollovers are a combination of images and HTML and JavaScript code—all of which you can create in ImageReady. Rollovers are commonly used as menu buttons on web pages.

QuickSteps—Saving Sliced Images

Saving slices in ImageReady or Photoshop is virtually the same as saving any other image.

Save Sliced Images in ImageReady

1. Click File | Save Optimized or Save Optimized As. The related dialog box opens.

2. Open Slices and click an option from the drop-down list: All Slices, All User Slices, or Selected Slices.

   Save Sliced Images in Photoshop

3. Click File | Save For Web.

4. Click Save. The Save Optimized As dialog box opens. Open Slices and select an option from the drop-down list: All Slices, All User Slices, or Selected Slices.

5. Click Save.

Create and Edit Rollovers

You can create rollovers from layers, slices, and image maps. The steps are very much the same for each. Layer-based slices work well for rollovers because the dimensions of a layer’s content may change as you create a rollover, and layer-based slices automatically include the new pixels.

To create a rollover from a layer-based slice:

1. In Photoshop or ImageReady, create an image with at least two layers. Each layer will be a state in the finished rollover. Applying layer effects is an easy way to create images for rollovers. For example, you could use text with a drop shadow or a glow effect with different settings for each layer. With a drop shadow, you could change the Angle of the light or, for an outer glow, the Spread.

2. Open the image in ImageReady if you created it in Photoshop.

3. Select the normal layer (the layer that will be displayed when the page is first loaded) in the Layers palette, and hide the other layers.

4. Open Layer and select New Layer Based Slice.

5. In the Web Content palette (click Windows | Web Content if it’s not open), select the rollover layer that will be displayed when the event is triggered, and click the Create Rollover State button. The Over state is chosen by default.

   

6. In the Layers palette, hide the normal layer and make the rollover layer visible.

7. Click the Preview In Browser button in the toolbar. Figure 9-6 shows the rollover in Internet Explorer with part of the JavaScript code that handles the switching of the images. When the pointer is moved over the button, the image changes, as shown here.

   
   Figure 9-6: This shows the rollover in the normal state in Internet Explorer with JavaScript code displayed.

   

8. Right-click the rollover state in the Web Content palette (the pointer must be on the state text). The context menu displays a list of states that can be applied to the rollover, as shown in Figure 9-7.

   • Over triggers when the pointer moves over the rollover area.

   • Down triggers when the mouse button is pressed. The change of state lasts until the mouse button is released.

   • Selected triggers when clicked and remains in the selected state until another rollover state is triggered.

   • Out triggers when the pointer leaves the rollover area.

   • Up triggers when the mouse button is released.

   • Click triggers when clicked and remains in the rollover state until the pointer leaves the rollover area.

   • Custom triggers the image specified in the Custom State dialog box. You must write your own JavaScript code to handle the event.

     

   • None preserves the current state for future use in ImageReady, but no JavaScript code is generated for a web browser.

     
     Figure 9-7: The Web Content palette shows the rollover state context menu.

Preview Images in a Browser

You can easily preview your Photoshop and ImageReady images in any browser installed on your system. To preview an image in Photoshop:

1. Click File | Save For Web.

2. In the Save For Web dialog box, click the Preview In Default Browser button.

   

To preview an image in ImageReady, click the Preview In Browser button on the toolbar. The image will open in the default browser.

You can add browsers that are installed on your system to the lists of available browsers in both Photoshop and ImageReady. In Photoshop:

1. Click File | Save For Web.

2. In the Save For Web dialog box, click the down-arrow next to the Preview In Default Browser button to open the Select Browser Menu.

3. Select Edit List to open the Browsers dialog box. The browser list will probably be empty.

   

4. Click Find All. All the browsers on your system will appear in the list. Internet Explorer and Netscape are shown here.

5. Select the browser you want as the default, and click Set As Default.

6. If you want to have a browser not be available, select it and click Remove. This will only remove it from Photoshop’s list, not your system.

7. Click OK.

8. Click the down-arrow next to the Preview In Default Browser button. The Select Browser Menu lists the browsers you have installed. Click the browser you want to use to preview the image.

To preview in ImageReady:

1. Click File | Preview In | Edit Browser List to open the Edit Browser List dialog box, which is virtually identical to Photoshop’s Browsers dialog box.

2. Click Find All to locate the browsers installed on your system, set the default, and remove any browsers you don’t want.

3. Click OK.

4. Click and hold the small arrow in the lower-right corner of the Preview In Browser button to display the list of available browsers.

5. Click the browser you want to use to preview the image.

Export Layers as Files

In ImageReady, you can export individual layers as files.

1. Click File | Export | Layers As Files to open the Export Layers As Files dialog box, shown in Figure 9-8. This dialog box is very similar to the Export Animation Frames As Files dialog box, covered in detail in the section "Export Animation Frames as Files". Only the differences are covered here.

   
   Figure 9-8: The Export Layers As Files dialog box contains the options for exporting layers.

2. Open Export and select the layers to export from the drop-down list: All Layers, Top Level Layers and Layer Sets, or Selected Layers. Selected Layers is only available if you selected layers before opening the Export Layers As Files dialog box.

3. Open the Layer drop-down list, and select a layer, if you are using a separate format for each layer. You can use the navigation buttons to cycle through the layers.

4. Click Apply and select One Format For All Layers or Separate Format For Each Layer from the drop-down list.