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.
-
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.
A slice’s options determine how the content of the slice will look and function in the resulting web page.
-
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.
- To lock all slices, choose View > Lock Slices.
- To lock individual slices, click the slices’ edit column in the Layers panel.
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.
- 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.
- 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).
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.
-
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.
Бележка:
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.
Публикациите в Twitter™ и Facebook не попадат под клаузите на Creative Commons.