幾何

今年11月很榮幸收到fotor的邀請,做了一次插畫類Banner的內容分享,把前3篇內容做了些小調整和整合。在這里要萬分感謝Fotor負責這一塊姓鐘的小哥哥,溝通過程中學習到了很多,人也非常Nice。

以下內容是視頻的文字版,如果要看視頻版的,可以點視頻鏈接觀看哦,第一次錄制忽略我難聽的聲音…..

視頻鏈接:

(需要微信掃碼登錄后才能看哦~)

插畫類Banner有哪些優勢,我總結了3點

 

第一點是更直觀

Banner的功能目的,就是讓用戶來點擊它。其中插畫類Banner可以快速傳遞信息和視覺情緒,來吸引用戶。

先一起來看一下這些參考圖

插畫它自身就具有明確目的和服務屬性。用戶可以通過畫面內容快速獲取 ?主題要傳遞出的活動信息和視覺情緒(就像這些參考圖,我們一眼就直觀感受它們是關于什么主題的Banner)

當然大家也可以運用夸張的表現手法,比較亮的色彩色彩或某一種設計風格,傳遞不同的視覺情緒,來吸引用戶眼球,從而達到我們的最終目的。

第二點,就是更省時

在設計Banner時,如果使用圖片,就涉及到找圖片這個問題,相信做設計的小伙伴都經歷過找圖片的這樣痛苦時刻吧,找到了合適的圖片,有的還會有版權的問題。關鍵是自己也不會PS合成這個技能。

使用插畫就方便很多呀,素材你可以自己畫,更省時,效果也更好,想畫多夸張就可以畫多夸張,當有產品圖的時候,使用插畫還可以錦上添花。

第三點,有版權

自己畫的原創插畫,不會涉及到圖片侵權問題,前提是你沒有直接臨摹抄襲別人的作品哦。

我自己在做插畫類Banner的設計過程當中,經常會遇到腦子里面沒東西,一片空白,或者是不知道該從哪里下手。所以就對插畫類Banner做了個研究,索性把自己的做稿思路和做稿流程總結了出來,就有了下面這些內容。

這次分享以這7個部分來進行

首先第一個部分,插畫類Banner的構成部分,我把插畫類Banner分為4個部分。(版式、文案、畫面元素、背景)

分成4個部分,它可以快速的理清我的做稿思路。當我拿到需求后,我會分成這4個部分去考慮

 

我們也可以用這個簡單的框架去分析學習別人的作品

比如說:

別人的作品中版式,文案的排版形式是不是我們之前沒看到過的,這種排版類型它適合什么主題的Banner,我之后設計這類型的Banner時是不是可以直接拿來借鑒?

它是用什么主體元素、輔助元素來傳遞這個主題的信息,這個想法是不是自己之前沒有想到的呢,那我們就可以把他收集下來,用在自己的設計作品當中。(重點是借鑒他的想法,而不是直接抄襲哦)

接下來我會來單獨講解每一個構成部分。

常見版式我總結了7個,為了讓大家更直觀的了解,每一個類型還找了一些案例圖。

每一個還整理了框架,找了一些案例圖讓大家能更直觀的了解

左右版式,它是我們最最最最常用的一個版式,超級大眾,所以放在了最前面,它可以字左圖右或是字右圖左。

左右版式,他的文案部分可以選擇左右對齊,也可以選擇居中對齊。

文案一般1-3個層級(主標題、副標題、小標題)

他的畫面主體元素,一般是以單個或組合類形式出現。單個的人,組合的鴨子

左中右版式,第一個和第二個他們都屬于元素在兩邊,文案在中間。但第二個的主體元素占比要比第一個大,一般是表現在對立、PK常用的一個版式。第三個是主體元素在中間,文案在兩邊。過一遍案例圖

左中右版式前兩種畫面主體元素都是以2個元素出現的,

第三個的主體物選擇空間要大一點,可以選擇單個或組合類、人物+局部場景,根據你的主題要表達的內容來設定

上下版式,字上圖下,或字下圖上

受Banner尺寸的局限性,文案呢常見只有1個層級,最多2個,可發揮空間只能在下半部分的區域

上下版式畫面的主體元素大多是以組合類形式出現,組合的人組合的物,人+物的組合

使用上下版式,主體元素是人物場景類時,上半部分都會留出一個干凈的區域來放文案(比如天空呀,還有一些白墻啊等等,其實就是留白),主體元素的視覺重心都在下半部分。

半包圍版式的特點和上下版式很像,畫面主體元素都以組合類形式出現,區別是:半包圍半包圍就是以半圓的形式包圍主文案

全包圍這種版式用的比較廣泛,感覺有點被用爛了,一般都是畫出主題相關的元素然后圍繞著文案擺一圈,,又簡單,又容易出效果。所以會很容易出現超多的同質化的作品。

左中右+全包圍其實就是兩個的結合,沒有太多好說的,了解一下就好

居中版式就是直接簡單粗暴的把一個主題相關的物品放大,然后放在版式的中間,簡單還容易出效果,非常有代入感。

好啦,這就是版式部分的全部內容啦!

我們主要是以文案的多少來確定文案層級的

  • 1個層級就是只有一個主標題,
  • 2個層級就是一個主標題,一個副標題。其實就是一個字大一個字小
  • 3個層級就是在2個層級的基礎上,增加了1個小標題,主標題最大,副標題第二,小標題最小

1個層級的常見樣式,無論是一行字還是兩行字,只要字號一樣大都屬于1個層級

你還可以在主標題底下加一個百變矩形框,大家要記住這個百變矩形框,文案層想玩花樣基本全靠它,待會會在具體介紹

2個層級呢,它的玩法呢我分了三個,方便大家記,第一個是基本款,第二個是給他加入1個百變矩形框

這個框可以給主標題,也可以給副標題,或者共用一個框(主要是根據主題需要突出的信息和畫面元素來決定)

第三個是給它加2個百變矩形框,主標題和副標題你一個我一個,或者大框一起用,小框看著給

3個層級,它的基本起步,就是加1個百變矩形框,上中下3選一

2個百變矩形框,同樣是大框一起用,小框任選一個給?;蛘?選2,這里沒有找到案例圖,大家自行腦補一下畫面

既然是三個層級,那當然就有3個百變矩形,案例圖還真讓我給找到了,了解一下就好。

再次重復一遍,百變矩形框它主要是根據主題需要突出的信息和畫面元素來決定的。

基本的對齊樣式就是左對齊、居中對齊、右對齊

左右對齊樣式,它最常用的版式就是左右版式了

而居中對齊算是超級百搭的對齊方式,它適用于剛剛總結的所有版式,對,你沒有聽錯哦,是以上所有版式哦~

好呢,到了百變矩形框呢,它最常見的兩種變身就是形狀變化和變身為主題相關的物品來做文字的背景,像這個電視機、書、對聯。形狀變化它可以整個框變化,也可以分裂成數個小框的形式。

插畫類Banner的字體類型這里總結了共5種類型,因為是插畫類Banner,卡通體是我們最最常用的一個字體類型,卡通體可愛比較適用于兒童、少兒、教育領域或是卡通可愛的畫面中。

 

黑體年輕現代,是一個不太有情緒色彩的字體,所以很百搭,比較常用于促銷,運動、電子科技主題相關的畫面

圓體圓潤可愛適用于女性、兒童、少兒主題的畫面

宋體高端,有很強的文藝范,比較適用于文化、文藝、美食、女性的主題畫面

書法體在插畫Banner里面用的不多,有特定的使用場景,一般用于歷史、文化、藝術類的主題

 

每一類字體呢,它都有屬于自己的氣質屬性,就和人一樣呀,什么可愛型,御姐型,霸道總裁型呀等等….

我們一定要分析畫面的主題類型來選擇字體。

那么我們要怎么選呢?我剛剛所說的一些適用并不是絕對的。就像這些案例圖,同樣的養生主題,這里就用了4種字體

  • 第一個宋體,適用與美食,給人一種嗯….就是一種高端、有底蘊的感覺吧,
  • 第二個書法體,有沒有一種老中醫的感覺
  • 第三個圓體,畫面很可愛所以用這個字體很適合
  • 第四個黑體,百搭字體,給人的感覺也是中規中矩。

 

如果實在是不知道該怎么選,還有一個簡單粗暴,沒有任何技術含量的方法就是直接去找同個主題類型的畫面,看別人是用的什么字體,去一個個試,看看哪個字體更符合你的畫面感覺,總能撞上一個合適的吧。

畫面元素我把它分為三個層,主體元素、主題相關元素、點綴元素

三個層級中,主元素在畫面中占比最大,相關元素第二,點綴元素第三

 

我們可以把它理解為文案的三個層級,主標題對應的就是主體元素,副標題對應的是主題相關元素,小標題對應的就是點綴元素

主體物元素根據設計需求重點要突出什么來選擇的~主體元素的選擇方向 ?我目前整理這5類。

第一類單個/組合類的主體元素的選擇方向,分了2個,一個是人/動物/擬人,一個是物品

使用人/動物/擬人為主體的思路是:誰,在做什么,怎么做,表達什么情緒

比如說哦,這里重陽節里,誰,一對老人,在做什么,在鍛煉身體,怎么鍛煉的,一人拿著一把扇子跳舞,想要表達什么情緒,健康活力。一般這個情緒 ?主要是通過人物的肢體語言和表情來傳達的)

這一類主體元素在選擇左右版式時,可以選擇單個元素,也可以選擇2個或3個以上的組合元素。

這一類主體元素在選擇左中右版式時,可以選擇單個元素在中間,文案在兩邊,也可以選擇文案在中間,2個元素在兩邊。

這一類主體元素在選擇上下、半包圍、全包圍版式時,主體元素都是組合類形式出現,不會出現單個的元素。

單個/組合類的物品,這一類元素在選擇左右版式時,可以選擇單個的元素放大作為主體、可以放在左邊或右邊,也可以選擇幾個元素疊加組合或是有規律的擺放。

這類元素選擇在上下、半包圍、全包圍時也都是組合類形式出現,可以組合擺放或規律分布,不規則分布。

選擇居中版式時,就是之前說的,把一個物品放大,撐滿整個版面,很有代入感

第二類場景類主體選擇方向,也分了2個,人物+場景,和純場景

場景類比較多用于節氣類的主題Banner。

使用人物+場景為主體的思路是:誰,在做什么,在哪里做,怎么做,對比上面的人物類多了一個在哪里做。

人物+ 局部場景,就是提取了場景中的幾個關鍵物品元素來介紹人物在哪里做什么。植物、沙發、辦公桌,這一類常用與左右版式。

人物+ 遠景,遠景是指畫面中除了人物以外,還包括更多的環境因素

人物+全景,適用于表現人物的全貌,全身動作,相比于遠景更容易體現主體于環境之間的密切關系。

人物+中景,中景是指被人物膝以上的部位。

人物+近景:近景是指人物胸部以上的部位。

場景類分了一個大場景和局部場景

大場景一般是介紹主題相關的場景畫面,局部場景主要是截取主題相關的一個關鍵場景,算是近景和特寫來表達主題。

第三類超現實類

其實就是使用夸張的大小對比形式(人物放大+元素縮小或是元素放大+人物縮?。┗蛘叱霈F現實沒有的虛擬場景

第四類文字類,一般用文字類為主體,最常見就是把文字放大居中對齊放在畫面的正中間。

可以在添加環境氣氛元素,或者是選擇一種設計風格套用,比如說孟菲斯風格,新春風格,還可以使用百變矩形框來和文案搭配使用。

第5類特有形式套用,就是直接套用我們大家所熟悉的一種固定形式和元素。

比如說這個,它直接套用了我們熟悉的門神,摘取了他的動作,把服飾簡化,用豬豬替換了人。特有形式套用其實就是摘取了我們非常熟悉的畫面中的版式呀,關鍵元素呀,人物動作,服飾。然后用自己的人物去替換,在用一種風格演繹出來。

主題相關元素,和字面意思相同,是根據主題思維發散,選擇符合畫面的主題相關元素

比如這個駕照主題,主體元素是這個開車的女人,主題相關元素就是這些:紅綠燈、筆、后視鏡、駕照、路錐

穿搭主題的,主體物是這兩個女人,主題相關元素就是這些鞋子包包眼鏡帽子等等

后面兩個同理,這些都是主題相關元素

點綴元素分了兩種,一種是點線面點綴,常用于畫面背景空曠的位置,還有一種是漫畫符號的氣氛元素來點綴畫面。

點綴元素和主題相關元素的目的都是用來豐富畫面的,如果覺得畫面空就可以從這兩個方向去考慮,

我們也是要根據自己的畫面來考慮的哦,有的畫面只需要選擇其中一種即可,有的畫面可以同時使用兩種,要靈活應用哦~

以上是背景類型的總結,了解一下就好,主要根據主題要表達的內容來選擇。

場景類分兩種,一種是具象場景,人物和場景是融為一體的。第二種就是簡化場景,能看的出來場景,但是簡化處理過,主要突出主體元素。

第一個案例分享,是分享如何借鑒已有的參考圖來設計Banner。

當我們明確設計需求后,就可以開始主題聯想思維發散,從文案內容中提取關鍵詞,靈感搜集這個環節,我直接從收集的素材里面找了參考圖來做借鑒。

 

參考圖借鑒這里需要注意的是,參考圖一定要夠多,我們可以從多張素材中提取需要的參考內容。比如這里,我從第一張圖片里提取了他的版式,主體元素類型、文字組合形式。從第二張圖片提取了它的風格,從第三張里提取了它的人物比例,從第四張里面提取了人物的動作。后面幾張圖片是通過關鍵詞搜索的一些主題相關元素。

當確定主體物類型為單個人物時,和之前說的一樣,就要考慮,是誰?在做什么?怎么做的?

這里就想表達:一個醫生 拿著教棍指著文字 在講霧霾知識,把自己的想法繪制了一個簡單的草稿,確定一下畫面元素的一個大概位置

當確定了草稿和參考素材后,我們可以直接使用元素拼貼的方法,快速確定畫面的整體感覺,元素的位置大小,是否是自己要的感覺。如果不是就可以重新選擇素材替換。

主體元素繪制,使用了借鑒的人物比例和人物動作還找了醫生的服飾,用自己需要的畫面風格重新繪制。

加入了一些點綴元素,漫畫氣氛線。開始上色呢,色彩搭配,我選擇的藍色為主色,黃色為點綴色。

色彩這塊我目前使用的方法是,先根據主題的屬性選擇一個適合的主色,確定主色后,會去直接找參考圖吸色,然后在進行微調。(色彩方面的內容后期會計劃出一個教程)

背景想要表現霧霾天的感覺,所以選擇了質感背景,直接拿筆刷刷了一些顆粒

 

以上所有的步驟都完成后,就可以開始整體調整和增加細節了。

整體調整一般就是調整元素的大小對比關系,文案的字體等等,增加細節就是可以增加畫面的紋理質感,也可以給元素增加多一點細節,比如說發型細節,服飾細節等等。

第二個案例分享,是分享如何使用上面總結的內容來設計Banner。

同樣拿到需求后

第一步去選擇畫面主體元素方向,每一個畫面主體元素方向都可以得出一個設計方案,需要出多個方案時就可以用這個思路(但是要考慮主題需要突出的內容來選擇)這里我選擇的是單個元素。

第二步確定版式,單個元素可選擇的版式有兩個,左右和左中右,這里我選擇的是左右版式

第三步確定文案層的樣式,因為是文案兩個層級,所以在2個層級的可選樣式中選擇了這個。

這一步完成后主體元素方向已經確定、版式也已經確定、文案層樣式也確定了

第四步就要開始思維發散,通過文案和主題思維發散得出這些關鍵詞。因為是單個元素就是要考慮誰?在做什么?怎么做?

第五步靈感搜集,靈感搜集主要搜兩個方向:

1、搜插畫,提取需要參考的風格,人物的造型比例,它的配色。個人的素材庫建立真的很重要,個人平時常用的是:花瓣、追波…搜集的插畫作品最好是一個作品中提取一個點,以免雷同。

 

2、搜圖片,提取要參考的人物動作(也可以自己擺拍)服飾、配飾、發型

搜圖片我個人一般用的海洛創意、花瓣、也可以從淘寶里面搜一下服飾或配飾參考。

 

第六步繪制草稿或者圖片拼貼

第七步開始電腦繪制,先繪制文案,然后畫面主題元素、輔助元素繪制,增加背景,色彩搭配,還有我們自己在繪制完成的最后一步是整體調整和增加細節。

以上就是2個案例的分享呢~

第一點,對于整體畫面掌控力還不足的我們,還是乖乖的先從整體再到局部吧,因為有的時候花大量時間做局部元素,最后發現和整個畫面不匹配,額,想想就心痛,浪費時間,浪費精力的。我們要完全確定了畫面中的每個元素是什么,什么樣子,以及擺放在哪個位置,再進行局部元素單獨繪制。

 

第二點,繪制草稿是屬于最低成本的試錯,到后面的改動,工程量只會越來越大,前期一定一定一定不要摳細節,快速確定元素位置、從大到小深入。在繪制完草圖確定元素位置后,可以選擇圖片素材拼貼的方法,就是有圖醬紫,能更直觀感受整個畫面的感覺是否是自己要的。

 

第三點,前期的思考過程要比后面的動手制作更重要。前面的思路不對就等于說一步錯步步錯

 

第四點,好記性不如爛筆頭。尤其是像我一樣,魚一般的記憶。我們在做稿的時候,經常會遇到被其它事情打斷,一扭頭就斷片了,我是誰,我在哪,我要干嘛來著,又要花會時間去想剛剛做到哪了?把自己需要做的做稿步驟寫出來,是一個理清自己思緒的過程,并且在被打斷后,可以快速知道自己在哪一個環節,清楚知道自己還剩多少步驟,會更加有效率。

 

第五點,把重復的步驟流程化,釋放大腦內存,把精力用在更重要的部分。在完成一個類型的設計后,建議把自己的制作流程寫下來,并反思總結改進這個制作過程當中你覺得需要改進的環節。下次遇到同類型設計時,直接翻看流程,完全不用動腦子在想一遍,適合我這種懶人。

 

第六點,其實就是要換位思考,拿到需求后,不要先從自己的主觀意識去想我要畫什么,我能畫什么,我要畫的多厲害。要去思考這個設計,用在哪?主題是什么?需要傳遞什么信息?什么樣的風格適合?…

 

這就像戀愛中最可悲的就是搞不清對方的真實需求,把自己認為最好的給對方,對方不喜歡,最后還怪對方怎么不理解自己的心意,最好的的都給你了,那怪誰咧?貓和狗戀愛了,狗送貓骨頭,貓能開心嗎?不拿爪子撓它就是好的了

(以上設計圖片來源:Fotor 懶設計)

好啦,所有內容全部分享完呢,這個PPT如果有需要,大家可以自己下載哈~(文章末尾下載)

如果對以上的內容有什么疑問,也歡迎加我微信問我哦,有空的時候都會回復的哈~

再次強調,以上內容只是我個人對插畫類Banner的理解,所梳理出來的內容和方法,不一定是對的。適合我的方法不一定適合所有人。大家一定要在實踐中,多去嘗試和思考,找到適合自己的方法,畢竟方法千千萬,適合自己的才是最好的哦~

 

提取碼:nrn7

 

原文地址:站酷

作者:KM嘉

轉載請注明:學UI網 » 插畫類Banner-設計實用分享

登錄收藏
 
你可能喜歡的:
所有的設計都離不開這兩條創作思路所有的設計都離不開這兩條創作思路
【系列插畫】扁平插畫小結(附筆刷)【系列插畫】扁平插畫小結(附筆刷)
佳作賞析:創意系列一組插畫佳作賞析:創意系列一組插畫
品牌設計模型品牌設計模型
2020插畫趨勢大預測2020插畫趨勢大預測
品牌設計怎么做?這套方法值得99%設計師收藏(上)品牌設計怎么做?這套方法值得99%設計師收藏(上)
畫一條/匹/頭/根大熊貓兒(三視圖)畫一條/匹/頭/根大熊貓兒(三視圖)
如何從0到1建立一套品牌插畫系統如何從0到1建立一套品牌插畫系統
萬能設計公式,教你設計商業海報萬能設計公式,教你設計商業海報
從什么時候開始,你覺得自己做設計不會排版?從什么時候開始,你覺得自己做設計不會排版?
?
网球比分雷速