第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　合成場景

這類背景的制作要義在于：整體場景的搭建要注意圍繞著產品特性或者主題去營造相對應的氛圍，要注意對光影、環境色以及透視等的把握，如下圖所示。

平時作者也會給大家布置設計練習，發現很多人喜歡做場景合成，但是普遍的問題在于很多人并沒有很強的繪畫基礎，甚至對透視、三大構成還有基本的素描三大面、五大調都沒有概念就開始動手了，那么可想而知出來的效果當然是不美觀、到處都是破綻，所以說動手之前，還是多看多思考，同時先潛心把這些基本功搞扎實吧！

總結

背景該怎么做？總體來說我們只要記住，背景就是個作陪襯的，它不能搶了主角的風頭，同時背景又在整個設計中起到了烘托主題、渲染氣氛的作用，所以背景應該圍繞著設計主題來展開制作，而不是異想天開，就像講故事一樣，我們需要交代故事環境和背景，才能讓整個故事情節吸引人和有條理。