电商banner设计作品「网店banner设计作品」

互联网 2023-03-06 09:49:27

今天给大家普及一下电商banner设计作品「网店banner设计作品」相关知识,最近很多在问电商banner设计作品「网店banner设计作品」,希望能帮助到您。

1

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

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

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

色彩有冷暖之分,我们大致用温度的概念标注一下,其中“0”是指中性色,“-0”是指中性偏冷,“+0”是指中性偏暖。

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

纯度(饱和度),就是指色彩的纯净度,以红色举例:

接下来进入到今天的主题,要想做一名合格的电商设计师,最基础学问最大的当属Banner设计了,今天兴元君就要来说说Banner设计中对于色彩的应用。

2

色彩在banner设计中起到的作用

1、点缀作用(渲染氛围用)

2、突出主体(梳理信息层级)

3、平衡画面(整体视觉协调)

4、延续风格(涉及到风格统一调性的时候)

5、塑造画面气质(传递恰当的情绪给用户)

就以上五种作用,将会分别举例说明:

1、点缀作用(渲染氛围用)

当你做了一个冷色调的页面拿给你的主管或需求人看,他说画面太冷清的时候,而你又懒得改颜色改形式,那么不妨试下下面这样周围点缀些暖色的方式。

当你明明做了一个自认为非常热闹促销的页面后,需求人仍然觉得画面太冷清不够热闹而你又不想大改动的时候怎么办?Give him or her some color to see see。

2、突出主体(梳理信息层级)

通过色彩对比来突出信息层级的作用

3、平衡画面(渐变色使整体视觉协调)

先要了解一下几个概念:

邻接色相对比:色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。

类似色对比:色相对比距离约60度左右,为较弱对比类型

中差色对比:色相对比距离约90度左右,为中对比类型

对比色对比:色相对比距离约120度左右,为强对比类型

补色对比:色相对比距离180度,为极端对比类型

我们有时候会看到一些Banner强调的是整体画面的协调感觉,并不会重点去突出强调什么,整个画面给人感觉特别舒服,那是因为他们往往采用的是类似色对比或者邻近色对比,亦或者是采用相似明度和饱和度的不同色相的渐变调和。

Banner举例:下图Banner给人感觉是整体画面非常柔美协调统一,强调统一感觉。

当然,以上也可以结合起来运用(运用渐变色+对比)

4、延续风格(涉及到风格统一调性的时候)

通过色彩来延续风格的作用往往在平台做一些比较大型的活动,涉及到多个不同品类不同分会场的时候会运用到,一些店铺电商品牌也慢慢规范化了之后会保持品牌统一调性,也就是保持设计风格一致,色彩的明度纯度接近,只是改变色相,如下图所示:

5、塑造画面气质(传递恰当的情绪给用户)

可以很活力、很可爱、很高贵、很素雅等等。

华丽高贵

高冷大牌

很潮

年轻活力

森女系素雅

热闹促销

3

如何在Banner设计中使用色彩

色彩不会独立存在,他必定是依附于其它构成和表现形式而存在,比如平面构成、立体构成等,所以将从下面几个方面来论述:

(1)当色彩运用在不同的面积

(2)当色彩运用于不同的形状

(3)当色彩运用在不同的肌理

(4)当色彩运用于不同的色彩

(5)当色彩运用于不同的主题

(6)当色彩运用于不同的环境

像兴元君就比较喜欢红色,一个非常热烈的颜色,所以我就拿红色来举个栗子吧,其他颜色的运用道理是一样的:

(1)当红色运用在不同的面积,他的视觉感受是很不一样的,当外部背景尺寸不变,红色区域面积越大越让人感觉眼睛发胀,仿佛都要跑到你眼眼前一样,这就是近大远小的道理。

1、2、3红色区域哪个更吸引你眼球?

Banner举例(看红色区域):

(2)当红色运用于不同的形状,个形状让你感觉最不稳定?哪个形状让你感觉更活跃?哪个形状让你感觉更时尚?

3最不稳定,1最规矩,5最不规则,1-9都可以很时尚,主要在于如何去搭配其他元素

Banner举例(看红色区域):

(3)当他运用于不同的肌理,看下图所示,红色色块叠加肌理后和没叠加肌理对比有什么不同?红色块叠加不同肌理后又有什么不同?

图6是没有叠加任何肌理的红色,显得更加平淡,其他红色块叠加了肌理后使得画面更丰富,给红色增加了更多感情色彩,或是活泼或是怪异或是热闹等等。

Banner举例(看红色区域):

(4)当红色运用于不同的色彩 ,大家会看到相同面积的红色圆放在不同的色彩上出现了大小不一或明暗不一的错觉,因为红色是暖色,所以根据冷暖对比,红色放在冷色或中性色 (黄色绿色)上可以比较突出。

根据色相对比,红色属于有彩色,有彩色放在无彩色(黑白灰)上也可以比较突出,但是红色放在邻近色(比如偏冷的紫色和偏暖的橙红色)上就显得特别弱,因为色相太接近了。

Banner举例(看红色区域):

(5)当红色运用于不同的环境,环境分为外部大环境和内部环境,有人所站的角度是要保证平台上所有Banner颜色整体看和谐统一,雨露均沾。

而有的人所站的角度是要保证自己的Banner图是最突出最吸引眼球的,前者为了和谐统一 ,后者是为了竞争为了突出自己 。

比如:当红色色块放置在纯度明度相近的不同色相的色块里,它是和谐的融入的整体的:

当红色色块放置在邻近色色块里,它跟整体环境看起来也是比较和谐统一不突兀的:

当同样是红色,但是她的形状、面积大小和其他的不一样,那么她是会比较突出的,也就是所谓的特异:

当同样面积的色块,只有一块是有彩色红色,其他都为黑白灰无彩色,那么在这个环境里,那么红色块是最突出的:

当同样面积的色块,只有一块是暖色红色,其他都为冷色,那么在这个环境里,那么暖色系的红色块是最突出的,也就是冷暖对比:

Banner举例(看红色区域):

因为明度纯度接近的原因,红色Banner在这个环境里还算比较融入的,虽然周围冷色系Banner过多。

调整了饱和度和明度之后,红色Banner在这个环境里变得非常突出,变为了主角。