【太阳娱乐】设计笔记——K(1)

太阳娱乐 224

【太阳娱乐】设计笔记——K(1)

原标题:够了,我不想再看到任何苹果风的邀请函

第一篇:设计篇

“字体排版”是一门

banner设计作为互联网从业者必备的技能,一张好的banner,绝非三五分钟就可以搞定的,它同时也能看得出一个设计师对项目的理解、色彩感、版式、整体的把握。

什么

第一章:版式设计原理

集语言、文化、科技、美学于一体的

banner的功能是传达信息!现在随着移动互联网的到来!我们跟习惯于在手机,电脑上了解、发现这个世界。我们如何才能以一种即具可读性和合理性,又更具有吸引力的方式来组织信息呢?

1.版式平衡

苹果要进军厨具行业了?

第一节:版式设计的概念及意义

内涵与外延都非常丰富的学科

从背景层、主体层、文字层、这三个方面来分析如何设计一个具有吸引力的banner。

版式平衡的三种分类,第一种是对称平衡,第二种是非对称平衡,第三种是整体平衡。制造平衡的五种方法,第一种是利用对称构图,这里要注意让画面种信息呈现倒三角形排布,这样有利于引导读者向下阅读信息;第二种是利用对角线构图;第三种是利用S型构图,S型构图和对角线构图有异曲同工之妙,都是有利于元素占满画面;第四种是利用稳定的几何图形,如矩形、三角形、梯形等;第五种是在画面留白处加文字信息,这里要注意素材指向性和动势。

哪吹来的歪风

什么是版式设计?所谓版式设计,就是将有限的视觉元素在版面上进行有机的排列组合,将理性的思维个性化的表现出来;

今天小More想和大家仔细说说字体与排版那些事儿~

太阳娱乐 1

摘自

看了邀请函后

版式设计的意义?版式设计的意义就是通过合理的空间视觉元素来最大限度的发挥表现力,以增强版面的主题表达,并以版面特有的艺术感染力来吸引观者的目光。

大家快准备好,排排坐吧~

01|主体层

以下摘自微信公众号 研习社

2.视错觉校正

太阳娱乐 2

太阳娱乐 3

太阳娱乐 4

太阳娱乐 5

太阳娱乐 6

太阳娱乐 7

太阳娱乐 8

太阳娱乐 9

太阳娱乐 10

摘自

3.倾斜带来作品设计感

当画面处于30°—45°度区间的角度时,会给人带来跃动的印象,这种动感能够让画面变得活泼起来。但这个角度的构图仍未超出人们正常观看事物的正常视角。当处于90°的视角时,画面开始变得新颖起来,趣味性也逐渐增强。当画面构图以180°的角度呈现时,版面与文字几乎镜像垂直,分不清哪里是正面,给人空间错乱的印象,这种超现实的表现手法也经常出现在电影海报中。

改变角度这种方式总体来说会传递出个性、活泼与不稳定等印象,这对于需要传递出严谨、正式、权威等气质的领域来说并不适用。

太阳娱乐 11

摘自

4.字体的分类

太阳娱乐 12

太阳娱乐 13

太阳娱乐 14

太阳娱乐 15

太阳娱乐 16

太阳娱乐 17

太阳娱乐 18

太阳娱乐 19

摘自

5.设计高点击率Banner

太阳娱乐 20

太阳娱乐 21

太阳娱乐 22

太阳娱乐 23

                                                                         
小尺寸版面

太阳娱乐 24

                                                                       
不同尺寸的延伸

太阳娱乐 25

太阳娱乐 26

模拟案例演示,从标题文案中,我们可以提取出“跑调”“放飞”“电影配乐”以及“品味”等关键词。在第一层关键词中似乎还很抽象,我们可以继续联想,跑调可以理解成找不到音调,这个“找不到”就可以用更加具象的指南针来比喻它,五音不全也可以代指跑调,那么跳动的音符图标呢?以此类推,借助思维导图的方式,我们可以将抽象的词汇找到可以表现的具象的点,并根据这些关键词来发展创意,从不同角度找到设计的切入点。

太阳娱乐 27

摘自

6.印刷知识

不通过四色合成色彩,而是专门用一种特定的油墨来印刷。
任何一种颜色都可以转换成专色,从成本来说,专色印刷也会更加高昂。我们可以通过潘通色卡等工具来快速查询专色效果,软件中也都有相对应的潘通色库。拾色器——颜色库。

太阳娱乐 28

顶部的三角感叹提示着当前选择的颜色超出了可印刷的范围,并在三角形下方给予推荐色彩,而下方的立方体则说明当前色彩在Web上可显示的最接近色彩。

太阳娱乐 29

太阳娱乐 30

纸质材料:铜版纸、胶版纸、凸版纸、白卡纸、拷贝纸、新闻纸、牛皮纸、特种纸

太阳娱乐 31

特殊工艺:烫金、烫银、UV上光油、压凹、激凸、镂空/模切、镭射膜 、覆膜等

太阳娱乐 32

7.渐变色

了解渐变色需要从以下三个角度分析

颜色的选择:色相渐变、明度渐变、饱和度渐变…

使用的数量:单色渐变、双色渐变、三色渐变、多色渐变

使用的形式:线性渐变、径向渐变、混合渐变

获取渐变色最简单的方法就是收集喜欢的渐变色直接应用,如没有特别满意的再自己手调。

当我们打开拾色器面板默认状态选择的是H,我们可以分别选择R/G/B会出现不同的渐变效果。

太阳娱乐 33

太阳娱乐 34

8.裁切图片

拉近与观者的距离:经过裁剪后,以特写的形式呈现,拉近了主体与观者的距离;照片的尺寸越小,越需要简洁的画面。

改变传递的主题

从画面中提取填充元素

太阳娱乐 35

太阳娱乐 36

添加跃动性

太阳娱乐 37

摘自:

8.画面太乱的6个解决方法

版式中的呼应:色彩的呼应、重心的呼应、形状上的呼应、负空间的呼应、位置的呼应、文字与主体的绕排。

1.色彩呼应

太阳娱乐 38

太阳娱乐 39

2.形状的呼应

太阳娱乐 40

太阳娱乐 41

3.位置的呼应

太阳娱乐 42

4.重心的呼应

太阳娱乐 43

5.负空间的呼应

太阳娱乐 44

6.文字的绕排

太阳娱乐 45

太阳娱乐 46

太阳娱乐 47

太阳娱乐 48

太阳娱乐 49

太阳娱乐 50

太阳娱乐 51

太阳娱乐 52

太阳娱乐 53

摘自:

9.如何营造纵深和层次

刻画方法:位置与大小,添加光影,色彩的进退

1.位置与大小:根据近大远小的原则,可以通过将元素缩小来产生位置的变化

#修改元素的大小一前一后

#元素之间相互叠压

太阳娱乐 54

#变形与透视

太阳娱乐 55

太阳娱乐 56

太阳娱乐 57

2.添加光影

#近实远虚

#添加阴影

太阳娱乐 58

太阳娱乐 59

太阳娱乐 60

太阳娱乐 61

太阳娱乐 62

#添加倒影

倒影与阴影一样,可以描述物体与地面的关系。同时,倒影的加入也会为画面增加品质感。

3.色彩的进退

#近明远暗

太阳娱乐 63

#近纯远浊

越靠近地面,天空的色彩越会变得暗淡。离地面越高,色彩纯度也会越高。

#近暖远冷

太阳娱乐 64

案例

太阳娱乐 65

太阳娱乐 66

太阳娱乐 67

10.素描知识

了解了物体的基本结构,你就打开了无限的可能性,当你看到一个形态的时候,脑海中会自动精炼它的形状,有时候物体形态比较复杂,所以你就必须要磨练观察力。你要做的不仅仅是观看,而是观察,并且还要学会思考,当观察力提升了之后,你的造型能力也会随之提升,这不仅能提升logo设计、字体设计的美感,更会缩短设计周期和学习的时间成本。

设计师精炼了它的造型,以简洁的线条形式表现出来,对于物体结构的把握是绘画中重要的一个环节,它能提升在设计中的造型能力。从网络找到很多老鹰的照片,仔细观察其造型和姿态,从中精简出图形,所以观察力无论是绘画中还是设计中都是必不可少的。

我们对黑白灰有基本的认知。那么在设计中是如何体现的呢?这里我们归纳三个大方向剖析。摄影照片、合成设计、立体字。

太阳娱乐 68

有一个较方便查找明暗关系的诀窍,画面中有红色的立方体作为参照,根据立方体的明暗关系,分析出光源的位置进而对产品的明暗关系有一个认知。

太阳娱乐 69

合成类的设计,同样可以把画面的中的元素看成是几何形体,了解各个部分的结构和转折。如何把主体和环境和谐巧妙的融合在一个画面中是合成设计的关键,这其中就包含了明暗关系的统一

11.名片

名片大致可以分为商务名片、个人名片和创意名片三类。

中式标准90*54,美式标准90*50,欧式标准85*54,窄式标准90*45.

横式版型水平感强,会传递出沉稳和具有信赖感的印象;而竖式版型垂直感强,会给人时尚、雅致和女性等印象。

太阳娱乐 70

太阳娱乐 71

太阳娱乐 72

太阳娱乐 73

太阳娱乐 74

太阳娱乐 75

修改

太阳娱乐 76

太阳娱乐 77

太阳娱乐 78

太阳娱乐 79

对于名片来说,信息的分组是非常重要的知识点

12.做到这几点

1.工作的目的,最基础的无非是想得到学习机会、薪资待遇、发展空间、业内声望这几点。新人设计师在选择团队的时候,尽量选择相对专业的团队加入。我们设计行业,招聘新人的主要目的就是为了节省成本,而你最大的竞争力也就是比别人要更便宜,这个优势要利用好。认清事实,在没长成之前,没人能看出你的潜力与意志,菜鸟就是菜鸟,老老实实的吃菜涨经验,多向老鸟学习捕食技巧,肉当学费先喂给他们吃好了。

如果你很不幸选中了一个待遇一般,没什么发展的组织,那就离开,重新选择,这对于想要快速成长的你来说,付出的时间成本太高了。有时候,选择真的比努力更重要。

2.海报中的文案内容有主标题、活动内容、活动时间、地址电话、其他辅助信息等等。有经验的设计师会把版面中所有信息,按照它们的主次关系进行梳理,版面中的主体、主标题、活动内容一定是最显眼的,其他的内容也按照优先级排序就可以。

太阳娱乐 80

同样的逻辑,在一大堆的工作中,你也要找到那几个核心的、重要的任务,花最少的时间把它们做到你心目中的完美。假定管理者的要求是100分,你就要做到150分的水平,让他感到惊喜;相对重要的和次要的80分足以;不重要的工作有条件的话尽量分配给助手去做,这样才可能用同样的时间为组织创造更多的利润,利润增加了,这才是管理者希望看到的。

3.思维方式

正向思维:遇到挫折的时候,你的大脑会把挫折产生的问题和感觉引导到积极的方向,激励你用平和的心态去寻找解决方案。

强者思维:这是一种更强大的思维方式,强者思维是遇到任何问题都不给自己找借口,只会向内追寻。

不论你想成为一名能够独当一面的设计师,还是变成设计团队管理者,都需要你的专业能力足够强,强到能让管理者信任你、团队成员依仗你、客户尊重你。我们所处时代是一个信息爆炸的时代,知识、技术更新飞快,不要再指望你用学习1年的经验能重复使用5年。

13.提升设计档次

细节可以决定成败,细节也可以毁掉所有,我们一定要用辩证的眼光来看待这个世界。任何的设计理论和方法最终都要依靠审美,要学好设计绝对不能学死而是要做到活学活用。不够档次这个问题的根源就在于审美。

总结了几点具体且实用的方法供大家学习和参考:

太阳娱乐 81

1.字体问题

字体数量:字体数量过多会导致版面的凌乱以及缺乏统一性,建议在一个版面当中汉字用一种字体,英文或数字用一种字体,总之最好不要超过三种字体,并且需要考虑中英文是否搭配。

太阳娱乐 82

太阳娱乐 83

字体字形:使用之前要分析自己所做设计的风格以及了解这些字体的历史、气质、适用领域等等,决不能为了标新立异而胡乱用字。

字体效果:在这里主要是指字体的变形、立体字、添加肌理、光效、合成、分离打散等一切区别于纯文字的变化,技法往往做不好反倒会起到减分的作用,总之越倾向简洁越好。

2.图片问题

图片质量:像素

图片的统一:在多张图片的情况下,图片裁切的统一以及色调的统一等等

图片的美感:这里的美感主要是指审美守旧的问题

3.色彩问题

色彩的数量
:色彩的数量与字体的数量是相同的道理,除非是设计内容的需要,否则一个设计当中不宜使用过多的颜色。在你配色能力还不是很强的时候建议在一个画面中使用不超过三种颜色。

色彩的色调:高级感可以使用低纯度和低明度的色彩来呈现,相对来说浊色调和暗色调也可以很好的体现出高级感。反过来如果你想要让你的设计显得很俗,那么就大量使用纯色调吧。

  1. 三种构图姿势

版式的布局就是在反复的进行“建立秩序”与“打破秩序”的过程。当文字放置到版面中时,矛盾就已经形成,接下来就是解决矛盾的过程。

太阳娱乐 84

1.倾斜式构图

*提炼版式主次:*

太阳娱乐 85

太阳娱乐 86

经过整理的日期信息放置到画面中,版面中右上角比较空,我们将信息编排到右上角填补这个位置的空白。这里要注意,填补空白并不意味着一定要把画面填满。

太阳娱乐 87

分析信息的优先级,将人名凸显放大,弱化策展人/参展人,添加到版面的左下角中部位置与版心对齐。

将余下的文案信息经过整理后添加到版面中的空白位置,元素添加后,左右的余白空间被激活,整体给人变化丰富的动感和秩序美。画面到这里,基本就可以结束了。

太阳娱乐 88

2.压角式构图:主体文字在版面中压住四角的构图形式

拆分文字笔画并填色,为标题带来了装饰效果。因为元素分散在版面四角,需要在中央部分添加一个面积以链接各个元素。再次添加标题信息,并以说明文字的形式出现与英文补充成组。

将文字整理好层级关系后,编排成组,文字组的面积还不足以支撑整体版面,在底层添加图形元素继续丰富组合。

太阳娱乐 89

3.散点式构图

将主题信息加大行距与字距,以点的形式编排到版面中,英文通常以横排阅读,即使行距与字距相等也不会出现阅读顺序混乱的情况,而中文同时具有横排与竖排阅读的情况,编排时需要注意行距不能小于字距

太阳娱乐 90

版面的构图并非具有固定模式去对号入座,而是一种思维方式,辅助线的使用包括网格系统、三分法、黄金比例等等,也都是基于思维之上的。

15.如何不被计算机取代

创意和思维是设计师的核心竞争力,是AI无法代替的。

太阳娱乐 91

太阳娱乐 92

太阳娱乐 93

太阳娱乐 94

太阳娱乐 95

正如照相机的出现,并不会让画家失业;傻瓜相机的出现,也并没有让摄影师失业一样。面对AI技术的来袭,我们要更加努力的提升自己的专业技能,努力增加自己的阅历与审美水平,让未来掌握在自己的手中。

16.文字为主体的刻画

以文字作主形象的画面也较为常见,掌握好文字的刻画方法,能够明显增强画面的表现力。

1.背后的原理

比例和细节:对于图形来说,轮廓形状的丰富程度就是它的细节部分,尺寸越小,意味着轮廓越简洁,尺寸越大,意味着轮廓细节越丰富。文字比例越大,细节越丰富/笔画变化性越强;文字比例越小,细节越简化/笔画越规范。所以变化性较大的字体并不适用于小尺寸下使用

用来看和用来读的文字:标准字体属于用来看的文字,而对于海报、招贴等以视觉为主的媒介来说,为了更加吸引视线,字形设计注重装饰性,更偏向图形化的外观,也意味着不需要过于顾及阅读的效率。是以视觉为主要功能的字形设计形式。

太阳娱乐 96

2.文字的常用刻画方法

太阳娱乐 97

太阳娱乐 98

太阳娱乐 99

太阳娱乐 100

太阳娱乐 101

17.字体与图片的味道

太阳娱乐 102

通过为项目定位关键词的方式,进而筛选符合项目需求的图片信息。同时也可以根据项目的气质调性选择与之搭配的字体

1.筛选分析出一个与项目气质调性相符合的照片素材作为主画面。

2.构图分析,如:人物脸部占据画面的比例叫面孔率,面孔率高的照片会更加给人信任和理智的印象,画面的构图是正三角形的结构,这种构图结构也会给人稳定的心理感受。

3.色彩分析:对于照片来说,不光是拍摄的内容会影响到画面传递出的气质调性,画面中的色彩同样会影响一张照片的味道。通过将画面像素化,以简化画面中的色彩,方便我们对色彩的分析。

4.字体选择:Garamond是一款非常经典的衬线字体,也是文艺复兴衬线字体的代表,字体优美清晰,雅致庄重、笔画宽度有着细微的差别,纤细的字脚和头发似的细线构成了明快畅亮的调子,圆弧形衬线过渡流畅自然。

太阳娱乐 103

人们在阅读时,图片、字体和色彩等信息也会一同被眼睛所接收。而这些模糊的印象会下意识的形成不同的心理感受。作为设计师,我们需要主动控制画面所传递出的气质。

18.网格系统

太阳娱乐 104

栏间距的设置最好大于正文两个字左右的宽度,否则会让信息变得难以阅读。网格除了通栏网格,双栏网格到五栏风格,还有以下

太阳娱乐 105

太阳娱乐 106

太阳娱乐 107

太阳娱乐 108

一。案例

1.先确定版心:根据项目的气质调性以及内容的多少来决定版心的留白大小,版心面积小会给人雅致、宁静的感觉;版心的面积大,会给人热闹、丰富的印象。

2.划分网格

3.对齐基线

4.编排内容:网格也并不是排版中的万能药,具体的编排形式还是要靠审美来决定的。这里需要注意,并不是所有的格子都必须填满的,完整的留白同样是设计元素之一。

5.添加点缀

太阳娱乐 109

当然也可以尝试先编排版面内容,再根据现有版面结构去适配相应网格的方式进行

太阳娱乐 110

网格系统为设计者提供了版面骨架,使得编排过程变得更加简单。为版面中元素添加了连贯性和精确度,是提供秩序性的工具。

po主留下了不争气的眼泪

第二节:版式设计的基本原理

太阳娱乐 111

通过对项目的分析,确定画面的主体(主体可以是人物、产品图或者文字)。先对一种元素进行视觉强化吸引观众的注意力。在确定画面主体的同时,我们就可以把画面的构图,也就确定下来!目的都是为了传达信息,让画面更具有吸引力。

ipot了解一下

1:根据内容进行版面的编排;

1、字体的基础术语

1.1人物主体

太阳娱乐 112

2:根据版面调整版面率;

字体大致可以分为三个部分,辅助切割字体的辅助线分别称为:升部线、大写线、中央线、降部线。

太阳娱乐 113

顺便回顾一下历年来苹果发布会的邀请函

3:根据版式设计调整设计元素的设置顺序。

不管字母是大写还是小写,被辅助线划分开的每一部分也都有自己独立的称号,就是下图所示的大写字高和X字高。

这张banner的主体是人物,作者为了更加突出主体在上面加了手写感的英文和一些小元素来点缀,这种做法能很好的解决主体物不够突出。在我们工作中,遇到主题物不够突出的时候,也可以增加相关联的文字或者线条来突出主体。(在给主体增加元素的时候,切记元素起抢了主题的位置)。

太阳娱乐 114

第三节:版式设计的视觉流程

太阳娱乐 115

1.2产品主体

熟悉的肾亏

1:单向视觉流程,平面设计需要有一定的顺序和主次来引导读者的视觉流向,这通常符合人们的视觉习惯,主要分为以下三种类型:

2、西方文字字体分类及历史

太阳娱乐 116

熟悉的冷淡

A:斜线式视觉流程(具有不稳定性,视觉冲击力较强);

西方字体可以分为衬线体与无衬线体两种。

这张banner的主体是物体
,在主体的周围添加了花和叶子丰富主体。在画面四周也添加了些相同元素,这样画面更加统一、和谐。文字部分采用黑体居中对齐排列。画面整体给你感觉典雅、舒适。

多少年了

B:竖线式视觉流程(给人简洁、有力、稳固的视觉感受);

两者的区别在于衬线体是指除字体基本笔画结构外还有随形变化的装饰的字体,而无衬线体则与其恰恰相反。

1.3文字主体

po主已经快看吐了

C:横线式视觉流程(给人安静、温和、惬意的感觉)。

衬线体

太阳娱乐 117

所以今天po主给大家解锁的是

2:重心视觉流程,视觉的重心能够稳定版面,给人安心的感觉,当它处在版面中的不同位置时,会给人不同的感受;

古罗马体(Old Roman)

文字做为主体,其实是把文字当作图形来设计。整张BANNER的信息传达更为准确。在纯文字的编排中,要注意主体文字的阅读顺序,可通过对比的手法,来加强主标题和副标题之前的层级关系。

非苹果风邀请函设计的秘诀

3:反复视觉流程,反复视觉流程广泛应用于艺术设计之中,它可以在视觉功能上加深人的印象,增强人的记忆,是视觉传达设计常用的形式之一。另外,反复也是自然现象,在版式设计中,对视觉进行那个反复的引导,可以增强信息传播的强度,使版面形式显得有条理,产生秩序美,整齐美和韵律美。

旧风字体(Old Style)

太阳娱乐 118

4:导向性视觉流程,在版式设计中运用一些手法、引导读者的视线按照设计者的思路贯穿版面,这就是导向性视觉流程。导向性视觉流程主要分为两种类型:一种是运用点和线作为引导,使画面上的所有元素集中指向同一个点,形成统一的画面效果,这是放射性视觉流程;还有一种是通过点和线的引导,将读者的视线从版面四周以类似十字架的方式向版面中心集中,以达到突出重点,稳定版面的效果,我们称之为十字形视觉流程。

过渡字体(Transional)

02|背景层

太阳娱乐 119

5:散点视觉流程,将版面中的图形散点排列在版面的各个位置,呈现出自由、轻快的感觉,我们称之为散点视觉流程,主要分为发射型和打散型两种类型,版面中所有的元素按照一定方向的规律向一个焦点集中,这个焦点就是视觉中心,这样的编排叫做发射型;而将一个完整的个体打散为若干部分,重新排列组合,以形成新的形态效果,这样的编排叫做打散型。

现代字体(Modern)

背景层是为了突出主体。它可以确定画面整体的色调。我们根据画面要表达的感觉和主体的风格来选择不同背景层的表现方法。

设计一张邀请函

第四节:版式设计的基本程序

太阳娱乐 120

2.1 照片背景(高斯模糊)

首先是要对信息进行层级区分

1:明确设计项目,首先要明确设计项目的主题,根据主题来选择合适的元素,并考虑采用什么样的表现方式来实现版式与色彩的完美搭配。

太阳娱乐 121

太阳娱乐 122

通常分为三部分

2:明确传播信息内容

古罗马体可以说是西方所有字体的始祖,这是一种非常古老的字体,可以追溯到古罗马时期的石柱铭文,是一种非常古典的、正式的、传统的字体。其他字体都是随着时间的长河,在古罗马体的基础上不断改进变化的,通过下面这张图大家就能看得很清楚啦~

照片通过高斯模糊,让他与主体产生空间感,如果画面色彩感觉不统一,可以用渐变映射来调试。

标题、引言、正文

3:定位读者群体

太阳娱乐 123

太阳娱乐 124

太阳娱乐 125

4:明确设计宗旨

相信大家都知道《KINFOLK》吧~它的封面字体设计就是用了古罗马体,我们从细节上和整体上都可以感觉到,这是一种很有古着感的、充满趣味性的、非常有书法意味的字体。

感觉背景和主体不够分离的时候,我们可以用图案叠加,在背景上加几何形底纹在增加空间感。

这样做的目的

5:明确设计要求

在放大的细节图中,我们会发现,字母F的衬线是不对称的,但是又不失规整,这与《KINFOLK》的调性是一致的。

2.2 纯色背景、渐变背景、多色拼接背景

是为了引导读者从整体向细节阅读

6:计划安排,在进行设计之前,需要对设计背景进行调查研究,并收集资料,了解背景信息,熟悉背景的主要特征,根据收集的资料进行分析,确定设计方案,然后根据方案来安排设计内容。

太阳娱乐 126

太阳娱乐 127

同时主次差异明显时

第二章:版式设计构图元素

太阳娱乐 128

小米网站banner基于设计规范和自营产品的电商设计网站。减去了设计中过于热闹、喜庆、大促的风格。产品展示图中都是用带有明暗渐变的背景来突出产品。这种背景的处理方法更容易出图产品,整体画面整洁,无过多的视觉干扰。也具有较强的品质感。

更容易让读者提取主要信息

第一节:“点”的编排构成

太阳娱乐 129

太阳娱乐 130

传达更加迅速

“点”的效果并不是由自身的大小决定的,而是取决于与其他元素的比例。圆点是最理想的点,但“点”不仅仅指圆点,所有细小的图形、文字以及任何能够用“点”来形容的元素都可以被称为“点”

接下来我们再看看现代风格非常明显的字体案例,对比看能感受到非常强烈的工业感,但同时也保留着现代非常优雅的、时尚的感觉,这种字体对于注重手工质感和优良设计的奢侈品非常适用。

多色拼接背景,让画面具有活力。几何形或是不规则图形的构型,更具吸引力,让人聚焦。

没有层次感的信息

1“点”的构成与表现

太阳娱乐 131

2.3 商业摄影图片、创意合成背景

我们很少逐字去读

“点”在设计作品中无处不在,在有限的版面中,他能够起到点缀画面的作用。

太阳娱乐 132

太阳娱乐 133

如左图

将数量众多的点疏密有致的混合排列,以聚集或分散的方法形成的构图,我们称之为密集型编排;

太阳娱乐 134

这种背景图,属于前期策划好模特、配色、创意。还有后期的表现技法的熟练度(无论是修片还是合成)

太阳娱乐 135

而运用剪切和分解的基本手法来破坏整体形,破坏后形成新的构图效果,我们称之为分散型编排;

太阳娱乐 136

03|文字层

邀请函的设计中更加需要提取关键信息

2“点”的编排方式

下面这张图可以很明确的表现出来现代字体和古罗马字体的之间的联系啦~

文字最能准确的表达banner中的信息!他要突出于背景,又不能抢了主体,在字形的选择上又要符合整个画面的气质。而且要具有易读性。所以在文字的编排上要下一定的功夫。如主标题与副标题的层级关系。都要我们仔细深入的推敲。

如下图均为典型的三段式版式设计

在版面设计中,没有规定“点”必须放在某一位置上,我们可以灵活运用“点”来赋予版面丰富多彩的效果。掌握了“点”的构成和编排方法后,能够帮助我们更好的协调版面中的各种关系,是版面效果更加精彩。

无衬线体

一张banner中最多不要超多三种字体。

太阳娱乐 137

第二节:“线”与空间的关系

无衬线体完全抛弃了所有起到装饰作用的衬线,字体只剩下主干结构,整体造型看上去简洁有力,非常有现代感。适用于标题、广告等这种需要瞬间识别的地方。并且笔画粗细对比非常一致工整。

太阳娱乐 138

调整字体大小和字距

“线”在版面中的构成形式比较复杂,分为实线、虚线以及肉眼无法看见的视觉流动线。其中最常见的形态是实线。

无衬线字也可以分为四类

黑体(无衬线字体):黑体字在字架上吸收了宋体字结构严谨的优点,在笔画的形状上把横画加粗且把宋体字的耸肩角削平为等线状,形成横竖笔画粗细一致,变宋体字的尖头细尾和头尾粗细不一的笔画为方形笔画,因而独具一格,给人一种粗实有力、严肃庄严、朴素大方的感觉。

是为了突出字体的对比关系

1“线”的构成与表现

无衬线体(Grotesk)

苹果官网的banner,用相对现代感的黑体,更具科技感!而改变了字体,就无法表达出产品的气质。

丰富信息层次

“线”是由无数个点构成的,是点的发展和延伸,其表现形式非常多样。

新无衬线体(Neo-Grotesk)

因黑体具有易读性,也可作为提示性或者叙述性文字使用。

典型的做法是从最大字体尺寸开始

运用线可以对版面进行分割。常用的分割方式有以下几种。

现在最常用的应该就是新无衬线体了,下面这些标志全部都是新无衬线体,新无衬线体是一种非常具有特点的字体,运用在logo中可以非常直接并快速传达出品牌信息和视觉风格。

太阳娱乐 139

越往下字体越小

1:将多个相同或相似的形态进行空间等量分割,形成富有秩序感的效果。

太阳娱乐 140

细黑:可以表达大方、高端、精致的气质,具有现代感

太阳娱乐 141

2:运用直线对图文进行空间分割,得到调理清晰、整体统一的版面效果。

特点一

太阳娱乐 142

另外有一些活泼的版式

3:使用线条对空间进行不同比例分割,就能得到具有对比效果和节奏感的版面。

新无衬线体是一种较为中性的字体,可以给人一种很现代、很清晰、很高效的信任感。

超粗黑(综艺体):具有力量感,笔画简洁粗壮,厚实有力
,醒目,具有浑厚凝重的气度。多用于活动大促标题。

将主题信息字号放大后置于画面中心

4:在骨骼分栏中加入直线进行分割,使栏目条理清晰,易读性强。

特点二

太阳娱乐 143

从其他信息中跳出来

立场是虚拟存在的,是通过人的视觉引发的一种感受。

这种字体具有坚实的形态,在各类花哨的字体中仿佛一股清流,会给人眼前一亮的感觉,简约有气质。

宋体:宋体字的字形方正,笔画横平竖直,横细竖粗,棱角分明,结构严谨,整齐均匀,有极强的笔画规律性。

更能吸引读者的注意

2“线”的编排依据

太阳娱乐 144

此类气质,可以在女性、高端、时尚、文化类banner中使用。

太阳娱乐 145

线的编排依据包括线的情感、线的节奏以及线的空间。

太阳娱乐 146

太阳娱乐 147

太阳娱乐 148

线的曲直、粗细、长短、疏密等特征不同,给人的视觉感受也不同

太阳娱乐 149

圆体:笔画转角圆润,结构方正饱满,笔形柔和。可以表现出童真、活泼、欢快的特质!一般用于儿童产品或是轻松的画面中。

不同风格的字体可以尝试混搭

第三节:“面”的版面构成

太阳娱乐 150

太阳娱乐 151

但最好不要超过三种

“面”作为平面设计中一种重要的符号语言,被广泛运用于设计当中。由面组成的图形总比由线或点组成的图形更具有视觉冲击力,他可以作为重要信息的背景,以突出信息,达到更好的传达效果。

根据新无衬线体,现在也延伸出很多更简洁的字体,比如Univers字体,更加几何化、简洁化、易读化。

通过变形的圆体字形,也可以表带出少女感!可爱有趣的画面。

单一字体使人乏味

1:“面”的构成与表现

太阳娱乐 152

太阳娱乐 153

字体过多又会使画面繁杂

面试点的放大、集中或重复,也是线的重复密集移动的轨迹和线密集的形态。

太阳娱乐 154

书法字体:霸气、古典、文化、具有浓烈的中国风韵味。更具张力!电商大促也喜欢用书法字体。

太阳娱乐 155

第四节:版面空间构成

几何无衬线体(Geometric)

太阳娱乐 156

还有一张群魔乱舞

版面是平面的、二维的,但也可以营造出空间和层次的视觉效果。这只是一种感觉,是版面元素组成的一种远、中、近的立体空间效果。

太阳娱乐 157

而小米活动banner,选择了重新设计字体。字形,较为欢快轻松,非常符合主题。关于字体设计,一定不能为了表达字体的形式感,而破坏了字体的可识别性。

怕是设计师上辈子没见过字体

1更改版面比例营造版面空间感

这是一种受包豪斯影响非常深的字体形式,充满设计感,笔画一般给人垂直硬朗的感觉,顶角和底角都非常锐利。

3.2增加字体的形式感

太阳娱乐 158

平面设计中的空间感,主要依靠面来表现,其关键在于远、中、近的空间的层次关系的处理。最常用的方法是将主题元素或标题文字放大,将次要元素缩小,使主次强弱分明,同时使版面富有韵律感和节奏感。

太阳娱乐 159

太阳娱乐 160

另外,无衬线字体要比衬线字体

2更改版面位置关系营造版面空间感

太阳娱乐 161

左字右主体、左主体右字:这种banner方式最为常见的版式之一。主体在一边,文字在另外一边。可根据画面选择不同的对齐方式!注意文字之间的主副层级、行距。

视觉上更加简洁也更清晰

通常情况下,视觉中心是版面中最引人注目的位置,接着按版面上部,左侧、右侧、下部的顺序依次递减。在进行版面编排时,要根据主次顺序,将重要的信息安排在注目价值高的位置,其他信息则编排在注目价值相对较低的位置,形成版面的空间层次感。此外通过对版面素材的叠压编排,也能形成很强的层次感但信息的注目程度却相对更低一些。

太阳娱乐 162

太阳娱乐 163

太阳娱乐 164

3通过调整版面黑白灰层次营造版面空间感

人文无衬线体(Humanist)

给文字添加个背景,画面中给文字添加个背景,具有反复强调的作用!根据具体需求反白、镂空、或是用颜色的对比来强调。

如图

黑白灰层次的概念源于素描,需要注意的是,黑白灰不仅仅表示无彩色,在彩色的版面设计中,其色调之间的关系也属于黑白灰的空间层次。

人文无衬线体具有非常好的韵律感,是很多文档的默认字体,气质开放亲和,儒雅优美不匠气

太阳娱乐 165

太阳娱乐 166

一个成功的版式设计作品,应该具有明确的色调。如对比强烈的高调。对比柔和的低调,或层次细腻的灰调。如果色调处理的不到位,就会出现混乱模糊的效果。

太阳娱乐 167

让文字也有前后关系。主标题放在主体的前面,而副标或者提取的文字放在主体的后面,在增强画面的空间感和装饰性。

且近几年很多企业

第三章:版式设计构成法则

太阳娱乐 168

太阳娱乐 169

已经将logo更换为无衬线字体

第一节:根据媒体特征选择开本大小

太阳娱乐 170

给字体加点特效吧,根据画面的风格,给文字加上适当的特效(机理)来突出文字部分,然后倾斜字体或者透视字体,可以增加力量、活泼的感觉。

以适应潮流

什么是开本大小?开本就是指印刷成品页面的尺寸,对版式设计有着很大的影响。

太阳娱乐 171

关于字体的编排样式是多样化的,在编排中易读、符合画面的风格就可以了。

太阳娱乐 172

1:根据媒体选择版面开本;

太阳娱乐 173

邀请函上只有文字是否有些单调

2:根据纸张选择开本类型;

Frutiger和Segeo也是使用率很高的人文无衬线体,设计师在使用字体是往往也会根据自己的需要对字体稍加改动。

或者将图片与文字各自分离是否有些杂乱

3:根据页边选择开本大小;

太阳娱乐 174

在文字上加入图形背景衬托

第二节:版面率的调整

太阳娱乐 175

不仅让作为视觉焦点的文字被图形约束起来

什么是版面率?版面率是指版面设计中页面四周留白部分的面积比例

太阳娱乐 176

显得整洁

1:扩大版面空白降低版面率(页面四周的留白面积越大,版面就越小,版面率就越低,也意味着页面中的信息量减少,通常给人高级典雅的印象);

最后通过这张图来对比总结一下无衬线体吧~

而且增加了画面层次感

2:缩小版面空白增大版面率(高版面率通常给人饱满、有活力、热闹的印象);

太阳娱乐 177

太阳娱乐 178

3:通过图像的面积控制图版率(图版率是指版面设计中图片所占面积的总和比例。图片越多,图版率越高,如果只有一张图片,但放的很大,那么图版率仍然很高);

3、字体的细节

文字之间的对比不一定只体现在字体上

4:改变底纹的颜色调整图版率(在处理地图版率的版式设计时,如果没有更多的图片资源,或者无法将现有的图片进行放大处理,则通过改变页面的底色来提高图版率是一个快速有效的方法);

字体给人的整体感觉往往需要细节来支撑

通过颜色来区分主次信息

第三节:各种构图样式

视觉平衡

同样是一种简单有效的办法

1:标准式构图(这是最常见的简单而规则的广告版面编排类型);

同样粗细的线条,由于视觉误差,水平的看起来往往会比垂直的更粗一些,对于圆弧部分也是一样的,因此在设计字体时,应该充分的考虑垂直笔画与水平笔画的粗细比例。

太阳娱乐 179

2:满版式(满版式的构图重点在于图片所传达的信息,将图片铺满整个版面,视觉冲击力很强,非常直观。根据版面需求编排文字,整体感觉大方直白,层次分明);

太阳娱乐 180

有时颜色能瞬间改变字体的性格

3:对角式(对角式具有不稳定感,视觉冲击力较强。形成了变化中相互呼应的视觉效果);

太阳娱乐 181

太阳娱乐 182

4:定位式(定位式构图是指以版面中的主题元素为中心进行定位,其他的元素都围绕着这个中心对其进行补充、说明和扩展,力求深化、突出主题。这样的构图特点在于能够使读者非常明确版面所要传达的主要信息,达到成功宣传的目的);

太阳娱乐 183

如果想让你的邀请函瞬间发光

5:坐标式(坐标式构图是指版面设计中的图片或文字以类似坐标线的形式,垂直与水平线交叉排列。适合相对轻松、活泼的主题、文字量不宜过多);

太阳娱乐 184

普通的构图形式恐怕满足不了你的需求

6:重叠式(重叠式构图是指版面设计中的主要元素以相同或类似的形式反复出现,排列时表现为层层重叠的样式。这样的构图可以使版面呈现出较强的整体感和丰富感,能够制作出十分活泼和动感的画面,并且 增强了图片的识别性。适合时尚,年轻的主题);

太阳娱乐 185

X形、满版式、发射状构图了解一下

7:聚集式(版面中大部分主要元素按照一定的规律朝向同一个中心点聚集,这样的构图被称之为聚集式构图。聚集式构图能够强化版面中的重点元素,同时具有向内的聚拢感和向外的发散感,视觉冲击力较强);

太阳娱乐 186

太阳娱乐 187

8:分散式(所谓分散式构图是指版面中的主要元素按照一定的规律、分散的排列在版面中。这样的构图分布比较平均,元素与元素的空间较大,给人规律感和轻松感);

甚至对于本应对称的字体,由于我们的书写习惯等,往往也需要有偏差的处理,当我们将字体几何化,就能看出来了,由于视差的影响,我们有时并不能将所有字体都设计为同样大小。

看了这么多操作

9:导引式(导引式构图是指版面中的某些图形或文字,可以引导读者的视线,帮助读者按照设计者安排的顺序依次阅读版面中的内容);

太阳娱乐 188

信不信创客贴也能做苹果邀请函

10:组合式(组合式构图是指将一个版面分成左右或上下两部分,分别放置两张从中间裁切的不同图片,再将两张图片重新组合在一起形成一副新的画面,左右两边图片虽然不同,但却有着较强的联系,形成趣味性极强的版式效果);

太阳娱乐 189

新一代iphone

11:立体式(立体式构图是指通过调整版面中的元素制作成立体效果,或者通过对角度的调整,将版面中的二维元素组合起来,构成具有三维空间感的视觉效果);

负空间

你值得拥有

12:自由式(自由式构图,就是指在版面结构中没有任何规律,通过随意的编排构成。具有活泼,多变的轻快感。是最能展现创意的构图方式,但自由式构图不代表乱排,需要把握整体的协调性);

负空间是指除字体本身所占用的画面空间之外的空白,即字间距及其周围空白区域。
文字组合的好坏,很大程度上取决于负空间的运用是否得当。
字的行距应大于字距,否则观众的视线难以按一定的方向和顺序进行阅读。

太阳娱乐 190

第四节:通过主题选择恰当的构图方式

太阳娱乐 191

另外还有更多

1:垂直构图(增强画面感染力);

不同类别文字的空间要作适当的集中,并利用空白加以区分。
为了突出不同部分字体的形态特征,应留适当的空白,分类集中。

酒会邀请函、婚礼邀请函、朋友圈邀请函…

2:平衡构图(能给人以满足的感觉,平静、安定、稳重);

根据视觉平衡来调整字间距,控制平衡杆与节奏感,细小的距离变化都会带来不同的视觉感受。

等你去解锁

3:倾斜构图(不安定感和强烈的动感,非常吸引眼球,常用语时尚类主题);

太阳娱乐 192

太阳娱乐 193

4:曲线形构图(趣味性和动感);

太阳娱乐 194

​返回搜狐,查看更多

5:三角形构图(正三角有稳定感,倒三角则表现了不稳定感和动感);

太阳娱乐 195

责任编辑:

第五节:常见的版面构图比例形式

英文字体设计一直推崇形式追随功能的设计典范,功能与场景、表达情绪都息息相关,设计师在设计字体时,不能忽视字体的重要性,字体虽然小,但对于正个画面都是至关重要的。

1:版面的大小比例

现代主义认为,优秀的字体应该像一个什么都没有的容器,在设计中起到承载的作用即可。

2:对称(给人平衡稳定感、统一的感受但也统一给人造成呆板的印象);

太阳娱乐 196

3:黄金分割(1:1.618容易引起视觉美感的比例);

太阳娱乐 197

4:对比和平衡(文字、图形、色调、动静、形态等对比);

第二次世界大战后,整个设计界趋势都开始柔软化、趣味化,人们不再需要过度突兀冰冷的设计,开始趋向于彩色化、多变的设计风格。

5:四边和中心;

当然也有兴起传统复兴的时候,但这时候的设计也往往会加入现代的元素,给人一种复古的亲切感,更加温和质朴。

6:破型(所谓破型,是指在版面设计中打破平衡和拘束,打破传统的网格结构、形成特殊的版面效果。)

太阳娱乐 198

第六节:选择并调整构图样式

太阳娱乐 199

1:根据媒体选择合理的构图样式;

太阳娱乐 200

2:利用辅助线进行排版;

4、版式设计

3:同意构图元素间的间隔;

版式设计是现代艺术设计中视觉传达的重要组成部分。版式设计是指,设计师根据设计主题和视觉需求,在预先设定的有限版面内,运用造型要素和形式原则,根据特定主题与内容的需要,将文字、图片(图形)及色彩等视觉传达信息要素,进行有组织、有目的的组合排列的设计行为和过程。

第七节:改变图片位置和对齐方式来调整版面

太阳娱乐 201

1:调整图片的视觉重心;

太阳娱乐 202

2:善于运用图片对称的编排方式;

太阳娱乐 203

第四章:图片的编排

太阳娱乐 204

第一节:图片的多种组合

通过利用年表、时间轴、地图、线路图等可以帮助设计师进行合理的排版,优秀的排版可以引导读者清晰的阅读,同时还能充分的传达出文本信息。

1:图片数量对版面效果的影响(图片越多越能吸引读者兴趣,相反一个图片都没有会显得枯燥);

不同区域的划分也能在视觉上带给人稳定性与整体性,为了帮助实现这种效果,设计师可以利用不同的色块强调轴线,辅助版面分出视觉上的主次。

2:图片的不同组合编排方式(最常见的组合方式即通过统一尺寸、对齐统一间隔等方法使版面整体均衡;或者改变图片之间的比例以表现出层次感和主次关系);

太阳娱乐 205

第二节:图片大小及位置关系

太阳娱乐 206

1:放大含有重要信息的图片;

在排版过程中,无论是图片、标题、文字、色彩又或是负空间的比例,都会因为不同的设计呈现出不同的视觉效果和心里感受。

2:调整图片尺寸;

比如亮色系的图片、字体与色彩以及留白较多的页面往往会给人很轻盈欢快的感觉,而暗色系的设计则会给人沉着稳重的感觉。粗体的文字或行间距紧凑的段落会给人密集拥挤的感觉,细体字或字距行距较大的段落或给人舒畅的感觉。

3:出血图片的运用;

太阳娱乐 207

4:调整图片的位置关系;

太阳娱乐 208

第三节:图片外形决定版面编排

太阳娱乐 209

1:圆形图与方形图的使用;

太阳娱乐 210

2:去底图的应用;

通过排版,设计师需要设计出一种有侧重点的版面,将文字图片有主次、有视觉重心和视觉次要点的分布,但也切忌将所有的元素过度分散平铺或集中于某一区域,过度的重心偏向会给人一种不平衡的感觉,一般人们是非常抵触这种不稳定的心里感受的。

第四节:图片的适当剪裁

适度的缩放元素的尺寸比例,调整比例,不要轻易使用自由式排版。当画面中有需要突出的元素时,突出的重点就需要足够大,但同时也要保持一定的平衡。这时候页面就需要创造出一定的节奏感,不管是让个元素之间尺寸上有差异,还是间距上有编排出节奏感,都是能呈现出具有轻盈感的有效方法。

1:通过剪裁缩放版面图像;

最后再和大家分享一套真实的作品集排版案例来结束今天的内容啦~

2:通过剪裁删除多余图像;

太阳娱乐 211

3:通过剪裁调整图片位置;

太阳娱乐 212

第五节:图片的编排规则

太阳娱乐 213

1:图片的动态编排(具有动势的图片可以令人感受到一种跃动的感觉);

太阳娱乐 214

2:图片的方向编排(物体的造型,倾斜的方向,人物的动作,面部朝向及视线等,都可以使读者感受到图片的方向性);

太阳娱乐 215

3:图片的对齐方式(使用最频繁的是左对齐方式)。

太阳娱乐 216

第五章:文字的编排

太阳娱乐 217

第一节:选择合适的字体

太阳娱乐 218

1:字体影响版面风格(在同一个版式中,使用不同的字体会形成不同的版式风格)。

太阳娱乐 219

2:不同字体样式的应用(如果想设计出游个性的版式,则要选择较为随意独特的字体;如果是卡通版式,那么圆润可爱的字体更合适;如果是欧式风情的版式,则通常会使用带有曲线的字体)

太阳娱乐 220

第二节:字体之间的编排

太阳娱乐 221

1:中文字体的编排;

太阳娱乐 222

2:英文字体的编排;

太阳娱乐 223

3:中英文字体的混合编排(中英文混合编排要对两种字符的宽度进行适当的调整。在编排时,可以将中文单词与英文单词之间空出四分之一个字符的位置,需要统一字号和位置的基准线)

小More每天都在做新的尝试

第三节:设置文字的字号与距离

希望能和大家讲更多新的内容

1:印刷文字字号的规定;

大家有希望看到的内容就快告诉小More吧~

2:结合字体设置字号与字距;

(最近我们在公众号里开通了音频呢!大家可以在公众号里直接听公开课啦~

3:结合信息内容设置行距(通常情况下,标题的行距为标题的高度即可,目录的行距一般为文字高度的2至3倍,英文行距一般是字号点数的1倍以上,中文的行距通常为字号点数的1到1.5倍。其中艺术类书刊可能达到2倍。中文行距一般是字号的一半至四分之三)。

点击进入我们的公众号 – 菜单栏“最新动态” – More耳朵音频课堂就可以啦~)

4:根据段落调整段距。

爱大家哟~

第四节:文字的编排方式

太阳娱乐 224

1:段落文字的编排

如果您有什么关于专业的问题 可以直接留言给小More

2:文字的图形化编排

小More会第一时间回复你的~

第五节:不同文字的组合编排

更多院校信息 后台回复姓名&联系方式

1:文字组合编排的对齐方式

MoreART帮您拿到名校Offer

2:文字的应用技巧和方法(文字是编排设计中的基本要素,能够强调重点,平衡画面、增强版面的跳跃率)

A:对比的编排方法(通过文字的大小、形态等的对比使版面生动、有节奏)

B:用留白的编排方法(运用文字四周的适当留白,来增强版面的空间感和品质感)

C:强调文字的编排方法(通过对文字进行扩大,图形化等处理,强调了版面的重点)

D:体现文字方向性的编排方式(将文字按照一定的方向排列,引导读者视线的走向)

E:多图片版面中文字的编排方法(通过少量文字的点缀增加版面活力)

F:少图片版面中文字的编排方法(将大量的文字有规律的排列,形成稳定、有品质的感觉)

G:文字的动感编排方法(用文字充当版面中的点、线、面使版面具有动感和节奏感)

H:文字的立体化编排方法(将主要的文字进行立体化处理,增强视觉冲击力和空间感)

I:标题文字和信息文字的组合编排

第六节:文字与图片的编排规则

1:统一图与文字的边线

2:合理编排图片与文字的位置

3:文字绕图的版式

4:合理的栏宽

5:图片与文字的颜色处理

admin

网站地图xml地图