Samuel：本漸變系列教程包括上中下篇，上篇介紹了見漸變的基礎概念和線性漸變的運用，中篇通過實戰鞏固上篇的知識，同時學習放射性漸變。今天下篇是漸變色的進階教程，除了復習前兩篇的基礎外，還會學習角度漸變和金屬漸變，整個教程循序漸進， 零基礎也可以輕松學會。

由于本教程是一個系列，沒看上中篇的同學閱讀時可能會吃力，所以建議先閱讀以下兩篇：

1. 上篇：《一份全面系統的漸變色自學指南》
2. 中篇：《如何用漸變色繪制高格調的背景+球體》

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

1. 基礎復習/練習
2. 角度漸層變化 （ Angular Gradient ）
3. 金屬漸層變化

本篇教學的完成目標如下圖，本文范例全數使用Sketch3所制作。

一、前言

建議沒有讀過（上），（中）篇教學，但是對于漸層還有一些模糊的伙伴，可以先利用（上）篇的教學來建立漸層應用的基本概念；理解線性漸層（ Linear Gradient ）、高彩度與低彩度的漸層運用。（中）篇的教學則會利用一些簡單的實作練習來幫助您復習/領悟（上）篇里面提到的基礎理論，同時介紹放射狀漸層（ Radial Gradient ）的應用場景跟需要注意的一些實作細節。接下來的（下）篇，會結合前兩篇的內容做出一些更進階的應用，希望這一系列的分享能夠幫助您在制作簡報、UI設計或是印刷系列的設計，再不然就是各種好像很厲害（重點）的設計上面都能夠有一些幫助。

一、基礎復習/練習

首先我們就先來復習（上）篇里面所使用的基礎漸層，同時進一步的搭配一些光影細節來做出一個常見的方形按鈕吧（兩種型態）。練習一里面使用的是最基本的深灰、灰、白的用色彼此搭配來復習常見的漸層應用，同樣的概念其實可以輕易地套用到不同顏色的漸層上面來做出您自己的變化喔（見章節末端）。

練習一、按鈕

Step 1

設定工作區域的背景色為淺灰色（#E6E6E6）。拉出您的按鈕形狀（方形）后依照上亮（#E5E4E4）下暗（#C6C6C6）的漸層來做出基底雛形。

Step 2

為基底下方加上陰影（Shadow）來做出基本的立體感，陰影的強度（亮度）以及深度（x, y的位移數值）可以依照您所希望達到的立體感來進行調整，但…加太多會有點怪啊。

Step 3

利用內陰影（Inner shadow）于上方制作白色的反光邊（很重要），這條反光邊是由于光在照射到凸起的立體時會聚光在接觸點，再自然的于接觸平面上由將光源發散出去產生上亮下暗的效果。

Step 4

加上邊線（Border）來凸顯按鈕的邊框部分，考慮到光源的關系，我們同樣使用上淺（#B6B6B6）下深（#7F7F7F）的漸層來制作邊框。（做到這里相信您應該已經發現很有按鈕的雛形啰）

Step 5

除了原本的陰影之外，在這邊我希望能夠進一步地凸顯陰影立體的效果，但?。∪绻殃幱爸苯蛹釉谠镜膱D層上面，陰影在配合模糊（Blur）的效果之后就會往四面八方發散（崩潰），然后整個按鈕的底部就會臟得亂七八糟，不信邪的話可以調整看看。所以在這邊我把原本的基底稍微縮小并往下方移動一點（增加y軸的位置），搭配（#5F5F5F）的顏色以及高斯模糊（ Gaussian Blur ）的效果，放置圖層于基座圖層的下方來制作陰影。

Step 6

加上一個好像很厲害的勾勾（#B3B3B3）。

Step 7

還記得嗎上篇教學的內容嗎？只要在勾勾上側加上一個內陰影（#363636 50%）做出凹陷的效果，再于下側加上一個白色陰影（#FFFFFF 50%）做出底部反光。登愣??！一般狀態的按鈕就完成啰。

練習二、按下去的按鈕

Step 1

設定工作區域的背景為淺灰色（#E6E6E6），依照上暗（#B1B1B1）下亮（#DCDCDC）的漸層來做出凹陷的基底雛形。

Step 2

為基底下方加上白色的陰影（Shadow）來做出反光的效果，陰影的強度/深度/位移同樣可以依照您所希望達到的立體感來進行調整。

Step 3

同樣加上邊線（Border）來凸顯按鈕的邊框效果，在這邊使用邊線同時也可以加強一些按壓的視覺感。由于光源的關系使用的是差異很少的上深 （#848484） 下淺 （#8C8C8C） 漸層，上方的顏色可以盡量調整到跟Step4加入的內陰影相同來讓邊線不會過于突兀。（注：相較于凸起的一般狀態按鈕，按壓下去的按鈕因為沒有物品阻礙的關系，光能夠直接照射到按鈕基底下側產生反光）

Step 4

做到Step 3，相信您應該會發現按壓的感覺好像還不夠明顯？接下來的內陰影能夠幫助改善這樣的狀況 →在基底的上方加上較強的內陰影（#666666）來凸顯按鈕下壓的效果。

Step 5

加上一個好像很厲害的勾勾，因為是凹陷平面的關系在這邊選擇較深的底色（#949494）。

Step 6

幫勾勾加上一個內陰影（#363636，50%透明度）做出凹陷的效果，再加上一個普通的陰影（#FFFFFF，50%透明度）做出底部反光。成就達成??！

Step 7

同樣的原理也可以運用在圓形、長方形或是各種圓角矩形上面，就讓各位自行發揮啰，附上一些不同顏色的成品給大家參考。

二、角度漸層 （ Angular Gradient ）

在讀完了（上）篇教學中介紹的線性漸層（ Linear Gradient ）以及（中）篇教學介紹的放射狀漸層（ Radial Gradient ）之后，各位對于漸層該如何使用應該是相當（有點）有概念了吧。那我們接下來就來看看角度漸層（ Angular Gradient ）可以用來做些什么吧！在過去的使用經驗里面，不管是在金屬旋鈕、狀態條、icon 設計或是神奇的立體邊緣上面都有角度漸層出場的機會，運用的范圍是相當廣泛而且充滿變化性的。那…就讓我們先從一顆 icon 開始看看；下圖的 icon 是厲害的設計師 akanelee，于嫁給RD的UI設計師中介紹的一個案例：《PS新手教程：中國臺灣設計師教你快速制作圓形漸變圖標》

注：從剛踏入UI設計這個領域就開始 Follow 嫁給RD的UI設計師部落格的文章，然后每天都在持續等待新文章的發表 XD，真心推薦對于UI設計有興趣的伙伴們花些時間閱讀??！

除此像上圖的 icon 之外，角度漸層也可以被運用在制作一些UI 背景或是視覺海報上面 →

就讓我們先用上面這張案例來了解一下角度漸層是怎么一回事吧？

角度漸層（ Angular Gradient）案例一：背景制作

Step 1

簡單來在工作區域上拉出一個圓形，利用1/5 檢色器的選色原則選取您想要的漸層顏色，在利用角度漸層填滿圓形。底下這張圖應該可以很清楚的了解到角度漸層是怎么一回事吧，簡單說就是讓漸層繞著您設定的圖形轉 xD。

Step 2

選擇您所要的屏幕大小制作矩形，并且將矩形設定為 Step1 圓形的屏蔽，產生如下圖的效果 →

Step 3

適度的給予餅圖層高斯模糊（ Gaussian Blur ），讓角度漸層的連接處不會過于銳利（這個步驟視您的喜好決定是否加入）。

Step 4

最后再加上 Noise Fill 來制作一些顆粒磨砂感。（注：Noise Fill 常常被用來制作紙類的質感）

依序完成Step1-Step4之后，成品的設定應該如下圖 →

完成的效果如下：

角度漸層（ Angular Gradient ）案例二：ICON 制作

作為一個工程師跟半個設計師，并不會因為同時有 1.5 個技能就有 1.5 倍的薪水，但我們擁有一個很大的優勢?—?就是寫 for 循環寫到沒感覺的時候可以去畫圖，畫圖畫到靈感浩劫的時候可以再回來寫 for 循環。那我們就來試試看一顆小弟之前寫 Code 寫到沒感覺，只好打開 Sketch3 做的半顆…icon？

上面這顆 icon 可以分成三個步驟制作，分別是基底，彩色區域跟中間的不知名平面（原諒我想不出應該要叫它什么）。步驟 1 跟步驟 3 的制作其實在前面的練習跟上，中篇的教學里面都有介紹過很多次，在這邊就不再復述啰！我們單純針對步驟2的角度漸層做進一步的解釋。

步驟 2 的制作其實相當容易，我們先從下圖的角度漸層分配來看 →

在漸層軸的起點我選擇了一個亮度最高，彩度又不會太低的紅色（#FF8B8B）來作為角度漸層的起點，亮度較高的顏色搭配淺色的背景以及基底可以讓整體視覺呈現較為舒適，干凈的感覺。接下來就是一個超級簡單的步驟，我們先把漸層區段每隔 20%做一個分隔點，總共做出五個區域如下圖：

然后開始由第二個分段點往右到第五個分段點調整顏色 →

調整顏色的方式也非常簡單，您唯一要移動的只有色相軸，依照色相軸的順序對應到漸層區段的順序，您就可以輕松做出 icon 里面的舒適漸層啰。

如同這個章節最前面所提到的，角度漸層（ Angular Gradient ）的應用其實非常廣泛，在這邊先就兩個常用的情況幫助各位對于角度漸層的應用能有一個初步的了解，基于這些背景知識也能讓您在創作新的事物上面有更多的技巧可以使用。緊接著讓我們來看看金屬漸層吧！

三、金屬漸層

在開始制作金屬漸層之前，我們先來看一張金屬材質的照片 →

從照片中我們可以發現，由于金屬本身的光澤，還有光在金屬平面上的折射、反射情形相對復雜的因素，導致金屬本身的色澤變化對比強烈，光源的分布也比較沒有固定的方向。但是在制作上面其實還是有一些簡單的原則可以依循（看看照片中鍋底的光影就是一顆旋鈕的正面啊 XD）。這個章節就讓我們利用UI組件中常出現的金屬旋鈕以及金屬按鈕來做點練習。

按鈕（Button）

我們在制作一般按鈕的時候，在漸層上的使用頂多運用2–3個漸層區段（簡單來說：凸的就是上淺下深，凹的就是上深下淺），但是?。?！注意啰，剛剛有提過金屬光澤的兩個重點就是對比強烈跟光影沒有一定性。運用這兩個原則，我們開始看看要如何才能夠把上面這顆普通的按鈕轉變成具有金屬質感的按鈕！注：對于金屬圓形/長形/旋鈕有興趣的朋友，建議在讀完本篇教學后于 Google 搜尋 Metal Web Button, Metal Button Icon, Metal Round Button 等關鍵詞，您會看到滿坑滿谷的金屬按鈕，跟金屬按鈕還有…金屬按鈕提供您作為后續練習的依據與參考。

Step 1 光澤制作

讓我們沿用練習中做出來的按鈕，在基底上面做一些漸層的調整（單純調整覆蓋的漸層顏色）就可以發現感覺好像有點出來啦。我們可以簡單整理出一些小規則 → 基于原本上亮下暗的漸層中間，插入明顯的亮部跟暗部漸層區段（強烈對比），而且彼此采交替（或是兩個暗部一個亮部）的方式出現，就可以輕易地做出有金屬光澤感的漸層。（注：這里的示范全部都是使用 Sketch3 制作，因為 Sketch3 漸層的制作引擎效能實在是比不上 Photoshop，如果您使用的是 Photoshop 質感會更棒 xD）

注1：不同的漸層區段（位置，明暗程度）也可以產生不太一樣的效果喔，下圖就更偷懶只有一個亮部配上一個暗部。

注2：因為 Sketch3 和 Photoshop 背后處理漸層的方式不同，如果在 Photoshop 中以相同模式的漸層來制作時可以產生如下圖的效果（在這邊有稍微加深顏色），可以發現按鈕上面漸層的過渡相當自然，不像在 Sketch3 里面制作時偶爾會有突兀的線光源，更糟的是有時候還會因為顏色 Render 不好整顆按鈕彷佛打上馬賽克。再來，因為 Photoshop 在圖層的處理上面除了漸層覆蓋跟基本的陰影調整之外其實還有相當多的元素可以使用（內光暈、外光暈、神器斜角浮雕），如果您希望制作的是大師級的作品，不要懷疑！請愛用 Adobe 系列軟件，如果您希望制作的是目前看起來好像有點厲害的作品又可以偷懶不要那么辛苦的話就讓我們一起繼續使用 Sketch3 吧。

Step 2 細部調整

仔細觀察一下章節最前面的金屬材質照片，可以發現金屬質感中有一個不可或缺的細節?—? 發絲紋?。?！就是這個紋讓這一切看起來變的好像很厲害。在 Sketch3 里面我們可以用一個利用把很多條的線迭在原本的按鈕上方的方式來制作 →

接下來把所有迭在上方的線段展開，搭配高斯模糊（ Gaussian Blur ）來做出發絲紋的效果 →

Step 3 文字調整

在最后的步驟里面，我同樣的加強了文字上面凹陷（深色內陰影）以及底部反射（白色反光陰影）的效果來配合金屬強烈對比的質感。一顆具金屬質感的按鈕表面就誕生啦。

Step 4 邊框

接下來可以試著運用同樣的金屬光澤漸層概念，利用邊線（Border）為您的按鈕加上邊框。大致上的制作概念就是 Step1?—?Step4 的步驟，細杰的部分還有一些像是該如何與背景融合、該如何做出金屬凹陷的效果等等就留在之后的文章再跟各位分享啰。

注1：同樣的效果在加上顏色之后也能組合出不同的用途，像是底下的綠色進度（血量）條？！

注2：同樣的概念可以直接運用在不同的形狀，做出不同的效果：舉例來說 →下方左圖我加寬了亮部的區間，調整了圓角邊緣，現在看起來有種水管的感覺；第二張圖我增加了由上至下的漸層邊線，同樣調整了圓角邊緣，就輕易地轉變成一顆長方形的按鈕啰。

 

旋鈕（Knob）

金屬旋鈕的制作稍微復雜一些，在完成接下來的案例后如果您還想要了解其它的制作案例或是手法，只需要 Google “Metal Knob UI” 就可以找到滿坑滿谷的案例分享，在 Freepik上面也可以輕易下載到 PSD/AI 檔案做為練習的參考，有興趣的伙伴歡迎去看看各方大神做出來的旋鈕再回來指導小弟。在這邊我會帶著大家來聊聊底下這顆閑暇之余練習的金屬旋鈕應該要如何制作。

Step 1 光澤制作

想必各位伙伴應該已經發現 →我們可以使用角度漸層（ Angular Radient ）來制作金屬旋鈕的金屬光澤：

在制作按鈕時有提到一個制作金屬光澤的原則，對比強烈的亮暗部（亮度的調整）交替變化。注：如果您今天是制作有顏色的按鈕，在調整亮度的同時可能也會針對彩度進行微調，歡迎閱讀上、中篇的教學來更了解該如何處理這樣的狀況。

運用這個原則我們可以試著拉出底下的漸層變化 →

漸層變化軸（#969495，#EFEFEF， #878586， #EFEFEF，#999798，#EFEFEF，#969495）

基本上從上圖可以發現..其實就是不停的在進行亮部/暗部的切換，如果您是初學者的話，彼此之間的間距變化也建議維持在一個跟上圖一樣接近等距的狀態（15–20%），唯一要切記的點就是漸層變化軸的頭尾顏色要相同，不然您會做出一個很..神奇的效果。

做到這邊您可能會懷疑難道金屬旋鈕這樣就夠了嗎？登愣！！??！其實光是第一個步驟的漸層，加上底部簡單的陰影就可以做出下圖的效果啰 →

Step1

如果您覺得看起來好像還不夠厲害有點雷的話，可以開始嘗試在亮暗部中間另外插入幾個暗部做調整，基本上只要選色正確（銀色的金屬突然跑出一個金色之類的…），對比強烈，您的作品應該都能夠保持不錯的金屬光澤 。

（講到這里，相信您也發現亮暗交替并非鐵則，只是一個初學在一開始可以運用的小技巧，實際制作時還是以您（老板）的需求效果為準） →

到這邊我們的基底就制作完成啰。

Step 2 上層制作

復制一個Step1制作的基底，去除原本的陰影之后把它稍微縮??；然后開心快樂的旋轉，轉到一個天時地利又人和的角度之后再給它加上一點細細（1–2px）的陰影做出下圖的效果 → 雖然這個Step2的一切聽起來都很美有道理XD，但是有沒有注意到因為底層也有金屬光澤的關系，上下兩層搭配起來其實相當協調，就好像有點厚度的金屬旋鈕??！

Step 3 細部調整

制作發絲紋?。?！因為是圓形旋鈕的關系，我們這次使用很多個無填滿，邊線為淺灰色（#E1E1E1）的圓形覆蓋在原本的旋鈕上方 →

然后同樣使用高斯模糊（ Gaussian Blur ）來模擬發絲紋的效果 →

Step 4 加上旋鈕指標

到目前為止，旋鈕的外型算是告一個段落啰！最后的步驟可以依照您個人的喜好決定添加與否，看是要做點刻度啦、圓的方的三角形的啦用什么顏色只要不要太夸張其實效果都還不錯（因為旋鈕的底座是灰白這樣的中間色，再添加其他組件時不管搭配什么顏色都比較不會產生太沖突的視覺感受）！在這個Demo里面我們做一個綠色的旋鈕指標：首先，在旋鈕上方做出一個綠色的圓形（#7DD96F）。接下來利用跟制作按鈕文字相同的概念，在圓形的上方利用內陰影做出凹陷的效果，在下方加上一個高光陰影做出底部反光（陰影的顏色為白色，透明度則依照需要的反光程度調整）。登愣??！如果您能做到這里就來點掌聲吧。

一模一樣的漸層也可以用在最前面練習的按鈕喔！

大致上金屬旋鈕的制作就是Step1-Step4的四個步驟，接下來就是各位發揮想象力，以及對于細節的要求程度來對作品進行下一步的調整跟優化。切記，（下）篇中的每一個制作概念都可以沿用到不同的icon、不同的接口或是任何您想得到的相關設計上面使用，千萬不要被局限在金屬旋鈕這樣的主題。前陣子運用這三篇提到的觀念，花了點時間擠出一套沒什么實際應用價值的 Control Set 提供給各位參考。（注：右下最后一顆實在想不出來要畫什么…因此參考Ahmed Gamel的作品做了個Rebound補補右下角的空虛）

四、結論

默默的從開始寫文章到現在也過了約一個月的時間，真心期許各位讀者在花費寶貴時間看完這一系列的文章之后也能開始運用漸層制作出不同的作品，更鼓勵各位愿意把你們厲害的成品分享出來共同討論。小弟期待能夠從你們那邊學到更多的東西??！最后的最后，若是小弟的文章很幸遇的幫助您對于漸層的運用，接口的設計有了基礎的認識，而您期許能夠有更進一步的成長，建議您可以開始在Pinterest、Dribbble，Behance這些聚集了世界上頂尖設計師的平臺上面找尋您命中注定（目標）的設計大神，藉由觀察、分析以及臨摹練習去幫助自己建立觀念，以及培養工具的熟悉程度（設計論壇、設計師、攝影師（一））。接下來應該還會有一些漸層應用的短篇文章來分享常常使用到的小撇步，一些簡報制作的小習慣，工作過程中有任何的突發相關事件（像是名片基礎）如果老板同意的話也會跟大家分享；然后就要→回到自己原本的目標，寫些文章來降低工程/設計甚至與PM的合作困境xDD，敬請期待啦。

「優設神器下載人氣排行榜！」

瞬間轉換成水彩風格！
《神器推薦！快速將圖片轉換成水彩/油畫風格的TOPAZ IMPRESSION》

好用到爆的AE插件：
《完全停不下來！10個好用到令人震驚的AE插件（附視頻演示）》

10套收費的模版：
《價值4000元！10套可商用的WEB設計模版PSD限時免費下載》

原文地址：medium

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com