用李涛高手之路前 3 节课开启我们光与色的大门

用李涛高手之路前 3 节课开启我们光与色的大门

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」

前言: 光与色的学习永远是我们视觉从业者的启蒙课。本篇文章成文于李涛老师关于 PS 方面课程讲解的基础上。

在文章正式开始之前,先统一回复后台读者们的两个疑点:

  1. PS:这是一个平面的、二维图像的合成软件;
  2. 合成:即在已有的素材基础上进行再加工。

1 颜色基于人眼的三个属性:HSB

1.1 色相(H)

色相又称色彩名称或色彩相貌,例如 PS 中我们把红色裙子改成蓝色裙子、绿色裙子等,就是在改色相。

色相是一个环,360 度,按度数来区分。

1.2 饱和度(S)

饱和度又称纯度,例如在 PS 中,如果你嫌红裙子不够“艳”,那么你就调“饱和度”。

1.3 明度(B)

明度是指颜色的明暗,把颜色调明亮一点、调暗一点。

总结:

  1. HSB 图示举例:

2. 每一种色彩模式都对应一种媒介,HSB 的颜色模式就是人眼看到的颜色模式,他对应的媒介就是人眼。

在 PS 软件中,PS 拾色器就是按照 HSB 来设计的。

2 光色三原色:RGB

“原色”是指不能用其他颜色混合而成的色彩。

RGB 是“光色”的三原色,分别指:red 红、green 绿、blue 蓝。

RGB 这种色彩模式对应的媒介是“光素”,也就是我们所说的“发光体”——不需要任何折射就可以产生光。

所有的发光物体都是通过 RGB 这种色彩模式来显示的。比如:电视、电脑的显示器等。如果你家里有老电视,你凑近去看,就可以看到三种发光的晶体管——红、绿、蓝。

RGB 三者中的任何一种光都有 0-255,一共 266 个颜色的位置(0 是接近无颜色,255 就是很纯的红、绿、蓝),由此可以知道显示器能显示的最大颜色级别为:256*256*256=1678 万种颜色。

实际应用中,我们需要用“色值”来具体表示 RGB 不同光亮显示的颜色。例如下图的 RGB 值分别为:5、128、7,那显示的就是绿色:

其他:

  1. 255、255、255 得到“白色”;
  2. 0、0、0 得到“黑色”;
  3. 当 RGB 三个色值相等时,是灰值,显示灰色,没有“色相”。即色值越大,颜色越浅、浅灰,反之深灰。

(注释:假如房间里边有三盏灯——红、绿、蓝,那么三盏灯全开,即 255、255、255 ,那眼前一片“白”;那三盏灯都不开,即 0、0、0 ,那眼前一片“黑”)

3 何为 CMYK 色彩模式

如前文所说,在我们 PS 软件实际操作中,如果你合成的照片是供电脑屏幕显示,那么要设置成 RGB 格式。但如果合成的照片要打印出来,以印刷体的形式展现出来,那么就需要 CMYK 色彩模式。

由于印刷的东西本身不发光,而是通过光的反射和漫反射以及不发光物体的吸收,转而到人的眼睛可以看到的。

CMY 是印刷中油墨的三原色:青色、品红色、黄色。这三者组合和 RGB 一样,也可以形成不同色彩——按照油墨的浓淡色彩百分比来组合。

比如你要印白色:三种色彩的色值为 0、0、0 ——即什么都不印,没油墨自然就是白色印刷纸的颜色;

如果你要印黑色:那色值就是 100、100、100 吗?——即所有的油墨都泼上去,一团糊就成了黑色。但,实际操作中因为我们的油墨中有杂质,所以实际上人们不能通过泼墨的方式得到纯度很高的黑色。因此,人们为了纯黑色的印刷效果,专门特制出了“黑色油墨”—— K (由于黑色英文 BLACK 中的 B 已被 RGB 中的 BLUE 占用,所以去取 BLACK 中的 K 表示)。所以要印“黑色”,那么数值就是:0、0、0、100 (如果,你用数值:100、100、100、100 ,就会把比较细的东西全部印糊)。

4 为什么光色三原色是 RGB ,而印刷色彩模式是 CMYK

4.1 实验 1:何为加色模式

上图中有 3 盏灯( 1 红、2 绿、3 蓝):

  1. 只开 1 和 2 时,红灯和绿灯重合的地方变成了“黄 Y ”;
  2. 当只开 1 和 3 时,红灯和蓝灯重合的地方变成了“品红 M ”;
  3. 当只开 2 和 3 时,绿灯和蓝灯重合的地方变成了“青 C ”;
  4. 当 1、2、3 盏灯同时打开时,重合的地方变成了“白”。

实验结论: 加色模式:光色混合后,得到新的颜色,亮度增加。RGB 均为最大值 255 时,得到白光。

4.2 实验 2:何为减色模式

结论: 减色模式,色料混合后,得到新的颜色,亮度降低。CMYK 均为最小值 0 时,得到白色。CMYK 均为最大值 100%时,得到黑色。 (注:具体的加减色模式,我们在后续的系列文章中会层层深入,初学先不用深究)

实验 1、2 结论:

  1. 色彩是不能单独存在的。无论加减模式,它都只是在模拟某种媒介(或光素、或印刷品)的色彩。
  2. 加色模式是对于 RGB 色彩模式而言的,减色模式是对于 CMYK 色彩模式而言的。
  3. (如下图)印刷中,油墨本身不发光,当光照到颜料上,某些色光被吸收,剩下的被反射回来,人眼看到就感觉到颜料的颜色。一张白纸涂上蓝色油墨 3️⃣,我们肉眼能分辨出蓝色,是因为蓝色颜料把光的红色和绿色吸收掉了,只反射蓝色的光,所以白色混合任何颜色都是原来的颜色。同理 1️⃣2️⃣中我们能分辨出红色和绿色,也是相同的道理。

4. 同理下图4️⃣,当 RGB 白色光照到青色 C 时,青色 C 完全吸收红色 R,只有白色光 RGB 的绿色 G 和蓝色 B 被反射并被眼睛看到。而实验 1 中我们得知,绿色 G 和蓝色 B 加色得到青色 C(5️⃣6️⃣7️⃣同理不赘述)。


后记: 初次接触光和色的知识时一般来说会觉得有点绕,不过沉下心来多看几次便会融会贯通。对于它的实际运用以及其他深层次的原理方面我们会在后续的文章中作详细的分析,届时,你我将会驾轻就熟。

祝好,qdywxs ♥ you!

编辑于 2020-01-16

文章被以下专栏收录

    更多图文详解,请移步“公众号 | 前端一万小时”查看! 我依然固执地认为:在技术的学习上,一系列成体系的、不故意炫技却又干货满满且易读的实战性图文,比绝大多数纯视频教程效率更高、效果更好。