Banner怎么做？史上最全Banner解析(banner圖制作教程)

因為最近正好在做banner ，心血來潮想整理完善了一下自己掌握的banner的知識點，同時也想分享給大家Banner怎么做？

一、認識banner

大家應該都對banner有一個基本的了解，說通俗一點，像手機APP里的banner無非就是吸引用戶點擊 的，要么就是推廣產品的，還能有啥？

其實以上所表達的也不夠準確，所以作為一個設計師還是有必要好好了解一下“什么是banner？”

banner的歷史呢，我這里從百科找到了早期的介紹：

Banner的中文翻譯過來是可以作為網站頁面的 橫幅廣告 ，也可以作為**活動時用的旗幟，還可以是報紙雜志上的大標題。Banner主要體現中心意旨，形象鮮明表達最主要的情感思想或宣傳中心。

通過上面的介紹，我們可以理解現在的banner通常指的是PC端的網頁banner和手機移動端的網頁banner。

認識了什么是banner，那它有什么作用？用它意義是什么？

我總結了一下：

作用：吸引用戶，宣傳主題，如電商，環保公益海報，KFC廣告等等

意義：達成作者的目的，對應上面，購買商品，喚醒環保意識，去吃新漢堡等等

二、banner應用領域

那我們來接著了解banner應用領域有哪些呢？

常見的banner的應用領域，根據行業來區分的話，按熱門程度來分有

1.電商

（各種電商網站經?？吹?，如目前最火爆的某寶，魯班就非常厲害了，每天不停擼圖吸引剁手族）

2.游戲

（看網頁小說，玩APP，可以說鋪天蓋地的各種游戲廣告banner，吸引游戲玩家來玩賺錢）

3.金融

（經常在APP里看到推送的各種貸款產品廣告）

4.飲食

（宣傳自家產品相關內容，如雪津啤酒，可樂，零食等等）

5.汽車

（各種車類APP，如瓜子二手車/人人車等等）

其他等等比較冷門的就不一一舉例了

三、【banner設計風格】

目前banner應用于各行各業各種情況，在上面的常見領域里電商設計風格多樣，其他領域風格基本出入不大。

我們來看下常見的banner設計風格有哪些？

我這里采用的是按設計手法來分類：

1.扁平風格

(以純色扁平圖形為主，偏向2次元更加簡潔。自2013年以來熱度不減，經常運用各個畫面中，考驗圖形的創意以及排版布局和色彩的搭配能力）

2.輕質感風格

（在扁平的基礎上增加了漸變和肌理以及陰影，讓畫面更加富有質感，接近現實的擬真效果，相比扁平更容易有視覺沖擊力）

3.描邊風格

（描邊風格是扁平的延伸，通過給圖形元素加描邊的粗細，來加強圖形輪廓，凸顯視覺效果）

4.合成風格

（利用多種圖片素材合成實現不可能的畫面，創意十足，富有趣味性，有極強的展現效果）

5.手繪風格

（手繪的畫法有多種風格，畫面充滿故事性，色彩效果極佳，生動有趣吸引用戶）

6.三維風格

（使用C4D建模寫實豐富的場景來吸引用戶，畫面新穎，創新性強）

7.2.5D風格

（等軸測圖，屬于偽3D效果，由于早期的”紀念碑谷“帶火這一風格，圖形創意視覺效果豐富）

8.特殊風格

（近年最火的短視頻”抖音“引起了故障風熱潮，還有其他比較少見的波普風等）

以上的大部分設計風格，都可以通過 PS/SK 為主，AI為輔來完成設計效果，其中三維風格的話就需要借助C4D這樣的軟件來實現，目前電商領域對應banner需求最大，所應用的設計風格也最多。

按時間成本來排的話，首先花費最少的是扁平/輕質感/描邊風/，其次是2.5D，最后是三維風格，因為需要構建模型渲染來實現，建模貼材質打燈光都比較費時；還有合成和手繪風格，需要設計師有很強的透視和光影以及色彩搭配處理能力，也就是專業的理論知識和扎實的手繪功底。

四、【如何做出色的/卓越的/優異的/杰出的banner】

1.傳達信息準確

（畫面所展現的內容信息，如果表達的和文案不匹配的話，這在一定程度上就影響了用戶認知；精準有趣的文案，不僅可以定位正確的用戶人群，也可以***用戶購買欲望）

2.字體設計新穎

（越富有創新形式的組合排版越吸引用戶關注）

3.版式布局凸顯

（畫面內容排版優劣，給用戶的感覺最為直接，不能做到靠前眼吸引住用戶的banner不是成功的banner）

4.色彩搭配吸睛

（富有情緒的顏色搭配，最為影響用戶，極大程度地沖擊用戶的視覺直觀感受）

其實banner的設計最考驗設計師的平面設計功底 ，大家可以加強三大構成的練習運用，將極大的提高各方面的設計能力。雖然現在越來越多現成的技法教程學習，無不是節省時間的捷徑。

但終究偏離了設計的本質，舍本琢末了。最普遍的現象就是想要闡述自己的設計卻很難表達的清楚，畢竟只有自己真正掌握了知識原理，合理地運用在設計中，你就能發現你知道怎樣 做出更好的設計 ~

原創： 陳曉國

來源：UI設計師之家