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

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

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

角度漸層變化 ( Angular Gradient )

金屬漸層變化

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

一、前言

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

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

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

練習(xí)一、按鈕

Step 1

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

Step 2

為基底下方加上陰影(Shadow)來做出基本的立體感，陰影的強(qiáng)度(亮度)以及深度(x, y的位移數(shù)值)可以依照您所希望達(dá)到的立體感來進(jìn)行調(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)很有按鈕的雛形