- 分类：
- Export & Automation
- 摘要：
- 深入解析Photoshop UI资源导出的三种主流方式：借助Generator插件实现自动化输出、使用内置“导出为”功能快速生成切片、以及运用脚本语言进行批量处理，全面覆盖从单个元素到整套界面的导出需求。
用三种内置方法从 Photoshop 导出 UI 资源：
Adobe Generator — 将图层重命名为 icon.png 这类文件名，资源会自动出现在旁边的文件夹中。最适合批量工作流和多分辨率输出。
导出为（Export As） — 对单个资源的格式、质量和缩放算法提供完全手动控制。
将图层导出到文件（Export Layers To Files） — 一键批量将所有可见图层导出为独立文件。
此外还有第三方插件如 PNGHat 和 Layerbench，可以按需选择图层或一键输出抠图内容。
Layerbench —— 一款独立的 Photoshop 插件：按 Default/iOS/Android 预设和 @1x–@3x 批量导出图层为 PNG 等格式，每张裁剪到可见像素。
延伸阅读：如何在 Photoshop 中保存 PNG · 如何从 Photoshop 导出。
该用哪种 Photoshop 导出方法？
每种方法对应不同的工作流。下表对比四种常用路径，方便你根据项目选择。
| 方法 | 最佳用途 | 自动化程度 | 多分辨率 | 学习曲线 | 输出控制 |
|---|---|---|---|---|---|
| Adobe Generator | 根据图层名称批量导出 | 高（只需改名） | 是 — 通过 @2x 命名 |
低 | 良好 |
| 导出为（Export As） | 单个资源，完全控制设置 | 低 — 每次手动导出 | 否 — 需手动逐尺寸导出 | 低 | 高 |
| 将图层导出到文件（Export Layers To Files） | 所有可见图层生成独立文件 | 中等 — 一键操作 | 无内置缩放 | 中等 | 中等 |
| PNGHat / Layerbench | 选中的组或抠出的主体 | 中等 — 依赖插件 | 依赖插件 | 低 | 中等 |
每种方法的细节参考了 Noble Desktop 的 Generator 教程、Adobe 的导出为文档以及社区指南。
如何设置 Adobe Generator 实现自动导出资源
Generator 会监测图层名称。把图层重命名为 文件名.扩展名 后，它会自动导出该图层内容，无需点击对话框。
开启 Generator（两种菜单路径，取决于版本）
菜单位置因 Photoshop 版本而异：
- Photoshop CC 2017 及更早版本： 进入 文件（File）→ 生成（Generate）→ 图像资源（Image Assets），勾选开启。勾选后会出现对勾标记。
- Photoshop CC 2018 及更新版本（包括当前 2025/2026）： 进入 文件（File）→ 自动（Automate）→ Generator 插件（Generator Plugins），在子面板中启用“图像资源（Image Assets）”。
提示： 如果找不到上述路径，可在 Photoshop 的帮助菜单中搜索“Generator”（帮助（Help）→ 关于 Generator 插件（About Generator Plugins））。Adobe 关于 Generator 的帮助页面也列出了你当前版本的具体菜单位置。
旧版 Photoshop 中启用 Generator 的菜单路径（文件 → 生成 → 图像资源）。新版中入口位于文件 → 自动 → Generator 插件。
让 Generator 生效的图层命名规则
Generator 会把任何看起来像文件名的图层名称转换为导出文件。遵循 Noble Desktop 指南中的规则：
- 一律用小写 —
icon-menu.png可以；Icon-Menu.PNG可能失败。 - 不要有空格 — 用连字符
-或下划线_代替。 - 只使用字母数字、连字符和下划线 — 避免括号、逗号或特殊符号。
- 以支持的扩展名结尾：
.png、.jpg、.gif、.svg。
图层命名示例：
icon-menu.png
button-primary.jpg
logo-header.svg
控制 JPEG 质量与选择 PNG 变体
直接在文件名中附加质量和格式修饰符。Noble Desktop 教程记录了这些精确标记：
-
JPEG 质量： 在名称后加
-XX%。banner.jpg-75%以 75% 质量导出。默认值为 90%。 -
PNG‑8（256 色）： 使用
.png-8— 适合不带透明的小图标。 -
PNG‑24（24 位，无 Alpha）： 使用
.png-24。 -
PNG‑32（24 位 + Alpha 透明）： 直接使用
.png— 这是默认设置，保留透明。 -
约 600 KB — 默认 90% JPEG 质量时的文件大小
-
约 300 KB — 同一图像在 65% 质量下 — 缩小 50%
-
90% — Generator 未指定
-XX%时的默认 JPEG 质量
在使用 Generator 的基于文件名的质量标记之前，可先用图像大小对话框预览像素尺寸。
支持的输出格式（包括 SVG）
Adobe Generator 可以从图层内容生成 JPEG、PNG、GIF 和 SVG 文件。根据 Adobe 官方文档，SVG 对于矢量 UI 图标尤其有用，因为它独立于分辨率。要导出 SVG，将图层命名为 icon.svg — 确保图层内容是矢量智能对象或形状图层，效果最佳。
Generator 保存文件的位置
Generator 会在 PSD 文件所在目录创建一个名为 [你的PSD文件名]-assets 的文件夹。例如 app-design.psd 会生成 app-design-assets/。所有重命名后的图层都会出现在这个文件夹里。你可以在图层名称中包含斜杠来创建子文件夹，比如 icons/menu.png 会将文件放入 app-design-assets/icons/menu.png。
什么时候该用导出为（Export As）而不是 Generator？
Generator 很快，但 导出为（Export As） 能让你完全控制单个资源的格式、质量和色彩配置文件。当你需要以下情况时使用它：
- 以自定义尺寸导出特定图层或画板。
- 为缩小或放大选择精确的插值算法。
- 在确定之前预览效果。
Adobe 的 导出为文档列出了七种插值选项：
- 两次立方（较锐利）（Bicubic Sharper） — 推荐用于缩小图像尺寸。
- 保留细节（Preserve Details） — 推荐用于放大图像。
- 两次立方（较平滑）（Bicubic Smoother）、两次立方（Bicubic）、两次线性（Bilinear）、邻近（硬边）（Nearest Neighbor） 和 两次立方（自动）（Bicubic Automatic） 可供特殊需求使用。
注意： 导出为不支持多分辨率自动化。要获得
@2x和@3x版本，你必须手动逐次导出，或者切换到 Generator 进行批量工作。
如何使用将图层导出到文件（Export Layers To Files）一键批量导出所有图层
当你需要将每个可见图层都变成独立文件时——比如制作精灵图或交付单个元素——内置脚本一键搞定：
- 进入 文件（File）→ 脚本（Scripts）→ 将图层导出到文件（Export Layers To Files）。
- 选择一个目标文件夹和一个文件名前缀（如
icon-）。 - 选择文件类型（PNG、JPEG 等），点击 运行（Run）。
重要： 这个脚本会导出 所有可见图层。如果你的 PSD 里有几十个隐藏的参考图层，先复制一份文件（如 Lemmasoft 论坛的社区建议那样），或者隐藏你不想导出的图层。该脚本不会缩放资源；输出为 1× 尺寸。
这个脚本是快速生成完整图层集的好办法，但它缺少多分辨率输出和逐图层格式控制。
像 PNGHat 这样的第三方插件能提供什么
如果内置方法在选择性导出时显得笨拙，插件可以带来更可视化的操作流程。PNGHat（出自 Tuts+ 教程）的工作方式如下：
- 选中你要导出的图层或组。
- 点击 PNGHat 导出选中图层（PNGHat Export Selected Layers） 按钮。
- 资源会按你设定的命名方案保存到已配置的文件夹中。
PNGHat 的优势在于你无需重新组织整个图层面板就能导出一个子集。另一个选项是 Layerbench，它包含无损图层导出功能：选中一个或多个图层，它会将每个图层导出为透明 PNG，并按可见边界裁切——保持原始 1× 尺寸，不缩放。这对于从密集的 PSD 中快速提取单个 UI 元素非常有用。
如何命名和组织 UI 资源以方便开发者交接
一致的命名和文件夹结构能节省开发者的时间，防止链接失效。将 Generator 的命名规则扩展为完整的层级体系。基于 Quora 上设计师分享的常见 iOS/Android 规范，推荐的结构如下：
assets/
├── icons/
│ ├── icon-menu@2x.png
│ ├── icon-menu@3x.png
│ └── icon-settings@2x.png
├── screens/
│ └── home-screen.jpg
└── sprites/
└── button-sprite.png
Generator 可以通过在图层名称中使用斜杠来复制这种结构。例如，将图层重命名为 icons/icon-menu@2x.png，它会自动保存到 app-design-assets/icons/ 目录下。关键规则：
- 全部 小写，用连字符代替空格。
- 添加
@2x、@3x表示分辨率变体——Generator 会自动缩放图层。 - 对于 Android，使用密度文件夹：
drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi。
专业提示： 创建一个包含设计系统组件（图标、按钮、颜色）的“主”PSD 文件，使用 Generator 维护一个实时的
assets/文件夹。任何对图层名称或内容的更改都会即时更新导出的文件。
设计师常遇到的导出问题及解决方法
“Generator 菜单不见了——怎么办？”
这是最常见的问题。根据 Adobe 关于 Generator 的帮助页面，菜单路径在 Photoshop CC 2018 左右发生了变化。检查 文件（File）→ 自动（Automate）→ Generator 插件（Generator Plugins）（新版）或 文件（File）→ 生成（Generate）→ 图像资源（Image Assets）（旧版）。如果两者都不出现，使用帮助菜单搜索“Generator”——该命令可能藏在一个未默认启用的子菜单中。重置 Photoshop 的首选项也可以恢复丢失的菜单项。
“将图层导出到文件生成了太多空文件”
该脚本会导出所有可见图层。如果你的 PSD 有几十个隐藏的参考图层、文本图层或参考元素，先复制一份文件（如 Lemmasoft 论坛帖子中的建议）。或者，先只切换显示你需要的图层，再运行脚本。没有可见内容的空图层仍然会产生小的空白文件——提前删除或合并它们。
“我的图层在 Illustrator 中不会自动更新”
Photoshop 本身无法将更新推送到 Illustrator。一位设计师在 Adobe Community 提出了这个问题。解决方法：使用链接的智能对象（文件 → 置入链接），让 Illustrator 直接读取 PSD；或者将 Generator 的导出内容保存到共享文件夹中，在资源变化时重新链接。两种方法都不是完全自动的——请将其视为“手动刷新”工作流。
下一步——开启 Generator 并测试一个示例项目
打开手头任意一个 UI PSD 文件，执行以下操作：
- 通过 文件（File）→ 自动（Automate）→ Generator 插件（Generator Plugins）（或旧版的 文件（File）→ 生成（Generate）→ 图像资源（Image Assets））开启 Generator。
- 找到一个图层——任何图层——将其重命名为
test.png（全部小写，无空格）。 - 切换回桌面或文件管理器。在 PSD 文件旁边找到名为
[你的PSD文件名]-assets的文件夹。里面会有test.png。 - 如果这一步成功了，更进一步：将某个图层重命名为
icon@2x.png，检查导出的文件像素尺寸是否变成原图层的两倍。
这一简单的测试可以确认你的 Photoshop 版本支持 Generator、文件夹路径正确，并且你理解了命名规则。之后，你就可以使用上述方法扩展到整个项目的资源导出。