本渐变系列教程包括上下两部分。第一部分介绍梯度的基本概念和线性梯度的应用，第二部分通过实战巩固第一部分的知识，学习放射性梯度。今天，下一部分是关于渐变颜色的高级教程。除了复习前两篇文章的基础知识，我们还将学习角度渐变和金属渐变。整个教程是循序渐进的，零基础很容易学会。

由于本教程是一个系列，不看中间部分的同学可能阅读有困难，建议先看下面两篇:

上篇：一份全面系统的渐变色自学指南中篇：如何用渐变色绘制高格调的渐层背景 球体下篇：写给非科班设计师的渐变色学习指南

下一章将介绍以下三个主题:

基础复习/练习角度渐层变化 （ Angular Gradient ）金属渐层变化

这个教学的目标是这样的。本文所有的例子都是Sketch3制作的。

一、前言

建议你没有看过(一)和(中)的教学，但渐进中还是有一些模糊的伙伴，可以用(一)的教学建立渐进应用的基本概念；了解线性渐变、高色度和低色度渐变的使用。第(中)章的教学将使用一些简单的实践练习来帮助您回顾/理解第(一)章中提到的基本理论，并介绍径向梯度的应用场景和一些需要注意的实践细节。下一篇(下一篇)文章将结合前两篇文章的内容来制作一些更高级的应用程序。希望这一系列的分享可以帮助你做演示，UI设计或者打印系列设计，或者各种看起来很厉害的设计(重点)。

第一，基础复习/练习

首先我们来复习一下第一部分使用的基本渐变，用一些光影细节(两种类型)做一个普通的方形按钮。练习1使用最基本的颜色深灰色、灰色和白色来复习常见的渐变应用。事实上，同样的概念可以很容易地应用到不同颜色的渐变中，以进行您自己的更改(参见本章末尾)。

练习1。纽扣

步骤1

将工作区域的背景颜色设置为浅灰色(#E6E6E6)。拉出你的纽扣形状(正方形)后，按照#E5E4E4和#C6C6C6的梯度做基底的雏形。

步骤2

在基底底部添加阴影，形成基本的立体效果。阴影的强度(亮度)和深度(x和y的位移值)可以根据你想要达到的立体感来调整，但是……加多了会有点奇怪。

步骤3

使用内阴影在顶部制作一个白色的反射边缘是非常重要的。这种反射边缘是因为光线照射到凸形固体时会在接触点汇聚，然后在接触平面上自然散开光源，产生上亮下暗的效果。

步骤4

添加边框以突出显示按钮的边框部分。考虑到光源之间的关系，我们还使用了# B6B6B6和#7F7F7F的渐变来制作边框。(相信你应该已经找到了纽扣的原型。)

步骤5

除了原来的阴影，希望在这里进一步突出阴影的立体效果，但是！！如果直接在原图层上添加阴影，匹配模糊效果后，阴影会向四面八方扩散(塌陷)，然后整个按钮底部会变脏。不信邪，可以调整。所以这里我把原来的底座稍微缩小，向下移动一点(增加Y轴的位置)。用(#5F5F5F)的颜色和高斯模糊的效果，我把图层放在基础图层下面做阴影。

步骤6

加一个看起来很厉害的钩子(#B3B3B3)。

步骤7

还记得上节课的内容吗？只需在钩子的上侧加一个内侧阴影(#363636 50%)使其凹陷，然后在下侧加一个白色阴影(#FFFFFF 50%)使其底部反光即可。邓愣了！！一般状态的按钮完成。

练习2。按电钮启动

步骤1

将工作区背景设置为浅灰色(#E6E6E6)，根据暗顶(# b1b1)和亮底(#DCDCDC)的渐变做凹底原型。

步骤2

在基底底部添加一个白色阴影，以产生反射效果。阴影的强度/深度/位移也可以根据你想要达到的立体感来调整。

步骤3

还可以添加边框来突出按钮的边框效果。在这里使用边框也可以增强按压的视觉感。由于光源使用的是上深度(#848484)和下深度(#8C8C)差别不大的渐变，所以可以尽量调整上颜色，使其与步骤4中添加的内阴影相同，这样边缘就不会太突兀。(注意:与凸起的一般状态按钮相比，由于没有物体阻挡，按下的按钮可以直接照射到按钮底座的下侧，产生光反射)

步骤4

做第三步，相信你应该会发现按压的感觉不够明显吧？下一个内阴影可以帮助改善这种情况→在底座上方添加一个强烈的内阴影(#666666)，突出按键的效果。

步骤5

加一个看起来很厉害的钩子，因为是凹面平面。在此选择更深的背景颜色(#949494)。

步骤6

在钩子上加一个内阴影(#363636，50%透明度)做凹面效果，再加一个普通阴影(#FFFFFF，50%透明度)做底面反射。成就！！

步骤7

同样的原理也可以应用到圆形、矩形或者各种圆角矩形，让大家自己玩吧。请附上一些不同颜色的成品供你参考。

第二，角度梯度(角度梯度)

在阅读了前面教学中介绍的线性梯度和中间教学中介绍的径向梯度后，你应该对如何使用梯度有一个相当(有点)的概念。然后我们来看看角梯度可以用来做什么。在以往的经验中，有机会逐渐出现在金属旋钮、状态栏、图标设计或神奇的立体边缘上，应用范围相当广泛，充满可变性。然后……先说一个图标；下图中的图标是一个强大的设计师akanelee介绍的案例，在嫁给RD的UI设计师:教你快速制作圆形渐变图标

注意:从我第一次进入UI设计领域开始，我就开始和RD的UI设计师博客里的文章结婚，然后每天等着新的文章发布XD。真心推荐对UI设计感兴趣的伙伴花点时间阅读！！

除了上面的图标，角度渐变也可以用来做一些UI背景或者视觉海报→

让我们用上面的例子来理解什么是角度梯度。

角度渐变案例1:背景制作

步骤1

只需在工作区域上拉出一个圆圈，利用1/5颜色检测器的颜色选择原理，选择自己想要的渐变颜色，用角度渐变填充圆圈即可。下图应该很清楚什么是角度渐变。简单来说，让渐变围绕你设置的图形转xD。

步骤2

选择你要做矩形的屏幕尺寸，将矩形设置为Step1圆的遮挡，会产生如下图→

步骤3

给蛋糕层适度高斯模糊，让角度渐变的关节不会太尖锐(这一步看你的喜好来决定加不加)。

步骤4

最后添加噪波填充，让部分粒子有磨砂感。(注意:噪波填充通常用于制作纸张纹理)

步骤1-步骤4依次完成后，成品设置如下→

效果如下:

角度渐变案例2:图标制作

作为一个工程师和半个设计师，不会因为同时有1.5个技能就拿1.5倍的工资，但是我们有一个很大的优势——没感觉的时候可以画画，画画的时候回来写循环。那我们试试一个以前写Code的弟弟，没感觉，只好打开Sketch3做的一半…图标。

上面的图标可以分三步做出来，分别是底座，彩色区域，中间的未知平面(原谅我没想好怎么称呼)。事实上，步骤1和步骤3的制作与前面的练习保持一致。中篇的教学已经介绍了很多遍了，这里就不赘述了！我们简单地进一步解释步骤2的角度梯度。

第二步的制作其实挺简单的。我们先从下图的角度来看渐变分布→

在渐变轴的起点，我选择了一个亮度最高，色度不太低的红色(#FF8B8B)作为角度渐变的起点。亮度较高、背景光和底色较浅的颜色，可以让整个视觉感觉更舒适、干净。下一步是超级简单的一步。我们首先在渐变段每20%做一个分离点，总共做五个区域，如下图:

然后开始从第二个分割点向右调整颜色到第五个分割点→

调整颜色的方法也很简单。你唯一需要移动的就是色相轴。根据渐变段的顺序对应的色相轴的顺序，可以很容易的在图标中做出舒适的渐变。

正如本章开头提到的，角梯度的应用其实非常广泛。在这里，我们将帮助您初步了解角度梯度在两种常见情况下的应用。在这些背景知识的基础上，你也可以运用更多的技能去创造新事物。然后我们来看看金属渐变。

三.金属级配

在开始制作金属渐变之前，我们先来看一张金属材料的照片→

从照片中我们可以发现，由于金属本身的光泽，以及光线在金属平面上相对复杂的折射和反射，金属本身的变色相当强烈，光源的分布没有固定的方向。不过制作上还是有一些简单的原则可以遵循的(看照片中锅底的光影是一个旋钮的前面，XD)。这一章我们就用UI组件中经常出现的金属旋钮和按钮来做一些练习。

按钮

制作一般按钮时，我们最多使用2–3个渐变段(简单来说:凸表示上浅下深，凹表示上深下浅)，但是！！！注意，刚才提到了金属光泽的两个要点，就是对比度强，光影不一定。利用这两个原理，我们开始看到如何把上面的普通按钮变成金属质感的按钮！注:对于对金属圆/长/旋钮感兴趣的朋友，建议看完本教学后在Google上搜索金属web按钮、金属按钮图标、金属圆按钮等关键词。你会发现满坑满谷的金属扣、金属扣……金属扣，为你后续的练习提供依据和参考。

光泽制作

让我们用练习中做的按钮，在基底上做一些渐变调整(简单调整叠加的渐变颜色)，可以发现感觉有点出。我们可以简单的整理一些小规则→在原来的上亮下暗的渐变基础上，插入明显的亮暗渐变段(对比度强)，相互交替出现(或者两个暗的部分和一个亮的部分)，那么就可以很容易的做出一个有金属光泽的渐变。(注意:这里所有的演示都是用Sketch3做的，因为Sketch3渐变的制作引擎性能确实不如Photoshop，用Photoshop的话纹理会更好。)

注1:不同的渐变段(位置、明暗度)也可以产生不同的效果。下图更懒。只有一个亮的部分配一个暗的部分。

注2:由于Sketch3和Photoshop后面处理渐变的方式不同，如果在Photoshop中用同模式的渐变制作，可以产生下图所示的效果(此处颜色略深)。可以发现，按钮上方的渐变过渡相当自然，不像Sketch3中制作时偶尔会出现的突兀线光源，更糟糕的是，整个按钮有时候因为显色性不好，看起来像是马赛克。还是那句话，因为Photoshop除了渐变叠加和图层处理中的基本阴影调整之外，还有相当多的元素可以使用(内晕、外晕、伪影斜面浮雕)。如果你想让一个大师作品，不要怀疑！请爱用Adobe系列软件。如果你想做一个目前看起来有点厉害的东西，可以懒一点，不要那么努力，继续一起用Sketch3吧。

细节调整

仔细观察本章前面的金属照片，会发现金属质感中有一个不可或缺的细节——发际线图案！！！正是这个纹身让这一切看起来如此强大。在Sketch3中，我们可以通过在原始按钮上堆叠许多线条的方式来实现→

接下来将叠加在顶部的所有线段展开，配合高斯模糊，做出发际线效果→

文本调整

在最后一步中，我还加强了凹面(深色内阴影)和底部反射(白色反射阴影)的效果，以匹配金属的强烈对比纹理。金属质感的纽扣表面诞生了。

边框

接下来，你可以尝试使用同样的金属光泽梯度和边界按钮的概念。一般来说制作理念就是第一步-第四步的步骤，以及如何与背景融合，如何做出金属凹陷的效果等一些细节。将在下面的文章中留下来与大家分享。

注1:同样的效果，加色后可以组合成不同的用途，比如底部的绿色进度(血量)栏？！

注2:同样的概念可以直接应用到不同的形状上，做出不同的效果:比如→下面左图，我加宽了亮部的间隔，调整了圆角的边缘。现在看起来像水管；在第二张图中，我从上到下添加了渐变边缘，还调整了圆角边缘，很容易变成矩形按钮。

旋钮

金属旋钮的制作稍微复杂一点。如果你想在完成下一个案例后了解其他制作案例或者技术，只需要谷歌“金属旋钮UI”就可以找到坑坑洼洼的案例分享。Freepik也可以很容易的下载到PSD/AI文件中作为练习的参考。欢迎有兴趣的伙伴看看各路大神做的旋钮，然后回来指导小弟。在这里，我带你来说说我业余时间练的这个金属旋钮是怎么做的。

光泽制作

想必大家应该已经发现了→我们可以用Angular Radient来制作金属旋钮的金属光泽:

做纽扣的时候有一个制作金属光泽的原理，对比度强(亮度调节)的明暗部分交替变化。注意:如果您今天正在制作彩色按钮，您也可以在调整亮度的同时对色度进行微调。欢迎你阅读中上章节的教学，了解更多如何应对这种情况。

利用这个原理，我们可以尝试拉出下面的渐变→

渐变轴(#969495，# efef，#878586，# efef，#999798，# efef，#969495)

从上图基本可以发现...事实上，明亮的部分/黑暗的部分是不断切换的。如果您是初学者，建议将它们之间的距离变化保持在与前一个数字(15–20%)接近等距的状态。唯一要记住的是渐变轴的头尾颜色应该是一样的，否则你会做一个非常...神奇的效果。

你可能会想这够不够金属旋钮用。邓愣了！！！！其实光是第一步的渐变，底部简单的阴影就能做出下面的效果→

步骤1

如果感觉好像不够强，如果有点雷霆万钧，可以开始尝试在明暗部之间插入几个暗部进行调整。基本上只要选色正确(银金属突然冒出一个金色等等。)，对比强烈，你的作品应该能保持良好的金属光泽。

(说到这，相信你也发现，明暗交替不是铁律，而是初学者一开始就可以使用的小技巧。实际生产是基于你(老板)的需求效应)→

当我们到了这里，我们的基质就完成了。

上层生产

复制一张步骤1制作的承印物，去除原阴影后稍微缩小；然后，愉快地旋转，转到一个好天气、好地方、和谐的角度，再加一点薄影(1–2px)做出下面的效果→虽然第二步的一切听起来都很美好合理XD，但是你有没有注意到因为底层也有金属光泽，所以上下两层其实挺协调的，就像一个有点厚度的金属旋钮！！

细节调整

做发丝！！！因为是圆形旋钮，所以我们用了很多边缘为浅灰色的未填充圆(#E1E1E1)来覆盖原来的旋钮→

然后高斯模糊也用来模拟发际线的效果→

步骤4加旋钮指示器

至今旋钮的出现已经告一段落！最后一步可以根据个人喜好决定加不加，要看是不是做一些比例尺，圆形正方形，三角形，用什么颜色，只要不要过分夸张，效果其实还是挺好的(因为旋钮的底座是中间颜色的灰色和白色，不管加其他成分的时候搭配什么颜色，都不会产生太过冲突的视觉感受)！在本演示中，我们制作了一个绿色旋钮指示器:首先，在旋钮上方制作一个绿色圆圈(#7DD96F)。接下来，使用与制作按钮文字相同的概念，在圆的顶部制作带有内阴影的凹面效果，在底部添加高光阴影进行底部反射(阴影的颜色为白色，透明度根据所需的反射程度进行调整)。邓愣了！！如果你能在这里做到，给它一轮掌声。

同样的渐变也可以用于前面练习的按钮！

一般来说，金属旋钮的生产是步骤1-步骤4的四个步骤。接下来，你要运用你的想象力和细节的程度来调整和优化下一步的工作。请记住，(下一个)部分中的每个生产概念都可以应用于不同的图标、不同的界面或您想要的任何相关设计，永远不要局限于金属旋钮的主题。前阵子用这三篇文章提到的概念，花了一些时间，挤出了一套实际应用价值不大的Control Set，供大家参考。(注意:右下角最后一个想不出画什么...所以参考Ahmed Gamel的作品，我做了一个反弹来弥补右下角空的不足)

四.结论

默默的从开始写文章到现在也过了约一个月的时间，真心期许各位读者在花费宝贵时间看完这一系列的文章之后也能开始运用渐层制作出不同的作品，更鼓励各位愿意把你们厉害的成品分享出来共同讨论。小弟期待能够从你们那边学到更多的东西！！最后的最后，若是小弟的文章很幸遇的帮助您对于渐层的运用，接口的设计有了基础的认识，而您期许能够有更进一步的成长，建议您可以开始在Pinterest、Dribbble，Behance这些聚集了世界上顶尖设计师的平台上面找寻您命中注定（目标）的设计大神，藉由观察、分析以及临摹练习去帮助自己建立观念，以及培养工具的熟悉程度（设计论坛、设计师、摄影师（一））。接下来应该还会有一些渐层应用的短篇文章来分享常常使用到的小撇步，一些简报制作的小习惯，工作过程中有任何的突发相关事件（像是名片基础）如果老板同意的话也会跟大家分享；然后就要→回到自己原本的目标，写些文章来降低工程/设计甚至与PM的合作困境xDD，敬请期待啦。