Adobe Photoshop * HTML options for slices

Display the Slice Options dialog box
Specify a slice content type
Rename a slice
Choose a background color for a slice
Assign URL link information to an Image slice
Specify browser messages and Alt text
Add HTML text to a slice

Display the Slice Options dialog box

Do one of the following:

Double-click a slice with the Slice Select tool . (If the tool isn’t visible, hold down the Crop or Slice tool.)
With the Slice Select tool active, click the Slice Options button in the options bar. This method is not in the Save For Web & Devices dialog box.

Specify a slice content type

You can specify how the slice data appears in a web browser when exported with an HTML file. The available options vary according to the slice type you select.

Image slices contain image data. This is the default content type.
No Image slices let you create empty table cells that can be populated with text or a solid color. You can enter HTML text in a No Image slice. If you set the “Text is HTML” option in the Save for Web & Devices dialog box, the text is interpreted as HTML when viewed in a browser. Slices of type No Image aren’t exported as images and can be previewed in a browser.

Note: Setting options for an auto slice promotes the slice to a user 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, select a slice type from the Type pop‑up menu.

To the top

Rename a slice

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 Settings dialog box. (See Output settings for web graphics.)

Select a slice and double-click the slice with the Slice Select tool to display the Slice Options dialog box. In the Slice Options dialog box, type a new name in the Name text box.

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

To the top

Choose a background color for a slice

You can select a background color to fill the transparent area (for Image slices) or entire area (for No Image slices) of the slice.

Photoshop does not display the selected background color—you must preview the image in a browser to view the effect of selecting a background color.

Select a slice. If you are working in the Photoshop Save For Web & Devices dialog box, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
In the Slice Options dialog box, select a background color from the Background Color pop‑up menu. Select None, Matte, White, Black, or Other (using the Adobe Color Picker).

To the top

Assign URL link information to an Image slice

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

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, enter a URL in the URL text box. You can enter a relative URL or absolute (full) URL. If you enter an absolute URL, be sure to include the proper protocol (for example, http://www.adobe.com, not www.adobe.com). For more information on using relative and full URLs, see an HTML reference.
If desired, enter the name of a target frame in the Target text box:
_blank

Displays the linked file in a new window, leaving the original browser window open.
_self

Displays the linked file in the same frame as the original file.
_parent

Displays 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 appears in the current parent frame.
_top

Replaces the entire browser window with the linked file, removing all current frames. The name must match a frame name previously defined in the HTML file for the document. When a user clicks the link, the specified file appears in the new frame.
Note: For more information on frames, see an HTML reference.

To the top

Specify browser messages and Alt text

You can specify what messages appear in the browser. These options are available only for Image slices and appear only in exported HTML files.

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, type the desired text.
Message Text

Changes the default message in the browser’s status area for a selected slice or slices. By default, the slice’s URL, if any, is displayed.
Alt Tag/Alt

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

To the top

Add HTML text to a slice

When you choose a slice of type No Image, you can enter text to be displayed in the slice area of the resulting web page. This can be plain text or text formatted with standard HTML tags. You can also select vertical and horizontal alignment options. For more information on specific HTML tags, see an HTML reference.

Photoshop does not display HTML text in the document window; you must use a web browser to preview the text. Be sure to preview HTML text in different browsers, with different browser settings, and on different operating systems to confirm that your text is displayed correctly on the web.

Note: The amount of text in a No Image slice can affect the layout of an exported page.

Select a slice. Double-click the slice with the Slice Select tool to display the Slice Options dialog box. You can double-click the slice in the Save For Web & Devices dialog box to set additional formatting options.
In the Slice Options dialog box, select No Image from the Slice Type menu.
Type the desired text in the text box.
(Save For Web & Devices dialog box only) If the text includes HTML formatting tags, select the Text Is HTML option. If you don’t select this option, HTML tags are ignored and all text appears as unformatted plain text on the resulting web page.
(SaveFor Web & Devices dialog box only) If desired, select options in the Cell Alignment section of the dialog box:
Default

Uses the browser’s default for horizontal alignment.
Left

Aligns the text to the left side of the slice area.
Center

Aligns the text to the center of the slice area.
Right

Aligns the text to the right side of the slice area.
Default

Uses the browser’s default for vertical alignment.
Top

Aligns the text to the top of the slice area.
Baseline

Sets 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

Centers the text vertically in the slice area.
Bottom

Aligns the text to the bottom of the slice area.