第9章　背景怎么玩（故事思维做设计）

一直有人问Banner背景怎么做，所以就写一章吧。

我们先回顾一下Banner由哪些部分组成:

我们的主体其实主要是文案或商品模特，背景始终是个配角，它是用来烘托主题、渲染气氛、突出主体用的。

在讲Banner的背景制作之前，我们先看几段小场景:

描述1

LS是一名电商设计师，今天他发工资了，因为约好了要请几个哥们儿晚上一起吃饭，所以忙完手上的事情后他匆忙收拾东西进了电梯，不巧碰到了一位打扮靓丽手提prada最新款包包的年轻女士，定睛一看，没想到就是他的前女友，“几年不见变化这么大？”他心想，看着电梯按键面板已经亮着的按键“-2”，他默默按下了“1”，简单交谈几句之后，电梯门开了，他礼貌性地跟前女友点头告别，便匆忙走出了电梯，此时电话突然响了，他从两年前在京东上花了100元买的格纹PU包包里掏出了他心爱的小米1，是他哥们儿催他了“怎么还没到啊？”，“快了快了……”他一边小跑着一边气喘吁吁地说道。此时，眼看天也黑了，街上什么人都没有，一阵寒风吹得他打了一个寒战，看了看时间：22时22分，“又要迟到了。”他悻悻地说道……

好，看完这段话有什么感触呢？这里用到了对比和烘托的手法，将主人公写得挺落魄的（貌似有好几家公司无辜躺枪）。我也可以直接像下面这样描述。

描述2

LS是一名电商设计师，他非常勤俭节约，工资也不高，并且还是个经常加班的单身男。

这种描述虽然直截了当，但是非常平淡无趣，你们感受一下，哪个更有场景代入感更让你感（同）兴（情）趣（他）？我还可以在原来的基础上给他加上更多的描述。

描述3

我可以在“描述1”的基础上把他每天干啥，七大姑八大姨全加进来，但是你肯定会觉得我非常啰嗦，修饰过多就分不清主次了，这样会起到相反的效果，所以我们对环境和细节的描述要克制（做设计何尝不是呢？）。

现在你们对比下哪个描述让你有更进一步了解这个男主人公的欲望呢？哪个主人公形象更生动突出呢？我想答案应该是描述1吧。

如果用简单的图形来表现这三个描述的，如下图所示：红色区域代表主人公，其他颜色区域代表他人或者与他相关的介绍，哪个更合理？主人公突出同时整体有氛围？是不是描述1？

举完这个例子，我们不难发现，通过有节制的对比、烘托的手法可以让主体更加突出，整体感染力更强。如右图所示，同样的，在设计当中，尤其是电商设计中，假设文案是一个故事里面的主人公，商品或模特是配角，那么背景就相当于这个主人公所处的环境，我们需要迅速快捷地给消费者传达出某种信息，引导和激发购买欲望，所以我们也会用到故事里的这些手法：对比和烘托。

那么Banner设计中的背景有哪几种呢？（主要手法就是对比、呼应、烘托）

• ◆　大量留白的背景
• ◆　点缀物烘托的背景（元素或颜色取之于商品或模特）
• ◆　纹理、商品、模特叠加的背景
• ◆　实景拍摄的背景
• ◆　软件合成的背景

9.1　大量留白的背景

什么情况下背景应该大量留白呢？

①　为了让主体绝对突出，不需要其他任何干扰，如左下图所示。

②　为了让主体绝对突出，不需要其他任何干扰，同时也为了体现品牌定位偏高端的特性，如右下图所示。

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

如果你的产品图是像下面这样几乎没有什么美感和品质的，你也这么处理，如左下图这样，肯定会被老板骂了：“好你个美工，图还没做完你就下班了？”

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

9.2　点缀物烘托的背景

这种类型的Banner会在背景里加入一些跟商品模特图或者跟主题有关的元素，元素或颜色取之于商品或模特，可以是手绘图案，也可以是各种图形（某种程度上文字也可以作为图形看待）、光线等元素。

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

2．五颜六色的线条点缀元素跟标题／背景以及产品卖点（多彩）相呼应。

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

4．利用阴影打造空间层次感，如下图所示的背景圆圈。

9.3　纹理图案／商品／模特／LOGO叠加于背景

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

1．模特叠加于背景

2．商品叠加于背景（完全叠加或部分叠加都可以）

3．在不干扰前景文案和商品视觉突出的情况下，背景适当叠加一些相关纹理

可以使画面更加细腻有质感，比如下图，背景就叠加了一些编织物的纹理，跟产品主题相呼应。

4．背景叠加文字或LOGO

这种情况适用于多品牌的卖场活动Banner设计，或者是实在不知道怎么去丰富画面氛围了，可以用主题相关的文字来充当背景元素。

当然，以上所有方式方法都不是孤立存在的，而是可以结合运用的，就看你如何把握了，如下图所示，你能找出几种背景制作方法呢？

9.4　实景拍摄

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

如何保证文字信息在这种实景拍摄照片上凸显出来就是我们要着重注意的，这里有一些方法大家可以看看。

1．背景涂抹＋虚化处理

2．文字背景添加半透明层

3．暗背景搭配亮色文字，或者亮背景搭配深色文字，文字信息才可以得到突出

9.5　合成场景

这类背景的制作要义在于：整体场景的搭建要注意围绕着产品特性或者主题去营造相对应的氛围，要注意对光影、环境色以及透视等的把握，如下图所示。

平时作者也会给大家布置设计练习，发现很多人喜欢做场景合成，但是普遍的问题在于很多人并没有很强的绘画基础，甚至对透视、三大构成还有基本的素描三大面、五大调都没有概念就开始动手了，那么可想而知出来的效果当然是不美观、到处都是破绽，所以说动手之前，还是多看多思考，同时先潜心把这些基本功搞扎实吧！

总结

背景该怎么做？总体来说我们只要记住，背景就是个作陪衬的，它不能抢了主角的风头，同时背景又在整个设计中起到了烘托主题、渲染气氛的作用，所以背景应该围绕着设计主题来展开制作，而不是异想天开，就像讲故事一样，我们需要交代故事环境和背景，才能让整个故事情节吸引人和有条理。