❶ 帶字插畫banner-細說APPBanner設計技巧
盤點banner設計組成要素/類型/風格/設計步驟大全<pstyle="text-align:center;">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
的信息量和整體的質感。當然,在使用紋理的時候千萬不要讓紋理喧賓奪主。
細說APPBanner設計技巧確定風格
構圖/排版
色彩
1-1.我們首先從第一個方面文字字體處理這個方面細說:
文字切割,這種處理方法一般是將字體的某部分/連接處切割處理,或是在切割處增添一些元素;這種處理好處是,讓字體更具有藝術感,畫面更具有空間感,讓banner整體增添幾分文藝或神秘的氛圍;
對字體變形處理;我們看1-3圖,這里將字體進行了一個扭曲處理,在1-5圖中,設計師將字體端點細節進行處理;或者將字體粗細,筆劃進行形狀的改變,這里就不一一舉例啦,這種處理方式使文字「活」起來,更貼合文案語義;
給字體筆劃進行模糊/擦除/透明度/色差處理,一般是將字體的筆劃模糊或透明度處理,或用畫筆擦除一部分,或改邊某個筆劃的顏色,總之處理方式多種多樣但都大同小異;這種處理方式的使字體看起來更為立體或者更貼合背景;
給字體添加「高光/投影」,這種處理方式是在字體上添加一些高光元素,或者在字體後面加一些線性或面性的「投影」元素,使字體看起來更立體,又與背景十分貼合;
1-2.上面我們說完字體幾種常見的處理形式,下來我們來說一下Banner文案常見的幾種排版樣式;
橫向排版,這種排版樣式比較常見,一般是用字體大小/粗細/類型/顏色將主要內容和次要內容區分開,這種排版顯得層次分明,一目瞭然;
傾斜排版,這種排版一般用於沖擊感比較強的頁面,比較有動感和活力
縱向排版,這種排版形式適用於文案內容比較少的排版,多用於比較古典和文藝清新的頁面;
錯落排版,這種排版看起來參次錯落,更具有美感和氣勢,但這這種排版也限於文案內容比較少的Banner上
波浪排版,這種排版形式比較少見,這里還是說一下,這種排版多用於節日活動頁,比較活潑,增強氛圍;
2.上面我們講到的是文字處理和排版,那下面我們就講一下文案配圖,常見的文案配圖
插畫配圖,這種對設計師的要求比較高了,需要自己去手繪插畫圖,當然也可以去找素材;
實物配圖,一般這種直接使用某個產品/人物/場景的圖片,但是這種對圖片的清晰度和構圖有比較高的要求;
圖片轉手繪配圖,這種配圖的處理方法是將圖片轉化成手繪的風格,這樣就解決了圖片不清晰,和背景圖融合度不夠的問題,而且還更有設計感
3.下面我們再簡單講banner背景啦,常見背景類型有4種:純色背景、漸變背景、紋理質感背景、圖片背景;前兩種很好理解,紋理質感背景常用的是紙張或石頭/地表紋理或是雜色紋理,圖片背景對圖片的清晰度和美感都有要求;
4.裝飾物,分為背景裝飾和文案層裝飾
4-1常見的背景裝飾,有點線條幾何形體、發光體
4-2文案裝飾,常見的文案裝飾線條幾何形體,畫筆和根據文案語意環境的加入的圖形