編者按：一直有人問(wèn)Banner 背景怎么做，其實(shí)設(shè)計(jì)Banner 和講故事一樣，都是用來(lái)烘托主體的，所以也有套路可循。今天@TTTing1?這篇好文就總結(jié)了5種常用的Banner 背景設(shè)計(jì)，簡(jiǎn)單易懂，案例豐富，建議閱讀。

寫(xiě)在前面

我們先回顧下banner由哪些部分組成：主要由文案、商品圖或模特、背景、點(diǎn)綴物組成，如下圖所示：

（這張圖的出現(xiàn)頻率很高，大家估計(jì)都已經(jīng)爛熟于心了吧，哈哈～）

我們可以看到，一個(gè)Banner的主體始終是文案或商品模特，文案為主的情況居多，而背景始終是個(gè)配角，它是用來(lái)烘托主題，渲染氣氛，突出主體的。

二、如何用講故事的思維理解Banner設(shè)計(jì)及背景的制作呢？

那么，在講banner的背景制作之前呢，我們先看一段小故事場(chǎng)景描述（描述1）:

阿呆是一名電商設(shè)計(jì)師，今天他發(fā)工資了，因?yàn)榧s好了請(qǐng)幾個(gè)哥們兒晚上一起吃飯，所以忙完手上的事情，他匆忙地收拾了東西就鉆進(jìn)了電梯，目光一下子就被一位打扮靚麗手提2016秋冬最新款prada包包的年輕女士吸引住了，他定睛一看，沒(méi)想到就是他的前女友！～

“幾年不見(jiàn)，她的變化已經(jīng)這么大了？？簡(jiǎn)直就是標(biāo)準(zhǔn)的白富美??！”他心想著，看著電梯按鍵面板上已經(jīng)亮著的按鍵“-2”，他默默的按下了按鍵“1”。

到了1樓電梯門(mén)開(kāi)了，他禮貌性的對(duì)這位變化巨大的前女友點(diǎn)了點(diǎn)頭就走出了電梯，剛一出大樓門(mén)口，電話突然就響了，只見(jiàn)他從3年前在京東上花了89元買的帆布包包里掏出了他心愛(ài)的小米1，是他哥們兒發(fā)語(yǔ)音催他了“你小子怎么還沒(méi)到啊？大伙兒人都齊了！～”，“快了快了。。這會(huì)兒堵車呢”他一邊小跑一邊氣喘吁吁地說(shuō)道。

此時(shí)，外面的天已經(jīng)是漆黑了，街上什么人都沒(méi)有，他看了看時(shí)間：22時(shí)22分，“又要遲到了！”他悻悻地罵道。

好，看完這段話有什么感觸呢？這里我就用到了對(duì)比和烘托的手法，將主人公寫(xiě)的挺落魄的（貌似有好幾家公司無(wú)辜躺槍），你們是不是也許可以想象到類似于下面這樣一個(gè)畫(huà)面：

當(dāng)然，我也可以直接像下面這樣描述（描述2）：

阿呆是一名電商設(shè)計(jì)師，他非常勤儉節(jié)約，工資也不高，并且還是個(gè)經(jīng)常加班的單身汪。

這種描述雖然直截了當(dāng)，但是就非常平淡無(wú)趣，你可能會(huì)聯(lián)想到下面這樣的畫(huà)面：

你們感受一下，哪個(gè)更有場(chǎng)景代入感，更讓你覺(jué)得落魄？

其實(shí)，我還可以在原來(lái)的基礎(chǔ)上給他加上更多的描述（描述3）：

我可以在描述1的基礎(chǔ)上把他每天干啥，七大姑八大姨全加進(jìn)來(lái)，但是你肯定會(huì)覺(jué)得我非常啰嗦，修飾過(guò)多就分不清主次了，這樣就會(huì)起到相反的效果，所以我們對(duì)環(huán)境和細(xì)節(jié)的描述要克制（做設(shè)計(jì)何嘗不是呢？）。

現(xiàn)在你們對(duì)比下哪個(gè)描述讓你有更進(jìn)一步了解這個(gè)男主人公的欲望呢？哪個(gè)主人公形象更生動(dòng)突出呢？我想答案應(yīng)該是描述1吧。

如果用簡(jiǎn)單的圖形來(lái)表現(xiàn)這三個(gè)描述的話，打比方是下面這樣：紅色區(qū)域代表主人公，其他顏色區(qū)域代表他人或者與他相關(guān)的介紹，哪個(gè)更合理？主人公突出同時(shí)整體有氛圍？是不是描述1？

（2太單調(diào)，3太累贅，1比較合適）

舉完描述這個(gè)主人公的例子，我們不難發(fā)現(xiàn)，通過(guò)有節(jié)制的對(duì)比、烘托的手法可以讓主體人物更加突出，整體感染力更強(qiáng)。

同樣的，在設(shè)計(jì)當(dāng)中，尤其是電商設(shè)計(jì)中，假設(shè)文案是一個(gè)故事里面的主人公，商品或模特是配角，那么背景就相當(dāng)于這個(gè)主人公所處的環(huán)境，我們需要迅速快捷的給消費(fèi)者傳達(dá)出某種信息，引導(dǎo)和激發(fā)他們的購(gòu)買欲望，所以我們也會(huì)用到講故事里的這些手法：對(duì)比和烘托。

三、banner設(shè)計(jì)中的背景有哪幾種呢？

運(yùn)用對(duì)比、呼應(yīng)、烘托等手法，主要有以下幾種：

1、大量留白的背景

2、點(diǎn)綴物烘托的背景（元素或顏色取之于商品或模特）

3、紋理、商品、模特疊加的背景

4、實(shí)景拍攝的背景

5、軟件合成的背景

接下來(lái)我們具體說(shuō)下這些背景：

1、大量留白的背景（什么情況下背景應(yīng)該大量留白呢？）

（1）為了讓主體絕對(duì)突出，不需要其他任何干擾

（2）為了讓主體絕對(duì)突出，不需要其他任何干擾，同時(shí)也為了體現(xiàn)品牌定位偏高端的特性（意思就是沒(méi)錢(qián)的自動(dòng)散退~~看看就好）

以上2種情況重點(diǎn)在于，你的產(chǎn)品圖品質(zhì)一定有足夠的吸引力，模特表情姿勢(shì)動(dòng)作穿著要足夠吸引人，而不是隨隨便便什么低品質(zhì)就可以這么處理的（比如上圖的模特還有AirPods?看起來(lái)是非常有美感的）。

比如下面這樣，估計(jì)就會(huì)被某些老板罵：你個(gè)死美工，圖還沒(méi)做完你就想下班了？！！還不快滾回座位去做圖，不做完不準(zhǔn)下班！??！～

（3）當(dāng)你的產(chǎn)品圖很多，并且用到產(chǎn)品圖來(lái)構(gòu)圖的時(shí)候，背景也需要盡量簡(jiǎn)潔干凈，以保證產(chǎn)品不被干擾（前景復(fù)雜，背景干凈才有對(duì)比咯）。

2、點(diǎn)綴物烘托的背景（元素或顏色取之于商品或模特）

這種類型的banner會(huì)在背景里加入一些跟商品模特圖或者跟主題有關(guān)的元素，可以是手繪圖案，也可以是各種圖形（某種程度上文字也可以作為圖形看待）、光線等元素，舉幾個(gè)栗子：

（1）雨滴元素與標(biāo)題和產(chǎn)品特性相呼應(yīng)

（2）動(dòng)態(tài)的五顏六色的液體顏料跟標(biāo)題和產(chǎn)品賣點(diǎn)（多彩）相呼應(yīng)

（3）適當(dāng)加入一些光影可以營(yíng)造一種空間層次感，使畫(huà)面更飽滿

3、紋理圖案/商品/模特疊加于背景

這種適用于將文案作為絕對(duì)主體突出，同時(shí)模特、商品、logo等都很多的情況下可以使用這種形式，會(huì)看起來(lái)很時(shí)尚又不失促銷氛圍。

（1）模特疊加于背景（模特?cái)?shù)量至少1個(gè)）

（2）商品疊加于背景（商品數(shù)量至少1個(gè)）

（3）文字或者圖案疊加于背景（有規(guī)律的平鋪或者局部疊加）

（4）在不干擾前景文案和商品視覺(jué)突出的情況下，背景適當(dāng)疊加一些相關(guān)的紋理，可以使畫(huà)面更加細(xì)膩有質(zhì)感，比如下面這張圖，背景就疊加了一些編織物的紋理，跟產(chǎn)品主題相呼應(yīng)。

4、實(shí)景拍攝

如果本身就有現(xiàn)成的不錯(cuò)的實(shí)景拍攝照片拿來(lái)用，那就最好了，不過(guò)需要注意的一點(diǎn)就是，我們把照片拿來(lái)直接用的時(shí)候，一定要保證文字信息的可閱讀性，所以在文字部分會(huì)適當(dāng)加一些半透明蒙層、涂抹顏色或者背景虛化的處理，以保證文字的可閱讀性。

（1）背景涂抹+虛化處理

（2）文字背景添加半透明層

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

5、合成場(chǎng)景

這類背景的制作要義在于整體場(chǎng)景的搭建要注意圍繞著產(chǎn)品特性或者主題去營(yíng)造相對(duì)應(yīng)的氛圍，要注意對(duì)光影、環(huán)境色以及透視等的把握，舉個(gè)栗子：

（圖片來(lái)自站酷推薦設(shè)計(jì)師杰克）

平時(shí)我也會(huì)偶爾在群里布置設(shè)計(jì)練習(xí)，發(fā)現(xiàn)很多人一動(dòng)手就喜歡玩場(chǎng)景合成，覺(jué)得這是最容易的，殊不知玩合成是非常需要功力的，而現(xiàn)在普遍的問(wèn)題在于很多人并沒(méi)有很強(qiáng)的繪畫(huà)基礎(chǔ)，甚至對(duì)透視、三大構(gòu)成還有基本的素描三大面、五大調(diào)都沒(méi)有概念就開(kāi)始動(dòng)手做了，那么可想而知出來(lái)的效果當(dāng)然是既不美觀也到處都是破綻。所以說(shuō)動(dòng)手之前，還是多看多思考，同時(shí)先潛心把這些基本功搞扎實(shí)吧~

針對(duì)以上這些問(wèn)題，我之前已經(jīng)寫(xiě)了這幾篇文章大家可以看下：

1. 五大步驟細(xì)說(shuō)Banner圖設(shè)計(jì)之平面構(gòu)成的奧秘
2. 六個(gè)步驟細(xì)說(shuō)電商banner圖設(shè)計(jì)之色彩的奧秘
3. 電商干貨！手繪在Banner圖設(shè)計(jì)中可以怎么玩？

總結(jié)：

背景該怎么做？以上我只是大概總結(jié)了一下，總體來(lái)說(shuō)我們只要記住，背景他就是個(gè)作陪襯的，他不能搶了主角的風(fēng)頭，同時(shí)背景他又在整個(gè)設(shè)計(jì)中起到了烘托主題渲染氣氛的作用，所以背景應(yīng)該圍繞著我們的設(shè)計(jì)主題來(lái)展開(kāi)制作，而不是異想天開(kāi)的。就像講故事一樣，我們始終需要交代一個(gè)故事環(huán)境和背景，畫(huà)面才會(huì)有理有據(jù)，才會(huì)飽滿有吸引力。

歡迎關(guān)注小婷姐的微信公眾號(hào)「TTTink-D」，一個(gè)干貨與文筆俱佳的美女設(shè)計(jì)師：

微信公眾號(hào)簡(jiǎn)介：專注開(kāi)拓電商設(shè)計(jì)思維，不定期分享一些個(gè)人見(jiàn)解干貨，當(dāng)然也會(huì)分享一些頂級(jí)創(chuàng)意、攝影、人生感悟方面的好文啦。

小婷姐的電商設(shè)計(jì)系列好文：

1. 《新人手冊(cè)！聊聊關(guān)于電商設(shè)計(jì)的那些事兒》
2. 《前輩經(jīng)驗(yàn)！聊聊新人設(shè)計(jì)師最容易遇到的12個(gè)問(wèn)題》
3. 《不怕沒(méi)靈感了！SALE 招牌的9種排版設(shè)計(jì)方法歸納（附案例）》
4. 《如何辨別一個(gè)BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（下集）》
7. 《感覺(jué)技不如人？聊聊設(shè)計(jì)師該如何正確認(rèn)知自己的價(jià)值》
8. 《超長(zhǎng)干貨！平臺(tái)電商設(shè)計(jì)師vs店鋪電商設(shè)計(jì)師哪個(gè)好？》
9. 《職場(chǎng)進(jìn)階術(shù)！哪些性格特質(zhì)有助于設(shè)計(jì)師的成長(zhǎng)和提升？》
10. 《設(shè)計(jì)師項(xiàng)目做到一半總是想要放棄怎么辦？（附問(wèn)答合集）》
11. 《超實(shí)用！從人性的角度揭露電商BANNER圖設(shè)計(jì)背后的秘密》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com