设计色彩管理(下)

色彩管理是专业设计工具的一个基本特性——在选择颜色、决定对比度和评估易读性时,能够依赖于你所看到的是什么是至关重要的。最后两篇文章(第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则没有任何影响。

image.png

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块就好了,但这不是必需的。

image.png

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 --

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容