龚毅和田晓蕾结婚照:电脑艺术设计大师之路1 - 色彩模式

来源:百度文库 编辑:九乡新闻网 时间:2024/03/29 07:07:16
RGB色彩模式

  我们用放大镜就近观电脑显示器或电视机的屏幕,会看到数量极多的分为红色绿色蓝色三种颜色的小点。


  下图是上图的局部放大


  屏幕上的所有颜色,也就是我们看到的所有图像内容,都是由它们调和而成的。
  现在我们在Photoshop中打开下面这幅图象
  打开的方法可以点右键选择另存为。也可直接从浏览器拖动图片到Photoshop窗口,如Photoshop窗口被遮盖也可拖到其位于任务栏的按钮上

 >


  按F8或从菜单【窗口>信息】调出信息面板。如下图



  然后试着在图像中移动鼠标,会看到其中的数值在不断的变化。
  注意移动到蓝色区域的时候,会看到B的数值高一些;移动到红色区域的时候则R的数值高一些。
  电脑屏幕上的所有颜色,都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。
  屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。

  那么,现在所看到的这幅图片:


  实际上是由三个部分组成的:

 



  因此这红色绿色蓝色又称为三原色光,用英文表示就是R (red)、G (green)、B (blue)

  可以把RGB想象为中国菜里面的糖、盐、味精,任何一道菜都是用这三种调料混合的
  在制作不同的菜时,三者的比例也不相同,甚至可能是迥异的。
  因此不同的图象中,RGB各个的成分也不尽相同,可能有的图中R(红色)成分多一些,有的B(蓝色)成分多一些。
  做菜的时候,菜谱上会提示类似“糖3克、盐1克”等,来表示调料的多少。
  在电脑中,RGB的所谓“多少”就是指亮度,并使用整数来表示。
  通常情况下,RGB各有256级亮度,用数字表示为从0、1、2...直到255。
  注意虽然数字最高是255,但0也是数值之一,因此共256级。如同2000年到2010年共是11年一样。

  按照计算,256级的RGB色彩总共能组合出约1678万种色彩,即256 x 256 x 256 = 16777216。
  通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。

  这24位色还有一种较为怪异的称呼是8位通道色,为什么这样称呼呢?
  这里的所谓通道,实际上就是指三种色光各自的亮度范围,我们知道其范围是256,256是2的8次方,就称为8位通道色。
  为什么老是用2的次方来表示呢?因为计算机是2进制的,因此在表达色彩数量以及其他一些数量的时候,都使用2的次方。

  这里的色彩通道,在概念上不是一件具体的事物。
  我们可以把三原色光比作三盏不同颜色的可调光台灯,那么通道就相当于调光的按钮。
  对于观看者而言,感受到的只是图像本身,而不会去联想究竟三种色光是如何混合的。
  正如同你只关心电影中演员的演出,而不会去想拍摄时候导演指挥的过程。
  因此,通道的作用是“控制”,而不是“展现”。

  注意以上所说的是色彩通道,和后面教程中的图像通道概念上不完全相同。

  从Photoshop CS版本(实际版本为8)开始增强了对16位通道色的支持,这就意味着可以显示更多的色彩数(即48位色,约281万亿)。
  RGB单独的亮度值为2的16次方,等于65536,65536的三次方为281474976710656。
  但是由于人眼所能分辨的色彩数量还达不到24位的1678万色。所以更高的色彩数量在人眼看来说并没有区别。





  可以用字母R,G,B加上各自的数值来表达一种颜色,如R32,G157,B95,或r32g157b95。
  有时候为了省事也略去字母写32,157,95(分隔的符号不可标错)。那么代表的顺序就是RGB。
  另外还有一种16进制的表达法将在以后叙述,那并不重要。

  那么这些数字和颜色究竟如何对应起来呢,或者说,怎样才能从一组数字中判断出是什么颜色呢?
  实际上,直接从数值中去判断出颜色对于初学者甚至是老手都是比较困难的。
  因为要考虑三种色光之间的混合情况,这需要一定的经验。
  不过这种能力并不是非具备不可的。即使无法做到,对于以后也无妨碍。

  对于单独的R或G或B而言,当数值为0的时候,代表这个颜色不发光;如果为255,则该颜色为最高亮度。
  这就好像调光台灯一样,数字0就等于把灯关了,数字255就等于把调光旋钮开到最大。

  现在离开教程思考一下:
  屏幕上的纯黑、纯白、最红色、最绿色、最蓝色、最黄色的RGB值各是多少?

  思考完之后我们打开Photoshop,调出颜色面板〖快捷键F6〗,并点击一下鼠标处的色块。
  这个色块代表前景色。另一个位于其右下方的色块代表背景色。Photoshop默认是前景色黑,背景色白。快捷键D可重设为默认颜色。如下图:


  如果颜色面板中不是RGB方式,可以点击颜色面板右上角那个小三角形按钮,在弹出的菜单中选择RGB滑块,如下图:


  纯黑,是因为屏幕上没有任何色光存在。相当于RGB三种色光都没有发光。
所以屏幕上黑的RGB值是0,0,0。我们可相应调整滑块或直接输入数字,会看到色块变成了黑色。如下图:


  而白正相反,是RGB三种色光都发到最强的亮度,
  所以纯白的RGB值就是255,255,255。如下图:


  最红色,意味着只有红色存在,且亮度最强,绿色和蓝色都不发光。
  因此最红色的数值是255,0,0。如下图:


  同理,最绿色就是0,255,0;而最蓝色就是0,0,255。
  你做对了吗?如果没有请重复学习前面的内容。
  那么最黄色呢?RGB中并没有包含黄色的项目啊。
  把这问题暂且放下,我们先来看一下色彩的色相谱。如下图:


  所谓色相就是指颜色的色彩种类,分别是:红色橙色黄色绿色青色蓝色紫色。
  这七种颜色头尾相接,形成一个闭合的环。以X轴方向表示0度起点,逆时针方向展开。如下图:


  在这个环中,位于180度夹角的两种颜色(也就是圆的某条直径两端的颜色),称为反转色,又称为互补色。
  互补的两种颜色之间是此消彼长的关系,现在我们把圆环中间的颜色填满,如下图:


  假设目前位于圆心的小框代表就是我们要选取的颜色,
  那么,这个小框往蓝色移动的同时就会远离黄色,或者接近黄色同时就远离蓝色。
  就像在跷跷板上不可能同时往两边走一样,你不可能同时接近黄色和蓝色。

  在上图中间是白色,可以看出,如要得到最黄色,就需要把选色框向最黄色的方向移动,同时也逐渐远离最蓝色。
  当达到圆环黄色部分的边缘时,就是最黄色,同时我们离最蓝色也就最远了。
  由此得出,黄色 = 白色 - 蓝色”。
  为什么不是白色 + 黄色呢?因为蓝色是原色光,要以原色光的调整为准。

  因此,最黄色的数值是255,255,0。如下图:


  由上图也可以得出:纯黄色 = 纯红色 + 纯绿色
  如果屏幕上的一幅图像偏黄色(注意:特指屏幕显示),不能说是黄色光太多,而应该说是蓝色光太少。

  再看一下色谱环,如下图:


  我们可以目测出三原色光各自的反转色。红色对青色、绿色对洋红色、蓝色对黄色。

  除了目测,还可以通过计算来确定任意一个颜色的反转色:
  首先取得这个颜色的RGB数值,再用255分别减去现有的RGB值即可。
  比如黄色的RGB值是255,255,0,那么通过计算:r(255-255),g(255-255),b(255-0)
  互补色为:0,0,255。正是蓝色。

  对于一幅图像,
  若单独增加R的亮度,相当于红色光的成分增加。那么这幅图像就会偏红色。
  若单独增加B的亮度,相当于蓝色光的成分增加。那么这幅图像就会偏蓝色。

  通过以上的教程,我们讲述了RGB色彩的概念,当然后面我们还会介绍其他的色彩模式。
  但请记住:RGB模式是显示器的物理色彩模式。这就意味着:
  无论在软件中使用何种色彩模式,只要是在显示器上显示的,图像最终是以RGB方式出现的。
  因此使用RGB模式进行操作是最快的,因为电脑不需要处理额外的色彩转换工作。当然这种速度差异很难察觉,只是理论上的。

灰度色彩模式

  Photoshop有色彩管理功能。我们目前主要针对网页设计,为了与其他不带色彩管理的软件(如GoLive等)保持一致,应将它关闭。
可从菜单【编辑>颜色设置】打开色彩管理,在顶部的“设置”中选择“色彩管理关闭”。如下图:


  在前面讲述RGB色彩,以及在颜色面板选取颜色的时候,有没有想到过RGB值相等的情况下是什么颜色?那是一个灰度色。如下图:


  现在我们将颜色面板切换到灰度方式(切换方式可参考前面),可看到灰度色谱,如下图:


  所谓灰度色,就是指纯白、纯黑以及两者中的一系列从黑到白的过渡色。
  我们平常说所的黑白照片、黑白电视,实际上都应该称为灰度色才确切。
  灰度色中不包含任何色相,即不存在红色、黄色这样的颜色。但灰度隶属于RGB色域(色域指色彩范围)。
  我们已经知道,在RGB模式中三原色光各有256个级别。由于灰度的形成是RGB数值相等。而RGB数值相等的排列组合是256个,那么灰度的数量就是256级。
  其中除了纯白和纯黑以外,还有254种中间过渡色。纯黑和纯白也属于反转色。

  灰度的通常表示方法是百分比,范围从0%到100%。Photoshop中只能输入整数,在Illustrator和GoLive允许输入小数百分比。
  注意这个百分比是以纯黑为基准的百分比。与RGB正好相反,百分比越高颜色越偏黑,百分比越低颜色越偏白。
  灰度最高相当于最高的黑,就是纯黑。灰度最低相当于最低的黑,也就是“没有黑”,那就是纯白。如下图:

 


  既然灰度和RGB一样,是有数值的,那么这个数值和百分比是怎么换算的?比如18%的灰度,是256级灰度中的哪一级呢?是否是256x18%呢?

  没错,灰度的数值和百分比的换算就是相乘后的近似值,由于灰度与RGB是“黑白颠倒”的,所以18%的灰度等于82%的RGB亮度。
256 x 82% = 209.92,近似算作210,我们可以先在灰度滑块选择18%,再切换到RGB滑块看数值。如下2图:

 


  注意如果没有关闭色彩管理功能,在颜色设置中的灰度标准就有可能不是Gray Gamma 2.2,那么上面的等式就不成立了。
  比如灰度的标准如果是Gray Gamma 1.8,18%的灰度换算成RGB就是218,218,218。

  印刷品与网页的区别在于色彩模式不同,印刷品必须是CMYK色彩模式,而网页主要使用RGB色彩模式。
  Photoshop的色彩管理功能主要是针对印刷品的,而我们目前针对网页,因此可以关闭这个功能。
  不用担心,即使不了解色彩管理的具体内容和灰度Gamma的标准,也不影响后面的学习和操作。
  在教程以后的内容中,默认都是在关闭色彩管理的前提下进行的。如果需要开启的话,会特别提到。

  虽然灰度共有256级,但是由于Photoshop的灰度滑块只能输入整数百分比,因此实际上从灰度滑块中只能选择出101种(0%也算一种)灰度。
  大家可以在灰度滑块中输入递增的数值然后切换到RGB滑块察看,可以看到:
  0%的灰度RGB数值是255,255,255;1%灰度的RGB数值是253,253,253;2%灰度RGB值为250,250,250。
  也就是说,252,252,252这样的灰度是无法用Photoshop的灰度滑块选中的。

  相比之下Illustrator的灰度允许输入两位小数,使得选色的精确性大大提高了。如下图:


  由于灰度色不包含色相,属于“中立”色,因此它常被用来表示颜色以外的其它信息。
  比如我们下面要讲到的通道,灰度在其中已经不是作为一种色彩模式存在,而是作为判断通道饱和度的标准。
  而在以后的蒙板中,灰度又被用作判断透明度的标准。

图像通道

  在Photoshop中有一个很重要概念叫图像通道,在RGB色彩模式下就是指那单独的红色、绿色、蓝色部分。
也就是说,一幅完整的图像,是由红色绿色蓝色三个通道组成的。

  回顾一下前面的三张通道图(顺序为RGB):

 

  


  他们共同作用产生了完整的图像,如下图:


  大家也许会问:如果图像中根本没使用蓝色,只用了红色和绿色,是不是就意味着没了蓝色通道?
  我们丫 阑粕 屠渡 腔ゲ股 敲匆环 渴谴炕粕 耐枷裰校 遣皇蔷筒话 渡 ǖ溃?br> 
  这是错误的概念,一幅完整的图像,红色绿色蓝色三个通道缺一不可。
  即使图像中看起来没有蓝色,只能说蓝色光的亮度均为0,但不能说没有蓝色通道存在。
  “存在、亮度为零”和“不存在”是两个不同的概念。

  现在大家在Photoshop中调入上面那幅完整的图片。再调出通道面板。
  一般来说通道面板和图层面板是拼接在一起的,可以通过调出图层面板〖快捷键F7〗后切换到通道。也可以使用菜单【窗口>通道】。
  如果面板中没有显示出缩览图,可以右键点击面板中蓝色通道下方的空白处,在弹出的菜单中选择“小”或“中”或“大”。我们看到的通道面板类似下图:


  此时注意红色绿色蓝色三个通道的缩览图都是以灰度显示的。
  如果我们点击通道名字,就会发现图像也同时变为了灰度图象。快捷键分别是:〖Ctrl ~〗〖Ctrl 1〗〖Ctrl 2〗〖Ctrl 3〗
  点击通道图片左边的眼睛图标,可以显示或关闭那个通道。可以动手试试看不同通道组合的效果。
  注意不要混淆:最顶部的RGB不是一个通道,而是代表三个通道的总合效果。如果关闭了红色绿色蓝色中任何一个,最顶部的RGB也会被关闭。
  点击了RGB后,所有通道都将处在显示状态。

  我们可以看到:
  如果关闭了红色通道,那么图像就偏青色。如下图:


  如果关闭了绿色通道,那么图像就偏洋红色。如下图:


  如果关闭了蓝色通道,那么图像就偏黄色。如下图:


  以上的现象再次印证了反转色模型:红色对青色、绿色对洋红色、蓝色对黄色。

  现在点击察看单个通道,发现每个通道都显示为一幅灰度图像(不能说是黑白图像)。
  如下3图,从左至右分别是灰度的红色、绿色、蓝色通道图像:

 



  乍一看似乎没什么不同,仔细一看却又有很大不同。
  虽然都是灰度图像,但是为什么有些地方灰度的深浅不同呢?这种灰度图象和RGB又是什么关系呢?

  在回答这些问题之前先复习一下前面的一些概念。
  电脑屏幕上的所有颜色,都由红色绿色蓝色三种色光按照不同的比例混合而成。这就是说,实际上图像是由三幅图像(红色图绿色图和蓝色图)合成的。
  如果对这两个概念有还不明确的话,请再次学习本篇前面有关RGB色彩理论的部分。

  明白了上面的话后,再看下面的部分。
  对于红色而言,它的图像中的分布是不均匀的,有的地方多些,有的地方少些。相当于:有的地方红色亮度高些,有的地方红色亮度低些。
  现在再来看红色通道的灰度图,可以看到,有的地方偏亮些,有的地方偏暗些,如下图:


  那么把两者对应起来看,这幅灰度图实际上等同于红色光的分布情况图。
  在红色通道灰度图中,较亮的区域说明红色光较强(成分较多),较暗的区域说明红色光较弱(成分较少)。
  纯白的区域说明那里红色光最强(对应于亮度值255),纯黑的地方则说明那里完全没有红色光(对应于亮度值0)。

  某个通道的灰度图像中的明暗对应该通道色的明暗,从而表达出该色光在整体图像上的分布情况。
  由于通道共有三个,所以也就有了三幅灰度图像。

  从上面的红色通道灰度图中,我们看到车把上挂着的帽子较白,说明红色光在这区域较亮。
  那么,是否可以凭借这个红色通道的灰度图象,就断定在整个图像中,帽子就是红色的呢?
  还不能,完整图像是由三个通道综合的效果,因此还需要参考另外两个通道才能够定论。
  下面再次列出RGB三个通道的灰度图:

 



  我们从中可以分析出:

  三个通道中帽子部分都是白。代表这个地方的RGB都有最高亮度,那么可以判断出这个地方是白色(或较白)。

  三个通道中坐垫下的挂包中部都是黑色,那么这个地方RGB都不发光,可以判定这个地方是黑色的(或较黑)。

  R通道中的前轮圈是白色,G和B通道中为黑色,说明这个地方只有红色,没有绿色和蓝色,那么这个地方应该是红色(或较红色)。

  三个通道中后轮胎都是差不多的灰度,说明这个地方RGB值较为接近,那么这个地方应该是灰色(或接近灰色)。

  做完以上的推理分析后,可以回到前面原图部分去对照一下。

  现在先来明确几个概念:
  通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255
  通道中的纯黑,代表了该色光在此处完全不发光,亮度级别是0
  也可以这样记忆:在通道中,
  白(或较白)代表“光明的”、“看得见的”、“有东西”;
  黑(或较黑)代表“黑暗的”、“看不见的”、“没东西”。

  下面我们在图像上用不同的颜色写4个字母:青色A,洋红色B,白C,绿色D。注意所有颜色均为纯色。


  请说出ABCD在RGB三个通道中的颜色分别是什么?
  答案在下

  来看一下推理过程,首先我们要确定ABCD的颜色值:
  A是青色,青色是红色的反转色,那么它的RGB值就应该是:0,255,255
  B是洋红色,洋红色是绿色的反转色,那么RGB值就是:255,0,255
  C是白,白色代表RGB均为最大值,RGB值为:255,255,255
  D是绿色,意味着没有R和B的成分,RGB值为:0,255,0

  再看刚提到过的概念:亮度255在通道灰度图中显示白色,亮度0在通道灰度图中显示黑色。

  得出结论:
  A(0,255,255)在RGB中顺序为:黑、白、白
  B(255,0,255)在RGB中顺序为:白、黑、白
  C(255,255,255)在RGB中顺序为:白、白、白
  D(0,255,0)在RGB中顺序为:黑、白、黑

  对照一下RGB通道的灰度图,如下:

 



  如果这道题目没做对,那么请回到前面重新学习。

  再在图像中打上字母E(200,0,255)和F(127,0,255),如下图:


  那么这两个字母在R通道中应该是什么颜色呢?

  首先我们回顾一下前面的定义:
  通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255
  通道中的纯黑,代表了该色光在此处完全不发光,亮度级别是0

  以上只针对纯黑和纯白两种极端状态作出了定义,而在现实图像中,大部分色彩并不是这么极端的。
  我们察看前面图像各个通道的时候,就会发觉纯黑和纯白的部分极少,大部分都是中间的过渡灰色。

  对,就是灰色,亮度值介于1~254的,在通道灰度图中就呈现灰色,切换到R通道,看到的效果如下图:


  同样是灰色,E却要比F亮一些。比较两者在R的亮度数值就会看到,E的亮度为200,F为127。
  亮度值越高,说明色光成分越多,因此通道灰度图中就越偏白。

  现在我们要增加几条内容后重新记忆概念:

  通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。

  通道中的纯黑,代表了该色光在此处完全不发光,亮度级别是0。

  介于纯黑纯白之间的灰度,代表了不同的发光程度,亮度级别介于1至254之间。

  灰度中越偏白的部分,表示色光亮度值越高,越偏黑的部分则表示亮度值越低。

  现在可以明白为何通道用灰度表示了吧?
  因为通道中色光亮度从最低到最高的特性,正符合灰度模式那种从黑到白过渡的表示。正是因为灰度的这种特性,使得它在以后还被应用到其它地方。

  通道中的灰度,与颜色面板的灰度滑块是对应的。记住这点在目前不重要,但在以后讲解Alpha通道时就很重要了。

  在理解了以上的内容后,有一个随之而来的疑问:通道有什么用?
  通道不是拿来“用”的,而是整个Photshop显示图像的基础。

  我们在图像上做的所有事情,都可以理解为是色彩的变动,比如你画了一条黑色直线,就等同于直线的区域被修改成了黑色。
  而所有色彩的变动,其实都是间接在对通道中的灰度图进行调整。

  比如下面这张图片: