Select the Slice Select tool from the toolbar or hold down the Crop tool to reveal it.
Learn how to configure URLs, Alt text, dimensions, and other properties in the Slice Options dialog box in Adobe Photoshop.
Slice metadata controls how individual slices appear and behave in exported HTML files. Each slice can have unique attributes, including hyperlinks, Alt text, dimensions, and background colors that define its appearance and functionality in web browsers.
Slice metadata controls how individual slices appear and behave in exported HTML files. Customize slice properties such as hyperlinks, Alt text, dimensions, and background colors to control the appearance and functionality of exported web content.
Edit slice metadata
Double-click the slice you want to customize.
Configure the slice properties in the Slice Options dialog box.
Select OK to apply your changes.
Modifying an auto slice converts it to a user slice, giving you full control over its properties.
Understanding slice property types
The following table describes each metadata option available in the Slice Options dialog box and how it affects your exported HTML:
|
Setting |
Description |
Applies to |
|
Type |
Specifies whether the slice contains image data or an empty table cell |
All slices |
|
Name |
Sets a custom name for the slice (default naming follows Output Settings) |
Image and No Image slices |
|
URL |
Specifies the hyperlink destination when users click the slice |
Image slices |
|
Target |
Defines which browser frame or window opens the linked URL |
Image slices |
|
Message Text |
Changes the browser status bar message (defaults to URL if specified) |
Image slices |
|
Alt Tag |
Provides alternative text for accessibility and displays during image loading |
Image slices |
|
Dimensions (X, Y, W, H) |
Sets precise pixel coordinates and size for the slice |
All slices |
|
Background Color |
Fills transparent areas (Image slices) or entire cell (No Image slices) |
Image and No Image slices |
|
Text Is HTML |
Interprets cell content as HTML code rather than plain text |
No Image slices |
|
Cell Alignment |
Controls horizontal and vertical text positioning within the slice area |
No Image slices |
Add hyperlinks to image slices
Double-click the slice with the Slice Select tool.
In the URL box, enter a relative or absolute URL. Include the protocol (http:// or https://) for absolute URLs.
In the Target box, enter a frame name to control where the link opens: _blank for a new window, _self for the same frame, _parent for the parent frameset, or _top to remove all frames.
Select OK.
Configure Alt text for accessibility
Select the slice and double-click it with the Slice Select tool.
In the Message Text box, enter the text you want to appear in the browser's status bar.
In the Alt Tag box, enter descriptive text for screen readers and tooltips.
Select OK.
Alt text improves accessibility and appears when images can't be displayed. Some browsers may also display it as a tooltip.
Add HTML text to No Image slices
Double-click the slice with the Slice Select tool.
Select No Image from the Type menu.
Enter your text content in the text box, including HTML tags if needed.
Select the Text Is HTML option to allow HTML formatting.
Choose horizontal alignment: Default, Left, Center, or Right.
Choose vertical alignment: Default, Top, Baseline, Middle, or Bottom.
Select OK.
No Image slices don't display HTML formatting in the document window. Preview your exported HTML in multiple browsers and platforms to confirm proper text display.
The amount of text in a No Image slice can affect your exported HTML table layout. Test your page after adding substantial text content.
Set background colors
Select a slice and double-click it with the Slice Select tool.
From the Background Color menu, select None, Matte, White, Black, or Other.
If you select Other, choose a custom color using the Adobe Color Picker.
Select OK.
Background colors don't display in Photoshop—you must preview your image in a web browser to see the effect.
Use slice web pages and modify slice layout procedures to create and manage slices.
Create stunning images with Photoshop
Edit, retouch, and transform photos with the industry-leading creative tools you know and love.