Photoshop CS For Dummies

There are several ways to add slices to an image: you can let ImageReady automatically create horizontal or vertical slices, manually slice an image using the Slice tool, make slices using layers, and create slices using guides.

Letting ImageReady do the slicing

When you use ImageReady to create slices, you specify how many vertical and/or horizontal slices you want, and ImageReady does the work for you.

This method of creating slices works especially well if you have a large image that you want to slice up for quicker downloading in Web pages. To let ImageReady do all the work, follow these steps:

1. In Image Ready, open the image to which you want to add slices.

   ImageReady creates an auto slice containing the entire image (refer to Figure 19-2).

2. Choose Slices→Promote to User Slice.

   This menu option converts the auto slice into a user slice. Notice that the slice label changes from the grayed out auto slice label to the blue user slice label.

3. Choose Slices→Divide Slice.

   The Divide Slice dialog box opens with the Preview option selected by default. (If it isn’t selected for some reason, put a check mark in the Preview check box. That way, you’ll be able to see the slices as you add vertical and horizontal slices.)

4. To create horizontal slices put a check in the Divide Horizontally Into check box.

   Enter the desired number of horizontal slices in the Slices Down, Evenly Spaced text box, or enter a number in the Pixels per Slice text box. When you enter a value in either text box, the horizontal slices appear as a preview in the image window (see Figure 19-3).

   Figure 19-3: In the Divide Slice text box, enter a specific number of slices or pixel amount per slice.

5. To create vertical slices put a check in the Divide Vertically Into check box.

   Enter the desired number of vertical slices in the Slices Across, Evenly Spaced text box, or enter a number in the Pixels per Slice text box.

6. Click OK.

   A user slice label appears in the upper left corner of each slice. The number indicates the slice number. After creating slices using the Divide Slice command, all the slices are selected.

   Tip

   To select only one slice, select the Slice Select tool from the ImageReady Toolbox, and then click the slice you want to select. From here, you can reshape the slice, if necessary, or attach a URL (Uniform Resource Locator, or specific file location) to the slice as described later in this chapter in the section, “Working with Slices.” If you want to publish your sliced image to the Web, save the image using the optimization directions in Chapter 18, and then upload the image and associated HTML file that ImageReady creates to your Web service provider. (Remember that the HTML file contains the code that slices the image. If you don’t upload the HTML file, your image won’t be sliced.)

Creating slices using layers

A layer-based slice contains all the visible pixels on a layer. If the layer is edited in some way — layer effects added, transformed, moved, and so on — the layer-based slice automatically resizes to include any new pixels. Layer-based slices work especially well for creating rollovers that contain effects, such as a bevel or drop shadow, which may increase the layer size.

Creating a layer-based slice is quite simple. In ImageReady, use the Layers palette to select the layer you want to use to create the layer-based slice. Then, choose Layer→New Layer Based Slice.

Manually slicing an image

The Slice tool works like the Rectangular Marquee tool in Photoshop. You drag the tool to enclose a rectangular area, but instead of creating a selection, you create a user slice. As you create user slices, ImageReady creates auto slices, dividing up the leftover area.

1. In Image Ready, open the image to which you want to add slices.

   ImageReady creates an auto slice containing the entire image (shown in Figure 19-2).

2. Select the Slice tool from the ImageReady Toolbox.

3. Position the mouse where you want to start the slice and then drag the mouse diagonally to create the slice.

   When you release the mouse button, a user slice label with a number appears in the upper-left corner of the slice, as shown in Figure 19-4.

   Figure 19-4: As you create user slices with the Slice tool, ImageReady automatically creates auto slices for the remaining area.

4. Continue to create as many slices as you need.