首页

21条超好用的创意技巧

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大家可能听过很多关于想创意要靠灵感的说法,而在设计师的日常工作中并不是这样的,至少绝大多数的时候不是。你想想,灵感这个东西是不可控的,快的时候可能几分钟就有了,慢的时候可能得等上一两个月,如果随便一个创意都要靠灵感,那我们的效率得有多低啊。

所以,那些说有灵感才创作、没灵感就去游山玩水的大师,他们通常指的是大创意,而且他们肯定有比较多的创作时间。而对于日常的设计、创意工作,我们绝不能靠灵感出创意,靠什么呢?当然是靠方法。葱爷特意帮大家总结了 21 种商业广告设计想创意的方法,希望可以帮你们提高想创意的效率。

比喻

比喻在广告设计中一般的用法是,把产品或者能代表产品的元素比喻成具有某项功能的事物,这一手法成立的条件是两个元素在外形上要有一定的相似性。

△ 把产品(鸡块)比喻成代表热辣的火焰

△ 把布匹比喻成红酒

借代

借用某元素替代另一元素,或者借局部替代整体。

△ 用涂了口红的嘴唇代替女人

△ 用一只绿色的手代表绿巨人

拟人

即把产品或能代表产品的元素拟人化,拟人手法通常还具备幽默效果,其表现形式主要为以下两种。

1. 外表拟人

即给事物添加人的特征,如五官或动作。

2. 文案拟人

这一做法并不需要改变事物的外表,而是在文案上赋予人的特征,比如用形容人的话语形容某事物,或者让它说话等等。

双重曝光

即模拟摄影中的双重曝光效果,最常见的用法是在人或物的基础上叠加与其相关的场景,具有一定的艺术效果和视觉冲力。

△ 通过双重曝光的手法把大象与汽车巧妙结合起来。

发散

即把产品置于中央,往四周发散与其相关的元素,用来表现具有的功能,或包含的服务。

把与产品或主题相关的元素放在一个平台上

这种做法可以使视觉主体更集中,同时能增强画面的形式感和视觉冲击力。

把产品或与产品相关的事物做成平台

比如手机、银行卡、书本、手掌等都很适合做成摆放元素的平台,可以用于表达该元素上具有什么产品或服务等等。

把主题转化成一个画面感很强的概念

比如可以把包含了宽带、手机流量的全家共享套餐,包装成一个全家桶的概念。

再比如我们可以把一些主题活动包装成 XX 星球,代表一个新的世界。

△ 《奇葩说》的奇葩星球

异质同构

即用两个或两个以上结构相近,但质地不同的元素组合成一个新的整体,这种效果既统一又有对比。

用与产品或品牌相关的元素组成某个关键字

用产品及相关元素组成某一符号

同样,这个符号必须是跟主题相关的,而且该符号不宜太复杂。

置换

把正常事物或场景中的某个元素替换成其他元素,用来说明该元素也具有原事物的效果或特征。

△ 用快递员置换炮弹,来说明送货快的特点。

△ 用饮料包装置换树枝上的水果,以说明该饮料原汁原味。

把大场景从整体中抽离出来

比如说海洋、草地、房间,这些元素的边界感不明显,现实中不会以一个独立的状态出现,但我们可以给它制作一个边界,使其从整体中独立出来。

把符号场景化

比如把 Logo 图形,或者是能代表产品功能、传播主题的图形符号,打造成一个由相关元素组成的场景。

引用经典

西游、三国等典故,超级玛丽、俄罗斯方块等游戏经常被引用到广告创意中,可以有效增加消费者对广告的注意力。

把文字或符号当成实物融入场景

如果广告的核心诉求是某个数字,或者是符号,那么也可以把它当成核心元素融入到场景中,然后围绕它来添加相关元素。

夸张

如把功效夸大、把事物的大小比例夸大等等,或者改变事物原本的比例。

把能代表产品的元素与主题结合

这是很直接的一种广告设计形式,把常规的图加文结合为一个整体,可以增加图文的关联度,降低传播成本。

正负图形

正负图形除了在 Logo 设计中很常见之外,也是海报设计和广告设计的常用形式,正负图形一般比较简洁、创意巧妙,具有很强的视觉冲击力。

△ 可口可乐的海报很喜欢用这种手法

把产品场景化

在产品中添加场景,将其功能或特点视觉化。

混合

为了满足需求,很多广告设计中都融合了两种或者两种以上的创意手法。

△ 上图为置换加比喻

△ 上图为符号场景化和把文字融入场景

△ 上图为夸张加元素抽离

凡事都有方法和技巧,即使是艺术和创意这种看似不可控的事物。方法和技巧虽然不能保证带给你一个 big idea,但他能为你提供清晰的思路、提高你的效率,并能将你的创意水准维持在一条基线之上,希望这篇文章能够对你有所帮助。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标题文字如何处理更吸引人?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们常说:设计就是在向用户传递信息,在设计的日常工作中,传递信息的方式大多都是图文相结合的形式,而文字作为信息传递中最直观的表现形式,对于整体而言是至关重要的一环。很多设计师一味强调追求图具有吸引力,而忽略了文字的重要性,最终导致图文无法结合、虎头蛇尾。说到文案吸引力,最佳的表现位置就是标题字,所以本期就和大家一起分析、总结一些比较实用的标题文字的处理方式,提升对读者的吸引力。

切割文字笔画

在文字排版中,想要提升标题文字的吸引力,就要与其他非标题性文字形成视觉上的反差、对比,进而让标题文字在整体排版中更加吸引用户眼球。这里说的第一个比较实用的处理手法就是切割文字笔画,即:以标题文字的笔画为切入点,在不影响其辨识度的前提下,通过一些特殊的处理手法,提升视觉比重。

切割文字笔画也可以理解为将文字的笔画分离字体的本身,然后再以文字笔画为切入点,进行处理,常用的笔画处理方式:变色、模糊、删除、阴影,下面我们逐一来看。

1. 分离笔画 – 变色处理

顾名思义就是有意将分离的字体笔画进行变色处理,提升标题文字本身字体上的变化强度,从而提升标题对于用户的吸引力。举例说明:

上图中,这两种标题形式在设计工作中都是可取的,只是对比而言,案例 1 给人的感觉更加平缓,属于比较常见、中规中矩。而案例 2 则更加新颖,在视觉上变化更强烈(主要体现在文字笔画与笔画之间),更加吸引用户眼球,也起到了提升作品设计感的作用。

2. 分离笔画 – 模糊处理

同样的理解方式,就是将分离的字体笔画进行模糊化处理,目的是通过笔画与笔画之间的虚实对比,营造出视觉上的前后关系,从而提升标题文字在整体文案中的视觉注意力。

上图案例中通过对比我们发现:案例 4 相较于案例 3 更吸引人,原因在于其笔画之间的虚实结合使得字体本身就形成了一定的反差感,形式上的多变造就了文字更吸引人,同时如果感觉文字笔画之间的变化强度不够,可以结合变色+模糊的处理形式,比如:

这样给人的感觉就更加强烈、也更诱人,但是这种笔画之间的变化多了,也就意味着掌握的难度提升了,一定要避免过多的效果导致出现凌乱的现象。

3. 分离笔画 – 阴影处理

可以理解为将文字笔画分开来看,通过添加阴影的方式,营造视觉上笔画的前后关系,从而增强其整体的视觉变化,举例说明:

上图中,案例 8 就是通过给文字笔画添加阴影的形式,使得笔画与笔画之间在视觉上形成了很明显的前后遮挡关系,将原本平面的文字变得更立体,也更易于吸引用户眼球。这种处理手法在平时工作中也很实用,只需要理清楚笔画的前后逻辑关系,通过画笔涂抹的方式慢慢调整即可。

4. 分离笔画 – 删除处理

删除笔画的处理形式相对来说在工作中运用较少,因为一旦处理不恰当,很容易影响字体本身的辨识度,适得其反,举例说明:

如上图所示,删除了一些笔画,给用户留下一些想象的空间,也是比较新颖的处理方式,比较适合一些平面海报标题的设计。

这种删除字体笔画的处理形式虽然很新颖,但是应用的局限性较大,属于比较难把控的一种。

注意:将文字笔画单独拆分出来进行处理的手法,一定不要过于追求变化强烈,否则很容易导致标题文字非但没有起到吸引用户的作用,反而最基本的辨识度都会被破坏,一定要把握好度。

添加辅助元素

在日常工作中,通过给标题文字添加辅助元素,从而突出标题的处理手法是非常实用的,这里所说的辅助元素可以分为很多种,比如:图形、肌理、光效等等,目的都是借助辅助元素与标题文字的相互结合,让文案标题的视觉形象更鲜明、更吸引用户。

添加图形是属于比较直观且应用广泛的一种处理方式,而这里的图形一般情况下会和标题文字在属性上有所反差,这样有利于最终效果的呈现更加明显,举例说明:

如上图所示,标题文字通过添加下划线、边框、形状等等辅助图形元素,较常规标题而言,其视觉变化更加强烈,整体丰富度提升了很多。但是这种辅助元素不能添加太多,否则很容易出现乱的现象,要让这些添加的元素与标题形成相辅相成的关系。

上图的设计案例,通过对比我们发现,右侧案例视觉更丰富,且标题文字添加下划线后,其在画面整体的视觉形象更加鲜明、更吸引用户眼球。

增强文字环境感

现实生活中一个物品如果置身于某一个环境内,它自身就会受到周围环境的影响,而如果我们假定环境,将标题文字看做物品,那么我们就可以给予标题文字在环境中的光影,比如:投影、倒影、发光、环境色等等,这样就间接地增强了标题文字的视觉变化,从而起到吸引用户眼球的作用。

如上图所示,把文字当做处于环境中的物体,通过投影、倒影、阴影的方式体现其环境,在视觉上有了更深的层次变化,也能起到强调、加深印象的作用。这种营造环境感的处理形式在平时工作中也很实用。

再说下发光的处理手法,这种形式大多用在暗色调的画面中,将文字看做一个发光体,即受周围环境的影响又影响着周围环境,举例说明:

上图中虽然说左右两种表现形式文字都比较清晰、明了,但是就视觉感受而言,右侧将文字作为发光体与周围环境相辅相成、融为一体的处理形式更容易吸引用户眼球,而且更加新颖、有创意。这种表现形式在一些电商海报中也很常见,比如:

发光的效果给人的感受很舒服,打破了常规的单纯平面编排文字的现象,将文字场景化,使其更诱人。

补充

还有一些在平时工作比较实用的,只不过或多或少在之前文章中都有提过,这里以补充说明的形式展开。

1. 标题文字 – 关键词变色

说到关键词变色算是比较常用的一种,就是将原本标题文字中一些关键词进行变色处理,目的是增加标题文字的视觉变化强度。

通过将案例中「免息」一词变色处理,使得标题在视觉感受上更加明显、有吸引力,而且给人的感觉也很舒服,这种处理手法是非常实用的,不妨多试试。

2. 标题文字 – 描边

描边文字在平时工作中用到的相对少一些,这种处理手法也间接地起到了打破常规的作用,当我们一直按照某一些常规形式工作时,偶尔做一些改变也许会得到意想不到的效果。

3. 标题文字 – 与主体遮挡

文字与主体营造遮挡关系也是在日常工作中很实用的一种,就是将主体与文字相互穿插排放,通过必要位置的阴影进行加深体现。虽然元素并不多,但是最终呈现的视觉效果却很舒服、有吸引力。

这种主体与标题穿插表现的形式使得两者更加整体,对于画面而言,主体和标题都起到了很好的强调作用。

总结

文章中提到了一些比较实用的提升标题文字吸引力的处理手法,但是需要注意不能过于追求效果而忽略了设计的本质,要根据需求选择恰当的方式,不管何种形式,都要保证文字本身的识别性。文章中提到的并非全部,主要还是为大家提供一个可以参考的方向,要学会举一反三、大胆尝试。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

如何用扭曲工具快速强化作品设计感?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们在日常工作中几乎离不开扭曲和变形工具,它可以帮助一个设计师校正一个元素的透视关系,或者为设计好的标志贴效果图。除了这些日常的应用以外,扭曲工具还有哪些有趣的应用场景呢?我们今天的内容就会帮你找到答案。

风格特点

从宏观的角度来讲,这种扭曲的手法,它设计出的版面变化方式是非常多的,我们将比较熟悉的文字进行扭曲,是可以呈现出其它的表现形式的。

比如说,最左侧这个海报,我们不光能看出来它的文字信息,还具有楼梯的印象;中间的这个海报,它把文字变换成了晾衣绳的感觉;我们再看最右侧的这个海报,很明显它就是一把扇子对吧。

气质分析

这种表现形式它是比较抽象的,再加上它能够变异成其它的形状,所以,这种版面风格也会传递出一种趣味感。

原理解析

我们在现实生活当中扭曲的图像,它属于一种光学的现象,比方说哈哈镜,它就是利用了这个原理,表面凹凸不平的镜面,反映出人像或者是物体的扭曲面貌,进而产生了幽默感。

生活当中的望远镜放大镜显微镜,也都是利用了这种凹凸的透镜原理来实现的。

我们人类还处于原始的时期,就已经开始运用绘画来记录身边的事物,在经过不断的发展,艺术家它们的绘画技艺也变得越来越逼真,甚至达到了和照片难辨真假的程度。当写实的风格几乎走到的时候,艺术家为了寻找新的艺术发展方向,画风就开始变得扭曲起来,变得抽象起来,从而产生了超现实的艺术流派。

我们将本来是圆形的西瓜和篮球限定在一个圆角矩形的这种做法,也是一种抽象的思维方式。

技巧分类

在这里我们为大家划分了五种常用的表现技巧,这些都是我们日常工作当中经常用到的一个扭曲技巧,我们分别介绍给大家。首先第一个就是液化这个工具,液化这个滤镜应该算是非专业人员都会知道的美颜功能,这个 ps 滤镜被用在了各种美艳的 app 里,这种夸张的艺术创作在漫画里面是经常出现的。

我们来通过网格感受一下液化命令到底是出现了哪些变化,液化的好处就是能够根据实际情况手动调节画面的扭曲幅度。它的自由度比较高,但是它的缺点也是自由度比较高,所以难度会比较大一些。

在设计的过程当中,也可以运用这个功能来刻画主体,产生一种遮挡的效果。我们也可以通过扭曲让文字的部分结构变得不容易认读,这就能达到设置悬念的作用,我们也可以通过其它不同幅度的扭曲变形,达到自己想要的状态。我们看上图是日本TDC 的获奖作品之一,作者是村上雅士,它运用的就是液化功能,将原本很平淡的版面,通过扭曲的变化,达到了吸引眼球的艺术效果。

这个是台湾设计师聂永真,他为2017年金点概念设计奖制作的主视觉海报,这个海报它以不规则的曲线呈现,并且搭上充满想象的文案,有耳目一新的形象。

下面我们来看一下球面化的工具,我们大家都知道,杯子中的水具有扭曲光线的作用,我们插到水里的这个笔它就会产生扭曲的现象,这个就是光的折射。我们在设计当中进行简单的图像合成时,也需要遵守这个物理定律。

我们这里通过网格来看一下这种形态的具体表现,顾名思义球面化的命令就是能够将选区内的画面进行球面的扭曲。它适合用在图像合成或者是还原真实性的场景里面,我们通过调整不同的幅度,产生不同的鱼眼效果。

除了基本的球面化扭曲,我们这个选择里还提供了水平和垂直的变化,形成类似圆柱体的表面效果。我们在产品贴图图像和形象的领域是经常用到这个东西的,我们调整不同的扭曲幅度,能够完美的让图像贴合到柱状的弧形表面上。

这里给大家准备了一个案例,我们给它添加一个气泡,然后再产生一些光影的效果,如果说我想让这个画面变得更真实一些,我们在设计的时候就要考虑到物理定律,这个时候就可以用球面化的命令。我们让圆形下面的文字产生光线折射的感觉,调节选项中的滑块,找到那个最接近真实的反射效果。

这个案例是我们研习设之前教程里提供的一个案例,我们看图中这个玻璃球和文字的衔接部分,用的就是球面化的效果。我们只看右侧这个对比图,你可以明显感觉出来,底部这个经过修改后的细节是更真实的,文字经过玻璃的反射,它一定会产生扭曲的视觉印象。

下一个给大家介绍一下极坐标,极坐标这个词听上去会比较陌生一些,但是你会非常熟悉,比如说这个启动画面,这个是PS cc版本的启动插图,它就是运用极坐标的命令实现的效果。除了能够实现从内部向外旋转的这个洞穴效果,还可以表现成类似于球体的效果。

我们继续通过网格来看一下它的扭曲原理,这里给大家做了一个细节的变化,是为了方便大家观察它的扭曲方向,我们给这个网格添加了颜色,顶部是蓝色,底部是红色,接下来我们为它执行极坐标的命令。

执行极坐标这个命令后可以很明显地看出,原来底部的网格内容被扭曲到了圆形的外侧,就是红色部分,变成了这个球的外侧,内部这个蓝色,就是之前顶部的蓝色部分。

它也提供了另一个额外的扭曲选项,扭曲后的效果就是这样的,这个效果我们不常用。

我们选择这张图来作为演示,让大家明白极坐标是什么原理,我们为它添加极坐标的效果,这个时候需要确定什么?就是图像的朝向问题,因为这个直接决定了最终的扭曲效果。

顶部的区域会在圆的内部出现,底部的区域会在圆的外部,我们根据想要达到的最终效果,来判断图像的具体朝向。这里制作了两种朝向的扭曲画面,左边的是地面在内部的球体效果,右边是地面在外部类似于洞穴效果。

我们在扭曲命令之后,需要手动将画面这个衔接部分处理掉。你可以用图章工具处理掉,这个画面就做完了。

再举一个例子,这个画面我要做的是人物在球体表面的效果,我们要考虑到方向,所以我们要将它旋转180度,然后添加极坐标命令。

使用修补工具来完成这个衔接部分,这个画面就完成了。

我们再来看下一个,下一个就是文字扭曲,也是我们这节课比较重要的一个内容。这个命令跟其它命令不同的地方就在于它不是在滤镜菜单下面,它是在文字编辑栏的右侧,在样式选择里,它提供了很多不同的扭曲方法。

这种方法相对于液化或者是自由变换更方便一些,因为它的这个可操控性很强,顶部提供了两种扭曲方向,底部选择则是调整扭曲的幅度。

这里我们简单地制作了几种文字样式,就是这个命令,它会让文字变得更接近图形化。

下一个我们来给大家介绍一下置换的扭曲风格,它的扭曲原理就是将被置换的元素,再加上需要被扭曲的元素,它们二者相结合,从而达到被置换元素一样的扭曲效果。这个话有点绕,我们通过下面的例子就明白什么是置换了。置换的幅度不同,扭曲的大小也会发生相应的变化。

比方说我们这里被置换的元素可以是任何图像,烟雾、丝绸、水波纹、液态流体或者是火焰,它们都可以当成被置换的元素。

比如说这里我们想让鸽子图案和旗帜结合,这个时候就需要用到置换的扭曲命令。首先第一步要做到的就是确定好鸽子在旗帜里的比例大小,然后要调整透视和倾斜角度来适应旗帜的表面轮廓。

最后执行置换命令,让鸽子的图像加入旗帜的扭曲轮廓,这样就形成了两者的完美结合了。界面里水平与垂直的比例,都是可以用数值来调整的。

我们再看下一个,不光是图形,文字也是一样的,添加置换命令之后,文字就会置入到了这个场景里,它的原理和之前是一模一样的。

我们再来看一下其它使用置换手法设计出来的版面,它们都是在表现原有信息的基础之上,通过置换的扭曲为版面,加入了另一种形态。左侧的飘动丝绸中间的楼梯和右侧的这个有点类似于纸张扭曲的效果,这些都是用置换这个命令来表现出来的。

案例拆解

我们来看一下,同样都是这个扭曲,用扭曲的这个思维,它设计出来的画面应该是什么样的。这个版面里文字信息使用的就是扭曲的变换形式,主体文字周围围绕着不规则的扭曲文字,增加主体形象的形式感。这种手法虽然会减弱文字的识别性,但换来的是视觉吸引力。如果想让选择的文字扭曲的话,这个文字最好是比较大的标题性文字。如果是小文字扭曲之后,它的识别性基本就没有了。

我们再来看下一个版面,大家应该能看出来,它就是运用了我们前面讲到的液化扭曲命令,思路就是重复的文字,它能起到强调作用。但有的时候你每一个细节都完全一样,它就会有单调的感觉,我们通过液化工具在对角线上进行扭曲,这样就会产生变化。

我们再来看下一个,这个效果是比较有趣的,它是用什么方式制作的?它是拍摄的。这个设计有的时候就像拍电影一样,并不是所有场景都必须依赖电脑,有的时候实景拍摄也能够带来更好的真实感。

这个版面用的是置换手法,由于我们没有办法找到相同的幕布,这里我们找了一个类似的作为载体,我们在上方加入文字信息,然后用置换命令,这个就变成了跟海报类似的感觉了。

这个版面和上一个有一些类似,但是不同的是它没有背景,它没有载体。这是因为扭曲的材质背景直接镶嵌在文字的轮廓里了。给大家举一个例子,很简单的思路,我们选择一个具有扭曲表面的背景图片,然后将文字放到这个图片上方,应用置换命令,采用多重曝光的手法。我们将这个材质镶嵌到文字里面就完成了,这样就看不到材质了。

案例演示

那么最后,给大家做一个案例演示,用到的就是扭曲的命令,这是一个活动展览的项目,它的主题叫流动消融。

为了达到宣传的目的,这里寻找一个能够让文案中的概念实体化的载体,就是标题,它的标题很直接了,那么提取主标题作为版面里的视觉元素,让它变得很大,成为本案的主体。然后我们将文字稍微拉长一些,这个拉长是手动拉长的,所以它会出现横粗竖细的现象,这个时候就需要修改了,调整笔画的粗细统一,去掉一些不必要的细节,这样这个主标题就刻画完成了。

然后我们绘制版面的比例关系,这一步的目的就是确定主体在版面里的大小。然后主体的这四个字就放在画面里的上部区域,底部的这个红色区域,我们来安排其它的文字信息。

接下来把其余的文字信息编排到版面的下方,我们所有文字编排好以后,最后一步,为画面添加一个水波纹的细节部分。

采用置换命令让二者结合,然后把水波纹去掉,镶嵌到文字里。

这个版面到这里就完成了,我们来看一下它实际的应用效果。

今天我们一起学习了扭曲技巧在版面里的应用,也知道了这类风格它的五种常用表现技巧,扭曲的这个版面不但可以和其它形状结合,更能为版面带来丰富的形式感,它是我们做主形象非常好用的一个手法。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

用一篇干货帮你彻底全面掌握「投影」知识点!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

之前我们更新过如何做投影的文章:《投影一直做不好?看这篇文章就搞定!》,主要针对的是投影的原理进行讲解,包括如何用图层样式去做投影,怎样用工具绘制投影,这些都是我们了解投影的一个基础。教程发布之后,很多同学留言,表示没看够,希望针对其他投影形式再进行更深入的讲解,那这次我们就来满足大家要求。其实投影的设计不难,只要符合画面的光影逻辑,然后加上制作投影的方法,基本就能搞定很多基础的投影形式,话不多说,我们开始今天的教程。

其实投影在设计中的应用是非常广泛的,比如这些海报,都运用了投影的形式。

什么情况用投影

在平面设计中,除了合成设计之外,我们在什么情况下会选择用投影?

1. 增加识别性

比如,在颜色比较混乱的背景上添加文字,或者添加图片,为了区分他们之间的主次关系,我们会添加一个投影。

2. 增加空间感和层次感

这两个画面,通过投影与主体的位置关系,产生较强的空间感和层次感。

3. 提升画面格调

反应产品质感的投影形式,会提升画面的格调,这类比较多的是化妆品与品。

4. 增加形式感

如果你的画面缺少创意性,不妨试试这类投影形式,通常来说它们都是用投影作为画面中的主体,以此来传递出很强的形式感与故事性。

5. UI设计

UI 设计中使用投影。

投影的类型

1. 常规投影

常规型投影包含了普通投影,弧形投影,接触投影,弥散投影。

普通投影

普通投影就是我们最常见的一个投影形式,它可以用图层样式来设置,它的特点就是在图像的四周都会有点阴影的感觉,让画面与背景形成前后景的关系,就像这里的案例。

弧形投影

弧形投影,它的投影是在物体的一侧,像翘起的边缘。

接触投影

接触投影,是物体立面与底面的关系,会有一种三维立体的感觉。

弥散投影

弥散投影,与普通投影的区别在于,它更有深度,也是现如今比较流行的投影形式。

2. 长投影

长投影主要分两种,一种是色块投影,一种是在色块的基础上的渐变投影。

比较常用在图标的设计,还有海报的设计。

3. 倒影

倒影,这类型阴影应该是比较难处理的了,想必大家在做设计的时候,大多数情况会规避倒影这种形式,除非是拍好的照片自带倒影,不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力,以及对透视基础的掌握,之前我们有讲过一篇关于素描知识的文章,在里面介绍过关于物体的基本结构,我们所看到的任何一个物体都有一个结构或者形状,比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中,这些基本形状同样适用。

首先来看二维的倒影,二维的倒影比较简单了,也都很好做,复制一个下来,加个蒙版做渐变处理就可以了。

三维物体,最基本的就是这几个形状,或者几种形状的组合,掌握几种形状的倒影,就能应付大部分倒影的形式。

立方体为基础型的倒影。

圆柱体为基础型。

圆锥体为基础型。

球体为基础型。

组合型。

4. 悬空投影

悬空投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

分为三种类型,二维的悬空投影,2.5D 的悬空投影,三维悬空投影。

二维的悬空投影

先来看看二维悬空投影,是二维的平面悬空,添加一个弥散投影。

2.5D的悬空投影

2.5D 没有消失点,但是会有立体感,在下方添加一个投影,就会有悬空的感觉。

三维悬空投影

三维悬空投影能有很多创意形式。

5. 创意投影

创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,这个主要靠大家发散思维的联想了。

最常见的就是电影海报中的投影表现。

6. 场景合成投影

一种情况是接近真实的投影,和实际照片是一样的道理,一种情况是类似于创意投影,合成的投影算是这几种投影当中最难的。

合成中的投影要自己创造一个光源,也就是想象出一个光源,根据光源关系,绘制出投影效果。

投影在这里都是很真实的表现。

合成也可以做创意投影,这三张公益海报的主角是动物的影子,但是形成影子的是前面的物体,这是很有创意的表现方式。

制作投影的方法

制作投影的方法比较多,比如说利用图层样式,用矢量图形做投影,高斯模糊设置投影,手绘投影等,每一种方法都适用不同的投影类型,我们想更有效率的完成工作,就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。

1. 图层样式

第一个,也是最简单的,用 ps 当中的图层样式来做。

模式一般我们就选择默认正片叠底,这是在正片叠底文章中讲到过,后面的颜色,如果是主体与背景颜色差异比较大的时候,我们可以选择环境色;如果差异不大,我们可以选择主体的相近的颜色,很少有选择纯黑色的投影。

不透明度就是阴影的透明程度,也是很好理解。下面角度,是光线照射的方向。全局光,选择之后,画面中其他元素添加投影,就会默认为一个光源,这样画面中投影会更和谐。

距离,物体和投影之间的距离,数值越大越远。扩展,就是阴影面积的大小。大小,就是阴影的虚化程度。

等高线,可能很多同学不太理解,其实很简单的,我们来看下,纵向,越向上,越实,越向下越虚化。横向,最右侧是投影的中心位置,越向左,离中心越远。根据画面中的等高线,我们来分析下。

这样就好理解了,我们看画面中蓝色圆点的位置,代表中心位置很实,黄色圆点的位置代表远离中心的位置很虚化,最后就得出右侧的投影。

那如果说,我想让投影的周围都变得很实,该怎么调整?

就是把虚的那个点向上调整,这样,就代表外围投影变得相对较实,我们会得到这样一个投影。

如果我想,投影靠近外围的位置,变得比较实,靠近中心的位置,变得比较虚,就可以这样调整。

得到的投影是这样的,我们看到中间白色的区域,就是虚化之后的效果,接近了透明。这个搞懂了,利用图层样式做投影也就基本没什么问题了。

ps 还自带了这么多等高线的样式,大家可以去实验一下。

那什么类型投影,比较适合用图层样式来做?

普通的投影和弥散投影。

画面中人物的投影设置。

2. 矢量图形做投影

画一个矢量图形,之后选择实时形状属性,然后点击蒙版,通过调整羽化值,来调整投影的虚化程度,用这个方法会比较直观的观察到,而且因为是矢量图形,所以还很方便我们随时调整它的形状。

高斯模糊和矢量图形做投影,所适用的投影类型是一样的,同样适用于普通投影,弧形投影,接触投影,弥散投影。

还有悬空投影,它和矢量图形投影的区别就是,矢量图形更方便改颜色和形状,还有虚化程度。

在主体下方加一个小面积的虚化阴影,就会有悬空的感觉。

3. 高斯模糊做投影

添加高斯模糊之前,一定要记得给图层转换为智能对象,因为高斯模糊对图层是有不可逆的破坏性的,所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度,动感模糊同理。

高斯模糊做投影,适用的投影类型。

4. 手绘投影

最后一个,用钢笔工具或者画笔工具来绘制投影,这个是比较难的,在投影那篇文章中,我们已经讲过在一个场景中,怎样分析投影的位置,大小,形状,方向,以及如何用钢笔工具去绘制投影,这里我们就不再重复了,如果有不懂的同学,回看之前的文章《投影一直做不好?看这篇文章就搞定!》

那我们来看一下,手绘投影适合什么类型的设计。

第一种就是合成设计,这个要考虑光源的位置,投影的透视,投影的颜色等,一般会采用画笔和钢笔工具的结合。

创意的投影同样适合,因为它和合成投影基本一样,只不过不会根据对象的实际特征去绘制。

倒影适合用钢笔工具和画笔工具来制作,这里就涉及到了透视,我们能看到物体在基面上的倒影,实际上是物体在基面上的投影的倒立映像。

在平时的工作生活中,我们要学会观察,比如积水的路面,反射建筑的倒影是什么样子的,镜子里的自己,或者可以多看看摄影照片,慢慢养成习惯,提高对倒影的敏感度。

倒影的做法

做倒影最重要就是两个字──拆分,我们给这个立方体做倒影,首先要思考的是,它的倒影是由哪几个面产生的,找到物体与承影面接触的线,然后把这两个面提取出来,沿着这个线把所在的面拆分出来。

然后向下镜像,根据实际情况再翻转,要注意,倒影的透视和原本物体的透视要一致,也就是平行原本对象的边线。

然后给倒影添加一个蒙版,做一个渐变,就可以了。

用刚才的方法给魔方做一个倒影

同样把与底边接触的面裁剪出来,可以看到透视关系还是不一样的,我们应该让倒影的面和上面的魔方透视一致。

用调整大小里的斜切,调整倒影的透视。

添加蒙版,然后在与地面接触的位置添加一个闭塞阴影就可以了。

再做一个复杂点的,给包做倒影。

同样,找到底面接触面,然后把相应的面裁切出来。这里注意的是,每个面要单独拆分,这样才方便为每个面设置倒影。

把所有拆分的面复制一个出来上下镜像。

调整透视,就用调整大小工具,斜切,合并倒影的图层。

用蒙版渐变,别忘了闭塞阴影。

倒影规律及特点:

投影在不同材质上的表现

好了,前面介绍了每一种投影形式,以及适合的场景。那接下来,我们来看看在同一光源的前提下,不同承影面,也就是投影在不同的材质上是如何表现的吧。

1. 布面

布面材质是软性材质,在光源下会吸收光的反射,所以投影的边缘会相对模糊,不会过于锋利。

案例演示

我们来看下在布面材质上的投影的做法,首先在物品与布面底部绘制一个闭塞阴影:

然后新建图层,根据光源绘制出阴影的长度与形状:

给长投影做高斯模糊,然后用蒙版把边缘处理得柔和一些:

统一光影,把产品修饰一下:

整体调整下色调,就可以了:

2. 镜面

镜面是光滑的,所以光照射之后,会形成和物体一样的影像,也就是倒影。

设计之前,先参考下带有镜面倒影的照片。

案例演示

第一步,闭塞阴影:

第二步,拆分图像,拿到下方,调整透视,这是之前我们讲过步骤,这里就不重复了。

调整产品的光影与色调:

加点小装饰,烘托氛围:

最后是整体调整下色调和明暗:

3. 水面

水面和镜面类似,但是水面会存在水波纹,所以在做投影时候要注意投影的形态要与水波纹一致。

参考一些带有水面倒影的照片。

案例演示

依然先画闭塞阴影:

绘制出整个投影形态:

高斯模糊处理,因为是水面,所以阴影和倒影要共存:

下面就是倒影了,方法步骤同样。

那么问题来了,是怎么做到弯曲的效果的?其实就是用 PS 当中的置换来做,这是置换的参数与水面素材。

关于置换的教程我们也发布过,《平面高手课堂!如何用扭曲工具快速强化作品设计感?》

最后统一色调和光影就完成了。

4. 底地板

地板有的会打一层蜡,这个时候,就会存在一些倒影,所以在这样的地板上倒影和投影是并存的。

先看一下在不同地板上的投影样貌。

案例演示

这个我们选择大理石材质,首先闭塞阴影:

绘制投影的形态:

给投影高斯模糊,添加蒙版做渐变:

然后,按照光影和环境色,处理产品的明暗和色调:

5. 渐变色/纯色

这也是我们设计中遇到比较多的情况,在纯色或渐变色的背景中,为了让画面具有空间感,我们经常会给物体加投影,这个投影可以是常规投影,也可以是倒影。

案例演示

闭塞阴影:

根据光源绘制投影:

高斯模糊,然后添加蒙版做渐变:

修饰产品的色调和光影:

统一光影色调:

教程到这里就结束啦,估计有的同学会纳闷,为什么我们没有细讲怎样根据光源绘制投影?因为在之前投影文章中已经手把手给大家演示过了,没看过的同学赶紧去补课,可阅读《投影一直做不好?看这篇文章就搞定!》

总结下今天的内容,第一,投影在画面中作用。第二,我们给投影形式做了分类,有常规型,长投影,倒影,悬空投影,合成投影。然后是制作投影的方法,着重介绍了倒影该怎样做,最后是投影在不同材质上的表现。通过关于投影的这两篇教程,相信大家已经能掌握一些原理和技巧了,其实最快速学习投影的方法,就是要学会观察生活中的事物。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

|学会版式的N个Tips|—线要怎样用,才能让你的设计更加分

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

线往往会被设计师忽略,或许对线的理解有局限性,因而不常使用。那么线要怎样用才能让设计更加分呢?下面给大家分享关于线的文章

文章来源:站酷

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

2019 年 LOGO 设计趋势报告(下)

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

抽象图形拼接

坦白说,这些抽象的 LOGO 设计让我立刻想起了JK·罗琳和她书中的魔法符号。如果这些Logo背后都有着独特而富有力量的故事,那么它们确实可以很好地服务于品牌。这样的了 LOGO 设计应当在笔触上保持一致,并且充满意义,我觉得如果能传递出这样的信息,它就很优秀了。

利落清晰的笔触,完美的角度和弧线,这样精准的设计会给人带来可靠的感知。当然,这些Logo 的应用场景同样有着严格的环境要求,设计师几乎没有异想天开的余地。这些 Logo 看上去相当正式,有着明显的高级感。

负空间

借助负空间来传递信息一直一种巧妙的 LOGO 设计技巧,它就像缺少关键证据的犯罪现场,墙上的洞,它并不是借助现有存在的因素来告诉你信息,而是通过一个「不在场的关键元素」,来传递重要信息。负空间就是这样,它同样也是一块画布,只不过给人的感觉是通过画布的背面来呈现信息和故事。

负空间并不是为了隐藏信息而存在,就像联邦快递 (FedEx) Logo中隐藏的箭头,或是 Toblerone 巧克力 Logo 中山腰上的熊。这些元素都不是为了隐藏信息,而是为了通过这种不完整来传递更多的信息。通过正空间来凸显负空间就是关键的技巧,正如 Reinhard Ernst 博物馆的 Logo 所示,中间开放的矩形区块如同画框,似乎可以代表博物馆的任何一件藏品,这也是一种「less is more」的设计。

托拽笔触

很多做 Logo 的设计师都曾经历无法控制的时刻,发呆失神应该也经常会发生。如果你是在纸上画草图,笔尖无意识地滑动,或者墨水洇出,都会产生有趣的笔触痕迹。我知道这不是电脑上绘图的方式,但它确实帮助我描绘出这种视觉设计的特征。将笔尖绘制成一个完美的圆,而笔尖后则是留下托拽的痕迹,在笔痕结束的位置,自然留下的也是一个圆弧边缘。

不管这些 Logo 的布局特征是怎样的,它们都呈现了类似视觉特征。小圆点和托拽痕迹构成了它主要的「笔触」,它们而生动地拼出字母,绘制出路径,或者勾画出有意义的符号。我想你已经捕捉到了它们的特征了——活力四射,生动新鲜的笔触路径。

间断渐变

在logo设计中广泛使用渐变色,是整个行业在过去十年中经历的最两极分化的趋势之一。仍有很多设计师抵触过渡色,因为从LOGO设计的角度上来说,渐变色违背了很多规则,而这些规则是在数字时代之前就已经存在了。不过,LOGO 设计师们总能想出好办法,比如间隔渐变式的设计。

将均匀渐进的色彩变化用连续的纯色片段来替代,同样呈现出色彩的变化和韵律感,但是消解了渐变色在 LOGO 展示过程中潜在各种问题。上面案例中,Qwant 的 logo 就是通过轮廓化的颜色分割来实现这一点,它真实地模拟了渐变的效果,所呈现出的效果比CPA Ireland 要好,CPA Ireland 则使用了的四等分几何分割加上色阶转换。总体上来说,间隔渐变的色彩使用技巧,很好地在当下的流行趋势和 LOGO 设计诉求之间找到了平衡点,值得尝试。

轮廓线条

使用线条来勾勒和描摹事物,传达信息,是一项古老而传统的技艺。在时下的审美体系当中,使用轮廓线条来绘制 LOGO 似乎显得太过于老派,不够现代。不过技术总归是服务于表达的,依然有设计师能够充分的利用这一技术——加入透视,不再局限于二维,而是开始描绘三维的对象。

这一的设计看起来和如今的线性图标的绘制方式在技法上保持了延续性,但是它在维度呈现上更加深入,更加具有表现力和形式感。通过富有规律性的利落的线条,设计师不用太多的线条就能勾勒出立体而抓人眼球的LOGO。这种设计要求设计具备更强大更精准的描摹能力。你可以延续这种思路到整个设计当中,这会使得整个品牌化设计思路更加开阔、有趣。

句点元素

在 LOGO 设计当中,使用句点这样的标点符号,通常都会借用它身处标点符号中的含义和功能。当我仔细琢磨这一趋势时,发现这些类似句点的符号有时像句号,有时则偏向冒号,它们在LOGO中总带着一些奇特的意味。如你所见,这些原点在更多的时候,它更接近于句号,充当收尾和封顶的终止符。

有的时候,它的装饰性更强,以不同的形式漂浮在文本和符号周围。如果你要深究这些 LOGO 设计本身的含义会发现,这个小圆点可能是字母 i 上的那个小圆点简略之后的残留痕迹。这个小圆点,在如今的很多 LOGO 中已经超出了装饰性的范畴,基于不同的需求和设计出发点,它可能意味着时间,可能代表着字母,承载着特定的词汇和含义,可能是感叹号或者句号,表达情绪或者终止。设计师将内容抽象成几何图形,承载意义,提升了对话的智慧。

翅膀元素

在传递放飞、飞翔、展望、自由、远见、轻盈、速度等含义的时候,很多设计师都会借用翅膀的意象。这也是为什么越来越多的地方会看到被提炼和抽象出来的翅膀和羽毛的符号或者图形,某种意义上,翅膀已经远超出了它本身的意味。这些被设计得形制不一的翅膀类的图形,有着冥想的前倾或者后掠的姿态,仿佛在对抗变幻莫测的大风,借助空气动力学向上飞起。

很多翅膀元素形制类似于字母 U,只不过两只翅膀在倾斜角度、弧度和长短上,进行了比较深入的调整。之后,再对 Logo 进行弧度和细节进行修饰,这样就完成了。如同我们上面所在展示的几个案例,设计师经过很快的迭代就可以完成这样的设计。与此同时,在具体的设计过程中,设计师还会引用品牌中一些字母的特征,比如Jetta的字母J,DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了双翼的意象。苹果有翅膀,乌龟也可以有翅膀。我们可以用翅膀填补空白。

门窗元素

门其实我们常常会引申出「打开新世界大门」的概念,它在实际设计中会带有通道、时间、新世界,甚至一种全新心境和意境的概念。很多品牌 LOGO 都想借助这个意象来承载更高远的含义,微软就是一个典型。门和窗本身一直都是一组象征性极强的元素。门象征着通行的权利,解决方案的途径,机会,甚至欢迎的含义,某种意义上它们和眼睛在含义和隐喻上是共通的。这也是很多设计师在设计 LOGO 的时候青睐这一意象的原因所在。

关于2019年的LOGO趋势报告

2019年的LOGO趋势报告,是我们的第17份 LOGO趋势报告。每年的趋势报告都是从成千上万的 Logo 中,寻找新趋势和细微微妙的差别。我们承认,每一个设计案例都代表着来自世界各地的设计师们的思考和心血,我们对他们表示敬畏,并感谢他们不遗余力地帮助我们完成这份报告。感谢所有在过去、现在和未来几年为潮流报告做出贡献的设计师们。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


2019 年 LOGO 设计趋势报告(上)

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去的一年里 LOGO 设计行业蓬勃地发展着。对我而言,查看各大设计机构的LOGO趋势分析和报告,就像开礼物一样,因为我知道等待我的是一段独特体验。这其中有平凡到令人失望的设计作品,也有令我欢欣甚至惊喜的好作品。而这便是LOGO设计行业仍然充满活力的证据,是值得感激的恩赐。

值得欣喜的是今年的设计作品依然体现着设计师的好奇心与勤勉,这激励我们向着新高度进发。你会在今年的趋势中看到往年主题的延续,但是融合和改变形成了跟为独特的设计趋势。设计师们开始采用非传统的色彩和线条,赋予新的内涵。

Logo中的图案通常以黑白配色呈现,营造一种复古感。设计师们以大量的网点元素作为构建差异的方式。粗砺的噪点、条纹以及网线铜版和木纹砖纹的调合,使logo呈现一种复古的视觉特征,这似乎与时下的高饱和渐变色彩的使用趋势背道而驰。

现代流行文化不仅改变了我们看待符号的方式,也影响了视觉设计时的优先级。随着纹理、图案、排版、摄影和插画元素在视觉品中的优先级发生变化,视觉元素愈发地被收到重视。现代品牌很多时候会被视作为是被视觉美学所推动前进,因此也会要求 LOGO 具备更强的视觉吸引力。

阴阳相生。当一种新的风格、思路,新的滤镜、插件和设计工具出现的时候,设计都会向着不同的方向演化。但是,每一个精心制作的LOGO,包括动态LOGO 你都很难把功劳归结于某一个工具或者方法,它始终是多种方法、工具和流程共同作用的结果,很难把不同的因素彻底地区分开。尝试新的事物从来都不是坏事,但是我仍然寄希望于独特的技术和方法,希望在设计里留下自己的痕迹。

我需要再一次重申的是,潮流并非是趋势所造就的。与时尚领域不同的是,设计趋势不会随着文化变迁而突然爆火,相反,它在设计维度上,一直是向着两个方向延伸,触摸过去也面向未来。更准确的来说,是我们一直从过去的天才构想中汲取经验,同时还在不断开辟走向未来的路。

毫无疑问,今年流行的主题中出现了很多时下流行的元素和主题,包括无人机、蘑菇、刺猬、鹈鹕、蛇、华夫饼、针、灯泡、三眼虎和蒸汽波。虽然这些流行元素只是暂时的,但许多作品仍然制作精美。尽管这种流行元素的风潮最终会落幕,我还是要向它们致敬。

我仍然要感谢 LogoLounge 社区的2万多名来自世界各地的设计师,他们为这份报告提供了大量素材。在本报告发布时,我们的网站拥有超过30万个的logo设计师,我们可以与会员一起继续观察他们的职业发展趋势。能够与他们并肩工作,支持我们热爱的这项事业,是一种荣幸。

1、摩尔斯阴影

老实说,要求一个老练的LOGO 设计师在 LOGO 当中加入流行的阴影效果,这仿佛是对设计师灵活的创造力进行质疑。今年我们的团队精心设计了一种新的方式来为他们的作品加入阴影——因为阴影效果本来就不止一种,而还需要兼顾到 LOGO 本身的可用性。我们避开短暂流行的渐变色,用一连串同心的点和线来呈现光影动态,以这种新的方式,比传统阴影更具视觉张力,更重要的是,它可以更自然地输出纯矢量的单色 LOGO 。

在过去的几年里,我们看到圆点和线混合在一起,展示了不同元素的融合。通常,这的设计方案会以同心圆为中心,其他元素彼此平行,但不会完全合并到一起。通过将这些元素彼此融合到一起,让它们和主体元素融合、交汇,在负空间的帮助下,设计师以这种方式让消费者在头脑中自觉将图像填充完整。比如咖啡杯中的几个点,以及用点状表示的兔子尾巴。

2、堆叠

有人会因为盘子里的食物混在一起而崩溃,也有人对此毫不介意。所以,有的设计师将元素之间的各种元素之间的界限给先打破了,通过重叠来创造层次感,互相堆叠的元素会呈现出一种模糊的效果。而其中大多数 Logo 都呈现出了一种引人入胜的信息,巧妙地吸引了人们的关注。当然,也许大多数人会选择创建一个对比明显、信息清晰的LOGO。

这种堆叠式的LOGO设计,使用两个图层足矣,三个图层也勉强可以驾驭,但四个图层就太过了。如果背景无法辨认,发挥作用的就只有最顶层的视觉元素。上图所示的这些logo融合了类似于徽章和插画的排版,正如这些例子所示,这些源自复古的设计能够焕发出全新的力量。

3、微阴影

阴影作为logo设计中的一个元素,在很多方面都是至关重要的。我用了一个完整章节来讨论阴影的重要性。阴影暗示着光的方向,更确切地说,它可以显示维度和空间关系。一条垂直线和一条水平线,再加上一点阴影,就可以确定谁在平面上方了。画一匹色调均匀的马,那么马的两条后腿就应该处理得暗一点。

有时候,我们作为设计师会受限于自己的技法,这是很正常的。在这些标志当中,包含着一个非常微妙的小阴影,虽然在 Trustpilot star 这个案例中,看起来确实做了比较清晰的分离处理,但我仍然想知道,如果按比例缩小,这种对比是否足够明显发挥作用。我的建议是,如果需要效果,就要尽量使得效果可以明显地呈现,而不是要佩戴老花镜才能看得清楚。但是毋庸置疑,有很多设计师是经过审慎考虑之后,才选择了这样的方案。

4、斜纹线条

热情饱满的新生代设计师正在重塑潮流。在数字时代之前,想要在插画中加入条纹、圆点、中间色调、木纹或其他异国情调的半调效果,首先需要去当地的艺术用品商店逛逛。如今如果你想要实现半调效果,你只需花费很少的钱就可以将其应用到你的设计当中。复古风的设计书籍中充斥着各种各样的标志,展示着一些非常漂亮的半调式的渐变效果,这会让设计师们对这种相对古老却陌生的技术感到好奇。

这一趋势是非常典型的70年代复古,不仅在风格上,而且在色调上也有体现。这些带来半调效果的斜条纹线所创造的效果接近于40%的黑色。这样的 LOGO 设计能够让用户一秒回到以往那个美好的时代,不那么机器制造的感觉。但是它仍然存在缺陷,就是当它缩小的时候,斜条纹会模糊,最终会呈现出一片灰色的效果。

5、波点

在半调和高亮式的设计技法之间,波点元素还有一席之地。这些超大的圆点其实也算得上是半调的一种形态,它们实际上算是图标中的一个组成元素,而不仅仅是背景。从这些LOGO的设计案例当中,我们可以看到,这些圆点近似于编织的篮子或桃子的红晕,图案并不仅仅是用来表达色调的,它还暗含光影和纹理。

使用更大胆图案元素,已经是一个公认有效设计策略,打破紧张的平面色调和布局,并创造视觉吸引力,让元素更醒目。作为一种从在渐变和失真之间寻求平衡感的设计,波点使得设计师可以以有限的颜色,简单而有趣的矢量圆点来吸引消费者。

6、高亮

人们很容易认为,在吸引人们注意的领域里没有什么新技巧。猿类拍打胸部,孔雀展开羽毛,人类则在社交媒体上发帖。还有一小部分身份设计师会选择高亮效果来修饰他们的设计——至少这是今年最引人注目的趋势之一。

我们通常认为黑白配色的 logo 是在添加高光之前展示给客户的。当下流行的高亮色调有淡紫色,日光粉,和冰蓝色。抛开所有的视觉趣味性不谈,设计师们认识到,正是色彩的火花让这些logo摆脱了潜在的平庸性。

7、扇形元素

过去两年之间,设计主题已然延续到简化设计,以及 Logo的纯粹化。这种对前人作品结构的致敬,同样体现着设计师的创造性,因为他们想出的解决方案是基于重新排列几何元素而来的。每当你听到有人表示相信一切都是以前做过的,只要提醒他们,作家和音乐家一直在重新排列了一些笔记或字母,而且新的音乐和书籍,比logo 要多的多,但是灵感之泉却从未干涸。这大概也是以四分之一圆微代表的几何元素,开始大规模地出现。

今年,四等分的圆圈元素——或者说扇形,随处可见。大多数情况下,设计师会完全基于这个扇形来作为唯一的模块,但偶尔也会让它们与圆、半圆、正方形、三角形和其他几何形状混合在一起。即使在表达复杂的信息时,形式的纯粹性可以恰当地与之进行平衡。如果logo看起来很冗杂,那么放入元素的数量应当有所限制。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

图片排版找不到灵感?送你17个实用技巧!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

排版的难处在于,我们不是根据已经设计好的版面来填充内容(套模板),而是要根据具体的内容来布局版面。比如版面中的图片有时候是一两张,有时候是十张八张,由于构成元素的不同,导致采用同样的构图、版式、形式往往是行不通的,所以葱爷今天的这篇文章就是要来分享,在不同情况下有哪些图片排版技巧。

单图排版

1. 平铺

即把图片铺满整个版面,这种处理方式多用于封面设计。

或者在内页中把某一半版平铺一张大图,另一半则排列文字或者小图。

平铺的图片比较有张力,有视觉重心的图片适合这么处理。下图平铺的效果就一般般。

还有一种情况是把图片当做背景,也可以采用平铺,如下图:

2. 四周留白

即图片要比版面小,并让其四周都留出空白。这里也分两种情况,一是图片位于版面正中央,图片周围的留白是对称的,这种效果类似于相框,常用于封面设计。

还有一种情况是图片周围的留白并不对称,如下图,留白较多的区域会用来排文字,常用于海报设计和画册内页设计。

3. 一条边出血

即把图片的一条边对齐边界,这么处理有点冲破束缚的意思,可以增加图片的想象力和版面的设计感。

4. 三条边出血

这么做会把版面分成两部分,一部分为色块,一部分为图片,在排版时我们还可以通过文字、色块或颜色把这两个部分联系起来。

5. 拆分

即把一张图片拆分成几份,然后隔开一些排列,这么做比单独放一张图片会更有设计感和趣味性,风景类图片适合这么处理。

6. 跨版

即在画册设计中,让图片同时占据两个版面。当在一个跨版中只有一张图片时,如果只把图片排在某一半版中,那么另一半版就容易单调,所以在这种情况下通常会使用跨版,而且图片放大后会更有张力,还能把左右两个版面关联起来。

双图排版

在画册的设计中,有时候我们应该把一 P 当成一个版面,而有时候则需要把一个跨版当成一个版面,这取决于具体的内容以及排版形式,所以图片的排版也要分成这两种情况来考虑。

1. 统一大小对齐排版

在一些作品集或产品画册中常用到此排法,视觉流程简单、清晰。

2. 统一大小错位排版

比对齐排版更有动感,且由于图片不多,所以也不会显得混乱。

3. 一大一小排版

这种排版对比鲜明、更有张弛,可以在一个跨版中使用,也可以是在某一 P 中使用。

还可以把其中的一张图片去底,这么组合起来更灵活,对比更强烈。

如果把整个跨版当成一个版面,那么可以把大的那张图进行跨版,小的那张图则不跨版。

或者把大图铺满一个 P,而小的图片和文字则排在另一个 P。

这两种排法都很大气且不失细腻。

多图排版

有时候一个版面内的图片会有很多,这种版面排起来会更有难度,常用的排版方式有以下 8 种。

1. 大小统一对齐排版

这种排法比较整洁,但缺少变化,适合用于目录页或者产品和人物介绍。

2. 大小不统一对齐排版

这种排法会比前一种更灵活一点。适合利用网格工具来辅助排版。

这种排版虽然没有统一图片的大小,但由于保持了严格的对齐关系,所以依然显得很整洁。

3. 图片与色块组合排版

图片与色块组合在一起排版既不会像只有图片那么单调,还可以利用色块排文字。不过注意色块的颜色不要太多,且颜色最好来自图片。

4. 错位排版

即把相连两张图片刻意错开,或者把图片与文字的位置互换,这么做可以有效打破图片完全对齐的单调,且由于有一定的规律,所以也不会对视觉流程造成太大影响。

5. 把图片拼成特定的形状

这种排法适合图片比较多的情况,这么做可以避免图片太多而显得混乱,而且因为拼成的形状要与设计需求相关,所以会显得更有创意。

6. 按照某一路径排版

这种排法跟前一种一样,适合数量较多的同类图片使用,可以避免图片排得太过分散,如果不统一图片的大小和方向,效果会比较活泼但不规范,适用于照片墙和儿童画册的排版。

如果统一图片的大小和方向,或者使它们呈渐变式的变化,这些图片还可以形成一定的节奏感,不仅不会乱,还很美观。

7. 一大多小排版

如果在版面中分开排列大小差不多的多张图片,那么该版面就会缺乏重点且没有张力,而如果把其中一张图片放大,与其他图片形成鲜明的大小对比,就可以有效解决这一问题。

8. 自由排版

即大小不需要统一、图片与图片之间也不一定要严格对齐,效果比较灵活,设计感较强,常用于杂志排版中。

这种排法有两点需要注意,一是图片不要排的太分散;二是最好要有大小对比。

去底图也很适合这么做,当然,在排版的时候也要有大小的区分,同时要注意图片与图片、图片与文字之间的轮廓要形成互补。

结语

版面中的图片数量有从一张到数十张不等,图片的排版方式也非常多,所以我没法一一列出,以上总结的 17 个技巧仅仅代表一些比较主流的方向,具体的变化还需要大家根据具体的内容和设计需求去做尝试和突破,希望这篇文章能给你一点帮助。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

腾讯设计师:送你10个提高文字设计感的方法!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们在设计中除了接触到图形,还需要了解文字的设计。特别的文字设计或者排版可以使整体的画面效果更加有氛围,甚至超过图形表达的感受,更加直观地表达出内容的主旨。

文字的设计方式有很多种,例如通过字体变形,结构重组等方式来让文字变得更加特别,但往往会让我们耗费比较多的时间。

因此我一直在思考有没有一些既简单又的设计方式来提高文字的设计感。在浏览国外的一些设计网站的过程中,做了一下文字设计形式方面的收集,并整理出十种我认为具有代表性的文字设计形式。另外还参考这些设计方式,使用中文字体进行了一些尝试。

拉伸的文字

拉伸的处理手法,让文字更具有张力,整体氛围更具标题感和图形化,但依然保留着文字该有的识别度。常见于纯文字排版的海报,既满足阅读需要,同时具有设计感。

拉伸与文字本身的字形、字体有着很大程度的关联,并不是所有的文字都适合拉伸,例如下面的案例。

1. 不同字体对比

从方案尝试中看出,左边字体在进行拉伸之后,文字本身的结构会遭到破坏,而右边的效果可以较为接受。因此在设计的过程中尽量选择可适用于拉伸的字体,另外在拉伸的过程中需要对细节重新处理,使字体保留原有字体的细节美感。

2. 不同字形的对比

从下面案例中对比,O 在进行上下拉伸的时候效果比较好,而左右拉伸的时候会失去字体本身的美感,而 Y 在上下左右拉伸后整体视觉效果都相对平衡。

3. 细节处理对比

优化字体线条的细节可以使得整体文字更加规整、方正(右边)。而未进行细节的设计则会显得笔画参差不齐(左边)。

4. 传统与现代对比

传统的字体拉伸后(如下图中间的字体),字体本身的韵味就失去了,因此不建议对一些较为传统的字体进行拉伸设计。

5. 设计尝试

中文字的笔画比较多样性,因此在细节的设计上比英文来得更加复杂,在处理「撇、捺、点、折、弯、勾」时需要保持原本的笔画结构性。

6. 拓展案例

结合实际要表达的内容,使用拉伸的设计手法,例如结合物体,叠加颜色或者交错拉伸等。

虚实结合文字

虚实结合即为线面/阴阳的设计手法,通过虚实的处理,可以突出一组或一段文字中的重点信息。在一些强调主次的设计中,可以尝试这种方式来做区分,线面结合的处理手法让原有都是面的字体多了一些透气感和空间感。

虚实处理的方法需要考虑本身字体的粗细,过分纤细的字体效果可能并不明显。

1. 尝试对比

从对比中,发现粗体相比于细体来得更加直接更容易出效果,对比明确。

2. 中文字体的尝试

从尝试中来看,与上面中的结论较为一致,较细的字体使用虚实结合效果并不理想。对于书法体的应用,更多需要考虑字体的收边效果是否工整,收边过碎,会影响在描边之后的细节美感。

3. 设计尝试

递进渐变的文字

通过递增或者递减的设计手法,让原本简单重复的文字元素,变得更加具有层次感和节奏感,让文字的生命力变得更加丰富多样。

在设计的过程中需要提前规范好各个字体之间的差异关系及变化的效果过程。按照一定的数值倍数差异比进行变化。

1. 不同方式的尝试对比

在尝试的时候发现,粗细变化的模式可能更多会依赖于字体本身的模式。

2. 中文字体的尝试

中文在使用递进渐变的方式中需要考虑整体文字的结构感和块状感,由于字形较为复杂,整体视觉效果会过于零碎。

扩展变化的文字

与递进渐变接近但却又有差别的文字设计形式。扩展变化的文字具有张力的同时有一定的速度感和发射性,就像向四周展开的波纹效果,具有延续性。

按文字的行高或者字宽作为基础值,按一定的比例,对文字进行破形切割处理,上下左右进行扩展发散。

1. 比例值示意效果

2. 中文字体的尝试

外观的完整度还算可以,但由于中文本身自有的特性(笔画较为丰富多样),因此在扩展层次的数量上需要进行一定的控制,不宜过多,以短语或标题使用较好,避免过于形式而导致文字识别性降低。

3. 设计尝试

底纹的文字

文字作为纹理出现在画面中,区别于图形化的纹理。既有图形感,同时可以辅助传达一定的信息和态度。

在字体的选择上尽量适用字形较为简洁的字体,避免影响前景内容的展示。设计上可以结合其他的设计形式,例如虚实结合/拉伸变形/扩展变化等方式,提升画面的丰富程度。

1. 中文字体的尝试

常规的中文字体,整体效果还算不错。但结合中国书法字作为底纹,可以让整体的设计更具有不同于英文的设计感,整体效果更具有力量感,因此建议在设计中文底纹的时候可以大胆尝试中文书法字。

穿透的文字

通过叠加的方式,让原本简单的文字和背景产生了融合。既提升了背景的层次感,又让文字变得具有设计感。

粗细的字体会产生不一样的视觉感受,较细的字体会产生若隐若现的视觉效果,文字的识别性会稍弱,较粗的字体识别度基本上没有太大问题,因此在设计的过程中可以结合实际的情况选择不同粗细的文字。

1. 粗细对比尝试

穿透的文字设计,对于打造设计的大片感具有很突出的视觉效果。例如漫威的电影片头设计。

2. 中文字体的尝试

结合不同的语意使用不同的字体,再结合穿透的设计方式,使画面具有中文的文艺感。

3. 拓展案例

结合实际的内容设计,穿透文字的玩法还可以拓展出更多不一样的设计,例如下面这些例子。

扭动的文字

扭动的设计,让文字具有曲线的动态感,提升了文字的装饰性。不同曲线的动态变化,赋予文字不同的律动感。变形的文字并未影响到文字该有的识别性和阅读感,却具有了设计感。

如下面的三个案例,曲率的差别,赋予文字不同的动态规则,有不同的视觉感知,有时柔美,有时却具有速度感。因此在设计的时候,可根据具体的内容设计不同的扭动趋势。

1. 中文字体的尝试

对比可见较细的字体使用扭动的设计,效果并不理想。由于中文笔画的差异点,经过扭动之后整体外形较为不规整,而粗体的效果则较为规整,动态曲线趋势也较为明显。

2. 设计尝试

扭动+虚实+底纹的效果。

3. 拓展案例

更高级的设计手法是利用自然环境的介质结合文字,起到扭曲的视觉效果。

立体层叠的文字

与扩展变化有异曲同工之妙,文字通过一定的角度和位移间隔,由二维向三维的视觉效果进行变化,让文字更加多变化和有重量感、层次感。

立体层叠的设计对于字体本身具有一定的要求,较为纤细的字体出来的效果并不理想。

1. 不同的字体尝试

从对比中看出,细体或较细的衬线字体,层叠后会出现衔接不上或视觉黑点的情况(如下面左图和右图)。因此设计时建议使用粗体,并且整体笔画较为平均的字体(中间的图)。

2. 中文字体的尝试

虽然具有了层次感和空间感,但也会让整体变得更加复杂,因此需要根据文字的多少情况进行使用。

3. 拓展案例

立体层叠还不止单向的设计,例如可以进行轨迹变化,向外扩展层叠,或是增加一些颜色渐变来丰富整体的设计。

颜色叠加的文字

文字通过错位,叠加,颜色变化,透明度变化,切割等方式的设计之后,具有故障的视觉偏差感受。整体视觉感知类似双重曝光的照片,文字具有丰富的层次感。

颜色叠加的效果,对于颜色的选择极为重要,两个颜色交错之间的颜色可以为过渡色或者互补色。

细体的效果并不理想(如上图左边第一个),建议设计的过程中使用较粗的字体,另外在使用的过程中需要考虑文字的识别度(如右边的效果),重叠之后文字的识别度或多或是会受到影响。

1. 中文字体的尝试

由于中文字比英文复杂,因此使用中文字在设计的时候,可以寻找一些共笔的地方进行重叠(如下图左边的设计),利用字体笔画粗细一致的情况下,进行了边与边的重叠。另外在设计的过程中建议加大字间距,这样可以避免不同文字的重叠,产生过度复杂的效果,影响文字的识别性(如下图最右边的设计)。

2. 拓展案例

在简单的叠色之外,结合不同质感和肌理,可以让整个文字具有不一样的视觉感受。

立体空间的文字

文字按照立方几何结构进行排版,通过颜色差异,阴阳,线面等方式设计处理后形成空间感和立体感。相比于平面排列的文字更具有空间感和层次感,提升整体画面的设计感。

1. 设计尝试

使用空间错位结合虚实的设计,让简单重复的文字变得具有空间感和立体感。

2. 拓展案例

除了常规的空间打造,甚至可以融入到场景中或者结合物体本身的设计。

以上设计风格,常常会在一些运动品牌的设计中看到。例如,Nike 的设计中应到的文字,也会结合这些方式,来丰富和提高整体的设计感。

火箭队出场片头的字体应用,线形字体叠加渐变的效果,具有层次感又有未来感。

阿迪达斯的广告:

Converse 的广告:

Under Armour 的广告:

除了一些品牌的设计,音乐唱片的封面也有应用到这些类型的设计手法。

我们除了在一些常规的媒介上会看到相关的文字设计,在这两年的耐克或阿迪达斯的鞋子设计中,也会加入文字元素的设计,甚至球员会直接在鞋子上写上文字。

文字设计的拓展叠加

文字的设计已经成为一种新的设计趋势,结合实际需要表达的想法,对于设计手法进行活学活用是做出好设计的关键。当然只有掌握了基础手法才可能做到举一反三的设计思考。在实际设计的过程中,我们往往不会是单独使用某一种方式,而是对不同的设计手法进行重组再设计,或者使用 2~3 种方式叠加设计来打造整体的画面效果。如下:

总结

在这十种基础的文字设计中,通过结合发散可以迸发出远远不止于十种的创意设计。本次收集总结除了自身学习提高之外,希望可以起到抛砖引玉的作用,激发设计师对于文字的设计思考。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

这是一篇不看会后悔的配色干货!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

今天我们来讲一讲大家期待已久的配色方面的干货。

其实几年以前我就写过一篇关于配色的文章,早期的面粉估计还有印象,在那篇文章里我基本已经把设计师需要用的关于色彩构成的主要精华内容都汇总出来了(文末会附上文章链接的,别着急)。

但是因为不同设计行业的工作内容是有差别的,而且每个人的基础和理解能力也不一样,所以仅凭一篇文章是无法解决所有人的难题的,所以今天这篇文章算是关于那篇配色知识讲解文章的补充篇。

不过在讲解如何配色之前,我们还是先应该先记住一些关于色彩的理论知识,因为有了理论依据我们才能在做设计的时候有理有据,而不是胡乱配色和瞎试浪费时间。

所以这篇文章主要分为了以下几个部分:

  • 普遍意义上的色彩是指什么?
  • 设计流程和配色思路分享
  • 我的其他配色法宝
  • 总结

普遍意义上的色彩是指什么?

简单点来说,色彩即颜色,颜色可以分成有彩色和无彩色两大类,看有彩色主要看色相/纯度/明度三个方面的属性,无彩色也就是白色/黑色/各种深浅不同的灰色,也可以说无彩色是饱和度为零的色彩。

色相,即可以明确表示颜色色别的名称,比如红橙黄绿蓝靛紫:

色彩有冷暖之分,我大致用温度的概念标注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(当然,这里的温度是我自己为了具体化冷暖的概念而标记的,主要是方便大家理解,所以不用去纠结这个数值准不准确哈哈,你明白他们代表很冷/很热/一般冷/一般热就好了!~)

明度,就是指色彩的明亮程度(通俗点讲,在某种色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。

纯度(饱和度),就是指色彩的纯净度,我以红色举例,如下图所示:

如果大家想看更加详细的关于色彩构成原理的解说,可以看这个系列:《优设独家配色专题》

设计流程和配色思路分享

不管我们做什么方面的设计,设计练习也好,实际项目也好,在设计之前,我们最好是能先明确我们的设计目的是什么,然后确定一个主题,依据这个设计目的和主题,去构思创意,有了创意后再去去探讨具体的落地执行,其中包含了字体(标题文案)的设计排版配色、画面整体的构图和配色、细节优化、氛围渲染等等;

当然,这一次关于其他方面的内容我只会附带着讲一点,因为我们今天的主要内容是讲配色。

以我最近做的一张照片海报设计为例:

下面是我前几天用手机拍的一张照片,照片里的内容是我的手拿着一朵花。

1. 设计之前先确定主题

比如这一次我是确定了设计主题为:浪漫。

因为我看了下这张照片里面花是粉色的,我的手指甲油也是粉色系的,而我也是一个(年纪越大就越)喜欢粉色的女人~同时因为我喜欢尝试各种不同的风格主题,浪漫这个主题我之前是没有做过的,所以要不这一次就浪漫一回好咯。

那么说到浪漫,大家脑海里的第一反应会是什么呢?我不知道大家会想到什么,反正我会想到很多场景画面,比如2002年的韩剧《冬季恋歌》里,男女主角在雪地里相拥的画面,天上飘着雪花,同时背景音乐响起了《My memory》;

△ 《冬季恋歌》因为是2002年的韩剧,所以现在看海报是有点过时了,但剧是好剧的

再比如2017年的电影《爱乐之城》里,男女主角在繁星点点的绝妙夜空下翩翩起舞和拥吻的场景,同时背景音乐响起了《City Of Stars》;

△ 电影《爱乐之城》海报

再比如1995年上映的宫崎骏动漫《侧耳倾听》的结尾情节,时隔2个月才见面的男女主角一早就偷跑到一个可以俯瞰城市和日出的角落互相表白,微风轻拂着女主的短发,一栋栋高楼弥漫在朦胧的雾气当中,日出的余辉映射在波澜的水面,同时背景音乐响起了《Take Me Home, Country Roads》;

△ 宫崎骏动漫《侧耳倾听》剧照

等等等,还有很多浪漫有关的画面我就不多说啦。

总之,浪漫是有很多种表现形式和配色的,但是有一点是有共通性的,那就是要想打造出浪漫的感觉,背景音乐、色彩搭配和氛围渲染很重要。

比如除去听觉上的背景音乐渲染氛围以外,视觉上还有《冬季恋歌》里的白雪凯凯和雪花飘、《爱乐之城》的蓝紫色夜空和繁星点点、《侧耳倾听》里的暖黄色日出和微风波澜。

那么回到我自己拍的这张照片上面,这种大面积的灰白色背景只能让人感觉很性冷淡,一点都不浪漫,所以这张照片我肯定是要抠图才可以用的;从我自己的年龄、喜好、原照片内容限定等角度,可能走《爱乐之城》那种类型的浪漫色彩可能就更适合一点:用暗色调的紫色搭配我原本图片就有的粉色系。

ok,分析到这里先打住,我们先不要继续着急去细化到底该怎么去配色了这时候我们只需要有一个大概的色彩感觉就好了,因为配色之前,我们还有很重要的一步没有做,那就是构图。

2. 配色之前先构图

很多人之所以总是说自己不会配色或不管怎么配色都感觉不对劲,其实是因为,搭配颜色这个动作不能为时太早了,你得先把你整个画面的构图和基本框架先敲定了再去考虑配色。

先构图再配色,先构图再配色,先构图再配色,重要的事情说三遍!~

因为构图相当于化妆的时候先打好底子,底子不打好,你再怎么化妆都是徒劳的。同理,如果你的构图很乱或者基本型都没出来,你就去考虑配色,很有可能就是你磨半天都设计不出一个满意的结果,这就是很多人磨蹭半天,做出来的设计依旧不好看的很重要的一个原因。

因为你的设计步骤错了。

比如我今天要拿这朵花做一幅海报,我先不考虑配色和氛围渲染的事情,我就这样光溜溜的排个版出来再说,这里的排版方式和字体选择主要考虑乐个方面,一个是照片原本的条件限制,一个是围绕着浪漫这个主题去做,最终排版如下图所示:

一个浅色一个深色,大家可以对比看看效果。

这幅海报就这样随便看看其实也是可以看的,只是缺少细节和情感,也没有特别的吸引力罢了,最重要的是不够浪漫。

那么到这一步,我们就可以继续细化配色方案,分配色彩比例,优化细节,增加最重要的一些氛围渲染步骤了。

所以我继续优化海报,最终得到了下面这幅海报:

这张海报的背景是我用ps自带的笔刷刷出来的,顺着一个方向刷出一种坠感,这就是起到一种氛围渲染的作用。

然后,虽然粉色和紫色也算是同色系的颜色了,但是因为明亮的粉色与暗色调紫色在明度上有很大的落差,所以等他们组合在一起就会有一种碰撞的感觉,给人的视觉记忆力就会强一点,暗色也给人跟多神秘的感觉,让人琢磨不透。

毕竟,让人琢磨不透的人比一眼就能看穿的人给人更多联想和猜测,有插曲有意外的浪漫爱情给人的印象才会比较深刻一点,对吧~

同时,为了方便大家理解,我又做了以下几个版本,大家可以对比看看色彩的差异给人感觉上的变化。

比如,如果我改变画面的明度,提高画面的明度,如下图所示:

这样看,是不是画面给人的感觉要少女很多?而且给人一种很温柔的感觉,但是盯久了会觉得甜腻腻的。

如果前面第一版暗色调的是为20-40岁左右的女人而设计的浪漫,那么上面这一版则像是为20岁左右的小姑娘而设计的浪漫。

在这个基础上,如果我既改变明度,也改变配色,给画面加入非同色系的颜色,如下图所示:

这样看,其实感觉也很美对不对?美归美,但是却感觉比上面那一版还要腻,因为像是为儿童或小萝莉小公主而设计的浪漫了,适用的心理年龄段更小了。

ok,我们接着往下看。

如果我将背景随便换什么颜色,但是保持背景颜色是同色系不同明度的,画面里有明也有暗,如下图所示:

最后出来的感觉其实也是可以的,也很美,但就是少了一些抓眼球的感觉,觉得中规中矩的,没什么特别之处,就好比那种平平淡淡的感情,缺少激情的感情。

但是这种同色系的做法,却是平台和品牌为了统一形象方便视觉规范化管理最喜欢使用的一种配色方式,对此,大家可以去留意一下天猫或京东的一些频道页面或者大型活动各个分会场的页面配色。

ok,前面的配色技巧大家估计发现了,我要么是用同色系配色,要么是同色系改变明度和纯度,要么是用不同色系不同纯度但是保持明度一致,所以以这种方式去配色,无论你怎么配其实最后出来的感觉都是不会太差的,只是针对的受众不同罢了,可以各取所需。

所以如果你不会配色的话,那么就在这些基本的框架规则里去变化就好了。这是非常保险的一种配色方法。

但是如果你不遵守这种规则,而是胡乱瞎配色,则很有可能会出现下面这种情况,要么是画面显得脏,要么是画面显得艳俗、花哨和乱,如下图这些错误示范所示:

上面这几幅图虽然是一些错误的配色示范,但是很多对色彩不敏感的孩子可能也会觉得:「诶,其实也还行啊」,其实主要是因为有构图的基础在那里硬撑着,底子在那里,所以色彩即使配的不够好糊弄一下也还行。

拿化妆举个例子,为什么那些本身样貌底子就好的人,即使乱穿衣或乱化妆你也觉得看起来还行,一旦她好好的打扮画个妆,那简直就是神仙颜值了,可底子不好的人呢?可能你就算再会穿衣打扮,你也只能变成看起来还行,到达不了神仙颜值的地步。

所以我再强调一遍,配色之前先构好图,把底子打好,这很重要。

总结起来就是,做设计之前先确定主题,然后搭框架搞定排版样式,接下来再考虑配色,再然后氛围渲染,最后一步优化细节,over。

我的其他配色法宝

下面这些知识点都是我平时总结出来的一些配色小心得,是我屡试不爽的一些方法,分享给大家。

总结来说,我的配色技巧主要有以下几种:联想法、提取法、目的导向法则。

1. 联想法

所谓联想法就是,类似于头脑风暴那样,当拿到设计需求或确定设计主题后,我会提取一些关键词,根据关键词去联想很多相关的可能,然后再去筛选一些结果为我所用。

比如下面这张照片,原本照片的颜色是很简单单一的。

但因为我给他确定的主题是「野花的回忆」,所以我就会去联想:「野花都是什么样的颜色?」「回忆又是什么样的色调比较合适?」,后来我就确定了野花主要以比较艳丽的色彩居多,比如玫红色、亮黄色、白色等等,至于回忆嘛,可能就是有年代感了,所以大的基调是暗色调的。

于是下面这幅海报的色彩搭配就出来了。

其他用联想法配色的还有很多,比如下面这一组。

原照片:

做成海报后:

不过这里需要说明的是,联想法要求你会联想,所以大家平时最好是多留意身边的事物,多观察大自然什么的,还有适当去了解一下色彩心理学,你会明白每一种色彩都是可以代表不同的感情和事物的。

通过长时间的锻炼自己对于色彩的敏锐度,可以帮助你快速的配出自己想要的色彩。

2. 提取法

所谓提取法,就是当我们拿到某一个产品或模特需要围绕着它们做设计,我们就可以直接从它们身上吸取颜色,作为主色或点缀色都可以,这样搭配颜色的好处就是:省时省事不容易出错,而且还有呼应主题和画龙点睛的效果。

比如下面这张照片,原本照片的颜色就是绿色和淡粉紫色。

那我最后做出来的海报配色也是这些颜色咯,只是文字部分单独用了白色而已。

哦对了,一般白色和黑色这两种无彩色都是最适合用来作为标题或文字内容部分的颜色的,也是最不容易出错的,同时联想法和提取法其实是可以互相搭配使用的,不冲突。

但是,有时候我们如果希望画面可以更活泼一点,一般做那种比较卡哇伊风向的设计,标题也会用彩色,而不是黑白无彩色,至于标题用什么彩色,也是可以用联想法和提取法啦,如下图所示:

3. 目的导向法则

前面的联想法和提取法的配色方法是教大家如何选取颜色,但具体到哪里该用什么颜色,该用什么明度什么色相的颜色,则就取决于你的设计目的是什么了,所以我将它称之为目的导向法则。

比如,之前我给大家提到过,有的设计是走艺术路线(以传递情绪为主,重在情绪上的表达),而不是常人理解的一般的商业设计路线(以传递信息为主,重在信息产传达准确),前者适用于一切与艺术有关的设计或设计师个人的自由创作,后者适用于所有以卖货为目的的商业活动设计。

这2种类型的设计目的是不一样的,面向的受众群体也不一样,所以在色彩选择上就会有差异。

举个例子,当我们提到某某平台又做活动了打折了,他还做了一个卖场促销页面,你去看看,绝对基本是以红色、橙色等暖色系为主色,并且页面氛围做的非常热闹,就跟你去逛商场,映入眼帘的就是各种sale、大减价标牌,并且还有人拿着喇叭大喊:「进来看看进来瞧瞧啊!最后一天大减价买了不吃亏买了不上当啊!」的即视感。

并且,页面里一些特别希望消费者能注意到的信息,它一定会突出处理,不仅字号要够大,而且在色彩上也会突出。

拿我的书《这么设计能热卖》作为产品图做个示范,我做了一个促销海报,如下图所示:

但是,如果你去看一些比较性冷淡或大牌画风的店铺或官网看看,它完全就是一副我根本就不care你买不买的调调,倒不是因为他不想做生意,而是他的调性就那样,比较自我或端着。

好比人家的定位就是孤傲的,或则是你高攀不起的大小姐和公子哥类的,买ta东西的人本来也就是这种类型的,或者希望别人觉得自己就是这种类型的,毕竟要彰显自己的身价和品味,不能掉价撒。

所以,你看ta基本不会给你看大大的字号,也不会用一些很花里胡哨的颜色在标题上,而是以黑白灰这些无彩色居多,更不会特地用一些突出的颜色去醒目的区分一些字眼,总之页面看起来不会有太浓的促销氛围

虽然我的书籍封面设计本身其实就不是性冷淡和大牌的风格,但我依旧做个示范给大家看看,如下图所示:

而介于这之间的,也就是那些时尚类型的,或时尚里带点促销的,或放得下身段走点接地气路线的牌子,则是会在保持好看时尚的基础上,依旧会适当的用大点的字号或显眼的颜色去突出一些重要的信息,但色彩不会用的太花哨,如下图所示:

而像上面这种比大牌感亲切一点又比大卖场时尚一点这种介于之间的情况则是绝大多数的,毕竟小众的是少数,成为大牌是少数,虽然现在是大卖场但是不想走大牌路线路线的是少数,不想赚钱的商家也几乎没有,于是最终都沦为了不高不低的大多数。

总结来说,目的导向法则可以分为2种情况:

如果你想低调一点内敛一点,你在配色上就保守一点,尽量少一点颜色比如三种颜色以内,或者是用同色系或柔和点的颜色等。

就像一个性格很温和或者很内向的人一样,没有攻击性,安安静静的。

拿我之前做的一幅照片海报为例。

原先我是考虑让这幅海报看起来有视觉冲击力一点,但是我又不想画面太过于张扬,毕竟我那天穿的衣身衣服色彩是比较柔和的橘粉色,所以我用了对比色而没有用同色系,同时控制画面里的颜色不超过3种,并且这幅海报里色彩之间的明度是差不多的,如下图所示:

但如果我用同色系不同明度和纯度来配色,出来的感觉就是下面这样的,你会感觉画面更淑女安静一点,没有什么攻击性:

可是如果你想更加高调张扬一点,那么你在配色上就可以多用一些颜色,比如三种以上颜色,或则是用对比色或互补色而不是同色系配色,或则是纯度高一点明度高一点的颜色,然后不同明度纯度的颜色互相碰撞。

就像一个脾气火爆性格张扬的人,他们不愿意淹没在人群里,而是要做人群中最醒目的那一个。

我还是那上面那张海报改个颜色给大家看看,结果如下图所示:

如果我想继续突出大标题文案,那么我还可以将标题的无彩色白色换成亮黄色,画面里的颜色更多了,冲击更大了,甚至你会觉得有点花哨:

ok,上面这几张图,大家对比一下就会知道这其中的差异了。

所以记住啊,配色不是乱来的,它一定是有章可循的,也是要依据你的目的来配的。

当然,可能有人会说:「有时客户给的主题实在是太晦涩难懂了,我实在是联想不出来啊」,或者给到你的产品本身的配色就丑的不行了,如果你直接吸取颜色那做出来的设计肯定也是丑爆了,那么,这时候就要看你是不是有一颗灵活的脑袋能够随机应变咯!~

如果联想不出来说明你百度总可以吧,然后自己要多看多积累你的脑袋里才有货的。

如果原产品本身配色就丑那你就分析它丑在哪里加以改进不就行了嘛?比如它是因为纯度太高了很艳俗,那么用低一些纯度的同色系是不是就可以了?比如如果它是因为本身的色彩太多了很花哨,那么我们只选取一两种颜色用用是不是就可以了?

再比如还有人说,给我的产品根本就没有颜色,纯白、纯黑、纯灰色,那我该怎么吸颜色啊?

天哪!~这种类型最好搞定了,因为无彩色就是万能色,无彩色无论是搭配无彩色或者其他任意有彩色都可以的,这就又回到我前面提到的目的法则了,不懂的可以回头再仔细看看~

写在最后

平时也经常会有人问我到底该看什么书来提高配色能力,其实我想说只要你掌握了我前面提到的基本的色彩构成原理这些基础知识,剩下的其实都不需要你继续去看其他的色彩书籍了。

因为看其他书籍无非就是要扩充你的知识面罢了,它只是其中一种增加知识储备的途径而已,但现实是很多人写的书一看就让人犯困,而且晦涩难懂,你买了也是浪费钱,倒不如通过看设计网站、看时尚杂志、看电影、多观察大自然等有意思的途径去培养自己对于色彩的敏锐度,然后看看我的干货文章勤加练习,多实践多思考来的有用。

尤其是大自然的色彩,那真的是一个超级大的配色宝藏啊,你随便看看那些花花草草、蓝天白云、日出日落、海底和大地,哪个配色不是美的让人惊叹?就连那些恶心的毛毛虫都有一身好看的不行的颜色。

我们做的很多设计,不管是什么行业的设计有关颜色的,电影也好,三维也好,平面的也好,其实基本都是来源于大自然的。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档