#p#副標題#e#

大家首先會想到什么風格呢

是文藝青年的浪漫情調

還是以無印良品為代表的“性冷淡”風

其實，日本還有很多色彩繽紛的

充滿趣味的Banner設計

今天小編就根據它們的特點

總結了一系列不同類型的設計

二次元

近年來品牌們紛紛向年輕化靠攏

我們可以看到很多設計中

都會加入一些二次元的漫畫元素

在Banner中，二次元元素的添加

通過扁平化設計和年輕人進行有效溝通

純文字

純文字的Banner

也是日常設計中繞不開的一項

一筆一劃的文字設計，看似簡單

卻更加考驗設計師的能力

通過設計，變幻出不同風格

可以正經嚴肅，也可以童真活潑

而日本文字類設計是與漢字最為接近的

所以大家完全可以從中汲取優點

小清新

小清新的簡約風格，雖然是老生常談

但因其風輕云淡的配色

以及對于自然、樸實生活的向往

非常符合當代人渴望的“減法”生活

可以加入一些可愛的、治愈系的元素

讓整個畫面不那么死氣沉沉

性冷淡

與小清新不同

性冷淡的風格追求的是一種

無欲無求的極致簡約

主色調為黑白灰或輔以少量彩色為點綴

或者在精神層面將一切看淡

藝術類

如果你留心觀察，近些年的設計風格

有一個很有趣的現象

要么俗到掉渣，要么雅到極致

提起雅致，我們會想到那些

將經典畫作融入設計作品中來

例如梵高的著作、例如浮世繪的元素

或者干脆用上自己天馬行空的想法

最重要的是，通過藝術的方式

為設計增添更為豐富的精神內涵

原文：廣告獵人

如何打造海報級的banner？今天來給大家分享一下我對漫畫作品入手的一個作圖思路和方向。順帶分享一些實用小技巧給大家。歡迎多多指正，共同進步。

首先看看我們的素材：

當拿到一張原始素材的時候！

怎么辦？該怎么入手？怎么找方向？

來吧！

先來看看成稿：

最終設計成果還可以，那么是通過怎樣的設計手法達到這樣的效果呢？

下面我就來分享一下我的作圖思路；

1.需求的梳理和信息收集：

理解核心需求，為設計方向做好前期準備

Slogan：傳武（作品名） 副文案：幽府之力，逆轉生死

我們漫畫類的作品眾多，內容風格繁雜，所以拿到需求之后,首先就是要對作品進行“調查”。通過對漫畫作品的閱讀，理解內容、故事、繪畫風格來定性設計的方向。這樣才能在設計過程中準確把握住作品調性，才能設計出最貼合作品風格內容的banner，才能把我們作品精髓的內容傳遞給用戶。

比如上面這部作品，SLOGAN“傳武”是我們要著重設計展示的。而副標題“幽府之力，逆轉生死”也很重要，往往傳達出了作品的賣點和調性。

再看看我們拿到的素材，一張單人的簡單素材，看起來很單調，似乎沒有可切入的地方。這個時候就體現出為什么要先對作品進行“調查”的重要性了！

2. 確定設計方向：

明確設計方向，精準展現作品調性

通過閱讀，我們了解到這部作品是一部熱血，古風，玄幻作品，還有大致的故事內容，再結合我們的副標題“幽府之力，逆轉生死”。

腦子里就已經開始有畫面了，“幽府”大概表達了一個場景，而“力量”和“逆轉生死”又傳達出了一種氣勢磅礴的場面。這就為我們設計的方向奠定了一個準確的方向。

首先就把我們的素材和文案拉進畫框里，進行一個大致的排版找找感覺。第一個左右排版就太常規了，在場面和氣勢上有些弱。第二個添加了漫畫框，想切入一些故事內容一起展示。但又有一些強調漫畫框的存在了，磅礴的場景沒有展示出來。但注意右邊的部分，把主標題排在人物的兩邊似乎是一個不錯的選擇！我們就從這里入手。

重新嘗試了一下，發現這樣布局好像就是我們想要的感覺哈！那既然確定了框架，我們接下來就按照這個方向繼續強化出“氣勢”“力量”的感覺。

我們以人物為中心，想象畫面里有力量從人物背后向外“迸發”所以我們的字體可以設計得有一些趨勢在里邊，也是以一個圓弧為中心向外生長。以光從人物背面照射出來大逆光的視覺，營造一種“力量”迸發的感覺。

3. 顏色的選擇：

跟隨之前確定的設計方向，提煉選色搭配。

我的方法一般是先從素材本身出發，根據想要達成的視覺風格來延伸出想要的配色。這樣得到的顏色更整體，人物素材能更好的融入背景氛圍中，也方便后期調整。

觀察的素材，發現他的顏色都比較灰，缺乏對比，就會顯得很“平”，難以營造出我們想要的感覺。所以從人物素材本身的顏色出發，提取同類色和提高飽和度。結合考慮到有利于運營推廣的視覺需要“吸睛”。得出了后面一組對比更強烈的顏色。

4. 有主次地進行深入刻畫：

畫面中最主要的肯定是我們的SLOGAN和人物角色，是我們要重點刻畫的對象。剩下的副標題、背景氛圍次之。不僅是要在排版上做區分，在視覺感受上也要做出差異化。這樣才能有遠近虛實的感覺，增加空間感。

我們希望畫面具有一定的質感，增加其沖擊力。所以我們在刻畫背景的時候可以選擇一些漫畫里比較好的場景，或扉頁背景素材來做底圖。再疊加上一些紋理材質，再一層一層地來給背景打光，用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達到我們想要的效果。

小技巧1：相同光源的照射，傳達到不同的物體上時，它的視覺表現時不同的。并不是光源時什么顏色，照射的地方就會是什么顏色。

我們來對比一下兩種顏色的實際效果，可以說是很直觀了！

小技巧2：為了使素材更完美地融入到背景中，我們可以后期人為地給素材增加一圈高光/輪廓光。這樣使畫面更融洽的同時，也能讓我們的人物變得立體起來！。

再來對比下沒加輪廓光的感覺：

真的是少了些味道和細節哈哈，其實在很多時候我們都可以對我們的素材進行二次加工讓其提升一定的品質，配合畫面以達到更好的視覺效果。

5. SLOGAN的設計：

主文案在我們草圖的基礎上，結合整體畫面的趨勢進行細化。（增加毛筆筆觸，和優化筆畫）。

這里主要分了三層進行處理顏色層(文字層)：主要給一個基礎顏色；

材質層：因為這兩個字的占比比較大，所以可以增加一些紋理細節讓畫面更豐富耐看；

厚度層：讓后面的光源，在我們的字上形成一圈高光，可以突出我們的文字。

增加一些光暈效果，再放上做好的SLOGAN看看效果，好像還不錯。

有些同學可能會疑惑這里為什么字體要做一個厚度層，我們也上一下對比圖先看下效果：

可以看少了一些些質感和重量，在輕量的風格里ok，但是在我們當前的畫面里就差了些感覺，所以才做了厚度層來強調光線照射過來的視覺增強畫面沖擊力。

之后主要是做一些符合我們畫面氛圍的漂浮元素，豐富畫面。有一定手繪功底的話就再好不過了！

完成，到這一步差不多達成了我們想要實現的效果，“氣勢”和“力量”的感覺在這么“樸實無華”的素材身上也基本表現到位了。還是比較滿意的，差不多可以提審交稿了！

最后在觀察觀察整體的畫面，審視一遍,查缺補漏。

發現我們的畫面好像有些燥啊，紅色和黃色飽和略微有些高。整體的感覺也不夠清晰。最后再做一個調整吧。

降低一些紅色和黃色飽和度，在暗部加一些紫色(主文案暗的部分和畫面四周的暗部)。增加冷暖對比就好多了。

小技巧3：蓋印整個圖層——在濾鏡里面找到其他——高反差保留，數值根據畫面來調。

然后就得到這么一個圖層

是不是很神奇？別慌，把這個圖層的屬性改成線性光看看,畫面清晰了很多，也變得更有質感了！

最后看下過程演變圖：

總結 

1）梳理需求內容：通過閱讀漫畫作品，深入了解內容并收集整理信息；

2）提煉關鍵字延展：嘗試多種可行方案，最終確定設計方向；

3）slogan的設計：一定要符合畫面和作品調性，達到與畫面相映成輝的效果；

4）細節把控：完成之后再回過頭來審視整體畫面，查漏補缺力求做到最好！

付出多少努力，就能得到多少回報！

原文地址：TCD設計中心（公眾號）

作者： 慢熱

插畫作為Banner元素之一，只要學會創作小場景，利用場景元素，就能制作出自己原創的插畫Banner。下面這篇文章重點就通過創作一只小貓咪出發，用小貓咪作為素材設計一張插畫風格的Banner。

靈感素材

對于無法原創插畫的小伙伴，還是需要參考照片來作為創作起點。我們今天用的照片是我從攝圖網上看到的，剛好被小貓咪可愛的動作所吸引。（很像招財貓的動作~）

從照片中提取草圖

STEP 01

提取草圖，也就是明確貓咪的身體結構，造型可寫實可抽象，但是寫實永遠是個起點。所以寫實的過程就可以在草圖中進行。利用照片勾勒也好，還是根據照片參考自己畫出結構也好。都是一個不錯的開始。

從上圖可以看出，貓咪的結構輪廓線有了，這部分在我們的扁平插畫研習社課程中也和大家詳細講過，從骨骼開始抽取最基本的線條，這部分為接下描繪大形打下了堅固的基礎，如果骨骼出了問題，輪廓線就很難糾正最初的結構，導致形體出問題的也是這一最初環節。

外輪廓并不一定完全按照貓咪的外形來勾勒了，部分細節可以修改。

第一層！整體大輪廓

貓咪的大輪廓是造型的起點，先畫出一整個剪影形狀，為細節打下基礎。

STEP 02

打開AI，開始在AI中描形，文檔可設為1600*1600px，色彩模式可以設置為CMYK。有了草圖的輔助，就知道應該安排什么形狀最好。但這時由于是偏抽象的風格，因此貓咪的外形需要進一步改造，簡化。

先為整個文檔鋪設背景形狀，運用矩形工具繪制一個1600*1600px，作為背景，先設置背景的目的是建立起整個色彩氛圍，讓前景色跟隨背景色來設計。背景色為#F08654。

并利用鋼筆工具畫出貓咪的頭部，注意貓咪的臉可以寬一點、肥一點，這樣會看起來更可愛。

STEP 03

接下畫出身體的部分，貓咪的四只小貓爪可以夸大一點。將四只貓爪安放在合適的位置。這樣整個身體就拼裝好了。

注意每只貓爪都是用矩形的變體，這樣能讓貓咪看起來有種簡潔的抽象感，和寫實的貓咪能拉開風格距離。

再鋪一層！給貓咪更多細節

第二個層次，應該是貓咪更多細節：面部、毛色之類，讓貓咪看起來可辨認。

STEP 04

先畫出可愛的貓臉五官：眼睛、鼻子、嘴、胡須……等。這部分創作時需要注意形狀之間的間隔和位置。五官的位置非常重要，稍不小心，就會讓面部看上去不自然。

貓咪的小腮紅可以用降低透明度的方法，疊成在其他色彩上方。

STEP 05

再增加貓咪的毛色，給純白的身體增加不一樣的色彩。依然從頭部開始，給兩只耳朵和額頭部分增加粉色的形狀，這里的形狀可以通過鋼筆工具來畫。

畫好的形狀如果超出了貓咪的大輪廓，就利用形狀生成器剪掉。

STEP 06

給貓咪一個裝飾上的細節，這個細節在照片里沒有，這些小創意都來源于生活。從生活尋找創意素材~不止于小鈴鐺，還有其他可以想到的寵物用品，都可以幫助美化貓咪。

小鈴鐺的色彩用了兩個互補色，讓這部分看起來更鮮明。藍色能起到平衡畫面整體冷暖調的作用。

STEP 07

讓小爪子也增加上細節，利用兩端為圓角的豎線條做出指縫，讓小爪子鮮活起來。色彩依然采用肉粉色。和毛色在整體上保持統一。

STEP 08

再利用比較小圓角矩形作為元素，重復該元素，就形成了裝飾圖案，裝點貓咪的身體，模擬類似貓咪的毛色質感。這是在AI中利用簡單的小元素模擬質感的常用技法。色彩仍然是為毛色的肉粉色。

STEP 10

最后給貓咪增加一條小尾巴，尾巴的畫法可以先利用線條做出弧形，再通過【擴展外觀】，轉為形狀。

上光影！讓它更生動

光影是能夠加深立體感的，但是扁平化中的立體感和平時我們所理解的立體感還是有差別。有一次，我在微博上寫過說自己的想要給畫面增加立體感，有提議說可以做3D效果。我立刻知道對方誤解了我的意思。因為我所謂的一種立體感是一種心理結構，而不是真要對象看起來立體。

可能把這個立體感換成鮮活、生動更合適。因為扁平化是在試圖抹平三維，而不是再現三維，所以增加立體效果，就要從形色上去入手。

STEP 11

畫陰影，還是要先確定光源點，如果光源從左上方打過來，那么陰影就會主要出現在貓咪身體的右側。當然，并不是絕對的，比如貓咪的爪子擋住腹部的部分也會有大面積陰影的表現。

這部分除了寫實，更要遵循形式美的原則。我在光影的繪制是不會參考攝影圖的，這就需要把握好光影的基本法則。

STEP 12

小鈴鐺的光影部分也不要忘記，給小鈴鐺增加陰影和高光。

讓喵去戶外！植物畫起來

表現戶外的場景，最多用的元素大概就是植物了。

STEP 13

首先畫大片的葉子，我們可以菱形來轉為葉片造型，再利用左右兩邊色彩的明暗對比來表現最簡單純粹的光影關系。

STEP 14

植物的葉片位置關系，通過再復制葉片形狀并旋轉的方式，可以多放置一個大葉片在主體對象的后面做背景，讓畫面有“景”的觀感。

色彩因角度的不同產生非常微妙的變化~

STEP 15

最后增加串裝的葉片，這類植物能有一種零碎的感覺，會沖淡大片葉子的整塊感。

到這一步初步的形色就完成了。在背景下為貓咪和植物都增加一個簡化的投影。

玩顆粒筆刷，增加質感

顆粒筆刷是我最喜歡的一種PS筆刷，默認的筆刷里沒有，這是我自制的一款顆粒筆刷的方法：

http://www.ifeiwu.com/blog-detail/1523.html

增加顆粒感是一個可選項，如果有時間，可以多刷幾筆，讓AI中的平涂形狀色彩看起來更飽滿，也更多視覺趣味。這也是我最喜歡的part。

STEP 16

打開PS，新建一個2000*2000px的文檔，色彩模式cmyk，分辨率300ppi。首先還是把招財貓復制進入PS，這里需要把背景色分開兩個圖層，方便我們通過剪切蒙板實現涂色效果。

這時開始運用我們自制的顆粒感畫筆給貓咪臉部增加顆粒感細節，在貓咪的圖層上新建一個圖層，再創建剪切蒙板，畫筆就在新建的圖層上開始畫。

STEP 17

接下開始畫身體，有些地方可以學會運用鋼筆工具來畫出部分區域，讓形狀看起來有更豐富的層次。

STEP 18

開始增加植物環境部分的顆粒，在植物邊緣部分增加少量顆粒即可。小的葉片可以多增加一點。

STEP 19

最后再利用調色工具調整一下整體的顏色。

一般來說質感這部分是可選項，有時候你想要簡潔輕盈，就可以省略這個步驟。

效果對比：

Banner設計

STEP 20

將招財喵放在右方，給左方文字以空間，順便在左邊也增加同樣的植物元素，算是呼應右邊的插畫。

最后，創作思路再捋一捋

從一張照片提取貓咪對象，從草圖開始再轉為插畫，給照片對象增加環境元素（植物等），然后放進Banner設計里，并跟隨插畫繼續潤色Banner~

生活就是最好的創作來源，當你感覺原創乏力時，跟著這篇文章來，快給你家家貓也來一張可愛的小插畫吧，把它用在你的下一次的設計里。

原文：ifeiwu

這里涉及到的第一個知識點就是畫圓點虛線，在 Ai里畫圓點虛線的方法有好幾個，這里給大家分享一個最簡單的。

第一步：用鋼筆工具隨意畫一條線，在描邊面板中把描邊的粗細數值設為5；

第二步：把描邊的端點改成圓角；

第三步：勾選虛線選項，然后把虛線數值改為0，間隙數值設為6，圓點虛線就做好了。

效果如下：

原理：線是由無數個點沿著一條路徑排列而成的，當把畫筆的端點設置成圓角時，就代表這條直線是由圓點組成的，只是因為每個圓點挨的非常近，所以看起來就像一條線。而勾選虛線選項就是為了使這些圓點分開，虛線的數值表示虛線的長度，我們只需要維持圓點本身的狀態，所以這里的數值要設置成0。畫筆的粗細值就是圓點的直徑，而間隙就是指相連兩個圓點的圓心之間的距離，當間隙的距離等于圓點的直徑時，這兩個圓點正好想切。所以間隙距離必須大于圓點的直徑才能成為真正的虛線。

第二個知識點就是混合工具，這個大家應該都有所了解，我就簡單的說一下。

第一步：在畫板里畫一個圓圈，然后在它的外圍畫兩個扭扭曲曲的線框，如下圖，（其實只要兩個對象就能就能做混合效果，不過對象越多變化會越豐富，當然也更難控制）：

第二步：同時選中這三個圖形，然后在菜單欄的對象中選擇混合-建立，就得到了如下效果。

提示：我們還可以雙擊工具欄中的混合工具，在間距選項中點選“指定步數”選項來修改步數。

搞清楚了圓點虛線和混合工具后，前面所說的那張海報就水到渠成了，我們只需在把已經畫好的輪廓圖形的描邊參數改成如下就好了。首先我們來設置最里面的圓圈的參數，虛線數值為0，間隙為5。

然后再來設置外圍兩個線框的參數，中間線框的間隙參數設為7，最外線框的間隙參數設為9，這么做是為了虛線的間隙從里往外變得越來越大。

調整好參數后就得到了如下效果，如果對輪廓的形狀不滿意，還可以用直接選擇工具，拖動外輪廓上的錨點和手柄來調節形狀。

調整后大致效果如下，中間部分變化比較小，外圍部分變化比較豐富。

調整好后把圖形復制到Ps中填充顏色，具體顏色大家可以自由發揮。

最后再把圖形周圍用蒙板擦一下，使其融進背景里，搭配一點文字就完成了，最終效果和原圖會有所差別，但方法就是這樣。

第二個我要分享的技巧是如何做出用圖形組成的球體效果，如下圖。

很多人可能會以為這個需要3Ｄ軟件才能完成，其實通過Ai就能很快做出來，操作方法如下。

第一步：排列一組圓點。

第二步：從窗口菜單欄中打開符號面板，選中排好的圓點，然后在符號面板的底部點擊新建符號圖標，于是我們就把這組圓點設置成了符號，創建這個符號是為了后面貼圖用。

第三步：用圖形工具畫一個圓，填充一個顏色，然后刪除最左邊的錨點，這樣我們就得到了一個沒有封閉的半圓。

第四步：選中圖形，在效果菜單欄中找到3Ｄ效果，選擇繞轉，然后我們就打開了3Ｄ繞轉選項的面板。

第五步：在3D面板中保留默認參數，然后勾選左下角的預覽，我們就可以看到剛剛創建的那個半圓已經變成了一個球體。

第六步：點擊預覽旁邊的貼圖選項進入貼圖面板，然后在面板頂部的符號欄中選擇剛剛創建好的圓點符號。

第七步：點擊面板左下角的“縮放以合適”按鈕，再點擊右下角的“確定”，這時我們可以看到圓點已經附在了球體表面。

第八步：回到“3Ｄ繞轉選項”面板后，把透視參數改到80左右，這時球體上圓點大小的對比就變得更強烈了。

然后我們可以把鼠標移到左上角的立方體處，拖動立方體以調整預覽圖的角度，完成這波操作后就有了如下效果。

通過創建不同的貼圖符號，我們可以做出很多類似的效果。

第九步：把球體圖形擴展后，取消群組、釋放剪切蒙板，我們就可以把附在球體表面的圓點貼圖單獨拿出來了。

同樣，其他的圖形也可以拿出來，這種形式我們也能在海報設計中常常看到，而想要得到前面提到的效果，我們還需要填充顏色，以及重新添加一個圓底。

第十步：畫一個與圖形同樣大小的圓，填充好漸變色（用漸變網格工具效果更佳）。圖形也可以填充一個類似的顏色，然后疊印在剛剛畫的圓上就可以了。

不同的貼圖和顏色搭配可以得到不同的效果。

總結

設計技巧雖然不是設計最本質的東西，但它是可以使設計變得更好看、更新穎、更具視覺沖擊力的有效手段，并且它可以大大提高工作效率，所以也很值得我們學習和研究，希望這篇文章對你有用。

作者：蔥爺
ID:congyenanian