配色弱有救了！教你利用圖片創(chuàng)建獨(dú)有的色彩方案！

編者按：@飛屋睿UIdesign 這篇文章所講述的配色方法和之前我們發(fā)布的《設(shè)計(jì)師必備取色技巧！教你在PS里通過照片創(chuàng)建色板》基本是相同的，素材處理和細(xì)節(jié)考量稍有差異，兩篇文章互為補(bǔ)充，可以為糾結(jié)于配色的你點(diǎn)亮一盞燈。

我們開始設(shè)計(jì)手機(jī)網(wǎng)頁(yè)時(shí)，總是需要先確定好網(wǎng)頁(yè)的配色方案。那么，這時(shí)，除非是客戶提出色彩方案，我們大部分要面對(duì)的情況的是，根據(jù)客戶的需求創(chuàng)建出一個(gè)色彩方案。在此，我想教大家如何從“圖片”這一來源中獲取靈感并創(chuàng)建出色彩方案。

一、選擇圖片

首先，去各大網(wǎng)站搜索你喜歡的圖片，圖片的選擇應(yīng)該盡量選擇色調(diào)有變化且明暗對(duì)比也較為明顯的。因?yàn)楹诎谆虻蛯?duì)比度的色調(diào)只會(huì)讓你最后的色彩方案看起來不夠鮮明。

選擇圖片去下面這幾個(gè)網(wǎng)站是不錯(cuò)的：

• http://500px.com/flow/curate
• https://www.flickr.com/explore/
• http://wallbase.cc/

（以上網(wǎng)站自備梯子 ^ ^）不夠的話右戳：設(shè)計(jì)師網(wǎng)址導(dǎo)航，要嘛有嘛

要從配色方面吸引自己的圖片上進(jìn)行選擇。

二、吸取色彩

在PS里打開這張圖片，吸取色彩。吸取色彩并不是任意選取自己喜歡的顏色就可以，根據(jù)整個(gè)圖片的色彩分布，先找到圖片的主色調(diào)。

主色調(diào)的選擇和使用

主色調(diào)的選擇依據(jù)整個(gè)圖像當(dāng)中分布最廣的一種顏色，在這張圖片中，我們可以看出分布最廣的為藍(lán)色，這些藍(lán)色呈現(xiàn)明暗層次深淺的不同，因此，在深藍(lán)到淺藍(lán)中我選擇了過渡最為均衡的一種中度灰的藍(lán)色。這種藍(lán)色在圖片上表現(xiàn)的是一團(tuán)團(tuán)云霧和湖泊的顏色。

三、建立自己的色彩方案

選擇新建一個(gè)文件，白色底背景，圖片中選好的色彩作為前景色畫一個(gè)圓形。這個(gè)圓形也就是你的色彩方案中的第一個(gè)色彩：主色調(diào)。

主色調(diào)的運(yùn)用范圍

在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，主色調(diào)的使用范圍在整個(gè)網(wǎng)頁(yè)的色彩面積較大的地方，例如用于網(wǎng)頁(yè)背景或形狀元素上。當(dāng)然，一種色彩是無法開始設(shè)計(jì)的，因此接下來我們會(huì)選擇第二種顏色。

輔助色的選擇

輔助色通常是一個(gè)能烘托、能與之產(chǎn)生呼應(yīng)的顏色，如果主色調(diào)是一個(gè)冷色調(diào)，那么輔助色就偏向?yàn)橐粋€(gè)暖色調(diào)。因?yàn)橐粡埳守S富的圖片必定是具備冷暖兩種傾向的色彩，因此，你這時(shí)會(huì)在主色調(diào)的另外相反色溫的色調(diào)上進(jìn)行選擇。

在這里我選擇了紅色屋頂?shù)呐壬退{(lán)色的冷感進(jìn)行了均衡。

輔助色的運(yùn)用范圍

輔助色通常會(huì)使用在網(wǎng)頁(yè)設(shè)計(jì)中的字體、小面積的元素上。輔助色如果和主色形成了互補(bǔ)色就會(huì)產(chǎn)生一種強(qiáng)烈的對(duì)比，這時(shí)對(duì)比色還會(huì)有強(qiáng)調(diào)的作用。當(dāng)你想要凸顯網(wǎng)頁(yè)中某個(gè)元素時(shí)就可以試用上強(qiáng)調(diào)色。

那么什么是對(duì)比色呢？就是在色環(huán)上位置剛好相對(duì)的顏色，例如：紅色和綠色，紫色和橙色，藍(lán)色和黃色。

如果你覺得你選擇輔助色強(qiáng)調(diào)不夠強(qiáng)烈，你可以另外在主色基礎(chǔ)上，從色環(huán)里選擇主色的對(duì)比色，作為第三種色彩方案。

高光和陰影

這里通常是指主色調(diào)在圖片上展示出來的高光和陰影部分。這時(shí)，已經(jīng)無需完全依靠圖片了。我們的色彩方案里已經(jīng)備選了三種顏色，而剩下的色彩就在主色調(diào)基礎(chǔ)上調(diào)整變化。

主色調(diào)增加白色就變作高光部分，作為第四種顏色。

如果你的設(shè)計(jì)配色色彩偏重，這時(shí)可以往主色調(diào)添加黑色，作為第五種色彩選擇。

高光和陰影色在網(wǎng)頁(yè)中也作為一種修飾的顏色選擇，注意慎用。高光和陰影色可選其中一種作為中立色。因?yàn)檫@種利用黑白變幻出的顏色層次豐富，因此這里的選擇會(huì)非常多。這就需要你在最終色彩方案中再根據(jù)實(shí)際情況進(jìn)行調(diào)整。

確定色彩方案

色彩方案選擇好以后，最好確保整體顏色不得超過3種顏色：主色、輔助色、高亮/陰影色。

即使是三種顏色，但是色調(diào)都不會(huì)偏離整體的藍(lán)色基調(diào)。

色彩方案的運(yùn)用

在進(jìn)行色彩運(yùn)用的時(shí)候，也會(huì)出現(xiàn)黑白灰的靈活運(yùn)用，但要確保這些顏色的出現(xiàn)不會(huì)干擾整體畫面色彩的和諧感（左）。

大多數(shù)時(shí)候，我們未必希望純白色作為我們的底色調(diào)。要想讓整體看起來優(yōu)雅，添加一點(diǎn)透明度非常低的主色調(diào)作背景是必不可少的（右）。

除了找現(xiàn)成的圖片來配色之外，你還可以試試「彩通配色」：
《大開眼界！那些巧用「彩通配色」的醒目設(shè)計(jì)》

取色工具多不勝數(shù)，不過Kuler應(yīng)該還是口碑最好的幾個(gè)取色工具之一：
《VC教程！教你使用最受歡迎的配色小工具KULER》

當(dāng)然，行走江湖怎么可以沒有備用方案！所以，這個(gè)時(shí)候不妨看看：
《碉堡！配色神器第二代！COLOR CUBE免費(fèi)開放下載

作者微信號(hào)，頗多干貨，歡迎關(guān)注呦：

原文地址：jianshu
作者：@飛屋睿UIdesign

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

=================== 曬照贈(zèng)書！設(shè)計(jì)師男神女神在哪兒？ ===================

炎炎夏日！送書解暑！現(xiàn)在優(yōu)設(shè)微信社區(qū)也有送書福利活動(dòng)啦！

【活動(dòng)日期】本周一（7月28日）至周日（8月3日），發(fā)話題時(shí)附上自己的真實(shí)照片即可。
【活動(dòng)規(guī)則】根據(jù)大家的【點(diǎn)贊量】選取男/女神各一名
【活動(dòng)獎(jiǎng)品】我們會(huì)送出圖靈出版社《網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意書（卷2）》哦！

P.S.照片不能作假哦，必須是本人的真實(shí)照片，帶臉照！！ 工作照、生活照、都可以，當(dāng)然一起上更好了(*^__^*)
早發(fā)皂片早收贊，微信的小伙伴們趕快行動(dòng)起來吧~\(≧▽≦)/~
進(jìn)入優(yōu)設(shè)微信，看到底部 點(diǎn)擊“聊天交友”進(jìn)入【優(yōu)設(shè)聊吧】? 在點(diǎn)擊一次“發(fā)話題”就可以爆照啦~快快行動(dòng)起來吧~

========================== 參 與 方 式 ==========================

①首先，你要關(guān)注一下優(yōu)設(shè)哥的微信啦~【youshege】或者直接掃描二維碼：

②然后，進(jìn)入優(yōu)設(shè)哥的微信，看到底部，點(diǎn)擊“聊天交友”進(jìn)入【優(yōu)設(shè)聊吧】；

③在點(diǎn)擊一次“發(fā)話題”就可以爆照啦~ 快快行動(dòng)起來吧~

P.S.群內(nèi)如果有親想要參與微社區(qū)活動(dòng)，但是手機(jī)不支持傳圖發(fā)帖的可以聯(lián)系@【江蘇】花花