设计技巧之自在式设计

【译者的话】 我们常常说“不要被本人的眼睛所诈骗”,其实并不是眼睛诈骗了我们,而是我们未能仔细察看而已。在本文中,让我们忘掉那些道貌岸然的标尺、网格线及各种严谨的对齐方式,仅凭本人的眼睛及直觉来完成一次自

【译者的话】我们常常说“不要被本人的眼睛所诈骗”,其实并不是眼睛诈骗了我们,而是我们未能仔细察看而已。在本文中,让我们忘掉那些道貌岸然的标尺、网格线及各种严谨的对齐方式,仅凭本人的眼睛及直觉来完成一次自在式的设计。学会察看,是设计师必需掌握的一项根本技艺。

原文出处:www.bamagazine.com

去掉一切约束,顺着你的直觉去设计

图中是一团体在浇灌地球,对读者来说,它是线条,纹理和风趣的外形的集合,去掉横平竖直的网格,上面我们看看如何跟着你的直觉去设计。

看过街头艺术家画画吗,十分有意思,这涂涂,那弄弄,一张白纸上,一幅画就出来了。他们没有用就任何辅佐的机械的东西,没有标尺,没有刻度,但是出来的效果却十分美丽,很流利;一个最好的设计也应该是这样。

我们也来设计一个页面,不是参照网格有标尺,而是参照下面这幅图来设计,它的线条,颜色,外形,比例,和元素之间的关系决议了我们设计中的颜色,字体,大小和板式。

先试试你能从从图里看出什么,能答复这些成绩吗:

地球和人物是一样高的吗?
花盆和人物是一样宽的吗?
树是花盆的几倍宽?
图中还有什么东西和花盆一样宽?

停止一次视觉大检阅:

每幅图形都有线条,外形,纹理,和颜色这些元素组成,它们也引导我们的设计,第一步是要理清楚,究竟有那些次要的元素,先从比拟大的开端...

发现焦点

一幅好的图形都有一个焦点,这次例子有两个,一个是直观的,另一个是潜在的。

直观的焦点普通是图中最大的,最明晰,最生动的物体,比方这幅图中的地球。

图中三个次要局部――地球,花盆,人物――构成了一个三角形,三角形的中心也是个视觉上的焦点,就是美元符号的局部。

你能否留意到这个潜在的焦点同时也是虚线构成的空间三角形的中心,这也使潜在的焦点再次失掉了强化。

物体和空间

这幅图里的各个物体元素和空间都是不时在反复呈现……

密切关系

艺术上的视关系有时比标尺来得更精确,假如两个物体看起来具有某种关系,那意味着现实上也是如此,用你的眼睛去测量,而不是用尺子:

网格

这幅图的各个元素构成了一个网格状:

当你在察看大元素的同时,异样不能疏忽那些小元素。要特别留意边缘及比照。详细到这张图中,有一些边缘是十分明晰的,如人物的头部及腿部。而南美局部则是经过颜色比照从而惹起我们的留意力的。暗影局部则分明给人一种分量感。作为一名设计师,当我们在察看一幅图画时,可以花一些工夫去学习如何察看。这种察看的进程其实就是一种眼睛训练的进程,很快的,你会发现,本人总会比他人看得更多更深。

外形和纹理

一定要留意线条的特点,比方是直的还是弯的,是严密还是稀疏,还有线条走向等等要素。

留意这些构成角度的外形。这些呈转角位的线条构成了一种视觉的活动感。

这些出现角度的元素,无论是远看还是近观都能发现它们的踪影!

这些呈角度的外形在图案中构成了一种反复的纹理。留意图中无处不在的角度元素。

选择颜色

上面为这幅图配一个背风光,可以从图中选取适宜的颜色。颜色在设计中占有很重要的位置,最方便也是最适宜的颜色就在图形自身,首先将图形的分辨率降低,这个可以用photoshop中的马赛克(Mosaic)滤镜完成,普通有64色就可以,32色或是16色就更好了,降低分辨率,颜色就少了,添加分辨率,颜色就更丰厚了。

颜色归类

用吸管工具从上述处置过的图片停止取色,将所获得的色块经过色相及色值来归类。

可以看到,从图中取的颜色次要是地球的蓝色和绿色,花盆的褐色还有人物的灰色,同时取出不同深浅水平的颜色,然后依照色相和色值排布,来挑选适宜的背风光。这样做虽然要花点工夫,但还是很值得的,对精确的选取颜色有很大的协助,同时再选取一些占面积比拟少的颜色,比方黄色和兰紫色,用来构成比照的效果。

把每种颜色都试试

每种颜色都可以试一试,看上去每个颜色都比拟协调啊,为什么,呵呵,这些颜色原本就是图形里的嘛!

暖色比拟委婉,自然,热情,合适环保的主题,留意在褐色的比照下地球更现突出了。

相反冷色更直接,冷静,有点间隔感,假如用冷色背景,地球自身就不太分明了,地球外面的橙色大陆反而突出出来。

选择字体

接上去我们需求选择一种和图形协调分歧的字体。文字某种意义上也是图形。选择字体有很多种办法,你手头上能够有很多字体,不需求怎样权衡,能够你脑子里曾经有了某种概念,比方应该是正式的,商业的,或是学术的;也能够你有本人最喜欢的字体,每次使用效果都不错。不论那种状况,一定要记住,文字同时也是一种图案,文字的线条有直有弯,有锯齿状的或是颗粒状的,当你在设计中参加文字的时分,它们会和原有的元素发生交互影响,能够是好的效果也能够变得更坏。在这个例子里,现有的图形的特性决议了文字的选择,要选取一种和图形类似的文字,当然还要思索文字自身的功用,比方要美丽,易读而且要合适复印。如今的图形是什么样的呢?它有很丰厚的纹理,很多细节,还有树叶的图案是斑驳的,和衬线字体有几分类似,让我们看看三个不同类型字体效果怎样样。

要从三个间隔看一下文字,近、中、远都试试,你会有不同的发现。

Glypha字体充溢户外气味

Glypha的字母都有一个呈正轨感的美丽衬线。其字体作风整洁洁净。出现一种硬边感及反复构成的构造。这种字体无论是用于标题还是注释效果一样出色。而且它显得细弱醒目,衬线边缘也给人一种自然及户外的粗暴气味,与我们所要设计的环保主题十分接近。Glypha字体异样容易阅读。但这种字体有什么成绩?只要一个:它与我们的图形看起来完全不同。

把文字倒过去看一下效果,是个比拟保险的办法,一倒过去,文字就显示出了斑斑点点的风趣效果,正常状况下可看不到。

Myriad字体构造十分明晰:

假如你运用文字的目的就是为了让人看得更明晰,那能够没有哪一种字体比Myriad字体更胜任了。这种字体十分合适用于标题及冗长的文字中。Myriad字体构造开阔,其外形没有任何多余的细节,只保存字母自身的根本特点,就算在分辨率不高的状况下依然可以让人容易阅读。Myriad字体字体出现一种轻巧、清爽及洁净的表面,异样合适我们以大自然为主题的设计,但它所存在的成绩依然是:与我们现有的图片看起来没有什么类似之处。

在比照线条和边缘外形的同时还要留意纹理,比方图中的叶子就是不规则的一片片的,颜色是斑驳的。

Galliard Roman字体充溢丰厚的纹理感

Galliard属于一种罗马字体,其细节处出现一种凿刻感,并有锋利的角度感及略带些朴实的衬线设计。其粗细清楚的字母线条使到Galliard字体十分容易阅读,虽然其过多的细节处置有时让人感到有点厌倦。字母比例适中,其字体家族具有多种粗细的线条,另外,这种字体看起来象树叶!正是我们的最终选择。

版式
板式是指这些线条、外形、空间、颜色、纹理的组织方式,我们用下面这幅画设计一个规范的小册子,看看板式是如何设计的。

首先思索的是图形,究竟应该把它放在哪儿,占多大的中央,这里关键是思索视觉联络。图中的地球和花盆有很强的对称关系,所以放在页面正地方是最适宜的,页面中心是最能强化它们关系的地位。

记住,我们说得是视觉上的中心,不是用标尺量出来的中心点,让图形视觉上的边缘在页面的边白处。

我们便于察看,我们不会显示上述折叠线。

设定标题

设计原则之一就是要好好应用手头上的东西,而不是随意把很多不相关的东西堆砌在一同。如今我们可以从地球的图案里提取一些元从来修饰标题。

选定文字的大小,颜色和纹理

在图形上方复杂设置一行标题很复杂,不过这看起来比拟平淡,和图形不太协调。相反,假如我们用比拟粗的字体,把文字堆叠起来,再配合地球上选取的颜色,这样就树立了某种视觉上的联络。假如把文字放在地球旁边,这种联络就更强了。

添加图片和文字

但你在页面添加更多的东西时,同时也添加了页面的复杂度,更难坚持视觉上的一致,需求细心权衡添加的地位,在边上,在空白处,或是在其他元素之间,效果都是不一样的。

规整的空间,自然的设计

设计的一个矛盾在于自然界的东西都是不规则的,但是文字和页面都是四方规整的。有时分太规矩了反而不是我们想要的效果,当然想把页面设计的不那么规矩又不影响阅读是挺难的。不过方法总是有的,在这个例子里图形和文字都没有硬性对齐,文字是顺着图形的边缘变化来换行的,留意在各个元素之间不要留下太显眼的空白。

右边的文字段落,两边并没有对齐,交织的边缘很自然。演讲者的名字用加粗的字体,颜色也是从地球的颜色中挑选出来的,很醒目,同时整个段落有了图画的纹理,可以说统筹了方式和功用。

沿页面对齐

页面自身也是设计中的一个可以使用的元素,这里将次要的阐明文字和细节图案靠右对齐,可以很自然的树立了一个视觉上的联络。

花盆的尺寸

假如你花些工夫来好好察看一下画面,你就会发现更多原来没有留意的东西,比方,花盆的尺寸在图形里就像个模数,正好是不同元素之间空白的尺寸,比方花盆和地球之间的空白,文字和页面边缘之间的空白等等。这样页面初看上去排布的比拟随意,但确实十分调和一致。还有就是右上角的文字段落的边缘和标题文字的边缘外形是相反的,对称的排布在地球两边,很契合人们的直觉。

(点击上图看大图)

逐步减小尺寸

最初,文字右对齐,而且逐步减少,在页面的右下方完毕,同时也有很多细节的图案,而且文字块的右边缘也是顺着图形变化的,全体十分调和。

本文所用颜色数值:

最新案例