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

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

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

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

AI打形

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

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

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

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

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

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

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

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

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

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

整體調(diào)整

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

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

結(jié)束

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