Locking slices (Photoshop)

Locking slices prevents you from making changes accidentally, such as resizing or moving slices.

To lock all slices:

Choose View > Lock Slices.

Specifying slice options

Setting slice options lets you specify how the slice data will appear in a Web browser. The available options vary according to the application and the slice type you select. You can only set options for one slice at a time.

Note: Setting options for an auto slice promotes the slice to a user slice.

Viewing slice options

You specify slice options in the Slice Options dialog box (Photoshop) and the Slice palette (ImageReady).

To display the Slice Options dialog box (Photoshop):

Do one of the following:

•Double-click a slice with the slice select tool.

•With the slice select tool active, click the Slice Options button in the options bar. This method is available only in the main Photoshop application, not in the Photoshop Save for Web dialog box.

To display the Slice palette (ImageReady):

Choose Window > Slice, or click the palette button on the right side of the options bar for the slice select tool.

Choosing a content type

Formatting and display options for a slice vary according to its content type.There are two types of slice content:

•Image slices contain image data, including rollover states. This is the default content type.

•No Image slices contain solid color or HTML text. Because No Image slices contain no image data, they download more quickly. Photoshop and ImageReady do not display No Image slice content. To view No Image slice content, preview the image in a browser. (See “Previewing an image in a browser” on page 53.)

To specify a content type:

1Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), select a slice type from the Type pop-up menu.

Specifying slice names

As you add slices to an image, you may find it helpful to rename slices based on their content. By default, user slices are named according to the settings in the Output Options dialog box. (See “Setting slice output options” on page 443.) Layer-based slices are given the name of the layer from which they are derived.

To change the name of a slice:

Do one of the following:

•Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box. In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), type a new name in the Name text box.

Note: The Name text box is not available for No Image slice content.

•Double-click the slice’s name in the Rollovers palette, and enter a new name. (See “Using the Rollovers palette” on page 398.)

Specifying slice background colors

The background color option lets you select a color to fill the transparent area (for Image slices) or entire area (for No Image slices) of the slice. In Photoshop, this option is available only if you activate the Slice Options dialog box from within the Save for Web dialog box.

Photoshop and ImageReady do not display the selected background color—you must preview the image in a browser to view the effect of selecting a background color. (See “Previewing an image in a browser” on page 53.)

To choose a background color:

1Select a slice. If you are working in the Photoshop Save for Web dialog box, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), select a background color from the Background/BG pop-up menu:

•(Photoshop) Select None, Matte, Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (using the color picker).

•(ImageReady) Select None, Matte, Foreground Color, Background Color, or Other (to use the color picker), or select a color from the pop-up palette.

Assigning a URL to an Image slice

Assigning a URL to a slice makes the entire slice area a hotspot in the resulting Web page. When a user clicks in the hotspot, the Web browser links to the specified URL and target frame. This option is only available for Image slices.

To assign link information to an Image slice:

1Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), enter a URL in the URL text box, or choose a previously created URL from the pop-up menu. You can enter a relative URL or a full URL. If you enter a full URL, be sure to include http:// (for example, enter http://www.adobe.com, not www.adobe.com). For more information

on using relative URLs and full URLs, see an HTML reference (either printed or on the Web).

3 If desired, enter the name of a target frame in the Target text box, or choose an option from the pop-up menu. A frame name must match a frame previously defined in the HTML file for the document. When a user clicks the link, the specified file displays in the new frame:

•_blank to display the linked file in a new window, leaving the original browser window open.

•_self to display the linked file in the same frame as the original file.

•_parent to display the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file displays in the current parent frame.

•_top to replace the entire browser window with the linked file, removing all current frames.

Note: For more information on frames, see an HTML reference (either printed or on the Web).

Resizing and moving slices using numeric coordinates

You can set the exact position and dimensions for a user slice using the Dimensions options. In ImageReady, you can also set the exact position and dimensions for a layerbased slice using the Layer Apron options.

In ImageReady, if the Dimensions or Layer Apron options aren’t showing, choose Show Options from the Slice palette menu, or click the Show Options button on the palette tab to view them.

To resize and move a user slice using numeric coordinates:

1Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Dimensions area of the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), change one or more of the following options:

•X to specify the distance in pixels between the left edge of the slice and the origin point of the ruler in the document window.

•Y to specify the distance in pixels between the top edge of the slice and the origin point of the ruler in the document window.

Note: The default origin point of the ruler is the upper left corner of the image. (See “Using rulers, columns, the measure tool, guides, and the grid” on page 43.)

•W to specify the width of the slice.

•H to specify the height of the slice.

•Constrain Proportions to preserve the current proportions of the slice.

To resize and move a layer-based slice using numeric coordinates (ImageReady):

1Select a slice.

2In the Slice palette, change one or more of the following options:

•L to specify the distance in pixels between the left edge of the slice and the left edge of the layer’s content.

•T to specify the distance in pixels between the top edge of the slice and the top edge of the layer’s content.

•R to specify the distance in pixels between the right edge of the slice and the right edge of the layer’s content.

•B to specify the distance in pixels between the bottom edge of the slice and the bottom edge of the layer’s content.

Specifying browser messages

You can specify what messages appear in the browser using the Message and Alt options. These options are only available for Image slices.

Message Lets you change the default message in the browser’s status area for a selected slice or slices. By default the slice’s URL is displayed.

Alt Lets you specify an Alt tag for a selected slice or slices.The Alt text appears in place of the slice image in nongraphical browsers. It also appears in place of the image while the image is downloading and as a tool tip in some browsers.

In ImageReady, if the Message and Alt options aren’t showing, choose Show Options from the Slice palette menu, or click the Show Options button on the palette tab to view them.

To specify a browser message:

1Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), type the desired text in the Message text box, Alt text box, or both.

Adding HTML text to a slice

Choosing the No Image type for a slice lets you enter text that will appear in the slice area of the resulting Web page. This text is HTML text—you can format it using standard HTML tags. You can also select vertical and horizontal alignment options. For more information on specific HTML tags, see an HTML reference (either printed or on the Web).

Photoshop and ImageReady do not display HTML text in the document window; you must use a Web browser to preview the text. (See “Previewing an image in a browser” on

page 53.) Keep in mind that the appearance of text is affected by the browser settings and operating system it is viewed on. Be sure to preview HTML text in different browsers, with different browser settings, and on different operating systems to see how text will appear on the Web.

Note: Be careful not to enter more text than can be displayed in the slice area. If you enter too much text, it will extend into neighboring slices and affect the layout of your Web page.

To add HTML text to a slice:

1Select a slice. If you are working in Photoshop, double-click the slice with the slice select tool to display the Slice Options dialog box.

2In the Slice Options dialog box (Photoshop) or the Slice palette (ImageReady), select No Image from the Type pop-up menu.

3Type the desired text in the provided text box.