Adobe Photoshop 插件 · 游戏UI自动化

告别手动切图
让设计直接变成代码

在 Photoshop 中标记图层,一键导出为 Egret EXML 或 FairyGUI XML。
九宫格、拼音命名、坐标追踪,全流程自动化。

3步 从标记到导出
2种 引擎输出格式
0手动 无需逐一切图
↓ 下滑了解更多

核心功能

从标记到导出,每一步都为效率而生

🎯

一键标记

选中图层点击标记,自动添加前缀,支持批量操作,实时显示已标记数量。

🧩

九宫格切图

图层名加入 9s[L,T,R,B]@wxh 语法,自动识别九宫格区域,支持 Scale9Grid 弹性缩放。

🌐

拼音自动转换

中文 PSD 文件名自动转拼音,避免路径乱码,支持缩写和全拼两种模式。

📐

坐标精确导出

每个切图自动记录 PSD 中的原始坐标、宽高,生成 image_manifest.json 清单文件。

⚡

一键批量导出

标记完成后点击导出,自动创建目录结构、导出 PNG 切图、生成清单、调用桥接工具。

🔐

账号授权管理

Token 登录、自动刷新、账号校验,确保工具安全可靠,支持多账号切换。

三步搞定一切

简单到不可能是巧合,但这就是 AutoSlice

01

标记图层

在 Photoshop 中选中要导出的图层或组,点击"标记当前选中",图层名自动加上 ygame_ 前缀。

02

配置导出

选择输出目录,指定桥接工具路径,选择目标引擎格式(Egret / FairyGUI / 全部)。

03

一键生成

点击"导出切图",自动完成:PNG 切图导出 → 清单生成 → 桥接工具调用 → Egret EXML / FairyGUI XML 产出。

实际效果

手动标记切图,自动生成 Egret EUI、FGUI 及 TS 文件

登录界面导出效果
登录界面 手动标记 Egret EUI FGUI TS
主界面导出效果
主界面 手动标记 Egret EUI FGUI TS

双引擎输出

一次标记,同时生成两种主流游戏引擎格式

Egret EXML

📁 {psdname}_gui/
📄 {name}Skin.exml
📄 {name}Skin.ts
📄 default.res.json
📁 images/
🖼️ btn_ok_t1.png
🖼️ panel_bg.png
  • EUI 皮肤 EXML 标记文件
  • TypeScript 皮肤类
  • 资源映射 default.res.json
  • Scale9Grid 九宫格支持

FairyGUI XML

📁 {psdname}_gui/
📄 {name}.xml
📄 package.xml
📁 images/
🖼️ btn_ok_t1.png
🖼️ panel_bg.png
  • 组件 XML 描述文件
  • 包描述 package.xml
  • 层级结构自动还原
  • Scale9Grid 缩放适配

开始使用

安装插件,即刻提效

AutoSlice Photoshop 插件

Adobe Photoshop CC 2021+ 插件包(.ccx 格式)

✅ Photoshop CC 2021 或更高版本
✅ 需要有效账号授权
✅ 建议搭配 PSD_UI_Schema 桥接工具使用

联系与合作

有任何问题或合作意向?通过 QQ 加好友联系

💬

QQ 联系

QQ 号: 2663835738

添加好友时备注"AutoSlice 切图"

打开 QQ 聊天
🤝

合作方向

  • 🎮 游戏 UI 自动化工作流定制
  • 🛠️ 企业版私有化部署
  • 📦 更多游戏引擎格式适配
  • 🔌 插件定制开发
  • 📚 教程与技术支持
❓

常见问题

支持哪些 Photoshop 版本?

支持 Photoshop CC 2021(v22.0)及以上版本。

可以导出到 Cocos Creator 吗?

目前支持 Egret 和 FairyGUI,Cocos Creator 格式正在开发中,可以联系定制。

九宫格标记怎么写?

格式:9s[left,top,right,bottom]@宽x高,@部分可选。

如何获取账号授权?

通过 QQ 添加好友联系管理员,申请账号。