色彩管理是专业设计工具的一个基本特性——在选择颜色、决定对比度和评估易读性时,能够依赖于你所看到的是什么是至关重要的。最后两篇文章(第1部分和第2部分)介绍了颜色管理的基础知识。本文详细介绍了流行的设计工具中设计所需的设置。
设计面向的对象决定了色彩的管理和色彩空间的使用。
如果你在设计网站,CSS和SVG的默认色彩空间是sRGB,因此你的相关文件的色彩空间应该设置为sRGB。CSS level 4可能会支持更多的颜色空间,SVG将来可能会支持。如果您正在编写一个基于web的应用,那么现在也要使用sRGB。
如果你正在设计iOS、Android或Mac的应用程序,也应该使用sRGB。在某些情况下,你可能选择或被要求使用宽色域的配置文件,比如Display P3,但这些情况仍然相当少见。如果选择使用Display P3,那么你仍然需要一套sRGB的色彩设置,这样就会使应用程序二进制文件要大得多(Xcode可以为iOS和macOS生成,应用瘦身可以有所帮助)。如果您使用的是代码绘制元素,那么Android、iOS和macOS都支持宽色域的配置文件(但支持根据你需要的操作系统版本而有所不同)。
Display P3和其他颜色空间将变得更加常见,但最简单的方法是:如果你不确定,就使用sRGB。颜色管理问题调试起来非常麻烦,所以一开始设置色彩空间是很重要的,并确保所有团队成员对他们的工具和文档使用相同的色彩设置。
分配或转换
在更改文档的颜色配置文件时,通常可以采用两种方法——分配配置文件或转换配置文件。它们都有各自的用途,取决于具体情况。
为文档分配一个配置文件可以保持原始颜色值不变(#ff0000将保持#ff0000),但是色彩表现会随着新的颜色配置文件的应用而改变,相当于简单地给文档加个新的色彩空间的标签。这就像说“这个文档是sRGB”而不改变文档本身的内容。
转换配置文件正好相反——原始颜色值改变,但色彩表现尽可能的相同(转换配置文件需要对每个颜色数值进行读取、转换和写入;源文件和目标文件之间可能会出现一些舍入和裁剪)。由于颜色配置文件的转换是不可逆的,所以在转换之前最好对文档进行备份。
系统设置
在Mac上,「系统偏好设置」中的「显示器」选项可以更改与显示器的颜色配置文件。设置不会改变显示器本身,只会改变系统认为的显示器的属性。你应该设置为默认选项(“彩色LCD”、“iMac”或类似的设置,在列表的顶部),或者使用校准设备。不建议修改这些默认的设置。
我还建议禁用自动调整亮度、夜视、f.lux(根据经纬度调节显示器色温的软件)等功能,因为做设计的时候,这些都会影响显示的准确性;当然也要禁用2018Mac更新的 True Tone 功能。
Sketch
在Sketch 4.8之前,Sketch没有色彩管理功能。如果你使用的是旧版本Sketch,请更新。Sketch的当前版本有色彩管理功能,它可以设置为在sRGB或Display P3下工作。默认情况下,Sketch新建的文件是没有色彩管理的。根据需要,你可以将色彩空间设置为sRGB或Display P3。
我建议将sRGB用作默认,你可以在某些文档中单独设置为Display P3。
为现有文档分配颜色配置文件,请从「File」中选择「Change Color Profile」。如果文档之前没有颜色管理,将分配新的颜色配置文件;如果一个文档已经设置为sRGB或Display P3,您将被询问是否要分配或转换文档中的颜色。
理解「Save For Web」的作用是很重要的,因为Sketch中的描述有点不准确。即使「Save For Web」未被勾选,也没有EXIF数据被保存;而且只有一种情况下,导出的图片中包含ICC配置文件。
sRGB色彩配置的文档导出png时,如果启用了「Save For Web」,会包含一个gamma块。如果禁用了「Save For Web」,则包含一个sRGB块。我建议导出png时禁用Save For Web,因为sRGB chunk是对文件内容的更好描述。sRGB块比gamma块小3字节,因此关闭Save For Web会导致文件稍微小一些。
Photoshop
Photoshop有色彩管理,可设置为在sRGB或Display P3下工作。即使你偶尔需要色彩空间为Display P3的文档,最好仍将sRGB设置为默认。在「编辑」菜单下选择「颜色设置」,然后将工作空间设置为sRGB,并为RGB文档选择保留嵌入概要文件;同时最好禁用「用灰度系数混合文本颜色」(原因如下)。
若要为现有文档分配颜色配置文件,请从「编辑」菜单中选择「分配配置文件」。要转换为颜色配置文件,请从「编辑」菜单中选择「转换为配置文件」。
Bjango Photoshop动作包含“快速转换”和“分配到sRGB和Display P3”的动作。
当用Photoshop通过菜单栏的「文件」-「导出」-「导出为web所用格式」或「导出为」导出Display P3的png时,请确勾选「嵌入颜色文件」,并禁用「转换为sRGB」。我还测试了通过「生成」导出,这种方式并不会保存颜色文件,因此不能用于Display P3。
上述「导出为web所用格式」和「导出为」的设置如下
illustrator
Illustrator有色彩管理,它可以设置为在sRGB或Display P3工作。即使你偶尔需要色彩空间为Display P3的文档,最好仍将sRGB设置为默认。在「编辑」菜单下选择「颜色设置」,然后将工作空间设置为sRGB,并为RGB文档选择保留嵌入概要文件;
若要为现有文档分配颜色配置文件,请从「编辑」菜单中选择「分配配置文件」。要转换为颜色配置文件,请从「编辑」菜单中选择「转换为配置文件」。
Illustrator不能导出包含颜色文件的png图片,因此它不适合导出Display P3图片。在「导出为屏幕所用格式」中没有与颜色管理相关的设置,所以如果您正在保存sRGB的png,就不需要设置。「存储为web所用格式」确实有一个“转换到sRGB”选项,但如果文档是sRGB则没有任何影响。
XD
Adobe XD没有颜色管理,也没有颜色管理设置。
Adobe已经编写了很多的有颜色管理的应用程序,并且比其他任何公司都有更多的色彩管理经验。但令人失望的是,Adobe的主打界面设计工具中竟没有任何颜色管理功能。希望Adobe能尽早加入这方面功能,大家可以通过这个投票来支持XD的颜色管理功能。
Affinity Designer
Affinity Designer有颜色管理,可以设置为sRGB或Display P3。默认的RGB颜色配置文件可以首选项的颜色部分设置。
要将文档分配或转换为颜色配置文件,请从“文件”菜单中选择“文档设置”。文档的颜色配置文件可以在Color选项卡中找到。
Affinity Designer的导出选项非常特殊,可以完全控制保存的内容。对于sRGB的png,我建议每个通道使用8bit,没有元数据,也没有颜色配置文件。对于DisplayP3的png,我建议每个通道使用16位,没有元数据,并包含颜色配置文件。根据使用的不同可能略有变化。
Affinity Designer可以完全执行导出设置的操作。如果能够为sRGB图像包含一个sRGB块就好了,但这不是必需的。
Figma
Figma没有颜色管理,也没有颜色管理设置。Figma桌面应用程序在呈现显示器的颜色——如果是sRGB文件,那么在Display P3屏幕上会看起来更鲜艳(使用Figma desktop 3.5.3进行测试)。在Figma在Chrome中(测试版本为64.0.3282.186)或通过Safari(测试版本为11.0.3)能正确显示所有颜色,但前提是sRGB。
如果你的目标是Display P3,则不能正确显示这些颜色。在Firefox中运行Figma时不进行颜色管理。Firefox中可能有一些设置可以改善这种情况,并与Chrome和Safari的工作方式相匹配。
InVision Studio
InVision Studio没有色彩管理,也没有色彩管理设置。
比较
目前,测试的设计工具中只有三种具有完整的sRGB和显示P3工作流。
下图中,“sRGB canvas”表示应用程序可以在画布上正确显示sRGB颜色。“Display P3 canvas”的意思是相同的,但用于Display P3。
“sRGB PNGs”表示应用程序可以导出带有正确颜色和sRGB块的PNG图像,或者根本不包含色彩配置文件,因为没有配置文件数据的PNG通常被认为是sRGB。如果一个应用程序不能在画布上正确显示颜色,那么至少它就可以在这方面(正确导出)进行改进。
“Display P3 PNGs”表示应用程序可以导出正确颜色的PNG图像并嵌入的Display P3的颜色配置文件。
上述比较只涉及到表面的功能——WebP导出、图像导入、位深度以及其他许多因素也应该加入比较。考虑到色彩管理的“要么全有,要么全无”的性质,仅部分功能支持往往无济于事,需要一个从开始到结束完整的管理。
总的来说,设计工具在色彩管理方面做得还不够,亟待改善。
-- 翻译自 bjango --