游戏 UI PSD 如何批量分层导出并交付游戏引擎
从 PSD 文件整理、图层命名和透明通道,到浏览器本地解析、PNG/JPEG 导出和 ZIP 交付,建立更稳定的游戏 UI 资产流程。
游戏 UI PSD 如何批量分层导出并交付游戏引擎
游戏 UI 设计稿完成后,真正耗时的往往不是画面本身,而是把按钮、图标、面板、装饰和背景逐个导出,再交给程序导入引擎。设计反复调整时,这套机械流程还会重复发生。
Tooliva 的 PSD 批量分层导出 可以在浏览器中解析一个或多个 PSD,预览文档并选择像素图层,支持 PNG、JPEG 和多 PSD ZIP 导出。要让批量导出真正稳定,关键仍然是先建立清晰的 PSD 交付规范。
PSD 为什么经常无法直接交付?
- 图层名仍是“图层 1”“副本 5”,无法判断用途。
- 按钮背景、文字、光效和图标混在一个复杂组中。
- 智能对象、调整图层和特殊混合模式依赖 Photoshop 渲染。
- 画布中保留大量隐藏草稿和废弃方案。
- 同名图层导出后互相覆盖。
- 资源边缘包含不必要的空白或背景色。
因此,批量导出工具不是用来替代文件整理,而是把整理后的 PSD 更快转换成引擎资源。
设计师交付前的 PSD 整理规则
统一图层命名
名称应说明页面、类型和状态,例如:
home_btn_start_normalhome_btn_start_pressedbattle_icon_coindialog_bg_reward
区分可导出层和辅助层
参考线、文字说明、尺寸标记和废弃方案不要混入可导出图层。必要时建立统一的“参考”组,并在交付前关闭。
复杂效果保留源文件并准备栅格化副本
智能对象、图层样式和调整图层可能依赖 Photoshop。为提高浏览器解析和引擎显示的一致性,可以保留原始可编辑版本,同时复制一份用于导出的像素图层。
优先使用 RGB 8-bit
复杂色彩模式和高位深文件可能增加兼容性问题。当前工具建议使用 RGB 8-bit,并尽量将需要导出的复杂内容栅格化。
批量分层导出的标准步骤
第一步:拖入一个或多个 PSD
批量上传适合处理同一版本的多个页面。单次文件数量不宜无限增加,建议按功能模块分批处理,便于发现解析失败的文件。
第二步:在文件列表中选择并预览
先查看合成预览,确认上传的是正确版本。项目中常同时存在“最终”“最终2”“最终修改”等文件,只看文件名很容易选错。
第三步:勾选需要导出的像素图层
不要默认全部导出。背景参考、文字说明和被遮挡的旧方案都可能成为无用资源。只选择真正需要进入引擎的图层。
第四步:选择 PNG 或 JPEG
| 资源类型 | 推荐格式 | 说明 |
|---|---|---|
| 按钮、图标、装饰 | PNG | 保留透明通道和清晰边缘 |
| 大面积不透明背景 | PNG 或 JPEG | 根据画质和体积要求选择 |
| 预览图和临时稿 | JPEG | 文件较小,不保留透明 |
| 半透明光效 | PNG | 需要保留 Alpha 信息 |
第五步:下载单图层或 ZIP
少量修改可以只下载单个图层;完整页面交付则按 PSD 或全部文件打包 ZIP。压缩包名称应包含模块和版本,例如 ui_home_v03.zip。
导出后不要立刻丢进引擎
导出只是第一步,还需要进行资源检查:
- 透明边缘是否有白边、黑边或半透明污染。
- 图层尺寸是否合理,是否包含巨大空白区域。
- 按钮多状态尺寸是否一致。
- 九宫格面板是否保留正确边框区域。
- 文件名是否存在空格、中文符号或重复名称。
- 图片是否需要进一步切分或合并。
与切图和图集工具如何串联?
有些 PSD 图层本身仍是一张包含多个图标的合集,可以继续放入 AI 智能切图工具 生成单独切片。完成导出和切分后,再根据页面加载关系使用 智能精灵图打包工具 生成图集与坐标数据。
推荐流程:
- PSD 整理并按规范命名。
- 批量解析和导出 PNG/JPEG。
- 检查透明边、尺寸和重复文件。
- 合集图片进入智能切图。
- 按页面或场景分组打包图集。
- 导入 Unity、Cocos Creator 或 Godot 并配置锚点。
团队交付建议
除了图片,最好同时提供一份简单资源说明,记录页面、状态、缩放方式、九宫格边界和是否允许拉伸。对于会频繁修改的 UI,程序侧应尽量通过命名规则和目录约定自动更新,避免每次重新绑定。
常见错误
- 直接导出所有可见图层,产生大量无用文件。
- 同名图层导致覆盖,却没有在导出后检查数量。
- JPEG 用于需要透明的按钮,出现实色背景。
- 复杂图层没有栅格化,解析结果与设计稿不同。
- 把所有页面资源放进同一图集,增加不必要加载。
FAQ
PSD 中所有图层都能直接导出吗?
不一定。复杂智能对象、调整图层和特殊效果可能需要先准备栅格化副本。
游戏 UI 图层应该导出 PNG 还是 JPEG?
需要透明的 UI 元素优先 PNG;不透明大背景可根据体积和画质选择。
批量导出前为什么要统一图层命名?
规范命名能减少覆盖和错用,并方便程序自动化导入。
导出的 UI 图层还需要打包图集吗?
通常需要按页面和加载时机分组,但不应把所有资源无条件放入一张图集。
总结
稳定的 PSD 交付流程由两部分组成:设计文件本身要规范,导出过程要可重复。先整理命名、图层类型和透明需求,再使用 PSD 批量分层导出,可以显著减少每次版本更新中的机械操作。
blog.detail.sections.faq
PSD 中所有图层都能直接导出吗?
复杂智能对象、调整图层、文字效果和部分特殊混合可能无法按预期直接转换。为提高兼容性,可在保留源文件的前提下,将需要交付的复杂内容复制并栅格化。
游戏 UI 图层应该导出 PNG 还是 JPEG?
需要透明边缘的按钮、图标和装饰通常使用 PNG;不需要透明且面积较大的预览图或背景可根据项目需求选择 JPEG。
批量导出前为什么要统一图层命名?
规范名称可以减少覆盖、错用和重复导入,并方便程序通过规则自动绑定资源。
导出的 UI 图层还需要打包图集吗?
通常需要根据页面、加载时机和材质进行分组,再生成图集。并非所有图层都应该进入同一张图集。
blog.detail.sections.tool

PSD Layer Exporter Guide: Export Game UI Assets from Photoshop Files
Learn how a PSD layer exporter helps game developers extract buttons, panels, icons, characters, and UI elements from Photoshop files faster.

PSD to Game Engine Workflow: Prepare UI Assets for Unity, Cocos, and Godot
Learn how to convert PSD design files into clean game engine assets for Unity, Cocos, and Godot with better naming, folders, PNG export, and QA checks.

How to Batch Export PSD Layers to PNG for Game Development
A practical workflow for batch exporting PSD layers to transparent PNG assets for mobile games, UI screens, icons, and 2D production pipelines.
