User Guide Cancel

Slices and image maps

Last updated on Jul 17, 2024

Illustrator

Open on web

Illustrator User Guide
Get to know Illustrator
1. Introduction to Illustrator
2. Workspace
3. Tools in Illustrator
  1. Tools at a glance
  2. Select tools
  3. Navigate tools
    1. Hand
    2. Rotate View
    3. Zoom
  4. Paint tools
  5. Text tools
  6. Draw tools
    1. Pen
    2. Add Anchor Point
    3. Delete Anchor Point
    4. Anchor Point
    5. Curvature
    6. Line Segment
    7. Rectangle
    8. Rounded Rectangle
    9. Ellipse
    10. Polygon
    11. Star
    12. Paintbrush
    13. Blob Brush
    14. Pencil
    15. Shaper
    16. Slice
  7. Modify tools
    1. Rotate
    2. Reflect
    3. Scale
    4. Shear
    5. Width
    6. Free Transform
    7. Eyedropper
    8. Blend
    9. Eraser
    10. Scissors
    11. Dimension
4. Generative AI (not available in mainland China)
5. Quick actions
Illustrator on the web (beta)
Illustrator on the iPad
1. Introduction to Illustrator on the iPad
2. Workspace
3. Documents
  1. Work with documents in Illustrator on the iPad
  2. Import Photoshop and Fresco documents
4. Select and arrange objects
  1. Create repeat objects
  2. Blend objects
5. Drawing
  1. Draw and edit paths
  2. Draw and edit shapes
6. Type
7. Work with images
  1. Vectorize raster images
8. Color
  1. Apply colors and gradients
Cloud documents
1. Basics
2. Troubleshooting
  1. Troubleshoot create or save issues for Illustrator cloud documents
  2. Troubleshoot Illustrator cloud documents issues
Add and edit content
Import, export, and save
1. Import
2. Creative Cloud Libraries in Illustrator
  1. Creative Cloud Libraries in Illustrator
3. Save and export
Printing
1. Prepare for printing
2. Printing
Automate tasks
Troubleshooting

Learn how to create image maps and slices for web graphics.

Try it in the app
Create slices in a few simple steps.

Open Illustrator

About slices

Web pages can contain many elements—HTML text, bitmap images, and vector graphics, to name a few. In Illustrator, you can use slices to define the boundaries of different web elements in your artwork. For example, if your artwork contains a bitmap image that needs to be optimized in JPEG format, while the rest of the image is better optimized as a GIF file, you can isolate the bitmap image using a slice. When you save the artwork as a web page using the Save For Web & Devices command, you can choose to save each slice as an independent file with its own format, settings, and color table.

Slices in an Illustrator document correspond to table cells in the resulting web page. By default, the slice area is exported as an image file that is enclosed in a table cell. If you want the table cell to contain HTML text and a background color instead of an image file, you can change the slice type to No Image. If you want to convert Illustrator text to HTML text, you can change the slice type to HTML Text.

Sliced artwork using different slice types

A. No Image slice B. Image slice C. HTML Text slice

You can view slices on the artboard and in the Save For Web & Devices dialog box. Illustrator numbers slices from left to right and top to bottom, beginning in the upper left corner of the artwork. If you change the arrangement or total number of slices, slice numbers are updated to reflect the new order.

When you create a slice, Illustrator slices the surrounding artwork into automatic slices to maintain the layout using a web-based table. There are two types of automatic slices: auto slices and subslices. Auto slices account for the areas of your artwork that you did not define as a slice. Illustrator regenerates auto slices every time you add or edit slices. Subslices indicate how overlapping user-defined slices will be divided. Although subslices are numbered and display a slice symbol, you cannot select them separately from the underlying slice. Illustrator regenerates subslices and auto slices as needed while you work.

Create slices

Do one of the following:
- Select one or more objects on the artboard, and choose Object > Slice > Make.
- Select the Slice tool and drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt‑drag (Windows) or Option-drag (Mac OS) to draw from the center.
- Select one or more objects on the artboard, and choose Object > Slice > Create From Selection.
- Place guides where you want to slice the artwork, and choose Object > Slice > Create From Guides.
- Select an existing slice, and choose Object > Slice > Duplicate Slice.
  Tip: Use the Object > Slice > Make command when you want the slice dimensions to match the boundary of an element in your artwork. If you move or modify the element, the slice area automatically adjusts to encompass the new artwork. Also use this command to create a slice that captures text and basic formatting characteristics from a text object.
  Tip: Use the Slice tool, the Create From Selection command, or the Create From Guides command when you want the slice dimensions to be independent of the underlying artwork. Slices that you create in one of these ways appear as items in the Layers panel, and you can move, resize, and delete them in the same way as other vector objects.

Select slices

Use the Slice Select tool to select a slice in the illustration window or the Save For Web & Devices dialog box.

To select a slice, click it.
To select multiple slices, Shift-click. (In the SaveFor Web & Devices dialog box, you can also Shift-drag.)
To select an underlying slice when working with overlapping slices, click the visible section of it.
In addition, you can select slices in the illustration window by doing one of the following:
To select a slice that was created using the Object > Slice > Make command, select the corresponding artwork on the artboard. If the slice is tied to a group or layer, select the target icon adjacent to the group or layer in the Layers panel.
To select a slice that was created using the Slice tool, the Create From Selection command, or the Create From Guides command, target the slice in the Layers panel.
Click on the slice path with the Selection tool .
To select a slice path segment or slice anchor point, click on either item with the Direct Selection tool.
note: You cannot select auto slices. These slices are dimmed.

Set slice options

A slice’s options determine how the content of the slice will look and function in the resulting web page.

Do one of the following with the Slice Select tool:
- Select a slice in the illustration window, and choose Object > Slice > Slice Options.
- Double-click a slice in the Save For Web & Devices dialog box with the Slice Select tool.
Select a slice type and set the corresponding options:

Image

Select this type if you want the slice area to be an image file in the resulting web page. If you want the image to be an HTML link, enter a URL and target frameset. You can also specify a message that will appear in the browser’s status area when the mouse is positioned over the image, alternative text that will appear when the image is not visible, and a background color for the table cell.

No Image

Select this type if you want the slice area to contain HTML text and a background color in the resulting web page. Enter the text you want in the Text Displayed In Cell text box and format the text using standard HTML tags. 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. However, because you cannot see the text on the artboard, this will not be apparent until you view the web page in a web browser.) Set the Horiz and Vert options to change the alignment of text in the table cell.

HTML Text

This type is available only when you created the slice by selecting a text object and choosing Object > Slice > Make. The Illustrator text is converted to HTML text with basic formatting attributes in the resulting web page. To edit the text, update the text in your artwork. Set the Horiz and Vert options to change the alignment of text in the table cell. You can also select a background color for the table cell.

Tip: To edit the text for HTML Text slices in the Slice Options dialog box, change the slice type to No Image. This breaks the link with the text object on the artboard. To ignore text formatting, enter <unformatted> as the first word in the text object.

Lock slices

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

To lock all slices, choose View > Lock Slices.
To lock individual slices, click the slices’ edit column in the Layers panel.

Adjust slice boundaries

If you created a slice using the Object > Slice > Make command, the position and size of the slice is tied to the artwork it contains. Therefore, if you move or resize the artwork, the slice boundaries adjust automatically.

If you created a slice using the Slice tool, the Create From Selection command, or the Create From Guides command, you can manually adjust slices in the following ways:

To move a slice, drag the slice to a new position with the Slice Selection tool . Press Shift to restrict movement to a vertical, horizontal, or 45° diagonal line.
To resize a slice, select the slice with Slice Selection tool, and drag any corner or side of the slice. You can also use the Selection tool and Transform panel to resize slices.
To align or distribute slices, use the Align panel. Aligning slices can eliminate unneeded auto slices to generate a smaller, more efficient HTML file.
To change the stacking order of slices, drag the slice to a new position in the Layers panel or select an Object > Arrange command.
To divide a slice, select the slice and choose Object > Slice > Divide Slices.
You can combine slices that were created by any method. Select the slices and choose Object > Slice > Combine Slices. The resulting slice takes its dimensions and position from the rectangle created by joining the outer edges of the combined slices. If the combined slices are not adjacent or are of different proportions or alignments, the new slice may overlap other slices.
To resize all slices to the artboard boundaries, choose Object > Slice > Clip To Artboard. Slices that extend beyond the artboard are truncated to fit the artboard and autoslices that lie within the artboard are extended to the artboard boundaries; all artwork remains the same.

Remove slices

You can remove slices by deleting them or by releasing them from the corresponding artwork.

To delete a slice, select the slice, and press Delete. If the slice was created using the Object > Slice > Make command, the corresponding artwork is deleted at the same time. If you want to keep the corresponding artwork, release the slice instead of deleting it.
To delete all slices, choose Object > Slice > Delete All. Slices created with the Object > Slice > Make command are released, not deleted.
To release a slice, select the slice and choose Object > Slice > Release.

Show or hide slices

To hide slices in the illustration window, choose View > Hide Slices.
To hide slices in the Save For Web & Devices dialog box, click the Toggle Slices Visibility button .
To hide slice numbers and change the color of slice lines, choose Edit > Preferences > Smart Guides & Slices (Windows) or Illustrator > Preferences > Smart Guides & Slices (Mac OS).

Create image maps

Image maps enable you to link one or more areas of an image—called hotspots—to a URL. When a user clicks on the hotspot, the web browser loads the linked file.

The main difference between using image maps and using slices to create links is in how the artwork is exported as a web page. Using image maps keeps the artwork intact as a single image file, while using slices causes the artwork to be divided into separate files. Another difference between image maps and slices is that image maps enable you to link polygonal or rectangular areas in your artwork, while slices enable you to link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an image map.

Note:

To avoid unexpected results, don’t create image-map hotspots in slices that contain URL links—either the image map links or the slice links may be ignored in some browsers.

Select the object that you want to link to a URL.
In the Attributes panel, select a shape for the image map from the Image Map menu.
Enter a relative or full URL in the URL text box, or select from the list of available URLs. You can verify the URL location by clicking the Browser button.

Note:

To increase the number of visible entries in the URL menu, select panel Options from the Attributes panel menu. Enter a value from 1 to 30 to define how many URL entries you want to be displayed in the URL list.

Have a question or an idea?

If you have a question to ask or an idea to share, come and participate in Adobe Illustrator Community. We would love to hear from you and see your creations.

Adobe

Get help faster and easier

New user?