這次分享一個2.5D插畫的教程，主題是關(guān)于咱們學UI網(wǎng)的。希望在看了這篇文章之后，各位無論工作中還是學習中都可以去嘗試些新的東西。不被吐糟設(shè)計沒有新意巴拉巴拉~

還有，希望各位同學在臨摹的基礎(chǔ)之上可以有更多的創(chuàng)意，因為一旦有了創(chuàng)意并被認可，你會記憶猶新。甚至邁入一個新的階段。

完成這幅插畫需要掌握的工具有PS和AI即可，工具就是那些，PS中的基本的一些工具操作AI中的3D工具。還是要靠腦子想畫面然后用工具去表現(xiàn)。

1. 這種插畫就像堆積木一樣，我們最先搭建最大的主體部分。因為插畫顏色特性在搭建之前，先新建一個畫板，尺寸1920像素寬，高度800像素左右即可，分辨率72。數(shù)值與效果如下圖：

 加上主體之后，如下圖

1.1 下面將詳細講解主體部分的實現(xiàn)手段，(因繪制過程中AI中的3D文件丟失，故接下來的講解具體數(shù)值不準確，僅演示，數(shù)值可自定義)除主體外其它個例實現(xiàn)手段基本一致。

打開AI-新建空白畫板，使用圓角矩形工具繪制圓角矩形。

 

 1.2 在AI中使用直接選擇工具（快捷鍵A）選中錨點，分批轉(zhuǎn)換為直角，點擊左上角轉(zhuǎn)換，如圖：

 

 

1.3 選擇工具選中對象，執(zhí)行效果-3D-凸出和斜角，如圖：

 

1.4 選擇工具選中對象，執(zhí)行對象-擴展外觀，并完全取消編組（可能需要執(zhí)行多次）。接下來Ctrl+C復制至PS中Ctrl+V粘貼為形狀圖層，可編輯，不必在意顏色。如下圖：

 

 1.5 使用快捷鍵A，路徑選擇工具可選中單個面的所有錨點，選中之后使用快捷鍵Ctrl+Shift+J可提取單個面至單獨圖層(多出來的背面看不到的面也可刪掉)，這樣就實現(xiàn)了可單個面上色。顏色還需要自己把握，自己發(fā)揮吧~

如下圖使用漸變填充后的基座，關(guān)于如何將圖層另一邊進行漸漸隱溶于背景相信有同學會有疑問。我習慣使用蒙版來進行操作，將圖層或者組加上圖層蒙版，選中蒙版，按快捷鍵G漸變工具調(diào)節(jié)至黑白線性漸變，然后在畫面中主體圖層拖動即可實現(xiàn)一端透明。后面部件大量使用，如圖：

 

1.6 繼續(xù)細化主體基座，復制一層主體頂蓋并置于圖層面板頂層，適當往上移動，這時會有兩個頂蓋。直接使用鋼筆工具勾畫形狀，剪切蒙版于下層頂蓋，下層頂蓋不需要賦予漸變，繪制三個形狀分別賦予不同顏色，使用顏色區(qū)分開各個角度不同的受光，豐富色彩，高光部分為底層頂蓋本身顏色。

 

 1.7 繼續(xù)往下走嘍~看到紫色的形狀了么~這個形狀完全可以使用頂蓋復制改下顏色就可以啦~無難點，稍微講究點的是顏色要盡量調(diào)到位。

 

1.8 這一步需要完成的是為紫色盒子加上幾個爪子~并在主體上挖幾個孔~無難點，下面放大圖來參考?？梢灾苯邮褂娩摴P繪制，不必麻煩。使用輔助線輔助畫，每個夾角60°如圖：

 

1.9 這一步需要完成的是為主體通上道路以及主體周圍的城市裝飾。城市的基本形態(tài)繪制，有把握可以直接使用鋼筆工具繪制各個面加上漸變即可，也可以重復使用AI中的3D工具進行準確繪制。

道路的繪制也是很簡單，略有難度的是顏色的把握，方法在上面講主體的時候也講過了，這一步最需要進行多次的嘗試，達到更好的效果。

 

這一步繪制完成之后大體塊的繪制完成了，已經(jīng)完成了一大半了。加油~歇歇眼~接下來豐富場景細節(jié)。

 

2.1 這一步任務(wù)是細化場景，讓場景看起來更加豐富。在這一步也可以發(fā)揮自己的腦洞，加什么都可以嘍~我在這里加入了，學UI網(wǎng)的logo、五周年紀念、對話氣泡、流星、梯子。

①其中學UI網(wǎng)的logo需要用鋼筆工具摳出來在AI中執(zhí)行3D，在PS中調(diào)整顏色即可

②對話氣泡需要將形狀繪制出來AI中執(zhí)行3D（轉(zhuǎn)化為3D時如果不是一個圖層記得打組），如果覺得不好看或者角度不對嘗試水平翻轉(zhuǎn)一下，說不行會有意想不到的結(jié)果呢、

③五周年的數(shù)字可以找一個好看的字體同樣在AI中擴展外觀后進行3D轉(zhuǎn)換、梯子直接就在PS中繪制即可,這個過程可能有些繁瑣，同樣也是最需要細心的地方。如下圖示意：

 

2.2 仍然是細化、豐富加入你喜歡用的軟件吧~這一步需要注意的是近的亮些遠的暗些，實現(xiàn)方法老一套，如果不會自己再仔細揣摩揣摩~實在不會可以在UI作業(yè)網(wǎng)中作業(yè)上找到我給我留言。

 

2.3 加入各種各樣的小人，讓整個場景動起來~出來排隊樓~

 

2.4 最后一步！主角出場，UI作業(yè)網(wǎng)。像是瀏覽器頁面一樣承載著UI作業(yè)網(wǎng)頁面，體塊按照統(tǒng)一的透視角度來，就像堆積木一樣~字體同樣執(zhí)行對象-擴展外觀-效果-3D即可，注意這里加的光芒。在大背景細節(jié)上加上星星，左右的兩個紫色的圓圈下面放出細節(jié)圖。如圖：

 

到這一步就完成了，可能有的同學覺得后面太快了，每一步都應(yīng)該像講主體那樣細致，我覺得那樣就沒有什么意義了，何況所有的知識點基本在主體的步驟時都已經(jīng)涉及到了?？傆行〇|西需要自己想，這樣才有意義，必須去動腦動手實踐的才更有價值。

歡迎各位到UI作業(yè)網(wǎng)玩，我們盡自己最大的努力給大家最好的建議，共同成長！

喜歡記得點贊哦~~~蟹蟹