不摳圖不合成，教你快速做出一張高格調(diào)的Banner設(shè)計(jì)

@TTTing1?：工作后經(jīng)常有人對(duì)我們說做設(shè)計(jì)一定不要直接用圖片，一定要摳圖，不要偷懶，不摳圖是做不好設(shè)計(jì)的，可是到后來我發(fā)現(xiàn)有些Banner設(shè)計(jì)即使不摳圖，也可以做得很好看，誰說做設(shè)計(jì)一定要摳圖？

因?yàn)槲以谥暗奈恼吕镆呀?jīng)非常詳細(xì)地講解了平面構(gòu)成和色彩構(gòu)成的知識(shí)點(diǎn)了，所以在后面的文章里我不會(huì)再過多的在這些方面做文章，最多只是會(huì)提一下，畢竟每篇文章的篇幅有限，所以有些內(nèi)容我不會(huì)重復(fù)寫了，當(dāng)然如果大家想繼續(xù)了解這方面的知識(shí)可以點(diǎn)可以回頭去看我寫的這兩篇文章：五大步驟細(xì)說Banner圖設(shè)計(jì)之平面構(gòu)成的奧秘／六個(gè)步驟細(xì)說電商banner圖設(shè)計(jì)之色彩的奧秘。

接下來進(jìn)入我們今天的話題：不用摳圖不用合成，教你分分鐘搞定一張高格調(diào)的Banner設(shè)計(jì)！～

1／我為什么要做這樣一個(gè)主題的干貨分享呢？

記得以前上大學(xué)的時(shí)候聽一位老師說做設(shè)計(jì)千萬不要用漸變色，因?yàn)榉浅ow，于是我就當(dāng)教條一樣一直記在心里了：“嗯，千萬不要用漸變色”，但后來工作了幾年才發(fā)現(xiàn)，漸變色也可以很好看，也可以很高端，只是要看如何去用而已；再到后來在工作過程中，有人對(duì)我說做設(shè)計(jì)一定不要直接用圖片，一定要摳圖，不要偷懶，不摳圖是做不好設(shè)計(jì)的，可是到后來我發(fā)現(xiàn)有時(shí)候我們不用摳圖，也可以做出好看的設(shè)計(jì)或好的設(shè)計(jì)，我就有個(gè)疑問：為什么做設(shè)計(jì)一定要摳圖才行呢？

所以這次我們可以試著捋一下在不摳圖的情況下可以怎么玩設(shè)計(jì)，看能不能帶來一些啟發(fā)，這次我也依然會(huì)以Banner設(shè)計(jì)來舉例說明。

2／攝影與Banner設(shè)計(jì)之間的聯(lián)系是什么？

一般來說，如果攝影師和設(shè)計(jì)師能配合溝通一起去做設(shè)計(jì)是最好的，尤其當(dāng)涉及到很多產(chǎn)品或模特拍攝的時(shí)候，無論是在電商行業(yè)還是在廣告行業(yè)，前期都需要溝通好策劃方向以及構(gòu)圖色調(diào)等，因?yàn)閿z影部分的工作做得越到位，設(shè)計(jì)部分的工作量就越小，項(xiàng)目也越順暢，如果攝影部分的工作不到位，到設(shè)計(jì)那一步就麻煩大了，有可能需要返工重拍或者花費(fèi)大量時(shí)間精力去修改和調(diào)整，這樣子就得不償失了。

編者注：沒時(shí)間沒條件攝影？這些免費(fèi)圖庫可以幫你！《幫你找好圖！99%的互聯(lián)網(wǎng)從業(yè)者都要學(xué)會(huì)的圖片搜尋方法》

首先，商業(yè)攝影涉及到的工作內(nèi)容和知識(shí)點(diǎn)有哪些呢？

比如，拍攝目的／創(chuàng)意策劃／選道具或選模特／構(gòu)圖／配色／修片等

其次，Banner設(shè)計(jì)涉及到的工作內(nèi)容和知識(shí)點(diǎn)有哪些呢？

比如，活動(dòng)目的／文案策劃／風(fēng)格確定／選圖或選模特／構(gòu)圖／修圖／配色等

所以其實(shí)原則上來講，攝影和做Banner設(shè)計(jì)是沒什么區(qū)別的，攝影是把一堆東西放置在取景框里，最終出來一張照片，這個(gè)照片可以傳遞某種信息或情感，可以吸引到別人的注意或某種欲望和共鳴。

而Banner設(shè)計(jì)則是將所有的文案信息／產(chǎn)品或模特／背景／點(diǎn)綴物等，放置在一張畫布里，最終出來一張圖片，這張圖片也是要傳遞某種信息或情感的，也可以吸引到別人的注意或某種欲望和共鳴。

（是的，我又把這個(gè)重復(fù)了八百遍的圖放出來了～～）

所以，我們其實(shí)可以將Banner視作是一張照片＋幾排文字。接下來我們先看幾個(gè)示例：

 

還有我之前發(fā)過的一組日本的Banner圖設(shè)計(jì)：

看完是不是覺得超簡(jiǎn)單？仿佛就是攝影師把圖拍好，都不用設(shè)計(jì)師摳圖調(diào)色修圖什么的，設(shè)計(jì)師啪啪啪打幾個(gè)字，一個(gè)Banner就這么出來了呢對(duì)不對(duì)？！！！～

好了，我知道很多設(shè)計(jì)師巴不得每次做個(gè)Banner就跟打字那么容易就好了，那么這個(gè)其實(shí)也不是不可能，我們還是先來看下這類Banner都有些什么共同特點(diǎn)吧，我們先把它們摸個(gè)遍，哦不對(duì)，把它們先摸透徹～～下次我們也就知道該怎么做了。

那么怎么分析呢？我們主要從以下幾個(gè)方面去分析：

（1）照片類型
（2）適合的品類
（3）適合的活動(dòng)主題
（4）排版樣式
（5）字體選擇

接下來我們一個(gè)個(gè)來看：

（1）照片類型：從上面幾個(gè)示例可以看出，其實(shí)基本上任何色調(diào)任何類型的照片都是可以直接加文字做出一張Banner，不過這種照片（加上文字后其實(shí)就是一張Banner）最好還是能簡(jiǎn)潔時(shí)尚點(diǎn)，講求構(gòu)圖和留白，允許設(shè)計(jì)師有加文字的空間，更重要的一點(diǎn)是，照片中能有個(gè)主體，無論是產(chǎn)品還是模特。

我們可以將Banner文字去掉看下，如下圖所示：

（2）適合的品類：服飾箱包／美妝護(hù)膚／珠寶首飾／奢侈品／母嬰食品保健等等任何能拍成照片的品類都可以，因?yàn)檫@類Banner往往比較時(shí)尚簡(jiǎn)潔，所以任何允許將Banner做的比較時(shí)尚簡(jiǎn)潔的品類都可以。

（3）適合的活動(dòng)主題：這種照片類Banner適合好幾種活動(dòng)主題，比如時(shí)尚類／森女系／日系／大牌新品上市等等不是特別火熱低價(jià)促銷類型的Banner設(shè)計(jì)。

不過如果你能將場(chǎng)景搭建得比較有熱鬧氣氛然后直接拍一張照片，最后配合一些俏皮的文字其實(shí)也是可以的，比如下面這樣的Banner其實(shí)都可以通過手工搭場(chǎng)景或3D建模的方式得到（這個(gè)話題方向我們后面再單獨(dú)講一下，如果感興趣的話）：

下面這個(gè)是今年京東618的某個(gè)活動(dòng)Banner，雖然是用PS＋AI做的，但是用手工搭建場(chǎng)景＋攝影的方式或者3D建模的方式其實(shí)也是可以做出來的。

（4）排版樣式：基本就是左右排版／上下排版或劇中排版了（其實(shí)說實(shí)話不管怎么樣排版都可以，拍的時(shí)候給這張照片足夠的留白空間就好了即使不留白也可以通過加蒙層或者虛化的方式添加文字），下面我給大家演示下：

（5）字體選擇：字體是分氣質(zhì)的，字體的選擇跟Banner的氣質(zhì)其實(shí)也是有關(guān)聯(lián)的，比如女性化的字體會(huì)纖細(xì)瘦長一點(diǎn)，男性化的會(huì)粗獷尖銳一點(diǎn)，中性化的字體適用范圍會(huì)比較廣所以不會(huì)有太明顯的傾向性等等，大家可以簡(jiǎn)單看下下方的示例：

（更為具體的教程可參考這篇：《不會(huì)挑選字體？來看看字體的7種類型及特點(diǎn)》）

當(dāng)然還有英文手寫體在我們的Banner設(shè)計(jì)中也常常會(huì)用到，會(huì)讓畫面更加時(shí)尚隨性，如下圖中的英文字體enjoy：

不過需要注意的是，很多好看的字體都是有版權(quán)的，如果私自商用都是會(huì)侵權(quán)的，所以要么用免費(fèi)字體，要么購買字體版權(quán)要么就自己設(shè)計(jì)或自己寫了，下面有一些免費(fèi)字體可以給大家看下（由灰晝前輩二次整理的）。

（附上免費(fèi)中文字體集合：《超實(shí)用！有哪些免費(fèi)的中文字體可以下載？》）

好了，以上給大家講的是如何啪啪啪打幾個(gè)字就能用一張照片出一張Banner，那么其實(shí)我們還可以有更多玩法的，比如同樣是不用摳圖，但是我們可以把一張圖剪裁一下，模糊處理一下，或者旋轉(zhuǎn)一下，疊加處理一下，再或者是多張圖片混在一起玩等等這些情況又可以出來很多種花樣，適合的品類和活動(dòng)主題就又多了起來，同樣的，先看幾個(gè)實(shí)例：

（1）將1張照片通過剪裁，制造時(shí)尚感：

（不知道誰截的圖，直截了一部分，大家先將就著看下好了～）

看完以上示例我們會(huì)發(fā)現(xiàn)這種照片的玩法有什么規(guī)律呢？

（1）照片要求：照片背景要干凈簡(jiǎn)潔，且照片所占面積要夠大，色彩明度等要與背景區(qū)分開，形成對(duì)比。

（2）適合的品類：任何適合往時(shí)尚方向作圖的品類，比如服飾箱包／美妝護(hù)膚／進(jìn)口食品／母嬰保健等

（3）適合的活動(dòng)主題：時(shí)尚促銷／新品上市／時(shí)尚大牌／森女系等非低價(jià)熱鬧促銷的主題。

（4）排版樣式：比較注重自由排版，在這里文字已經(jīng)是畫面里的某一種元素，而不止是傳達(dá)信息的作用。

（5）字體選擇：比較適合放一些干凈利落的規(guī)規(guī)矩矩的字體（無論是有襯線還是無襯線字體）或者手寫體，會(huì)顯得比較時(shí)尚，且氣質(zhì)符合活動(dòng)或品牌產(chǎn)品自身的調(diào)性氣質(zhì)，切忌做一些夸張的字體變形或用一些奇形怪狀的字體。

你們可以想象一下明星走紅毯或出席活動(dòng)的各種造型，比如下面這些范冰冰的造型，哪一個(gè)更耐看顯的更高檔時(shí)尚？

（女神版范冰冰和ladygaga版范冰冰）

哈哈哈哈哈哈，回到正題，我們接著繼續(xù)往下看～

（2）2張照片左右拼接，形成對(duì)比：

（3）3張照片錯(cuò)落有致（不過字體效果有點(diǎn)不搭）：

（4）4張照片排排放，同時(shí)可以有一些傾斜角度或顏色的變化，避免呆板：

（5）多張照片并排排列：

（6）同樣是多張照片并排排列，但是是作為紋理疊加到背景里：

（7）同樣是一張或多張圖片作為紋理疊加到背景里，但是會(huì)在畫面里加入一些圖形形狀：

（8）用文字來剪裁照片，作為紋理：

總結(jié)

以上關(guān)于如何在不摳圖不合成的情況下做出一張高逼格Banner的分享內(nèi)容到這里就結(jié)束了，興許對(duì)你會(huì)有所幫助吧，而且這樣出來的Banner往往也比較簡(jiǎn)潔時(shí)尚，但也許有人會(huì)問，那沒有拍攝條件怎么辦啊？不得不摳圖或合成怎么辦啊？

那么對(duì)于這種情況，首先需要知道一點(diǎn)，沒有任何一種藥是包治百病的，在文章開頭我也說了，我這里重點(diǎn)要講的是，我們做設(shè)計(jì)不一定非要大費(fèi)功夫摳圖或者非要搞合成才能達(dá)到目的，不摳圖不合成也是可以做到的。

那么我上面說的這些方法適合哪些情況使用呢？我給大家例舉一下：

（1）你本來就有拍攝條件或者有資源獲得這種類型的圖片，比如可以買圖片版權(quán)或者有可以免費(fèi)使用的照片或素材。

（2）雖然你有拍攝條件但是照片拍得不好，你就是想模擬以上這些Banner的效果，比如把一些素材的人物或產(chǎn)品摳出來換個(gè)干凈簡(jiǎn)潔的背景，再或者換個(gè)場(chǎng)景等再重新設(shè)計(jì)。

（3）其實(shí)你也可以什么忽略我上面所說的內(nèi)容，因?yàn)樽鯞anner的方法成百上千，何必在一棵樹上吊死，你也可以玩其他的，比如，ps合成／手工diy／剪紙拼接／3D建模／手繪等等，反正只要能達(dá)到你要的效果和目的就好，就看你會(huì)不會(huì)用了（有沒有覺得做Banner好容易好有意思哇～～～～）。

好吧，這次就先講這么多了，我們下期干貨再見，哦對(duì)了，大家如果覺得有收獲的話也歡迎將文章分享給更多需要的人看到哦（下期干貨內(nèi)容關(guān)鍵詞預(yù)告：“網(wǎng)紅”）～

（PS：以上Banner均來自花瓣，如果Banner的作者本人看到這篇文章歡迎與我取得聯(lián)系哈，么么噠）

歡迎關(guān)注小婷姐的微信公眾號(hào)「TTTink-D」，一個(gè)干貨與文筆俱佳的美女設(shè)計(jì)師：

微信公眾號(hào)簡(jiǎn)介：專注開拓電商設(shè)計(jì)思維，不定期分享一些個(gè)人見解干貨，當(dāng)然也會(huì)分享一些頂級(jí)創(chuàng)意、攝影、人生感悟方面的好文啦。

「小婷姐的電商設(shè)計(jì)系列好文」

1. 《新人手冊(cè)！聊聊關(guān)于電商設(shè)計(jì)的那些事兒》
2. 《前輩經(jīng)驗(yàn)！聊聊新人設(shè)計(jì)師最容易遇到的12個(gè)問題》
3. 《不怕沒靈感了！SALE 招牌的9種排版設(shè)計(jì)方法歸納（附案例）》
4. 《如何辨別一個(gè)BANNER的好壞？（附案例）》
5. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（上集）》
6. 《電商干貨！BANNER圖設(shè)計(jì)之商品圖該怎么玩（下集）》
7. 《感覺技不如人？聊聊設(shè)計(jì)師該如何正確認(rèn)知自己的價(jià)值》
8. 《超長干貨！平臺(tái)電商設(shè)計(jì)師vs店鋪電商設(shè)計(jì)師哪個(gè)好？》
9. 《職場(chǎng)進(jìn)階術(shù)！哪些性格特質(zhì)有助于設(shè)計(jì)師的成長和提升？》
10. 《設(shè)計(jì)師項(xiàng)目做到一半總是想要放棄怎么辦？（附問答合集）》
11. 《超實(shí)用！從人性的角度揭露電商BANNER圖設(shè)計(jì)背后的秘密》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com