寫給非科班設(shè)計師的漸變色學(xué)習(xí)指南

Samuel：本漸變系列教程包括上中下篇，上篇介紹了見漸變的基礎(chǔ)概念和線性漸變的運(yùn)用，中篇通過實戰(zhàn)鞏固上篇的知識，同時學(xué)習(xí)放射性漸變。今天下篇是漸變色的進(jìn)階教程，除了復(fù)習(xí)前兩篇的基礎(chǔ)外，還會學(xué)習(xí)角度漸變和金屬漸變，整個教程循序漸進(jìn)， 零基礎(chǔ)也可以輕松學(xué)會。 由于本教程是一個系列，沒看上中篇的同學(xué)閱讀時可能會吃力，所以建議先閱讀以下兩篇：

1. 上篇：《一份全面系統(tǒng)的漸變色自學(xué)指南》
2. 中篇：《如何用漸變色繪制高格調(diào)的背景+球體》

（下）篇主要會介紹以下三個主題：

1. 基礎(chǔ)復(fù)習(xí)/練習(xí)
2. 角度漸層變化 （ Angular Gradient ）
3. 金屬漸層變化

本篇教學(xué)的完成目標(biāo)如下圖，本文范例全數(shù)使用Sketch3所制作。
一、前言 建議沒有讀過（上），（中）篇教學(xué)，但是對于漸層還有一些模糊的伙伴，可以先利用（上）篇的教學(xué)來建立漸層應(yīng)用的基本概念；理解線性漸層（ Linear Gradient ）、高彩度與低彩度的漸層運(yùn)用。（中）篇的教學(xué)則會利用一些簡單的實作練習(xí)來幫助您復(fù)習(xí)/領(lǐng)悟（上）篇里面提到的基礎(chǔ)理論，同時介紹放射狀漸層（ Radial Gradient ）的應(yīng)用場景跟需要注意的一些實作細(xì)節(jié)。接下來的（下）篇，會結(jié)合前兩篇的內(nèi)容做出一些更進(jìn)階的應(yīng)用，希望這一系列的分享能夠幫助您在制作簡報、UI設(shè)計或是印刷系列的設(shè)計，再不然就是各種好像很厲害（重點(diǎn)）的設(shè)計上面都能夠有一些幫助。
一、基礎(chǔ)復(fù)習(xí)/練習(xí) 首先我們就先來復(fù)習(xí)（上）篇里面所使用的基礎(chǔ)漸層，同時進(jìn)一步的搭配一些光影細(xì)節(jié)來做出一個常見的方形按鈕吧（兩種型態(tài)）。練習(xí)一里面使用的是最基本的深灰、灰、白的用色彼此搭配來復(fù)習(xí)常見的漸層應(yīng)用，同樣的概念其實可以輕易地套用到不同顏色的漸層上面來做出您自己的變化喔（見章節(jié)末端）。
練習(xí)一、按鈕 Step 1 設(shè)定工作區(qū)域的背景色為淺灰色（#E6E6E6）。拉出您的按鈕形狀（方形）后依照上亮（#E5E4E4）下暗（#C6C6C6）的漸層來做出基底雛形。 Step 2 為基底下方加上陰影（Shadow）來做出基本的立體感，陰影的強(qiáng)度（亮度）以及深度（x, y的位移數(shù)值）可以依照您所希望達(dá)到的立體感來進(jìn)行調(diào)整，但…加太多會有點(diǎn)怪啊。 Step 3 利用內(nèi)陰影（Inner shadow）于上方制作白色的反光邊（很重要），這條反光邊是由于光在照射到凸起的立體時會聚光在接觸點(diǎn)，再自然的于接觸平面上由將光源發(fā)散出去產(chǎn)生上亮下暗的效果。
Step 4 加上邊線（Border）來凸顯按鈕的邊框部分，考慮到光源的關(guān)系，我們同樣使用上淺（#B6B6B6）下深（#7F7F7F）的漸層來制作邊框。（做到這里相信您應(yīng)該已經(jīng)發(fā)現(xiàn)很有按鈕的雛形啰） Step 5 除了原本的陰影之外，在這邊我希望能夠進(jìn)一步地凸顯陰影立體的效果，但！！如果把陰影直接加在原本的圖層上面，陰影在配合模糊（Blur）的效果之后就會往四面八方發(fā)散（崩潰），然后整個按鈕的底部就會臟得亂七八糟，不信邪的話可以調(diào)整看看。所以在這邊我把原本的基底稍微縮小并往下方移動一點(diǎn)（增加y軸的位置），搭配（#5F5F5F）的顏色以及高斯模糊（ Gaussian Blur ）的效果，放置圖層于基座圖層的下方來制作陰影。 Step 6 加上一個好像很厲害的勾勾（#B3B3B3）。 Step 7 還記得嗎上篇教學(xué)的內(nèi)容嗎？只要在勾勾上側(cè)加上一個內(nèi)陰影（#363636 50%）做出凹陷的效果，再于下側(cè)加上一個白色陰影（#FFFFFF 50%）做出底部反光。登愣??！一般狀態(tài)的按鈕就完成啰。 練習(xí)二、按下去的按鈕 Step 1 設(shè)定工作區(qū)域的背景為淺灰色（#E6E6E6），依照上暗（#B1B1B1）下亮（#DCDCDC）的漸層來做出凹陷的基底雛形。 Step 2 為基底下方加上白色的陰影（Shadow）來做出反光的效果，陰影的強(qiáng)度/深度/位移同樣可以依照您所希望達(dá)到的立體感來進(jìn)行調(diào)整。 Step 3 同樣加上邊線（Border）來凸顯按鈕的邊框效果，在這邊使用邊線同時也可以加強(qiáng)一些按壓的視覺感。由于光源的關(guān)系使用的是差異很少的上深 （#848484） 下淺 （#8C8C8C） 漸層，上方的顏色可以盡量調(diào)整到跟Step4加入的內(nèi)陰影相同來讓邊線不會過于突兀。（注：相較于凸起的一般狀態(tài)按鈕，按壓下去的按鈕因為沒有物品阻礙的關(guān)系，光能夠直接照射到按鈕基底下側(cè)產(chǎn)生反光） Step 4 做到Step 3，相信您應(yīng)該會發(fā)現(xiàn)按壓的感覺好像還不夠明顯？接下來的內(nèi)陰影能夠幫助改善這樣的狀況 →在基底的上方加上較強(qiáng)的內(nèi)陰影（#666666）來凸顯按鈕下壓的效果。 Step 5 加上一個好像很厲害的勾勾，因為是凹陷平面的關(guān)系在這邊選擇較深的底色（#949494）。 Step 6 幫勾勾加上一個內(nèi)陰影（#363636，50%透明度）做出凹陷的效果，再加上一個普通的陰影（#FFFFFF，50%透明度）做出底部反光。成就達(dá)成！！
Step 7 同樣的原理也可以運(yùn)用在圓形、長方形或是各種圓角矩形上面，就讓各位自行發(fā)揮啰，附上一些不同顏色的成品給大家參考。