Display P3 入门

广色域显示让您的 app 可以显示更加丰富、生动和逼真的颜色。初步了解颜色管理、Display P3 颜色空间，以及制作色彩更丰富的图像和图标的实践工作流程技巧。

资源

下载

（DISPLAY P3入门应用中的DISPLAY P3图像）大家好今天我们要讲的内容多姿多彩 Display P3和广色域它们是什么及如何使用

首先我快速讲一下色彩管理色彩管理可以保证我们显示的颜色在不同的设备平台和色彩空间都尽可能准确 Mac OS和iOS 都有色彩管理

色彩管理可以避免这种错误的出现就是原图到了设备上显示的颜色错误

那么作为设计者就要确保资产标签正确让色彩管理能准确显示颜色

什么是Display P3？简单来说它是RGB 颜色模型的一个色彩空间所代表的的色谱大于现有行业标准sRGB 在座大部分人使用sRGB 已经超过十年了但是有了Display P3 相比sRGB 色彩空间多了25% 这就意味着它可以更准确地显示更多颜色更真实地反映颜色本来的样子这张图里黑色频闪代表了 sRGB的色彩空间你可以看到 Display P3的范围远超它

超出sRGB的色彩空间通俗被称为广色域空间那么支持显示 sRGB之外的色彩空间的显示器被称为广色域显示器

2015年末发布的 iMac Retina 是第一台面向消费者销售的支持Display P3的电脑

在使用Display P3 色彩配置时你有机会使用更高的色彩深度用16位通道替代8位通道这让你可以在广色域显示更多颜色这对渐变色尤其有用那么我们来看个例子

这个例子有些夸张但是可以清楚地看到这个sRGB渐变色呈条带状要解决这个就只能用抖动显示然后就会是这样

那如果我用Display P3 并设置色彩深度为16位通道条带状就几乎看不见了其实就只是缩小了定义颜色之间的距离但是效果更好

我们选择Display P3 是因为它类似于现有的视图和sRGB中已经定义好的条件然后通过连接色域和白点就可以获得一个行为相似的色彩空间更容易理解Display P3工作原理

讲下一部分之前我想说一说鉴于这个演示是基于sRGB投射系统因此所有示例均为演示以至于我会想 “究竟谁能看见Display P3图片？”

用户需要广色域显示器能支持Display P3色彩空间和色彩配置文件 Apple对广色域显示的支持始于2015年末的 iMac Retina 但现在有越来越多的设备支持Display P3 比如iPhone 7和带触控条的 MacBook Pro以及iPad Pro 但是作为设计者呢？你可不想闭着眼睛盲目地设置Display P3属性你要完全掌控这些颜色所以一定要用支持Display P3的广色域显示器比如带触控条的MacBook Pro iMac Retina或者LG5K Display

现在我们知道了什么是 Display P3以及如何看见它再来看一个例子

在这张美丽的图片里有的颜色很漂亮有不同的红色绿色和黄色这是符合现有标准的 sRGB图像受sRGB的限制相机拍到的一些颜色在照片里没有显示出来也就是这里亮蓝色的区域原因很简单就是这些颜色不在sRGB的色彩空间里

同样的图片用Display P3看就是天壤之别这里的色彩丰富绚丽且生动充满整张图片

如果你比较这三张图片就会发现差别很大我都为左边这位仁兄感到难过他看上去很不好

好现在来讲讲 Display P3工作流这次我们用Photoshop举例首先来看一个全新的文档为了能够完全利用这些 Display P3色彩空间的颜色第一件事就是用正确的色彩配置文件标记属性现在我用Photoshop 建一个新文件记住Display P3的色彩配置要是这个样子

下一步就是更改色彩深度

把8位通道改为16 像这样

当你完成精美绝伦的设计后就要保存并导出你的作品 Photoshop提供了多种导出方式比如使用Generator 或者Export As 但这里最关键的一步就是用另存为并保存格式为PNG 因为这是现在唯一能同时嵌入色彩配置文件并在导出属性中保存色彩深度的办法

例如Generator 无法嵌入色彩配置文件整个属性都没有被标签所以只能另存为

在Photoshop打开RAW文件时必须更改色彩配置文件点这里改为Display P3 和16位的色彩深度

如果你的资产来自他人就要保证这些资产直接从 RAW文件转换为Display P3 而不是sRGB 因为这样色彩信息就会全部丢失所以走一遍资产管理程序保证Display P3资产直接转自源文件

如果你用的是已有的资产比如应用图标

就要用Convert to Profile 这会运行颜色匹配程序并且不会改变设计

点这里不要选Assign to Profile 这会将现有的颜色拉到新的色彩空间从而改变你的设计所以总是选择 Convert to profile

以此为例我们来看看在转换成Display P3的前后 sRGB渐变色的 RGB值有何变化我们特别来看一下这个红色

在这个sRGB图片里我选的颜色在最右上角的位置 RGB值为255,0,0 这是最红的颜色

但是转换为Display P3后我看到还有更红的颜色可用而且RGB值变了

现在你们就可以用奇妙的Display P3资产设计应用了在此之前还有个问题 “要不要？” Display P3有时候很好用但有些时候并不是个好选择假设你的应用是用冷色调低饱和度的色系也没有太多的形象 Display P3 就不是个好的选择但能让你注意到UI的细节也是好事比如音量表或转速表里的红线或者让应用图标的渐变色更流畅

如果你的应用运用了大量的自然风光或是旅游景点这种情况下使用Display P3 就更有意义因为这些景像会更生动更丰富颜色也更真实十分接近相机拍摄这幅照片时能够捕捉到的颜色

如果是人物或服装类应用能真实显示裙子或裤子的颜色尤为重要

总的来说我们讲了Display P3色彩空间和色彩配置文件它比sRGB的范围大25% 许多用户的设备都已经能兼容然后要记住创立资产时候的特别流程保证把它用在有用的地方

谢谢

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。