@國凱是個好青年 把這幾年自己在工作中的經驗與技巧拿出來分享下，不過寫文字對我來說太糾結，還沒有作圖來的實在，哈哈。不管怎么說還是寫完了，第一次寫教程，如果有沒說清楚的地方歡迎交流。感謝@韓雪冬老師半夜三點的支持，哈哈。

在站酷網公開課第五期中有幸和冬哥配合了下，在里面說到一點關于配色的技巧，有很多酷友在問怎樣操作的，今天拿出來和大家分享下，希望能夠幫到剛入行的朋友，如有不妥之處還望各位同行指正。

作者大力推薦的：網頁配色進階篇：疊柔配色技巧

色彩的問題很多朋友都在問，包括在前幾期的公開課中，都有問色彩的問題，大部分老師說感覺，嗯，在我看來也是感覺，但感覺著東西都是自己經歷多了才出現的，在剛接觸設計的時候，選擇色彩是有一些技巧的，咱們這次就說說這些技巧。這次分為兩部分，

一部分是怎樣提取合適的色彩，一部分怎樣應用提取到的色彩。

ONE · 怎樣提取合適的色彩

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

這里分成二個步驟：

1.1：找圖

關鍵步驟，確定自己想要的風格，找大量的符合風格要求的圖片，進行對比篩選，選出最符合自己要求的幾張圖片開始色彩的提取。

因為這次沒有明確的風格和方向，我從佳作欣賞里找了一張色彩豐富，精神狀態積極向上，尺寸超大（選圖片是盡量找到大尺寸的圖，提取色彩時顏色會很正）的圖片開始咱們的教程，Galaxy S4自帶壁紙，見附圖。

1.2：提取顏色

把選中的圖片放入ps中，點擊“存儲為web所用格式”（如果沒有色彩非常合適的圖，可以再ps里適當的調整顏色再進行顏色提取），格式選為png-8，色塊選擇8，（數字越大色塊越多，視自己需求而定）。

在顏色顯示區域就會留下8種顏色（按照顏色在畫面中所占的單位面積程序自動篩選），點擊顏色區域右側的下拉按鈕，會找到“儲存顏色表”，把他儲存到桌面上或者你容易找到的地方。然后用ps打開，色斑中會顯示剛才提取到的顏色。

OK，顏色提取成功，3個色相的8種顏色

是不是非常簡單，大家感受一下，馬上進入第二部分

TWO · 提取到的色彩怎樣應用

按照咱們第一步提取的顏色做了一個Metro風格改進版的頁面（里面的內容可以無視，都是替代文字），先感受下。。。

單純說顏色的話，這個話題還真不好說，因為咱們最終要出的是呈現內容的頁面的內容，讓圖形、文字、色彩相互協調，而不是做排列顏色的色譜。所以就牽扯到框架布局和內容展示層級的問題，這兩個東西大家先跟著自己的經驗走，有機會下次聊，這次咱們先說色彩！

這個頁面和現在的主流網站框架差不多，從上到下主要分為三個部分，導航區域、banner、內容區。

具體的顏色應用為：

1、導航文字及LOGO的顏色為最淺的藍色。

2、Banner區域即大背景，這里用了咱們開始的圖片，上邊的大標題LOGO則用了最深的藍色。

3、內容區域出現的提取到的三哥色相的色彩，如果只是排列剩下的幾個顏色的話，顏色會很沖，我完全不能接受！所以找了幾張圖片用來過渡顏色，調整畫面的節奏，現在看來效果還不錯。內容區域的文字顏色與導航文字一致，都是很淺的藍色。

4、內容區域的幾個按鈕并沒有用提取的顏色，而是用白色疊加然后調整透明度出來的。（大孔雀老師前段時間在經驗分享里發了一個色彩教程：網頁配色的天然范兒。推薦大家去看下，看完后受益匪淺。）
這個技巧還望大家靈活應用，如果單純靠機器程序的話，自己的感覺依舊很難找。如果你真的對設計感興趣的話請不要忘記設計師的三多：多看、多想、多練，看到，理解，通過自己的形式表現出來。

越努力，越幸運，與大家并肩前行。
到這里這教程就完了，我回頭看了下，好像沒有很深奧很難理解的東西，所以我在大標題的旁邊偷偷加了四個字“基礎教程”，哈哈，希望此教程能讓你的配色會說話，讓你的設計更有說服力，能夠幫到大家。

如果你是實戰派請關注新浪微博：@國凱是個好青年
（廣告時間）站酷網佳作欣賞頻道每天都會有熱心酷友更新大量優質內容，找靈感的同學有時間就去看看哦。

原文地址：http://www.zcool.com.cn/article/ZNDg0MDQ=.html
作者：@國凱是個好青年

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量41萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：