Advanced Artboard “Slices” Guide

“Slices” are smaller areas of your drawing you can set as an optional method for export. Slices allow you to export portions of your drawing separately, such as when designing user interface icons or buttons. Slices are also commonly used to divide an image into smaller sections, for example for use on an HTML webpage. Unlike exporting selected objects, exported slices include all visible objects across multiple layers.

In this tutorial, we’ll show a close-up view of slice alignment, how to adjust its size, make copies, name, arrange, and export.

Using Graph Paper to View a Pixel Grid

To begin, let’s see how slices align to a pixel grid. An easy way to view the precise location of a slice is to turn on Graph Paper and have it show a single pixel (point) grid.

To set a pixel grid on graph paper, do the following:

  1. Graph paper uses the unit of measure of the drawing canvas (see Drawing Setup). Click the Drawing Size & Units button in the toolbar, or choose ‘File > Drawing Size & Units…’ from the main menu; from the drop-down, change the drawing units to “points”
  2. Next, select the ‘Graph Paper’ tab
  3. If it is not already, check the box so that grid lines are visible; this shows the Graph Paper layer
  4. Set the Graph Paper ‘Span’ to “1” point
  5. Set the ‘Divisions’ to “2”
  6. Click “OK”

This creates a dense pixel grid on the Graph Paper layer, with 1/2 pixel divisions. As desired, zoom in to view the pixels and use the Layer tab to show/hide the grid.

Close-up View of Slice on Grid

Use the Slices layer and add a slice to your drawing. Drawing a slice is similar to drawing a rectangle.

  1. Click the Slices Layer to make active.
  2. Choose the Slices tool and draw the slice.

Next, zoom-in to view the alignment of the slice edges on the graph paper grid. Notice how the slice edges perfectly align to the grid (the slice bounding box is rendered with a 1-point dashed line; the pixel edge grid line goes down its center).

Pixel Aligned Artwork

While slices are always precisely aligned to the pixel grid, your artwork may not be. Larger artwork, and raster images may be unaffected. But for small graphics such as buttons and icons, pixel alignment can prevent blurry/fuzzy results. See the Complete Guide to Pixel Perfect Icons to design crisp graphics aligned to the pixel grid.

The Active Slice

When a slice is drawn or selected, it is “active” for editing. The slice appears highlighted, and its bounding box shows its dimensions. Only one slice can be active at a time. When you click off the slice with the Select tool, it is no longer active and will appear semi-transparent with no visible dimensions.

Adjust Slice Size/Dimensions

Slices can be edited directly with the Select tool, or indirectly using the Geometry tab.

  1. Use the Select Slices tool and drag the lower right handle of a slice.
  2. Alternatively, use the Geometry Tab to edit the active slice X Y location, its width and height dimensions, change the slice name, or its bounding box color.

HINT: Slices must be uniquely named; a sequential number is always appended to the slice name (i.e., “1,2,3…”). A button in the Geometry tab provides a shortcut to the export menu.

HINT: When your drawing uses different drawing units than points (e.g., centimeters or inches), the Geometry tab will display in those units, while the slice bounding box will continue to display points.

To Show Slices While Another Layer Is Active

At times you may want to view slice boundaries while editing your drawing. By default, slices are only visible while the Slices layer is active. When you switch to another layer to edit your drawing, the slices are automatically hidden. To show slices while another layer is active, click the Slices ‘eye’ show/hide icon.

Copy Slices

If you need multiple slices of the same dimension, the active slice can be copy/pasted using the main menu ‘Edit > Copy / Paste’ commands, or command + C  and command + V keyboard shortcuts. Alternatively, right-click a slice to reveal its contextual menu commands. Pasted slices are sequentially numbered (i.e., “1,2,3…”).

HINT: Pasted slices are not offset – use the Select tool or Geometry tab to reposition. Slices can overlap, have the edges aligned, or be completely separated.

To Delete a Slice

Right-click a slice and choose ‘Delete Slice’ from its contextual menu.

Align Slice Edges to Divide Artwork into Sections

To divide artwork into sections, align the edges of two or more slices.

To divide artwork into equal sections, the slices should be the same dimensions divisible by the desired size of your drawing area. For example, if you have a 400×400 point drawing to divide into four equal sections, each slice would be 200×200, with their edges aligned.

When perfectly aligned, slice edges will overlap. Zoom in to view aligned slice edges (shown here with Graph Paper).

Show/Hide Individual Slices

Individual slices can be shown or hidden from the Layer tab or Export menu.

From the Layer tab:

  1. Expand the Slices layer.
  2. Click the ‘eye’ icon to show/hide a slice.

HINT: Like any layer with hidden drawing objects, when the Slices layer is collapsed you may forget that there are some slices that exist but are not visible. When in doubt, expand the Slices layer to reveal all slice objects and their show/hide setting.

From the Export menu:

3.   When exporting ‘Slices’ uncheck slices you do not want to be included in the export.

HINT: Check/uncheck slices in the Export menu controls the show/hide slices setting in the Slices layer. When you are finished with export, any unchecked slices will remain hidden in the layer.

Export Slices

Exporting Slices gives you pixel-perfect control over the size of the exported image. Unlike exporting selected objects as individual exported images, Slices export every visible object cropped to the Slice area. Thus many objects may be included within a single Slice, and those objects may be on different layers.

  1. Choose ‘File > Export…’ from the main menu.
  2. Click the ‘Slices’ Export type. Slices included here will be exported as individual files. Slices are sections of your drawing defined on the Slices layer.
  3. As desired, check or uncheck the slices to be included.
  4. OPTIONS: As desired, edit the following Options.
    • FORMAT – Choose the export file format (PDF, PNG, TIFF, JPEG, GIF and BMP) from the drop-down menu.
    • RESOLUTION – Choose the export resolution from the drop-down menu.
    • QUALITY – When exporting JPEG format, choose the desired quality of the exported image. Higher quality results in larger file sizes.
    • COLOR SPACE – Choose your desired color space for the exported graphic(s) from the drop-down menu. For example, you may want to choose ‘sRGB’ when exporting web graphics or graphics that will display on devices. You may want to choose ‘CMYK’ or ‘Adobe RGB’ when exporting for printed materials.
    • SCALE – Choose the scale of the export by typing a new percent scale. For example, 100% exports your graphics at the dimensions specified in your drawing. To double the size of the exported drawing, for example for creating Retina scaled graphics, change the scaling factor to 200%. This effectively allows any desired resolution or image size to be exported from your vector drawings.
    • TRANSPARENT BACKGROUND – For supported file types (PNG, TIFF, and GIF), optionally check the box to make the background of the drawing transparent in the exported image. PDF automatically preserves background transparencies.
  5. DESTINATION: As desired, edit the Destination of the exported file(s).
    • FOLDER – Choose the folder to save the exported images to.
    • FILE NAME – Enter text for the main part of the file name. Additionally, a second part of the file name is added to accommodate multiple separate files. Choose ‘Incremental Index’ to append an index number to the file name, or choose ‘Source Name’ to append the names of the source slices, layers or objects as shown in the Export list.
    • OVERWRITE EXISTING FILES – Replaces any existing files having the same name. If unchecked, file name clashes are resolved by appending additional numbers as needed.
    • SHOW IN FINDER – Reveal files created after exporting.
  6. Click the ‘Export’ button.

HINT: Your export settings will be remembered each time you export.

SaveSave