你可曾见过街头艺术家作画?很有意思!只见他们左喷右绘,一幅佳作便跃然布上。不用尺规工具,没有框架缚束,更不照参考说明;但最后的作品却如此完美,整个过程如此流畅。
最佳的设计正像这样。
请看如下的版面设计,这次我们不用网格而使用左边所示的图片作为视觉参考。图中的线条、形状、比例以及这些要素之间的关系支配着我们对字体、尺寸、色彩、版面以及其他一切设计要素的选择。
每幅图像都包含有线条、形状、纹理和色彩等,这些元素引导着你进行设计。我们首先要盘点一个视觉清单,让我们从大的元素开始。
但凡好图,必有焦点。而本图恰有两个——一个实焦点和一个虚焦点。
图像中的对象和空白通常都是重复出现的。
艺术的关联并非机械式,而是感性的。因此,如果各对象之间看起来十分接近,那他们就真的十分接近。你只需用目测来观察就好。
这个图像拥有一个天然形成的网格,更难得的是,它还是均匀的。图像元素如此重复的出现,以至于它们形成了整个网格!
在设计中要意识到线条的作用。注意,线条是直的还是弯的,接近或远离什么对象,在哪里改变方向等。
远(假想线)
接下来,要根据图像确定色调。
使用吸管工具从图像中提取色彩样本,然后根据色相与明度将样色进行排列。
你可以在图像中发现有几种主色彩。地球的蓝色与绿色,花盆的褐色,人物的灰色。从以上三个对象中由深到浅的像素块上分别取样颜色(如左图所示)将样色先按照色相,再按照明度整齐地排列(从深到浅)。请花时间仔细做好这项工作。你会发现它能极大地帮助你构思设计。再取样一些少数色——本例中是黄色与紫色,作为补色与对比色。不要使用接近色。
将图像放在每种样色上对比效果。你会发现选择的样色都能自动地与图像搭配,因为它们本来都存在于图像中。
接下来要选择和图片感觉类似的字体。选择字体有许多方法,鉴于你可能已经定好了风格,所以这里并没有固定的选择。也许你的脑海中已经浮现出字体的样式。比方说,正式的、商务的或者教学式的。也许你还想尝试一些新鲜有趣的个人风格。不管如何,请记住,字体和图像一样,也是图形化的。它的线条会蜿蜒屈伸,或急或缓。它也会有棱角和纹理。当你将字体添加到设计中的时候,其视觉特征就会与其余已存元素相互作用,提升或降低整体的美感。
在本文中,图片将影响我们对字体的选择。我们的目的是要使图像和字体的视觉属性相互匹配。另外,选择的字体也必须具有美观、易读、适合印刷。
本图遍布纹理:丰富且精细的画面上,树叶飞散飘逸,其形尖细,间隔均匀,事实上这和衬线字体的特征很像。
让我们对比三类常用字体,寻找它们的相似点。
在近、中、远三种距离上观察字体,你会发现每次看到的都不一样。许多字体观察的距离不同,其造成的视觉感受会有所不同。
想要全面地观察字体,一个可靠的方法就是将其翻转。这可以揭示段落文字的曲折起伏——总能被感觉到,却又通常被忽略。
说到干净清爽,恐怕再没有胜过Myriad字体的了。其笔画舒展形式简约,即便在最低的分辨率下,也能被清晰地辨认,特别适合做标题和文章引文。Myriad字体传达出轻快、清爽和干净之感,适用于绿色课题,但却不适合本图像。
当你比较字体的笔画和边缘的时候,也要注意轮廓形成的纹理。注意,树叶色彩斑驳,形状不规则并呈颗粒状。
线条、形状、空间、色彩和纹理一起相互作用,最后构成了版面的整体布局。现在,我们将通过设计一张标准规格(3)的版式作品来向你阐述如何进行布局。
平面设计的一条规则就是要着眼于眼前的事物,不能随意凭空构造。此处的标题配合了地球的视觉特征。
当你往页面上添加各种素材的同时,也使页面变得更加复杂。于是,想保持各素材的视觉一致性也变得越来越困难。注意版面素材的四周——边距、元素边缘以及各元素间的空隙。
纸张也是一个可以灵活利用的元素。如下图所示,主要的段落以及一些关键的细节与右页边缘对齐,建立起一种视觉的稳固性。
一张空白页上可能什么都没有,但这却是设计师将要面对的最重要的开始。伟大的设计从这里诞生。正是在这空白上,你构建出艺术的世界——决定页面规格、页面方向、设计空间、单页或对页。这些选择将会影响读者对页面的理解,影响它的触感,影响读者的阅读方式。最终,将影响到其设计的成功与否。
什么规格的页面有什么用?读者的视线向何处移动?空白区域的作用是什么?对于这些问题是你需要知道真正的答案,请待我慢慢详述。
为什么在影院看电影比在家看要爽?因为影院的屏幕很大!观众需要转动脑袋才能跟上影片角色风驰电掣的动作;而在家,我们一次就可以看完整个屏幕。屏幕的尺寸不同,并不会改变电影内容,却会影响我们的感觉。它在我们的视觉体验中扮演着重要的角色。
我们将图像尺寸与自身尺寸关联起来,正是人类自身主宰着我们如何看待事物。
观看一张信纸规格的印刷纸张时,在可视范围内,我们的视线大致聚焦在一片人头大小的区域内,在这片区域内的设计将被视为一个整体。而通俗小报的页面尺寸是信纸的两倍,简单浏览起来面积太大,要想看完内容我们必须移动视线,因此我们分区域来阅读它(它也必须被分区域设计)。
页面比例也会影响我们对页面的感性认识。一个长而窄的页面(轻盈的)与一个正方形的页面(厚重的)给人的感觉是不同的。千百年来,“黄金矩形”一直被认为具有最理想的比例,文艺复兴时期的数学家们将这个比例定义为1:1.618。古希腊怕台农神庙的外形就是一个黄金矩形。我们还可以在窗户、桌面和照片(3×5,4×6等)以及人物雕像中找到黄金比例。一般来讲,最赏心悦目的矩形,其长是宽的两倍。
黄金矩形
页面可以纵向折叠,也可以横向折叠;可以对折、三折、四折或者不对称折叠。折叠纸张有平展纸张所不具有的厚重感和坚韧感。而且,平展纸张上的内容一目了然,折叠纸张却能逐步揭示其内容,对设计师来说,这是一个诱人的设计点。
所谓页面方向就是指页面的摆放方式。长而窄的页面更能引人入胜,因为读者能将视线集中起来。宽的页面使人视线跳跃,这意味着读者要从页面左边看到右边,希望能一次将整张页面尽收眼底。
页边距能起到吸引读者并加强二者互动的重要作用。页边距作为印刷物的框架,就像是一个容器。若太窄,就会失去对页面内容的控制,框架的作用被遏制,视线趋于分散(页面越大,影响越大);若太宽,页面内容又会显得无关紧要。
那么页边到底该多宽呢?按常规:页边占页面面积50%即可。比如,一张大小为9×12英寸的页面,四周的页边距宽1½英寸。这便能使读者的视线很好地集中在页面内容上。
连接辅助线与对角线的交点,画出水平线(红线)。
有光就有色。我们以为各个色彩是相互独立的,比如蓝色是蓝色,而红色是红色。但其实一种色彩总是存在于包含其余色彩的环境里,并不会单独出现。颜色并没有好坏之分,就像是组成乐谱的音符,每种颜色都是曲子的一部分,合在一起构成动听或不动听的旋律。色轮就是用于理解色彩间的关联的工具(也叫做色相环)。
色轮由12种基本颜色组成。首先是红、黄、蓝三原色;三原色两两混合得到间色;间色再两两混合得到三级色。
众所周知,一种颜色和与之毗邻的颜色具有共性,而后者又与其相邻色具有共性,围绕色轮一周的色彩都是如此。色彩的共性是各种颜色建立关联的基础。
色彩也有明暗,以明度值来衡量。为了展示明度,色轮内外还存在更多的环:外部较大的两个环由深色组成,内部较小的两个环由浅色组成。
下面的示意图阐述了6种基本的颜色关系。每一种关系都可以衍生出无数的色彩组合。
无论哪种组合,除了纯色以外,还可以包含深色和浅色。最后的色彩组合可以全部是深色,也可以全部是浅色,或者任意组合。
运用色彩的数量很重要。色彩数量的多少,关系到色调是冷是暖,是深是浅,是安静还是喧闹。
少见
流行
刺目
分离
现在来做一个测试
训练你的眼力:如下的四张封面,每张都使用了一种基本的颜色关系(单色,近似色,补色,分裂补色,原色或间色),你能分辨出来吗?提示:看大块而不是小块的颜色,忽略黑色和白色。
再没有别的视觉要素能比色彩对读者造成更多的影响了。色彩引人注目,营造氛围,传递信息。但不同情况下该如何选用色彩呢?关键在于,色彩间是互相关联的。颜色并非存于真空,而总是与其他颜色共同出现。正因如此,你才能根据页面上任意组成元素的颜色设计出色彩协调的平面作品。
每张照片本身就具有色调。我们首先要找到这个色调并对其进行整理。放大照片,你看到的颜色之多将会使你惊讶无比。
现在使用吸管工具将色彩提取出来。顺序是由大块色(看到最多的颜色)到小块色。为形成对比,每块颜色都要从像素中分别提取出深、中、浅三色。
首先处理大块的色彩,即随意一瞥就可看到的颜色:女模特的肤色、发色以及衣服颜色。然后再处理小块色,如她眼睛、嘴唇、头发高光以及柔和阴影的颜色。这张照片分为亮部和暗部,虽然不明显,但请一定注意。取样颜色时应逐步进行,完成一个部分再到另一部分。整理所得色彩,先依照色相将所有颜色排列好,再按照明度(由浅到深)将单个颜色排列好,去掉近似色。最后得到的规律定会令你惊喜。
将照片放在每种样色上对比,结果令人满意,不是吗?有趣的是,照这种方法搭配的效果总是不错,因为选用的这些色彩本就存在于照片中。
下一步就是添加更多色彩。选择提取出的任一颜色,并将其在色轮上定位,因为色轮能展示出各种颜色间的关系。
选择照片上的任一色彩,比如蓝色,然后在色轮上找到与它大致相同的颜色。我们将此颜色称为基色。大家知道,基色与照片已能相互搭配,现在我们要做的就是寻找其他可与基色协调的色彩。记住,如果还要使用文字或其他图形(这是很典型的情况),需要同时添加深色和浅色,以便各元素形成对比。
现在我们根据基色,便可以创建出一个与版面协调的色调范围。不同明度的色彩可混合搭配,比如,中蓝色可与蓝绿色及深紫色搭配。
现在开始设计版面了。首先决定使用哪种色调。如何选择呢?关键是看内容。根据设计意图来权衡各种色调,问问自己,哪种色调最能迎合文章首页列出的内容呢?
如果你已选择好插图,就差给它配上合适的字体,那现在究竟该如何选择呢?
大家都认为文字是供阅读的信息,但其实它也属于图形。将字母ABC看做图形,它们就像被人类赋予了音调与含义的直线、尖角和曲线。
这就是字体具有如此动人表现力的原因。当字母传达信息的同时,选择的不同字体还决定了它们是表现出趣味性、严肃性还是重要性等。
选择正确的字体是关键所在。从视觉上看,字体和图形是一类事物,必须协调好它们的视觉属性。在本章中,我们将向你具体演示。
如下图所示,这棵树是HARRY&SONS公司最喜欢的插图。他们想用这插图配上合适的字体,完成名片的设计。
为使字体和图形协调,我们首先要找出它们在视觉属性上的共同点。首先分析图形的比例,形状、线条和纹理。我们看图的时候倾向于仅仅辨别图形是什么(这是一棵树),而不会真正分析图形的规律,因此以下的练习在最初的时候可能很艰难,犹如大海捞针一般。不过,当你仔细观察,你就会看到更多的东西。
字体种类如此繁多,我们必须从中进行筛选。先从最重要的元素—比例和形状——开始,排除掉与图形风格差别最大的字体。
根据对图形——这棵树的视觉分析,容易看出窄身字、宽体字、弧线字体都与树木四方的比例和对称的形状不搭配。块状字体比例近于四方,但设计过于造作,同样不合适。
本例第一步排除掉不协调的字体样式,剩下比例标准、字形方正笔直的字体待选。
有趣的是,全部字体中有一半都比例标准,字形方正笔直,且所有标准字体也都符合这个要求,看来,我们必须进行进一步筛选。
经过前两步的筛选,合适字体的范围已经小了很多。如今仅剩下具有标准比例的罗马字族。那么其中哪一种更好呢?本来本例关键看的是线条与纹理,不过现在我们得进一步观察。
所有字体样式中,标准比例的罗马字族是最古老也最常见的。罗马字族可分为6种主要类别,每一种还有下属的子类别。罗马字体的比例恰当,笔画粗细搭配得宜,读者阅读起来既轻松又愉快,因此,图书、报纸和杂志上多数文字的字体都选用它。
前面几步,我们都关注于字体的通用性,现在则要转到细节上了。我们应该从不同距离来观察字体,因为不同的距离字体明显具有迥异的特征。
观察下图的字体,注意短小的线条和形状,特别是字母与字母间的相互关系,它们构成了纹理——而这棵树也充满了纹理!你能看出两者的纹理是均匀的还是无规则的?相似的或是有差异的?
Bauer Bodoni字体
Bauer Bodoni属于现代衬线类直式字体,以粗细对比强烈和一致重复的笔画为特征,可形成独特的纹理。美观的现代字族广泛应用于时尚及金融行业,但它们尖锐的棱角和精准的几何外形显得呆板而千篇一律,这与边缘柔和、姿态生动的树木相去甚远。
你能从变幻多姿的流云中看出各种形状吗?其实只需要训练眼力就可以做到。一旦你能看出各种样式和趋势,尤其是从版面空白处,那你的眼力将大大提高。本例中Gargoyle字体与图形最搭配。
Gargoyle Medium古体
Gargoyle字体充满人文气息,它虽具有古体字的比例,却拥有手写体的外观,不像用工具制作的。Gargoyle字体多变而不规则,笔画间的粗细对比很柔和。各字母圆润的棱角与独特的衬线亦大不相同。线条与形状的配合产生了与树木相似的温暖、多变和主动感。这正是我们所要的字体。
与字体一样,图像对版面也应该产生影响。页面选用竖版,如同图片中的树木般矗立,其上图文左右对称,边缘不规则。设计选用深绿色,比起原本名片使用的鲜绿色,更显得含义丰富,自然新颖。
所有的排字技巧里,创建对比手法最为常见。它能在最短的时间内产生最好的视觉效果。为什么?因为正是元素间的对比吸引人的注意:大小对比、黑白对比、多少对比,等等。一只昆虫可以在叶片上一动不动地隐匿身形,直到它移动你才能发觉。正是运动的昆虫和静止的背景二者间的对比使它可见。
字体间的对比有多种形式:大、小,大写、小写,罗马体、斜体,衬线体、无衬线体,粗体、细体,黑、白,普通字体、花式字体。当这些对比关系改变时,信息的基调(有时候是观点)也改变了。
改换字体从不容易;不过有了电脑,你只需轻击一下鼠标,就可以颠覆成千上万字体的排列。以下以加油站指示牌为例,介绍一些需要注意的原则。
设计师将指示牌字体设为Neue Helvetica Black意在体现一种效率感。但由此带来一个问题:5指什么?尽管在英语的拼写上并没有错,但三种不同的信息(汽油泵型号、加油站名称和汽油型号)使用相同的字体,它们的基调和重要程度变得一样,内容层次就不分明了。现在三者看上去差不多,缺的是什么?是对比!信息间的关系虽然对等,但毕竟不相同。字体粗细和颜色的区别将帮助前来加油的司机更好地理解信息内容。
将“5”放在蓝色竖条上并反相,信息顿时变得明朗起来:字体和阅读顺序都未改变,但现在信息被清楚地划分为两类;Exxane Regular是指汽油,5则是指别的信息,虽然还不能立刻明白它是指油泵型号,但是,当听到“您使用什么型号的油泵?”的问题时,客户一下就能反应过来。
如果是黑白色系也能产生同样的效果。
使用具有多种粗细的字族的优点就是:不用更改字体就能创建对比。此处,对EXXANE使用Helvetica Nene的细体字,弱化其存在感。这是因为,车主很可能清楚自己在哪个加油站,因此不必强调站名,现在关键的信息“REGULAR”突出了。下方右侧的插图则突出了“EXXANE”—加油站的名称。
字体对比如此强烈,即使两单词没有隔开,看上去也很分明。
如下图所示,不改变字体粗细,只改变字体的颜色也能分出三种信息层次。将“EXXANE”反白,显得更轻快动人。不过,对车主来说真正的重点信息却是右边的黑色文字,它占据着主导地位。如果指示牌使用白、黑和50%的灰色,虽然版面显得干净,但“5”和“EXXANE”都是白色,容易使人混淆。
EXXANE对车主来说,是最不重要的信息;它使用白色细体字,使人产生一种开放空间的错觉,旁边的粗黑字体将会第一时间吸引人的眼球,如下图左。这种处理方法是可行的,但效果却不尽人意,因为它将人的视线朝两端拉扯。而下图右,背景使用深蓝色,白色字体比黑色字体更突出,阅读的顺序颠倒过来了,视觉效果却变好了。为什么?因为人的视线会自然的从左向右移动,“REGULAR”和“5”之间大的空隙将被忽略。
背景没有使用色条,文字排成双行提升了版面的视觉效果,使读者的视线集中在一小块区域。
EXXANE字体选用米色,在深色的背景上,就使白色的细体字“REGULAR”更为突出,结果形成三种层次分明的信息。而右图,我们仅仅改变字体颜色就达到了使信息分明的效果。
白色数字“5”与黑色背景之间对比如此强烈,使它从其余文字中脱颖而出。这是一种方便读者快速阅览的排版技巧。
当你对文字使用斜体的时候,其后的标点也应该使用斜体吗?连体字是什么意思?某些字体真的带有耳朵吗?
曾几何时,这些都仅仅是排版人员和文字编辑所要烦恼的问题。如今,却都成了设计师要考虑的事情了。第一个问题的答案可以在如下的例子中找到,而其余问题的答案则需要你继续往下探寻。
不过,排版中出现的问题何止万千。对于任何可能出现的问题,请在《超越平凡的平面设计:怎样做好版式》中寻找答案。
在无数的排版工作中,总会冒出无数的排版小问题。只要参考合适的资料,每一个问题都能找到对应的解决办法。学会恰当地处理各种问题将会提升你的排版能力。
窄栏文本不便阅读,更不便排版,尤其是两端对齐的时候。如下的例子截取自一段新闻,说明了这种情况。
A原始
B两端对齐
C左对齐
D宽栏左对齐
A方案中文字就像流水般不规则,当我们对一段极窄的文本使用两端对齐的时候常会发生。解决办法就是B方案,一定程度上放宽字距和紧缩词距,看上去好多了;另一种方法就是C方案,即让文本左对齐,所有多余空格排在行尾;更好的办法就是D方案,使用较宽栏并左对齐。
所谓连体字,就是把两个或以上的字母合并成一个而形成的字体样式。最常见的连体字是fi 和fl,两者在英文里常常出现,并且属于大多数字体的标准字母设置的一部分。许多连体字都含有小写的f,一些连体字则包含更多的额外组合。
连体字被认为是很好的字体样式,但并不是哪都能用,以下是连体字的三种最典型的使用环境。
Bookman字体美观大方,连体或非连体都好看。
Garamond字体古典雅致,应该采用连体。注意,非连体时,字母f和i相互抵触。
Century Expanded字体若不使用连体,看上去就像有两个点;连体则可消除这一错觉。
分式,也属于字体的一部分,不能简单地认为它就是全尺寸数字的缩小版。它们在笔画粗细和比例上都应该特别贴近全尺寸数字。如果选择的话,应当使用标准分式数字字体。
如果你没有分式数字字体,那就自己制作。对分子和分母分别使用软件的上标和下标功能,然后设置整数部分字体尺寸为70%(请根据字体来定),并使用分式斜线将分子和分母隔开,注意不要使用普通斜线。将上标的位置调至28%,或与整数部分数字的顶部对齐,下标位置至0。
你是否注意到,有时候明明将文本边缘(左边或右边缘)垂直对齐了,看上去却仍旧参差不齐?那是因为,边缘线虽直,字母并不直,其笔画的曲线,交叉以及标点符号可以制造未对齐的假象。InDesign软件的悬挂标点工具可以解决这个问题。
现代计算机的键盘是直接从标准打字机演变而来的,因此带有一些打字机键盘的特质。打字机键盘上的按键比英语字符的个数少,因此在设计上便投机取巧。其中一点就是使单引号和双引号按键具备键入前引号、后引号、所有格符号和Prime符号(非常特别的非字母用符)的多重功能。
早期的电脑,受限于128个基本字符,引号虽然非常有用,但其排版却多是不正确的。如今,真正的引号和所有格符号在全部字体的排版中都很标准,却反而不常用了。
Prime符号就更不常见了,它是用来代表英尺,英寸、分和秒的。Prime符号并不属于标准字符集,主要在函数字体中出现,包括符号。
排版用字符具有多种形态和属性,了解它们的名称是很有用的。在学习观察和识别不同字体的时候,知道这些特征与部件的存在是很有必要的。
字符的磅值与其本身的大小无关。磅值是用来表示包围字符的不可见方框的高度。24磅的方框按理应包围24磅的字符,但其实只要适合方框,任何磅值的字符都可以。
这种形式沿袭自以前的传统:将热铅灌入被称为嵌条的金属块塑成铅字。通常会在嵌条中字母上伸部之上和下伸部之下留出一点空间,这样脱模的时候就能避免截断铅字。结果,从铅字上伸部到下伸部的距离就比字磅值小了。
不过,具体小多少在视觉艺术上却非常灵活。具有较短下伸部的字型在尺寸上更小(30%);而像Regency这类手写风格的字型,纤细蜿蜒的主体和纤长飘逸的尾部使其在尺寸上偏大但,看上去偏小;x高度的字体类型尺寸偏小,看上去却偏大,等等。
Times Roman字体 Park Avenue字体 Aachen Bold字体
在现实世界,2加2永远等于4。但在设计的世界里,却可将这些烦人的物理定律抛到一边——2加2可以等于任意一个数字。比如你说,上述三种字体各有多大?不知道?其实三种字体都一样大,都是48磅。你的软件能证明这一点。字符的磅值与自身尺寸无关,而由包围字符的不可见方框的高度决定。实际上只要字符适合方框,任何尺寸都可以。因为,字体如此丰富多样,有的短而粗,有的却高而细——字体工艺相同,其实际尺寸却可能大相径庭。
而字体设计师甚至常常忽视这些古怪的规则。注意,以上三种字体都超出了边框线。直至现代的数码排版,唯一没变的是字体基线,它位于从边框底部往上大概1/3处。
Times Roman字体 Park Avenue字体 Aachen Bold字体
理想情况,上述三种字体的尺寸应该是不同的。如左图所示,同样的三种字体,现在被重新调整到适合方框的高度。看上去多么截然不同!现在它们显得更正式,字体上伸部、下伸部、x高度(小写字母的高度)随着字型的变化而变化,但只要大写字母的高度恒定,整体变化就不明显。这个方法轻松加强了字体的对比,给字体以恒定的尺寸参照,却丝毫没有影响排版的艺术效果。