Specifying slice options

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 section 53

To specify a content type:

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) 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 section 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 section 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 section 53

To choose a background color:

Select 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.

In 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:

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) 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 https://

(for example enter https://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).

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 layer- based 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:

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 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 section 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):

Select a slice.

In 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:

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 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:

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) select No

Image from the Type pop-up menu.

Type the desired text in the provided text box.

(Photoshop Save for Web dialog box and ImageReady) If the text includes HTML formatting tags select the Text is HTML option. When this option is deselected all the text you enter (including formatting tags) will be displayed in the resulting Web page.

(Photoshop Save for Web dialog box and ImageReady) If desired select options in the

Cell Alignment section of the dialog box. Horizontal alignment options:

Default to use the browser s default for horizontal alignment.

Left to align the text to the left side of the slice area.

Center to align the text to the center of the slice area.

Right to align the text to the right side of the slice area. Vertical alignment options:

Default to use the browser s default for vertical alignment.

Top to align the text to the top of the slice area.

Baseline to set a common baseline for the first line of text in cells in the same row (of the resulting HTML table) Each cell in the row must use the Baseline option.

Middle to center the text vertically in the slice area.

Bottom to align the text to the bottom of the slice area.

Optimizing slices

You can optimize Image slices using the Save for Web dialog box (Photoshop) or the

Optimize palette (ImageReady).

All Image slices use the optimization settings of the entire image until you apply new settings If you select multiple slices with different optimization settings only the controls that are relevant to all of the selected slices are visible If settings for a control differ among slices the control is blank Any settings you choose are applied to all selected slices.

In ImageReady you can also copy optimization settings from one slice to another within a document or from a slice in one view to a slice in another view in 2-Up or 4-Up view.

To optimize a slice:

Select one or more Image slices and specify options in the Optimize panel/palette.

(See "Optimizing images on section 415

To copy optimization settings between slices (ImageReady):

Select the slice that uses the optimization settings you want to copy.

Drag the Droplet icon from the Optimize palette onto the slice to which you want to apply the optimization settings.

Linking slices (ImageReady)

Linking slices lets you share optimization settings between slices. When you apply optimi- zation settings to a linked slice all slices in the set are updated.

Linked slices in GIF and PNG-8 format share a color palette and dither pattern. The dither pattern is applied across adjacent slice boundaries to prevent the appearance of seams between the slices (See "Optimization options for GIF and PNG-8 formats on section 420.) Note: You can also link slices in the Photoshop Save for Web dialog box (See Working with slices in the Save for Web dialog box (Photoshop) on section 417

To link slices:

Select two or more slices you want to link.

Note: If the first slice you select is a user slice any auto slices you link to the first slice become user-slices If the first slice you select is an auto slice any user slices you select are linked to the auto slice group.

Choose Slices > Link Slices.

Each linked set of user slices is assigned a different color for the slice display graphics in the upper left corner of the slice. This helps to identify all the slices in one set.

To unlink user slices:

Do one of the following:

To unlink a user slice select the slice and then choose Slices > Unlink Slices.

To unlink all user slices in a set select a slice in the set and choose Slices > Unlink Set.

To unlink all user slices in an image choose Slices > Unlink All.