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

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

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

角度漸層變化 ( Angular Gradient )

金屬漸層變化

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

一、前言

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

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

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

練習(xí)一、按鈕

Step 1

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

Step 2

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

Step 3

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

Step 4

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