PSD2UGUI使用记录

PSD2UGUI使用记录

插件地址:https://github.com/zs9024/quick_psd2ugui

下载插件,按照教程操作。

从下载的项目中将脚本复制到Photoshop安装目录下PSD2UGUI使用记录

PSD2UGUI使用记录

 

打开PSD文件。

标记按钮,按钮名[email protected]标记,_Normal为按钮普通状态图片。(具体参考文档)

PSD2UGUI使用记录

 

标记Common图片,图片名[email protected]。(九宫格切割方法具体看文档)

PSD2UGUI使用记录

 

选择文件-》脚本-》Export PSDUI,然后选择存放目录。

导出xml和图片。(注意所有图层在一个Root组下,否则会出现错误“合并可见图层当前不可用”)PSD2UGUI使用记录

导出结果如下,图片和XML文件。

PSD2UGUI使用记录

 

接下来在Unity中通过读取xml生成UGUI。

将导出的图片和XML拷贝到下载的PSD2UGUI项目下。PSD2UGUI使用记录

点击QuickTool,点击PSDImport 选择 XML文件打开即可生成UGUI。PSD2UGUI使用记录

UGUI效果图如下。PSD2UGUI使用记录

PSD2UGUI使用记录

 

可以看到和原始图片有一些差异,主要是Common图片旋转的问题。(刚接触,如果有大佬知道,希望能指导指导)

接下来一些小细节手动调整一下,最终效果如下图。PSD2UGUI使用记录

还有一些Slider,Group等的组件没使用,待有时间测试一下。