我們所看到的色彩世界，在計(jì)算機(jī)里，通常用以下三種顏色格式進(jìn)行描述——RGB、HSL和CMYK。這也是設(shè)計(jì)師接觸最多的，當(dāng)然還有其他的顏色格式，不過(guò)詳細(xì)的我也忘了。
先來(lái)說(shuō)RGB吧，這也是我們接觸最多的格式。要說(shuō)RGB，要先得說(shuō)一下LCD顯示器的原理。我直接跳過(guò)了CRT的原理，因?yàn)長(zhǎng)CD與RGB聯(lián)系也更為緊密，當(dāng)然CRT也是基于RGB色彩理論的。
LCD俗稱液晶顯示器，每一個(gè)點(diǎn)都是正方形的，由3個(gè)長(zhǎng)方形的顏色區(qū)域組成，顏色分別是Red、Green、Blue。這都很簡(jiǎn)單了，大家都知道。通過(guò)控制不同液晶的偏轉(zhuǎn)角度，達(dá)到控制白光通過(guò)液晶后到達(dá)人眼的亮度，從而控制顏色的飽和度。這里用的是折射原理，實(shí)際上LCD背光只有白光，透過(guò)不同的顏色棱鏡，就會(huì)得到紅綠藍(lán)3色。
為什么photoshop在控制RGB色彩的時(shí)候，取值范圍是0～255呢？這就要涉及到計(jì)算機(jī)的最小單位了——字節(jié)（其實(shí)最小應(yīng)該是Bit），一個(gè)字節(jié)由8個(gè)bit組成，這里是2進(jìn)制，也就是2的8次方＝256。256肯定是不能要的，這已經(jīng)超出了8個(gè)bit所能夠表達(dá)的范圍，所以，顏色值從0到255。
那為什么不是7個(gè)或者6個(gè)bit呢？理論上來(lái)說(shuō)，這都是可行的，但實(shí)際人眼的分辨能力在7個(gè)bit以上，甚至于8bit，所以這也要滿足人眼的可視需求。
一個(gè)單獨(dú)的顏色量由1個(gè)字節(jié)表示，那一個(gè)點(diǎn)就由3個(gè)字節(jié)表示，也就是2的24次方，就是我們通常所說(shuō)的24位色。
RGB是最為通用的一種格式，實(shí)際上以后的顯示器可能會(huì)擴(kuò)展到7原色或者更多，而不是現(xiàn)在的3原色，畢竟3原色24bit是不能夠表達(dá)人眼所能看見的任何顏色的。
再說(shuō)說(shuō)HSL，有的也叫做HSB，L表示lightness，B表示Brightness，都是一個(gè)意思。通常，根據(jù)人的習(xí)慣，我們將棱鏡分出來(lái)的顏色看作是Hue色調(diào)，將顏色的Saturation飽和度和Lightness亮度作為調(diào)節(jié)色調(diào)的基本手段，于是就有了HSL。Windows的調(diào)色板，包括Photoshop的調(diào)色板，使用的就是HSL方式，可以更直觀的選擇適合的顏色。
RGB和HSL的世界是不同的，必須通過(guò)一系列復(fù)雜的算法才能夠互換。如果將RGB看作是一個(gè)球體，那HSL就是一個(gè)梭體，也就是兩個(gè)圓錐組成的形體。這兩個(gè)顏色之間的互轉(zhuǎn)目前也有近似的算法，但也要經(jīng)過(guò)非常復(fù)雜的公式才能完成，不過(guò)已經(jīng)避免了平方和開發(fā)的麻煩。
這里順代將一下Photoshop中HSL調(diào)節(jié)濾鏡的原理。一個(gè)RGB格式的圖片，通過(guò)HSL顏色格式，可以將圖片的整體色調(diào)進(jìn)行調(diào)節(jié)。比如我們要調(diào)節(jié)Hue色調(diào)值，增加50。首先，取出每個(gè)點(diǎn)的RGB顏色值，轉(zhuǎn)換為HSL，將得到的Hue值加上50，然后轉(zhuǎn)換到RGB顏色，覆蓋原來(lái)點(diǎn)的顏色。就這樣，將所有的點(diǎn)都做一回合的互轉(zhuǎn)，就能夠?qū)⒄麄€(gè)圖片的色調(diào)進(jìn)行調(diào)整。
很多平面設(shè)計(jì)師并不知道Photoshop中為什么有CMYK色，如果你是做印刷設(shè)計(jì)的，那就必須用CMYK色，因?yàn)橛∷⑸皇腔赗GB格式的。Cyan 青, Magenta 品紅, Yellow 黃, blacK 黑，共同組成CMYK色。我們可以設(shè)想一個(gè)印刷機(jī)是由4種色帶組成的，通過(guò)4次印刷，將4種不同的顏色疊加在一起，從而形成彩色的封面。在印刷上，或者水墨畫上，顏色疊加是在做減法，也就是疊加的越多，顏色越黑。我們小時(shí)候都用過(guò)水彩筆，如果使用不同的畫筆在某一個(gè)地方不停的涂抹，最后就得到黑黑的一片。其實(shí)，從原理上使用CMY色，就能夠得到黑色，而CMY也是RGB的近親?；趦牲c(diǎn)原因要添加K，也就是Black。第一，CMY組成的黑色不夠黑，純度不夠；第二，由3種顏色疊加成黑色的成本太高，需要反復(fù)印刷3次，而黑色是報(bào)紙雜志最常用的顏色，也是最便宜的色帶。我們通常在報(bào)紙的一個(gè)角上會(huì)發(fā)現(xiàn)一個(gè)彩色的十字，也就是用于顏色疊加校準(zhǔn)用的。通常為了節(jié)約成本，盡量的少用CMYK的某一種顏色。比如，在印刷報(bào)紙的時(shí)候，一個(gè)單獨(dú)黑色的版面只需要印刷一遍，而彩色的版面要印刷4遍。我們?cè)谧雒臅r(shí)候，都需要盡量的少用顏色，達(dá)到節(jié)約成本的目的。
CMYK和RGB的互轉(zhuǎn)比較麻煩，主要是CMYK所能夠表達(dá)的顏色范圍更小，而且某些稍微亮點(diǎn)的顏色都不能正確顯示。如果看到Photoshop上的某個(gè)RGB色，旁邊的CMYK色有一個(gè)感嘆號(hào)，那就表明這種顏色印刷不出來(lái)，我們就需要修改之。Photoshop的顏色告警也是基于這個(gè)原理，因此在印刷的時(shí)候更多的要考慮CMYK色。CMYK轉(zhuǎn)換到RGB一般是通過(guò)數(shù)組來(lái)實(shí)現(xiàn)的，不同的顯示器應(yīng)該提供不同的顏色表，以適應(yīng)CMYK色的互換。
設(shè)計(jì)領(lǐng)域有一個(gè)行規(guī)，那就是設(shè)計(jì)師必須使用CRT顯示器，這有兩點(diǎn)原因。一，CRT顯示器所能夠表達(dá)的顏色更多，達(dá)到32Bit，而LCD原理上只能實(shí)現(xiàn)18Bit，現(xiàn)在經(jīng)過(guò)優(yōu)化后可以實(shí)現(xiàn)偽24Bit。二，CRT的顏色更接近于CMYK色，而LCD的顏色太亮了，也就是飽和度太高。
先來(lái)講一下圖片格式，從BMP說(shuō)起。BMP文件是Windows最基本的文件格式，比如一張未壓縮的真彩色圖片，文件的大小通常等于56＋寬度＊高度＊3。前54個(gè)字節(jié)是文件描述，通常稱為文件頭，中間的是顏色，每個(gè)點(diǎn)占用3個(gè)字節(jié)，遵循從左到右，從上到下的方向。不過(guò)，有的BMP格式在存放顏色時(shí)，恰好是相反的，先放最后一個(gè)點(diǎn)的顏色。BMP文件的結(jié)尾以兩個(gè)0x00，0x00組成。
不壓縮的BMP文件顯然是很大的。有兩種壓縮方式，一，使用256色調(diào)色板，二，使用RLE連續(xù)壓縮算法。調(diào)色板最多只能有256種顏色，也就是1個(gè)字節(jié)，這個(gè)調(diào)色板放在BMP文件頭的位置，顏色可以是任意的真彩色。如果超過(guò)256色，系統(tǒng)就會(huì)選取使用頻度最高的顏色，而忽略掉使用比較少的顏色，將其近似為調(diào)色板中的某個(gè)顏色。因此，在調(diào)色板的BMP文件中，除了256個(gè)真彩色之外，就是單個(gè)字節(jié)的顏色索引值了，就好像一個(gè)數(shù)組。RLE算法是一種簡(jiǎn)單有效的方式，能夠?qū)⑺椒较蜻B續(xù)的顏色進(jìn)行壓縮，這也是Gif的原理，這在Gif文件里講。
Gif文件也是應(yīng)運(yùn)而生的，當(dāng)時(shí)還處在Win31的時(shí)代，BMP是主角，但是BMP太占空間了，必須有一種高效的壓縮算法來(lái)取代BMP。Gif文件必須是索引色，帶一個(gè)不超過(guò)256色的調(diào)色板。通常，這個(gè)調(diào)色板的尺寸是2的最多8次方，比如一張圖只用了14種顏色，但調(diào)色板只能是16色的。調(diào)色板里存放的是真彩色，而索引值和BMP的不同，根據(jù)用到的顏色多少來(lái)決定。比如我們只用了16種顏色的調(diào)色板，那索引色就是4Bit，描述了0～15的索引值，也就是說(shuō)，一個(gè)字節(jié)可以放下2個(gè)點(diǎn)的顏色。當(dāng)然，Gif格式并不是如此簡(jiǎn)單，也包含了RLE算法。通過(guò)一系列連續(xù)的顏色，將顏色做一個(gè)壓縮。一個(gè)字節(jié)的高4Bit存放索引值，低4Bit存放連續(xù)的個(gè)數(shù)，也就是說(shuō)，連續(xù)數(shù)最多16個(gè)，以0～15來(lái)計(jì)算，0表示這個(gè)點(diǎn)之后的點(diǎn)不使用該顏色索引。即使連續(xù)的顏色超過(guò)16個(gè)，比如160個(gè)，那也必須拆分開來(lái)，由10組顏色索引＋顏色連續(xù)個(gè)數(shù)的字節(jié)來(lái)組成。
說(shuō)到這里，就提醒各位設(shè)計(jì)師，在使用gif圖的使用注意以下兩點(diǎn)。一，盡量少的使用顏色，不要使用太多的過(guò)渡色；二，顏色一定要水平連續(xù)存放，比如，我們可以做垂直方向的漸變色，但如果是水平方向的漸變色，那顏色連續(xù)性就消失了，壓縮比就不高了。
gif還支持0、1模式的透明色，指定某種調(diào)色板的顏色為透明色，則該色在圖片上不顯示，達(dá)到齒條剪裁的目的。因?yàn)橐獱奚粢粋€(gè)顏色，所以透明gif的最多顏色為255色，有一個(gè)作為透明色用了，但不顯示。通常我們使用大紅色作為透明色，因?yàn)檫@種顏色過(guò)艷，不是很常用，當(dāng)然也可以使用其他的顏色。
Gif文件也是應(yīng)運(yùn)而生的，當(dāng)時(shí)還處在Win31的時(shí)代，BMP是主角，但是BMP太占空間了，必須有一種高效的壓縮算法來(lái)取代BMP。Gif文件必須是索引色，帶一個(gè)不超過(guò)256色的調(diào)色板。通常，這個(gè)調(diào)色板的尺寸是2的最多8次方，比如一張圖只用了14種顏色，但調(diào)色板只能是16色的。調(diào)色板里存放的是真彩色，而索引值和BMP的不同，根據(jù)用到的顏色多少來(lái)決定。比如我們只用了16種顏色的調(diào)色板，那索引色就是4Bit，描述了0～15的索引值，也就是說(shuō)，一個(gè)字節(jié)可以放下2個(gè)點(diǎn)的顏色。當(dāng)然，Gif格式并不是如此簡(jiǎn)單，也包含了RLE算法。通過(guò)一系列連續(xù)的顏色，將顏色做一個(gè)壓縮。一個(gè)字節(jié)的高4Bit存放索引值，低4Bit存放連續(xù)的個(gè)數(shù)，也就是說(shuō)，連續(xù)數(shù)最多16個(gè)，以0～15來(lái)計(jì)算，0表示這個(gè)點(diǎn)之后的點(diǎn)不使用該顏色索引。即使連續(xù)的顏色超過(guò)16個(gè)，比如160個(gè)，那也必須拆分開來(lái)，由10組顏色索引＋顏色連續(xù)個(gè)數(shù)的字節(jié)來(lái)組成。
說(shuō)到這里，就提醒各位設(shè)計(jì)師，在使用gif圖的使用注意以下兩點(diǎn)。一，盡量少的使用顏色，不要使用太多的過(guò)渡色；二，顏色一定要水平連續(xù)存放，比如，我們可以做垂直方向的漸變色，但如果是水平方向的漸變色，那顏色連續(xù)性就消失了，壓縮比就不高了。
gif還支持0、1模式的透明色，指定某種調(diào)色板的顏色為透明色，則該色在圖片上不顯示，達(dá)到齒條剪裁的目的。因?yàn)橐獱奚粢粋€(gè)顏色，所以透明gif的最多顏色為255色，有一個(gè)作為透明色用了，但不顯示。通常我們使用大紅色作為透明色，因?yàn)檫@種顏色過(guò)艷，不是很常用，當(dāng)然也可以使用其他的顏色。
cursor和icon文件，也跟著RGB發(fā)展到ARGB。在windows95及之前的時(shí)代，icon都是鋸齒的，其圖片結(jié)構(gòu)和gif的類似，也支持透明gif方式，所以是齒條透明的。而到了windowsxp時(shí)代，icon可以像png那樣，擁有每個(gè)點(diǎn)的透明度了，不過(guò)icon并不是一種壓縮格式，所以ARGB的icon文件非常大。icon文件可以在單一文件內(nèi)存放不同尺寸的圖標(biāo)，cursor文件則可以存放相同尺寸的幀。windowsxp有一點(diǎn)落后于mac，那就是沒(méi)有支持ARGB的動(dòng)畫指針格式的cursor，我們只能通過(guò)第三方的軟件，才能實(shí)現(xiàn)透明有著陰影的動(dòng)畫鼠標(biāo)。
說(shuō)了alpha通道，不得不說(shuō)一下layer。
layer是photoshop的基本組成單位，layer其實(shí)簡(jiǎn)單的說(shuō)，就是一個(gè)雙向鏈表。什么是鏈表？鏈表是計(jì)算機(jī)數(shù)據(jù)結(jié)構(gòu)的最簡(jiǎn)單概念，就好像一串珍珠項(xiàng)鏈，每顆珠子就是一個(gè)圖層。鏈表的頭是最下面的圖層，鏈表的尾是最上面的圖層，通過(guò)鏈表的位置來(lái)描述Z軸的上下方向。
每個(gè)layer都會(huì)帶一個(gè)不同尺寸的ARGB格式的圖片，所以我們將layer翻譯成“圖”層。根據(jù)我們的需求，圖層可大可小，這都是photoshop內(nèi)部動(dòng)態(tài)調(diào)整的，設(shè)計(jì)師感覺(jué)不出來(lái)圖層的大小。由于每個(gè)圖層都要帶一張尺寸不小的圖片，所以photoshop非常消耗內(nèi)存，而在設(shè)計(jì)階段，這些消耗還不能節(jié)省，也就是不能壓縮。不過(guò)在保存為psd文件后，根據(jù)png格式的算法，可以將圖層進(jìn)行壓縮，也就得到了壓縮后的psd文件。我們可以將psd理解為多個(gè)png的合集。
每個(gè)圖層除了能夠控制單個(gè)點(diǎn)的透明度，還能夠擁有一個(gè)整體透明度，我叫做MasterAlpha，Photoshop稱之為Opacity。MA的取值范圍也是0～255，Opacity取值0～100，每個(gè)點(diǎn)不僅要受到其Alpha通道的影響，還要受到圖層整體透明度的影響。通過(guò)調(diào)節(jié)整體透明度，來(lái)達(dá)到單個(gè)圖層的調(diào)節(jié)。
在photoshop6之后，引入了包bag的概念，每個(gè)bag就是多個(gè)圖層鏈表，所有的bag組合成一個(gè)bag鏈表。這就好像XY的二維坐標(biāo)一樣，只是bag更容易管理。這個(gè)不用我費(fèi)口舌了，相信各位從photoshop的使用中能夠理解包的具體作用。如果從計(jì)算機(jī)數(shù)據(jù)結(jié)構(gòu)的角度理解，包和圖層共同組成了一個(gè)“樹”，是一顆多叉樹。包也可以有整體透明度，直接影響包內(nèi)的所有圖層的透明度。因此，就一個(gè)點(diǎn)的顯示程度而言，受到三方面的控制，點(diǎn)的透明度、圖層的透明度和包的透明度。
在全色盲的眼里，世界是灰色的，樹木、房屋、草地、連同陽(yáng)光，都是灰色的。這就好像將一幅圖片去色了，只顯示256級(jí)灰度一樣。最簡(jiǎn)單的去色，就是R＋G＋B／3，這是簡(jiǎn)單的平均，不過(guò)連同Photoshop都使用這一平均公式，因?yàn)樗麃?lái)的快。還有一種，稱為視覺(jué)灰度intensity，這是使用測(cè)光儀測(cè)試紅綠藍(lán)三種基色的亮度值，單位是流明。測(cè)試方法非常簡(jiǎn)單，全屏顯示一種顏色，測(cè)光儀就可以得到不同的流民值。就好像我們的經(jīng)驗(yàn)一樣，藍(lán)色是三種基色中最暗的一種顏色，而綠色則是最亮的顏色，紅色處于中間，他們的具體比例是Red0.21 Green0.70 Blue0.09。所以，又產(chǎn)生了另一種去色的方式，R*0.21+Green*0.70+Blue*0.09，這是一種加權(quán)平均的算法，某些圖形處理軟件使用這一算法，而這也更接近于我們想要的真實(shí)灰色。根據(jù)這一原理，我們可以得知由紅色和綠色合成的黃色為什么這么亮了，因?yàn)樗牧炼戎凳?.91，已經(jīng)很接近白色了。根據(jù)視覺(jué)灰度的原理，我們聯(lián)系Windows通常使用的顏色，就知道為什么WindowsXP的藍(lán)色看起來(lái)總是那么舒服。原因很簡(jiǎn)單，藍(lán)色的亮度最低，不刺眼，同時(shí)，在藍(lán)色上顯示白字的對(duì)比度最高。而如果換成綠色的風(fēng)格，則白色的文字不容易識(shí)別，也就是這個(gè)道理。所以，我們通常說(shuō)的顏色對(duì)比，不僅包含了同色系的顏色取值，也包含了不同色系的亮度差別。這對(duì)于我們平面設(shè)計(jì)師而言，有很多好處，合理的使用不同的顏色，造成視覺(jué)上的亮度差異，更加符合人機(jī)工效學(xué)的原理。
