前两期我们讲到了四大基本原则中的比拟和对齐,想必大家还有丢丢印象,我们一起来回顾一下~
比拟(Contrast)的基本思想到底是什么?
实在我们仅仅是要避免页面上的元素太过相似,如果元素(字体,颜色,大小,线宽,形状,空间等)不相同,那么我们干脆就让它截然不同,要让页面引人瞩目,比拟常日是最主要的一个成分。正是它能使读者首先看到页面中更主要的元素。
对齐(ALignment)是什么意思?
任何元素都不能在页面上随意安顿,每个元素都该当与页面上的另一个元素有某种视觉联系,这样能建立一种清晰,风雅且清爽的外不雅观。
前期没学习的小伙伴也可以戳蓝色字体:板式-比拟原则、板式-对齐原则。
好了,回顾完之后,进入本日的正题:板式设计中亲密性原则。
低级设计师的一些征象
刚入行的新设计师是否碰着这样一些问题:文案,图片,符号四处罚布,连角落都不放过,霸占了每一处空间,基本上没有任何的留白。这种情形比比皆是,他们彷佛在设计过程中不敢留有空缺。
有时候碰着学生的作业也是这样的状况,页面满满的毫无透气感。我会开玩笑问到学生,如果让你设计一款手机的包装盒,你敢像苹果手机的包装盒一样中间放一个logo就完事了吗?当然学生一定是摇头的。
如果页面设计中充斥着太多的内容,这个页面会显得凌乱无章,读者也无法从中很快看到所需的信息。当我们面对很多信息的时候要怎么做到版面的透气感,怎么样让读者很快能看到所需的信息呢?这时候就要靠亲密性原则来发挥它的浸染了!
什么是亲密性原则?
亲密性(Proximity)
彼此干系的项应该靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会形成一个视觉单元,而不是多个伶仃的元素。这有助于组织信息,减少混乱,为读者供应清晰的构造 。
为了让大家更加深刻的理解,下面举一些大略的例子阐述下这个观点。
首先,一起来看看下面这两张图,哪张图会让你很快速的回答出这张图中有多少个数字,多少种颜色?
很明显图二能让快速给你答案,至少我们轻易的能知道一共有多少种颜色,一共有多少个数字。
我们再来看这样一段笔墨:
是不是觉得没有什么阅读希望?这是由于笔墨紧密挨在一起,没有任何层级关系的时候,眼睛就会莫名产生疲倦感。
那我们来改变一下:找到个中3个观点折行并移动它们使得相同的元素凝聚成一个组,把间距拉开。再来看的时候,会创造信息的层级更清晰了。
我们再来将这段笔墨轻微改变下,把文本抱团把标题伶仃,这样看上去是不是更加清晰明了。这实在便是利用了板式中的亲密性原则,把干系联的要素进行靠近处理。节制好亲密性设计原则能使读者快速理解版面信息,减少读者的阅读韶光,同时优化负空间使版面优化更完全。
末了,我们来看看下面企业名片的布局。
在这样小的空间里你看到了多少个单独的元素?眼睛要勾留多少次才能看全这张名片上的所有信息?
你的眼睛是不是停过5次?名片上的每一项看上去彷佛都和其他项没有关联,信息混乱。
那我们利用亲密关系将名片轻微修正下,得到下图。
从这张图上我们是不是就看到了名片的意义!
“我是谁?我的电话是多少?哪些办法可以找到我?”等等这些信息,在图二明显比图一更能准确的传达。
这便是亲密的浸染:让有关联的元素组合在一起成为一个视觉单元,而不是伶仃的元素,页面也会变得更加有条理。
综上,我们可以创造亲密性的目的是实现组织性。只管对齐比拟原则也能达到这个目的,但是利用亲密性原则会更加大略!
我们只需将大略的干系的元素放在一组建立更近的亲密性,就能自动实现条理性和组织性,信息也会更随意马虎被记住,而且能更好的表示留白。
案例实操,加深理解
为了让大家加深对亲密性原则的理解,我们来提取一段笔墨实操一下。
PS新建一个宽800,高1100,分辨率72的文件,就以上笔墨部分按照亲密关系我们先来打堆分组。使它们各自成为一个视觉单元,建立起条理性和组织性,方便阅读。
按照语义进行亲密性设置,把笔墨分为了三组。控住好组与组之间的比例,组内标题与内容的比例,让信息更有效的传达。在进行亲密性关系建立时一定要把稳间距的关系。字间距<行间距<段间距<组间距。
按照建立起来的亲密关系我们设计下海报。考试测验纯笔墨风格的海报设计,对笔墨进行提炼,当笔墨或者做润色,让其形成强烈视觉冲击力。
设计之前,用栅格赞助页面(上一期有讲到栅格化的设置方法,这里我们不再多做讲解),按照我们提炼的笔墨关系进行版式再设计。
主色调我们用了蓝色,辅色用了蓝色的高强度比拟色金色,色相环上相距120度到180度之间的两种颜色,称为比拟色。例如:主色调用了蓝色,要搭配蓝色的比拟色做赞助色,我们可以直接在色相(H)加上120度-180度间的所有数值。对付颜色不敏感的小伙伴可以试试。
字体选择上,为了增加字体比拟,标题改为了“方正清刻宋体”,正文选择了“方正兰亭细黑”,这里要解释下这些字体都是有版权的,小伙伴如果要设计商用的作品,请一定要确认好版权的问题。
在确定了亲密关系,字体,优化好颜色的根本上,连续排版。那么问题来了,在不借用素材的条件下,仅仅用这么些笔墨我们可以怎么样排版让版面更具饱满感和设计感?
在这里我们选择利用笔墨添补版面,由于笔墨的意义除了传达内容让读者阅读之外还可以润色版面添补版面。(前面也做过类似案例,不知道大家还记得吗?)
本次设计中我们提取了笔墨“亲密性原则”并添补设置为0,添加大小为2的金色描边,并通过层叠裁切的办法把笔墨符号化。
然后给笔墨建蒙版(如图示),简历选区在蒙版添补玄色遮挡。笔墨的一半就被裁切掉。这是笔墨符号化利用的一种常见方法-层叠裁切。讲到这儿跟大家轻微拓展一下,裁切可以是上,下,左,右等任意方向,裁切工具可以是笔墨/商品/人。
右侧小字部分按亲密关系分组利用比如较和对齐原则,很随意马虎让版面有更多可变性。
比如把版面做下对称换位置,再增加一个点缀色,背景改一下色系,画面感是不是又发生了变革呢?
然而右下角该怎么处理?一样在不该用素材的条件下,那我们再来做笔墨图形化。为了更好的达到图形化效果,可以选择在AI软件里完成一款球状镂空立体字。图示如下:
此效果步骤详解:
1,绘制添补为0,描边为1的正圆。
2,利用刻刀工具随意分割三块,然后输入文案“版式设计根本”一共6个字,分别对应在分割好的3个版块中。把稳3个块面要置于顶层(鼠标右键排列-置于顶层)。
3,分别对三个块面实行顶层封套扭曲。(选择块面和笔墨 工具-封套扭曲-用顶层工具建立)快捷键:Ctrl+art+c。
4,实行后全部选中并实行工具-扩展。并鼠标右键编组。
5,Ctrl+C复制,Ctrl+B原位粘贴不才方。颜色改为玄色按比例缩放在中央位置。
原图层改换颜色,全部选择,进行CTRL+art+b稠浊,这样球状镂空立体字就完成了,为了实现颜色的多样化和更突出笔墨,复制一个顶层字并改换颜色。球状镂空立体字效果就做出来了,记得保存好。
然后将做好的文件置入到PS里面,在PS里改换颜色进行编辑,放在右下角补给画面。颜色依然利用比拟色的配色法则(再提醒下大家可以直接做加减运算配色)。
主体画面完成了,末了我们再丰富下背景,这里采取了现有图形的再利用,详细操作如下:复制球体镂空图形笔墨,放大,图层稠浊模式为叠加,适当改变透明度。置于蓝色背景层的上方,可以考试测验多个位置的摆放。
做张样机看一下
以案例海报版式为基准,用同样的版式延展一张商业海报。
采取对角线构图的办法,主体置于右下角,把主题文案按照亲密关系分组成为6个独立的视觉单元。
配色上利用“采物法”吸取本身产品的颜色绿色作为主色,桌棍的木纹色作为辅色。提取笔墨放大符号化利用当背景,用几何形润色下细节。这样一张海报就完成了。
来张样机试试~
知识点总结本日的亲密关系到这里就讲完了,文末一起总结下本期知识点:
1,版式中亲密关系的建立,让它们就形成一个视觉单元,而不是多个伶仃的元素。这有助于组织信息,减少混乱,为读者供应清晰的构造。
2,在笔墨排版过程中要遵照:字间距<行间距<段间距<组间距,这样会让你的排版更具层级感,画面也会更干净。
3,配色可采取比拟色配色法(120度-180度)间的颜色都可以考试测验,也可采取‘采物法’吸取产品本身的颜色。
4,笔墨符号化利用,可以通过不同大小/不同位置/不同透明度 进行差异化调度。
你学废了吗?