Select one or more objects on the artboard that you want to define as a slice.
Last updated on
Oct 25, 2026
Define boundaries in artwork to export web elements with independent optimization settings for each region.
Slices let you divide artwork into separate web elements, each with its own file format, optimization settings, and color table.
Use slices when your artwork contains different types of images that require different optimization settings. For example, if your design includes a bitmap photo that works best as a JPEG alongside vector graphics that need GIF transparency, create slices to optimize each element separately. When you export using File > Export > Save for Web (Legacy), each slice becomes an independent file in an HTML table layout.
Adobe Illustrator numbers slices automatically from left to right and top to bottom, starting in the upper-left corner. When you create user-defined slices, Illustrator generates auto slices around them to maintain the web table structure. Overlapping slices create subslices that show how the regions will divide in the final export.
Slice types
Illustrator provides three slice types that control how content exports:
Image slices export the slice area as an image file. You can add URL links, target framesets, status messages, alternative text, and background colors.
No Image slices export as HTML table cells containing text and a background color instead of an image. Enter your text and format it with standard HTML tags, keeping content within the slice boundaries to avoid affecting neighboring layout.
HTML Text slices convert Illustrator text objects to HTML text with basic formatting in the exported web page. This slice type appears only when you create a slice from a selected text object using Object > Slice > Make.
Create slices from objects or selections
Select Object > Slice > Make.
The slice boundaries automatically adjust if you move or modify the artwork. Use this method to create slices that capture text and basic formatting from text objects.
Create slices by dragging
Select the Slice tool from the toolbar or press Shift + K.
Drag across the artwork area where you want to create a slice.
Hold Shift while dragging to constrain the slice to a square, or hold Alt (Windows) or Option (macOS) to draw from the center.
Slices created this way appear as items in the Layers panel and remain independent of the underlying artwork. You can move, resize, and delete them like other vector objects.
Create slices from guides
Place guides on the artboard where you want to divide the artwork.
Select Object > Slice > Create From Guides.
Select slices
Select the Slice Select tool from the toolbar.
Click a slice to select it, or Shift-click to select multiple slices.
To select an underlying slice when slices overlap, click the visible portion of it. You can also select slices created with Object > Slice > Make by selecting the corresponding artwork on the artboard, or by targeting the slice in the Layers panel.
Note
Auto slices appear dimmed and cannot be selected directly.
Set slice options
Select a slice with the Slice Select tool.
Select Object > Slice > Slice Options.
Select a slice type from the Type menu.
Set the corresponding options based on your slice type.
Select OK.
For Image slices, enter a URL to make the image a hyperlink, specify a target frameset, add a status message for the browser, provide alternative text, and choose a background color. For No Image slices, enter HTML text and formatting tags, then set horizontal and vertical alignment. For HTML Text slices, set text alignment and select a background color.
Tip
To edit text for HTML Text slices in the Slice Options dialog, change the slice type to No Image. This breaks the link with the text object on the artboard. To remove text formatting, enter as the first word in the text object.
Lock slices
Select View > Lock Slices to prevent changes to all slices.
To lock individual slices, click the edit column for specific slices in the Layers panel.
Adjust slice boundaries
Select the slice with the Slice Selection tool.
Drag any corner or side handle to resize the slice.
You can also move slices by dragging them to a new position. Hold Shift while dragging to restrict movement to vertical, horizontal, or 45° diagonal lines. Use the Align panel to align or distribute multiple slices, which can eliminate unneeded auto slices for a more efficient HTML file.
Combine slices
Select two or more slices with the Slice Select tool.
Select Object > Slice > Combine Slices.
The resulting slice uses dimensions from the rectangle created by joining the outer edges of the combined slices. If combined slices are not adjacent or have different proportions, the new slice may overlap other slices.
Divide slices
Select the slice you want to divide.
Select Object > Slice > Divide Slices.
Specify the division options in the dialog.
Select OK.
Delete slices
Select the slice you want to remove.
Press Delete.
If the slice was created using Object > Slice > Make, the corresponding artwork is also deleted. To keep the artwork, select Object > Slice > Release instead. To delete all slices at once, select Object > Slice > Delete All.
Show or hide slices
Select View > Hide Slices to hide slices in the illustration window.
In the Save for Web (Legacy) dialog, click the Toggle Slices Visibility button to show or hide slices. To customize slice display settings including numbers and line colors, select Edit > Preferences > Smart Guides & Slices (Windows) or Illustrator > Preferences > Smart Guides & Slices (macOS).
Export slices
After creating and configuring slices, export your artwork using File > Export > Save for Web (Legacy). In the dialog, select each slice to specify optimization settings, file format, and quality options. For modern workflows with more flexibility, explore Export for Screens for batch export capabilities.
To create clickable regions without dividing artwork into separate files, use image maps instead of slices. Review best practices for creating web graphics for guidance on color modes, file formats, and optimization strategies.
Design with precision in Illustrator
Bring your ideas to life with vector graphics tools built for creative freedom and accuracy.
