0411-39943997
工作时间:周一至周日 8:30-22:00
前端技术
News and information

banner设计中的5种背景应用

标签:banner设计浏览次数:   时间:2017-10-30

我们先回顾下banner由哪些部分组成:主要由文案、商品图或模特、背景、点缀物组成,如下图所示:

uisdc-ttt-2016092713

 

我们可以看到,一个Banner的主体始终是文案或商品模特,文案为主的情况居多,而背景始终是个配角,它是用来烘托主题,渲染气氛,突出主体的。

三、banner设计中的背景有哪几种呢?

运用对比、呼应、烘托等手法,主要有以下几种:

1、大量留白的背景

2、点缀物烘托的背景(元素或颜色取之于商品或模特)

3、纹理、商品、模特叠加的背景

4、实景拍摄的背景

5、软件合成的背景

接下来我们具体说下这些背景:

1、大量留白的背景(什么情况下背景应该大量留白呢?)

(1)为了让主体绝对突出,不需要其他任何干扰

uisdc-ttt-201609275

(2)为了让主体绝对突出,不需要其他任何干扰,同时也为了体现品牌定位偏高端的特性(意思就是没钱的自动散退~~看看就好)

uisdc-ttt-2016092715

以上2种情况重点在于,你的产品图品质一定有足够的吸引力,模特表情姿势动作穿着要足够吸引人,而不是随随便便什么低品质就可以这么处理的(比如上图的模特还有AirPods 看起来是非常有美感的)。

比如下面这样,估计就会被某些老板骂:你个死美工,图还没做完你就想下班了?!!还不快滚回座位去做图,不做完不准下班!!!~

uisdc-ttt-2016092710

(3)当你的产品图很多,并且用到产品图来构图的时候,背景也需要尽量简洁干净,以保证产品不被干扰(前景复杂,背景干净才有对比咯)。

uisdc-ttt-201609272

2、点缀物烘托的背景(元素或颜色取之于商品或模特)

这种类型的banner会在背景里加入一些跟商品模特图或者跟主题有关的元素,可以是手绘图案,也可以是各种图形(某种程度上文字也可以作为图形看待)、光线等元素,举几个栗子:

(1)雨滴元素与标题和产品特性相呼应

uisdc-ttt-2016092711

(2)动态的五颜六色的液体颜料跟标题和产品卖点(多彩)相呼应

uisdc-ttt-201609276

(3)适当加入一些光影可以营造一种空间层次感,使画面更饱满

uisdc-ttt-2016092712

3、纹理图案/商品/模特叠加于背景

这种适用于将文案作为绝对主体突出,同时模特、商品、logo等都很多的情况下可以使用这种形式,会看起来很时尚又不失促销氛围。

(1)模特叠加于背景(模特数量至少1个)

uisdc-ttt-201609278

(2)商品叠加于背景(商品数量至少1个)

uisdc-ttt-2016092716

(3)文字或者图案叠加于背景(有规律的平铺或者局部叠加)

uisdc-ttt-2016092717

(4)在不干扰前景文案和商品视觉突出的情况下,背景适当叠加一些相关的纹理,可以使画面更加细腻有质感,比如下面这张图,背景就叠加了一些编织物的纹理,跟产品主题相呼应。

uisdc-ttt-201609271

4、实景拍摄

如果本身就有现成的不错的实景拍摄照片拿来用,那就最好了,不过需要注意的一点就是,我们把照片拿来直接用的时候,一定要保证文字信息的可阅读性,所以在文字部分会适当加一些半透明蒙层、涂抹颜色或者背景虚化的处理,以保证文字的可阅读性。

(1)背景涂抹+虚化处理

uisdc-ttt-201609274

(2)文字背景添加半透明层

uisdc-ttt-201609273

(3)暗背景搭配亮色文字,或者亮背景搭配深色文字,文字信息才可以得到突出。

uisdc-ttt-2016092718

5、合成场景

这类背景的制作要义在于整体场景的搭建要注意围绕着产品特性或者主题去营造相对应的氛围,要注意对光影、环境色以及透视等的把握,举个栗子:

uisdc-ttt-201609279uisdc-ttt-2016092719

(图片来自站酷推荐设计师杰克)

平时我也会偶尔在群里布置设计练习,发现很多人一动手就喜欢玩场景合成,觉得这是最容易的,殊不知玩合成是非常需要功力的,而现在普遍的问题在于很多人并没有很强的绘画基础,甚至对透视、三大构成还有基本的素描三大面、五大调都没有概念就开始动手做了,那么可想而知出来的效果当然是既不美观也到处都是破绽。所以说动手之前,还是多看多思考,同时先潜心把这些基本功搞扎实吧~



本文地址:http://www.billionseo.com/front/20171030457.html
Copyright© 2011 仟亿科技,All rights reserved.
首页关于我们新闻资讯服务项目软件产品解决方案成功案例网站地图加入我们联系我们