为网络创建简单的插图

我坐下来,播放了一些音乐,使灯光变暗,打开笔记本电脑。我有很多事要做。为了传唤灵感,我开始画画涂鸦艺术当我看到彗星形状时,从屏幕的一角到另一角的线条。 “嗯,”我的脑子慢慢地开始,“如果我连接它们并添加一些行星怎么办?”

几个小时后,我得到了我最受欢迎的Dribbble插图。我仍然记不清它是怎么发生的,但经过一些挖掘我的大脑后,我发现了我创造插图的内在算法 - 不只是这个,而是我做过的任何其他。这很有趣,我有点期待它更复杂。那好吧…

插画风格

在开始制作插图之前,我确保了解它的目的和它将要生存的背景。是应用程序内,网站还是壁纸?它上面会有文字,它是否会位于繁忙的环境中?它应该象征一个行动,还是只是在那里发出一定的氛围?

如果插图应该传达一个清晰的想法,或象征一个特定的对象或动作,那么我将选择一个简单的执行,其中所有的注意力都集中在重要的部分。但是,如果我特意选择“静音”背景图,我会选择类似图案的方法,或者确保没有明显的引人注目的元素,以尽量减少人们过度解释它的可能性。对于应用内插图,我尽量保持驯服,以避免使功能上的注意力脱离。

美学规则

我的大脑喜欢创造所有这些奇怪的规则。他们就像我无法忍受的荒谬挑战:如果我只使用圆圈吸引人类怎么办?如果我只用一种颜色来说明日落怎么办?

几何规则,逻辑进展,对称性。将严格的数学规则应用于艺术是非常有吸引力的。感觉就像逆向工程魔术;它剥离了艺术中的神秘元素,所以它几乎就像揭示它背后的科学。

复杂的插图;简单的调色板

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette

具有复杂细节水平的城市插图,与简单的类似调色板相结合
+$(Image credit: Nina Geometrieva)

事实证明,在选择颜色方面,我的大脑相当懒散,所以它选择了两种一般类型的调色板:一种用于复杂的插图;另一个是简单的。

复杂的插图具有高粒度级别,具有许多形状/对象和许多细节。这些通常是模式般的,并没有明确的焦点。我的大脑已经决定这些类型的插图适用于单色或类似的调色板。或者,从广义上讲 - 颜色更少,颜色对比度更低。

所有这些归结为视觉平衡;如果形状是疯狂的,颜色应该是平淡无奇的。一个例外是我希望强调一个否则不会突出的特定对象。这可以通过使用高对比度的颜色来实现,而其他一切都保持单色和温顺。完美的视觉平衡介于过度刺激(大声的颜色,复杂的形状,很多细节,一切都在你的脸上尖叫)和刺激不足(最小的,无聊的,没有新的或有趣的不良类型)。

单色调色板

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements

当有元素的视觉进展或重复时,类似或单色调色板有效地工作
+$(Image credit: Nina Geometrieva)

单色调色板由一种颜色的色调或色调组成。当颜色逐渐与白色混合时会出现色调;当它逐渐与黑色混合时会发生阴影。我一直对单色调色板的一个问题是,由于混合颜色与白色或黑色的性质,色调和阴影逐渐失去活力,两者都具有零百分比饱和度。

为了避免这种逐渐消失,我使用一个简单的作弊:除了添加白色或黑色,我逐渐改变色调。这本质上是一个微妙的类似调色板,而不是单色调色板。例如,如果我想创建红色单色色调,我会将色调转换为橙色。如果我想制作红色的单色色调,我会将色调转向洋红色,因为它会变暗。如果我想得到更浅的蓝色,我会转向青色;对于深蓝色调,我向另一个方向移动,朝向紫色。

这导致调色板仍然感觉有点单色,但更活跃,肯定有踢。自从我发现这个以来,我再也没有创造出真正的单色调色板。

简单的插图;复杂的调色板

复杂度较低的插图通常具有明确的焦点和对象层次结构。形状往往更直接,因此颜色选择可能更加狂野。我正在考虑任何类型的高对比色 - 互补色,三元色,四色色 - 只要它是一个引人注目,刺激的调色板。

我所描述的复杂和简单的插图之间有一个完整的世界。但是我的大脑并不过分关注所有这些光谱 - 它更喜欢将任何插图标记为复杂或简单。

高对比度调色板并不像在色轮上拾取相反颜色那么简单。色轮是一个很好的起点,但绝不是过程的终点。例如,当选择一个好的橙色和蓝色组合时,我会注意一些事项:感知亮度,以及强调颜色如何与默认颜色一起使用。

感知亮度

如果两种颜色具有相同的感知亮度,那么大脑发现难以区分它们之间的边界 - 因此看图像感觉不舒服。除非颜色永远不应该相互接触,否则值得确保它们没有相同的感知亮度。

哦,如果你好奇我为什么使用'感知'这个词,请查看Helmholtz-Kohlrausch效果,它表明具有相同亮度的颜色可以被认为具有不同的值。例如,由于橙色的感知亮度高于蓝色,因此通过使用浅橙色和深蓝色很容易进一步增加两种颜色之间的差异。

重音与默认颜色

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents

Zopim主页的插图。蓝色色调占主导地位,橙色提供口音
+$(Image credit: Nina Geometrieva)

如果每种颜色的使用差异很大,我会相应地调整颜色值。勇敢的强调颜色和默认颜色安全是我的首选方法。

在上面的橙蓝示例中,我使用蓝色作为平静颜色来填充更大的区域,用于背景和大元素,以及一些用于按钮,图标和其他小元素的野橙色。在插图的背景下,我将蓝色色调作为基础,再次将橙色作为重点 - 可能通过强调有趣的细节或重要元素。

视觉平衡检查

无论您遵循上述指南最终得到什么样的插图,请确保退后一步,检查所有这些内容是否合理。插图中的规则有很多例外,因此不可能列出所有组合,从而产生了惊人的插图。总是尝试一些看起来很有趣的东西,当有什么让你惊喜的时候,确保你理解它,这样你就可以不断提高自己的直觉。

这篇文章最初出现在网络杂志第286期;在这里买

相关文章



翻译字数超限