User Guide Cancel

Slices and image maps

  1. Illustrator User Guide
  2. Get to know Illustrator
    1. Introduction to Illustrator
      1. What's new in Illustrator
      2. Common questions
      3. Illustrator system requirements
      4. Illustrator for Apple silicon
    2. Workspace
      1. Workspace basics
      2. Learn faster with the Illustrator Discover panel
      3. Create documents
      4. Toolbar
      5. Default keyboard shortcuts
      6. Customize keyboard shortcuts
      7. Introduction to artboards
      8. Manage artboards
      9. Customize the workspace
      10. Properties panel
      11. Set preferences
      12. Touch Workspace
      13. Microsoft Surface Dial support in Illustrator
      14. Undo edits and manage design history
      15. Rotate view
      16. Rulers, grids, and guides
      17. Accessibility in Illustrator
      18. Safe Mode
      19. View artwork
      20. Use the Touch Bar with Illustrator
      21. Files and templates
    3. Tools in Illustrator
      1. Tools at a glance
      2. Select tools
        1. Selection
        2. Direct Selection
        3. Group Selection
        4. Magic Wand
        5. Lasso
        6. Artboard
      3. Navigate tools
        1. Hand
        2. Rotate View
        3. Zoom
      4. Paint tools
        1. Gradient
        2. Mesh
        3. Shape Builder
      5. Text tools
        1. Type
        2. Type on a Path
        3. Vertical Type
      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)
      1. Generate scenes, subjects, and icons using text prompts
      2. Generate vector patterns using text prompts
      3. Generate vector shape fills using text prompts
      4. Recolor your artwork using text prompts
    5. Quick actions
      1. Retro text
      2. Neon glow text
      3. Old school text
      4. Recolor
      5. Convert sketch to vector
  3. Illustrator on the web (beta)
    1. Illustrator on the web (beta) overview
    2. Illustrator on the web (beta) FAQ
    3. Troubleshooting issues FAQ
    4. Keyboard shortcuts for Illustrator on the web (beta)
    5. Create and combine shapes on the web
    6. Add and edit text on the web
    7. Apply colors and gradients on the web
    8. Draw and edit paths on the web
    9. Work with cloud documents on the web
    10. Invite collaborators to edit on the web
  4. Illustrator on the iPad
    1. Introduction to Illustrator on the iPad
      1. Illustrator on the iPad overview
      2. Illustrator on the iPad FAQs
      3. System requirements | Illustrator on the iPad
      4. What you can or cannot do on Illustrator on the iPad
    2. Workspace
      1. Illustrator on the iPad workspace
      2. Touch shortcuts and gestures
      3. Keyboard shortcuts for Illustrator on the iPad
      4. Manage your app settings
    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
      1. Work with type and fonts
      2. Create text designs along a path
      3. Add your own fonts
    7. Work with images
      1. Vectorize raster images
    8. Color
      1. Apply colors and gradients
  5. Cloud documents
    1. Basics
      1. Work with Illustrator cloud documents
      2. Share and collaborate on Illustrator cloud documents
      3. Share documents for review
      4. Upgrade cloud storage for Adobe Illustrator
      5. Illustrator cloud documents | Common questions
    2. Troubleshooting
      1. Troubleshoot create or save issues for Illustrator cloud documents
      2. Troubleshoot Illustrator cloud documents issues
  6. Add and edit content
    1. Drawing and dimensioning
      1. Drawing basics
      2. Edit paths
      3. Draw pixel-perfect art
      4. Draw with the Pen, Curvature, or Pencil tool
      5. Draw simple lines and shapes
      6. Draw rectangular and polar grids
      7. Draw and edit flares
      8. Image Trace
      9. Simplify a path
      10. Symbolism tools and symbol sets
      11. Adjust path segments
      12. Design a flower in 5 easy steps
      13. Create and edit a perspective grid
      14. Draw and modify objects on a perspective grid
      15. Use objects as symbols for repeat use
      16. Draw pixel-aligned paths for web workflows
      17. Measure and plot dimensions
    2. 3D objects and materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Map artwork over 3D objects
      4. Create 3D Text
      5. Create 3D objects
    3. Color
      1. About color
      2. Select colors
      3. Use and create swatches
      4. Adjust colors
      5. Use the Adobe Color Themes panel
      6. Color groups (harmonies)
      7. Color Themes panel
      8. Recolor your artwork
    4. Painting
      1. About painting
      2. Paint with fills and strokes
      3. Live Paint groups
      4. Gradients
      5. Brushes
      6. Transparency and blending modes
      7. Apply stroke on an object
      8. Create and edit patterns
      9. Meshes
      10. Patterns
    5. Select and arrange objects
      1. Select objects
      2. Layers
      3. Group and expand objects
      4. Move, align, and distribute objects
      5. Snap objects to glyph
      6. Snap objects to Japanese glyph
      7. Stack objects    
      8. Lock, hide, and delete objects
      9. Copy and duplicate objects
      10. Rotate and reflect objects
      11. Intertwine objects
      12. Create realistic art mockups
    6. Reshape objects
      1. Crop images
      2. Transform objects
      3. Combine objects
      4. Cut, divide, and trim objects
      5. Puppet Warp
      6. Scale, shear, and distort objects
      7. Blend objects
      8. Reshape using envelopes
      9. Reshape objects with effects
      10. Build new shapes with Shaper and Shape Builder tools
      11. Work with Live Corners
      12. Enhanced reshape workflows with touch support
      13. Edit clipping masks
      14. Live shapes
      15. Create shapes using the Shape Builder tool
      16. Global editing
    7. Type
      1. Add text and work with type objects
      2. Create bulleted and numbered lists
      3. Manage text area
      4. Fonts and typography
      5. Convert text within images into editable text
      6. Add basic formatting to text
      7. Add advanced formatting to text
      8. Import and export text
      9. Format paragraphs
      10. Special characters
      11. Create type on a path
      12. Character and paragraph styles
      13. Tabs
      14. Find missing fonts (Typekit workflow)
      15. Arabic and Hebrew type
      16. Fonts | FAQ and troubleshooting tips
      17. Create 3D text effect
      18. Creative typography designs
      19. Scale and rotate type
      20. Line and character spacing
      21. Hyphenation and line breaks
      22. Spelling and language dictionaries
      23. Format Asian characters
      24. Composers for Asian scripts
      25. Create text designs with blend objects
      26. Create a text poster using Image Trace
    8. Create special effects
      1. Work with effects
      2. Graphic styles
      3. Appearance attributes
      4. Create sketches and mosaics
      5. Drop shadows, glows, and feathering
      6. Summary of effects
    9. Web graphics
      1. Best practices for creating web graphics
      2. Graphs
      3. SVG
      4. Slices and image maps
  7. Import, export, and save
    1. Import
      1. Place multiple files
      2. Manage linked and embedded files
      3. Links information
      4. Unembed images
      5. Import artwork from Photoshop
      6. Import bitmap images
      7. Import Adobe PDF files
      8. Import EPS, DCS, and AutoCAD files
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Save and export
      1. Save artwork
      2. Export artwork
      3. Create Adobe PDF files
      4. Adobe PDF options
      5. Use Illustrator artwork in Photoshop
      6. Collect assets and export in batches
      7. Package files
      8. Extract CSS | Illustrator CC
      9. Document info panel
  8. Printing
    1. Prepare for printing
      1. Set up documents for printing
      2. Change the page size and orientation
      3. Specify crop marks for trimming or aligning
      4. Get started with large canvas
    2. Printing
      1. Overprint
      2. Print with color management
      3. PostScript printing
      4. Print presets
      5. Printer's marks and bleeds
      6. Print and save transparent artwork
      7. Trapping
      8. Print color separations
      9. Print gradients, meshes, and color blends
      10. White Overprint
  9. Automate tasks
    1. Data merge using the Variables panel
    2. Automation with scripts
    3. Automation with actions
  10. Troubleshooting 
    1. Fixed issues
    2. Known issues
    3. Crash issues
    4. Recover files after crash
    5. File issues
    6. Supported file formats
    7. GPU device driver issues
    8. Wacom device issues
    9. DLL file issues
    10. Memory issues
    11. Preferences file issues
    12. Font issues
    13. Printer issues
    14. Share crash report with Adobe
    15. Improve Illustrator performance

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
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

  1. 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.

  1. 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.

  2. 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.

  1. Select the object that you want to link to a URL.
  2. In the Attributes panel, select a shape for the image map from the Image Map menu.
  3. 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.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online