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