超实用的标题排版小套路,有格有调

如何解构好的作品呢?在我们的设计生涯中需要多看多想,当然要看很多的好作品来提高自己的审美,扩展自己的武器库。那么当我们看到好的设计作品时怎么办呢?大多数情况下我们都会选择看过之后就没有然后了。其实我更建议大家把好的作品保存下来,然后去思考这个作品为什么要这样做。

今天不分享那么大的理论,介绍几个简简单单排标题的方法,供大家学习参考。

文/雷敏 版式设计作为现代设计艺术的重要组成,可以对视觉传达效果的改善提供重要帮助。而网格系统作为版式设计中最为重要的环节,具有自身的形式与特征,其实网络在版式中是隐形,但是却真实存在的,可以理解为版式设计参考或规范。

授人以渔的教程来了,今天木东的教程从零开始梳理了海报的设计思路,从信息归纳到版式、字体、配色方案等,都有相应的方法可借鉴,力求帮同学们学到海报设计的深层功夫,以不变应万变。

也就是知其然,知其所以然,知道它为什么好,好在哪里,这样的思考过程对自己的提高是很有帮助的。现在我以一组adidas的海报作品来进行解构,我们一起来看看这张海报为什么如此美观大方。

  1. 同字号加粗 & 置顶

图片 1

一、信息整理

图片 2

▲标题:方正兰亭特黑简体    内文:方正兰亭黑简体

网格可将版面的构成元素如点、线、面协调一致地编排在版面上。网格系统在实际版式设计中具有比例感、统一感和准确感强烈等版面艺术特点,伴随着当今时代信息量大而快速传播的要求,网格系统在版式设计中已经越发引得人们的重视,因此有必要对其构建方法进行探讨,网格系统设计的创意也是有规律性的。 

制作海报的第一步是整理海报的文字信息,这一点很重要。比如当我们在看一则新闻的时候,我们首先是看到标题、然后是副标题、最后是正文。这是新闻在排版的时候已经为我们预设好的阅读顺序,方便我们看新闻。这样的例子同样在报纸上,头条会首先吸引你的注意,然后才是其他的新闻。一张海报和报纸的文案都一样,都先要有重要的内容先给我们看到,然后再依次看其他的信息,本质上就是要迎合人们在阅读上的习惯。

就是这张海报作品,下面我们对其进行分析解构。

标题置于左上顶部,并远离正文,标题加粗,标题字号与正文字号相同。

图片 3

信息整理主要分成三步

这个海报漂亮有两个方面原因,第一个原因是选择的底图好看,细节足。第二个原因则是版式排的好看。

在文字内容很多的情况下,这种设置的好处是让读者有足够呼吸的空间,这种方式的标题设计是比较优雅、克制与内敛的。

##########NextPage##########

全部列出 : 先把所有的文字列出来(要敲定,不要海报做到一半又加字进来)

我们重点解构他版式排版这一块。

  1. 大字号标题 & 置顶

根据主题要求确定网格风格的设计 

排列顺序 : 哪些是你想让我们最先看到,然后是哪些内容是被我第二看到的。然后 排列出顺序来。

首先从版式上来说,它里面的点元素相当于划分的网格:

▲标题:小塚宋体  内文:小塚宋体

由于网格的数量以及设计的主题与媒介的特点有着极为密切的关系,为此一般在娱乐性的主题上使用活跃的版面设计,例如复合网格系统设计;而在严肃的主题上使用理性的版面设计,例如对称式网格系统设计。 

我整理了一下原先那张海报的文案,分成主要、次要内容和四个小块。(见 图1)

图片 4

标题依旧设置左上顶部,采用了内文2.5倍字号的字体,这种方式的标题设计让标题和正文的对比尤为突出。

图片 5

主要内容,次要内容

这样大家可以看明白,除了四周的天头地脚和左右页边距,这些小点将页面划分成了6*8的模块网格,如下图。

  1. 1.5倍标题

根据版面的宽幅确定网格的数量 

标题

图片 6

▲标题:方正兰亭黑简体  内文:方正兰亭黑简体

关于通栏的大小以及变化在西方已经有较为严格的规定,例如在每栏中的字母不超过50个,而我国至今还没有明确定规定,设计中一般依靠设计师的感觉决定。 

活动简介

问:这样栅格化就是为了文字排版?

标题位于正文的上方,字号是正文的1.5倍,标题与正文之间空了一行。这种方式的标题设计比较保守,好处是适用绝大部分的情景需要。

图片 7

联系方式

答:对,网格系统服务于排版,但是字的精致程度和字号大小、行距字距也影响着版面的美观。

  1. 无衬线字 衬线字

保持风格一致、灵活多变

主办承办

我们来继续分析,其中他的主标题,SEASON1,占据了两个模块网格的长度,下面的正文则占据了三个模块网格的长度和一个模块网格的高度,如下图。

▲标题:思源黑体(Bold) 内文:思源宋体(Regular)

网格系统的设计能够提供方便快捷地形成系列版面的基础,在保持页面风格一致的前提下还要有灵活多变的特点,以保证信息的传递更富有层次与条理。 推荐阅读:版式设计技巧!负空间的运用

元素归纳 : 把文案归纳成点、线、面的形式。

图片 8

标题与正文使用有对比的字体,此例子标题为无衬线黑体,正文为衬线宋体。标题依旧位于正文的上方,字号是正文的1.5倍,标题与正文之间空了一行。这种方式的标题设计也是常用手法,好处是强化两者间的对比。

图片 9

图片 10

那么为什么一个占据两个模块,一个占据三个模块呢?

  1. 超大标题加英文

网格系统设计的种类 

二、重心轴线

因为要有长度对比跟疏密对比,可以看到主标题是采用了宽松型字距的。

▲标题:思源黑体  内文:思源黑体

①对称式网格系统设计。这种设计一般采用左右两页、两栏或者三栏等,页面、页码的位置对称,左右两页可以互为镜像,从而表现出一种严谨、分明、理性的特点。

重心与轴线是版面的核心,它们决定了一张的海报最后出来的样式。版面的三个主要元素点、线、面围绕着轴线与重心排版。

图片 11

如果觉得纯中文的版式比较难处理,可以尝试加入少许英文字当做点缀。这种方式的标题设计好处是,减轻版式的单调感,同时可增加版式的国际感。

图片 12

什么是点、线、面?

问:其实这个按你那样说不科学,为什么画了网格英文几行就卡着网格,右上和右下就不卡着。

  1. 加分割线

②不对称式网格系统设计。这种设计一般用于较为轻松内容的表现,例如散文、诗歌、女性、体育等,这也就决定了不同版式的平衡性。例如不对称中的留白处理就可以为人们留下一个想象的空间,与国画的留白有异曲同工之妙。

点 : 通常是指重点内容(通常会被优先看见) 它可以是一个字或者符号

答:我这个网格没画标准,只是从宏观上分析别人的作品而已。回答你这个问题,因为这个版面是按小点的中心对齐的,如下图。

▲标题:思源黑体(Heavy) 内文:思源黑体 (Regular)

图片 13

线 : 通常是一条单独的内容 例如一串电话号码 一个标题 一句话

图片 14

一根横线划分了标题和正文。这种方式的好处是,将文本属性划分,并进一步强调了标题这一行的重要性。

③模块网格系统设计。这种设计最早使用于报社编辑,可以将多个模块快速的拼装在一起,从而提升了排版速度。

面 : 一大段文字或一张图片 它们通常是版面的重心

上下两行都是在旁边点元素的中心线上。明白了嘛?

  1. 加入简单视觉元素

④复合网格系统设计。这种设计方式可以说是以上三种网格的综合使用,从而得到极具现代气息的设计,已下是网格系统设计事项。 

点、线、面是人们视觉上概括文字信息的方法,好的排版就是运用这一方法进行归纳。好的归纳可以使得我们阅读地非常方便,相反就会变得各种阅读困难

另外网格不是一个死东西,是可以无限划分的。

▲标题:思源黑体(Bold) 内文:思源宋体(Regular)

图片 15

以下是举例:

比如我现在是6*8的网格,我们还可以每个网格之间平分,变成12*16的网格。

当觉得版式枯燥无味时,可以尝试加入与内文匹配的视觉元素,如例子中,加入了艺术家草间弥生最著名的红色圆点,既不感觉符号与内文无关,又让版式多了些许亮点。

确定页面版心的尺寸比例 

图片 16

但最终决定排版美不美观的因素是什么?答案是审美,只有你的审美好你才能做出漂亮的设计,网格系统什么不过是辅助的工具而已。

  1. 竖标题排版

在版面的成品尺寸确定之后,作为设计师必须对页面容纳的图形及文字的多少进行大致规划以确定版心面积。这里不仅涉及到宽度与高度,同时还包括字体的字号及多少以及页面数量等都是需要考虑到的问题,如采用黄金分割作为基础的页边空白距离可设定为3:5:8。在这一问题决定之后就可以进一步的对标题以及所要安排的文字内容进行各种组合尝试,从而确定最优的方式。 

图片 17

比如一个画家,就算给他一根树枝,他也可以在地上画出惊艳的画作,但对于一个不会画画的人,就算给她全世界最豪华的画材,他也画不出好的作品。

▲ 标题:A-OTF 徐明    内文:思源宋体

图片 18

通过上面的举例大家应该明白了点、线、面的用法了吧?《写给大家看的设计书》提到是一种对比的原则,实际上在排版叫做区分元素;就是两个相同的元素,转换其中一个元素,使之与另一元素区分开来,达到对比的效果。

继续,我们详细讲一讲这个版面中的网格。其实这个版面,一开始是可以从双栏网格开始划分的,如下图:

竖排版可以让汉字体现其特有的韵味,在配合英文小字在旁点缀,不会显得太过于传统,这种横竖配合版式的好处是,阅读有节奏变化,可以提高阅读体验。

网格数量 

所有的文字都可以归纳成点、线、面三种元素,这个在整理信息这一步骤就已经归纳好了(见上图),文字的组织和思路便一目了然。

图片 19

部分资料来源:《Grid Systems in graphic design - 平面设计中的网格系统》 Josef Muller-Brockmann, 徐宸熹等 译,2016

由于一个空间或者平面可以被分割成的网格数量是没有上限的,为此针对具体的作品要通过仔细地研究以获得与作品主题风格相适应的网格形式。例如常用的2、3、4、6栏等均匀排列的方式,极易产生严谨、整齐划一的视觉感受。而将这些简单的分栏在局部进一步细分,例如将两栏变为4栏、8栏,3栏变为6栏或者9栏等,逐步细化的分栏变化,大大提高了版面的内容承载量,为编排内容容量及多样性奠定了坚实的基础。 

什么是重心和轴线?

一开始从双栏划分,比如小文字就占据了一栏,留白占据了一栏,而后每个栏又划分成三份,能明白嘛?

一起进步!

图片 20

重心 : 是一块大小占据版面四成以上规则或不规则的面 是海报是视觉中心

图片 21

共勉!

##########NextPage##########

轴线 : 分主轴和副轴 把某一类文字信息联系在一条线 (可以成为文字轴)

右上角的LOGO也是占据了一个模块网格的大小。

=================================================

根据设计研究,眼睛从左到右的标准阅读距离是30~35cm,为此处于这一范围的文字是最适合阅读的。这为栏宽的设置提供了一定的依据。栏宽对于文字的排列有较大影响,一般是栏宽越窄所使用的字体越小。如果设计中在较窄的栏宽中使用较大的字体就会造成同一行的文字数目过少,从而导致阅读过程中频繁换行,加速眼疲劳。一般来讲网格系统的栏数越多其产生的版式编排变化也越丰富。同时,若这些空间间隔或者是文字区域间隔差异越小,那么所设计出的作品静态效果就越强,反之则具有较强的动态效果。 

注意: 要分清楚参考线和轴线的区别,它们的功能一个是对齐,一个是联系

图片 22

设计不是奢侈品,设计是日用品

图片 23

以下是对轴线的举例说明:

那我们来看上图这个LOGO为什么没按照模块网格的长度来呢?这就是我说的网格是可以无限划分的应用了。

欢迎关注我的公众号,我会不定期更新设计干货与日常美学:微信公众号:设计便利店或 搜索微信号:designmart

标题位置设计 

图片 24

再具体分析的话,就像图上一样,它其实是又把左侧的网格对半分了一下,所以这个adidas的LOGO占据了一个半模块网格的长度。网格不是很死工具,一切都在于灵活运用与审美上。那些说网格排出来的东西很死板的人根本就没有深入的了解网格系统。

在进行版式设计中,采用网格系统设计必须要确定好文字与图片的网格分配。确定好之后,就要对标题的位置进行规划,标题位置设计要根据栏目的大小、宽度等要素,要具有直观性。标题直观地体现出文章的中心思想,因此也是设计的重点。在网格系统设计中,要对标题的大小、横竖变化及字体、字号变化进行详细设计,根据文章轻重,对每篇文章的标题大小适当变化。横竖的变化具有强烈的节奏感,在色彩方面也要有所变化,这样标题才能形成设计的亮点。 

这个简单的例子是说明当你看到某一类文字全部对齐在某一条线上面时,你会自然把他们联系起来看成是一个整体。当这类文字有一部分都离开这条轴线时,在你的视觉变成了有两条轴线,自然就看成了两个没有联系的内容。

从宏观上我们分析完了,再来看看,为什么好看,其实排的好不好看一个重要的原因是取决于字体的精致程度。

图片 25

两个重要的步骤就讲完,现在开始制作。

图片 26

文字行距设计 

图片 27

从图上可以看出他用的字体是非常精致的。

字行之间的距离称之为行距,是从本行字的基线到上一行字基线之间的距离。行距已经将文字的高度包含在内。在设计的时候要考虑行距的大小,根据对阅读的速度及版面的清爽度等因素对行距进行设计。要求行距控制不能过大,不能对版面造成浪费,段落之间要清晰,以适应读者阅读的间歇性。要掌握好疏与密的结合,疏主要用意是留足空白,密主要是为了体现出紧凑,只有处理好疏密的关系,整体布局才会合理。一般来讲120%~180%的行距比较适合阅读。 推荐阅读:版式设计中的致胜“法宝”!留白

首先明确海报的视觉中心,我用了一个黑色块压住了版面

字体名称叫AdiHaus,是adidas的御用字体,所以用好字体也是关键。

图片 28

然后设立一条清晰的主轴,还有副轴。

但是这款字体网上并没有资源可以下载,所以我用了一款比较相似的字体来做分析,

图片编排设计 

图片 29

图片 30

进行图片编排的时候,要与图片的说明文字相协调。图片可以退底,可以出血,也可以是方块图。以方块图为例,一般图片说明放在图的左右侧或上下侧,大多数情况下需要与图片的边线对齐。图片说明的编排不能一行与边线对齐,下一行又缩进两个字符,这样就会显得杂乱无章。 

现在整理好的文案可以往上面放了,把主要内容的三块从上往下 从左到右(迎合大多数人的阅读习惯)在主轴上排列,标题是最重要的内容,所以我放在了视觉中心里。次要内容在副轴上排列。

我用的字体名叫Avenir,也是著名的有几何化特征的无衬线体之一。

图片 31

三、3种就好

图片 32

网格的细节优化及调整 

当你做一张海报时,字体的种类太多,就会显得乱。但是太少或只有一种,又会让人觉得单调。我个人觉得,无论是字体、颜色、字号、字距都控制在三种之内就好,但必须用心谨慎地去选择。任何选择都要迎合海报主题的需要!

上面是adidas的官方字,下面是我用的Avenir字体,如果对字体的敏感程度不够,一定会认为这是一款字体。

网格形式的多样化是网格系统的属性之一。除了文字和图片在固定栏宽中的穿插外,还可以为版面内容提供复杂多变的结构,如注释、图标、小幅说明性照片、装饰等相关元素。例如题图,根据文章内容,可以对标题进行设计,由多种图案共同构成题图,尤其是采用大场面照片作为标题背景,可以形成强烈的视觉效果。再如页眉、页码等装饰性元素的设计运用,可以提高版面的整体性。 

我个人的选择如下:

两款字体主要是细节上的不同,首先从字宽来说,我选的字体就没有原来字体宽。另外笔画细节的处理上也有所不同,比如下图中对1的处理。

图片 33

图片 34

图片 35

网格系统设计作为一项艺术性很强的工作,也有其自身的规律性,为此在设计中要结合平面设计的具体特点,科学合理的运用分栏方法以及网格单元将文字、图形、装饰等视觉形象进行合理的设计。同时要结合相应的视觉经验,以及审美规律,如此,才能使网格成为设计师编排版面的强大助力。

标题 : 方正清刻本悦宋简体

我们再来看看内文排版。

图片 36

标题是最重要的,又在视觉中心,所以这个字体只用在标题。这个字体字重大,有韵味,适合这张海报的标题。

图片 37

注:本文为 设计智造编辑整理,转载请注明 来源:设计智造

副标题 : 方正正纤黑简体

右边是我模拟的。从图上可以看出它文字层级关系分的十分明确。

    本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

由于海报受众的主体是学生,所以我选择一种比较受年轻人喜欢的字体做副标题。

如果要计算字号的话

正文 : 仿宋

图片 38

易读性强的字体,于是我用在正文里。

我们可以看出,它主标题用的是40号字,内文用的是16号字,40÷16=2.5,所以它字号之间是2.5倍的关系。

颜色 : 白色 黑色 天蓝色

图片 39

白底、黑块已经占了两个颜色了。这次主题是与风筝有关,我加上一个天蓝色。

再来看一下标题与内文的字重对比,标题采用的是Bold粗体,内文采用的是比Bold细一个等级的Demi体。

以上就是文字的排版做完了,最后可以把黑色块换成图片。

图片 40

我百度了一张关于风筝的图片,代替了黑色块(为突出标题,标题字体换成了白色)

所以我们可以看出这么一个美观的海报,里面包含了这么多东西,也正是这些,让版面变得规整有序,美观大方。

最后与原来的海报比对,你们感受一下:

图片 41

图片 42

例子举完了,这就是我看到好的作品时的分析解构方法,大家学会了嘛?

我开始使用黑色块而没有直接上图片,是因为我想让大家知道重心的重要。重心和轴线是版面的核心是绝对不可以没有的!

本文章版权归 [ 视觉状态设计研究所 ] 所有,欢迎关注它的微信公众号:

最后附上海报的大图:

图片 43

图片 44

本文由官方彩票手机投注网站发布于摄影资讯,转载请注明出处:超实用的标题排版小套路,有格有调

您可能还会对下面的文章感兴趣: