騰訊漫畫設計告訴你如何制作Banner小圖

AAA教育，助你從小白到大師

UI設計師每天要做的工作，無非是我們的界面設計，Banner等等。今天，AAA教育小編來帶你盤點一下，我們的“騰訊漫畫”設計師zhong是如何設計我們的Banner小圖的。總共可以分成四部，分別是我們的選材、北京、文案設計、營造氛圍這四部，大家快來看看吧。

選材（25）+背景（25）+文案設計（40）+營造氛圍（10）=100分（滿分）

（注意：積分在此是層層遞進關系，其中三個必選項內即便有減分項按照下面的做法實施也能將自己的設計稿維持在及格分數(shù)線以上，最后的可選項則會成為加分項。）

二、4步打造高品質banner

1. 素材選?。?5分）

以日常動漫輪播需求為例，建立相應尺寸的畫布，將需求所涉及到的人物文案擺放到里面，選擇所需人物素材，首先一張 banner 圖內的人物素材需要做到色彩、光影統(tǒng)一；半身人物需要至少露出胸以上位置，切記不要直接放置一兩個大頭，不同場景內拉出的人物務必要視角統(tǒng)一（例如不能一個頂視圖一個底視圖），不同環(huán)境色下的人物在最后一定要統(tǒng)一色調。

下面案例均為正確示范：

2. 背景打造（25分）

選材拖進畫布后，將需求文案統(tǒng)統(tǒng)寫進我們的 banner 中，在這同時我們將畫布填充一個顏色，具體的顏色我們吸取素材中較多的色相，從中調試一個較為舒服的顏色鋪滿整個背景。適當在背景里來幾塊高光色塊鋪在人物下方或者文案下方，在這第二步的操作同時，我們需要將全部文案，做出大概的排版樣式。

寫到這里，有些控制不住自己了，再加一點進階版本，在我們做好的背景中加入一些其他的素材，例如有景深的背景元素，可愛的人物元素，或者一些不錯的環(huán)境畫面。我們看下圖將一目了然，可以說是巧妙的豐富了我們的畫面，加入了劇情。

這種做法比較簡單易出效果，下面列出兩種慣用的方式。

3. 字體設計（40分）

第三步字體設計亦為我們整個 banenr設計中最關鍵的環(huán)節(jié)。

下面我們加一個知識點來輔助完成不同類型的字體設計，在此講述的方式方法適合于沒有太多經驗的初學者。

字體設計中存在的自檢法——田字四維自檢攻略：

• 識別，首先尤為重要的是識別性，當字體失去了他的識別性那么一切都將是徒勞。
• 貫穿，把將要設計的幾個字體視為一個組合，那么具有風格性的設計樣式將要貫穿到我們整個組合當中。
• 統(tǒng)一，所謂的統(tǒng)一性就是規(guī)范我們的橫與豎，例如橫的高度為十個像素，豎的寬度為20個像素，即為字體組合中的每個橫豎的規(guī)范。
• 回顧，萬變不離其宗，這個主要強調的是對字體原型的回顧，在字體設計過程中不斷的回顧字體原型，回顧原本字體結構，是否在原來基礎上做的加法，以及在設計變形的過程中是否錯誤的改變了字體的本質。

接下來，看下我們的方法論如何應用。

在開始做這個 banner 之前的思考過程也包括我們對于字體設計方向的選擇，需要一并在一切開始之前進行，前面我們已經提到暫且略過對思考過程的講解，在思考有結果之后我們所做的每一步都是圍繞著我們的重心來展開的，下面以戀愛類題材為案例進行細致講解。

此款戀愛型的字體設計我們直接采用原字形的傾斜體（方正大標宋簡體），男女戀愛項體現(xiàn)出的浪漫氛圍，思考后將這種帶有曲線的藝術英文案例作為參考。

從我們的參考中快速勾選出大概筆畫，放置我們的字體中看是否符合我們的預期，然后用「鋼筆工具」繪制出比較符合我們使用的筆畫。從圖中可以看出放置什么樣式后依舊可以清晰的看出我們的原本字形（應用到的是識別）；幾乎每個字體中添加類似的筆畫（應用到的是貫穿）。

大致的樣式擺放完畢后，開始進行字形的優(yōu)化。首先開始簡化原本字體結構，每個「橫」設置為3PX，每個「豎」為14PX的圓形直徑。（應用到的是統(tǒng)一）

然后開始將我們繪制的筆畫安放到簡化的字體結構中，在放置的過程中我們需要不斷的（應用到的是回顧）看我們的過程中是不是脫離了字形本身結構，不斷以一個旁觀者的角度來審視我們的文案是否具備較高的識別度（應用到的是識別），在這一步的過程中我們增加了幾個筆畫的變形樣式，但是依舊屬于同一風格的樣式，這就回歸到最開始的（應用到的是貫穿）。

接下來我們將文案放置到我們的畫面中，根據(jù)人物色彩調整文案顏色

4. 營造氛圍10分

通過前面簡單的三步畫面到此屬于一個及格分數(shù)線了，如何通過簡短的幾分鐘再來一點小突破就看我們接下來的這一步了。

營造氛圍，讓畫面更加飽滿，氣氛更足。

到這里可以看到拆分開來，簡單的幾步就能打造一個高質量的 banner，在這里總結的幾點方法論是貫穿我們整個設計過程的，整個圖的設計過程也是不斷優(yōu)化這四步的過程，下面的一些案例，均按照上面的方法論進行設計，希望能給有緣看到的小伙伴一些啟發(fā)與幫助。