UI設(shè)計(jì)師教你插畫小技巧

-首先你得清楚這個(gè)2.5D插畫應(yīng)用在哪里？好比引導(dǎo)頁(yè)、banner等等；今天就以引導(dǎo)頁(yè)來舉例吧。引導(dǎo)頁(yè)往往都是要把APP最主要的功能以圖形化的形式來展現(xiàn)給用戶，這時(shí)就可以根據(jù)引導(dǎo)頁(yè)的文案來對(duì)畫面進(jìn)行構(gòu)思了。

最直觀的就是把APP的界面直接套在一個(gè)手機(jī)殼里；為了讓畫面不失單調(diào)，可以把界面里重要的按鈕、數(shù)據(jù)信息等拆分出來也可以加一些漂浮的裝飾小元素好比云朵、方塊、金幣等等。舉兩個(gè)例子：

-不露最近做了一套生活類APP，其主要功能是選擇不同的任務(wù)去完成就可以獲得不等金額的紅包或其他獎(jiǎng)勵(lì)；我給第一頁(yè)想的文案是“接收任務(wù)，領(lǐng)取獎(jiǎng)勵(lì)”。文案定下來后可以先不用慌著在軟件上畫，首先可以在紙上畫出你所想到的一些元素，理解一下大致的空間關(guān)系：（奉獻(xiàn)一張我簡(jiǎn)陋的草圖，獻(xiàn)丑了…）

AI打形

既然已經(jīng)想好了畫面里放些啥，就先畫出平面的形狀，再利用3D功能打形。

開始打形之前先畫出三條線，它會(huì)防止你的3D圖形畫歪。如圖：

不難看出將原本的三根輔助線復(fù)制過后就變成了一個(gè)空間，那些面已經(jīng)用虛線框出來了。這樣每次需要對(duì)齊的時(shí)候只用拖動(dòng)這組輔助線就可以啦，老好用了~

如何打開3D功能這里就不再闡述了，不太清楚的可以打開文首的教程鏈接；這里就說說調(diào)旋轉(zhuǎn)角度的技巧。（以紅包元素為例）

1號(hào)邊比較容易對(duì)齊，所以在旋轉(zhuǎn)的時(shí)候可以先調(diào)整第三個(gè)旋轉(zhuǎn)角度值。第一、二個(gè)旋轉(zhuǎn)角度值最好是配合的調(diào)整才可能達(dá)到理想的效果。

如果不想調(diào)整角度的話可以直接把鼠標(biāo)放在紅色圈圈處，然后邊拖動(dòng)它邊觀察形狀的變化，基本的三條邊和輔助線平行對(duì)齊了，也是可以的，主要是看自己喜歡什么樣的方式啦~

ps細(xì)節(jié)處理

所有的3D形在AI里打好擴(kuò)展形狀后再拖到PS里處理細(xì)節(jié)，如果顏色和效果不是很復(fù)雜的話可以就在AI里上色。（注意：到PS里了還是要畫輔助線的哦。）

兩個(gè)側(cè)面要是有同樣的漂浮元素的話，可以將做好的那一個(gè)選中Ctrl+T—水平翻轉(zhuǎn)就可以啦。

像那些小人物的話，注意的就是想讓人朝哪邊就讓他的腳朝哪邊這樣就不會(huì)感覺畫人總是只有一個(gè)面了。（最近學(xué)插畫買的小人偶派上用場(chǎng)了！）

整體調(diào)整

最后Ctrl+T水平翻轉(zhuǎn)的圖形可能會(huì)有些邊沒有和參考線對(duì)齊，這時(shí)就要手動(dòng)調(diào)整了；也可以把整體的色相、亮度、飽和度調(diào)整一下，讓畫面看這更有吸引力。

最后獻(xiàn)上一組不露近幾天做的簡(jiǎn)陋的引導(dǎo)頁(yè)，沒有什么復(fù)雜的場(chǎng)景，只有幾個(gè)簡(jiǎn)單的小元素組成~

結(jié)束

因?yàn)榘l(fā)布了臨摹2.5D小插畫教程后有些同學(xué)在站酷下留言說不會(huì)調(diào)角度，其實(shí)我也不是很懂里面的那些專業(yè)原理，那些角度都是自己多試了幾次試出來的；上面提到的一些旋轉(zhuǎn)小技巧也只是個(gè)人的一個(gè)經(jīng)驗(yàn)分享，大家參考一下就可以，最主要的還是要多多動(dòng)手嘗試、練習(xí)才是硬道理啊。目前不露的整體構(gòu)圖還需多多加強(qiáng)…希望能和小伙伴們一起加油~
相關(guān)文章--《如今的產(chǎn)品經(jīng)理，為什么這么搶手》