Smart Slices

Description

A complete solution for slicing designs in place and exporting pixel-perfect image assets at multiple resolutions in any supported format including SVG.

Free vs Paid

Free version only limits current selection to an active layer. There are no other limitations on exporting capabilities and usability as well as no annoying ads, tracking, trial periods, etc.

However, further development will not be possible without your support.

Installation

Unzip the package and drag-and-drop the install.jsx file to Photoshop, or select File > Scripts > Browse… from Photoshop menu and choose the install.jsx file.

Follow the steps of the installer.

Photoshop may need to be restarted for the changes to take effect.

Usage

Open Smart Slices panel available through Window > Extensions > Smart Slices. Select layers and slice them by adding new assets in the panel. With multiple layers selected, the assets can be added to all of them at once as well as copied over from other slices.

For each asset, specify format, size and, optionally, filename suffix and prefix which can include subfolders. The asset name is based on its layer name. If multiple slices selected, assets are grouped by type and size, and each of these properties can be changed for a whole group.

Note: when slicing a smart object containing layer comps, the layer name should match the assigned layer comp name due to a bug in Photoshop.

You can set explicit asset bounds with a new automatically created layer or an existing one. These bounds will be a part of the design for alignment, measuring, etc. Alternatively, the asset bounds can be defined by a vector mask if the slice is a group.

When setting the bounds with multiple layers selected, the closest bounding box is assigned for each slice, e.g. making it easy to slice icons arranged in a grid.