渐变质感技法：渐变配色之对比用色(上)「含视频」

点击"远行设"添加关注，最新设计内容随时掌握🤔🤔🤔

前言

渐变这一视觉趋势，在最近几年里可谓如日中天。很多平平淡淡的设计，将平涂改为渐变，立刻就能增加醒目感。

• 虽说渐变是一个有效的元素，但为什么我们的渐变，还是和大神们的渐变有区别？

• 我们应该怎样做出渐变的质感？

• 为什么说用色才是渐变的精髓？

今天我们就来和大家聊聊渐变这个话题，深入了解我们似乎以为自己懂了的渐变，我们将和大家一起分析渐变配色中，利用色彩不同特性之间的对比来用色，以及一些简单的操作小技巧，比如快速生成一个色轮，以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过度，我们的视觉会随着这个渐变的过度而产生一种流动感，而这种流动感全凭在色彩上发生的种种变化。是的，我们的重点来了，就是这个变化，需要我们今天深入去加以了解。

谈到变化，我们自然会想到这个变化的范围。如果拿出我们的色轮来看，我们就会发现色轮上的变化范围有大有小，当两个色彩距离较近时，我们可以说他们是邻近色，这时难以发现他们的区别，直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180，在色轮上呈相对，我们可以说这时的色彩变化是最大的，于是也就产生了最强烈的对比。很多撞色的情况，也是在这种对比下发生。我们通常会把这对颜色称为互补色。

当然，实际的情况比这要稍微复杂一点，我们一起来看下。

色相对比

刚刚大家可以发现，这个色轮上的色彩的一个特点是什么？只有色相的变化。没错，我们平时也已经习惯了，只用色相来区分色彩。所以，今天要讲的第一个对比，也就是色相的对比。

色相的对比，在色轮上就能很直观的表现。例如红色和黄色这一段，截取过来以后，就变为了红-黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远，渐变色的对比也就越大，互补色之间的对比达到了极值，比如红-蓝渐变的对比就大过红-黄渐变。

我们这里首先教给大家一个快速生成色轮的小技巧，这个技巧不需要利用网上的图片或工具。现做现用，很方便。

小技巧:快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩，这里我们运用一个渐变叠加

渐变叠加的叠加方式为角度渐变，渐变色这里选用「色谱」，没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮，在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高，饱和度居中的渐变，也像这样的糖果色，因此这时大家可以利用调整图层【色相/饱和度】来增加明度或降低饱和度。

高能提醒：别被参数骗了

可能很容易被初学者忽略的是，我们在PS里的色彩（HSB）这个参数里看下，一般来说H-色相，S-饱和度，B-明度，这里的情况和我们在色彩学里学到的HSB有点小差异。

色相这里没有问题，但是饱和度和明度，尤其是饱和度上面，大家可以看到一般来说饱和度最低时，色彩是慢慢失去色度，也就是呈现灰色，但是在软件里把S这个值调到最小呈现出是白色，还有另一个属性:明度，最大的明度，应该是白色，在软件里的B这个参数调到最高时，并不是白色。

在PS里，只有把色彩放到【色相/饱和度】这个工具里，才会看到和我们书里的概念表现一致的特性。

工具不同，渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的，最重要是体现在颜色的过度上，如果是用渐变工具选择了左边绿色，右边紫色的渐变色，在中间出现的过度色就表现出一种发灰的色彩，如果所选用的两端的颜色是在色环上距离有定的角度，就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下，确实是需要这样过度的，这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰，这时需要用到色环，在色环上根据所需要的渐变过度来选取不同的色彩配置。

可以看出来，尽管没有饱和度、明度的变化，色彩仍然是彼此之间所表现的特质都很独特，所以基本上利用色相对比，就能配出非常优秀的渐变作品。

一般来说，渐变本身就足够吸引人，有渐变参与的情况下，我个人的建议是色彩不要太多，尽量少元素，整体风格倾向极简，这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过度，中间的这个红色和蓝色的渐变就是用渐变工具做出来的，两边的渐变都是取用了色环上的渐变过度，可以看到色彩上两边的渐变中的色相更多，更饱满，饱和度和明度都没有丧失，而中间的渐变在红蓝在之间的过度出现了饱和度较低的紫灰色。

视频一：https://v.qq.com/txp/iframe/player.html?vid=t1341znoen1&width=500&height=375&auto=0

视频二：https://v.qq.com/txp/iframe/player.html?vid=m1341z3cxvf&width=500&height=375&auto=0

色温对比

色温是什么？色温更多是色彩对人的主观的心理因素的影响。虽说是主观，但是大家的整体倾向还是比较类同。比如蓝色清凉，红色温暖。

所以，把色环上的色彩根据主观温度进行一个划分，就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量，但是却在色彩中发挥不小的作用。

获得平衡感

渐变中加入色温这个属性，这个游戏就会更好玩。一般来说，为了达到配色平衡，我们的配色中需要冷暖进行平衡，这里的平衡并非是1：1的严格配比，而是彼此渗透，双方根据位置、面积、形状等等元素的共同参与，共同实现一个版面的平衡。当然，这不是件容易的事，但这是我们配色中的方向之一。

回到我们的色温对比，要体现在渐变中，就是要有冷色和暖色的参与。一般来说，在比较简单的过渡性双色渐变里，一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看，左边两个配色就是冷暖的过度，而右边的配色相对来说偏暖，当然相比之下，洋红色还是比橙色会更偏冷一些。

绿色和紫色：冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比，尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色，在和蓝色搭配的时候，由于蓝色是绝对的冷色，所以绿色就显得表现出暖色的特质，而绿色如果和橙色搭配，橙色又是绝对的暖色，所以绿色又表现出冷色的特性。紫色也是同样的情况，和蓝色搭配它偏向暖色，而和橙色搭配时它又是偏冷的。

用起来其实也很简单，如果你的配色中发现整体感觉偏冷，就增加暖色。如果太暖，那就增加冷色调。如果整体的配色看不出哪里不对劲，但总觉得色彩有点奇怪，就先看看色温是不是实现了平衡。

视频三：

https://v.qq.com/txp/iframe/player.html?vid=e1341hj8qhd&width=500&height=375&auto=0

（未完结）

作者：Ray

本文由Ray授权发布于远行设。未经许可，禁止转载。

往期精彩✨✨

点击“阅读原文”更多内容等着你✨✨✨