Slices and image maps

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.

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

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.

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.

More like this

• Collect assets and export in batches
• Best practices for creating web graphics

Have a question or an idea?