【乾貨】不用摳圖不用合成，教你分分鐘搞定一張高逼格Banner設計！

本文由

做設計的麵條

（ID：TTTink-D

）

授權發布

前深圳京東JDC電商設計師，站酷推薦設計師，一個擅長將電商及Banner設計講的最透徹易懂的妹子。

1／我為什麼要做這樣一個主題的乾貨分享呢？

記得以前上大學的時候聽一位老師說做設計千萬不要用漸變色，因為非常low，於是我就當教條一樣一直記在心裡了：「嗯，千萬不要用漸變色」。但後來工作了才發現，漸變色也可以很好看，也可以很高端，只是要看如何去用而已；再到後來工作幾年，有人對我說做設計一定不要直接用圖片，一定要摳圖，不要偷懶，不摳圖是做不好設計的，可是到後來我發現有些圖我們不用摳，也可以做得很好看，為什麼做設計一定要摳圖才行呢？

所以我們可以試著捋一下，看能不能帶來一些啟發，這次依然是以Banner設計來舉例說明。

2／攝影與Banner設計之間的聯繫是什麼？

一般來說，如果攝影師和設計師能配合溝通去做設計是最好的，尤其在涉及到很多產品或模特的拍攝，無論是電商行業還是廣告行業，前期溝通好策劃方向以及構圖色調，攝影部分的工作做得越到位，設計部分的工作量就越小，項目越順暢，如果攝影部分的工作不到位，到設計那一步就麻煩大了，有可能需要返工重拍或者花費大量時間精力去修改和調整。

Q：商業攝影涉及到的工作內容和知識點有哪些呢？

A：拍攝目的／創意策劃／選道具或選模特／構圖／配色／修片等

Q：

Banner設計涉及到的工作內容和知識點有哪些呢？

A：

活動目的／文案策劃／風格確定／選圖或選模特／構圖／修圖／配色等

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

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

Banner組成要素包含4個方面：

文案 、商品／模特、背景、點綴物（可有可無）。

Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。

所以，其實

我們

可以將Banner視作是一張照片＋幾排文字。接下來我們先看幾個示例：

還有一組日本的Banner圖設計：

看完是不是覺得超簡單？彷彿就是攝影師把圖拍好，都不用設計師摳圖調色修圖什麼的，設計師啪啪啪打幾個字，一個Banner就這麼出來了呢對不對？！！！～

好了，知道很多設計師恨不得做個Banner就如同打字那麼容易，其實也不是不可能，還是先來看下這類Banner都有些什麼共同特點吧，先把它們摸個遍，哦不對，把它們先摸透徹～下次我們也就知道該怎麼做了。

我們主要從以下幾個方面去分析：

（1）照片類型

（2）適合的品類

（3）適合的活動主題

（4）排版樣式

（5）字體選擇

接下來我們一個個來看：

（1）照片類型

：從上面幾個示例可以看出，其實基本上任何色調任何類型的照片都是可以直接加文字做出一張Banner，不過這種照片

（加上文字後其實就是一張Banner）

最好還是能簡潔時尚，講求構圖和留白，允許設計師有加文字的空間，更重要的一點是，照片中能有主體，無論是產品還是模特。

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

（2）適合的品類

：服飾箱包／美妝護膚／珠寶首飾／奢侈品／母嬰食品保健等等任何能拍成照片的品類都可以，因為這類Banner往往比較時尚簡潔，所以任何能夠將Banner做的比較時尚簡潔的品類都可以。

（3）適合的活動主題

：照片類Banner適合這些活動主題，比如時尚類／森女系／日系／大牌新品上市等等不是特別火熱低價促銷類型的Banner設計。

不過如果你能將場景搭建得比較有熱鬧氣氛然後直接拍一張照片，最後配合一些俏皮的文字其實也是可以的，比如下面這樣的Banner其實可以通過手工搭場景或3D建模的方式得到。

下面這是去年京東618的某個活動Banner，雖然是用PS＋AI做的，但是用手工搭建場景＋攝影的方式或者3D建模的方式其實也是可以做出來的。

（4）排版樣式

：基本就是左右排版／上下排版

／居

中排版

（其實說實話不管怎樣排版都可以，拍的時候給照片足夠的留白空間就好了，即使不留白也可以通過加蒙層或者虛化的方式添加文字）

，如以下的參考：

（5）字體選擇：

字體是分氣質的，字體的選擇跟Banner的其實有關，比如女性化的字體會纖細瘦長一點，男性化的會粗獷尖銳一點，中性化的字體適用範圍會比較廣所以不會有太明顯的傾向性等等，大家可以簡單看下下方的示例：

當然還有英文手寫體在我們的Banner設計中也常常會用到，會讓畫面更加時尚隨性，如下圖中的英文字體enjoy：

不過需要注意的是，很多好看的字體都是有版權的，如果私自商用都是會侵權的，所以要麼用免費字體，要麼購買字體版權，要麼就自己設計或自己寫了，下面有一些免費字體供大家參考

（由灰晝前輩整理）

。

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

一、將1張照片通過剪裁，製造時尚感：

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

看完以上示例我們會發現這種照片的玩法有什麼規律呢？

（1）照片要求

：照片背景要乾淨簡潔，照片所佔面積要夠大，色彩明度等要與背景區分開，形成對比。

（2）適合的品類

：任何適合往時尚方向作圖的品類，比如服飾箱包／美妝護膚／進口食品／母嬰保健等。

（3）適合的活動主題

：時尚促銷／新品上市／時尚大牌／森女系等非低價熱鬧促銷的主題。

（4）排版樣式

：比較注重自由排版，在這裡文字已經是畫面里的某一種元素，而不止是傳達信息的作用。

（5）字體選擇

：適合放一些乾淨利落的規規矩矩的字體

（無論是有襯線還是無襯線字體）

或者手寫體，會顯得比較時尚，且氣質符合活動或品牌產品自身的調性氣質，切忌做一些誇張的字體變形或用一些奇形怪狀的字體。

二、2張照片左右拼接，形成對比：

三、

3張照片錯落有致

（不過字體效果有點不搭）

：

四、4張照片排排放，同時可以有一些傾斜角度或顏色的變化，避免呆板：

五、多張照片並排排列：

六、同樣是多張照片順序排列，但是是作為紋理疊加到背景里：

七、一張或多張圖片作為紋理疊加到背景，但是會在畫面里加入一些圖形元素：

八、用文字來剪裁照片，作為紋理:

總結：

以上關於如何在不摳圖不合成的情況下做出一張高逼格Banner的分享內容到這裡就結束了，也許對你會有所幫助，而且這樣出來的Banner往往也比較簡潔時尚，但也許有人會問，沒有拍攝條件怎麼辦？不得不摳圖或合成怎麼辦？

那麼對於這種情況，首先需要知道一點，沒有任何一種葯是包治百病的，在文章開頭也說了，做設計不一定非要大費功夫摳圖或者合成才能達到目的，不摳圖不合成也是可以做到的。

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

（1）本來就有拍攝條件或者有資源獲取這類型的圖片，比如可以買圖片版權或者使用免費的照片或素材。

（2）雖然你有拍攝條件但是照片拍得不好，想要模擬以上這些Banner的效果，可以把一些素材的人物或產品摳出來換個乾淨簡潔的背景，再或者換個場景等再重新設計。

（3）其實做Banner的方法成百上千，何必在一棵樹上弔死，你也可以玩其他的。比如：ps合成／手工diy／剪紙拼接／3D建模／手繪等等，反正只要能達到你要的效果和目的就可以了。

（ps：以上Banner均來自花瓣，如果Banner的作者本人看到這篇文章歡迎與文章作者取得聯繫~）

今天的文章，由

做設計的麵條

（ID：TTTink-D

）

提供

點擊下方「

閱讀原文

」查看

《【網頁設計】這樣的作品集排版，還怕找不到好工作？！》

↓↓↓

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 普象工業設計小站 的精彩文章: