来源:优设 作者:Samuel
本渐变系列uimaker.com/uimakerhtml/uistudy/">教程包括上中下篇，上篇介绍了见渐变的基础概念和线性渐变的运用，中篇通过实战巩固上篇的知识，同时学习放射性渐变。今天下篇是渐变色的进阶教程，除了复习前两篇的基础外，还会学习角度渐变和金属渐变，整个教程循序渐进， 零基础也可以轻松学会。
由于本教程是一个系列，没看上中篇的同学阅读时可能会吃力，所以建议先阅读以下两篇：
基础复习/练习
角度渐层变化 ( Angular Gradient )
金属渐层变化
本篇教学的完成目标如下图，本文范例全数使用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
除了原本的阴影之外，在这边我希望能够进一步地凸显阴影立体的效果，但!!如果把阴影直接加在原本的图层上面，阴影在配合模糊(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）
