]]>
大家首先會想到什么風格呢
是文藝青年的浪漫情調(diào)
還是以無印良品為代表的“性冷淡”風
其實，日本還有很多色彩繽紛的
充滿趣味的Banner設(shè)計
今天小編就根據(jù)它們的特點
總結(jié)了一系列不同類型的設(shè)計
二次元
近年來品牌們紛紛向年輕化靠攏
我們可以看到很多設(shè)計中
都會加入一些二次元的漫畫元素
在Banner中，二次元元素的添加
通過扁平化設(shè)計和年輕人進行有效溝通
純文字
純文字的Banner
也是日常設(shè)計中繞不開的一項
一筆一劃的文字設(shè)計，看似簡單
卻更加考驗設(shè)計師的能力
通過設(shè)計，變幻出不同風格
可以正經(jīng)嚴肅，也可以童真活潑
而日本文字類設(shè)計是與漢字最為接近的
所以大家完全可以從中汲取優(yōu)點
小清新
小清新的簡約風格，雖然是老生常談
但因其風輕云淡的配色
以及對于自然、樸實生活的向往
非常符合當代人渴望的“減法”生活
可以加入一些可愛的、治愈系的元素
讓整個畫面不那么死氣沉沉
性冷淡
與小清新不同
性冷淡的風格追求的是一種
無欲無求的極致簡約
主色調(diào)為黑白灰或輔以少量彩色為點綴
或者在精神層面將一切看淡
藝術(shù)類
如果你留心觀察，近些年的設(shè)計風格
有一個很有趣的現(xiàn)象
要么俗到掉渣，要么雅到極致
提起雅致，我們會想到那些
將經(jīng)典畫作融入設(shè)計作品中來
例如梵高的著作、例如浮世繪的元素
或者干脆用上自己天馬行空的想法
最重要的是，通過藝術(shù)的方式
為設(shè)計增添更為豐富的精神內(nèi)涵
原文：廣告獵人
]]>
如何打造海報級的banner？今天來給大家分享一下我對漫畫作品入手的一個作圖思路和方向。順帶分享一些實用小技巧給大家。歡迎多多指正，共同進步。
首先看看我們的素材：
當拿到一張原始素材的時候！
怎么辦？該怎么入手？怎么找方向？
來吧！
先來看看成稿：
最終設(shè)計成果還可以，那么是通過怎樣的設(shè)計手法達到這樣的效果呢？
下面我就來分享一下我的作圖思路；
1.需求的梳理和信息收集：
理解核心需求，為設(shè)計方向做好前期準備
Slogan：傳武（作品名） 副文案：幽府之力，逆轉(zhuǎn)生死
我們漫畫類的作品眾多，內(nèi)容風格繁雜，所以拿到需求之后,首先就是要對作品進行“調(diào)查”。通過對漫畫作品的閱讀，理解內(nèi)容、故事、繪畫風格來定性設(shè)計的方向。這樣才能在設(shè)計過程中準確把握住作品調(diào)性，才能設(shè)計出最貼合作品風格內(nèi)容的banner，才能把我們作品精髓的內(nèi)容傳遞給用戶。
比如上面這部作品，SLOGAN“傳武”是我們要著重設(shè)計展示的。而副標題“幽府之力，逆轉(zhuǎn)生死”也很重要，往往傳達出了作品的賣點和調(diào)性。
再看看我們拿到的素材，一張單人的簡單素材，看起來很單調(diào)，似乎沒有可切入的地方。這個時候就體現(xiàn)出為什么要先對作品進行“調(diào)查”的重要性了！
2. 確定設(shè)計方向：
明確設(shè)計方向，精準展現(xiàn)作品調(diào)性
通過閱讀，我們了解到這部作品是一部熱血，古風，玄幻作品，還有大致的故事內(nèi)容，再結(jié)合我們的副標題“幽府之力，逆轉(zhuǎn)生死”。
腦子里就已經(jīng)開始有畫面了，“幽府”大概表達了一個場景，而“力量”和“逆轉(zhuǎn)生死”又傳達出了一種氣勢磅礴的場面。這就為我們設(shè)計的方向奠定了一個準確的方向。
首先就把我們的素材和文案拉進畫框里，進行一個大致的排版找找感覺。第一個左右排版就太常規(guī)了，在場面和氣勢上有些弱。第二個添加了漫畫框，想切入一些故事內(nèi)容一起展示。但又有一些強調(diào)漫畫框的存在了，磅礴的場景沒有展示出來。但注意右邊的部分，把主標題排在人物的兩邊似乎是一個不錯的選擇！我們就從這里入手。
重新嘗試了一下，發(fā)現(xiàn)這樣布局好像就是我們想要的感覺哈！那既然確定了框架，我們接下來就按照這個方向繼續(xù)強化出“氣勢”“力量”的感覺。
我們以人物為中心，想象畫面里有力量從人物背后向外“迸發(fā)”所以我們的字體可以設(shè)計得有一些趨勢在里邊，也是以一個圓弧為中心向外生長。以光從人物背面照射出來大逆光的視覺，營造一種“力量”迸發(fā)的感覺。
3. 顏色的選擇：
跟隨之前確定的設(shè)計方向，提煉選色搭配。
我的方法一般是先從素材本身出發(fā)，根據(jù)想要達成的視覺風格來延伸出想要的配色。這樣得到的顏色更整體，人物素材能更好的融入背景氛圍中，也方便后期調(diào)整。
觀察的素材，發(fā)現(xiàn)他的顏色都比較灰，缺乏對比，就會顯得很“平”，難以營造出我們想要的感覺。所以從人物素材本身的顏色出發(fā)，提取同類色和提高飽和度。結(jié)合考慮到有利于運營推廣的視覺需要“吸睛”。得出了后面一組對比更強烈的顏色。
4. 有主次地進行深入刻畫：
畫面中最主要的肯定是我們的SLOGAN和人物角色，是我們要重點刻畫的對象。剩下的副標題、背景氛圍次之。不僅是要在排版上做區(qū)分，在視覺感受上也要做出差異化。這樣才能有遠近虛實的感覺，增加空間感。
我們希望畫面具有一定的質(zhì)感，增加其沖擊力。所以我們在刻畫背景的時候可以選擇一些漫畫里比較好的場景，或扉頁背景素材來做底圖。再疊加上一些紋理材質(zhì)，再一層一層地來給背景打光，用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達到我們想要的效果。
小技巧1：相同光源的照射，傳達到不同的物體上時，它的視覺表現(xiàn)時不同的。并不是光源時什么顏色，照射的地方就會是什么顏色。
我們來對比一下兩種顏色的實際效果，可以說是很直觀了！
小技巧2：為了使素材更完美地融入到背景中，我們可以后期人為地給素材增加一圈高光/輪廓光。這樣使畫面更融洽的同時，也能讓我們的人物變得立體起來！。
再來對比下沒加輪廓光的感覺：
真的是少了些味道和細節(jié)哈哈，其實在很多時候我們都可以對我們的素材進行二次加工讓其提升一定的品質(zhì)，配合畫面以達到更好的視覺效果。
5. SLOGAN的設(shè)計：
主文案在我們草圖的基礎(chǔ)上，結(jié)合整體畫面的趨勢進行細化。（增加毛筆筆觸，和優(yōu)化筆畫）。
這里主要分了三層進行處理顏色層(文字層)：主要給一個基礎(chǔ)顏色；
材質(zhì)層：因為這兩個字的占比比較大，所以可以增加一些紋理細節(jié)讓畫面更豐富耐看；
厚度層：讓后面的光源，在我們的字上形成一圈高光，可以突出我們的文字。
增加一些光暈效果，再放上做好的SLOGAN看看效果，好像還不錯。
有些同學可能會疑惑這里為什么字體要做一個厚度層，我們也上一下對比圖先看下效果：
可以看少了一些些質(zhì)感和重量，在輕量的風格里ok，但是在我們當前的畫面里就差了些感覺，所以才做了厚度層來強調(diào)光線照射過來的視覺增強畫面沖擊力。
之后主要是做一些符合我們畫面氛圍的漂浮元素，豐富畫面。有一定手繪功底的話就再好不過了！
完成，到這一步差不多達成了我們想要實現(xiàn)的效果，“氣勢”和“力量”的感覺在這么“樸實無華”的素材身上也基本表現(xiàn)到位了。還是比較滿意的，差不多可以提審交稿了！
最后在觀察觀察整體的畫面，審視一遍,查缺補漏。
發(fā)現(xiàn)我們的畫面好像有些燥啊，紅色和黃色飽和略微有些高。整體的感覺也不夠清晰。最后再做一個調(diào)整吧。
降低一些紅色和黃色飽和度，在暗部加一些紫色(主文案暗的部分和畫面四周的暗部)。增加冷暖對比就好多了。
小技巧3：蓋印整個圖層——在濾鏡里面找到其他——高反差保留，數(shù)值根據(jù)畫面來調(diào)。
然后就得到這么一個圖層
是不是很神奇？別慌，把這個圖層的屬性改成線性光看看,畫面清晰了很多，也變得更有質(zhì)感了！
最后看下過程演變圖：
總結(jié)
1）梳理需求內(nèi)容：通過閱讀漫畫作品，深入了解內(nèi)容并收集整理信息；
2）提煉關(guān)鍵字延展：嘗試多種可行方案，最終確定設(shè)計方向；
3）slogan的設(shè)計：一定要符合畫面和作品調(diào)性，達到與畫面相映成輝的效果；
4）細節(jié)把控：完成之后再回過頭來審視整體畫面，查漏補缺力求做到最好！
付出多少努力，就能得到多少回報！
原文地址：TCD設(shè)計中心（公眾號）
作者： 慢熱
插畫作為Banner元素之一，只要學會創(chuàng)作小場景，利用場景元素，就能制作出自己原創(chuàng)的插畫Banner。下面這篇文章重點就通過創(chuàng)作一只小貓咪出發(fā)，用小貓咪作為素材設(shè)計一張插畫風格的Banner。
靈感素材
對于無法原創(chuàng)插畫的小伙伴，還是需要參考照片來作為創(chuàng)作起點。我們今天用的照片是我從攝圖網(wǎng)上看到的，剛好被小貓咪可愛的動作所吸引。（很像招財貓的動作~）
從照片中提取草圖
STEP 01
提取草圖，也就是明確貓咪的身體結(jié)構(gòu)，造型可寫實可抽象，但是寫實永遠是個起點。所以寫實的過程就可以在草圖中進行。利用照片勾勒也好，還是根據(jù)照片參考自己畫出結(jié)構(gòu)也好。都是一個不錯的開始。
從上圖可以看出，貓咪的結(jié)構(gòu)輪廓線有了，這部分在我們的扁平插畫研習社課程中也和大家詳細講過，從骨骼開始抽取最基本的線條，這部分為接下描繪大形打下了堅固的基礎(chǔ)，如果骨骼出了問題，輪廓線就很難糾正最初的結(jié)構(gòu)，導致形體出問題的也是這一最初環(huán)節(jié)。
外輪廓并不一定完全按照貓咪的外形來勾勒了，部分細節(jié)可以修改。
第一層！整體大輪廓
貓咪的大輪廓是造型的起點，先畫出一整個剪影形狀，為細節(jié)打下基礎(chǔ)。
STEP 02
打開AI，開始在AI中描形，文檔可設(shè)為1600*1600px，色彩模式可以設(shè)置為CMYK。有了草圖的輔助，就知道應(yīng)該安排什么形狀最好。但這時由于是偏抽象的風格，因此貓咪的外形需要進一步改造，簡化。
先為整個文檔鋪設(shè)背景形狀，運用矩形工具繪制一個1600*1600px，作為背景，先設(shè)置背景的目的是建立起整個色彩氛圍，讓前景色跟隨背景色來設(shè)計。背景色為#F08654。
并利用鋼筆工具畫出貓咪的頭部，注意貓咪的臉可以寬一點、肥一點，這樣會看起來更可愛。
STEP 03
接下畫出身體的部分，貓咪的四只小貓爪可以夸大一點。將四只貓爪安放在合適的位置。這樣整個身體就拼裝好了。
注意每只貓爪都是用矩形的變體，這樣能讓貓咪看起來有種簡潔的抽象感，和寫實的貓咪能拉開風格距離。
再鋪一層！給貓咪更多細節(jié)
第二個層次，應(yīng)該是貓咪更多細節(jié)：面部、毛色之類，讓貓咪看起來可辨認。
STEP 04
先畫出可愛的貓臉五官：眼睛、鼻子、嘴、胡須……等。這部分創(chuàng)作時需要注意形狀之間的間隔和位置。五官的位置非常重要，稍不小心，就會讓面部看上去不自然。
貓咪的小腮紅可以用降低透明度的方法，疊成在其他色彩上方。
STEP 05
再增加貓咪的毛色，給純白的身體增加不一樣的色彩。依然從頭部開始，給兩只耳朵和額頭部分增加粉色的形狀，這里的形狀可以通過鋼筆工具來畫。
畫好的形狀如果超出了貓咪的大輪廓，就利用形狀生成器剪掉。
STEP 06
給貓咪一個裝飾上的細節(jié)，這個細節(jié)在照片里沒有，這些小創(chuàng)意都來源于生活。從生活尋找創(chuàng)意素材~不止于小鈴鐺，還有其他可以想到的寵物用品，都可以幫助美化貓咪。
小鈴鐺的色彩用了兩個互補色，讓這部分看起來更鮮明。藍色能起到平衡畫面整體冷暖調(diào)的作用。
STEP 07
讓小爪子也增加上細節(jié)，利用兩端為圓角的豎線條做出指縫，讓小爪子鮮活起來。色彩依然采用肉粉色。和毛色在整體上保持統(tǒng)一。
STEP 08
再利用比較小圓角矩形作為元素，重復(fù)該元素，就形成了裝飾圖案，裝點貓咪的身體，模擬類似貓咪的毛色質(zhì)感。這是在AI中利用簡單的小元素模擬質(zhì)感的常用技法。色彩仍然是為毛色的肉粉色。
STEP 10
最后給貓咪增加一條小尾巴，尾巴的畫法可以先利用線條做出弧形，再通過【擴展外觀】，轉(zhuǎn)為形狀。
上光影！讓它更生動
光影是能夠加深立體感的，但是扁平化中的立體感和平時我們所理解的立體感還是有差別。有一次，我在微博上寫過說自己的想要給畫面增加立體感，有提議說可以做3D效果。我立刻知道對方誤解了我的意思。因為我所謂的一種立體感是一種心理結(jié)構(gòu)，而不是真要對象看起來立體。
可能把這個立體感換成鮮活、生動更合適。因為扁平化是在試圖抹平三維，而不是再現(xiàn)三維，所以增加立體效果，就要從形色上去入手。
STEP 11
畫陰影，還是要先確定光源點，如果光源從左上方打過來，那么陰影就會主要出現(xiàn)在貓咪身體的右側(cè)。當然，并不是絕對的，比如貓咪的爪子擋住腹部的部分也會有大面積陰影的表現(xiàn)。
這部分除了寫實，更要遵循形式美的原則。我在光影的繪制是不會參考攝影圖的，這就需要把握好光影的基本法則。
STEP 12
小鈴鐺的光影部分也不要忘記，給小鈴鐺增加陰影和高光。
讓喵去戶外！植物畫起來
表現(xiàn)戶外的場景，最多用的元素大概就是植物了。
STEP 13
首先畫大片的葉子，我們可以菱形來轉(zhuǎn)為葉片造型，再利用左右兩邊色彩的明暗對比來表現(xiàn)最簡單純粹的光影關(guān)系。
STEP 14
植物的葉片位置關(guān)系，通過再復(fù)制葉片形狀并旋轉(zhuǎn)的方式，可以多放置一個大葉片在主體對象的后面做背景，讓畫面有“景”的觀感。
色彩因角度的不同產(chǎn)生非常微妙的變化~
STEP 15
最后增加串裝的葉片，這類植物能有一種零碎的感覺，會沖淡大片葉子的整塊感。
到這一步初步的形色就完成了。在背景下為貓咪和植物都增加一個簡化的投影。
玩顆粒筆刷，增加質(zhì)感
顆粒筆刷是我最喜歡的一種PS筆刷，默認的筆刷里沒有，這是我自制的一款顆粒筆刷的方法：
http://www.ifeiwu.com/blog-detail/1523.html
增加顆粒感是一個可選項，如果有時間，可以多刷幾筆，讓AI中的平涂形狀色彩看起來更飽滿，也更多視覺趣味。這也是我最喜歡的part。
STEP 16
打開PS，新建一個2000*2000px的文檔，色彩模式cmyk，分辨率300ppi。首先還是把招財貓復(fù)制進入PS，這里需要把背景色分開兩個圖層，方便我們通過剪切蒙板實現(xiàn)涂色效果。
這時開始運用我們自制的顆粒感畫筆給貓咪臉部增加顆粒感細節(jié)，在貓咪的圖層上新建一個圖層，再創(chuàng)建剪切蒙板，畫筆就在新建的圖層上開始畫。
STEP 17
接下開始畫身體，有些地方可以學會運用鋼筆工具來畫出部分區(qū)域，讓形狀看起來有更豐富的層次。
STEP 18
開始增加植物環(huán)境部分的顆粒，在植物邊緣部分增加少量顆粒即可。小的葉片可以多增加一點。
STEP 19
最后再利用調(diào)色工具調(diào)整一下整體的顏色。
一般來說質(zhì)感這部分是可選項，有時候你想要簡潔輕盈，就可以省略這個步驟。
效果對比：
Banner設(shè)計
STEP 20
將招財喵放在右方，給左方文字以空間，順便在左邊也增加同樣的植物元素，算是呼應(yīng)右邊的插畫。
最后，創(chuàng)作思路再捋一捋
從一張照片提取貓咪對象，從草圖開始再轉(zhuǎn)為插畫，給照片對象增加環(huán)境元素（植物等），然后放進Banner設(shè)計里，并跟隨插畫繼續(xù)潤色Banner~
生活就是最好的創(chuàng)作來源，當你感覺原創(chuàng)乏力時，跟著這篇文章來，快給你家家貓也來一張可愛的小插畫吧，把它用在你的下一次的設(shè)計里。
原文：ifeiwu
]]>
這里涉及到的第一個知識點就是畫圓點虛線，在 Ai里畫圓點虛線的方法有好幾個，這里給大家分享一個最簡單的。
第一步：用鋼筆工具隨意畫一條線，在描邊面板中把描邊的粗細數(shù)值設(shè)為5；
第二步：把描邊的端點改成圓角；
第三步：勾選虛線選項，然后把虛線數(shù)值改為0，間隙數(shù)值設(shè)為6，圓點虛線就做好了。
效果如下：
原理：線是由無數(shù)個點沿著一條路徑排列而成的，當把畫筆的端點設(shè)置成圓角時，就代表這條直線是由圓點組成的，只是因為每個圓點挨的非常近，所以看起來就像一條線。而勾選虛線選項就是為了使這些圓點分開，虛線的數(shù)值表示虛線的長度，我們只需要維持圓點本身的狀態(tài)，所以這里的數(shù)值要設(shè)置成0。畫筆的粗細值就是圓點的直徑，而間隙就是指相連兩個圓點的圓心之間的距離，當間隙的距離等于圓點的直徑時，這兩個圓點正好想切。所以間隙距離必須大于圓點的直徑才能成為真正的虛線。
第二個知識點就是混合工具，這個大家應(yīng)該都有所了解，我就簡單的說一下。
第一步：在畫板里畫一個圓圈，然后在它的外圍畫兩個扭扭曲曲的線框，如下圖，（其實只要兩個對象就能就能做混合效果，不過對象越多變化會越豐富，當然也更難控制）：
第二步：同時選中這三個圖形，然后在菜單欄的對象中選擇混合-建立，就得到了如下效果。
提示：我們還可以雙擊工具欄中的混合工具，在間距選項中點選“指定步數(shù)”選項來修改步數(shù)。
搞清楚了圓點虛線和混合工具后，前面所說的那張海報就水到渠成了，我們只需在把已經(jīng)畫好的輪廓圖形的描邊參數(shù)改成如下就好了。首先我們來設(shè)置最里面的圓圈的參數(shù)，虛線數(shù)值為0，間隙為5。
然后再來設(shè)置外圍兩個線框的參數(shù)，中間線框的間隙參數(shù)設(shè)為7，最外線框的間隙參數(shù)設(shè)為9，這么做是為了虛線的間隙從里往外變得越來越大。
調(diào)整好參數(shù)后就得到了如下效果，如果對輪廓的形狀不滿意，還可以用直接選擇工具，拖動外輪廓上的錨點和手柄來調(diào)節(jié)形狀。
調(diào)整后大致效果如下，中間部分變化比較小，外圍部分變化比較豐富。
調(diào)整好后把圖形復(fù)制到Ps中填充顏色，具體顏色大家可以自由發(fā)揮。
最后再把圖形周圍用蒙板擦一下，使其融進背景里，搭配一點文字就完成了，最終效果和原圖會有所差別，但方法就是這樣。
第二個我要分享的技巧是如何做出用圖形組成的球體效果，如下圖。
很多人可能會以為這個需要3Ｄ軟件才能完成，其實通過Ai就能很快做出來，操作方法如下。
第一步：排列一組圓點。
第二步：從窗口菜單欄中打開符號面板，選中排好的圓點，然后在符號面板的底部點擊新建符號圖標，于是我們就把這組圓點設(shè)置成了符號，創(chuàng)建這個符號是為了后面貼圖用。
第三步：用圖形工具畫一個圓，填充一個顏色，然后刪除最左邊的錨點，這樣我們就得到了一個沒有封閉的半圓。
第四步：選中圖形，在效果菜單欄中找到3Ｄ效果，選擇繞轉(zhuǎn)，然后我們就打開了3Ｄ繞轉(zhuǎn)選項的面板。
第五步：在3D面板中保留默認參數(shù)，然后勾選左下角的預(yù)覽，我們就可以看到剛剛創(chuàng)建的那個半圓已經(jīng)變成了一個球體。
第六步：點擊預(yù)覽旁邊的貼圖選項進入貼圖面板，然后在面板頂部的符號欄中選擇剛剛創(chuàng)建好的圓點符號。
第七步：點擊面板左下角的“縮放以合適”按鈕，再點擊右下角的“確定”，這時我們可以看到圓點已經(jīng)附在了球體表面。
第八步：回到“3Ｄ繞轉(zhuǎn)選項”面板后，把透視參數(shù)改到80左右，這時球體上圓點大小的對比就變得更強烈了。
然后我們可以把鼠標移到左上角的立方體處，拖動立方體以調(diào)整預(yù)覽圖的角度，完成這波操作后就有了如下效果。
通過創(chuàng)建不同的貼圖符號，我們可以做出很多類似的效果。
第九步：把球體圖形擴展后，取消群組、釋放剪切蒙板，我們就可以把附在球體表面的圓點貼圖單獨拿出來了。
同樣，其他的圖形也可以拿出來，這種形式我們也能在海報設(shè)計中常常看到，而想要得到前面提到的效果，我們還需要填充顏色，以及重新添加一個圓底。
第十步：畫一個與圖形同樣大小的圓，填充好漸變色（用漸變網(wǎng)格工具效果更佳）。圖形也可以填充一個類似的顏色，然后疊印在剛剛畫的圓上就可以了。
不同的貼圖和顏色搭配可以得到不同的效果。
總結(jié)
設(shè)計技巧雖然不是設(shè)計最本質(zhì)的東西，但它是可以使設(shè)計變得更好看、更新穎、更具視覺沖擊力的有效手段，并且它可以大大提高工作效率，所以也很值得我們學習和研究，希望這篇文章對你有用。
作者：蔥爺
ID:congyenanian