一、怎樣提取合適的色彩

主要用到PS中的一個功能：存儲為WEB所用格式

快捷鍵：Ctrl+Shift+Alt+S

如圖(點擊圖片查看大圖)：

這里分成2個步驟

1. 找圖

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

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

2. 提取顏色

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

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

3. 顏色提取成功：3種色相的8種顏色

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

二、提取到的色彩怎樣應(yīng)用

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

單純說顏色的話，這個話題還真不好說，因為咱們最終要出的是呈現(xiàn)內(nèi)容的界面，讓圖形、文字、色彩相互協(xié)調(diào)，而不是做排列顏色的色譜，所以就牽扯到框架布局和內(nèi)容展示層級的問題。

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

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

導(dǎo)航文字及l(fā)ogo的顏色為最淺的藍色。

banner區(qū)域既大背景，這里用了咱們開始的圖片。上邊的大標(biāo)題logo則用了最深的藍色。

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

內(nèi)容區(qū)域的幾個按鈕并沒有用提取的顏色，而是白色疊加然后調(diào)整出透明度來的

這個技巧還望大家靈活運用，如果單純靠機器程序的話，自己的感覺依舊很難找。如果你真的對設(shè)計感興趣的話請不要忘記設(shè)計師的三多：多看、多想、多練，看到，理解，通過自己形式表現(xiàn)出來。