人氣教程最終版！寫給非科班設(shè)計師的漸變色學(xué)習(xí)指南

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

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

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

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

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

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

一、前言

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

一、基礎(chǔ)復(fù)習(xí)/練習(xí)

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

練習(xí)一、按鈕

Step 1

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

Step 2

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

Step 3

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

Step 4

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

Step 5

除了原本的陰影之外，在這邊我希望能夠進一步地凸顯陰影立體的效果，但！！如果把陰影直接加在原本的圖層上面，陰影在配合模糊（Blur）的效果之后就會往四面八方發(fā)散（崩潰），然后整個按鈕的底部就會臟得亂七八糟，不信邪的話可以調(diào)整看看。所以在這邊我把原本的基底稍微縮小并往下方移動一點（增加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）來做出反光的效果，陰影的強度/深度/位移同樣可以依照您所希望達到的立體感來進行調(diào)整。

Step 3

同樣加上邊線（Border）來凸顯按鈕的邊框效果，在這邊使用邊線同時也可以加強一些按壓的視覺感。由于光源的關(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)陰影能夠幫助改善這樣的狀況 →在基底的上方加上較強的內(nèi)陰影（#666666）來凸顯按鈕下壓的效果。

Step 5

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

Step 6

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

Step 7

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

二、角度漸層 （ Angular Gradient ）

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

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

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

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

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

Step 1

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

Step 2

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

Step 3

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

Step 4

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

依序完成Step1-Step4之后，成品的設(shè)定應(yīng)該如下圖 →

完成的效果如下：

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

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

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

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

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

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

調(diào)整顏色的方式也非常簡單，您唯一要移動的只有色相軸，依照色相軸的順序?qū)?yīng)到漸層區(qū)段的順序，您就可以輕松做出 icon 里面的舒適漸層啰。

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

三、金屬漸層

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

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

按鈕（Button）

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

Step 1 光澤制作

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

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

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

Step 2 細部調(diào)整

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

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

Step 3 文字調(diào)整

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

Step 4 邊框

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

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

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

 

旋鈕（Knob）

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

Step 1 光澤制作

想必各位伙伴應(yīng)該已經(jīng)發(fā)現(xiàn) →我們可以使用角度漸層（ Angular Radient ）來制作金屬旋鈕的金屬光澤：

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

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

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

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

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

Step1

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

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

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

Step 2 上層制作

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

Step 3 細部調(diào)整

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

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

Step 4 加上旋鈕指標

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

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

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

四、結(jié)論

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

「優(yōu)設(shè)神器下載人氣排行榜！」

瞬間轉(zhuǎn)換成水彩風(fēng)格！
《神器推薦！快速將圖片轉(zhuǎn)換成水彩/油畫風(fēng)格的TOPAZ IMPRESSION》

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

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

原文地址：medium

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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