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.miumiuwan.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.miumiuwan.com