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

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

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

（下）篇主要會(huì)介紹以下三個(gè)主題：

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

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

一、前言

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

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

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

練習(xí)一、按鈕

Step 1

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

Step 2

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

Step 3

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

Step 4

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

Step 5

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

Step 6

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

Step 7

還記得嗎上篇教學(xué)的內(nèi)容嗎？只要在勾勾上側(cè)加上一個(gè)內(nèi)陰影（#363636 50%）做出凹陷的效果，再于下側(cè)加上一個(gè)白色陰影（#FFFFFF 50%）做出底部反光。登愣?。∫话銧顟B(tài)的按鈕就完成啰。

練習(xí)二、按下去的按鈕

Step 1

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

Step 2

為基底下方加上白色的陰影（Shadow）來(lái)做出反光的效果，陰影的強(qiáng)度/深度/位移同樣可以依照您所希望達(dá)到的立體感來(lái)進(jìn)行調(diào)整。

Step 3

同樣加上邊線（Border）來(lái)凸顯按鈕的邊框效果，在這邊使用邊線同時(shí)也可以加強(qiáng)一些按壓的視覺(jué)感。由于光源的關(guān)系使用的是差異很少的上深 （#848484） 下淺 （#8C8C8C） 漸層，上方的顏色可以盡量調(diào)整到跟Step4加入的內(nèi)陰影相同來(lái)讓邊線不會(huì)過(guò)于突兀。（注：相較于凸起的一般狀態(tài)按鈕，按壓下去的按鈕因?yàn)闆](méi)有物品阻礙的關(guān)系，光能夠直接照射到按鈕基底下側(cè)產(chǎn)生反光）

Step 4

做到Step 3，相信您應(yīng)該會(huì)發(fā)現(xiàn)按壓的感覺(jué)好像還不夠明顯？接下來(lái)的內(nèi)陰影能夠幫助改善這樣的狀況 →在基底的上方加上較強(qiáng)的內(nèi)陰影（#666666）來(lái)凸顯按鈕下壓的效果。

Step 5

加上一個(gè)好像很厲害的勾勾，因?yàn)槭前枷萜矫娴年P(guān)系在這邊選擇較深的底色（#949494）。

Step 6

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

Step 7

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

二、角度漸層 （ Angular Gradient ）

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

注：從剛踏入U(xiǎn)I設(shè)計(jì)這個(gè)領(lǐng)域就開(kāi)始 Follow 嫁給RD的UI設(shè)計(jì)師部落格的文章，然后每天都在持續(xù)等待新文章的發(fā)表 XD，真心推薦對(duì)于UI設(shè)計(jì)有興趣的伙伴們花些時(shí)間閱讀?。?/p>

除此像上圖的 icon 之外，角度漸層也可以被運(yùn)用在制作一些UI 背景或是視覺(jué)海報(bào)上面 →

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

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

Step 1

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

Step 2

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

Step 3

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

Step 4

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

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

完成的效果如下：

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

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

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

步驟 2 的制作其實(shí)相當(dāng)容易，我們先從下圖的角度漸層分配來(lái)看 →

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

然后開(kāi)始由第二個(gè)分段點(diǎn)往右到第五個(gè)分段點(diǎn)調(diào)整顏色 →

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

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

三、金屬漸層

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

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

按鈕（Button）

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

Step 1 光澤制作

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

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

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

Step 2 細(xì)部調(diào)整

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

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

Step 3 文字調(diào)整

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

Step 4 邊框

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

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

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

 

旋鈕（Knob）

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

Step 1 光澤制作

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

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

運(yùn)用這個(gè)原則我們可以試著拉出底下的漸層變化 →

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

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

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

Step1

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

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

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

Step 2 上層制作

復(fù)制一個(gè)Step1制作的基底，去除原本的陰影之后把它稍微縮??；然后開(kāi)心快樂(lè)的旋轉(zhuǎn)，轉(zhuǎn)到一個(gè)天時(shí)地利又人和的角度之后再給它加上一點(diǎn)細(xì)細(xì)（1–2px）的陰影做出下圖的效果 → 雖然這個(gè)Step2的一切聽(tīng)起來(lái)都很美有道理XD，但是有沒(méi)有注意到因?yàn)榈讓右灿薪饘俟鉂傻年P(guān)系，上下兩層搭配起來(lái)其實(shí)相當(dāng)協(xié)調(diào)，就好像有點(diǎn)厚度的金屬旋鈕?。?/p>

Step 3 細(xì)部調(diào)整

制作發(fā)絲紋?。。∫?yàn)槭菆A形旋鈕的關(guān)系，我們這次使用很多個(gè)無(wú)填滿(mǎn)，邊線為淺灰色（#E1E1E1）的圓形覆蓋在原本的旋鈕上方 →

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

Step 4 加上旋鈕指標(biāo)

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

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

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

四、結(jié)論

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

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

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

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

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

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