步驟一：找圖

關鍵步驟(zou)，確定自己想要(yao)的(de)(de)風(feng)格，找大量的(de)(de)符(fu)合風(feng)格要(yao)求(qiu)的(de)(de)圖片，進行(xing)對比篩選，選出最(zui)符(fu)合自己要(yao)求(qiu)的(de)(de)幾張圖片開始色彩(cai)的(de)(de)提(ti)取(qu)。

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

步驟二：提取顏色

把選中(zhong)的(de)圖(tu)片放(fang)入PS中(zhong)，點擊“存儲為(wei)web所(suo)用格式(shi)”(如(ru)果沒有色(se)彩非常合適的(de)圖(tu)，可以(yi)再ps里適當(dang)的(de)調整顏(yan)色(se)再進行顏(yan)色(se)提取)，格式(shi)選為(wei)png-8，色(se)塊選擇8，(數字越大色(se)塊越多，視自(zi)己需求而定)。

在顏色顯示區域就會留下8種顏色(按照顏色在畫面中所占的單位面積程序自動篩選)，點擊顏色區域右側的下拉按鈕，會找到“儲存顏色表”，把他儲存到桌面上或者你容易找到的地方。然后用ps打開，色斑中會顯示剛才提取到的顏色。
按(an)照咱們(men)第一步提(ti)取的(de)(de)顏(yan)色(se)做了一個Metro風格(ge)改進(jin)版的(de)(de)頁(ye)面，單純說顏(yan)色(se)的(de)(de)話，這個話題還(huan)真不(bu)好說，因為咱們(men)最終(zhong)要出的(de)(de)是呈現內(nei)容的(de)(de)頁(ye)面的(de)(de)內(nei)容，讓圖形(xing)、文字、色(se)彩(cai)相互協(xie)調(diao)，而不(bu)是做排列顏(yan)色(se)的(de)(de)色(se)譜。

具體的顏色應用為(wei)：

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

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

3、 內容區域出現的(de)(de)(de)提取到的(de)(de)(de)三哥色(se)(se)相的(de)(de)(de)色(se)(se)彩(cai)，如(ru)果只是排(pai)列剩下的(de)(de)(de)幾(ji)個顏色(se)(se)的(de)(de)(de)話，顏色(se)(se)會(hui)很沖，我完全不能接受!所(suo)以找了幾(ji)張圖(tu)片(pian)用來過渡(du)顏色(se)(se)，調整畫面的(de)(de)(de)節奏，現在看來效果還(huan)不錯(cuo)。內容區域的(de)(de)(de)文(wen)字(zi)顏色(se)(se)與導航文(wen)字(zi)一致，都是很淺的(de)(de)(de)藍色(se)(se)。

4、 內容區域的幾(ji)個按鈕并沒有(you)用提取的顏色(se)，而是用白色(se)疊加然(ran)后調整透(tou)明度出(chu)來的。

這個技巧(qiao)還(huan)望大家靈(ling)活應用(yong)，如果(guo)單純靠(kao)機器程序(xu)的(de)(de)(de)(de)話，自己的(de)(de)(de)(de)感覺依舊很難找。如果(guo)你真的(de)(de)(de)(de)對設計感興趣的(de)(de)(de)(de)話請不要忘記設計師的(de)(de)(de)(de)三(san)多(duo)：多(duo)看(kan)、多(duo)想、多(duo)練(lian)，看(kan)到，理解(jie)，通過(guo)自己的(de)(de)(de)(de)形式表現出來。