Photoshop到Unity像素级对齐

Photoshop到Unity像素级对齐

00 前言

UI设计师在PhotoShop中做图, 到UI界面会产生色差.

01 处理方法

01.0 第一步 - 管线设置(前端/TA)

01.0.0 Linear空间

使用定制管线, 做如下设置.

01.0.1 Gamma空间下

无需专门的设置

01.1 第二步 - Unity设置(前端/UI)

01.1.0 Unity贴图设置

P.S. 除了下图红框中的选项需要注意外, 还需要取消勾选Generate Mip Maps(因为生成Mip Map会存在不同清晰度的图片). 非Point的Filter模式可以让图片锯齿感更弱, 但也会破坏原有的图像颜色, 通常保持Billinear即可, 需要像素级还原设计时才选择Point(no filter).

01.2 第三步 - PhotoShop(UI)

01.2.0 色彩空间设置

编辑 -> 颜色设置 -> 设置, PhotoShop默认为日本常规用途2, 这个是对应打印机的设置. 而Unity恰好就是PhotoShop所谓的”不支持色彩管理”的应用程序, 如果需要制作Unity的UI, 则一定要保证颜色设置 -> 设置为显示器颜色.

01.2.1 创建新文件设置

颜色模式: RGB颜色+8bit, Unity最终使用的最高位的图像版本就是RGBA32, 即R8G8B8A8, 即PhotoShop的RGB颜色+8bit.

颜色配置文件: 不管理颜色, 因为Unity并不具备色彩管理功能, 无法跨电脑保存颜色, 选择不管理颜色, 就等于保持原始数据.

01.2.2 修改旧文件设置

当需要将现有文件转换到Unity无色差的文件时, 除了先执行上面提到的色彩空间设置外, 打开现有PNG文件后, 请保证图像->模式->RGB颜色+8位/通道, 然后进行导出.

01.2.3 导出设置

01.2.3.0 PhotoShop

文件->导出->导出为...

文件设置: 勾选较小文件(8位)

色彩空间: 勾选转换为sRGB, 千万不要勾选嵌入色彩管理文件(一旦勾选, 前功尽弃, 我们设置色彩空间, 建立文件时选择不对颜色进行管理, 请千万防止PhotoShop最后坑你一波)

01.2.3.1 PhotoShop CC

文件->存储为->选择PNG->勾选ICC配置文件->保存

参考网页