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