渐变色的进阶教程，教学指南别错过！

Samuel：本渐变系列教程包括上、中、下三篇文章。上一篇介绍了渐变的基本概念和线性渐变的应用。中文通过实战巩固了上一篇文章的知识，学习了放射性渐变。今天的下一篇文章是渐变色的高级教程。除了复习前两篇文章的基础外，它还将学习角度渐变和金属渐变。整个教程是一步一步的，零基础也可以很容易地学习。由于本教程是一个系列，没有阅读中文的学生在阅读时可能会感到困难，建议先阅读以下两篇文章：第一篇文章：《全面系统的渐变色自学指南》：《如何用渐变色绘制高风格的背景》 本文主要介绍了以下三个主题：基础复习/练习角度的逐步变化（AngularGradient）本教学的完成目标如下图所示，金属逐层变化，Sketch3制作了本文的所有示例。第一，前言建议我没有读过(上)、(中)篇教学，但是对于渐层还是有一些模糊的伙伴，可以先用(上)篇教学来建立渐层应用的基本概念；理解线性渐层（LinearGradient）、渐层应用高彩度和低彩度。(中)文章的教学将使用一些简单的实践练习来帮助你复习/理解(上)文章中提到的基本理论，并介绍辐射渐进（RadialGradient）应用场景和一些实际细节需要注意。接下来的（下面）文章将结合前两篇文章的内容制作一些更先进的应用程序。我希望这一系列的分享能帮助您设计简报、UI设计或印刷系列，否则各种看似强大（关键）的设计都能有所帮助。一、基础复习/练习。首先，我们将复习(上)文章中使用的基础渐进层，并进一步匹配一些光影细节，制作一个常见的方形按钮(两种类型)。首先，基本复习/练习。首先，我们将复习（最后）文章中使用的基本渐进层，并进一步匹配一些光影细节，以制作一个常见的方形按钮（两种类型）。练习1使用最基本的深灰色、灰色和白色颜色来复习常见的渐进应用程序。事实上，相同的概念可以很容易地应用于不同颜色的渐进层，以做出自己的变化（见章节末尾）。按钮Step1设置工作区域的背景色为浅灰色(#E6E6E6)。拉出按钮形状(方形)后，根据上亮(#E5E4E4)下暗(#C6C6)的渐层制作基底雏形。在Step2的基础下加阴影（Shadow）做出基本的立体感，阴影的强度(亮度)和深度（x,y的位移值)可以根据你想要达到的立体感来调整，但是…加太多会有点奇怪。Step3利用内阴影（Innershadow）在上面做一个白色的反射边（非常重要），这个反射边是因为当光照射到凸起的三维时，光会聚焦在接触点上，然后在接触平面上自然地传播光源，产生明亮和黑暗的效果。加上边线的Step4（Border）为了突出按钮的边框部分，考虑到光源的关系，我们还使用浅层(#B6B6)深层(#7F7F7F)来制作边框。(相信你应该在这里找到了按钮的雏形。)除了原来的阴影，Step5希望能进一步凸显阴影的立体效果，但是！！如果将阴影直接添加到原始层上，则阴影与模糊相匹配（Blur）之后效果会向四面八方发散(崩溃)，然后整个按钮底部会脏得乱七八糟。如果你不相信邪恶，你可以调整它。所以在这里，我稍微缩小原来的基底，稍微向下移动(增加y轴的位置)，搭配(#5F5F5F5F)的颜色和高斯模糊（GaussianBlur）将图层放置在基座图层下方，以产生阴影。Step6加上一个看似很厉害的勾钩(#B3B3B3)。还记得Step7吗？只需在钩钩上加一个内阴影(#36363650%)，然后在下面加一个白色阴影(#FFFFF50%)，做出底部反射。登愣！！完成一般状态的按钮。练习二、按下按钮Step1设置工作区域的背景为浅灰色(#E6E6E6)，按上黑(#B1B1B1)下亮（#DCDCDC）凹陷的基底雏形是由渐层制成的。在Step2的基础下加入白色阴影（Shadow）为了达到反射效果，阴影的强度/深度/位移也可以根据你想要达到的立体感进行调整。Step3也加了边线（Border）突出按钮的边框效果，在这里使用边线也可以增强一些按压的视觉感。由于光源的关系使用的是上深(#848484)下浅(#8C8C8C)渐层，上面的颜色可以尽量调整到和Step4添加的内阴影一样，这样边线就不会太突兀。(注:与凸起的一般状态按钮相比，按下的按钮可以直接照射到按钮底部，产生反射，因为没有物体障碍。)Step4做Step3，相信你会发现按下的感觉好像不够明显。下一个内阴影可以帮助改善这种情况→在基底上方加入强烈的内阴影(#66666)，突出按钮下压的效果。Step5加上一个看似很厉害的勾钩，因为是凹面平面的关系，在这里选择较深的背景色(#949494)。Step6用内阴影(#363636，50%透明度)勾勾勾，产生凹陷效果，再加上普通阴影（#FFFFFF，50%透明度)做出底部反射。成就达成！！Step7的原理也可以应用于圆形、矩形或各种圆角矩形，让你玩，附上一些不同颜色的成品供您参考。二、角度渐层（AngularGradient）读完(上)篇教学中介绍的线性渐进（LinearGradient）以及(中)教学介绍的放射性渐进（RadialGradient）之后，你应该对如何使用渐层有一个相当大的概念(有点)。接下来我们来看看角度。（AngularGradient）可以用来做什么！在以往的使用经验中，无论是金属旋钮、状态条、icon设计还是神奇的立体边缘，都有机会从角度逐渐出现，应用范围相当广泛，充满变化。然后..让我们从一个icon开始；下图中的icon是一个强大的设计师akaneleee，在嫁给RD的UI设计师中介绍的一个案例:《PS新手教程:台湾省设计师教你快速制作圆形渐变图标》注:Follow从刚踏入UI设计领域就开始嫁给RD的UI设计师部落格的文章，然后每天继续等待新文章的发表。真心推荐对UI设计感兴趣的合作伙伴花点时间阅读！！！除了上图的icon，角度渐层也可以用来制作一些UI背景或视觉海报→让我们先用上面的案例来了解角度渐层是怎么回事？角度渐层（AngularGradient）案例1：背景制作Step1简单地在工作区域拉出一个圆形，使用1/5检色器的颜色选择原则选择您想要的渐进颜色，并在角度逐渐填充圆形。下图应该能清楚地了解角度渐层是怎么回事，简单地说，就是让渐层绕着你设定的图形转xd。Step2选择您想要的屏幕尺寸制作矩形，并将矩形设置为Step1的圆形屏蔽，产生如下图所示的效果→Step3适度给饼图层高斯模糊（GaussianBlur），让角度层的连接不要太尖锐(这一步取决于你的喜好来决定是否加入)。最后，Step4加上NoiseFill制作一些颗粒磨砂感。(注:NoiseFill常用于制作纸质质感)Step1-Step4按顺序完成后，成品的设置应如下图所示→完成效果如下：角度逐层（AngularGradient）案例二：作为工程师和半个设计师，ICON不会因为同时拥有1.5个技能而获得1.5倍的工资，但是我们有很大的优势 — 也就是说，当你写for循环时，你可以在没有感觉的情况下画画。当你画画时，你可以回来写for循环。然后我们来试试一个弟弟写Code之前没有感觉，只好打开Sketch3做的半个...icon？然后我们来试试一个弟弟写Code之前没有感觉，只好打开Sketch3做的半个...icon？上面的icon可以分为三个步骤，即基底、彩色区域和中间不知名的平面(原谅我想不出该叫什么)。其实步骤1和步骤3的制作跟上了前面的练习，中篇教学已经介绍过很多次了，这里就不复述了！我们只是进一步解释步骤2的角度层。步骤2的制作其实挺容易的。让我们从下图的角度逐层分配→在渐层轴的起点，我选择了亮度最高、颜色不太低的红色(#FF8B8B）作为角度逐层的起点，亮度高的颜色搭配浅色背景和基底，可以让整体视觉更加舒适干净。下一步是一个超级简单的步骤。我们首先每20%制作一个分隔点，共制作五个区域，如下图所示：然后从第二个分段点调整颜色到第五个分段点→调整颜色的方法也很简单。你唯一需要移动的就是色相轴。按照色相轴的顺序对应渐层段的顺序，就可以轻松在icon中做出舒适的渐层。正如本章前面提到的，角度是逐层的（AngularGradient）事实上，它的应用非常广泛。在这里，我们将帮助您对角度渐进的应用有一个初步的了解。基于这些背景知识，您还可以使用更多的技能来创建新事物。让我们来看看金属渐层吧！在制作金属渐层之前，让我们先看一张金属材料的照片→从照片中我们可以发现，由于金属本身的光泽，以及金属平面上光的折射和反射相对复杂的因素，金属本身的颜色变化对比强烈，光源的分布没有固定的方向。但在制作上，其实还是有一些简单的原则可以遵循的(看看照片中锅底的光影就是旋钮的正面，XD)。本章让我们使用UI组件中常见的金属旋钮和金属按钮进行一些练习。按钮（Button）当我们制作一般按钮时，我们最多可以在渐进层上使用2–三个渐层段(简单来说:凸的是上浅下深，凹的是上深下浅)，但是！！！注意，刚才提到金属光泽的两个关键点是对比度强，光影不一定。利用这两个原则，我们开始看看如何将上面的普通按钮转化为金属质感的按钮！注:对于对金属圆/长/旋钮感兴趣的朋友，建议阅读本教学后在谷歌中搜索metalWebbutton，MetalButtonIcon,MetalroundButton等关键词，你会看到满坑满谷的金属按钮，包括金属按钮和金属按钮...金属按钮为您提供后续练习的依据和参考。Step1光泽制作让我们沿着练习中制作的按钮，在基底上做一些渐进的调整(简单调整覆盖的渐进颜色)，感觉好像有点出来了。我们可以简单地整理出一些小规则→基于原本亮下暗的渐层中间，插入明显的亮部和暗部渐层段(强烈对比)，交替出现(或两个暗部和一个亮部)，很容易做出金属光泽的渐层。(注:这里所有的演示都是Sketch3制作的，因为Sketch3渐层制作引擎的效率真的不如Photoshop。如果你使用Photoshop，质地会更好。xd)注1：不同的渐层段(位置、明暗程度)也能产生不同的效果哦，下图只有一个明亮的部分和一个暗的部分比较懒。注2：由于Sketch3和Photoshop背后处理渐层的方式不同，如果在Photoshop中以相同模式的渐层制作，可以产生如下图所示的效果(这里颜色稍加深)，可以发现按钮上渐层的过渡是相当自然的，不像在Sketch3中制作时偶尔会有突兀的线光源，更糟糕的是，有时候整个按钮似乎都在马赛克上，因为颜色Render不好。然后，因为Photoshop除了逐层覆盖和基本阴影调整外，还可以使用相当多的元素(内光晕、外光晕、神器斜角浮雕)。如果你想做大师级的作品，不要怀疑！请喜欢使用Adobe系列软件。如果你想制作目前看起来有点强大的作品，你可以懒惰，不要那么努力，让我们继续使用Sketch3。请喜欢使用Adobe系列软件。如果你想制作目前看起来有点强大的作品，并且可以懒惰而不那么困难，让我们继续使用Sketch3。调整Step2的细节，仔细观察章节前面的金属材料照片，你会发现金属纹理中有一个不可或缺的细节 — 发丝纹！！！正是这条线让这一切看起来都很厉害。在Sketch3中，我们可以用一种方式在原来的按钮上迭代许多线来制作→接下来，将所有迭在上面的线段展开，与高斯模糊相匹配（GaussianBlur）做出发丝纹的效果→Step3文本调整在最后一步，我也加强了文字上的凹陷(深色内阴影)和底部反射(白色反射阴影)的效果，结合金属的强烈对比。具有金属纹理的按钮表面诞生了。一个具有金属纹理的按钮表面诞生了。Step4边框可以尝试使用相同的金属光泽渐进概念和边线（Border）将边框添加到您的按钮上。一般的制作概念是Step1 — 在Step4的步骤中，还有一些细杰的部分，比如如何与背景融合，如何产生金属凹陷的效果等等，留在后面的文章中与大家分享。注1：同样的效果也可以在添加颜色后结合不同的用途，如底部的绿色进度（血量）