| 作者：佚名 文章來源：chinaui 點擊數：3680 更新時間：2005-2-15 | |
<script type="text/JavaScript"></script>
<script src="http://a.alimama.cn/inf.js" type="text/javascript"></script>
<script type="text/JavaScript"></script>
<script src="http://a.alimama.cn/inf.js" type="text/javascript"></script>
 |
|
|
我們所看到的色彩世界，在計算機裏，通常用以下三種顏色格式進行描述——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文件的結尾以兩個0x00，0x00組成。 不壓縮的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的藍色看起來總是那麼舒服。原因很簡單，藍色的亮度最低，不刺眼，同時，在藍色上顯示白字的對比度最高。而如果換成綠色的風格，則白色的文字不容易識別，也就是這個道理。所以，我們通常說的顏色對比，不僅包含了同色系的顏色取值，也包含了不同色系的亮度差別。這對於我們平面設計師而言，有很多好處，合理的使用不同的顏色，造成視覺上的亮度差異，更加符合人機工效學的原理。 |
來自於：http://www.pstxg.com/Article/ShowArticle.asp?ArticleID=1507