Slices and image maps
- Illustrator User Guide
- Get to know Illustrator
- Introduction to Illustrator
- Workspace basics
- Learn faster with the Illustrator Discover panel
- Create documents
- Default keyboard shortcuts
- Customize keyboard shortcuts
- Introduction to artboards
- Manage artboards
- Customize the workspace
- Properties panel
- Set preferences
- Touch Workspace
- Microsoft Surface Dial support in Illustrator
- Undo edits and manage design history
- Rotate view
- Rulers, grids, and guides
- Accessibility in Illustrator
- Safe Mode
- View artwork
- Use the Touch Bar with Illustrator
- Files and templates
- Tools in Illustrator
- Tools at a glance
- Select tools
- Navigate tools
- Paint tools
- Text tools
- Draw tools
- Modify tools
- Quick actions
- Illustrator on the iPad
- Introduction to Illustrator on the iPad
- Select and arrange objects
- Work with images
- Cloud documents
- Add and edit content
- Drawing basics
- Edit paths
- Draw pixel-perfect art
- Draw with the Pen, Curvature, or Pencil tool
- Draw simple lines and shapes
- Draw rectangular and polar grids
- Draw and edit flares
- Image Trace
- Simplify a path
- Symbolism tools and symbol sets
- Adjust path segments
- Design a flower in 5 easy steps
- Create and edit a perspective grid
- Draw and modify objects on a perspective grid
- Use objects as symbols for repeat use
- Draw pixel-aligned paths for web workflows
- 3D objects and materials
- Select and arrange objects
- Reshape objects
- Crop images
- Transform objects
- Combine objects
- Cut, divide, and trim objects
- Puppet Warp
- Scale, shear, and distort objects
- Blend objects
- Reshape using envelopes
- Reshape objects with effects
- Build new shapes with Shaper and Shape Builder tools
- Work with Live Corners
- Enhanced reshape workflows with touch support
- Edit clipping masks
- Live shapes
- Create shapes using the Shape Builder tool
- Global editing
- Add text and work with type objects
- Create bulleted and numbered lists
- Manage text area
- Fonts and typography
- Identify fonts from images and outlined text
- Add basic formatting to text
- Add advanced formatting to text
- Import and export text
- Format paragraphs
- Special characters
- Create type on a path
- Character and paragraph styles
- Find missing fonts (Typekit workflow)
- Arabic and Hebrew type
- Fonts | FAQ and troubleshooting tips
- Create 3D text effect
- Creative typography designs
- Scale and rotate type
- Line and character spacing
- Hyphenation and line breaks
- Spelling and language dictionaries
- Format Asian characters
- Composers for Asian scripts
- Create text designs with blend objects
- Create a text poster using Image Trace
- Create special effects
- Web graphics
- Import, export, and save
- Creative Cloud Libraries in Illustrator
- Prepare for printing
- Automate tasks
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.