本期帶來(lái)的是2.5D插畫的小教程教程,，2.5D插畫設(shè)計(jì)風(fēng)格,，已經(jīng)越來(lái)越多的出現(xiàn)我們的UI設(shè)計(jì)中，H5動(dòng)畫,、APP閃屏 ,、廣告banner、ICON等等,，那我們來(lái)看看2.5D到底是什么樣的風(fēng)格,。

好了，看到這里,，不知道有木有小心動(dòng),，畫之前還是來(lái)了解一下, 2.5D插畫風(fēng)格特點(diǎn),。

2.5D插畫風(fēng)格特點(diǎn)

透視：和傳統(tǒng)美術(shù)中的近大遠(yuǎn)小的透視原理不同，2.5D的透視是同一方向的兩條線是平行,、永不相交的,；常見(jiàn)的2.5D圖形，以透視的正方形為例,，其底邊與視平線的夾角是30度,。

色彩：色彩特點(diǎn)是明快,、色彩豐富

想畫好2.5D插畫也不難,，學(xué)好我這個(gè)方法，加上勤動(dòng)手就可以~好了,，閑話不多說(shuō),！

本次教程最終效果圖：

為了方便教程,，設(shè)計(jì)稿略過(guò)了草圖,，為了方便大家學(xué)習(xí)，在Illustrator 中做好了設(shè)計(jì)圖,，現(xiàn)在只要二維畫面轉(zhuǎn)2.5D即可,，設(shè)計(jì)稿如下：

使用工具和方法

使用工具：Illustrator

方法：繪制2.5網(wǎng)格做參考線配合使用 效果- 3D - 凸出和斜角

畫之前了,，我們需要打開(kāi)Illustrator,，做兩個(gè)設(shè)置，在Illustrator里,，將 - 視圖菜單欄里,，勾選 - 智能參考線，確保關(guān)閉- 對(duì)齊點(diǎn) ,，如下圖：

設(shè)置完，接下來(lái)就要繪制2.5D的網(wǎng)格參考線了,，步驟如下：

Step1：通過(guò)鋼筆工具，在繪制好的網(wǎng)格上,，勾出游戲機(jī)的基礎(chǔ)型,，勾勒形狀要對(duì)準(zhǔn)參考線，將游戲機(jī)身基本型繪制出,，并上色,。

Step2：繪制屏幕,，打開(kāi) -效果 -3D -凸出和斜角,，角度分別是：45°,、-35°、30°,，勾選預(yù)覽,，如下：

Step3：繪制游戲方向鍵,，角度設(shè)置同上個(gè)步驟,，勾選凸出厚度8pt，接下來(lái),，在菜單欄選擇：對(duì)象-擴(kuò)展外觀,，右鍵取消編組,，得到相應(yīng)的形狀,，需要對(duì)相應(yīng)形狀進(jìn)行聯(lián)集合并，由于生成3D后,，形狀顏色會(huì)變暗,，所以需要重新上色，效果如圖：

Step4：剩余的部件,，可依次使用該方法調(diào)整，給出按鍵必要的厚度,調(diào)整顏色,，組合起來(lái)：

游戲機(jī)組合完效果：

Step5:文字部分依舊使用相同方法,，,，角度分別是：45°、-35°,、30°,，給出凸出厚度，調(diào)整顏色：

Step6：完善其他的裝飾物,，組合畫面：

最后加上一些陰影關(guān)系,，讓畫面更立體，加上一些后期文字,，就大工告成啦,！

當(dāng)然最后效果圖,，還是以最終畫面的呈現(xiàn)效果來(lái)適當(dāng)修改優(yōu)化的,，最后呈現(xiàn)：

本期小教程就到這里了,，希望大家喜歡,。