
“渐变是引人注目的鲜艳色彩。”
这句话在1995年可能是真实的,回想当年网页设计师想在他们的网站上增加某个独特的元素时,使用渐变来扩展他们的色彩方案。还记得90年代,我们在学校用“Word-art”来让演讲看起来更专业,实际上,以现在的标准,这是错误的!但你知道吗?也许,流行是个环,可能我们正朝着正确的方向前进。
如今,渐变被用于大胆的表现和引导用户情感,帮助用户联想到产品或某个想法。在2017年,整个世界都对从一种色彩向另一种色彩的过渡感兴趣,除非有人像2016年在他们的品牌重塑中那样玩坏了这种趋势,否则这一趋势不会很快停止,像Instagram这样的规模的产品也陷入这个潮流中。但是......提到渐变,不能不说Spotify,他在播放列表中将渐变与情感融为一体。

这一切是如何开始的?
我们必须回到2014年,那时正流行扁平设计。谷歌也推出了“Material design”设计风格,Windows也推出了“Metro”。与当时风靡一时的写实风(skeuomorphic)设计相比,它看起来很酷且令人耳目一新。这样的设计在低分辨率移动设备显得特别干净,但是,唉,我们受到各种颜色的限制,同时随着高分辨率移动设备的出现,而且人们的审美也不尽相同。
你能说出20多种平面颜色吗?
我敢打赌你不能。扁平风的颜色是有限的。
渐变使设计师可以通过大胆混合颜色创建感觉新颖的东西。一种在你混合之前并不存在的颜色,一种看起来独特,现代和令人耳目一新的颜色。你会发现自然界到处都有梯度,每一片水果,你看到的每一片叶子都有一个渐变,从浅色到阴影中的阴影。当你远离地平线时,天空始终有一个从不饱和色调到更饱和色彩的渐变。渐变看起来是明显的平铺方式,从2015年的渐变开始,在2017年带来了全面的异国情调和饱和色调的深度感。
那么2018年渐变的复苏有什么大惊小怪呢?
2018年的渐变
它已经被 Behance 设计社区称为“渐变2.0”。你必须走出你的舒适区。现在是时候做出冒险的决定了,勇敢地抛弃你用来敬畏客户的蓝色。现在每个人都开始大胆使用各种颜色,看看Dropbox的新品牌,就可以在不重新设计标志的情况下引入大量颜色打造酷炫的新品牌视觉。

不像去年随处可见那些吸引眼球的渐变。这次我们不会看到彩虹般的世界。渐变不会随意的用在前景上,在背景上也会看到渐变色的使用。它们最终将成为一个自然的设计元素,为作品带来更多的深度和维度。随着网站和设计师尝试在设计中融入更多真实感,沉浸感和三维元素,虚拟和增强现实技术可能会推动这一趋势。
这里有几个来自业界的证实这种信念的例子 -
Pantone色彩研究预测全球色彩趋势,并建议色彩公司用它们来创建自己的品牌标识。今年他们选择了神秘的紫色作为一年的颜色。

另一个例子是在与医学和健康相关的文章的插图中使用梯度作为背景。这里使用渐变来创建一个伴随深度的情绪。

如果你还不确定,请看下面的插图。使用渐变增加了深度,增加了城市的夜晚魅力。

在我们继续前面的最后一个例子。看看sphynx用他们选择颜色和使用大胆的渐变色做出的表述。

关于创建渐变的小Tips
通过使用两种或更多种色调来创建渐变梯度,以在它们之间逐渐淡化颜色偏移来绘制一个元素。当我开始学习如何创建渐变时,我会分享我下我的拾色技巧和想法。
不要随意选择颜色
你不会想让你的用户觉得你选择的颜色是随机的,是没有任何想法使用的。你可以使用渐变来传达变化,引导用户的注视。选择一种明亮的颜色,让观众看到它,选择一种暗色过渡,可以创造形状感,或者是一种沉闷的色彩,以减少视觉重量。但在选择颜色时请记住一些事项。
从色轮选色。选择彼此接近的颜色相比于位于相反侧的颜色或甚至接近互补的颜色,可保证颜色过渡更和谐。原因是:他们抵消了彼此的亮度,这与在颜料颜色中混合两种互补色调时发生的情况相同,并最终获得了中性色。参见下面的图1.2 - 在从明亮的绿色色调到明亮的紫色色调的过渡期间,你会看到深色不饱和的绿色。

更简单的方法是选择颜色轮上彼此更接近的颜色(图2.2)。但你的品牌或营销团队被色轮局限,那怎么样?
3点梯度渐变
在原始两种颜色之间大约一半的位置在渐变中添加第三个点。现在用色彩更美观的色彩(最好是色轮中两个光圈之间的颜色)替换渐变过渡上的暗色(图2.3)。你会看到更平滑的渐变。另外,当你知道如何避免沉闷的灰色意味着你有更多的颜色可选。

另一个提示,没有多少人注意到这一点。当您创建从纯色到透明色的渐变时,也就是淡入淡出效果。确保两个站点具有相同的颜色,如图3.1中所示,不同的颜色意味着在中点处,50%不透明度渐变时出现色彩过渡,这将导致视觉效果没有那么流畅。

举一反三,可以在渐变中创建可以多添加的停止位置,创建更多控制点(图像4.2),或者如果您有Adobe illustrator™全力以赴,并尝试使用网格工具来更好地控制颜色甚至方向,从而打造更多可能性(图4.3)。

仍然对从哪里开始感到困惑?
最佳的开始地点将是自然。环视四周。大自然拥有最好的例子,你必须相信数以百万计的艺术家和设计师,他们对于周围的一切都非常着迷。颜色无处不在,只要你有发现美的眼睛。


当我创意枯竭时,我总是回归大自然。当我到山上旅行时,我拍摄了许多照片,并用它们制作我自己的自然色彩调色板。我的同事设计师最近写了同样的东西 - 为什么每个设计时都需要发现美。
这里有一些插图是我用自然界的灵感创作出来的,

在最近的一个,我使用渐变的背景色打造聚焦效果。

我希望这篇文章能够帮助你学习有关渐变的新内容,以及如何使用它们来创建更好的插图。我坚信2018年渐变会再次流行,并且2018年的渐变会更有趣。
这里有一些工具可以帮助您了解有关渐变的更多信息,
Paletton (我最爱的渐变模版生成器)
Webgradients (大量的渐变)
Grabient (更多渐变)
CoolHue (更多渐变)
ColorSpace (值得推荐的色彩模版和渐变色彩生成器)
Wave Gradient Generator (这个能帮助你理解多个色彩渐变是怎么生成的)
网友评论