為了此次文章教程，利用下班在家空余時(shí)間擼圖擼了兩個(gè)凌晨，原則只做原創(chuàng)精品設(shè)計(jì)文章光戈，好案例配好文章，希望大家能喜歡遂赠，做設(shè)計(jì)行業(yè)文章教程最初目的就是能希望幫助到更多設(shè)計(jì)師小伙伴久妆，很單純、很簡(jiǎn)單 完全免費(fèi)奉獻(xiàn)上我一些能量跷睦，我不是設(shè)計(jì)大神也不是設(shè)計(jì)大佬筷弦，我只是有多年豐富的互聯(lián)網(wǎng)設(shè)計(jì)經(jīng)驗(yàn)，希望用我一些經(jīng)驗(yàn)?zāi)苋椭嘣O(shè)計(jì)師抑诸，我開心 我快樂 傳遞正能量 雖然平時(shí)白天工作都比較繁忙烂琴，也堅(jiān)持下班回家座在電腦前擼圖擼到凌晨?jī)牲c(diǎn)，在做每一次教程的時(shí)候都會(huì)去做一張或多張的原創(chuàng)設(shè)計(jì)案例蜕乡。關(guān)注公眾號(hào)liangyuansi1獲取最新學(xué)習(xí)UI資訊

圍繞案例去發(fā)散講設(shè)計(jì)技法奸绷、設(shè)計(jì)思路、設(shè)計(jì)流程层玲、設(shè)計(jì)規(guī)范号醉，長(zhǎng)篇詳細(xì)講解绒瘦。只是希望能幫助到需要的人，很歡迎大家轉(zhuǎn)載設(shè)計(jì)文章扣癣，但轉(zhuǎn)載時(shí)候希望平臺(tái)轉(zhuǎn)載文章時(shí)署名原作者 及文章來源，這樣更好的保護(hù)原作者的知識(shí)版權(quán)憨降。不為別的 只為苦逼辛苦在夜深人靜的時(shí)候?yàn)榇蠹規(guī)砹夹木吩O(shè)計(jì)文章父虑。好了言歸正傳，話不多說教程開始

關(guān)注公眾號(hào)liangyuansi1獲取最新學(xué)習(xí)UI資訊

先看看效果圖

2.5D在設(shè)計(jì)運(yùn)用中一直比較熱門授药，無論是海報(bào)士嚎、H5 閃屏 banner 都會(huì)運(yùn)用2.5D插畫風(fēng)格。C4D悔叽、pc莱衩、AI都可以完成這樣的2.5D等距扁平插畫風(fēng)用AI做的也不在少數(shù)，主要看自己的軟件操作習(xí)慣娇澎，哪個(gè)順手用哪個(gè)笨蚁，最終達(dá)到效果就可以。有人說趟庄，現(xiàn)在的設(shè)計(jì)師不會(huì)C4D都不好意思說自己是設(shè)計(jì)師括细，說實(shí)話目前來說我還真不會(huì)C4D，但是戚啥，可但是奋单，我會(huì)PS AI啊。所以干就完了猫十，由此就有了這樣的一個(gè)教程览濒，利用PS. AI兩個(gè)軟件的結(jié)合做扁平2.5D等距插畫風(fēng)格。有人說干什么這么麻煩用兩個(gè)拖云，是不是在炫技贷笛，是不是炫技不重要，重要的是這個(gè)教程的確是良心教程江兢，滿滿的干貨昨忆。讓你了解到在AI里應(yīng)該怎么做，PS怎么去做杉允，無論怎樣也好只要大家能清晰的了解這個(gè)作品從無到有的過程邑贴，如何思考的一些角度就可以了。在這個(gè)制作的過程中會(huì)涉及到幾個(gè)知識(shí)點(diǎn)叔磷，只要詳細(xì)的認(rèn)真的去記住這幾個(gè)知識(shí)點(diǎn)拢驾，然后根據(jù)自己的一些想法和創(chuàng)意去做是沒問題的。具體知識(shí)點(diǎn)會(huì)在后面章節(jié)中介紹改基。在這個(gè)教程過程中主要還是讓大家了解一下設(shè)計(jì)思路繁疤、其次是技法。這樣都比較了解的前提下在進(jìn)行創(chuàng)作會(huì)更輕松一些。

2.1幾何形體組合

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

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

同樣2.5D插畫和積木玩具也有相同之處端仰，都是有各種幾何圖形而堆積出一個(gè)場(chǎng)景

2.2造型空間能力

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

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

2.3光影對(duì)比

整個(gè)的結(jié)構(gòu)中，光影也尤其重要碱茁，首先要知道天光是從哪打過來的裸卫。然后根據(jù)光源去為每一個(gè)面的顏色深淺變化

同一個(gè)顏色下就可以運(yùn)用顏色的明度深淺對(duì)比組合就行，光源弄好了看起來就比較舒服纽竣，而且光源統(tǒng)一

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

之后會(huì)有多個(gè)知識(shí)點(diǎn)，只要記住知識(shí)點(diǎn)自己在去設(shè)計(jì)應(yīng)該會(huì)得心應(yīng)手调炬。

PS中操作方法

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

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

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

AI中操作方法

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

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

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

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

以一個(gè)局部為例一個(gè)組合是有很多個(gè)圖形而組成外盯。

以上講的如何制作2.5D想法、技巧都跟大家講解很清楚了饱苟，大家可以根據(jù)技巧去做創(chuàng)意組合，以下根據(jù)實(shí)例在鞏固一下知識(shí)點(diǎn)狼渊、因?yàn)檎麄€(gè)設(shè)計(jì)太大箱熬，如果整個(gè)都講完會(huì)需要很長(zhǎng)時(shí)間，所以就從一個(gè)局部實(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顏色

點(diǎn)漸變-在漸變編輯器中選擇漸變顏色#a7cef3 #dac6f4 滑動(dòng)藍(lán)色向右讓藍(lán)色稍微多一點(diǎn)训挡，漸變?cè)诰庉嬈髦性O(shè)定完之后確定然后在畫面中從上往下角拖拽最終成為想要的漸變色，背景就這么簡(jiǎn)單完事

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

AI中選擇效果-3D-凸出，彈出選項(xiàng)設(shè)置籽暇，然后選擇位置-等角-上方温治，X/Y/軸都不需要設(shè)置，需要設(shè)置的是凸出厚度熬荆，根據(jù)自己需要設(shè)置卤恳，值越大厚度越高突琳，端點(diǎn)選擇默認(rèn)即可拆融。選擇確定得到一個(gè)等角2.5D底座镜豹。

做到這并未完成趟脂，AI里選中圖形昔期，選擇-擴(kuò)展外觀镇眷，目的是可以讓這各個(gè)面都拆分出來欠动，然后可以給予各個(gè)面顏色具伍。

這特別注意人芽，開始轉(zhuǎn)換軟件萤厅，把剛才的在AI里拆分的各個(gè)面一個(gè)一個(gè)的拖拽到PS里給予顏色值惕味，圖形在AI里也可以給予顏色名挥，但為了讓大家更加了解所以 PS AI 協(xié)同進(jìn)行禀倔，按照自己的習(xí)慣來救湖，這個(gè)操作就比較麻煩了一步驟鞋既。拖拽到PS畫布中涛救，之后給上面兩側(cè)面顏色检吆，上面顏色#f1e9ec 兩側(cè)漸變色#af97d8 #d1bddc 漸變角度90

地基已經(jīng)打好啦臂寝，開始建房子了，上面說了2.5D在AI里會(huì)簡(jiǎn)單一些败徊，所以我的分配協(xié)同就是AI里做基礎(chǔ)型皱蹦，PS里做色彩沪哺。這樣結(jié)合最終會(huì)在PS里完成辜妓。所以我們還回到AI里雙擊畫布彈出圓角矩形設(shè)置框籍滴，寬度328 孽惰、高度190灰瞻、圓角半徑0確定，選取長(zhǎng)方形在效果-3D-凸出在選項(xiàng)中選擇位置-等角-上方燎竖，X/Y/軸都不需要設(shè)置构回，然后設(shè)置凸出厚度60PT纤掸。同樣在AI里選擇-擴(kuò)展外觀借跪，各個(gè)面拆分掏愁。然后各個(gè)面拖拽到PS中，在PS中給各個(gè)面顏色糊昙。

PS中給各個(gè)面顏色上面#f9f4d5 左面#f2c0a0 右面 #f7ddb2,復(fù)制一個(gè)上面的圖層释牺，然后CTL+T自由變換船侧、shitf+ait等比例縮放镜撩，填充顏色#fae7b3袁梗，復(fù)制出一個(gè)立方體遮怜，然后然后CTL+T自由變換锯梁、shitf+ait等比例縮放陌凳，到最適合區(qū)域合敦，然后在復(fù)制一個(gè)立方體等比例縮放充岛，一個(gè)比一個(gè)小的羅列崔梗，這房蓋上面基本完善蒜魄，然后還有個(gè)冒光的光束权悟，在PS中按照邊緣鋼筆工具勾選一個(gè)這的區(qū)域峦阁，然后給漸變即可榔昔。給畫面節(jié)增加效果撒会，那么點(diǎn)綴一些顆粒的東西上面部分完成诵肛。

房蓋部分完成褪秀，那開始制作房子下部分媒吗，還記得在AI中的一個(gè)寬度328 闸英、高度190甫何、圓角半徑0確定 矩形嗎沛豌，做下部分還需要回到AI中赃额，同樣給予矩形效果-3D-凸出跳芳，彈出選項(xiàng)設(shè)置飞盆，別的都不變孽水，只是凸出厚度變成350PT值女气。然后選擇-擴(kuò)展外觀炼鞠，拆分各個(gè)面谒主。拖拽到PS中給予顏色霎肯，大家發(fā)現(xiàn)一個(gè)問題沒姿现，只要做出來一個(gè)剩下的根據(jù)套路就可以完成剩下部分的元素备典√嵊叮可能數(shù)值稍微有些變化拌屏。

在PS中給予三個(gè)面顏色倚喂、因有房蓋了所以三個(gè)面中的頂面就不要了端圈，只要左右面即可給兩個(gè)面顏色,首先左面漸變#fd9383 #fdaf92色值漸變角度90度,右面漸變?yōu)?fdc4bb #feb294 色值漸變角度90度

為墻體做一個(gè)腰線舱权，會(huì)讓墻體細(xì)節(jié)更加豐富飽滿宴倍。在AI中鸵贬，找到之前墻體的上面部分阔逼，然后給予描邊粗細(xì)為3颜价，背景圖關(guān)閉周伦，選擇工具點(diǎn)一下A點(diǎn)然后delete去掉专挪，然后給描邊一個(gè)白色顏色值寨腔，拖拽到PS中放在墻體合適位置

墻體完成迫卢，感覺有點(diǎn)不通透乾蛤，有點(diǎn)悶家卖，所以按一個(gè)門讓建筑空氣流通一下上荡。這次門在PS里進(jìn)行酪捡，首先要給一個(gè)圓形矩形工具沛善，半徑設(shè)置50金刁，寬度50PX高130填充顏色#653d71,然后把下部分去掉，ctrl+t自由變換媳友，只設(shè)置W:86.6 醇锚、V30度即可焊唬，然后得到一個(gè)側(cè)面赶促，放置到房體適合的位置上鸥滨，如果門大可以根據(jù)需要調(diào)整等比例大小,婿滓，為了透視畫三角形然后給個(gè)顏色凸主，讓門更生動(dòng)透視更準(zhǔn)確秕铛。

有門那么也應(yīng)該有一個(gè)窗戶但两、窗戶是立體的所以在AI中進(jìn)行比較方便谨湘，首先在AI里建立一個(gè)正方形紧阔，然后效果-3D-凸出擅耽，凸出厚度5PT,位置-等角-右方乖仇，接著乃沙，對(duì)象-擴(kuò)展外觀警儒，給予顏色，#f09981 #fec7be 然后在復(fù)制一下單面給予顏色#edecf6边琉，等比例縮小到最佳位置艺骂，

接下來就是制作臺(tái)階，臺(tái)階也是立體形成蹄衷，所以在AI里進(jìn)行愧口。首先在AI里建立一個(gè)小一點(diǎn)的矩形耍属，然后描邊厚骗、選擇工具點(diǎn)A點(diǎn)DELETE去掉领舰，復(fù)制出一個(gè)連接冲秽，然后快捷鍵CTRL+D復(fù)制锉桑、想要幾個(gè)臺(tái)階就復(fù)制多少個(gè)民轴，這里為了演示就復(fù)制5層，全選圖層CTYL+J連接辙诞、接著對(duì)象-變換-傾斜彈出框設(shè)定傾斜角度-30轻抱、軸為垂直祈搜、角度90容燕，復(fù)制出一個(gè)作為B點(diǎn)蘸秘，繪制一個(gè)矩形頂蓋變形等軸角度醋虏。結(jié)合A B點(diǎn)角度、用鋼筆工具完成矩形延伸毛秘、然后復(fù)制擺放叫挟、臺(tái)階上面顏色#faede8 立側(cè)顏色為#fdaf92抹恳、同樣側(cè)面也是需要鋼筆工具來完成署驻，這時(shí)候一個(gè)臺(tái)階制作完硕舆，把臺(tái)階拖拽到PS中擺放合適位置

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

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

關(guān)注公眾號(hào)liangyuansi1獲取最新學(xué)習(xí)UI資訊

局部重新制作(教程演示)

最后在給大家欣賞一下完整設(shè)計(jì)效果圖