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