热门的渐变系列教程终于更新了！这一系列文章的强大之处在于，大部分初学者都认为配色靠灵感，而且都是科学系统的总结阐述，让你的配色不再是随机选取，案例丰富易懂。今天的主题是教你画出带有渐变颜色的高格调背景球体，强烈推荐！

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

作者Angela Tsou推特:@ mini _ cu高玉玺的脸书:www.facebook.com

部分(中间)将主要介绍以下三个主题:

基础复习/练习球型（放射状）渐层变化金属渐层变化（延至下一篇xD）

强烈建议没有读过第一章的人，先建立起循序渐进应用的基础知识，有了第一章的基础后，下一章(下一章)一定会给你带来更多的帮助。小哥哥，我会尽力为你提供更多有用的好东西。

第一，基础复习/练习

前面说→最后一部分，有读者不知道1/5音程是什么，那么如何从测色仪打开来参考？不不，1/5的间隔其实是一种感觉→小弟在选色的时候会在脑子里把颜色检测器切成25块，如下图:

以上图为例，当选择渐变颜色变化时，会在下面1/5的红色帧间隔中选择:

蛤(不一句话)，一定只有这么少吧？其实设计上没必要做什么，只要你酷一点，然后业主买单，但是小弟建议你最多保持2/5的间隔。如果再进一步调整→你一定已经开始发现色差在增大，甚至因为灰度的影响，渐变变脏了。我们后面会看到这样的例子。

练习一

首先我们从一个结合相似颜色和颜色渐变变化的练习开始→这个练习只是一个比较常见的波浪渐变图案(广泛应用于UI/视觉设计):不同的渐变块配合透明度的变化和正确的颜色选择，做出一个干净(前一部分的重点)看似强大(各部分的重点)的图像视觉。

练习1

选择一种颜色

选择颜色是制作干净渐变最重要的一步。下图显示了我在(练习1)中使用的五种渐变组合。每个组合都有微调色调，让颜色变化更细致→记得尽量不要用和我一样的颜色做练习！

(1)-(5)都适用于上一篇文章中提到的类似颜色渐变的变化→高亮度颜色渐变。复习“保证明度和彩度的调整保持在比色器高1/5以内”的基本规则。我们先来看看组(1)中的渐变颜色，看看是否完全符合这个调整区间。在稍微调整色度/明度的情况下，色调左右移动，最后选择与蓝色(#7BD2F8)相当接近的青色(#72E8CE)作为渐变开始/结束点:

让我们来看看组(3)中的渐变颜色。根本不调整色相，我把色度的变化向左调整了大概1/5的间隔作为这个组的渐变颜色选择。

在这一点上，许多人可能会想，我们为什么要限制选择的范围。色度差多点不好吗？个人觉得没有什么绝对的设计。让我们简单看看如果色度提高会发生什么:

其实除了底部最大色度差的匹配，其他两个都在可以接受的范围内，在我看来甚至可以说是相当不错的选择，看你对以上要求的使用→但是，因为这个练习的目标是结合一个干净/透明且不与其他颜色冲突的渐变图像，所以我还是会在这里保证色度/明度差在颜色检测器的1/5范围内，避免颜色重叠时灰度继续。

步子

选色完成后，会一个一个叠加！

使用(2)的颜色制作透明度为30%的第一层。

用(3)的颜色做第二层，透明度40%。

用(4)的颜色做第三层，透明度40%。

使用(5)的颜色制作透明度为40%的第四层。

用(1)的颜色做第五层，透明度30%。这一层的渐变角度之所以差别很大，是因为我想尽量多做融合感，非常建议各位伙伴尽量用不同的渐变角度来玩，看效果。

要做到这一点，每个人都应该弄清楚颜色看起来是如何融合在一起的，又是如何分不清的。好像和上面的例子不一样→这最后一步是很重要的一步。为了让重叠的相似颜色渐变更加明显，我在每个渐变块上添加了内部阴影，以第一层和第二层的应用为例:

没有内心的阴影

带着内心阴影

虽然变化不大，但并不能发现有内阴影的版本其实更有立体感，同时也能打开与同色系渐变块的差距。内阴影的颜色选择其实很简单，用的是同样的招数→选择自己的颜色在右下角(1/5以内)稍微加深，作为自己使用的内阴影颜色。

附上两个使用相同原理上色的Demo→所以不要根据他们上色，自己配一个。

邓愣了！！练习1就完成了。

练习2

接下来我们来看看如何制定上一篇文章的学习目标。

注意:这只会带你到右边的练习。参考第(1)章后，请用你的想象力产生左边的部分。

第一步。选择颜色

选色是做干净渐变最重要的一步←复制粘贴。同色选择模式(下)将色度和明度保持在颜色检测器的一定区间内进行调整，利用这样的限制有效抑制了大幅度调整色相的不协调性，使图层呈现出强烈的渐变感作为背景。

第二步。制作底部底座

使用浅顶灰底的渐变，配合底部阴影，很容易做出立体弧形底的底座。(如果忘记请复习前一章)

小贴士。大多数人使用阴影的时候，请不要傻傻的选择一个有透明度的黑色。这样的阴影一般会！非常！脏！除非想刻意强调阴影的对比效果，尽量选择背景较暗的颜色(向右下方移动，移动)作为阴影颜色。(ex。在制作纸质雕塑的三维模型时，可以使用纯黑色或深灰色作为阴影，以强调阴影)。

第三步。制作凹面区域

利用上灰下浅的渐变，配合内阴影，可以很容易的做出凹陷区域。(如果忘记请复习前一章)

小贴士。小细节补充→一般在制作下沉块的时候，我一般会在块底加一个白色阴影(fuzzy =0)，让整体更加细致。

第四步。点亮并填充文本

在下图红色包围的圆圈中，我使用了白色→灰色和黑色的渐变，并使用了叠加混色模式(叠加混色模式会使图层的白色部分突出背景色，而图层的深色部分添加深色背景色)，在透明的效果下，使光线从右上方照射。最后搭配符合整体色调的Helvetica Neue-Thin文字(#36D9E7)(如果我在这部作品中使用新的细体或者康华少女体，我一定会打败你)。

邓愣了！！练习2结束。

第二，球形(径向)渐变

相信很多像我这样的新手，每次再看到这么多渐变类型都会有些疑惑。上一篇文章已经完成了很多基本的应用方法，相信大家不要那么害怕各种渐变类型。然后让我们开始看看球面(径向)渐变能做什么。

一般来说，小弟，我最常用的是径向渐变来处理三种情况→补光，球体，光晕。之前小弟设计的图标，可以算是用了径向渐变xD的概念。

然后我们将依次讲述它们的应用场景:

补光

补光的手法通常应用于真实感较强的物体→这里我们用上一篇文章末尾的蛋黄Demo进行教学。

第一步。底部底座

相信以你到现在的练习能力，应该很容易做出这样一个图标，由纯色(#FEA740)和基本白色→灰色渐变基底组成。！如果不行，请回去复习前面的内容。

第二步。本质

一切的本质都在这神奇的一步。让我们来看看相对于荷包蛋，想象中的光源应该是什么样的:

从上图可以看出，荷包蛋的另一端(右侧)应该比左侧(光源直接照射)要暗。利用径向梯度→光源聚焦点(最亮点)发出的模拟光，然后逐渐变暗并向外发散的效果，可以做出最重要的补光特性。

第三步。增强视觉效果

添加外部阴影(#D3CBB7透明度:50%)，在这里选择更接近蛋黄颜色的颜色作为阴影→可以认为是蛋黄映射在蛋白质上的反射结合阴影产生的颜色。

第四步。突出显示光源点

最后→为了突出光源的焦点，我加了一个橙白色的块(左)来增强高斯模糊的光源效果，结果是对的。

球

第一种

球面可以说是径向梯度最常见的应用→简单如下图:

温馨提示:为了让这里的球体效果更强→可以加一点内阴影(稍微提亮一点模拟底层产生的反射)突出球体本身的立体效果。(os。为什么看起来都是一样的XD)

类型2

让我们前进一点，开始尝试看到不同的球感→首先拉出背景颜色渐变，如下图:

接下来，我们尝试使用径向渐变(#F8EFDD，中心透明度100% →最外层透明度0%)来填充左上角的光线:

最后，我们使用高斯模糊来解决边界过于清晰的问题:

在这一点上，相信读者也应该发现→径向梯度其实非常适合模拟“弧度”光源。毕竟自然界中几乎没有只是垂直的线性梯度，大多数物体都有弧度或形状变化。

光晕

第一种

举个最简单的例子→有一个太阳在照耀，它的光会随着距离变得越来越弱...xD？所以在画一个简单的有散射光的太阳时，理论上要用径向梯度拉出以下效果。(渐变的开始和结束用#FFCF0A填充，但是头部的透明度是80%，尾部的透明度是0% →从而模拟光线向外发散。)

同样的原理也可用于以下示例:

示例中的背景模拟了夕阳从左上角落入图片的感觉:

加上上一章用的渐变效果和上面提到的渐变练习，要达到这张图的效果应该不会太难。

注意:这张图最难的其实是细节的调整，而不是渐变的应用。

△效应练习

类型2

放射状渐变其实挺适合做UI背景的，可以根据下面的颜色选择，轻松尝试拉出层次感丰富的渐变变化。(看到这句话我应该觉得很可笑。每次看文章最怕看到的就是这种和不说话一样的解释xD。)

既然很烦，当然还是要说明上图的颜色怎么选。我在这里做的其实很简单。在橙紫色区间，根据色相表顺序，从左到右选择任意颜色，在区间的1/5内调整亮度/色度，就可以匹配Demo的和谐不冲突的渐变效果。

使用径向梯度→

背景效果制作→

类型3

在上一篇我弟弟复制的图标时钟中，背景中也使用了径向渐变来达到对焦效果。当然，和原著还是有差距的。

补充1:(上)、(中)、(下)渐变配色的文章，比较适合需要设计师姐妹们的眼睛崇拜的工程师(勉强同意)。至于效果，请告诉我效果如何(重要！！)，是否能有效提升你在他们心目中的地位。

预览:金属渐变/更多渐变应用

莫名其妙的是，这篇文章的篇幅已经够长了，我们就把金属色的层次留给下一篇，继续给大家介绍。如果你喜欢这一系列文章，请帮忙分享/推荐，给弟弟一点鼓励。

金属渐变的练习结束后，也可以开始制作如下图所示的效果→

在这一系列的“致非设计师”之后，我弟弟有望为演示字体懒人包写一篇(很多朋友都在问xD)，然后他会开始为设计师写一些“致非工程师”的文章，希望能帮助刚进入职场的UI设计师更快地与工程师合作。感兴趣的合作伙伴欢迎交朋友和/或继续关注:。

作者：Samuel