平面设计

设计作品不够上档次,该如何提升?

雪涛

随着电商行业逐渐成熟发展,从几年前设计盛行的淘宝风到现在的要求高端、品牌化、上档次,大众人群的审美也在不断提升,电商行业进步的同时也带动着设计行业一同走向成熟。所以在日常的设计工作中,我们也常常会听到需求方要求:要够上档次、高端、有格调。这些比较抽象的要求如何体现在设计中往往是困扰我们的一个棘手的问题。那么本期就和大家一起带着问题探讨,总结一些提升设计作品档次的实用方法。

配色提升作品档次

配色已经算是老生常谈的一个话题了,这里我们暂且不说如何提升,先来看看前几年淘宝风的海报设计是什么感觉。

如上图所示,给人的感觉就是杂而乱,配色毫无章法。显然在当下电商的大环境下,这种相对粗暴的海报在平时会越来越少,转而要求品牌化、上档次的越来越多,那么从配色上如何提升作品档次呢?

1. 暗色调搭配提升作品档次

为什么说暗色调可以提升设计档次呢?因为暗色调或者说是低明度的色彩搭配,会在一定程度上减弱其色彩固有的属性以及因色彩产生的情感,从而使得整个画面变得相对冷静、上档次。用到的色相不宜过多(1-2 种即可),举个例子:

如图所示,暗色调搭配给人的感觉很舒服,而且也够上档次。通过降低明度的方式弱化大面积颜色固有的情感属性,让画面更冷静、理性,从而起到提升作品整体档次和视觉感受。

所以现在很多品牌设计中,暗色调的搭配用到的越来越多,也逐渐被现在的大众所接受。

需要注意:暗色的搭配方式很容易出现将颜色弱化到色感缺失,导致作品因缺少颜色属性而太过深沉,甚至乏味,没有亮点,所以可以适当地使用一些点缀色规避这一现象。切记:弱化颜色属性并不是要完全摒弃色彩。

2. 干净的配色提升作品档次

每种色彩都有其固有的情感属性,比如:红色-喜庆、热闹;蓝色-安全、科技……在非暗色调的情况下,干净的配色也能起到提升作品档次的作用。而说到干净,第一想到的应该就是白色:

如图所示,同样和暗色调的作用很相似,白色本身就给人一种干净、纯洁、高冷的感觉,大面积的白色弱化了其他色彩的属性,所以整体偏白色调也能起到很好的提升作品档次的作用,且要适当地使用点缀色。

也可以使用偏高明度低饱和度的色彩,这类颜色搭配同样也是减弱了颜色本身的固有属性,只是相比黑白灰色调而言,保留的颜色属性多一些。比如:

如图所示,当作品色调偏高明度低饱和度时,同样也能提升作品的档次。但是前提是颜色要干净、通透。切记:色相越少越好把控。

注意:配色并不是一成不变的,这里提到的三种配色形式是比较常用的,不管是暗色调、白色还是其他,都要让作品整体呈现出一种干净、舒服、通透的视觉感受。

不妨找一些品牌的海报看看,绝大多数的配色形式都符合我们前面所说的,而且即便用到一些色彩,大部分都是使用一种色相,目的也是为了避免大面积多种颜色碰撞,会给人一种不稳定、轻浮、的视觉感受。

通过前面案例,我们也能发现,虽然配色起到了一定的提升作用,但同样也需要留白。

留白提升作品档次

关于设计中的留白,这里强调一下留白并不等于空白,留白的目的是留出视觉元素中的喘息空间,让视觉更具有通透性。恰当的留白能够给人品质感、高端上档次的视觉感受。所以在设计中,并不是信息越多越少,而是要秉承少即是多的理念。举个例子:

如图所示,很显然,上图给人的第一视觉感受就是廉价,原因在于:

  • 视觉元素的使用太多,导致整个画面给人的感觉很杂乱,缺少留白空间。
  • 色彩使用杂乱,毫无章法可言,颜色与颜色之间也相互抢主体。
  • 各元素之间没有主次之分,缺少层次感。

而下图则给人一种很高冷、有档次的感觉,同样是茶,为什么第一眼给人的感受差距这么大?原因如下:

  • 在颜色上做了统一,且弱化了色彩属性,符合我们前面所说的配色提升作品档次的理论。
  • 视觉元素上有主次,层次分明,除了主体之外,其他元素都做了模糊处理,没有过多无用的元素与主体抢视觉中心。
  • 作品因为有了充足的留白而更具通透性,档次和品质感提升了很多。

留白在设计中是非常重要的,所以我也不止一次的提到过。而作为一名设计师,留白的运用也是一门必修课。留白:留出来的是喘息和想象的空间,留出来的是品质和自信。

恰当的字体使用

文案作为设计的一个信息载体,它要比任何图片信息都要更直观、一目了然。所以在设计工作中,字体的选择也是设计师的必修课。我们都知道字体库的数量多之又多,而每款字体所传达的视觉感受都各不相同,那么在日常的设计工作中,合理使用字体有助于提升作品档次。使用字体时应该注意什么?

1. 统一字体形式

这个点很好理解,就是作品中对应位置的字体要统一使用相同的字体,不要出现同一位置多种字体,比如:标题字体、副标题字体、说明文字字体等等,做到统一有助于提升作品档次。举个例子:

如图所示,我们对比来看,很明显①使用了多种字体的组合,给人一种很浮躁、杂乱甚至有些廉价的感觉,街头小广告也许能看到这么用的,没有体现出任何一款字体的气质,而其他三处则在字体上做了统一,给人的感觉很舒服,字体本身的美感也都体现得淋漓尽致。

2. 统一字体气质

前面我们也说了,每款字体所传达的视觉感受也都不同,在使用字体时,尽量选用气质雷同的字体相互搭配。比如:标题中国风字体,那么副标题和说明性文字就尽量贴合中国风的感觉或者与标题保持一致,这样做有助于提升作品的档次以及整体性。看个案例:

上中下三个案例,相比而言,底部海报给人的感觉品质更好,更舒服,下面我们逐一分析:

  • 上部:标题使用字体偏可爱、卡通类型的,而说明性文字则使用毛笔字,很显然字体气质差距太大。
  • 中部:标题使用字体偏中国风、古体类型,而说明性文字又使用卡通、可爱类型的,同样字体气质差距太大,不够整体。
  • 底部:标题使用字体偏宋体,说明性文字与标题保持一致,气质上完全吻合,所以给人的感觉要比前两个更有档次。

虽然字体的数量在日益增多,选择性也越来越大,但有些字体最好不要使用,比如:霹雳体、水滴体、涂鸦体、Adobe 黑体等等一些字形结构粗暴或者缺少细节的字体。

补充说明:提升作品档次,还需要注意背景要选择高清大图、产品要有质感、抠图不要有白边锯齿、模特尽量不要选网红、尽量不要选被人用过无数次的素材,尽可能将每一处做到精致、不要忽略每一处细节。

总结

文章主要从配色、留白、字体三方面作为提升作品档次的切入点,当然不仅仅只有这些,要灵活运用,这里只是为大家提供一个可供参考的方向。重点是要能从别人好的作品中提取优点,然后举一反三,形成自己的一套设计思路。简而言之,提升作品档次,就要尽可能地让作品干净、整洁、精致。

其实档次是比较抽象的名词,这是一种感觉,所以我们无法给出定义。作为设计师,我们需要做的就是通过设计的理论知识将这个感觉呈现给大众,让他们接受、认可。


文章来源:优设    作者:美工美邦

拿下 4 座奥斯卡的《寄生虫》,海报真的太有戏了!

雪涛

今天,你的朋友圈、微博首页是不是被一部韩国电影刷屏了?

韩国电影《寄生虫》在刚刚结束的第92届奥斯卡颁奖礼上斩获最佳影片、最佳导演、最佳国际影片、最佳原创剧本四项大奖。

p.s.文末附有第92届奥斯卡完整获奖名单和两个彩蛋,不要错过。

本以为拿到最佳外语片就结束使命的导演奉俊昊,在接连收获最佳导演和最佳影片大奖时,发表了一段激动人心的演讲,导演奉俊昊获得第92届奥斯卡最佳导演奖视频观看链接:https://v.qq.com/x/page/i3063i874m3.html

不想看视频的盆友们可以品品以下获奖感言:

谢谢,我以为拿了最佳国际影片后,今天就没事了,还准备好好放松一下,太感谢了!

在我年轻学电影的时候,有句话让我印象深刻,」最个人化的表达是最有创造力的「。说这句话的人是我们伟大的马丁·斯科塞斯。

我在学校的时候学过马丁·斯科塞斯的电影,能够被提名已经是巨大的荣誉,我从没想过自己会得奖。

当美国人不熟悉我的电影时,昆汀一直在推荐我的作品,他今天也在这,太感谢了,昆汀,我爱你!还有Todd,和Sam,都是我非常崇敬的导演们。

如果奥斯卡允许,我想买一把德州电锯,把这个奖分成五份,和你们每个人共享。谢谢!我会畅饮到明天早上的,谢谢。

这段获奖感言或许也能激励无数迷弟迷妹们,如果你获得了大奖是可以直接在领奖台上向爱豆表白的!

奉俊昊看着奥斯卡小金人,嘿嘿地笑了起来。

在领取最佳原创剧本奖时,导演奉俊昊提到「剧本创作是一个孤独的过程」,这样的孤独我们可以从一本《寄生虫-分镜书》猜测到一些。

韩版由著名的DVD发行公司plain archive出版,包含剧本+分镜头书

相比直接雇佣员工专职绘制分镜头,导演奉俊昊选择自己绘制分镜头,他会把随时能想到的元素都画在自己的iPad上,再通过云盘同步。

凡事精益求精, 或许也是这部电影能横扫奥斯卡的原因吧。

除了电影好看,《寄生虫》各个版本的电影宣传海报也值得我们细品。

剧照海报有内涵

这部电影的所有海报中,最出名的就要数韩国正式海报了。这张海报非常具有现代主义的美学感,但每个人的眼睛都被一条方形长条盖住了。

细心的盆友或许会发现,电影中的穷人眼前的都是黑色长条,而富人眼前的都是白色长条。这或许暗示着贫富差距带来的视角都是不同的。

而电影中的一些关键元素,例如圆锥形帐篷,奇石,只露出一半的腿……也点缀在这张海报上,悬念满满。

很多国家和地区的宣传海报也是根据这张官方海报进行修改的,除了文字不同,其他的地方几乎没有变化。

以文化艺术为名的法国宣传方看不下去了,保留了关键元素「黑色长条」又设计了一个新版本。这个版本上的贫富差距更加赤裸裸:富人都穿了鞋,穷人都光着脚。

由上面这张海报衍生出来的负片版本中写了这么一句话「没有人是非黑即白的」。

泰国版的海报则是直接变成了黑白照片,原本温馨的全家福瞬间变得诡异。

法国宣传方发布了一张表面上其乐融融的全家福:

但是有细心的设计师透露这张海报是对法国喜剧海报的恶搞。

除了上面这些根据官方海报、剧照衍生出来的海报,还有一些插画风格的海报更让人印象深刻。

插画海报有故事

其中不得不提的就是下面这两张水墨风格的国际版海报,看懂这两张海报你才算是看懂了电影。

第一张海报以电影中的关键道具「石头」为主体,穷人一家站在山顶,富人一家坐在岸边,这样看似一高一低的地位都少不了影片中的关键元素「水蜜桃」。

但这一切都是幻影,水中的倒影才是贫瘠的现实,富人依然凌驾于穷人之上。

第二张海报中,原本平静的水面开始波澜起伏,象征希望的石头上也变得血淋淋。

看到上面这两张海报,或许会有不少人联想起同样是韩国电影的《小姐》的海报,同样相似的画风、细节上用关键元素装饰,一张图就把一部电影说透了。

或许是受「倒影」的启发,设计师 Andrew Bannister 也创作了一张可以翻转过来的海报,这张海报更加赤裸裸地揭露了电影中的贫富差距。

一上一下的行走方向,和红绿色调一样,充满了对比和冲突感。

如果穷人想跨越阶级向上爬,就要像这张海报的背景一样,付出血红的代价。

下面这张由葡萄牙艺术家Vicente Niro和IgorMade创作的海报更直白地把人之间的互相压迫展现了出来:

艺术家Randy Ortiz创作的一张海报揭露了在这部电影展现的世界中,穷人有时候还不如富人养的一条宠物狗:

建筑海报有彩蛋

除了上面这些以人物为主体的海报,还有不少设计师将目光聚集在了电影中贫富两个家庭居住的环境上。

韩国艺术家Jisu Choi详细地绘制了电影中富人一家居住的房子:

这张海报上的建筑风格和构图,启发设计师Curzon release设计了另一张藏满彩蛋的海报:

这张海报上几乎把电影的关键元素都放进去了:披萨盒、石头、自画像、桃子、帐篷……你甚至能找到灯饰中隐藏的摩尔斯电码,和桌子底下的奥斯卡奖杯。

除了这些暗藏彩蛋的建筑海报,还有一些通过建筑表现贫富差距的作品。

加拿大艺术家Marie Bergeron在海报上突出了电影中两个家庭高低阶级的压迫和对立:

当你以为穷人一家已经身处底层时,没想到还有比他们更底层的人,而富人永远都处于顶端。

△ 上图由bearjew 416创作

写在最后

一部好的电影值得影迷们的赞美,也值得设计师不同角度的演绎。从上面这些不同风格创意的海报中,我们也能知道这部电影为什么能横扫奥斯卡奖了。

除了寄生虫,还有一些设计师为奥斯卡最佳电影奖提名电影创作了一系列的海报,看看你能猜中多少部?

△ 海报由艺术家Olly Gibbs设计

△ 海报来源于SG Posters

最后附上第92届奥斯卡奖完整获奖名单:

  • 最佳影片:《寄生虫》
  • 最佳导演:奉俊昊《寄生虫》
  • 最佳男主角:华金·菲尼克斯《小丑》
  • 最佳女主角:芮妮·齐薇格《朱迪》
  • 最佳男配角:布拉德·皮特《好莱坞往事》
  • 最佳女配角:劳拉·邓恩《婚姻故事》
  • 最佳原创剧本:《寄生虫》
  • 最佳改编剧本:《乔乔的异想世界》
  • 最佳动画长片:《玩具总动员4》
  • 最佳纪录长片:《美国工厂》
  • 最佳国际电影:《寄生虫》
  • 最佳剪辑:《极速车王》
  • 最佳摄影:《1917》
  • 最佳视觉效果:《1917》
  • 最佳音响效果:《1917》
  • 最佳音效剪辑:《极速车王》
  • 最佳艺术指导:《好莱坞往事》
  • 最佳服装设计:《小妇人》
  • 最佳化妆与发型设计:《爆炸新闻》
  • 最佳原创配乐:《小丑》
  • 最佳原创歌曲:《火箭人》(I’m Gonna) Love Me Again
  • 最佳动画短片:《发之恋》
  • 最佳真人短片:《The Neighbours‘ Window》
  • 最佳纪录短片:《女孩的战地滑板课》

你喜欢的那部电影获奖了吗?

文章来源:优设   作者:Canva设计

视觉缺少层次感怎么解决?

雪涛

「层次感」这个词在设计中的出现频率是很高的,主要体现在信息层级关系和视觉丰富度这两点,而缺少层次感的设计会给人一种信息杂乱、画面单调的视觉感受,甚至枯燥、乏味,这也恰恰与设计目的相悖。那么当我们的作品出现层次感缺失时,应该从哪些方面着手改善、解决呢?本期内容希望能对大家有所帮助。

视觉元素差异化

营造视觉元素的差异化可以起到很好的改变画面信息层级关系的作用,从而增强设计作品的层次感,这和对比手法很雷同。无论是画面中的视觉元素多还是少,都要做到有主有次、有大有小、有粗有细、元素与元素之间形成对比关系,举个简单的例子:

很明显第一排的形状之间是完全相同的,在视觉上给人的感觉就会很平,缺少变化;而下面两排在视觉上都营造了一个与周围存在差异化的视觉元素,使得整体在视觉上有了阅读的先后顺序,形成了简单的信息层级关系。

当画面中的视觉元素相同或者相似时,信息的层级关系就相对而言不容易体现出来,那么此时就需要我们营造具有差异化的视觉元素打破这一现象,从而增强画面的视觉层次感,无论切入点是什么。再比如我们看到的风景照:

从近到远在视觉上存在着很明显的差异化,比如:近实远虚、近大远小、近处的饱和度高远处饱和度低、近处的明度暗远处的明度亮等等,大自然的风景本身就能很好地诠释视觉层次感,所谓「设计源于生活」正是如此。那么这些应用到设计中又应该如何体现呢?下面再看一个例子:

如果产品这么摆放的话,那么何来层次感而言呢?只能理解为重要的事情重复三遍。做个小小的改变:

画面有了大小关系,故而有了主次关系,此时视觉的层次感已经有所体现:

大小与虚实的双重结合,视觉层次感更加强烈了,加点透视看看:

这里做了点透视效果,结合大小、虚实的变化,是不是有种由近到远的既视感?通过营造视觉元素的差异化,视觉层次感也更加强烈,这种虚实结合的形式在设计中也非常实用,下面我们再看案例:

这种虚实对比的形式也是视觉元素差异化体现形式之一,很直观地提升了整体的视觉层次感,包括在一些文字排版中也很实用。所以当我们的作品整体视觉层次感不够强烈时,不妨试试通过营造视觉元素差异化的形式进行提升和改变,只是既然用了这种表现手法,就要做得足够明显,否则只会适得其反。

装饰性元素

我们前面说了,提升视觉层次感可以从两个点切入,即:提升信息层次感以及画面整体丰富度,而装饰性元素的使用刚好可以契合这两点,它既有提升信息层次感的作用,又能起到很好丰富画面的作用。下面我们看个案例:

通过上下两个案例的对比我们发现:

  • 上侧案例画面整体的丰富度欠缺,甚至感觉有些空;而且文字信息没有形成很好的对比关系,信息的层次感受也比较单一,所以给人感觉层次感不够。
  • 下侧案例中用到了一些装饰性的文字、线条、形状符号等,首先在视觉丰富度上较上侧案例中就提升了很多,不会给用户一种空的感觉。其次这些装饰性的元素与主文案在视觉上也形成了很好的对比,使得画面有了主次、大小之分,视觉形态的变化形式更多,视觉层次感也更加强烈。
  • 装饰性元素可以是文字、线条、形状、图形等等一些点状、线状的元素,甚至于一些块状元素(比如:水印文字、产品等),目的是通过增加画面丰富度和视觉形态变化的多样性提升整体视觉层次感。

需要注意:装饰性元素也不能过多的使用,因为过量使用很容易在视觉上形成散乱、不够整体的情况,要根据实际情况合理使用。

使用肌理

使用肌理是设计中非常实用的一个设计手法,肌理有着很好的丰富画面、增加细节、提升层次感的作用,比如可以用做一些海报的底纹、文字的材质,甚至是一些形式感很强的肌理可以作为画面的抽象主体。下面举个例子:

案例中将远山风景图片通过透明度调整作为肌理使用,这样做的好处在于:首先肌理相较于整个画面来说不是那么显眼,这样就避免抢了主体;其次因为远山给人的视觉感受就是层次感强烈,而这里当作肌理既起到了一定的填充、丰富的作用,又保留了一些远山的属性,在视觉上层次感更加强烈。

再比如一些文字也会使用肌理,用于增强文案信息的视觉层次感受,比如:

主要字体使用肌理会在让其形象更加鲜明,与正常文案形成对比,也能间接提升文字排版的视觉层次感。

改变配色形式

当作品视觉层次感不够强烈时,我们可以转化为思考如何提升画面丰富度以及信息层次感。比如前面说的:对比、装饰元素、肌理都可以与之对应起来,那么为什么说合理的使用色彩在一定程度上也能起到提升视觉丰富度的作用呢?下面举个例子:

这里是通过有彩色与无彩色的案例对比,以视觉感受来看:左侧明显比右侧显得更空一些,因为色彩也是一种信息传达的媒介,也就是说颜色也在传递信息,所以当画面显得空、缺少层次感的时候,通过颜色的调整也能起到一定的增加视觉层次感的作用,举个例子:

这里只是改变了底色,在视觉丰富度上给人的感受差距一目了然,因为纯白底会给人一种空、缺少内容的视觉感受,所以一般情况下我们的处理方式会选择添加一些视觉元素,比如:装饰性元素、材质、线条等等,现在我们又多了一个选项,就是无彩色向有彩色的改变,虽然这种方法有一定的局限性,但也不失为一种可行的解决方式。

营造叠加关系

其实这种营造前后叠加关系的方式在之前的文章中也提到过,其实就是寻找元素与元素之间的物理叠加关系,会给人一种很强烈的层次变化,对于提升画面层次感能起到立竿见影的作用,比如:

案例中的文字与主体物之间存在着视觉上的前后叠加关系,给用户更强烈的视觉层次感,这种营造前后叠加关系的处理手法在标题设计中也很实用。

透视

透视也可以理解为营造空间关系的手法,当平面的视觉元素赋予其透视关系后,会形成一种类似三维空间的视觉感受,在一定程度上也能起到增强画面视觉层次感的作用。下面举个例子:

很明显,透视的感觉会给人一种空间感、延伸感,视觉层次更加强烈,这种形式在日常的设计中也很实用,比如:

改变透视会在视觉上形成一种纵向的延伸感,空间上层次关系更加强烈,只是这种形式有一定的局限性。

案例

结合今天所说到的这些手法,通过不断演变的形式,我们简单做一组文字排版的案例:

这就是一句普通的话,没有主次、没有修饰、毫无层次感,改变一下:

已经有了信息的层级关系,即大小对比,视觉元素之间形成了差异化的表现,还可以继续深入:

通过改变颜色,对比更加强烈,层次感稍加增强,感觉还不够?下面我们继续再改:

这里通过肌理、虚实结合以及改变字体形态的表现形式,使得整体视觉层次感又提升了一个档次,如果还想继续提升,那么就要想,还缺少点什么?比如装饰性元素试一试?

增加了装饰性元素之后,画面整体的丰富度提升了很多,而且对比的形式更多元化。案例中主要用到了:差异化元素、对比、肌理、装饰性元素这四种表现形式,当然这也许不是最好的表现形式,目的是为了让理论成为实践。

总结

当作品缺少层次感时,上述的一些改变方法可以供大家参考,但是不要仅仅局限于这些,还有一些我们常用的,比如:投影就非常实用,可以给文字、色块、主体物等等做投影,拉开前后关系,这样也会一定程度上增强视觉层次感。再比如:倒影、环境感等等,这些目的都是尽可能去丰富画面、营造信息层次关系。并不是说这些手法一定要完全体现在一个作品上,层次关系过多反而会使得画面整体散乱,一定要根据实际情况选择使用,切记并不是视觉层次数越多就越好,这是一个误区。

掌握重复原则,帮你轻松塑造画面统一性

雪涛

重复、对比、对齐以及亲密性是版式设计中的四大原则,各种排版形式与规则都是基于这四大原则衍生而来,而掌握这些具有指导性的设计原则,能够帮助我们在短时间内,更快更好的达成设计目标。本期给大家讲解四大原则之 —— 重复原则。

什么是重复原则

重复原则是指:版面中的视觉要素要重复出现,可以重复颜色、字体、图形、形状、材质、空间关系等。使用重复原则既能增加画面的条理性,还可以加强统一性,让版面更富有层次感、逻辑性,可以提高阅读效率和信息的传达。有规律的重复可以产生节奏感和韵律美,增强观者的印象。

仔细观察,生活中随处都有重复之美:

重复原则的使用

1. 文字样式的重复

同一级别的文字信息需采用相同的文字样式,也就是说,在字体、字号、字重以及特殊效果等方面都要保持一致,方便阅读和信息的传达。

此案例并列关系的文字信息,重复使用了同样的字体、字号、字重。可以很直观地把大量的信息分为四个信息层级:主标题、小标题、正文、辅助说明文字。

2. 配色方案的重复

色彩的重复在版面设计中尤为重要,当一个版面中出现太多颜色,控制不好版面便会出现杂乱花哨等问题,因此使用重复的颜色,控制好色彩的种类、纯度和明度,让版面更和谐统一是最常用的方法。

标题选择和图形颜色统一的深蓝色,并使用橙色进行点缀突出;展览时间是次级要强调的信息,选用和图形颜色统一但是比标题浅一些的青色进行强调;展览地点和内容处于三级信息,使用无彩色的黑色进行弱化。这样三个层级信息重复使用相同的色彩,让版面信息清晰有序,能保证较好的阅读体验,有助于信息更好地传达。

3. 图片使用的重复

有多张图片需要出现在同一版面,需统一图片的大小、色调、比例、裁切方式等,这样可以使版面美观整齐。

整个版面出现的人物非常多,但图片统一采取退底形式,并把颜色调整为黑白,具有很强的整体性。

4. 设计元素的重复

设计元素(如图标、形状、肌理、空间关系等)在版面中起到了强调和装饰的功能,而同类的设计元素重复出现,不仅使版面有了统一的风格,也丰富了视觉效果,使版面更有设计感和整体感。

如上一期对齐原则的案例示范中,就使用了各种设计元素的重复:文字背景框统一的伪立体效果图形,背景图案的黄色几何形状和背景黑色点状肌理。正是这种形状的重复,在很大程度上造成了整体设计的统一性和其独特风格。

重复原则的作用

1. 统一性、秩序化

重复是构成统一与秩序的关键,让视觉要素在整个作品中重复出现,统一的字体样式、重复的设计元素、相同的图片形状与裁切方式,这样既能增加条理性,还可以加强统一性。让页面更富有层次感、逻辑性,提高阅读效率和信息的传达。

2. 整体性、风格化

重复产生统一,统一形成风格。重复不仅对单个页面很有用,对于多个页面的设计更重要。正是在多个页面中运用重复原则,才赋予了整体设计上的统一感、整体性,才形成了一定的设计风格。

我们会觉得这几个页面属于同一个应用,因为它们都具备一些相同的细节特征,比如一致的几何图形、不断复现的色彩 、相同的字体、有规律的字号字重、统一的构图形式等等,这些重复的元素相互影响并不断加强我们对页面相似处的感知,所以我们一致会觉得这些页面的风格是统一的。

3. 节奏感、律动美

节奏最常见的形式就是有规律的重复,是版面构成要素利用疏密、聚散、连续、渐变等方式有条理有秩序地重复呈现,形成一种律动的美感,还可以增强观者的印象。

重复与变化

有优点就有缺点,重复给人带来统一与秩序感的同时,还会带来呆板、乏味、机械化等负面印象。应当尽量采用多样性实现统一, 在保证版面有秩序的前提下,让设计元素产生形态的差异或距离上的变化来调节视觉感受,不规则的重复会让画面更动感、活泼。

在重复中产生变化,一是可以避免版面的单调与平淡,增加版面的趣味性,激发读者阅读和观看的兴趣;二是为了形成反差,区分主次,突出重点。特异点更易获得视觉聚焦,引起注意。

案例实操

为了让大家加深对重复原则的理解,提取本期文章的主要内容作为原始资料,运用重复原则进行设计示范。

运用「亲密性原则」进行信息的分组和距离的调整,排版时要遵循「对齐原则」。运用「重复原则」把同一级别的文字设置为相同的文字样式,增加条理性,加强统一性。

继续丰富画面,加入配色和设计元素,相同级别的文字信息使用统一的颜色和点缀元素,让页面更富有层次感、逻辑性,提高阅读效率和信息的传达。

现在画面文字信息已经清晰而有序的排列好,但是缺少主体。把标题内容「重复原则」作为主体元素进行设计,给文字加入从橙色到蓝色的渐变。

复制四组新的文字,使用自由变换工具把文字压扁,每次变形的程度逐渐加强,使其呈现出渐变的节奏感,形成一种模拟翻页效果。

把设计好的文字复制一份,并镜像翻转,主体就设计好了。重复出现标题内容,可以增强视觉冲击力,有较强的形式感,可以让观者加深印象。

把设计好的主体元素和文字信息放置到画面中,使用上下构图,采取黄金分割比例进行布局。

最后给背景加入点状肌理,在信息群组间加入线条,使层次分割更清晰,让细节更丰富,视觉效果更美观。设计完成:

样机效果:

总结

重复是构成统一与秩序的关键,使用重复原则能让版面更富有层次感、逻辑性,可以让信息层级更清晰,能保证较好的阅读体验。有规律的重复可以产生节奏感和韵律美,增强观者的印象,有助于信息更好传达。

重复不仅仅是单一、机械地重复使用某些元素,而是要兼顾版面的形式美感与内在的图文内容,让版面实现内容与形式的和谐统一。

文章来源:优设  作者:艺海拾贝Design

如何让你的设计更吸引人?

雪涛

本篇文章立足于模糊的基础上,从概念原理上详细的讲述模糊在实际使用中的视觉表现以及处理技巧,希望对大家有所帮助~!

文章来源:优设   作者:Martin_K

PPT 背景设计思路

雪涛

从性质上来说,我们看到的背景一般都会分为 5 种:纯色、渐变、肌理、图形、全图,但在真正开始做设计之前,我们并不会直接在这 5 种性质的背景里挑选,反而会从一些其他的维度先去思考,才能做出具体的选择。

△ 发布会背景的 5 种性质

因此在这 5 个性质之外,我们还要引入其他的思考维度,而这些思考的维度才能够让我们真正能做出「符合当前页面内容」的幻灯片背景。

按照幻灯片背景设计的时间流程线,可以分为 8 大维度:直观感,主视觉、布局感、场景感、设计感、平衡感、氛围感、跳跃率。

△ 发布会背景定制的 8 个维度

直觉感

通常我们拿到客户的标配原稿都是白底黑字的形式,这时我们首先考虑的出发点是:
整个幻灯片希望给人传达的是偏向「明亮阳光」、「沉稳大气」的哪种感觉,这两种截然不同的感受会让我们在背景选取的时候,倾向于「亮色调」,或是「暗色调」。
在这个阶段我们并不会思考幻灯片背景到底是属于「纯色、渐变、肌理、图形、全图」哪种,这个阶段思考这个问题实在是太早了,我们只能从一个非常简单却又截然相反的两条路径,这时候是没有任何细节可言的。

——这被我称之为「直觉感」。

这是我们根据信息片段,不用太多思考,而出现的想法、感觉、信念或者偏好,可以帮助我们进行快速决策——这是设计师/团队对内容而产生的直觉洞察,本质上是个人的知识体系和经验对其做出的判断,没有过多的原因。

△ 纯白/纯黑背景的内容原稿

这两者的选取会在一开始做设计的时候,就会带给我们不同的思考角度,当我们确定了调性后,我们就会把原稿的背景色直接改为纯白或是纯黑,方便我们潜移默化地思考气质。

但这个阶段确认方向,有便于自己找到调性上的初心,不会在后期的细节设计中陷入方向性的错误。

主视觉

当我们把整个页面的直观感受判断清楚以后,接下来可以涉及一些具体的设计性质,通常设计情况分为两种:一种是「有迹可循」,另外一种是「无迹可循」,分别对应不同的背景设计方法。

对于发布会而言,「有迹可循」的情况最直接的就是主视觉(Key Visual)沿用的情况(以下称之为主KV);「无迹可循」就需要从所需传递出的感觉和美感相结合来考虑,将在「场景感」和「设计感」两个维度谈及。

每一场活动基本都会有一个主 KV 用于奠定活动的视觉基调,所以幻灯片在大概率上和主 KV 会有一定的联系——但这中间会需要我们准确判断出两个小的隐藏需求:

  • 需求方对于主 KV 的态度
  • 需求方对幻灯片的期望

这两个隐形需求,在前期沟通的时候一定要确认出来,否则的话有可能会造成很大的误解,导致很多额外、不应发生的问题。就此说明一下:

1. 客户对于主KV的态度

一种情况,是需求方对于这个主 KV 本身有一定的不满,但由于各种各样的因素最终使用了这个主 KV,如:

  • 上级决策人喜欢这个主 KV;
  • 决策人是其他的部门;
  • 设计团队属于自己不可完全操控的外部合作方;
  • 时间不足以再次调整;
    ……

△ 需求方可能不太满意的主 KV

由于主 KV 已定,需求方会寄希望于幻灯片的设计上,内心的需求是:「能够基于主 KV,但不止于主 KV」。

另一种情况,是需求方对主 KV 的某些部分乃至全部部分都比较满意,允许设计师/团队使用主 KV 的部分亮点元素进行设计——其中的幅度最好在前期设计之前探索清楚,具体沟通的技巧涉及两方自身和彼此的合作经验,需两方共同配合。

△ 需求方比较满意的主 KV

其中有一个技巧就是:看看需求方是否有将主 KV 应用到整个大会的物料设计之中,如果有的话,那么幻灯片遵循对应风格一般都属于「政治正确」的操作。

2. 客户对幻灯片的期望

正如需求方对主 KV 的态度会影响他对幻灯片的期望,需求方希望设计师/团队能遵循统一的调性(毕竟是同一场大会),但如果直接 100% 沿用主 KV 的话,也可能会出现问题。
因此,设计师/团队需要和需求方确认幻灯片设计对于主 KV 的「沿用自由程度」。

  • 完全沿用主 KV 元素:大会对幻灯片模板要求得比较严,没有太多可发挥的空间。相当于直接用主 KV 的底板来作为我们幻灯片设计的底板,允许的幅度是:色调不能改变、只能压暗处理,允许对主体元素做放大、缩小或半透明的处理;
  • 部分沿用主 KV 元素:允许设计师/团队使用主 KV 的部分亮点元素进行设计,主体元素可以进行一定的替换,颜色可以有一定调整;
  • 完全不沿用主 KV 元素:可以完全不按照主 KV 的背景,另定风格展开设计。

△ 对主 KV 元素的 3 种沿用自由程度

这三种情况其实都真实存在,实际上我也都遇到过。

这里有个经验,是如果设计师/团队只问一个非常简单的问题:「幻灯片设计是否要按照主 KV 来走」。需求方一般会说:「我们要遵循主 KV 的风格」,实际情况是能要求完全不遵循主 KV 的需求方很少,除非设计师/团队成功做出了能惊艳到需求方的作品。

但由于没有明确「沿用自由程度」,就会在设计的时候带来较大困扰。
这个困扰主要来源于:对于主 KV 的「沿用自由程度」,直接决定了对于幻灯片的「设计自由程度」。

△ 扩充「设计自由程度」

设计师/团队和需求方确认主 KV 的「沿用自由程度」时,并不是在限制自己的「设计自由程度」,反而是在扩充「设计自由程度」——要知道设计过程中有哪些是不能做的,而有哪些是可以去尝试的,从而来确认有多少设计想法是被允许的,有多少程度是能被实施的。

因此在有主 KV 的大会,幻灯片背景设计的首要考虑维度是「主视觉」。

布局感

着手制作幻灯片背景的时候,在整体角度考虑下的「布局感」尤其重要,我们先看一个设计需求较高的案例:

对于设计感要求非常强的需求方,会希望每一页的背景都都尽可能的多变(即使是同样的元素,也希望把位置稍微调配一下),这一种需求对于设计的要求是比较高的。

△ 每一页背景都尽可能多变的需求

我们可以这么理解:

  • 全篇需要统一的背景,这时的设计要求相对是的;
  • 反之每一页不同性质的背景,要利用相同的元素作为贯穿做统一化处理,实现最终的统一,这时候所要求的难度是最高的。

并不是背景每一页不同就是好的设计,对于内容比较多的幻灯片,需要在内容上分层级,例如有 4 个篇章的幻灯片,可能每一个篇章的背景是统一的,在下一个篇章的时候才会做一定的调整,正如「002 号知识发布会」的背景:

△ 通过整体布局规划实现背景布局感

幸运的是,在真实的使用场景中,所需要的程度通常是:在某一些页面有单独的定制化,而其他的页面可以使用统一的背景。如:20 页不同的背景,改为 8 个不同的背景(相当于:4 个章节+ 4 种背景+ 4 种背景),这是通过规划背景来提高统一性并降低设计难度,有实际应用意义。

场景感

需求方没有给到主 KV,或者甚至主 KV 也是由设计师/团队设计的时候,就要和需求方沟通他们想要的感觉,尤其注意演示场景对背景设计的影响,兼并考虑效果的美感度。

从单页的角度看,所有的背景都要考虑现场演示的「场景感」,其中较为突出的是纯色背景和经典搭配的渐变背景。

1. 纯色:简约大气

纯色的技法不难,但颜色选取非常重要,其中的难点主要是对于客户想表达的这一个内容的颜色匹配和颜色选取上。

其中分为:纯黑背景和其他颜色的纯色背景。纯黑背景带给人极其稳重的感觉,而其他颜色的纯色背景则相反,带给人干净洁净的感觉。

△ 不同气质的多种纯色背景

无论哪种纯色背景,其中有两个隐形的要求:

  • 现场投影的 LED 屏幕的显像质量要高;
  • 演示场景下的灯光也要有一定的配合度。

成像质量高的屏幕能让观众拍照时不会受到太多由于亮色纯色带来的成像问题,而越接近纯白色的色调就越需要现场灯光的配合,如果配合得不好,可能演讲人会成为背景上的「剪影」。

2. 渐变:经典搭配

渐变是发布会中一直都比较流行的背景色,Keynote 的自带模板 Gradient 就是这样的典范。

从上到下的黑色渐变到「深紫」「深蓝」「深灰」的搭配,在发布会中被使用频繁,由于底部颜色较浅,能更好衬托内容和演讲人,是发布会的经典搭配。

△ Keynote 的 Gradient 背景

设计感

除了之前提到的各种考虑外,设计的美观程度非常重要,有的页面在「纯色」「渐变」「肌理」等都可以选择的情况下,「设计感」就是其中很重要的思考出发点。

1. 渐变:多变流行

随着审美不断地提高,有很多国内大厂的发布会渐变是没有太多规律的,这种流线型的美感容易让别人对科技感和定制化感受深刻,这种渐变的制作难度会更高。
这种出彩的颜色在新兴行业使用较多,偏传统类型的公司就不太适合。

△ 背景非线性渐变背景的发布会应用

此外,接近纯色的背景上通过光影制造亮点也是高级手段,能让画面呈现丰富细节,显得耐看很多。

△ 通过光影制造背景亮点

2. 肌理:细腻耐看

单纯以肌理作为背景的设计并不算特别多,它的好处主要是在于让整个画面看起来更加有质感一点,比纯色要显得更加有设计感。

通常肌理也会和光影相结合,来体现这一个页面的高档和奢华感。通过案例我们也可以看到为了突出产品和高档气质的发布会页面会使用这一种设计。

△ 通过肌理突出页面气质氛围

平衡感

由于每一页的幻灯片内容容量的差异,会造成在每页的版式差异,不同版式所需的「平衡感」所需背景是不同的:

  • 上下结构、直接居中的页面:可以使用对称/对角线添加元素来避免单调感和增加平衡感,起到突出中心的作用;
  • 左右结构的页面:可以在内容容量较小的一侧辅助类元素,协助页面实现版面平衡,同时避免页面单调。

△ 背景中添加辅助元素结合版式平衡页面

氛围感

这 5 个性质的背景,都具备一个隐性的作用,就是对内容进行含义赋予,也就是增加「氛围感」。

如果一个幻灯片从头到尾都是纯色的背景,甚至也都是单一的背景,这一个背景能赋予这个页面的含义就是单一的,可能就是让人感觉到某一种感受,仅此而已。

△ 单一的背景

如果定制化比较强,就会有不同的需求对页面背景进行含义赋予,如:

  • 承载不同的内容信息
  • 对内容进行诠释
  • 增加更多的视觉上的感受
  • 增加页面的氛围
    ……

1. 图形:属性点缀

有的时候我们也会用点线作为页面背景元素,使用「点阵」或者「多线段混合工具」效果填充页面,让整体的页面图版率提高。

△ 「点阵」和「多线段混合工具」效果

也会有一些情况会用圆形、点线、多边形来做页面的点缀,不同属性的形状会有不同的气质:

  • 圆形:圆润感
  • 点线:多变感
  • 多边形:动感

所以在选择的时候,我们会考虑想要体现的感觉来选取形状。

△ 圆形、三角形、多边形的图形背景

2. 全图:氛围浓烈

前段时间很多大厂不约而同使用了全图型背景,让这种设计手法广为流传。

具象的图片让观众直接身临其境,时间的朋友的「大豆君」、「深圳」都是这样的用法;而在一些企业愿景页上,直接放上公司的图片也能体现出非常直接的关联性。

△ 具象式配图

全图型的图片不一定和具体的内容完全一一对应,存在象征的可能,无论是:星空、山川,还是用黑板的粉笔字比喻算法等,都会在实际使用时起到象征的意义。

△ 象征式配图

如果既不是产品对应的具象图片,也不是起到象征意义的配图,就不要为了美观而放和主题无关的图片,否则容易让观众困惑。

实际使用的过程中,往往由于各种原因,直接找到的真实图片不足以支撑整个发布会背景,如:

  • 尺寸不够大
  • 直接应用对比整体显得突兀
  • 尺寸长宽比对比屏幕不足
  • 蕴含含义不足以完美呈现文案内容
  • 没有直接可呈现页面内容的图片
    ……

这时我们就需要对图片「融合背景」处理,既和整体背景统一,也加入了页面的必要内容。

△ 象征式配图

如果页面内容需要实际真实可观的场景来辅助呈现,就需要通过合成来「制造场景」,让观众能直观看到文案含义,就能加速对内容的理解;还可以合成现实中不存在的图片作为背景,增加氛围的感受力度。

△ 象征式配图

跳跃率

背景的「跳跃率」是我从「文字」和「图片」的含义中引申使用的。

△ 文字跳跃率

△ 图片跳跃率

△ 图片跳跃率

文字跳跃率和图片跳跃率描述的是素材之间的大小、景深的差异,而借用「跳跃率」的名词来用在背景上解释,就是整个幻灯片背景的素材各方面的差异程度。

△ 整体调性和每页的调性

即使每一页单独看起来是比较和谐的,但受限于每页内容的图片质量、色调等的不同,不可避免地有可能整体看起来会显得比较混乱,这时就要做一定的调整,确保整体统一性,才能让作品形成整体。

其中要把握的是:既不能完全一样,也不能完全不同,这之间的取舍体现出的就是设计师在制作时的把握度了,也是功力的体现。

从草间弥生到高田唯,历数日本那些独树一帜的设计风格

雪涛

提起「日式风格」,大家脑袋里会闪过哪个画面?性冷淡设计?无印良品原木风?樱花配上小清新滤镜?「简素」、「侘寂」、乃至念上它一句「Less is more」?

△ 无印良品艺术总监原研哉作品

总之,按照大众流行的印象来概括,东瀛来的设计应当是性冷淡、实用、柔和克制的色彩、自我克制。

但这样几个印象,足以概括日本设计吗?

土味、浮夸,日本设计翻个面

咱们先拿一个国产的外包装设计来抛砖引玉——椰树牌椰汁外包装。

如果以大众印象里日本设计的评价标准来说,这个外包装堪称是泥石流一样的存在——只有信息的堆叠,跟当年恒源祥「羊羊羊」的洗脑广告思路如出一辙。

但就在前几年,一位知名的日本设计师却为这样一种设计点了个赞,宣称这是「了不起的设计」,还充满少女心地发了个图,表示就冲这包装,自己每天早上都要干上它一瓶。大有他乡遇知己,相见恨晚之感。

这个设计师名叫高田唯。他的设计,跟椰汁魔性的外包装异曲同工:有如街头牛皮癣小广告一样的画面,江湖人称「新丑风」。

但注意,「新丑」这个词,高田唯自己可不接受,他不认为自己算是「新丑」,应该是「全丑」才对——丑怎么能分新旧呢?丑就应当是纯粹的丑。

△ 高田唯作品

而高田唯,只是日本设计的一个缩影。如果我们把常规印象里,日本设计性冷淡那一面翻过来炒一炒——你会发现那魔性、浮夸、充满脑洞的土味日式风同样在国际舞台上有自己的一席之地。

△ 脑洞设计师 吉田ユニ的海报作品

画风突变的高田唯

咱们先讲高田唯那些街头牛皮癣一样的作品。

实际上,他并不是一开始就成为了日本设计界的邪教徒。纵观他的早期作品,虽然不受认可,反倒是一板一眼、规规矩矩的名门正派弟子画风。

△ 高田唯的早期作品:左为 2009 年「印刷のいろは」 海报,右为 「印刷のいろは」 2010 海报

咱们可以在前些年他在上海的个展「潜水平面设计」,感受下啥是「全丑」风。

从展览邀请函开始,画面就已经充斥着火车站旅店小卡片级别的设计和配色。

△ 左图为 2017「游泳 Graphic」海报

高田唯作品:左为 JAGDA2017 年鉴 封面设计,右为「For Stockists Exhibition」2017 海报

比如说,面对代表日本平面设计最高荣誉的 JAGDA(日本平面设计师协会)的约稿,高田唯丝毫不顾甲方的口味,为他们的年鉴封面和主视觉弄出了这样画风的作品。

△ 高田唯 JAGDA 东京新入会员联欢会海报设计(入选东京 TDC)

高田唯当然知道大众能够喜爱、接受的设计长什么样。

他打小就出生自一个设计家庭。他老爸高田修地早年供职于资生堂设计部门,是原研哉在武藏野美术大学时期的恩师。而高田唯本人在 2011 年还获得了JAGDA 新人奖,这可算得上是走向国际设计舞台的门票。

说我当上了营业厅售货员、他考上了北京大学、高田唯获得了新人奖,我们都有个美好的未来——平均一下丝毫不为过。

△ 高田唯作品 FOR STOCKISTS EXHIBITION 2011

转变也在这时发生,用高田唯自己的话讲是:「日本设计有一个感觉就是看腻了」,「单单只把东西做得美观,这样的人实在太多了。所以我要探寻一条如何将设计表现得更生动的路。」

街头上那些日常的、堆叠满信息而完全没有设计感的图像,反倒成为他灵感的新来源。

他说:「设计不仅是追求世界上的美感,一个没经历过正规的设计教育,不熟悉各种设计工具的人做出来的东西有时候会更具有表现力,因为他们为了传达自己的理念而去努力的这件事本身就是美的,我想把这种美融入自己的作品中。」

这倒是可以说,他走向了高度专业化的日本设计反面:一种看山不是山、无招胜有招的状态,他是用 「新丑」来挑战「旧美」的人。

△ 高田唯「Why not live for art II」海报

△ 大街上采风的高田唯

更多高田唯的作品:

艺术家有多浮夸?

除了高田唯,实际上还有很多国际知名的日本艺术家、设计师,也都跟小清新、性冷淡八竿子打不着关系。

就先说日本当代艺术吧,身价最高的几位选手里,像草间弥生、村上隆都有着独特的自我风格,甚至有点精神污染。

△ 草间弥生的装置艺术作品

这画风一眼就能劝退密恐患者,但这些圆点对于草间弥生来说,其实是偏执与童年记忆的产物。

△ 草间弥生的装置作品

10 岁时的她,因为神经性视听障碍伴随着精神分裂,就看到的世界而言,真实反而是仿佛隔着一层斑点状的网。

那些张牙舞爪的植物都是童年时、幻觉中草木开口后的结果。因此,幻觉占据了真实,绘画对于她来说是释放恐惧的途径。

△ 草间弥生标志性的波点南瓜

更多关于草间弥生的作品:

而村上隆的太阳花,虽然五颜六色、永远微笑、永远密密麻麻,但其实是在他一派赤诚的担忧里诞生的。

△ 村上隆在大馆赛马会艺方「村上隆 对战 村上隆」展览现场。摄影:Alex Maeland

村上隆眼中所谓的日本主流文化是由多种多样的亚文化构成,这些战后出现的流行文化一面成为日本的代表,另一面又令人忧心忡忡。

△ 村上隆的标志性作品「超扁平太阳花」

而他的作品,正是在的可爱、扁平、漫画风格中,嘲讽越来越浮于表面的大众文化——整个社会都已经进入超扁平时代。

设计有多浮夸?

△ 横尾忠则为实验剧场「天井栈敷」时创作的海报

再走出当代艺术领域,回顾一下日本设计的历史,就会发现浮夸、脑洞大开始终是它的另一面。用所谓性冷淡、简素来概括,其实是一种偏见、一种被加工选择后的刻板印象。

△ 横尾的早期迷幻又魔性的作品

比如日本国宝级设计师、艺术家横尾忠则,有着迥异于常人的脑回路,年轻时曾莫名其妙跑到达利家强行做客。

他的作品同样如此,极其诡异的脑回路、带有冲击力但传统的日本色彩,融合浮世绘的构图、画面,再拼接上彼时流行的波普艺术,「大和波普」可谓极具辨识度。

同时,传闻他还因为自己的创意被甲方拒绝后揍了甲方一顿,最后,甲方(朝日啤酒)欣然接受了他的创意,这张海报也旋即成为横尾忠则的经典之一。

△ 横尾设计的朝日啤酒海报,正是在这张海报上,横尾成功揍了甲方。

光明正大喊出「一日之计毁于晨」、「在设计上我从不追求流行,我就是流行」的仲条正义,其部分作品也跟「日式性冷淡」一毛钱关系都没有。反倒充斥着大脑洞、极富童心,带着返璞归真的顽童之感。

△ 仲条正义「Mother & Other」部分海报节选

而近些年火爆的吉田ユニ,干脆整幅作品都称得上是脑洞的代言人。

△ 电视剧《人100%靠外表》海报

实际上,她的每一张作品都是现场实拍的,并没有任何 3D 或者 CG 技术,因此,为了达到想要的效果,现场的物品、各种元素需要反复地摆放、一遍遍地改良,方才能接近她脑海中的理想状态。

△ 吉田ユニ Yuni Yoshida V.S. Naomi Watanabe·PUNYUS 2017 春夏系列

△ 吉田ユニ 装苑「PLAY A SENSATION」

日本设计的浮夸是怎么来的?

日本设计以往给人的常规印象,大多和日本特有的美学特质——「禅」、「空无」,「侘寂」、「物哀」、「幽玄」等等关键词有关。

△ 幽玄:长谷川等伯的《松林图》

△ 物哀:京都清水寺

作为传统,与「简素」,「侘寂」这些表面印象相对的,日本文化中还有很多浮夸的、魔性的、乃至金碧辉煌的经典元素——像浮世绘、古代的大和绘、妖魔鬼怪,武士铠甲等等。

△ 日本武士铠甲

△ 浮世绘

而每个设计师对这些传统的文化又有着截然不同的思考与理解,所以才诞生了那么多新奇古怪、纷繁复杂的、脑洞大开的日本设计。

总结

所以说,并不存在一个看起来「性冷淡」的日本传统,更不存在一个由「性冷淡」组成的日本设计。

不止是日本设计,所谓北欧设计、新中式都是一个不够具体的概括,其内涵无法用一两个词定义,但丰富和不同正是这个世界可爱的地方嘛。

文章来源:优设

如何从杂志里学会图片修饰方法?

雪涛

我们在翻阅杂志的时候,总是会惊叹杂志里的图片怎么会这么好看。其实杂志里的图片一方面是由摄影师专门为杂志的编排而拍摄的,另一方面,也是因为杂志对图片的处理手法十分巧妙,今天这节课我们将给大家讲解一下关于杂志里的图片都是如何处理的。

在课程开始之前,我们先来看一些杂志的图片。这三张是以一张大图片为主体的杂志页面,我们将图片用红色的色块标记,文字则用蓝色的色块标记。我们可以发现,红色部分的面积远大于蓝色部分的面积。

我们换成小图片的页面看看。同样的,图片的面积也远大于文字的部分。我们可以发现,现在杂志的大多数页面其实都是以图片作为画面的主体,或者说图片所占比重会比文字大得多。

为什么会出现这种现象呢?那是因为图片与文字相比,图片的视觉冲击力和对人的吸引力远大于文字。为了能够吸引读者的购买和阅读,所以杂志页面中会加入丰富的图片。

图片的分类

那么我们接着先来了解一下关于图片分类的小知识。

图片可以分为点阵图和矢量图,点阵图就是以像素组成的图,放大之后可能会造成模糊等失真的效果。矢量图则是由线条、几何图形等构成,可以随意放大缩小也不会失真。

也可以分为摄影图片和手绘图片,顾名思义,摄影图片是用照相机拍摄出来的图片,而手绘图片则是通过笔或者手绘板画出来的图片。

矩形图片和去底图,矩形图片是指外轮廓是矩形的图片,而去底图则是把环境都除去,只保留主体的图片。

因为手绘的图片本身就会比实物的摄影图更加具备张力,也更容易给人提供想象,修饰的需求并没有摄影图来的这么高,而且手绘的或是矢量图在杂志中出现的概率相对比较少一些,所以本篇教程所针对的图片是左边的这两种,矩形或者是去底的摄影图片。

这节课我们虽然讲解的是如何去修饰一张图片,可是对于图片的修饰我们应该要把控好一个度,因为如果我们一味的追求效果而对图片进行过度的处理,很可能会削弱了图片想表达的东西,甚至让版面过于繁杂而凌乱不堪。而且在某些情况下,图片不需要进行修饰也能让版面足够有张力和美观,那么在什么情况下我们可以不对图片进行修饰呢?我们来看看吧。

第一种情况是当我们使用的图片本身就足够的好,足够有质感和张力,无需进行修饰便能够撑起整个版面。

第二种情况是我们可以通过两张以上的图片排列,让图片之间产生对比或是关联,从而让画面产生张力。

那么第三种情况就是当我们想要强调文字部分时,并且文字组合做得足够的精致或者有表现力时,那么图片也可以省略掉修饰的环节。

最后一种情况是我们要刻画简约风格的画面时,就要尽量避免对图片进行太多的修饰和刻画,否则图片会使画面产生巨大的违和感。

杂志中如何刻画图片

1. 去底

接下来正式进入本次教程的核心部分,杂志中对图片都是如何刻画的呢?我们第一种要讲解的方法就是前面提到的去底图。

为什么说去底也算是一种修饰图片的手法呢?我们来看看这张图片,这张图片是我从一个电商网站上保存的图片。我们可以看到这张图片虽然十分的美观,但是模特的裙子和背景色调很接近,比较不容易展示裙子的细节。

我们把他做成一页杂志,可以发现这个页面从版式结构上来说并没有什么问题,整体画面也十分美观。

但是如果我们想要做一版能够展示裙子细节的版面,那么我们可以尝试把这个模特抠出来,裙子在纯色的背景上就足够清晰和亮眼了。

把去底的模特放进版面中,这两个版面对比一下,是不是右手边的版面更加简洁有力呢?

另外,去底的图片相比起矩形图片也会显得更加灵活。我们用这样一个多张矩形图片整齐排列的画面来作为例子。这个版面排列十分整洁美观,信息都一目了然。

但是如果我们想要让版面变得更加活泼和有张力一些呢?我们就可以通过去底来实现。利用图片去底之后所形成的负空间进行排列图片,让图片错落有致地排列在版面里,这样灵活处理出来的画面,会更加热闹和有张力。

这些都是杂志中使用去底图片的案例。

刚刚我们讲的只是去底图片的基础玩法,接下来我们要讲解一下去底图的另外两种高阶一些的玩法。首先是粗糙去底。粗糙去底就是大致地沿着主体的轮廓将主体抠下来,并不需要严丝合缝地抠图。

还是用这个模特当做案例,如果我们觉得刚刚做的这个版面有些单调的话,那么我们不妨尝试一下粗糙去底的方法。粗糙去底的方式能让图片的形式感更加强烈。

很多时候粗糙去底还会在图片底下加一个小小的投影,让图片有种不规则的小纸片的感觉。

在杂志中这样的处理方式是非常常见的,它适合用在偏时尚潮流或者是偏文艺的版面中。

第二种进阶玩法是半去底,也可以叫做局部去底,意思就是沿着图片主体的外轮廓将主体的局部抠出来。

在这里给大家介绍两种比较常用的局部去底的小技巧。第一种是主体背后有轮廓明显的物体的话,我们可以将主体沿着主体背后物体的轮廓进行抠图,例如这个模特背后的门。

当主体背后没有什么明显的物体让我们进行局部抠图的时候,那也没关系,我们可以使用第二种小技巧,将主体踩着的地面抠出一部分来,这样也能一定程度上展示主体所在的环境。

我们同样将这两个抠好的模特放进版面里,比起最初的版本,这两稿的形式感会更强一些。

这个杂志作品就用到了我刚刚介绍的小技巧。这样的去底方式能让版面更加活泼有趣。

另外将去底图和矩形图片放在一起,能够产生强烈对比,表现力也会很强。

例如这些杂志页面都存在着矩形图片和去底图片的对比。

我们很多时候都会自嘲自己只是抠图的,可是听了这些之后,有没有发现自己连抠图都不配,抠图远远没有你想得这么简单,去底的图片比矩形图片灵活得多,也更具有活泼热闹的属性,将去底图处理得好,可以给版面带来非常大的气质上的提升。那么我们接着来看,除了去底之外,还有什么别的处理图片的技巧吧!

2. 叠加色块

接下来给大家讲解一下第二种比较常见的图片处理方式——叠加色块。

叠加色块的方式有两种,分别为半叠色块和全叠色块。我们先来讲讲半叠的。

好吧,又是这个模特。我们在他的背后叠加一个色块,一方面可以一定程度上填补留白,另一方面也能让图片更具有形式感。

除了叠加这种矩形色块,还可以尝试叠加不规则的色块,不规则的色块相比矩形色块能更灵活的处理负空间,也可以根据主体的轮廓进行灵活调整。

看看这些案例,通过加入了色块是不是让画面更饱满和有张力了呢?

接下来来讲讲全叠色块,全叠色块的处理手法一般是用在这种多图片并列排列的版面中,因为如果是一张大图片使用全叠的手法就会显得有些呆板了。

我们用个案例来展示一下吧,例如这样一个版面,整齐地排列着九种不同的蔬菜,可是由于这些蔬菜的形状各异,导致了负空间特别的零碎,画面显得有些散。

最快的解决方式就是给他们叠加一些色块,那么版面就变得规整许多了。

如果我们觉得这样有些不够灵活的话,我们可以将个别的蔬菜放大,让蔬菜的局部或者是投影超出色块,这样的版面就会显得灵活而不零碎了。

3. 描边/边框

第三个手法是使用描边或者边框。

刚刚我们用去底的方式来让这个版面更加活泼有张力,其实通过添加边框是一个更加简单快捷的方法。

我们不需要改变版面的结构,只需要在矩形图片的边缘添加一圈描边,或者是将图片的边框处理成拍立得,版面就会立即显得更加活泼有趣了。

边框的形式有很多,例如在图片的内部加边框,两条粗细不同的线组成的边框,或者是手绘的线条作为边框。我们可以通过多看杂志总结出更多的边框形式。

刚刚我们讲的都是矩形图片,其实去底图片也是可以添加描边的。例如这页杂志,通过描边的使用,使得深色的产品在深棕色的背景中能够凸显出来。

4. 字叠图

字叠图是在杂志中可以说是最常见的修饰手法了,非常的简单粗暴但是超级实用。字叠图的方式大概也有三种,分别为标题叠图,段落文字叠图和手写体叠图。

首先讲讲标题叠图的使用。我们来看看这个版面,他的主体是一个大草原的大场景图片,图片中没有明显主体。那么我们就可以通过将标题叠在图片上的方式,使得图片上产生视觉焦点。

如果将两张图片的位置换一换,上方的大图片变成了这张以蒙古包为主体的草原图片,那么我们叠加文字的时候就需要注意到叠加的位置要与主体相呼应了。

这两个都是将标题组叠压在图片上的例子,将标题组合叠加在图片上,能让标题和图片都得到凸显和强调。

接下来是叠加段落文字,将段落文字叠压在图片上,能让版面更加灵活,也能让大段的段落文字显得没这么枯燥。一般来说,因为识别度的原因,段落文字不会完全叠加在图片上,只会叠压局部。

我们同样用大草原的文案来做一个段落文字的叠压。由于是段落文字,特别需要注意文字的可读性,所以我们将段落文字都叠压在了色调比较浅的天空上,尽可能地保证阅读的流畅。

最后是叠压手写体的处理方式,手写体的叠压与标题一样,同样需要注意叠压的位置。

手写体的叠压能将手写体自带的属性带给图片,例如想让图片更文艺一些可以用细一些的手写体,更潮流一些则可以叠压粗的涂鸦感觉的手写体等等。

我们刚刚讲解的都是在矩形图片上叠加文字,那么在去底图片上能不能叠加文字呢?其实是可以的,像一些装饰的手写体,或者字号比较大的标题,在不影响识别性的情况下进行字叠图的手法都是没有问题的。但是!我们是非常不建议在去底图上叠加段落文字,因为一般去底图可以用来叠压文字的地方不多,如果要大面积的叠压段落文字,必定会产生识别度不足的问题,所以在去底图上叠加段落文字需要非常谨慎。

5. 利用文字进行修饰

那么除了字叠图之外,利用文字进行修饰的方式非常的多,我在这里给大家介绍几种比较常用的。

将文字绕着图片主体排列是在杂志中非常常见的一种手法,能让画面变得更加活泼热闹。

我们也可以将文字处理成发射状,模拟出一种喷口而出的感觉,使得图片更具有动感。

添加对话框,能让图片变得十分生动,让静止的图片也有一种会思考或者会说话的感觉。

类似的方式还有非常多,例如文字加指向性的箭头、个性的字体、数字,甚至是竖排的文字等等,都可以变成装饰图片的元素。

还是用一个案例来示范一下吧。这次换一个鞋子的案例,我们看这个版面构图啥的都没什么问题,就是缺乏了一些活泼的氛围,那么我们加入文字的装饰性元素,版面就瞬间变得活跃了。

6. 添加装饰元素

如果我们想要添加装饰元素又缺少文案的时候,那我们就可以用下一种修饰手法,添加手绘的元素。

装饰性的手绘小元素,能够模拟出人物或者是物体的运动趋势,让图片和版面具备运动感。

同样这双鞋,我们给他添加一些手绘的小元素,也同样能够塑造出活泼生动的画面。

7. 投影

接下来要讲的是添加投影

我们来看看这些添加投影的例子,投影可以让图片变得更加真实,更具备细节,使得画面更加具备质感。

这一个案例添加投影也可以一定程度上解决画面单调的问题,但是他具备的气质并不是添加装饰性元素的活泼热闹,添加投影带来的是使画面更具备质感。

添加投影除了刚才使用的真实投影外,我们还可以用这种假的投影,其实就是一个叠在主体下方的,与主题轮廓相似的几何色块。这种方式更注重的是表达一种形式感,而非真实感。

8. 倾斜

第8种的修饰手法是倾斜。

倾斜的手法能让图片具有不平衡感,从而产生强烈的动感。关于倾斜我们之前已经有别的教程详细说过了,那我们就直接看看案例吧。

我们将这双鞋子进行倾斜摆放之后,感觉画面就不那么单调了,产生了一定的张力。

9. 出血/跨页

最后一种方式是出血和跨页处理的手法。

也许你们会想怎么出血也算是修饰手法呢?不就是放大而已么?没错,放大也能算是一种修饰手法。在图片足够高清的情况下,放大能让读者留意到许多我们平时不注意的细节,增添了版面的细节感。相对于完整的图片,经过出血的处理的图片遭到了裁切,会产生一种陌生感,也能够让读者觉得更新鲜。

最后我们还是用这双鞋子来示范一下,因为鞋子放大出血之后,版式结构会遭到破坏,所以我们得换一个新的构图。由于经过出血处理之后的鞋子并不完整,所以我们在上方加入了一双小的完整的鞋子作为信息的补充。

好啦,我们给大家总结的杂志里处理图片的小技巧已经全部讲完啦,不知道大家都学会了没。虽然说我们是从杂志的设计中总结出来的设计技法,但是并不意味着这些手法就只能应用在杂志设计中,设计其实都是共通的,并没有说某些技法就只能被用在某些领域中。下面我们就给大家带来一个海报的案例,给大家演示一下如何将杂志中的骚操作带到别的设计中。

因为我们使用的是杂志的编排技巧,比较适合时尚、潮流或是文艺的风格,所以我们选择做一个潮牌的宣传海报,这样在气质上会比较相符合。

首先建立一个版面并确定好页边距。接着我们把画面的主体,也就是这个潮牌的创始人陈冠希欧巴放在画面中间。

然后将标题文字放在版面右上角,标题文字我们做了一个投影的效果增强标题的形式感。对应的,我们在版面的左下角编排二级信息的文字,做一个对角线的呼应。

接着将其余的文字安排在左上角和右下角,我们整个版面的大体框架就出来了。我们可以看到现在这个版面的留白太多,形式感不够强烈,缺乏氛围感。接下来我们就要用我们今天教程所讲的手法来一一解决这些问题。

先来一个叠加色块的手法,在欧巴的身后叠一个黄色的圆形色块,那么上半部分负空间零碎的问题就一定程度上得到了解决。接着再来添加一个投影,这个投影我们选用了高明度和高纯度的青蓝色,这样更加有时尚有趣的感觉。

然后使用字叠图,从文案中的slogan里提取出It’s Movement的英文放大叠在人物身上,这里我们选用了一款比较有趣的粗无衬线字体。

剩下的负空间我们用添加文字装饰元素和手绘装饰元素的手法填满。最后的最后,再给版面上加一层点元素背景,增加版面形式感。我们这一张海报就最终成型了。

文章来源:优设

喜茶全年的海报,分析出了3个设计套路

雪涛

年底了,大家有没有在电脑前面忙成狗呢?我身边设计师朋友们可都在冲刺年终 kpi 呢。

但设计需求越着急就越容易出现问题,不少客户爸爸们都抱着一种「没多少时间了,你就这么抄吧」的速成心态,殊不知这样让设计师很为难啊!

粉丝投稿,求问老板让「致敬」时,设计师应该如何应对呢?

当然这种抄袭的事情我们自然不能支持,但从别人的套路中总结出经验还是可以的,为了给大家写出有干货的内容,我收集了喜茶全年的广告海报,做了一个设计风格的总结,方便大家「偷师」(不是抄袭,谢谢)

第一招:港式风格

要说新式茶饮行业最喜欢用的风格之一,莫过于「港式风格」了,毕竟港式奶茶也是新式茶饮行业的扛把子。

港风兼具了:风格强烈/配色醒目等诸多好处,喜茶也在 2019 年多次使用这个风格,例如与阿华田合作的联名款还有后面的阿喜小卖部以及吃瓜公司,还有后续的火锅跨界多肉芒芒甘露等等都采用了港式风格来设计

但其实港风是非常容易操作的,只需要三步就能打造喜茶同款。

下面我们就来看看怎么搞港风设计吧!

谈到配色就逃不出一个核心话题:「港风到底是什么风格?」这就要从香港本土的环境开始说了,香港拥有非常高的人口密度,在闹市区楼宇一栋挨着一栋,店铺的招牌鳞次栉比。

大家日常的生活环境就是每天都被高密度的信息轰炸着,所以店招想要在众多招牌中脱颖而出自然就需要视觉上的冲击,其中便以极其醒目的霓虹灯店招胜出。

但霓虹的制作工艺上,图形与配色都不能太复杂,于是就形成了:手写字体+高饱和配色+简单图形,这样的固定组合形式,港式风格也就此定型。

所以其实只要选择好一个手写字体你就完成了港风的一大半!

然后再选择一个饱和度高的颜色外加基础好看的图形就搞定了,这时你就会拥有一个喜茶同款海报了。

好看的免费字体这里找:

第二招:传统古风

说完了港风之后,第二个经常被 cue 的就是传统古风,而古风中最最最最重要的一点就是定好主基调色,然后选对辅助素材。

而主色调的选择无外乎几种常见的水墨画、工笔画、民国画报等,这些都是古时候我们常用的艺术载体。

而其中工笔画和民国画报因为画面柔美好看、画风具有明显特点成为了现在年轻品牌爱用的设计形式。

当然色调只能展现画面的整体感觉,真正的神韵还是要靠细节来呈现,例如祥云、角饰纹样、圆月玉兔等都是极具特色的。

古风色调+装饰性图案的这种搭配,可以说在产品广告中是非常百搭的,且大部分的产品展示都能应用上,例如喜茶新品的荔枝季还有桂花绿的海报。

△ 喜茶的中国风海报

以及一些节日海报的应用都能很好的体现中国节日的特色

第三招:简约风格

如果你没有太多时间去追求风格创作但是又想要有好的视觉效果,那你也可以学学喜茶的广告,走简约派的路线,简单来说这一风格的要素就是排版要好 + 元素要少。

说白了就是画面保持简洁的同时还要具有设计感,这就全靠排版来撑了,相比其他的风格,简约风的排版更多元化。

常规的排版方式有居中、左右、四边构图。

只要选择合适的构图外加上好看的照片,你就会获得不错的简约风海报了,其实这种风格也不用拘泥于灰白色调,配上其他的颜色或是插画图片时效果也一样很好。

当然,我们在看设计作品时都是只看到了最好的一面,看不到品牌与设计师在背后反复实验与摸索的过程。

△ 喜茶全年海报的一小小小部分…

里面还有一些不错的海报作品却因为不同的原因未能与大家见面。

号称茶饮界「广告公司」的喜茶在这一年除了用心做饮品之外,也为设计圈提供了不少有价值的物料,能够靠设计将产品的价值传递出来对于设计师来说是一个好现象,设计在以后的日子里会被越来越多的品牌重视起来,上面这些「套路」大家可以学起来了~

文章来源:优设

Banner设计指南

纯纯

近一年多接触到了插画 Banner 设计,算是自己边做边摸索,还在学习探索期,目前总结了一些做稿的思路,分享的目的是为了梳理完善自己的方法论,让自己继续向前进一步。

本篇文章分享内容:插画 Banner 的三个层次。

插画 Banner 的三个层次:文案层、画面元素、背景层。

文案层

  • 文案样式:左对齐、居中对齐、右对齐。
  • 文案组合设计形式:上下组合、上中下组合、一体组合。

画面元素层

  • 主体元素
  • 相关联元素
  • 点缀元素

相关联元素和点缀元素可以二选一,也可以同时使用,具体根据设计画面而定。


背景层

以下内容是我目前总结的背景层类型。选择背景时的注意事项:背景一定要和元素风格一致。我经常会出现这样的问题,主体物和背景不融合,导致设计看起来主体元素是贴上去的。

注:以上所用到的图片素材均来自于懒设计、稿定设计

Banner 设计画面千千万,套路来回就几样。希望大家能在框架的基础上进行思维发散,创作出好的作品。

定量的设计套路(不变)+百变的设计风格(变)=属于你的千变万化的 Banner 作品

(原文章地址:https://www.uisdc.com/banner-design-guide


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档