Alice

“你的作品集或许从封面就被PASS掉了。”从封面就能看出设计师所处的设计阶段。本文针对作品集封面进行深入分析,理论层面剖析设计师能力在封面设计中的映射,技法层面分享封面设计常用快捷技法。

 

 

理论篇

下面这个封面,在我最近收到的700多份简历中,其中最少1/5与其相同或高度相似,不知当你看到这个封面时有何感受,总之我丝毫感受不到这是一份设计师的简历。不仅是视觉上的问题,内容同样可以起到关键性作用。

为了让大家更容易理解,这里我以苹果官网为例,我们在视觉上保持不变,只调整其内容也会传递给用户两种完全不同的心理感受。

同样再以刚才的封面为例,一名设计师从菜鸟到成熟需要经历4个阶段,当然同时包括了内容设计能力与视觉设计能力。内容角度的四个阶段由初级思维到进阶思维即:啰嗦复杂;循规蹈矩;言简意赅,符合场景。设计角度的四个阶段由初级思维到进阶思维即:过度设计;墨守成规;灵活多变;符合场景。

目前画面的内容设计停留在第一个「啰嗦复杂」阶段,我们先将内容进行设计,简化语言,删除啰嗦内容。

很多新手设计师总是喜欢面面俱到,而面面俱到往往会给人一种不自信的心理感受,就像儿时我们在语文考试时,阅读理解题并不是写的越多分越高,反而越理解不到核心的同学越写的很多,因为其不自信,宁愿多写也怕漏写。

设计师也是一样的,太过拘谨的语言文字是不自信的体现。

视觉设计停留在第一个「过度设计」阶段,新手设计师总是想通过丝毫没有作用的装饰元素让画面看起来“饱满”,却不知道一个饱满的构图是需要花费心血的,而不是这些敷衍的线框或者脏脏的投影。这些多余的设计只会让招聘方感受到其设计技法的局限。所以我们不如将多余设计去除,突出表达主题。

如果你能做到这一步,说明你已经通关了第一阶段,达到第二阶段。内容设计的第二个阶段为“循规蹈矩”,我们需要试着再突破一下,思考一下是否有哪些内容可以继续简化,哪些不重要的内容可以改变一下表达方式减少对主内容的干扰。文案还能再简化吗?如果少了一些文案面试官是否仍然能看明白呢?比如我们投递的既然是设计岗位,为何作品集前面还要有“设计”这两个字呢?我们的简历中非常清晰的个人资料体现,为何在封面还要放上自己的名字呢,而且还是如此幼稚的字眼,不如索性进行二次简化。

视觉设计的第二个阶段是“墨守成规”,停留在此阶段的设计师做视觉放不开手脚,比如我们可以试着打破一下传统的居中对齐规则,进行左字右图的处理,同时左上角点缀符号扩大面积,支撑起左右视觉平衡。

这里的打破并不是指打破规范,而是在更严苛遵循规范的前提下进行灵活布局变化,比如我们定义最小栅格单位为a=10px,那么所有元素的间距与大小都应该保持可以被10整除,同时图文面积保持1:0.618的黄金比例。

如果你能在元素符合对齐规范且栅格规范的前提下进行更多的布局的变化,那么就算是逐渐进入第视觉设计的第三个“灵活多变”阶段了。

内容设计的第三个阶段为“言简意赅”,我们看能不能再突破一下,往后退一步拓宽一下思路,思考一下当前画面的应用场景,画面需要给谁看的?目的是什么?在当前场景下内容是否可以再次优化?作品集封面的目的很简单,让面试官感受到设计感,提高印象;并且让面试官期待下一页的内容,避免流失。并且面试官在打开作品集之前就已经很明确的了解自己在看什么,因此我们试着将文案整体整体符号化。

英文有的时候就是设计符号,只是这个符号不用设计,可以通过字体工具“一键生成”。如果你不喜欢这种英文符号,中文当然也可以(中文永远是最好看的文字!),但我们需要试着从”作品集“三个字中跳出来,因为面试官可能看了很多份作品集,对这三个字有了免疫力。

当然,当我们思考打开以后,就可以玩一点花样了,比如通过一些高难度的配色来让面试官从封面就看到你处理复杂问题的思路。

首先改变色彩的面积对比,在60+30+10原则的基础上进行略微调整,让画面有明确的主色倾向,同时通过控制互补色面积对画面进行点缀。然后调整色彩的HSB色值,让色相、饱和度与亮度处在视觉舒适区域。最后记得将色彩调整为黑白,通过黑色色块调整不透明度观察一下色彩的亮度差值,确保有足够的亮度值对比,视觉上具有张力。

同时通过一些小技巧让面试对下一页充满好奇心,比如,作品看起来不错,播放一下试试,如果是PDF作品集,在下一页就可以放置该作品视频的链接或者二维码,如果是Keynote就太方便了,直接跳转播放就可以了,通过这个小技巧可以极大降低作品封面的简历筛选流失率。

也可以换个风格,跟自己作品集中第一套作品风格保持统一,同时把自己产品中的IP形象拿出来做个欢迎仪式。

或者当设计师有一定的知名度时,就可以更放的开了,直接将自己的ID LOGO作为封面。

当然,讲了这么多,并不是告诉大家文案或者设计内容越少越好,而是尽量将啰嗦多余的设计去除,比如我们如果感觉整体画面很空的时候并不是一条线框就能解决,可以适当增加自己绘制的非常精致的插图,自己设计的非常精致的一套界面等放在封面作为撑起画面的主视觉。

 

实践篇

undefined

技法一:多色混合柔和渐变

渐变色从几年前就开始在互联网设计圈非常流行,因为可以营造出更丰富的细节,又不会像将摄影图做成背景那样老气横秋。渐变色做为作品集封面的背景可以说再合适不过了,然而渐变色如果只有双色渐变仍然缺少很多细节,多色渐变又很难做的柔和,今天给大家分享两个做多色柔和渐变的方法,一个是通过PS渐变图层样式结合液化工具,另一个是PS渐变图层样式工具结合模糊画廊工具。

undefined

首先我们打开PS,画一个矩形,然后给这个矩形添加图层样式「渐变叠加」

undefined

然后点击滤镜(出现弹窗后选择转换成为智能对象),选择液化,这个时候就可以随意的在矩形渐变上进行灵魂创作了,建议同方向涂抹,先用大画笔,再用小画笔,然后确定。

undefined

第二种方法是通过角度渐变结合模糊画廊制作,首先还是画个矩形,添加渐变叠加样式,这里注意将渐变叠加的样式由「线性」改为「角度」渐变,注意渐变条两端的色彩要保证统一,否则会出现一条分界线。

undefined

然后点击滤镜-模糊画廊-场景模糊,将场景模糊调大(具体数值看实际效果即可),然后再勾选光圈模糊,模糊数值调大。

undefined

最后下方效果处勾选「光源散景」,数值调大,然后确定就可以了。

undefined

看到这里肯定有的同学感觉很麻烦,或者效果调整不好,文章最后我会提供液化/模糊画廊调整好的源文件,大家只需更改渐变色即可。

 

技法二:故障动态效果文字与背景

比较年轻化且比较酷的作品集或提案我们常常喜欢想做一些故障风效果,但是这种效果在AE中需要花费一些时间,有一个做故障风的网站很多人都知道,但并不能最大化利用,那就是「PhotoMush」,这个网站可以将我们刚才所制作的渐变背景一秒种就动起来,也可以制作一些故障效果的标题文字等。

undefined

首先我们需要导出一张透明的白色的文字,PNG格式,任何软件都可以(PS,Sketch,Figma,AI等),然后打开网站「PhotoMosh」,将透明文字导入。

undefined

然后调整效果即可,常用效果「摇晃」「海报化」「RGB偏移」「涂抹」等。

undefined

静态图直接点下方保存就可以了,动态图的导出方式有两个,方式一是点网站左上角的动图,然后点录制,会自动下载,方式二就是用录屏工具直接录屏。

当然,这个网站不仅能制作文字,动态的背景图也是可以生成的,效果给大家看一下,具体怎么做的我们需要动动脑子,就当给大家一个思考题吧。

undefined

再来一个小的拓展,我们上个板块教大家做的渐变色,是不是也可以借助这个网站做点特效呢,比如…

undefined

undefined

 

技法三:3D动态背景快速生成

相比于用插画当作作品集背景,3D效果的元素更有视觉上的纵深感,这里分享给大家一个快速生成3D背景元素的网站「blobmixer」,好好的加以利用也可以做出来非常Cool的作品集封面效果。

undefined

undefined

 

实际案例

undefined

首先是万能的十二列Web栅格。

undefined

我们先做一个居中对齐风格的,首先给主文案8列栅格,为了让画面风格,文字后方也就是版心位置预留出图形主视觉,左上角右下角也预留出辅助的图形元素。

undefined

主视觉放置什么元素呢?插画?模型?界面? 不如结合我们刚刚所讲的高效网站,生成一组3D球体元素。当把球体放置在预留位置后发现3个图形成对角线有点太过规则,容易视觉上闭合成线,因此这里将主视觉缩小,再生成两个点缀球体,页面布局结构合理化。最后用视觉横线将没有规则的文字闭合。

undefined

第二组我们想做最近流行的酸性风格,这次用承载力更强的左右布局,想让文字为主文字就放到视觉的发起点左上角,右边放什么呢?

undefined

酸性风格貌似跟插画不太对付,不如就放一组界面作品,占据7列栅格,文字占据4列栅格,尽量接近黄金比例,主标题文字与符号箭头用堆叠效果让画面元素间更有关联性,看起来更整体。上下增加徽章式辅助文字,烘托气氛。 但是目前画面缺少色彩,怎么做呢?

undefined

文字通过剪切蒙版增加渐变色(甚至可以做动态的),边角处再增加渐变元素球与文字进行色彩呼应,同时赋予Z轴结构空间。

undefined

undefined

当然,前面所讲的动态渐变也不要忘记,有了这些神器,一个封面5分钟就搞定了。

undefined

 

原文地址:站酷

作者:孔雅轩LineVision

转载请注明:学UI网 » 作品集「封面设计」科普宝典

登录收藏
 
你可能喜欢的:
设计师做方案还要解方程?是不是有大毛病设计师做方案还要解方程?是不是有大毛病
如果吃亏是福,你想要几次?如果吃亏是福,你想要几次?
一位9年大厂设计师聊聊“靠谱”的重要性——“靠谱系数”决定价值回报一位9年大厂设计师聊聊“靠谱”的重要性——“靠谱系数”决定价值回报
关于设计师作品集那些事2-提升篇关于设计师作品集那些事2-提升篇
围炉夜话 - 第01期:深挖面试者的痛点(面试篇19问)围炉夜话 – 第01期:深挖面试者的痛点(面试篇19问)
交互设计师专业能力体系交互设计师专业能力体系
如何有效提升产研效率和质量如何有效提升产研效率和质量
交互设计师该如何提升“软实力”?交互设计师该如何提升“软实力”?
6月16日 | 新虎帮第二期UI基础进阶课来了6月16日 | 新虎帮第二期UI基础进阶课来了
面试中如何回答:交互设计的价值是什么?面试中如何回答:交互设计的价值是什么?