2020-9-8 資深UI設(shè)計者
首先看看我們的素材：
當(dāng)拿到一張原始素材的時候！
怎么辦？該怎么入手？怎么找方向？
來吧！
先來看看成稿：
最終設(shè)計成果還可以，那么是通過怎樣的設(shè)計手法達(dá)到這樣的效果呢？
下面我就來分享一下我的作圖思路；
1.需求的梳理和信息收集：
理解核心需求，為設(shè)計方向做好前期準(zhǔn)備
Slogan：傳武（作品名） 副文案：幽府之力，逆轉(zhuǎn)生死
我們漫畫類的作品眾多，內(nèi)容風(fēng)格繁雜，所以拿到需求之后,首先就是要對作品進(jìn)行“調(diào)查”。通過對漫畫作品的閱讀，理解內(nèi)容、故事、繪畫風(fēng)格來定性設(shè)計的方向。這樣才能在設(shè)計過程中準(zhǔn)確把握住作品調(diào)性，才能設(shè)計出最貼合作品風(fēng)格內(nèi)容的banner，才能把我們作品精髓的內(nèi)容傳遞給用戶。
比如上面這部作品，SLOGAN“傳武”是我們要著重設(shè)計展示的。而副標(biāo)題“幽府之力，逆轉(zhuǎn)生死”也很重要，往往傳達(dá)出了作品的賣點(diǎn)和調(diào)性。
再看看我們拿到的素材，一張單人的簡單素材，看起來很單調(diào)，似乎沒有可切入的地方。這個時候就體現(xiàn)出為什么要先對作品進(jìn)行“調(diào)查”的重要性了！
2. 確定設(shè)計方向：
明確設(shè)計方向，精準(zhǔn)展現(xiàn)作品調(diào)性
通過閱讀，我們了解到這部作品是一部熱血，古風(fēng)，玄幻作品，還有大致的故事內(nèi)容，再結(jié)合我們的副標(biāo)題“幽府之力，逆轉(zhuǎn)生死”。
腦子里就已經(jīng)開始有畫面了，“幽府”大概表達(dá)了一個場景，而“力量”和“逆轉(zhuǎn)生死”又傳達(dá)出了一種氣勢磅礴的場面。這就為我們設(shè)計的方向奠定了一個準(zhǔn)確的方向。
首先就把我們的素材和文案拉進(jìn)畫框里，進(jìn)行一個大致的排版找找感覺。第一個左右排版就太常規(guī)了，在場面和氣勢上有些弱。第二個添加了漫畫框，想切入一些故事內(nèi)容一起展示。但又有一些強(qiáng)調(diào)漫畫框的存在了，磅礴的場景沒有展示出來。但注意右邊的部分，把主標(biāo)題排在人物的兩邊似乎是一個不錯的選擇！我們就從這里入手。
重新嘗試了一下，發(fā)現(xiàn)這樣布局好像就是我們想要的感覺哈！那既然確定了框架，我們接下來就按照這個方向繼續(xù)強(qiáng)化出“氣勢”“力量”的感覺。
我們以人物為中心，想象畫面里有力量從人物背后向外“迸發(fā)”所以我們的字體可以設(shè)計得有一些趨勢在里邊，也是以一個圓弧為中心向外生長。以光從人物背面照射出來大逆光的視覺，營造一種“力量”迸發(fā)的感覺。
3. 顏色的選擇：
跟隨之前確定的設(shè)計方向，提煉選色搭配。
我的方法一般是先從素材本身出發(fā)，根據(jù)想要達(dá)成的視覺風(fēng)格來延伸出想要的配色。這樣得到的顏色更整體，人物素材能更好的融入背景氛圍中，也方便后期調(diào)整。觀察的素材，發(fā)現(xiàn)他的顏色都比較灰，缺乏對比，就會顯得很“平”，難以營造出我們想要的感覺。所以從人物素材本身的顏色出發(fā)，提取同類色和提高飽和度。結(jié)合考慮到有利于運(yùn)營推廣的視覺需要“吸睛”。得出了后面一組對比更強(qiáng)烈的顏色。
4. 有主次地進(jìn)行深入刻畫：
畫面中最主要的肯定是我們的SLOGAN和人物角色，是我們要重點(diǎn)刻畫的對象。剩下的副標(biāo)題、背景氛圍次之。不僅是要在排版上做區(qū)分，在視覺感受上也要做出差異化。這樣才能有遠(yuǎn)近虛實(shí)的感覺，增加空間感。
我們希望畫面具有一定的質(zhì)感，增加其沖擊力。所以我們在刻畫背景的時候可以選擇一些漫畫里比較好的場景，或扉頁背景素材來做底圖。再疊加上一些紋理材質(zhì)，再一層一層地來給背景打光，用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達(dá)到我們想要的效果。
小技巧1：相同光源的照射，傳達(dá)到不同的物體上時，它的視覺表現(xiàn)時不同的。并不是光源時什么顏色，照射的地方就會是什么顏色。
我們來對比一下兩種顏色的實(shí)際效果，可以說是很直觀了！
小技巧2：為了使素材更完美地融入到背景中，我們可以后期人為地給素材增加一圈高光/輪廓光。這樣使畫面更融洽的同時，也能讓我們的人物變得立體起來！。
再來對比下沒加輪廓光的感覺：
真的是少了些味道和細(xì)節(jié)哈哈，其實(shí)在很多時候我們都可以對我們的素材進(jìn)行二次加工讓其提升一定的品質(zhì)，配合畫面以達(dá)到更好的視覺效果。
5. SLOGAN的設(shè)計：
主文案在我們草圖的基礎(chǔ)上，結(jié)合整體畫面的趨勢進(jìn)行細(xì)化。（增加毛筆筆觸，和優(yōu)化筆畫）。
這里主要分了三層進(jìn)行處理顏色層(文字層)：主要給一個基礎(chǔ)顏色；
材質(zhì)層：因為這兩個字的占比比較大，所以可以增加一些紋理細(xì)節(jié)讓畫面更豐富耐看；
厚度層：讓后面的光源，在我們的字上形成一圈高光，可以突出我們的文字。
增加一些光暈效果，再放上做好的SLOGAN看看效果，好像還不錯。
有些同學(xué)可能會疑惑這里為什么字體要做一個厚度層，我們也上一下對比圖先看下效果：
可以看少了一些些質(zhì)感和重量，在輕量的風(fēng)格里ok，但是在我們當(dāng)前的畫面里就差了些感覺，所以才做了厚度層來強(qiáng)調(diào)光線照射過來的視覺增強(qiáng)畫面沖擊力。
之后主要是做一些符合我們畫面氛圍的漂浮元素，豐富畫面。有一定手繪功底的話就再好不過了！
完成，到這一步差不多達(dá)成了我們想要實(shí)現(xiàn)的效果，“氣勢”和“力量”的感覺在這么“樸實(shí)無華”的素材身上也基本表現(xiàn)到位了。還是比較滿意的，差不多可以提審交稿了！
最后在觀察觀察整體的畫面，審視一遍,查缺補(bǔ)漏。
發(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)性，達(dá)到與畫面相映成輝的效果；
4）細(xì)節(jié)把控：完成之后再回過頭來審視整體畫面，查漏補(bǔ)缺力求做到最好！
文章來源：UI中國 作者：騰訊動漫TCD
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com
