把這幾年自己在工作中的經(jīng)驗(yàn)與技巧拿出來(lái)分享下，不過(guò)寫文字對(duì)我來(lái)說(shuō)太糾結(jié)，還沒(méi)有作圖來(lái)的實(shí)在，哈哈。不管怎么說(shuō)還是寫完了，第一次寫教程，如果有沒(méi)說(shuō)清楚的地方歡迎交流。感謝@韓雪冬老師半夜三點(diǎn)的支持，哈哈。

在站酷網(wǎng)公開(kāi)課第五期中有幸和冬哥配合了下，在里面說(shuō)到一點(diǎn)關(guān)于配色的技巧，有很多酷友在問(wèn)怎樣操作的，今天拿出來(lái)和大家分享下，希望能夠幫到剛?cè)胄械呐笥?，如有不妥之處還望各位同行指正。

作者大力推薦的：網(wǎng)頁(yè)配色進(jìn)階篇：疊柔配色技巧

色彩的問(wèn)題很多朋友都在問(wèn)，包括在前幾期的公開(kāi)課中，都有問(wèn)色彩的問(wèn)題，大部分老師說(shuō)感覺(jué)，嗯，在我看來(lái)也是感覺(jué)，但感覺(jué)著東西都是自己經(jīng)歷多了才出現(xiàn)的，在剛接觸設(shè)計(jì)的時(shí)候，選擇色彩是有一些技巧的，咱們這次就說(shuō)說(shuō)這些技巧。這次分為兩部分，

一部分是怎樣提取合適的色彩，一部分怎樣應(yīng)用提取到的色彩。

ONE · 怎樣提取合適的色彩

主要用到ps里的一個(gè)功能：儲(chǔ)存為WEB所用格式 快捷鍵：Ctrl+Shift+Alt+S 如圖：

這里分成二個(gè)步驟：

1.1：找圖

關(guān)鍵步驟，確定自己想要的風(fēng)格，找大量的符合風(fēng)格要求的圖片，進(jìn)行對(duì)比篩選，選出最符合自己要求的幾張圖片開(kāi)始色彩的提取。

因?yàn)檫@次沒(méi)有明確的風(fēng)格和方向，我從佳作欣賞里找了一張色彩豐富，精神狀態(tài)積極向上，尺寸超大(選圖片是盡量找到大尺寸的圖，提取色彩時(shí)顏色會(huì)很正)的圖片開(kāi)始咱們的教程，Galaxy S4自帶壁紙，見(jiàn)附圖。

1.2：提取顏色

把選中的圖片放入ps中，點(diǎn)擊“存儲(chǔ)為web所用格式”(如果沒(méi)有色彩非常合適的圖，可以再ps里適當(dāng)?shù)恼{(diào)整顏色再進(jìn)行顏色提取)，格式選為png-8，色塊選擇8，(數(shù)字越大色塊越多，視自己需求而定)。

在顏色顯示區(qū)域就會(huì)留下8種顏色(按照顏色在畫面中所占的單位面積程序自動(dòng)篩選)，點(diǎn)擊顏色區(qū)域右側(cè)的下拉按鈕，會(huì)找到“儲(chǔ)存顏色表”，把他儲(chǔ)存到桌面上或者你容易找到的地方。然后用ps打開(kāi)，色斑中會(huì)顯示剛才提取到的顏色。

OK，顏色提取成功，3個(gè)色相的8種顏色

是不是非常簡(jiǎn)單，大家感受一下，馬上進(jìn)入第二部分

TWO · 提取到的色彩怎樣應(yīng)用

按照咱們第一步提取的顏色做了一個(gè)Metro風(fēng)格改進(jìn)版的頁(yè)面(里面的內(nèi)容可以無(wú)視，都是替代文字)，先感受下。。。

單純說(shuō)顏色的話，這個(gè)話題還真不好說(shuō)，因?yàn)樵蹅冏罱K要出的是呈現(xiàn)內(nèi)容的頁(yè)面的內(nèi)容，讓圖形、文字、色彩相互協(xié)調(diào)，而不是做排列顏色的色譜。所以就牽扯到框架布局和內(nèi)容展示層級(jí)的問(wèn)題，這兩個(gè)東西大家先跟著自己的經(jīng)驗(yàn)走，有機(jī)會(huì)下次聊，這次咱們先說(shuō)色彩!

這個(gè)頁(yè)面和現(xiàn)在的主流網(wǎng)站框架差不多，從上到下主要分為三個(gè)部分，導(dǎo)航區(qū)域、banner、內(nèi)容區(qū)。

具體的顏色應(yīng)用為：

1、導(dǎo)航文字及LOGO的顏色為最淺的藍(lán)色。

2、Banner區(qū)域即大背景，這里用了咱們開(kāi)始的圖片，上邊的大標(biāo)題LOGO則用了最深的藍(lán)色。

3、內(nèi)容區(qū)域出現(xiàn)的提取到的三哥色相的色彩，如果只是排列剩下的幾個(gè)顏色的話，顏色會(huì)很沖，我完全不能接受!所以找了幾張圖片用來(lái)過(guò)渡顏色，調(diào)整畫面的節(jié)奏，現(xiàn)在看來(lái)效果還不錯(cuò)。內(nèi)容區(qū)域的文字顏色與導(dǎo)航文字一致，都是很淺的藍(lán)色。

4、內(nèi)容區(qū)域的幾個(gè)按鈕并沒(méi)有用提取的顏色，而是用白色疊加然后調(diào)整透明度出來(lái)的。(大孔雀老師前段時(shí)間在經(jīng)驗(yàn)分享里發(fā)了一個(gè)色彩教程：網(wǎng)頁(yè)配色的天然范兒。推薦大家去看下，看完后受益匪淺。)

這個(gè)技巧還望大家靈活應(yīng)用，如果單純靠機(jī)器程序的話，自己的感覺(jué)依舊很難找。如果你真的對(duì)設(shè)計(jì)感興趣的話請(qǐng)不要忘記設(shè)計(jì)師的三多：多看、多想、多練，看到，理解，通過(guò)自己的形式表現(xiàn)出來(lái)。

越努力，越幸運(yùn)，與大家并肩前行。

到這里這教程就完了，我回頭看了下，好像沒(méi)有很深?yuàn)W很難理解的東西，所以我在大標(biāo)題的旁邊偷偷加了四個(gè)字“基礎(chǔ)教程”，哈哈，希望此教程能讓你的配色會(huì)說(shuō)話，讓你的設(shè)計(jì)更有說(shuō)服力，能夠幫到大家。