[转载]chinaui.com












[理论] GUI原理1 – 色彩王国




□ 作者:evolrof   2004-11-21 13:07:59 

   我们所看到的色彩世界,在计算机里,通常用以下三种颜色格式进行描述——RGB、HSL和CMYK。这也是设计师接触最多的,当然还有其他的颜色格式,不过详细的我也忘了。


    先来说RGB吧,这也是我们接触最多的格式。要说RGB,要先得说一下LCD显示器的原理。我直接跳过了CRT的原理,因为LCD与RGB联系也更为紧密,当然CRT也是基于RGB色彩理论的。


    LCD俗称液晶显示器,每一个点都是正方形的,由3个长方形的颜色区域组成,颜色分别是Red、Green、Blue。这都很简单了,大家都知道。通过控制不同液晶的偏转角度,达到控制白光通过液晶后到达人眼的亮度,从而控制颜色的饱和度。这里用的是折射原理,实际上LCD背光只有白光,透过不同的颜色棱镜,就会得到红绿蓝3色。



    为什么photoshop在控制RGB色彩的时候,取值范围是0~255呢?这就要涉及到计算机的最小单位了——字节(其实最小应该是Bit),一个字节由8个bit组成,这里是2进制,也就是2的8次方=256。256肯定是不能要的,这已经超出了8个bit所能够表达的范围,所以,颜色值从0到255。


    那为什么不是7个或者6个bit呢?理论上来说,这都是可行的,但实际人眼的分辨能力在7个bit以上,甚至于8bit,所以这也要满足人眼的可视需求。


    一个单独的颜色量由1个字节表示,那一个点就由3个字节表示,也就是2的24次方,就是我们通常所说的24位色。


    RGB是最为通用的一种格式,实际上以后的显示器可能会扩展到7原色或者更多,而不是现在的3原色,毕竟3原色24bit是不能够表达人眼所能看见的任何颜色的。


    再说说HSL,有的也叫做HSB,L表示lightness,B表示Brightness,都是一个意思。通常,根据人的习惯,我们将棱镜分出来的颜色看作是Hue色调,将颜色的Saturation饱和度和Lightness亮度作为调节色调的基本手段,于是就有了HSL。Windows的调色板,包括Photoshop的调色板,使用的就是HSL方式,可以更直观的选择适合的颜色。


    RGB和HSL的世界是不同的,必须通过一系列复杂的算法才能够互换。如果将RGB看作是一个球体,那HSL就是一个梭体,也就是两个圆锥组成的形体。这两个颜色之间的互转目前也有近似的算法,但也要经过非常复杂的公式才能完成,不过已经避免了平方和开发的麻烦。



    这里顺代将一下Photoshop中HSL调节滤镜的原理。一个RGB格式的图片,通过HSL颜色格式,可以将图片的整体色调进行调节。比如我们要调节Hue色调值,增加50。首先,取出每个点的RGB颜色值,转换为HSL,将得到的Hue值加上50,然后转换到RGB颜色,覆盖原来点的颜色。就这样,将所有的点都做一回合的互转,就能够将整个图片的色调进行调整。


    很多平面设计师并不知道Photoshop中为什么有CMYK色,如果你是做印刷设计的,那就必须用CMYK色,因为印刷色不是基于RGB格式的。Cyan 青, Magenta 品红, Yellow 黄, blacK 黑,共同组成CMYK色。我们可以设想一个印刷机是由4种色带组成的,通过4次印刷,将4种不同的颜色叠加在一起,从而形成彩色的封面。在印刷上,或者水墨画上,颜色叠加是在做减法,也就是叠加的越多,颜色越黑。我们小时候都用过水彩笔,如果使用不同的画笔在某一个地方不停的涂抹,最后就得到黑黑的一片。其实,从原理上使用CMY色,就能够得到黑色,而CMY也是RGB的近亲。基于两点原因要添加K,也就是Black。第一,CMY组成的黑色不够黑,纯度不够;第二,由3种颜色叠加成黑色的成本太高,需要反复印刷3次,而黑色是报纸杂志最常用的颜色,也是最便宜的色带。我们通常在报纸的一个角上会发现一个彩色的十字,也就是用于颜色叠加校准用的。通常为了节约成本,尽量的少用CMYK的某一种颜色。比如,在印刷报纸的时候,一个单独黑色的版面只需要印刷一遍,而彩色的版面要印刷4遍。我们在做名片的时候,都需要尽量的少用颜色,达到节约成本的目的。


    CMYK和RGB的互转比较麻烦,主要是CMYK所能够表达的颜色范围更小,而且某些稍微亮点的颜色都不能正确显示。如果看到Photoshop上的某个RGB色,旁边的CMYK色有一个感叹号,那就表明这种颜色印刷不出来,我们就需要修改之。Photoshop的颜色告警也是基于这个原理,因此在印刷的时候更多的要考虑CMYK色。CMYK转换到RGB一般是通过数组来实现的,不同的显示器应该提供不同的颜色表,以适应CMYK色的互换。


    设计领域有一个行规,那就是设计师必须使用CRT显示器,这有两点原因。一,CRT显示器所能够表达的颜色更多,达到32Bit,而LCD原理上只能实现18Bit,现在经过优化后可以实现伪24Bit。二,CRT的颜色更接近于CMYK色,而LCD的颜色太亮了,也就是饱和度太高。


    先来讲一下图片格式,从BMP说起。BMP文件是Windows最基本的文件格式,比如一张未压缩的真彩色图片,文件的大小通常等于56+宽度*高度*3。前54个字节是文件描述,通常称为文件头,中间的是颜色,每个点占用3个字节,遵循从左到右,从上到下的方向。不过,有的BMP格式在存放颜色时,恰好是相反的,先放最后一个点的颜色。BMP文件的结尾以两个0×00,0×00组成。


    不压缩的BMP文件显然是很大的。有两种压缩方式,一,使用256色调色板,二,使用RLE连续压缩算法。调色板最多只能有256种颜色,也就是1个字节,这个调色板放在BMP文件头的位置,颜色可以是任意的真彩色。如果超过256色,系统就会选取使用频度最高的颜色,而忽略掉使用比较少的颜色,将其近似为调色板中的某个颜色。因此,在调色板的BMP文件中,除了256个真彩色之外,就是单个字节的颜色索引值了,就好像一个数组。RLE算法是一种简单有效的方式,能够将水平方向连续的颜色进行压缩,这也是Gif的原理,这在Gif文件里讲。


    Gif文件也是应运而生的,当时还处在Win31的时代,BMP是主角,但是BMP太占空间了,必须有一种高效的压缩算法来取代BMP。Gif文件必须是索引色,带一个不超过256色的调色板。通常,这个调色板的尺寸是2的最多8次方,比如一张图只用了14种颜色,但调色板只能是16色的。调色板里存放的是真彩色,而索引值和BMP的不同,根据用到的颜色多少来决定。比如我们只用了16种颜色的调色板,那索引色就是4Bit,描述了0~15的索引值,也就是说,一个字节可以放下2个点的颜色。当然,Gif格式并不是如此简单,也包含了RLE算法。通过一系列连续的颜色,将颜色做一个压缩。一个字节的高4Bit存放索引值,低4Bit存放连续的个数,也就是说,连续数最多16个,以0~15来计算,0表示这个点之后的点不使用该颜色索引。即使连续的颜色超过16个,比如160个,那也必须拆分开来,由10组颜色索引+颜色连续个数的字节来组成。


    说到这里,就提醒各位设计师,在使用gif图的使用注意以下两点。一,尽量少的使用颜色,不要使用太多的过渡色;二,颜色一定要水平连续存放,比如,我们可以做垂直方向的渐变色,但如果是水平方向的渐变色,那颜色连续性就消失了,压缩比就不高了。


    gif还支持0、1模式的透明色,指定某种调色板的颜色为透明色,则该色在图片上不显示,达到齿条剪裁的目的。因为要牺牲掉一个颜色,所以透明gif的最多颜色为255色,有一个作为透明色用了,但不显示。通常我们使用大红色作为透明色,因为这种颜色过艳,不是很常用,当然也可以使用其他的颜色。


    Gif文件也是应运而生的,当时还处在Win31的时代,BMP是主角,但是BMP太占空间了,必须有一种高效的压缩算法来取代BMP。Gif文件必须是索引色,带一个不超过256色的调色板。通常,这个调色板的尺寸是2的最多8次方,比如一张图只用了14种颜色,但调色板只能是16色的。调色板里存放的是真彩色,而索引值和BMP的不同,根据用到的颜色多少来决定。比如我们只用了16种颜色的调色板,那索引色就是4Bit,描述了0~15的索引值,也就是说,一个字节可以放下2个点的颜色。当然,Gif格式并不是如此简单,也包含了RLE算法。通过一系列连续的颜色,将颜色做一个压缩。一个字节的高4Bit存放索引值,低4Bit存放连续的个数,也就是说,连续数最多16个,以0~15来计算,0表示这个点之后的点不使用该颜色索引。即使连续的颜色超过16个,比如160个,那也必须拆分开来,由10组颜色索引+颜色连续个数的字节来组成。


    说到这里,就提醒各位设计师,在使用gif图的使用注意以下两点。一,尽量少的使用颜色,不要使用太多的过渡色;二,颜色一定要水平连续存放,比如,我们可以做垂直方向的渐变色,但如果是水平方向的渐变色,那颜色连续性就消失了,压缩比就不高了。


    gif还支持0、1模式的透明色,指定某种调色板的颜色为透明色,则该色在图片上不显示,达到齿条剪裁的目的。因为要牺牲掉一个颜色,所以透明gif的最多颜色为255色,有一个作为透明色用了,但不显示。通常我们使用大红色作为透明色,因为这种颜色过艳,不是很常用,当然也可以使用其他的颜色。


    cursor和icon文件,也跟着RGB发展到ARGB。在windows95及之前的时代,icon都是锯齿的,其图片结构和gif的类似,也支持透明gif方式,所以是齿条透明的。而到了windowsxp时代,icon可以像png那样,拥有每个点的透明度了,不过icon并不是一种压缩格式,所以ARGB的icon文件非常大。icon文件可以在单一文件内存放不同尺寸的图标,cursor文件则可以存放相同尺寸的帧。windowsxp有一点落后于mac,那就是没有支持ARGB的动画指针格式的cursor,我们只能通过第三方的软件,才能实现透明有着阴影的动画鼠标。


    说了alpha通道,不得不说一下layer。


    layer是photoshop的基本组成单位,layer其实简单的说,就是一个双向链表。什么是链表?链表是计算机数据结构的最简单概念,就好像一串珍珠项链,每颗珠子就是一个图层。链表的头是最下面的图层,链表的尾是最上面的图层,通过链表的位置来描述Z轴的上下方向。


    每个layer都会带一个不同尺寸的ARGB格式的图片,所以我们将layer翻译成“图”层。根据我们的需求,图层可大可小,这都是photoshop内部动态调整的,设计师感觉不出来图层的大小。由于每个图层都要带一张尺寸不小的图片,所以photoshop非常消耗内存,而在设计阶段,这些消耗还不能节省,也就是不能压缩。不过在保存为psd文件后,根据png格式的算法,可以将图层进行压缩,也就得到了压缩后的psd文件。我们可以将psd理解为多个png的合集。


    每个图层除了能够控制单个点的透明度,还能够拥有一个整体透明度,我叫做MasterAlpha,Photoshop称之为Opacity。MA的取值范围也是0~255,Opacity取值0~100,每个点不仅要受到其Alpha通道的影响,还要受到图层整体透明度的影响。通过调节整体透明度,来达到单个图层的调节。


    在photoshop6之后,引入了包bag的概念,每个bag就是多个图层链表,所有的bag组合成一个bag链表。这就好像XY的二维坐标一样,只是bag更容易管理。这个不用我费口舌了,相信各位从photoshop的使用中能够理解包的具体作用。如果从计算机数据结构的角度理解,包和图层共同组成了一个“树”,是一颗多叉树。包也可以有整体透明度,直接影响包内的所有图层的透明度。因此,就一个点的显示程度而言,受到三方面的控制,点的透明度、图层的透明度和包的透明度。


    在全色盲的眼里,世界是灰色的,树木、房屋、草地、连同阳光,都是灰色的。这就好像将一幅图片去色了,只显示256级灰度一样。最简单的去色,就是R+G+B/3,这是简单的平均,不过连同Photoshop都使用这一平均公式,因为他来的快。还有一种,称为视觉灰度intensity,这是使用测光仪测试红绿蓝三种基色的亮度值,单位是流明。测试方法非常简单,全屏显示一种颜色,测光仪就可以得到不同的流民值。就好像我们的经验一样,蓝色是三种基色中最暗的一种颜色,而绿色则是最亮的颜色,红色处于中间,他们的具体比例是Red0.21 Green0.70 Blue0.09。所以,又产生了另一种去色的方式,R*0.21+Green*0.70+Blue*0.09,这是一种加权平均的算法,某些图形处理软件使用这一算法,而这也更接近于我们想要的真实灰色。根据这一原理,我们可以得知由红色和绿色合成的黄色为什么这么亮了,因为他的亮度值是0.91,已经很接近白色了。根据视觉灰度的原理,我们联系Windows通常使用的颜色,就知道为什么WindowsXP的蓝色看起来总是那么舒服。原因很简单,蓝色的亮度最低,不刺眼,同时,在蓝色上显示白字的对比度最高。而如果换成绿色的风格,则白色的文字不容易识别,也就是这个道理。所以,我们通常说的颜色对比,不仅包含了同色系的颜色取值,也包含了不同色系的亮度差别。这对于我们平面设计师而言,有很多好处,合理的使用不同的颜色,造成视觉上的亮度差异,更加符合人机工效学的原理。

 


评论

该日志第一篇评论

发表评论

评论也有版权!