banner對於壹個設計師來說,肯定不是壹個陌生的詞語啦,在目前的各個行業領域中基本都涉及到banner的需求,不管是web端還是移動端我們處處都能看到banner的影子,所以掌握banner的設計是我們每壹個設計師必備的技能啦!
banner(及橫幅廣告)是網絡廣告最早采用的形式,也是目前最常見的形式。橫幅廣告又稱旗幟廣告,它是橫跨於網頁上的矩形公告牌,當用戶點擊這些橫幅的時候,通常可以鏈接到廣告主的網頁。是表現商家廣告內容的圖片,放置在廣告商的頁面上,是互聯網廣告中最基本的廣告形式!
下面我們會從這幾個方面講解banner:
壹:banner的組成要素
二:banner的類型
三:banner的風格選擇
四:banner的設計步驟
壹:banner的組成要素
banner的主要組成要素我這裏簡單的總結了幾點:
以及banner主要的元素是:文案+元素+背景
元素又可以細分為:元素=商品+模特+logo+點綴(這裏的元素是需要根據banner的實際情況選擇要素,可有可無)
如圖:
(來源於花瓣)
二:banner的類型
banner的類型我這裏總結的主要分為:
01:產品宣傳類banner(新產品、熱銷產品)
02:活動類banner(節日活動促銷、產品促銷)
這裏簡單的將banner分為了兩種類型,因為對於不壹樣的banner需要實現的效果和目的是不壹樣的,所以我們需要設計出不壹樣的風格的banner
對於產品宣傳的banner我們最主要的就是要突出產品的特征,所以我們對於banner的設計,需要的最主要的元素就壹定是產品,以及簡短的文案介紹,至於點綴的元素我們也可以根據實際產品的特征選擇合適的元素,也可以不用元素的點綴,背景肯定也是必不可少的!
01:產品宣傳類banner:
產品+文案+背景
例如:
(來源於花瓣)
上面的案例都是對於產品宣傳類的banner的設計樣式,他們有壹個***同的特征就是產品放大放大再放大,盡顯產品的特點,簡潔的文案介紹和大量的留白更加凸顯產品的特征,使用戶的目光不由自主的被產品本身所吸引
產品宣傳banner:
產品+文案+元素+背景
例如:
(來源於花瓣)
這類banner的特點就是除了產品本身外,都添加了壹些其它的元素作為banner的壹個點綴效果,使畫面顯得更加飽和,或使畫面帶有動感的效果!
那麽問題來了
什麽情況下產品banner設計添加元素好?什麽情況下不添加元素好呢?
第壹:對於需要極度顯示產品的特征的時候我們最好選擇不添加元素幹擾產品,
第二:對於簡約產品,我們最好也不要添加元素做裝飾,大量的留白更加適合簡約產品的風格,
02:活動類banner
產品+文案+元素+背景
例如:
(來源於花瓣)
對於活動類的banner設計我們大多數都會選擇顏色鮮艷多彩的,並且畫面飽和具有沖擊力的,營造出壹種熱鬧的氛圍,對於元素的添加也是必不可少的壹點,因為對於活動類的banner設計,畫面越熱鬧活動力度就會顯得越大,才會更加吸引用戶,對於活動的標題也要盡量的凸顯!
二:banner的風格選擇
對於banner的風格也是多種多樣的,但是對於不同性質的banner選擇的風格肯定也是不壹樣的,不同的banner搭配不同的風格給人的視覺效果是完全不壹樣的,合適的搭配才能使banner更好的表現其特征和目的
例如:
01:簡約產品家居banner的宣傳banner,就比較適合簡約大氣幹凈的風格
(來源於花瓣)
02:高端科技產品banner,就選擇具有科技感氣質的風格
(通過科技感的圖形和顏色等來體現)
(來源於花瓣)
03:時尚服飾類的banner,就適合選擇時尚畫面的風格
(通過獨特的造型和風格圖形以及色彩等來體現)
(來源於花瓣)
04:高端奢侈品牌類banner,就適合高端大氣的風格搭配
(通過高檔色彩黑紅配,黑金配等來體現)
(來源於花瓣)
05:少女\兒童可愛風banner,就適合可愛風元素搭配的選擇
(通過可愛元素:插畫、線條、氣球、愛心、圓潤的字體、活力的色彩等來體現)
(來源於花瓣)
06:國風/文化/節日類banner,就比較適合選擇帶有文化氣質的元素搭配
(通過中國風毛筆字、中國古有的元素:印章,中國山水畫,墨跡,扇面,剪紙,園林窗格,古紋樣,祥雲,京劇,卷軸等等)
(來源於花瓣)
二:banner的設計步驟
01:了解和確定banner的設計需求
02:明確banner設計的目的
03:根據得到的banner設計需求確定banner的設計風格
04:選擇合適的banner設計版式結構
05:選擇匹配的元素裝飾banner的整體效果(根據實際需求添加)
06:色彩搭配選擇
01:了解和確定banner的設計需求
對於這了解設計需求壹點來說,不管是做什麽設計的前提都是必不可少的壹步,也是最關鍵的壹步,如果妳連設計的需求都不明確那麽做出來的設計結果肯定就不會符合實際的需求
那麽對於banner的設計需求我們具體需要明確那壹些呢?
第壹點:確定banner設計文案
文案對於設計師來說也是壹個很重要的點,設計師可以根據文案信息從中找到設計靈感,並且也可以知道大致的設計風格的走向
第壹點:確定banner設計尺寸和投放平臺
文案確定後我們還需要知道banner的投放平臺和位置,尺寸大小,以及是否需要適配各個平臺的展示,
02:明確banner設計的目的
對於設計壹張banner,肯定是想要達到某壹種目的才會設計這壹張banner,所以在設計banner之前壹定要了解清楚這壹張banner設計的目的是什麽,例如:是想要宣傳產品還是想要促銷產品,兩者的性質是完全不壹樣的,
03:根據得到的banner設計需求確定banner的設計風格
banner的設計風格我們可以從banner文案需求中找到關鍵詞進行定位,比如:全語音智能操作的車載支架A5
從這壹句主題文案中我們能夠提出的關鍵詞就有:全語言、智能
對於這樣的關鍵詞的理解我們肯定第壹就會想到科技感智能化時代的畫面,所以這裏的風格我們也就有所選擇啦!
04:選擇合適的banner設計版式結構
banner的設計版式結構我們可以大致分為:
居中結構、左對齊結構、右對齊結構
不同需求banner的結構就需要根據實際情況選擇啦!
05:選擇匹配的元素裝飾banner的整體效果(根據實際需求添加)
對於banner的裝飾元素我們也是需要根據實際情況和產品banner的特征采取合適的選擇,比如簡約產品的banner就不需要裝飾元素更好,而活動類banner或少女兒童等可愛類的banner設計就需要選擇裝飾元素更加適合,並且不同形狀banner的裝飾元素選擇也是不同的(前面做了簡單的介紹,這裏就不再重復啦)
06:色彩搭配選擇
色彩的選擇也是很關鍵的,不同性質的banner選擇的顏色搭配也是不壹樣的,適當的顏色搭配會使產品更加凸顯或者使畫面更加顯眼突出,並且給人的感覺也是不同的,
例如:
*黑金配和黑紅配就會給人壹種高級感
*藍,黑色,紫等冷色搭配,畫面給人硬朗,空間感,速度和力量的感覺更加適合科技感
*紅、橙、黃、紫搭配,就會營造出壹種熱烈的氛圍,更加適合時尚和活動類
*黑、白、灰的搭配就會給人壹種高冷不宜接近的感覺,更加適合大牌的風格選擇
*白、灰的搭配會給人壹種寧靜、文藝、氣質、素雅的感覺,更加適合簡約產品的選擇
實操案例:
文案需求:
全語音智能操作的車載支架A5
揮手聽話的語音支架
使用訊飛AIUI人機交互解決方案,智能駕乘張口即來
設計尺寸:1920x650px
設計的目的:根據需求我們得到的banner設計的目的是宣傳新產品車載支架A5
第壹步:我們將文案信息以及提供的產品放入畫布中
第二步:明確我們的主標題“全語音智能操作的車載支架A5”
所以我們將主標題放大處理,凸顯主標題
第三步:選擇banner的風格,因為這裏我們需要體現的是產品的智能化,所以我們的風格就可以定義為科技感的
第四步:選擇版式結構,我們這裏就選擇簡單的左右結構吧!
第五步:選擇裝飾元素,裝飾元素也要根據科技感的效果選擇,以及可以從文案中提取,例如這裏我們可以提取:科技感線條和圖形、語音圖形等
第六步:整體位置調整和色彩搭配,對於文字大標題我們也處理成不壹樣的具有層次結構的,使其更加凸顯,小標題文案也根據整體風格畫面做微小的處理,使文案和畫面更加和諧統壹,包括產品周圍由於受到光的影響,也需要做處理
最終我們就得到上面的banner效果啦!壹個簡單的科技感banner就設計完成啦!
好啦!今天的知識有點多,也有點全面!希望妳們喜歡吧!
往期好文推薦
—
版式設計——簡單7種圖片排版方式
10張創意線條圖形海報設計
2招教妳配色技巧,擺脫配色困難癥!
創新海報設計思路
流行的幾種banner處理類型有哪些?色塊分割
以上banner采用不同比例大小的色塊組成Banner的背景,加上人物與文案,這種表現形式適用於突出產品,如家居,服裝,電子產品等。界面感簡而不白,能快速提取到有價值的信息,註意選色的時候要註意整體的色感。
幾何邊框
簡約,常常會給人以冷酷、幹凈、現代的感覺。設計中使用的形狀、元素簡潔;使用的配色方案統壹、整體,用色克制。質感體現上較為細膩;結構上經常使用留白、簡短/準確/有核心價值、有“氣質”的留白,框起來的是焦點,幾何圖形是永恒的裝飾品哦～.～
2.5D
空間幾何這種風格,通過建造壹個空間體,用幾何來營造氛圍,空間感代入感強。這類稍微研究壹下還是可以做出來的,關鍵是創意想法的表達,這個就要多費心思了
2.5D風格在電商設計中很流行,其風格新穎、實用,可以放置很多內容,有動有靜,可以很好的與二屏三屏連貫起來,受到壹些大型促銷活動的青睞,經常能看到這種風格的首屏海報。
扁平插畫
簡潔而不簡單,去掉繁瑣的裝飾效果,展現主體的核心表達。用文字以外的圖形或者人物等來幫助banner帶來更直觀的感受,文字稍微處理變形壹下加圖形或人物可以讓banner更有活力更有感覺。這種類型的banner,金融、教育、旅遊用的偏多,當然插畫能力OK的話,各個行業運用起來都不是問題
色彩疊加
較為流行、多變,整體視覺會相對年輕,使用的元素相對更直接、明確、結構直白;整體有給人幹凈、明朗、和諧的感覺。突出文字,用簡單的圖形裝飾烘托氣氛。可用純色,漸變色來進行背景色彩疊加處理,選大圖的時候要註意哦,整體的意境要靠色調和明暗調出來,當然最簡單的還是選用幹凈不雜亂的底圖。
色彩是有情感的,不同的配色會帶給人完全不同的心裏感受。所以我們在做圖的時候需要根據主題來進行配色,合理、舒適,讓banner圖整體和諧。所以我們需要考慮想要表達什麽樣的情感,想讓用戶看的時候有什麽樣的感受,所表達的情感與主題是否相符合,基於這些點來做配色就更加的有目的性了。
漸變紋理
微妙的漸變已經作為已經設計趨勢回歸了。漸變的背景,甚至漸變的疊加,都能讓妳的Banner設計風格化,搭配圖片、紋理和文字,漸變能給人多種多樣的體驗。色彩濃郁是其特點
和UI設計不同,在電商和廣告Banner的設計當中,紋理壹直都存在,甚至是非常常用的元素。紋理能夠很好的提升整個Banner
的信息量和整體的質感。當然,在使用紋理的時候千萬不要讓紋理喧賓奪主。
海報設計之如何打造banner_海報怎麽設計?1
需求的梳理和信息收集:理解核心需求,為設計方向做好前期準備Slogan:傳武(作品名)副文案:幽府之力,逆轉生死我們漫畫類的作品眾多,內容風格繁雜,所以拿到需求之後,首先就是要對作品進行“調查”
通過對漫畫作品的閱讀,理解內容、故事、繪畫風格來定性設計的方向
這樣才能在設計過程中準確把握住作品調性,才能設計出最貼合作品風格內容的banner,才能把我們作品精髓的內容傳遞給用戶
比如上面這部作品,SLOGAN“傳武”是我們要著重設計展示的
而副標題“幽府之力,逆轉生死”也很重要,往往傳達出了作品的賣點和調性
再看看我們拿到的素材,壹張單人的簡單素材,看起來很單調,似乎沒有可切入的地方
這個時候就體現出為什麽要先對作品進行“調查”的重要性了!2
確定設計方向:明確設計方向,精準展現作品調性通過閱讀,我們了解到這部作品是壹部熱血,古風,玄幻作品,還有大致的故事內容,再結合我們的副標題“幽府之力,逆轉生死”
腦子裏就已經開始有畫面了,“幽府”大概表達了壹個場景,而“力量”和“逆轉生死”又傳達出了壹種氣勢磅礴的場面
這就為我們設計的方向奠定了壹個準確的方向
首先就把我們的素材和文案拉進畫框裏,進行壹個大致的排版找找感覺
第壹個左右排版就太常規了,在場面和氣勢上有些弱
第二個添加了漫畫框,想切入壹些故事內容壹起展示
但又有壹些強調漫畫框的存在了,磅礴的場景沒有展示出來
但註意右邊的部分,把主標題排在人物的兩邊似乎是壹個不錯的選擇!我們就從這裏入手
重新嘗試了壹下,發現這樣布局好像就是我們想要的感覺哈!那既然確定了框架,我們接下來就按照這個方向繼續強化出“氣勢”“力量”的感覺
我們以人物為中心,想象畫面裏有力量從人物背後向外“迸發”所以我們的字體可以設計得有壹些趨勢在裏邊,也是以壹個圓弧為中心向外生長
以光從人物背面照射出來大逆光的視覺,營造壹種“力量”迸發的感覺
3
顏色的選擇:跟隨之前確定的設計方向,提煉選色搭配
我的方法壹般是先從素材本身出發,根據想要達成的視覺風格來延伸出想要的配色
這樣得到的顏色更整體,人物素材能更好的融入背景氛圍中,也方便後期調整
觀察的素材,發現他的顏色都比較灰,缺乏對比,就會顯得很“平”,難以營造出我們想要的感覺
所以從人物素材本身的顏色出發,提取同類色和提高飽和度
結合考慮到有利於運營推廣的視覺需要“吸睛”
得出了後面壹組對比更強烈的顏色
4
有主次地進行深入刻畫:畫面中最主要的肯定是我們的SLOGAN和人物角色,是我們要重點刻畫的對象
剩下的副標題、背景氛圍次之
不僅是要在排版上做區分,在視覺感受上也要做出差異化
這樣才能有遠近虛實的感覺,增加空間感
我們希望畫面具有壹定的質感,增加其沖擊力
所以我們在刻畫背景的時候可以選擇壹些漫畫裏比較好的場景,或扉頁背景素材來做底圖
再疊加上壹些紋理材質,再壹層壹層地來給背景打光,用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達到我們想要的效果
小技巧1:相同光源的照射,傳達到不同的物體上時,它的視覺表現時不同的
並不是光源時什麽顏色,照射的地方就會是什麽顏色
我們來對比壹下兩種顏色的實際效果,可以說是很直觀了!小技巧2:為了使素材更完美地融入到背景中,我們可以後期人為地給素材增加壹圈高光/輪廓光
這樣使畫面更融洽的同時,也能讓我們的人物變得立體起來!
再來對比下沒加輪廓光的感覺:真的是少了些味道和細節哈哈,其實在很多時候我們都可以對我們的素材進行二次加工讓其提升壹定的品質,配合畫面以達到更好的視覺效果
5
SLOGAN的設計:主文案在我們草圖的基礎上,結合整體畫面的趨勢進行細化
(增加毛筆筆觸,和優化筆畫)
這裏主要分了三層進行處理顏色層(文字層):主要給壹個基礎顏色;材質層:因為這兩個字的占比比較大,所以可以增加壹些紋理細節讓畫面更豐富耐看;厚度層:讓後面的光源,在我們的字上形成壹圈高光,可以突出我們的文字
增加壹些光暈效果,再放上做好的SLOGAN看看效果,好像還不錯
有些同學可能會疑惑這裏為什麽字體要做壹個厚度層,我們也上壹下對比圖先看下效果:可以看少了壹些些質感和重量,在輕量的風格裏ok,但是在我們當前的畫面裏就差了些感覺,所以才做了厚度層來強調光線照射過來的視覺增強畫面沖擊力
之後主要是做壹些符合我們畫面氛圍的漂浮元素,豐富畫面
有壹定手繪功底的話就再好不過了!完成,到這壹步差不多達成了我們想要實現的效果,“氣勢”和“力量”的感覺在這麽“樸實無華”的素材身上也基本表現到位了
還是比較滿意的,差不多可以提審交稿了!最後在觀察觀察整體的畫面,審視壹遍,查缺補漏
發現我們的畫面好像有些燥啊,紅色和黃色飽和略微有些高
整體的感覺也不夠清晰
最後再做壹個調整吧
降低壹些紅色和黃色飽和度,在暗部加壹些紫色(主文案暗的部分和畫面四周的暗部)
增加冷暖對比就好多了
小技巧3:蓋印整個圖層——在濾鏡裏面找到其他——高反差保留,數值根據畫面來調
然後就得到這麽壹個圖層是不是很神奇?別慌,把這個圖層的屬性改成線性光看看,畫面清晰了很多,也變得更有質感了!最後看下過程演變圖:總結1)梳理需求內容:通過閱讀漫畫作品,深入了解內容並收集整理信息;2)提煉關鍵字延展:嘗試多種可行方案,最終確定設計方向;3)slogan的設計:壹定要符合畫面和作品調性,達到與畫面相映成輝的效果;4)細節把控:完成之後再回過頭來審視整體畫面,查漏補缺力求做到最好!付出多少努力,就能得到多少回報!