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.425555c.com/front/20171030457.html
Copyright? 2011 仟億科技,All rights reserved.
首頁關于我們新聞資訊服務項目軟件產品解決方案成功案例網站地圖加入我們聯系我們
www精品一区二区三区四区