Slicy for Mac: A Detailed User Guide

Slicy is an efficient and precise image slicing and asset export tool designed specifically for macOS. It is primarily aimed at UI/UX designers and front-end developers, capable of intelligently recognizing layers, slices, and layer groups in Photoshop (PSD) files, and quickly exporting them as images in various formats suitable for web or mobile development (such as PNG, JPG, SVG, etc.). Its core advantage lies in eliminating the need to pre-define slices in Photoshop; through simple layer naming conventions, batch and automated exports can be achieved, greatly improving the efficiency of the slicing workflow.

I. Detailed Explanation of the Software’s Core Interface and Workspace

Slicy’s interface follows the clean style of macOS applications and is mainly divided into four functional areas:

1. Menu Bar and Toolbar: Located at the top of the window, containing standard menus such as “File,” “Edit,” and “View.” The toolbar provides buttons for the most common operations, such as “Open,” “Export,” and “Show/Hide Preview.”
2. File List/Asset Library Panel: Usually located on the left side of the window. It displays opened PSD files and the entire layer structure tree within them. You can browse all exportable layers and groups here, and select the items to export via checkboxes.
3. Central Preview and Settings Panel: The core area of the window.
   • Preview Area: Displays in real time the visual effect of the currently selected layer or slice.
   • Settings Area: Located below or to the right of the preview area, used to configure export parameters, including:
     • Format: Select the export image format (PNG, JPG, SVG, WebP, etc.).
     • Scale Factor: Designed for Retina screens, allowing one-click export of images at different ratios such as @1x, @2x, @3x.
     • Prefix/Suffix: Add custom identifiers to the exported file names.
     • Compression Quality (for JPG/WebP): Adjust the balance between image quality and file size.
4. Status Bar & Info Panel: Located at the bottom of the window, displaying information such as the export destination folder path, the number of selected items, and the estimated export file size.

II. Complete Workflow from Creating/Opening a Project to Final Export

1. Launching the Software and Opening a Project

Steps:

1. Find and click the Slicy icon in the “Applications” folder or Launchpad to launch the software.
2. There are three ways to open a PSD file:
   • Method 1 (Drag & Drop): Directly drag the PSD file from Finder to the file list area of the Slicy window.
   • Method 2 (Menu): Click the menu bar “File” > “Open…” or use the shortcut ⌘Cmd + O, then select the PSD file in the dialog box.
   • Method 3 (Recent): Click the menu bar “File” > “Open Recent” to select a recently processed file.

2. Browse and Select Content to Export

After the PSD file is opened, the list on the left will display all layers and groups hierarchically.

Steps:

1. In the file list panel, you can click the triangle icon to expand or collapse layer groups, just like in Finder.
2. Each layer or group name has a checkbox in front of it. Check the items you need to export.
   • Checking a group will export all independent layers within that group that meet the export rules.
   • You can hold the ⌘Cmd key and click multiple non-adjacent items for multi-selection, or hold the ⇧Shift key and click for continuous multi-selection.
3. Click any layer, and the central preview area will display its content in real time.

3. Configure Export Settings

Configure in the settings area of the central panel. These settings usually apply to all selected export items, but some settings (such as format) also support individual specification based on layer naming rules.

Main configuration items:

• Export Format: Select the default export format from the drop-down menu, such as PNG-24 (with transparency), PNG-8, JPG, SVG, etc.
• Scale: Check the desired multiples, such as “1x”, “2x”, “3x”. Slicy will generate image files at the corresponding multiples for each selected layer.
• Export to: Click the “Choose Folder…” button to select the directory where images will be saved after export. It is recommended to create a separate export folder for each project.

4. Execute Export

Steps:

1. Make sure all layers/groups you need to export are checked, and the export settings are fully configured.
2. Click the “Export” button in the toolbar, or use the shortcut ⌘Cmd + E.
3. Slicy will begin processing the selected content. Once processing is complete, a notification will appear in the status bar, and you can find all exported image files in the preset output folder.

III. Advanced Tips for Common Features

1. Smart Slicing and Layer Naming Rules

The core intelligence of Slicy lies in its parsing of layer names. By naming layers in Photoshop according to the rules, you can precisely control the export behavior.

• Basic Export: Any visible layer (or the top layer within a group), as long as it is checked, will by default be exported with its layer name as the filename.
• Specify Format: Add a suffix after the layer name, such as button.png or icon.jpg. Slicy will ignore the global settings and export in the specified format.
• Define Slice Areas: This is one of Slicy’s most powerful features.
  • Create a rectangle shape layer in PS and name it something like slice#button-bg.
  • Place this shape layer above the image layer you want to slice and group them together.
  • Slicy recognizes layers whose names start with slice# and uses their rectangular bounds as the slice area, exporting the merged image of all visible layers beneath that area, with the filename button-bg.
• Exclude layers: Prefix the layer name with an English period ., and Slicy will ignore that layer and not export it.

2. Batch renaming and organization

In Slicy’s file list panel, you can right-click a layer or group and choose “Rename” to rename it. This does not modify the original PSD file but affects the exported filenames. Sensible naming helps keep your output files tidy.

3. Use “Only export visible content”

Enable the “Only export visible layers” option in settings (if available) to ensure the export result exactly matches the hidden/visible state of layers in Photoshop, making it easier to manage exports of multi-state components (such as normal and pressed states).

IV. Common issues and solutions

Issue 1: After opening a PSD file, the list is empty or many layers are missing.

Solution:

• Check whether a large number of layers in the PSD file are hidden. Slicy may show only visible layers by default; try checking the “View” menu for an option to show hidden layers.
• Make sure the PSD file version was not created by a newer version of Photoshop, as compatibility issues may cause parsing to fail. Try “Save As” a PSD in an older format in Photoshop and try again.

Issue 2: The exported image background has unwanted white or black instead of being transparent.

Solution:

• Confirm that the export format you are using supports transparency, such as PNG-24. If you export as JPG, it will inevitably not be transparent.
• Check whether the layer or slice area in the original PSD contains a background layer. Make sure there are no opaque layers beneath the layer that needs a transparent background.
• In Slicy’s export settings, explicitly select a PNG format with an alpha channel.

Issue 3: Using the “slice#” rule, but the exported image is empty or incorrect.

Solution:

• Make sure the shape layer (slice layer) and the content layer are in the same group, and that the slice layer is above the content layer.
• Make sure the shape layer is a pure vector shape or pixel layer, and that its fill or pixel content is not empty (even if the color is white, it still needs content).
• Check whether the slice layer is hidden or locked, and make sure it is in a readable state.

V. Slicy for Mac Keyboard Shortcuts Summary