騰訊漫畫設(shè)計(jì)告訴你如何制作Banner小圖

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

UI設(shè)計(jì)師每天要做的工作，無非是我們的界面設(shè)計(jì)，Banner等等。今天，AAA教育小編來帶你盤點(diǎn)一下，我們的“騰訊漫畫”設(shè)計(jì)師zhong是如何設(shè)計(jì)我們的Banner小圖的?？偣部梢苑殖伤牟?，分別是我們的選材、北京、文案設(shè)計(jì)、營造氛圍這四部，大家快來看看吧。

選材（25）+背景（25）+文案設(shè)計(jì)（40）+營造氛圍（10）=100分（滿分）

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

二、4步打造高品質(zhì)banner

1. 素材選?。?5分）

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

下面案例均為正確示范：

2. 背景打造（25分）

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

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

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

3. 字體設(shè)計(jì)（40分）

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

下面我們加一個知識點(diǎn)來輔助完成不同類型的字體設(shè)計(jì)，在此講述的方式方法適合于沒有太多經(jīng)驗(yàn)的初學(xué)者。

字體設(shè)計(jì)中存在的自檢法——田字四維自檢攻略：

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

接下來，看下我們的方法論如何應(yīng)用。

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

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

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

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

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

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

4. 營造氛圍10分

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

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

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