Slicy for Mac 详细使用指南

Slicy 是一款专为 macOS 设计的、高效精准的图片切片与资源导出工具。它主要面向 UI/UX 设计师和前端开发者，能够智能识别 Photoshop（PSD）文件中的图层、切片和图层组，并快速导出为适用于网页或移动端开发的多种格式图片（如 PNG, JPG, SVG 等）。其核心优势在于无需在 Photoshop 中预定义切片，通过简单的图层命名规则即可实现批量、自动化导出，极大提升了切图工作流效率。

一、软件核心界面与工作区详解

Slicy 的界面秉承了 macOS 应用的简洁风格，主要分为四个功能区域：

1. 菜单栏与工具栏：位于窗口顶部，包含“文件”、“编辑”、“视图”等标准菜单。工具栏提供“打开”、“导出”、“显示/隐藏预览”等最常用操作的按钮。
2. 文件列表/资源库面板：通常位于窗口左侧。显示已打开的 PSD 文件及其内部的所有图层结构树。您可以在此浏览所有可导出的图层和组，并通过勾选框选择需要导出的项目。
3. 中央预览与设置面板：窗口的核心区域。
   • 预览区：实时显示当前选中图层或切片的视觉效果。
   • 设置区：位于预览区下方或右侧，用于配置导出参数，包括：
     • 格式：选择导出图片的格式（PNG, JPG, SVG, WebP等）。
     • 缩放倍数：为 Retina 屏幕设计，可一键导出 @1x, @2x, @3x 等不同倍率的图片。
     • 前缀/后缀：为导出的文件名添加自定义标识。
     • 压缩质量（针对JPG/WebP）：调整图片质量与文件大小的平衡。
4. 状态栏与信息面板：位于窗口底部，显示导出目标文件夹路径、所选项目数量、预计导出文件大小等信息。

二、从创建/打开项目到最终导出的完整操作流程

1. 启动软件与打开项目

操作步骤：

1. 在「应用程序」文件夹或启动台中找到并点击 Slicy 图标启动软件。
2. 打开 PSD 文件有三种方式：
   • 方式一（拖拽）：直接将 PSD 文件从 Finder 拖拽到 Slicy 窗口的文件列表区域。
   • 方式二（菜单）：点击菜单栏「File」>「Open…」或使用快捷键 ⌘Cmd + O，在对话框中选择 PSD 文件。
   • 方式三（最近打开）：点击菜单栏「File」>「Open Recent」选择最近处理过的文件。

2. 浏览与选择导出内容

PSD 文件打开后，左侧列表会分层显示所有图层和组。

操作步骤：

1. 在文件列表面板中，您可以像在 Finder 中一样，点击三角形图标展开或折叠图层组。
2. 每个图层或组名前都有一个复选框。勾选您需要导出的项目。
   • 勾选一个组，将导出该组内所有符合导出规则的独立图层。
   • 您可以按住 ⌘Cmd 键点击多个不连续的项进行多选，或按住 ⇧Shift 键点击进行连续多选。
3. 点击任一图层，中央预览区会实时显示其内容。

3. 配置导出设置

在中央面板的设置区域进行配置，这些设置通常适用于所有被选中的导出项，但部分设置（如格式）也支持基于图层命名规则单独指定。

主要配置项：

• 导出格式 (Format)：从下拉菜单中选择默认导出格式，如 PNG-24（带透明度）、PNG-8、JPG、SVG 等。
• 缩放 (Scale)：勾选需要的倍数，如“1x”、“2x”、“3x”。Slicy 会为每个选中图层生成对应倍数的图片文件。
• 输出路径 (Export to)：点击“Choose Folder…”按钮，选择图片导出后存放的目录。建议为每个项目新建一个独立的导出文件夹。

4. 执行导出

操作步骤：

1. 确保所有需要导出的图层/组已被勾选，且导出设置已配置完毕。
2. 点击工具栏上的「Export」按钮，或使用快捷键 ⌘Cmd + E。
3. Slicy 将开始处理所选内容。处理完成后，状态栏会有提示，您可以在预设的输出文件夹中找到导出的所有图片文件。

三、常用功能进阶技巧

1. 智能切片与图层命名规则

Slicy 的核心智能体现在对图层名的解析上。通过在 Photoshop 中为图层按规则命名，可以精确控制导出行为。

• 基础导出：任何未被隐藏的图层（或组内的顶层图层）只要被勾选，默认都会以其图层名作为文件名导出。
• 指定格式：在图层名后添加后缀，如 button.png 或 icon.jpg，Slicy 会忽略全局设置，按指定格式导出。
• 定义切片区域：这是 Slicy 最强大的功能之一。
  • 在 PS 中创建一个矩形形状图层，并命名为类似 slice#button-bg。
  • 将该形状图层置于需要切出的图像图层 之上 并编入同一组。
  • Slicy 会识别以 slice# 开头的图层，并将其矩形范围作为切片区域，导出该区域内所有下方可见图层合并后的图像，文件名为 button-bg。
• 排除图层：将图层名以英文句点 . 开头，Slicy 会忽略该图层，不将其导出。

2. 批量重命名与组织

在 Slicy 的文件列表面板中，您可以直接右键点击一个图层或组，选择“Rename”进行重命名，这不会修改原始 PSD 文件，但会影响导出的文件名。合理命名可以保持输出文件的整洁性。

3. 利用“仅导出可见内容”

在设置中启用“Only export visible layers”选项（如果提供），可以确保导出的结果与您在 Photoshop 中隐藏/显示图层的状态完全一致，方便进行多版本（如正常态、按下态）组件的导出管理。

四、常见问题与解决方案

问题1：打开PSD文件后，列表是空的或缺少很多图层。

解决方案：

• 检查 PSD 文件中是否有大量图层被隐藏。Slicy 默认可能只显示可见图层，尝试在“View”菜单中查看是否有显示隐藏图层的选项。
• 确保 PSD 文件版本未被过高版本的 Photoshop 创建，兼容性问题可能导致解析失败。尝试在 Photoshop 中“另存为”一份稍旧格式的 PSD 再试。

问题2：导出的图片背景有不需要的白色或黑色，而不是透明的。

解决方案：

• 确认您导出的格式支持透明度，如 PNG-24。如果导出的 JPG 格式，则必然不透明。
• 检查原 PSD 中，该图层或切片区域内是否包含了背景图层。确保需要透明背景的图层下方没有不透明的图层。
• 在 Slicy 的导出设置中，明确选择带透明通道的 PNG 格式。

问题3：使用“slice#”规则，但导出的图片是空的或不对。

解决方案：

• 确认形状图层（slice层）和内容图层在同一个组内，且 slice 层位于内容层之上。
• 确认形状图层是纯矢量形状或像素图层，并且其填充或像素内容不为空（即使颜色是白的也需要有内容）。
• 检查 slice 图层是否被隐藏或锁定，确保其处于可读状态。

五、Slicy for Mac 快捷键汇总表