如何设计出漂亮的渐变颜色？
前言：渐变是无处不的在。设计师们倾向于在现代简约的UI中使用渐变，包括背景、按钮、开关、卡片、甚至是阴影！你所有能够想到的地方都有渐变的存在，这些渐变已经横扫了数码产品和Dribbble/Behance这样的设计平台。
所以，什么是渐变呢？
渐变是从一种颜色过渡到另一种颜色，是由很多种颜色组成的混合（一个渐变可以有无限多的阴影）。我们可以在很多方面使用渐变。例如在背景和前景的渐变元素，可以做出微妙或者是极端大胆的颜色组合。
因为渐变是通用的，我们可以用他们来传达独特的设计或者品牌理念。在这篇文章中，给大家分享一些实用的技巧，让你的渐变设计脱颖而出。
一、找到正确的灵感
首先，我们需要找到渐变的源头。
渐变最好的灵感来源就是大自然。因此，最开始的设计过程就是花时间去观察现实世界。寻找风景、环境或者植物的照片作为你的颜色来源，并且和你的项目建立起联系。
二、创造自己的调色板
使用“颜色选择器”找到合适的部分。从一张照片/图片中选择2-3种醒目的原色来构建你的调色板。
建议一开始只选择少量的几种颜色。因为RNG颜色模型只有三个变量，这意味着你可以混合红（R）、绿（G）、蓝（B）来构建出任何的渐变。RGB的值通常是在0-255之间。
此外，为了使得构建出来的渐变看起来比较柔和平滑，在构建调色板的时候考虑值的变化在50-150之间。
三、混合调色板的颜色
在选好的调色板上创建一个新的图层，并通过添加“背景模糊”的效果来实现平滑的过渡。
创建一个新的图层，用获得的模糊的路径重新创建线性渐变。
四、在线性渐变中使用径向渐变以增加深度
径向渐变用于模拟光照，而光照并不总是线性的。你可以将径向渐变应用到预先设计好的线性渐变上，并配置光源的方向，使它看起来效果更好。
五、使用有意义的渐变方向
在有需要的地方使用渐变方向。例如，使用发射光源以突出特定的元素，通过将文本放置在彩色区域使其更具可读性，或者通过具有平滑的渐变路径的UI引导用户。
六、增加颗粒噪点使其具有冲击力
在Figma或Sketch中，可以在渐变上添加一层纹理，使其看起来有复古风。在网页端你可以通过在渐变上放置图片来应用颗粒噪点效果。
在这里你可以学到如何用CSS添加噪点。注意：你通常只需要0.1%到0.5%的噪点图像透明度。
七、将渐变和抽象形状结合起来
为了使你的渐变效果更酷炫，甚至可以使用抽象的半透明形状。使用“蒙版”工具在渐变层之外或之上嵌套斑点或波浪形状。
01
现在已打开PS，当前的是主界面。
比如，现在，为下图中的黑色长方形设置，从灰色到黑色的渐变设置。
02
我们先点下左侧的工具箱的渐变工具。
然后，再在界面上方的编辑渐变的按钮点下。显示出渐变编辑器
03
可以看到，在色标下方的选项是呈灰色状态的。
我们用鼠标点下左边下方第一个色标。如下图箭头所指的位置。
这时，颜色这里被激活了，显示出颜色的选项。
04
然后，鼠标点下颜色右侧的框框，弹出的颜色拾色器中设置灰色
这时，渐变编辑器里的第一个色标这里显示为灰色了。然后，鼠标点住如下图箭头所指的黑色点。点住向右边移动，可以按自己的设计，调节灰色的长度。这个长度表示，在图形中灰色点的比例。
05
到达第二个色标时，遇到阻碍，这时，鼠标改为点住第二个色标，向右边移。
鼠标再点住另一个色标，向右边移，把黑色颜色向右边移动。色标向右边移，黑色完成占满右边。
06
设置好后，在右上角点击确定。从灰色到黑色的渐变颜色即设置好。
如果是从一种颜色到另一种颜色，再到另一种颜色的渐变又如何设置呢。
也是在渐变编辑器这里设置。
比如，现在要从白色到灰色，再到黑色的渐变。
07
鼠标也是点左边下方第一个色标，也在颜色这里点下，弹出拾色器，设置白色点确定，这时，白色即显示出来了。
08
然后，在要设置灰色的位置，点下，即添加一个色标，再如上操作设置灰色。最后的效果如下。
设置好渐变后再点确定，回到主界面，鼠标在画布的图形上点拉，拉出渐变的效果。
看来大家对于渐变色还是有很多不懂的地方，所以今天，我打算系统的说一说PPT中的渐变色。
虽然在PPT中渐变的实现特别简单，但是说句不好听的，很多人做的渐变并不好看，甚至可以说巨丑。
在PPT中，要想设置渐变色，只需要打开设置形状格式的属性栏就可以，操作也很简单，选中形状，然后右键设置形状格式，在右侧可以看到设置形状格式中的填充选项里就有一个渐变填充。
渐变色的设置主要通过三个变量的调整，分别是渐变类型，渐变方向还有渐变光圈。
渐变类型 主要有四种，分别是线性渐变、射性渐变、矩形渐变、路径渐变。
线性渐变：从起点到终点颜色从内到外进行圆形渐变。
射线渐变：从起点到终点颜色进行顺序渐变，也就是一条直线。
这是在PPT中使用较广的两种渐变类型，除此之外，还有矩形渐变和路径渐变。
渐变方向 和渐变角度其实是一个意思，这个在操作上很简单，直接调整角度的数值就可以了。
渐变光圈 是渐变最重要的部分，它包含渐变的颜色、位置、透明度和亮度。我们可以在渐变光圈上增加和减少颜色的控点，以此来影响渐变的效果。
如果我们想要制作出高品质的渐变色，那么在颜色的选择上就要非常谨慎了，最好选取相近的颜色，或者同一色系的颜色。
通过这种方法，我们调制出的配色给人的感觉就非常舒服，赏心悦目。
下面几个案例，一个是蓝色单色系的渐变，一个是紫色单色系的渐变，还有一个是绿色和黄色的相近色渐变。
蒙版我们都知道，就是半透明的色块，那么渐变蒙版就很好理解了，就是半透明的渐变色。
这种半透明的渐变色近两年在网页设计中非常火，你经常可以看到。
我们可以看到，上面这个渐变蒙版总共有两层，最小面是图片，在上面的是一个半透明的渐变色块。
这是一个蓝色到紫色的相近色渐变，只是我们在渐变光圈下调整了颜色的透明度，这样我们就可以若隐若现的看到背景的图片。
当我们的图片过亮或者图片尺寸太小不能过铺满屏幕时，这个时候我们就可以利用渐变来处理图片。
比如下面这个案例，我们看到图片的亮度太高，而且尺寸与整个版面不符，如果直接输入文字的话，图片对于文字的干扰很大。
这个时候，我们可以给图片添加一半透明渐变蒙版，其中光圈的左侧一端设置透明度为100%，右侧一端不设置透明度，然后我们在中间再加入一个光圈，也不布置透明度。
通过设置之后，我们就可以得到下图的效果了。
如果你对色彩的感知度很低，不知道用什么颜色好，这个时候就需要多看一些好的配色方案。
关于渐变色的使用，我推荐两个网站，一个是WebGradients，一个是uigradients。这两个网站都收录了非常多的渐变色案例，在你没有灵感的时候，可以去看看。
以上就是利兄最近研究的内容，希望你喜欢。
BY 利兄
（全文完）
渐变的背景能够帮助用户更好地感知和理解设计。当眼睛感知到屏幕上的色调和明暗变化的时候，会有意识地注意到特定的色彩和视觉焦点。
2、在文本字体中营造焦点
渐变可以在背景中使用，而前景元素同样可以使用渐变。如果将高饱和度的渐变色彩叠加在字体当中，能够创造出颇为抓人眼球的设计感。不过值得注意的是，在色彩的选取上，一定要有意识地控制对比度，这样才能保证可读性。
3、渐变色叠加能够让平淡的图片更加出彩
色彩是有情绪的，将色彩叠加到图片上，能够赋予图片以情感和情绪。渐变色叠加在图片上的时候，即使图片本身的素质和形式感并不强，色彩的加持同样能够让整个场景更加时尚。
4、引导视线
好的渐变设计，能够起到引导视线的作用。绝大多数的用户在获取信息的时候，都是从上到下，从左到右来看的，我们常说的F式的阅读方式就是这样。
5、令人难忘的色彩搭配
虽然渐变越来越流行，但是每种不同的配色方案所带来的体验其实是截然不同的。一些杀手级的配色非常值得长期使用，品牌化的配色也可以让用户更容易记住品牌的视觉特征。
6、强化品牌
如果你的品牌配色适合制作成渐变的时候，一定要试试。在自己的网站和平面设计作品中使用这样的渐变色彩，能够更好地同用户产生联系。
7、渐变还是非常容易创建的
创建渐变色还是非常简单的，只需要选取2到3种不同的颜色，然后选择色彩变化的形状，色彩的起始的位置，以及叠加的位置。
