2.6 配色案例

Version:CS4 CS5 CS6 CC

沒有一種單一的設計元素會比顏色效果更能吸引人。顏色能吸引人的注意，表達一種情緒，能傳達一種潛在的信息。那么什么樣的調色搭配才是最合適的呢？關鍵是顏色之間的關系。色彩總是和周圍其他顏色一起出現。因此，可以在頁面中通過基色設計一個色板文件。下面我們將介紹這種色板文件的建立方法。

這里要制作一個具有浪漫色彩的電影海報，畫面中模特的面部表情比較放松，面色比較白凈。我們的目的是使設計效果看起來令人耳目一新，充滿活力，個性十足，同時又要傳達一種商業氣息。客戶還要求整個設計效果顯得潮流時尚，這些要求全部和顏色有關。

1．將照片中的顏色精簡出來

首先要找出這個自然的色板，并把它組織為調色板文件。盡量地放大照片，你會發現照片有很多顏色。在正常的視圖中我們只會看到很少的一些顏色，皮膚的色調、栗色的頭發、藍色的衣服、粉紅的花朵。但是把它們放大來看時，會發現這里面有著數以百萬計的顏色。所以首先要精簡這些顏色，讓它成為一個易處理的顏色版本。在Photoshop中，首先復制一個圖層（這樣就不會丟失原始圖片了），然后選擇“濾鏡”→“像素化”→“馬賽克”后，一個顏色被精簡過的圖片就會出現了。假如不滿意它的默認值，需要更多一點的顏色，可以減少“馬賽克”命令中的單元格大小值。

2．提取顏色成為色板

現在使用吸管工具將顏色提取出來放到色板中。從最明顯的顏色開始（你看到的最多的顏色），到最少的顏色。為了對比效果，可選擇一些暗調、中調及淺調的顏色。從最多的顏色開始，如一眼就可以看到的皮膚、頭發、上衣的顏色。然后處理較少的顏色，如眼睛、嘴唇、頭發較亮部分及一些陰影，這就是非常細小的顏色，所以需要非常專心，從而歸類好每一部分的顏色。對顏色進行仔細觀察，然后對選取的顏色重新排序。丟棄那些相似的顏色，接下來你就會興奮于自己的發現了。

3．逐個對顏色進行嘗試

將照片放到那些顏色樣板上面，結果都是很漂亮的，不是嗎？這是一件非常有趣的事，無論你怎么做，都是不錯的搭配，奧妙就在于我們使用的顏色其實是照片中已經存在的某一種顏色。

▲暖色調：粉紅、棕色、紅褐色、橙紅色，這些是暖色調的，這些顏色來自模特的頭發和面部。暖色調時這個女孩更溫和、更嬌柔，所以暖色調用來傳達溫馨的畫面較為合適。

▲冷色調：冷色調主要是藍色調，產生一種商業氣氛，有比較直接的效果。當我們使用越暗的顏色，照片中女孩的面孔就越有一種突出頁面向你靠近的感覺。

4．利用色相環

色相環是用來反映一種顏色和其他顏色相互關系的工具，選擇任何一種顏色之后，在色相環上找到它相應的位置。

任何一種顏色，比如我們選擇了圖中的藍色，然后在色相環上查找它相鄰的顏色。我們把這種顏色稱為基色。前面已經知道這些基色與照片中的顏色是互補協調的。現在要做的就是要尋找與這個基色相配的其他顏色。要記住：如果設計時需要用到其他文字和圖形，那么和它們的顏色也是相關的，需要選擇暗色調及淺色調來形成對比。

由于色相環中的顏色是基于基色的（并不包含所有顏色值），因而在你配色時，并不能做到百分之百的精確，這只是一個方法指南。

5．創建調色板

現在可以創建一個令人激動的協調色的調色板了，例如，中間藍色可以和深藍色以及深色的紫羅蘭相協調。

▲單色：首先是一種基色的深色、中間色和淺色。這是一種單色調板。這里沒有色相的變化，但通過明暗對比可以產生非常好的設計。

▲近似色：一種色環上的顏色的任意兩邊的顏色都是近似色。近似色共享同一種色相（這里是湖藍色、藍色和紫羅蘭色），可以產生一種漂亮的，低于對比度的和諧效果。

▲對比色（補色）：在色相環上與一種顏色在完全的對立面，稱為對比色（本例中為橙色）。對比色有很強的對比效果，兩種互為補色的顏色應用在一起，可以傳達一種活力生機的效果。一般來說，補色要產生好看的效果一般是一個大一個小，如一個橙色的圓點用在一個藍色的區域中時，效果非常好。

▲分裂補色：一種顏色與另一種顏色既不是補色又不是相鄰色，則這些顏色稱為分裂補色。在相鄰色的低對比度搭配中加入這些顏色，會使這個效果變得生動。要注意的是，加入的這些分裂補色的面積不宜過大，本例中的藍色看起來更像是一個重音符。

但要注意的是，對比色比例要一大一小，主色為一個面，而它的對比色是一個點。還有配色上明度的變換，如果同在一個明度上，顏色是會 “打架”的。

▲對比色/近似色：這個混合調色板看起來很像分裂補色調色板，但它含有更多的顏色。在暖色調部分有著柔和色調，可以產生豐富的色彩色調。但在對比色方面又可以產生強烈的對比，這種調色板會讓人產生強烈的興奮感。

▲近似色/對比色：用冷色調創建相似色再加上一點暖色的對比色。請記住不同的明度值會產生不同的對比效果，如果明度值相同，那么在視覺上就會相互“打架”，爭奪讀者的視覺，但如果明度值不同的話就不會有這種感覺了。所以要用吸管工具去提取顏色的不同明度值來搭配使用。

6．校對及應用

現在來使用顏色搭配。該怎樣選擇顏色來搭配？關鍵是要看你想傳達什么樣的信息。回憶一下剛開始提出的設計要求是什么，然后再來選擇配色。

商業氣息：藍色是人人都喜歡的顏色。有趣的是這里的藍色和橙色是從照片中來的，這就產生了一種自然的對比效果。藍色的背景色與照片中女人的藍色衣服融為一體，使女人的目光更容易吸引人的注意，既漂亮又有商業氣息。

如果忘了我們的設計要求，就回到2.6節剛開始看一下：我們的目的是要使設計效果看起來令人耳目一新，充滿活力，個性十足，同時又要傳達一種商業氣息。

權威氣息：這個調色板中的深紅色來自她的頭發，從色環中我們知道，這個顏色與橙色是一種近似色。藍色的眼睛和衣服顯得不再重要，而是成為了一種點綴性的對比。

熱情氣息：人物頭發的亮色在頁面中變得更加突出，而藍色衣服使畫面產生了對比和層次感。另一個焦點是黃色的標題，給人的感覺像是從照片中剪出來一樣。整個空間顯得比較平淡，這種顏色搭配產生一種熱情迷人的效果（如果是在設計比賽中，這個設計可能會勝出，因為它比較特立獨行），但只有那些大膽的客戶才會選擇這個設計。

休閑氣息：采用了藍色的相鄰色——青色，這種青色在該照片中并不存在，使得整個設計融入了一種輕松、活潑的氣氛。整個效果看起來帶著時尚、更平易近人的氣息。而英文字母仍采用了橙色，是一種較溫和的對比。

浪漫氣息：同樣是藍色的另一種近似色，紫羅蘭色在照片中也是不存在的。從色相環中知道，紫色與紅色靠得較近，而整個效果看起來有點夸張，因為照片中的女人的面孔、頭發與背景的顏色顯得比較接近。紫羅蘭色是一種冷色，通常與溫柔、女性聯系在一起（也包含著清新和精神飽滿的感覺）。