【UI教程】結合PS和AI繪製炫彩2.5D插畫

作者：由 UI設計SVIP 發表于攝影時間：2018-05-02

為了此次文章教程，利用下班在家空餘時間擼圖擼了兩個凌晨，原則只做原創精品設計文章，好案例配好文章，希望大家能喜歡，做設計行業文章教程最初目的就是能希望幫助到更多設計師小夥伴，很單純、很簡單完全免費奉獻上我一些能量，我不是設計大神也不是設計大佬，我只是有多年豐富的網際網路設計經驗，希望用我一些經驗能去幫助更多設計師，我開心我快樂傳遞正能量雖然平時白天工作都比較繁忙，也堅持下班回家座在電腦前擼圖擼到凌晨兩點，在做每一次教程的時候都會去做一張或多張的原創設計案例。關注公眾號liangyuansi1獲取最新學習UI資訊

圍繞案例去發散講設計技法、設計思路、設計流程、設計規範，長篇詳細講解。只是希望能幫助到需要的人，很歡迎大家轉載設計文章，但轉載時候希望平臺轉載文章時署名原作者及文章來源，這樣更好的保護原作者的知識版權。不為別的只為苦逼辛苦在夜深人靜的時候為大家帶來良心精品設計文章。好了言歸正傳，話不多說教程開始

先看看效果圖

2。5D在設計運用中一直比較熱門，無論是海報、H5 閃屏 banner 都會運用2。5D插畫風格。C4D、pc、AI都可以完成這樣的2。5D等距扁平插畫風用AI做的也不在少數，主要看自己的軟體操作習慣，哪個順手用哪個，最終達到效果就可以。有人說，現在的設計師不會C4D都不好意思說自己是設計師，說實話目前來說我還真不會C4D，但是，可但是，我會PS AI啊。所以幹就完了，由此就有了這樣的一個教程，利用PS。 AI兩個軟體的結合做扁平2。5D等距插畫風格。有人說幹什麼這麼麻煩用兩個，是不是在炫技，是不是炫技不重要，重要的是這個教程的確是良心教程，滿滿的乾貨。讓你瞭解到在AI裡應該怎麼做，PS怎麼去做，無論怎樣也好只要大家能清晰的瞭解這個作品從無到有的過程，如何思考的一些角度就可以了。在這個製作的過程中會涉及到幾個知識點，只要詳細的認真的去記住這幾個知識點，然後根據自己的一些想法和創意去做是沒問題的。具體知識點會在後面章節中介紹。在這個教程過程中主要還是讓大家瞭解一下設計思路、其次是技法。這樣都比較瞭解的前提下在進行創作會更輕鬆一些。

2。1幾何形體組合

在學素描前期都先從圓、正方形、長方形、圓錐、圓柱形幾何形體開始練習，其中一個目的就是讓瞭解物體的形體結構。作為基礎形在之後更復雜的繪畫創作中也會從基礎型圓、正方形、長方形……等關聯組合。同樣在生活中一些物體也是幾何形體關聯組合演變而來。

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

2。2造型空間能力

造型能力和空間能力也算是比較重要，造型能力至少能讓你圖形如何擺放佈局、讓圖形放置最適合的位置、從視覺效果來說不失平衡感、空間感可以讓你畫面更具有層級關係，層級更強烈，視覺效果也更強烈、空間感從大小、前後、遠近等表現。

2。3光影對比

整個的結構中，光影也尤其重要，首先要知道天光是從哪打過來的。然後根據光源去為每一個面的顏色深淺變化

同一個顏色下就可以運用顏色的明度深淺對比組合就行，光源弄好了看起來就比較舒服，而且光源統一

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

之後會有多個知識點，只要記住知識點自己在去設計應該會得心應手。

PS中操作方法

（PS）做2。5D的時候在PS裡一定要記住幾個引數水平縮放86。6% 、垂直斜切30°、旋轉-60°

根據這幾個引數來演示一下。首先建立一個正方形我這裡演示尺寸為160 160，（尺寸大小可以根據需求而定不做限制）然後填充一個顏色。選區正方形圖層，快捷鍵CTRL+T自由變換，然後水平縮放86。6% 、垂直斜切30 ° 、旋轉-60 ° 一個平面的正方形立即變成了等角上方效果。

作為（1）來說就是給垂直斜切30 ° 、水平縮放86。6%成為側面，要另一個側面可以-30 ° 也可以複製出一個（1）然後水平旋轉就可以得到（2）效果，到這裡三個面出來了，完全可以合成一個正經的2。5D等角上方效果。在PS中稍笨拙一點，先有面在立體。

AI中操作方法

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

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

那麼有人又會問順叔那在Ai裡一個等角立方體那我怎麼給各個面顏色，這個也很方便，選擇物件-擴充套件外觀，然後就會得到各個面。在AI中給顏色也可在拖拽到PS裡給顏色也可以，根據自己習慣而定，就是這麼隨意。

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

以一個區域性為例一個組合是有很多個圖形而組成。

以上講的如何製作2。5D想法、技巧都跟大家講解很清楚了，大家可以根據技巧去做創意組合，以下根據例項在鞏固一下知識點、因為整個設計太大，如果整個都講完會需要很長時間，所以就從一個區域性例項大致講解一下，希望能看的更明白一些。如果想要臨摹也可以根據我原創的進行拓展創意，顏色上可以吸顏色、造型上等角等距算是固定、更多就是組合和創意由大家發揮。好了既然上面把小房子拆分，那就按照上面的區域性部分給大家講解一下吧，如何製作。照顧到大家，所以演示在AI裡做基礎型，在PS裡進行佈局擺放處理。大家也可以不用這樣方法可以在AI裡直接進行也可，還是那句話怎麼習慣怎麼弄。

首先在PS中ctrl+n 建立寬800 高800 解析度72 顏色模式RGB顏色

點漸變-在漸變編輯器中選擇漸變顏色#a7cef3 #dac6f4 滑動藍色向右讓藍色稍微多一點，漸變在編輯器中設定完之後確定然後在畫面中從上往下角拖拽最終成為想要的漸變色，背景就這麼簡單完事

接著AI開啟，建立圖層，選擇圓角矩形，雙擊畫布空白處彈出圓角矩形設定框，寬度：450PX、高度：450px 、圓角：20PX點選確認，隨便填充一個顏色

AI中選擇效果-3D-凸出，彈出選項設定，然後選擇位置-等角-上方，X/Y/軸都不需要設定，需要設定的是凸出厚度，根據自己需要設定，值越大厚度越高，端點選擇預設即可。選擇確定得到一個等角2。5D底座。

做到這並未完成，AI裡選中圖形，選擇-擴充套件外觀，目的是可以讓這各個面都拆分出來，然後可以給予各個面顏色。

這特別注意，開始轉換軟體，把剛才的在AI裡拆分的各個面一個一個的拖拽到PS裡給予顏色值，圖形在AI裡也可以給予顏色，但為了讓大家更加了解所以 PS AI 協同進行，按照自己的習慣來，這個操作就比較麻煩了一步驟。拖拽到PS畫布中，之後給上面兩側面顏色，上面顏色#f1e9ec 兩側漸變色#af97d8 #d1bddc 漸變角度90

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

PS中給各個面顏色上面#f9f4d5 左面#f2c0a0 右面 #f7ddb2，複製一個上面的圖層，然後CTL+T自由變換、shitf+ait等比例縮放，填充顏色#fae7b3，複製出一個立方體，然後然後CTL+T自由變換、shitf+ait等比例縮放，到最適合區域，然後在複製一個立方體等比例縮放，一個比一個小的羅列，這房蓋上面基本完善，然後還有個冒光的光束，在PS中按照邊緣鋼筆工具勾選一個這的區域，然後給漸變即可。給畫面節增加效果，那麼點綴一些顆粒的東西上面部分完成。

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

在PS中給予三個面顏色、因有房蓋了所以三個面中的頂面就不要了，只要左右面即可給兩個面顏色，首先左面漸變#fd9383 #fdaf92色值漸變角度90度，右面漸變為#fdc4bb #feb294 色值漸變角度90度

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

牆體完成，感覺有點不通透，有點悶，所以按一個門讓建築空氣流通一下。這次門在PS裡進行，首先要給一個圓形矩形工具，半徑設定50，寬度50PX高130填充顏色#653d71，然後把下部分去掉，ctrl+t自由變換，只設置W：86。6 、V30度即可，然後得到一個側面，放置到房體適合的位置上，如果門大可以根據需要調整等比例大小，，為了透視畫三角形然後給個顏色，讓門更生動透視更準確。

有門那麼也應該有一個窗戶、窗戶是立體的所以在AI中進行比較方便，首先在AI裡建立一個正方形，然後效果-3D-凸出，凸出厚度5PT，位置-等角-右方，接著，物件-擴充套件外觀，給予顏色，#f09981 #fec7be 然後在複製一下單面給予顏色#edecf6，等比例縮小到最佳位置，

接下來就是製作臺階，臺階也是立體形成，所以在AI裡進行。首先在AI裡建立一個小一點的矩形，然後描邊、選擇工具點A點DELETE去掉，複製出一個連線，然後快捷鍵CTRL+D複製、想要幾個臺階就複製多少個，這裡為了演示就複製5層，全選圖層CTYL+J連線、接著物件-變換-傾斜彈出框設定傾斜角度-30、軸為垂直、角度90，複製出一個作為B點，繪製一個矩形頂蓋變形等軸角度。結合A B點角度、用鋼筆工具完成矩形延伸、然後複製擺放、臺階上面顏色#faede8 立側顏色為#fdaf92、同樣側面也是需要鋼筆工具來完成，這時候一個臺階製作完，把臺階拖拽到PS中擺放合適位置