详解电商Banner广告设计的构图配色技巧

2019-04-15 06:20栏目:关于ca888

ca888会员登录 1

中度色相搭配

◆ 采用这类配色方案,能够带来明快活泼的效果,展现画面的力度,但又不失调和感

◆ 色相对比距离大约为90度左右,属于中度色相对比类型

ca888会员登录 2

Flat UI

空气炸锅,因为自身小巧,且特性明显,决定用折线跳跃式的构图方式来增加画面活跃度,而鸡翅炸物作为产品功能的强化进行点缀,背景配色和标签配色分别和产品及食物的颜色对应。

ca888会员登录 3

十大基础配色法

1、无色设计:不用彩色,只用黑、白、灰色

2、类比设计:在色相环上任选三个连续的色彩或其任一明色和暗色

3、冲突设计:把一个颜色和它补色左边或右边的色彩配合起来

4、互补设计:使用色相环上全然相反的颜色

5、单色设计:把一个颜色和任一个或它所有的明、暗色配合起来

6、中性设计:加入一个颜色的补色或黑色使它色彩消失或中性化

7、分裂补色设计:把一个颜色和它补色任一边的颜色组合起来

8、原色设计:把纯原色红、黄、蓝色结合起来

9、二次色设计:把二次色绿、紫、橙色结合起来

10、三次色三色设计:三次色三色是下面二个组合中的一个

红橙、黄绿、蓝紫色或是蓝绿,黄橙、红紫色

并且在色相环上每个颜色彼此都有相等的距离

ca888会员登录 4

配色网

ca888会员登录 5

灰色是百搭,其实黑白灰都是百搭,色块颜色不够就用灰色,页面不够高大上,把文字变成深灰色;单色更适合做报告;用什么媒介播放PPT一点要提前测试,提前调色;

获取合理色彩与明亮对比的小技巧

◆ 第一看不出字形,说明对比度偏低了

◆ 对比不只是深浅之间,互补色也可提供自然对比

◆ 如果图片复杂全焦,利用叠加或编辑图像应该是最有效的选择

Color Scheme Designer 3

ca888会员登录 6

ca888会员登录 7

色彩三要素

色相:色彩不同的相貌,是有色彩的最显著特征,指能够比较准确地表示某种颜色色别的名称。光谱中红,橙,黄,绿,蓝,紫为基本色相

明度:色的明暗程度,也可称为色的亮度、深浅

色彩的明度有两种情况:

A. 同一色相的明度变化(同一颜色加黑或加白以后产生不同的明暗层次)

B. 各种颜色的明度变化(每种纯色都有与其相应的明度,黄色明度最高,蓝紫最低,红绿为中间明度)

纯度(饱和度):色彩的鲜艳度,表示颜色中所含一种色彩的成分比例

ca888会员登录 8

ca888会员登录 9

补色系列

ca888会员登录 10

色彩的反差

颜色对比的情况跟色彩心理学联系非常紧密

如果你的设计是想讲述一个非常正规的事物,那么用强对比,强对比提起人的集中力和紧张感

如果你想表现轻松、随意,那么就用弱对比,弱对比让人舒缓、愉悦

ca888会员登录 11

这种色彩搭配通常都非常的有鲜亮活泼,但尽量不要用三个大纯色的搭配,要用它们降纯后的的灰度色,然后也是要有一个主次关系,一个颜色为主,另两个为辅,如图就是橙、紫、绿;红、黄、蓝等。

ca888会员登录 12

ca888会员登录 13

常见色彩搭配方案

ca888会员登录 14

千图网配色

图一为常规摆放构图,两款产品,主要把重心集中在好看的那款产品上,加相应颜色感比较强的食物辅助。图二则是较为活泼的折线跳跃式构图,这类构图形式比较容易出效果,但是对于元素的提取和摆放需要多多斟酌下。图三则是完整展示 局部放大的方式,执行步骤其实很简单,主要看我们怎么去抓取他们的表现点,选到最适合产品性格的表现方式。

ca888会员登录 15

纯色色彩应用

往往会使基调显得更加年轻化、有活力、积极向上

ca888会员登录 16

4,用取色器制作色卡

构图分析(总结出四大类型)

——姜汁小队长JWZ

色彩的黄金法则60:30:10

60%的主色调,它可能被用来渲染画面气氛

另外的30%是为了画面的平衡,是为了衬托主色调而生

至于剩下的10%,设计不能是死板的,有时需要一点点缀

ca888会员登录 17

ca888会员登录 18

配色

ca888会员登录 19

相近色相搭配

◆ 这类配色方法能够让配色效果更佳自然纤细,让画面展现柔和雅致的效果

◆ 色相环上为相邻的二至三色对比,距离大约为30度左右

◆ 不过同样需要注意通过明度调节来避免单调乏味缺陷

ca888会员登录 20

公司的简介PPT或者提案经常会使用到,这时候选用跳色时要考虑到公司的形象识别系统(CIS),经常会在logo上提取颜色,充当跳色。

画面由主体物和次主体斜面对称而形成的杠杆关系,与主标题之间形成稳固的三角构造关系,此构图方式画面很饱满、稳固。适合两种产品或一个产品两面展示时使用。

ca888会员登录 21

基本色混合黑色

神秘、黑暗、罪恶、危险色调,更体现男性色彩

使用纯色或更明亮的阴影色时,与渐变能很好搭配

ca888会员登录 22

ca888会员登录 23

总结

ca888会员登录 24

补色搭配

◆ 颜色对比非常强烈,色彩相互衬托,使画面达到清晰醒目的效果,展现力量与速度感

◆ 能够很好的演绎活力四射的运动氛围和色彩跳跃张弛感

◆ 色相对比度在180度左右,是色环中相对的想个色相

◆ 这类搭配最好让一个颜色多,一个颜色少,层次分明

ca888会员登录 25

提供各种搭配的方案。

构图四:折线跳跃式

ca888会员登录 26

今天小集要和小伙伴们总结的是几点平面配色的基础知识

主色主要用于文字,一般为黑色或者深灰色。个别需要强调的可以适当突出。

PS:文中所针对的广告图主要是作为日常宣传的以产品为主体的表现方式,大促及大型活动时候的设计不做过多参考,但在配色上的应用也是可以通用的。

ca888会员登录 27

类似色相搭配

◆ 相近色搭配能能够让画面展现出更好的视觉动感,具有和谐、流畅的效果

◆此类配色方案最能体现突出印象

◆ 色相对比距离大约为60度左右,属于较弱的对比类型

ca888会员登录 28

提供色彩的分析以及搭配方案。

类似色相对于单色系可变化的范畴会大很多,但也是在主色调明确的情况下辅助添加类似色,这类配色方式在banner应用中还比较常见。是一种比较好掌控的配色方式。

ca888会员登录,最后给大家一句口诀

对比

使用与文本有鲜明对比的图片很有重要,比如深色背景搭配亮色文本

或者深色背景使用滤镜或叠加元素处理,这样就能确保有足够对比度

ca888会员登录 29

案例来自知乎,赤兔女的回答:

色彩理论基础

ca888会员登录 30

勿忘黑色

一般人对黑色有一定的恐惧感,因为黑色是没有色相的,会认为黑色会让画面变得死气沉沉

恰恰相反,有时候用好黑色,会让画面呈现出简练、精致的感觉,甚至是灵性

ca888会员登录 31

ca888会员登录 32

这是emart上出现的大部分家电banner图,我们发现他们的颜色变化并不大,在蓝和暖灰两种之间用的比较多,一是由于产品本身以黑白色系为主,所能衍生出的颜色并不多,再者网站本身多颜色的产品和banner已经很多,穿插更为朴素的电器配色更容易被识别出来,符合产品性格。那我们在专门的自有商城网站上该如何把握配色呢?我认为是可以有所突破的。

ca888会员登录 33

对比色相搭配

◆ 视觉冲击强烈,画面充满活动动感,适合需要高度视觉冲击的画面效果

◆ 色相对比度大约在120度左右,属于强对比类型

◆ 需要注意的是把控不好很容易产生杂乱劣质感

◆ 解决方法:可采用多种调和手段来改善对比效果

ca888会员登录 34

第三种 三色系

配色活泼且有理有据

颜色选择原则:针对听众选择颜色,关键是要在专业性和趣味性之间作出平衡

您可以使用 Microsoft PowerPoint® 或WPS中预定义的具有良好颜色组合的颜色方案来设置演示文稿的格式。

ca888会员登录 35

WPS 配色选择按钮

通过幻灯片投射的颜色组合可能产生不同的效果。因此在可能的情况下应在幻灯机上测试演示文稿,以便确认颜色组合是否满足需要,并在进行演示前进行必要的调整。

一些颜色组合具有高对比度以便于阅读。例如,下列背景色和文字颜色的组合就很合适:紫色背景绿色文字、黑色背景白色文字、黄色背景紫红色文字,以及红色背景蓝绿色文字。

在演示文稿中使用图片时,请尝试选择图片中的一种或多种颜色用于文字颜色。颜色组合将起到关联幻灯片中元素的作用,使幻灯片产生协调的效果。

一般情况,赱屰在做PPT时,整体色彩不会超过3种。商务,工作场合色彩因以庄重为主,比如上方的深蓝色。这种也更加符合现代色彩审美,色彩过于艳丽,会影响整体效果。

色彩的实际应用

ca888会员登录 36

ca888会员登录 37

ca888会员登录 38

基本色混合白色

这种基调给人更加明亮、和平但缺少活力的感觉,体现女性感

ca888会员登录 39

党政、婚庆之类的用红色 / 生命、健康类的用绿色 / 医疗、科技类的用蓝色。

ca888会员登录 40

ca888会员登录 41

简单易懂,不信你自己看

ca888会员登录 42

注:此构图名词参考张子建《气韵设计理论研究》,具体可参见其详细。

版权声明:本文由ca888发布于关于ca888,转载请注明出处:详解电商Banner广告设计的构图配色技巧