@陳子木 選擇配色的時(shí)候需要考慮的因素很多，并不是挑選你喜歡的顏色就可以輕松搞定。配色的方法很多，但是根據(jù)主圖來(lái)進(jìn)行配色無(wú)疑是最可靠的方法之一，無(wú)論你是初級(jí)設(shè)計(jì)師還是資深從業(yè)者，這種方法都是不錯(cuò)選擇。當(dāng)然，諸如Kuler這樣的第三方取色工具很多，參考這篇文章《取色指南！7款靠譜工具幫你選取完美配色》，總有一款適合你。但是這些方案多是通過(guò)算法來(lái)進(jìn)行實(shí)現(xiàn)的，要想創(chuàng)造符合自己心意的配色方案，老老實(shí)實(shí)用PS和照片來(lái)創(chuàng)建還是最靠譜的。

更多關(guān)于取色配色的文章：
《大開(kāi)眼界！那些巧用「彩通配色」的醒目設(shè)計(jì)》
《VC教程！教你使用最受歡迎的配色小工具KULER》
《碉堡！配色神器第二代！COLOR CUBE免費(fèi)開(kāi)放下載》

選照片

既然是通過(guò)圖片取色來(lái)創(chuàng)建色板，那么肯定要挑選一張漂亮的圖片。很多優(yōu)秀的設(shè)計(jì)都和品質(zhì)上乘的圖片分不開(kāi)，這些圖片色彩漂亮，并且通常都還為文字和圖形留有空間。

取色的四個(gè)技巧

當(dāng)你開(kāi)始搜集圖片的時(shí)候，最好盡量搜集色彩較多的圖片。注意，色彩多并不是要求你選擇萬(wàn)花筒一樣的圖片，而是希望你選擇色彩較多，可以幫你創(chuàng)造更多配色方案的圖片。從哪里開(kāi)始呢？接下來(lái)的四條建議，或許可以幫到你。

1、基礎(chǔ)色

在打開(kāi)PS之前，先仔細(xì)審視一下你選的照片。就比如我所選的圖片吧，你會(huì)從中發(fā)現(xiàn)非常惹眼的深青色和棕色，而它們就正好可以用作這套配色的基礎(chǔ)色。假設(shè)你在制作一個(gè)網(wǎng)頁(yè)，深青色可用作標(biāo)題或者背景色，而棕色可應(yīng)用到段落文字或者引用文字以及其他的裝飾元素上。當(dāng)然，如果文字使用奶白色來(lái)顯示，與深色背景相互映襯，視覺(jué)效果也不錯(cuò)。

2、增加互補(bǔ)色

當(dāng)對(duì)互補(bǔ)放在一起的時(shí)候可以產(chǎn)生明顯的對(duì)比和視覺(jué)沖擊。確定兩種顏色是否是互補(bǔ)色，看它們?cè)谏喩系奈恢镁椭溃S色和藍(lán)色，綠色和紅色，它們?cè)谏喩隙继幱趯?duì)稱(chēng)的位置。這些互補(bǔ)色通常都是一冷一暖，視覺(jué)效果充滿(mǎn)活力。這種配色的關(guān)鍵點(diǎn)在挑選一種顏色作為主色調(diào)，并且靈活運(yùn)用色彩。如此一來(lái)，色彩之間有主有次，不會(huì)相互沖突。這張圖就是如此，藍(lán)色占據(jù)主體，明黃色的樹(shù)令整個(gè)畫(huà)面更加活潑。如果你需要搭配文字的話(huà)，在藍(lán)色的部分配上黃色的字體似乎是個(gè)不錯(cuò)的選擇。

3、增加衍生色

通常你的配色方案中會(huì)有兩種以上的色彩。與其新增更多的色彩組合，不如基于現(xiàn)有的一兩種顏色，增加同色系的深色或者淺色，來(lái)完善配色方案。一套干凈的配色方案，基礎(chǔ)色通常不會(huì)超過(guò)3種，再基于這有限的幾個(gè)主色調(diào)來(lái)擴(kuò)充也就夠用了。這樣做最大的好處就是在色彩不會(huì)沖突的前提下，令配色更加豐富。再來(lái)看第一個(gè)案例，基于兩種基礎(chǔ)色，通過(guò)增減明度，擴(kuò)展出四種不同的色彩。色系之間不會(huì)沖突，這些色彩也可以合理地搭配到一起。調(diào)整明度的增減程度，你可以擴(kuò)展出更多的色彩。

4、整合

將以上的處理技巧整合起來(lái)，配色就更加得心應(yīng)手了。通過(guò)漂亮的圖片獲取基礎(chǔ)色，結(jié)合對(duì)比色擴(kuò)充基礎(chǔ)色，適當(dāng)?shù)卦鰟h中性色，再通過(guò)明度和飽和度調(diào)整完成符合你需求的整套色板。完成配色之后，無(wú)論你想怎樣控制視覺(jué)元素的色彩都好說(shuō)。

好了，接下來(lái)我們看看如何完整地借助PS，通過(guò)照片取色來(lái)完成一套配色方案。

創(chuàng)建色板

Step 1

用PS打開(kāi)你挑選的照片。

Step 2

選擇吸管工具(快捷鍵=I)，挑選一個(gè)區(qū)域取色，作為基礎(chǔ)色。單擊X，然后選取對(duì)應(yīng)的對(duì)比色。在這張圖片里，我們選取了深綠色作為基礎(chǔ)色，那么它對(duì)應(yīng)的對(duì)比色應(yīng)該是紅色，于是我們?cè)趫D片中選取了紅色。這里的紅色并不一定要非常鮮艷明亮，在這里我們選取的紅色相對(duì)柔和。

Step 3

接下來(lái)，我們要為色板創(chuàng)建文件。不管是PS還是ID，創(chuàng)建好的色板文件都是可以拿來(lái)用的。在PS里面新建文檔，分辨率800x200，采用RGB模式，將文檔命名為“色板”。

Step 4

選擇橢圓工具（快捷鍵=U），繪制任意尺寸的圓形，使用吸管工具取色并為原型填充色彩。現(xiàn)在你可以直接從左側(cè)的工具欄中選取前景色和后景色填充進(jìn)去。

Step 5

重復(fù)第四步，創(chuàng)建圓形并填充互補(bǔ)色。

Step 6

接下來(lái)，將互補(bǔ)色的圓形圖層復(fù)制兩份，于是你擁有了四個(gè)圓形來(lái)容納不同的顏色。接下來(lái)的這兩個(gè)圓形，一個(gè)將填充中性色，一個(gè)用來(lái)填充基礎(chǔ)色的衍生色。

Step 7

回到照片，重復(fù)第二步，在圖片中選取淺灰色這一中性色，填充到第三個(gè)圓形中。

Step 8

最后一個(gè)圓形中填充一個(gè)基于基礎(chǔ)色的衍生色。直接用吸管工具在第一個(gè)圓形中取色，確定色系之后，將拾色器上移，選取一個(gè)明度較高的綠色。考慮到整個(gè)配色風(fēng)格比較復(fù)古，這個(gè)綠色明度不能太高，不要太深也不要太淺就差不多了。

Step 9

根據(jù)你的習(xí)慣，調(diào)整四個(gè)圓形的位置和色彩順序。將整個(gè)文檔另存為一個(gè)JPG格式的圖片，確保不同的設(shè)計(jì)軟件都能從中取色，調(diào)用配色。

結(jié)語(yǔ)

配色是設(shè)計(jì)中最重要的環(huán)節(jié)之一，學(xué)會(huì)取色配色，然后養(yǎng)成搜集配色方案的好習(xí)慣，將會(huì)為你今后的設(shè)計(jì)有所幫助。

原文地址：tutsplus
優(yōu)設(shè)網(wǎng)翻譯：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量72萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：