一、怎樣提取合適的色彩

主要用到PS中的一個(gè)功能：存儲(chǔ)為WEB所用格式

快捷鍵：Ctrl+Shift+Alt+S

如圖(點(diǎn)擊圖片查看大圖)：

這里分成2個(gè)步驟

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自帶壁紙。

2. 提取顏色

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

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

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

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

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

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

單純說(shuō)顏色的話，這個(gè)話題還真不好說(shuō)，因?yàn)樵蹅冏罱K要出的是呈現(xiàn)內(nèi)容的界面，讓圖形、文字、色彩相互協(xié)調(diào)，而不是做排列顏色的色譜，所以就牽扯到框架布局和內(nèi)容展示層級(jí)的問(wèn)題。

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

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

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

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

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

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

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