插畫教程：如何利用ps+ai繪制出2.5D等距插畫風(fēng)

插畫作品的形式各式各樣，想要向人們能夠第一時間關(guān)注到作品，那么就要做出與眾不同的效果，今天就帶著大家一起來利用ps與ai做一個2.5d等距插畫風(fēng)的設(shè)計作品，希望大家會愛上這樣的一種插畫設(shè)計形式。

好了言歸正傳，話不多說教程開始

2.5D在設(shè)計運用中一直比較熱門，無論是海報、H5、閃屏、都會運用2.5D插畫風(fēng)格。C4D、pc、AI都可以完成這樣的2.5D等距扁平插畫風(fēng)用AI做的也不在少數(shù)，主要看自己的軟件操作習(xí)慣，哪個順手用哪個，最終達(dá)到效果就可以。有人說，現(xiàn)在的設(shè)計師不會C4D都不好意思說自己是設(shè)計師，說實話目前來說我還真不會C4D，但是，我會PS、AI啊。所以干就完了，由此就有了這樣的一個教程，利用PS. AI兩個軟件的結(jié)合做扁平2.5D等距插畫風(fēng)格。

有人說干什么這么麻煩用兩個，是不是在炫技，是不是炫技不重要，重要的是這個教程的確是良心教程，滿滿的干貨。讓你了解到在AI里應(yīng)該怎么做，PS怎么去做，無論怎樣也好只要大家能清晰的了解這個作品從無到有的過程，如何思考的一些角度就可以了。在這個制作的過程中會涉及到幾個知識點，只要詳細(xì)的認(rèn)真的去記住這幾個知識點，然后根據(jù)自己的一些想法和創(chuàng)意去做是沒問題的。具體知識點會在后面章節(jié)中介紹。在這個教程過程中主要還是讓大家了解一下設(shè)計思路、其次是技法。這樣都比較了解的前提下在進(jìn)行創(chuàng)作會更輕松一些。

2.1 幾何形體組合

在學(xué)素描前期都先從圓、正方形、長方形、圓錐、圓柱形幾何形體開始練習(xí),其中一個目的就是讓了解物體的形體結(jié)構(gòu)。作為基礎(chǔ)形在之后更復(fù)雜的繪畫創(chuàng)作中也會從基礎(chǔ)型圓、正方形、長方形……等關(guān)聯(lián)組合。同樣在生活中一些物體也是幾何形體關(guān)聯(lián)組合演變而來。

那么會有人問了，順叔你說素描幾何形體和2.5D作品有什么關(guān)聯(lián)嗎？這次當(dāng)然不是教大家如何去畫幾何形體和素描，而是告訴大家物體會有這幾個圖形組成，那么這次的2.5D當(dāng)中樓房（正方形、長方形、正方體組合）、樹木（圓錐體 三角形組合）、梯子（長方形、三角形正方形組合）、云（圓組合）也都會根據(jù)這幾個基礎(chǔ)圖形進(jìn)行整體框架，然后根據(jù)框架進(jìn)行細(xì)節(jié)填充處理。

同樣2.5D插畫和積木玩具也有相同之處，都是有各種幾何圖形而堆積出一個場景。

2.2 造型空間能力

造型能力和空間能力也算是比較重要，造型能力至少能讓你圖形如何擺放布局、讓圖形放置最適合的位置、從視覺效果來說不失平衡感、空間感可以讓你畫面更具有層級關(guān)系，層級更強(qiáng)烈，視覺效果也更強(qiáng)烈、空間感從大小、前后、遠(yuǎn)近等表現(xiàn)。

造型能力和空間能力也算是比較重要，造型能力至少能讓你圖形如何擺放布局、讓圖形放置最適合的位置、從視覺效果來說不失平衡感、空間感可以讓你畫面更具有層級關(guān)系，層級更強(qiáng)烈，視覺效果也更強(qiáng)烈、空間感從大小、前后、遠(yuǎn)近等表現(xiàn)。

2.3 光影對比

整個的結(jié)構(gòu)中，光影也尤其重要，首先要知道天光是從哪打過來的。然后根據(jù)光源去為每一個面的顏色深淺變化同一個顏色下就可以運用顏色的明度深淺對比組合就行，光源弄好了看起來就比較舒服，而且光源統(tǒng)一。

上述對設(shè)計上的一些理解和思路，那么以上是怎么想，那么下面這些就是怎么做，

之后會有多個知識點，只要記住知識點自己在去設(shè)計應(yīng)該會得心應(yīng)手。

PS中操作方法

（PS）做2.5D的時候在PS里一定要記住幾個參數(shù) 水平縮放86.6% 、垂直斜切30°、旋轉(zhuǎn)-60°

根據(jù)這幾個參數(shù)來演示一下。首先建立一個正方形，我這里演示尺寸為160×160，（尺寸大小可以根據(jù)需求而定不做限制）然后填充一個顏色。選區(qū)正方形圖層，快捷鍵CTRL＋T自由變換，然后 水平縮放86.6% 、 垂直斜切30 ° 、 旋轉(zhuǎn)-60 ° 一個平面的正方形立即變成了等角上方效果。

作為（1）來說就是給垂直斜切30° 、水平縮放86.6%成為側(cè)面，要另一個側(cè)面可以-30 ° 也可以復(fù)制出一個（1），然后水平旋轉(zhuǎn)就可以得到（2）效果，到這里三個面出來了，完全可以合成一個正經(jīng)的2.5D等角上方效果。在PS中稍笨拙一點，先有面在立體。

AI中操作方法

（AI）在AI中運用會更方便順手一些。首先也要建一個160×160的正方形然后效果-3D-凸出，選擇位置-等角-上方 這里只需根據(jù)自己需要調(diào)節(jié)凸出厚度就可以或者是端點調(diào)節(jié)。這里給的50PT厚度。最終效果如下：

同樣操作，如果想要一個立體的在左側(cè)那么就選擇等角-左方，想要右側(cè)那么選擇等角-右方，是不是在AI中很容易得到等距等角2.5D效果根據(jù)想要的圖形可以組合各種想要的圖形，達(dá)到最終效果。

那么有人又會問順叔那在Ai里一個等角立方體那我怎么給各個面顏色，這個也很方便，選擇對象-擴(kuò)展外觀，然后就會得到各個面。在AI中給顏色也可在拖拽到PS里給顏色也可以，根據(jù)自己習(xí)慣而定，就是這么隨意。

講到這呢知識點基本是講完了，是不是覺得很簡單很輕松，操作和記住參數(shù)是很簡單。但是主要還是創(chuàng)意，如何把各個正方體、圓柱體、三角體組成一個創(chuàng)意效果的確是需要點時間去考慮。為了這次的教程順叔通宵兩個晚上，從想法-創(chuàng)意-到手繪稿-到軟件實現(xiàn)這樣的過程。展示一下在做這個2.5D前期一些想法手稿，基本想怎么表現(xiàn)都要在本子上修修改改、最終覺得滿意了在進(jìn)行軟件實現(xiàn)，以下為順叔手稿。

以一個局部為例一個組合是有很多個圖形而組成。

以上講的如何制作2.5D想法、技巧都跟大家講解很清楚了，大家可以根據(jù)技巧去做創(chuàng)意組合，以下根據(jù)實例在鞏固一下知識點、因為整個設(shè)計太大，如果整個都講完會需要很長時間，所以就從一個局部實例大致講解一下，希望能看的更明白一些。如果想要臨摹也可以根據(jù)我原創(chuàng)的進(jìn)行拓展創(chuàng)意，顏色上可以吸顏色、造型上等角等距算是固定、更多就是組合和創(chuàng)意由大家發(fā)揮。好了既然上面把小房子拆分， 那就按照上面的局部部分給大家講解一下吧，如何制作。照顧到大家，所以演示在AI里做基礎(chǔ)型，在PS里進(jìn)行布局?jǐn)[放處理。大家也可以不用這樣方法 可以在AI里直接進(jìn)行也可，還是那句話怎么習(xí)慣怎么弄。

首先在PS中ctrl＋n 建立寬800、高800、分辨率72、顏色模式RGB顏色。

點漸變-在漸變編輯器中選擇漸變顏色#、# 滑動藍(lán)色向右讓藍(lán)色稍微多一點，漸變在編輯器中設(shè)定完之后確定然后在畫面中從上往下角拖拽最終成為想要的漸變色，背景就這么簡單完事。

接著AI打開，建立圖層，選擇圓角矩形，雙擊畫布空白處彈出圓角矩形設(shè)置框，寬度：、 高度： 、圓角：20PX點擊確認(rèn)，隨便填充一個顏色。

AI中選擇效果-3D-凸出，彈出選項設(shè)置，然后選擇位置-等角-上方，X/Y/軸都不需要設(shè)置，需要設(shè)置的是凸出厚度，根據(jù)自己需要設(shè)置，值越大厚度越高，端點選擇默認(rèn)即可。選擇確定得到一個等角2.5D底座。

做到這并未完成，AI里選中圖形，選擇-擴(kuò)展外觀，目的是可以讓這各個面都拆分出來，然后可以給予各個面顏色。

這特別注意，開始轉(zhuǎn)換軟件，把剛才的在AI里拆分的各個面一個一個的拖拽到PS里給予顏色值，圖形在AI里也可以給予顏色，但為了讓大家更加了解所以 PS AI 協(xié)同進(jìn)行，按照自己的習(xí)慣來，這個操作就比較麻煩了一步驟。

拖拽到PS畫布中，之后給上面兩側(cè)面顏色，上面顏色# 兩側(cè)漸變色#、#、漸變角度90。

地基已經(jīng)打好啦，開始建房子了，上面說了2.5D在AI里會簡單一些，所以我的分配協(xié)同就是AI里做基礎(chǔ)型，PS里做色彩。這樣結(jié)合最終會在PS里完成。所以我們還回到AI里雙擊畫布彈出圓角矩形設(shè)置框，寬度328 、高度190、圓角半徑0確定，選取長方形在效果-3D-凸出在選項中選擇位置-等角-上方，X/Y/軸都不需要設(shè)置，然后設(shè)置凸出厚度60PT。同樣在AI里選擇-擴(kuò)展外觀，各個面拆分。然后各個面拖拽到PS中，在PS中給各個面顏色。

PS中給各個面顏色上面#、左面#、右面 #，復(fù)制一個上面的圖層，然后CTL＋T自由變換、＋ait等比例縮放，填充顏色#，復(fù)制出一個立方體，然后然后CTL＋T自由變換、＋ait等比例縮放，到最適合區(qū)域，然后在復(fù)制一個立方體等比例縮放，一個比一個小的羅列，這房蓋上面基本完善，然后還有個冒光的光束，在PS中按照邊緣鋼筆工具勾選一個這的區(qū)域，然后給漸變即可。給畫面節(jié)增加效果，那么點綴一些顆粒的東西上面部分完成。

房蓋部分完成，那開始制作房子下部分，還記得在AI中的一個寬度328 、高度190、圓角半徑0確定 矩形嗎，做下部分還需要回到AI中，同樣給予矩形效果-3D-凸出，彈出選項設(shè)置，別的都不變，只是凸出厚度變成值。然后選擇-擴(kuò)展外觀，拆分各個面。拖拽到PS中給予顏色，大家發(fā)現(xiàn)一個問題沒，只要做出來一個剩下的根據(jù)套路就可以完成剩下部分的元素。可能數(shù)值稍微有些變化。

在PS中給予三個面顏色、因有房蓋了所以三個面中的頂面就不要了，只要左右面即可給兩個面顏色,首先左面漸變# #色值漸變角度90度，右面漸變?yōu)?、# 色值漸變角度90度。

為墻體做一個腰線，會讓墻體細(xì)節(jié)更加豐富飽滿。在AI中，找到之前墻體的上面部分，然后給予描邊粗細(xì)為3，背景圖關(guān)閉，選擇工具點一下A點然后去掉，然后給描邊一個白色顏色值，拖拽到PS中放在墻體合適位置。

墻體完成，感覺有點不通透，有點悶，所以按一個門讓建筑空氣流通一下。這次門在PS里進(jìn)行，首先要給一個圓形矩形工具，半徑設(shè)置50，寬度50PX高130填充顏色#,然后把下部分去掉，ctrl＋t自由變換，只設(shè)置W：86.6 、V30度即可，然后得到一個側(cè)面，放置到房體適合的位置上，如果門大可以根據(jù)需要調(diào)整等比例大小,，為了透視畫三角形然后給個顏色，讓門更生動透視更準(zhǔn)確。

有門那么也應(yīng)該有一個窗戶、窗戶是立體的所以在AI中進(jìn)行比較方便，首先在AI里建立一個正方形，然后效果-3D-凸出，凸出厚度5PT,位置-等角-右方，接著，對象-擴(kuò)展外觀，給予顏色，#、#。然后在復(fù)制一下單面給予顏色#，等比例縮小到最佳位置。

接下來就是制作臺階，臺階也是立體形成，所以在AI里進(jìn)行。首先在AI里建立一個小一點的矩形，然后描邊、選擇工具點A點去掉，復(fù)制出一個連接，然后快捷鍵CTRL＋D復(fù)制、想要幾個臺階就復(fù)制多少個，這里為了演示就復(fù)制5層，全選圖層CTYL＋J連接、接著對象-變換-傾斜彈出框設(shè)定傾斜角度-30、軸為垂直、角度90，復(fù)制出一個作為B點，繪制一個矩形頂蓋變形等軸角度。結(jié)合A、B點角度、用鋼筆工具完成矩形延伸、然后復(fù)制擺放、臺階上面顏色# 。立側(cè)顏色為#、同樣側(cè)面也是需要鋼筆工具來完成，這時候一個臺階制作完，把臺階拖拽到PS中擺放合適位置

在AI中可用鋼筆工具繪制一個遮陽棚的篷布、用鋼筆工具繪制棚上裝飾線最終把線顏色改成白色，鋼筆工具繪制遮陽棚側(cè)面然后三者合成最后形成遮陽棚、拖拽到PS中和建筑結(jié)合放置最合適的位置完成。

做到這整個建筑的技巧和思路基本就完事了剩下的就是在PS中創(chuàng)意結(jié)合，再有建筑大同小異，方式方法也差不多是這樣的。只不過就是大小數(shù)值會有變化然后根據(jù)整個畫面在平臺創(chuàng)意的擺放最終達(dá)到效果。如下是重新局部設(shè)計擺放樣式、然后把之前的人物、樓房、裝飾拖拽過來又成為一幅新的2.5D效果圖

局部重新制作（教程演示）