寫在前面：

本文結(jié)合個(gè)人平時(shí)在畫 2.5D 元素時(shí)的繪畫過(guò)程經(jīng)驗(yàn)，總結(jié)了這份 2.5D 設(shè)計(jì)的思路教程，希望可以幫助到大家，共同進(jìn)步。如果有寫得不是很到位的地方，希望大家可以理解，有自己想法的我們一起討論尋找更好的、更便捷有效的設(shè)計(jì)方法。

免費(fèi)的2.5D 插畫素材看這里：

繪畫工具選擇：

設(shè)計(jì)師在設(shè)計(jì)同樣的一個(gè)設(shè)計(jì)作品時(shí)有很多種方法，但是在設(shè)計(jì)工具琳瑯滿目的今天，找到適合自己的才是最好的，不必要盲目去跟風(fēng)，畢竟不是每個(gè)設(shè)計(jì)師都能做到精通所有設(shè)計(jì)軟件，首先需要認(rèn)清自己什么樣的設(shè)計(jì)工具是自己最擅長(zhǎng)的，在自己擅長(zhǎng)的做垂直深入，其他擴(kuò)展熟悉即可，以上僅為個(gè)人的看法，當(dāng)然如果你的時(shí)間足夠充足，多方面優(yōu)勢(shì)發(fā)展自然是最好的。

本文章的出發(fā)點(diǎn)就是想通過(guò)自己平時(shí)的經(jīng)驗(yàn)積累，一方面是總結(jié)自己在畫 2.5D 元素過(guò)程的處理方法，另一方面是分享給大家個(gè)人的心得。

文章目錄圖形分析：本次案例皆以 PS 軟件為例

設(shè)計(jì)前期準(zhǔn)備工作

在做 2.5D 學(xué)習(xí)進(jìn)階前，首先要做的就是收集身邊自己感興趣的小物件。以人們?nèi)粘Ｉ顬槿〔闹行牡脑O(shè)計(jì)，能更好的服務(wù)于現(xiàn)實(shí)生活中的用戶。當(dāng)設(shè)計(jì)的量越來(lái)越大之后，設(shè)計(jì)創(chuàng)作的靈感就會(huì)越來(lái)越多，可以通過(guò)以往的設(shè)計(jì)進(jìn)行重新組合、變形、創(chuàng)作，這也是我們?cè)谠O(shè)計(jì)中常用的設(shè)計(jì)表現(xiàn)方法。

2.5D 風(fēng)格的設(shè)計(jì)也可以通過(guò)以往所做的扁平化的設(shè)計(jì)進(jìn)行升級(jí)創(chuàng)作，進(jìn)而制定不同的設(shè)計(jì)表現(xiàn)形式，一方面來(lái)滿足自身技能的提升，另一方面滿足工作中設(shè)計(jì)表現(xiàn)的綜合能力提升，使自身競(jìng)爭(zhēng)力有所提升。

1. 素材收集

收集自己工作實(shí)際項(xiàng)目中常用的素材（如：禮盒、硬幣、紅包、日歷等等），學(xué)習(xí)初階段首先要找自己喜歡的且結(jié)構(gòu)比較簡(jiǎn)單的素材，這樣在畫的過(guò)程中才會(huì)更有信心，相信只要是自己喜歡的東西，在畫的過(guò)程中才會(huì)有翻倍的耐心去做。

案例素材：

2. 分析結(jié)構(gòu)

在紙上畫出參照物結(jié)構(gòu)，深入分析其結(jié)構(gòu)。分析結(jié)構(gòu)主要了解參照物的結(jié)構(gòu)、線條、凹凸以及物品的材質(zhì)，為后面在軟件上繪制時(shí)更有信心——“深入了解只為更好的實(shí)現(xiàn)?！毕旅鎸懙帽容^細(xì)。主要考慮到初學(xué)者能更好理解，所以在分析結(jié)構(gòu)的時(shí)候?qū)懺敿?xì)一些方便理解；在實(shí)際工作中可能沒(méi)有那么多的時(shí)間去解析，可能很多設(shè)計(jì)師都是找到合適的主題就開始著手勾勒線框圖了，時(shí)間不允許慢慢去研究。

設(shè)計(jì)過(guò)程步驟拆解

設(shè)計(jì)過(guò)程的拆解是設(shè)計(jì)中必經(jīng)的過(guò)程，只有做好設(shè)計(jì)拆分，才有充足的時(shí)間合理排期在設(shè)計(jì)中的進(jìn)度，循序漸進(jìn)；不做設(shè)計(jì)拆分導(dǎo)致的后果就是花了時(shí)間，最后的輸出效果達(dá)不到自己的預(yù)期，這也說(shuō)明了設(shè)計(jì)的拆分是一個(gè)重要的步驟，大到一個(gè)項(xiàng)目，小到一個(gè)圖標(biāo)都需要做明確的規(guī)劃拆分。

下面以設(shè)計(jì)一個(gè) 2.5D 元素來(lái)拆解設(shè)計(jì)的步驟：勾勒線稿圖——線稿上色——細(xì)節(jié)處理（增強(qiáng)元素質(zhì)感），其中最關(guān)鍵的就是最后一步，元素的效果好看與否關(guān)鍵在于細(xì)節(jié)與質(zhì)感的微妙處理，精細(xì)到每一個(gè)像素點(diǎn)的處理。

1. 勾勒線稿圖

把素材導(dǎo)入到 PS 設(shè)計(jì)軟件中勾勒出參照物的線稿圖。勾勒線稿圖時(shí)需要注意的是幾個(gè)像素點(diǎn)對(duì)齊、形成封閉狀態(tài)、相互之間達(dá)到吻合的效果。

拿下面畫沙漏的案例來(lái)細(xì)講：

線稿圖繪制的具體步驟：

a. 沙漏頂部的圓餅：在 PS 中使用“橢圓工具”繪制，然后多復(fù)制幾個(gè)、調(diào)整大小、位置、根據(jù)結(jié)構(gòu)放置圖層的先后順序，最后編組；復(fù)制組，這樣下方的也可以畫完了。

b. 沙漏四個(gè)支撐圓柱：在 PS 中使用“圓角矩形工具”繪制，調(diào)整好左邊的支撐柱；統(tǒng)一使用中心對(duì)稱復(fù)制即可完成右邊的支撐柱。

c. 玻璃沙漏：在此首先繪制上方，從外輪廓——沙子（需要考慮沙子向下漏的動(dòng)態(tài)方向、玻璃的圓錐形狀）—— 處理玻璃的質(zhì)感、陰影；使用同一方法中心對(duì)稱去快速做出下方的效果，這里需要調(diào)整沙子、投影、玻璃質(zhì)感之間的關(guān)系。注：玻璃質(zhì)感可用鋼筆工具勾勒或形狀的混合模式刪減組合。

2. 線稿渲染

確定光源的方向、參照物的結(jié)構(gòu)，使用最容易表現(xiàn)的形狀工具去繪制，一方面確保繪制過(guò)程中的圖形的理想狀態(tài)，另一方面提高繪制線稿圖的效率，設(shè)計(jì)的最終目的就是在確保質(zhì)量的前提上提高效率，便捷的設(shè)計(jì)手法則在這其中起著關(guān)鍵性的作用。

上色過(guò)程圖：

2.5D 元素渲染的具體步驟：

a. 首先，選中所有圖層保留線稿，使用統(tǒng)一角度的色彩漸變填充，建議使用黑白色，這樣可以大致看出元素的基礎(chǔ)圖形結(jié)構(gòu)（如上圖 2.2-1），一鍵完成基本的圖形初步立體結(jié)構(gòu)；從上面也可以看出前面說(shuō)線稿圖繪制時(shí)的先后順序的重要性，如果不注意根據(jù)結(jié)構(gòu)的前后關(guān)系進(jìn)行繪制，得出的初步立體圖形則會(huì)雜亂無(wú)章。

b. 下一步，在初步立體圖形結(jié)構(gòu)上進(jìn)行上色調(diào)色，就像在畫色彩一樣，鋪了大色調(diào)之后開始對(duì)物體的結(jié)構(gòu)進(jìn)行深入的刻畫（如上圖 2.2-2），但在繪制這種 2.5D 單個(gè)元素時(shí)，在調(diào)整的前提先要做好配色，使用鄰近色、對(duì)比色、冷暖色，同樣的材質(zhì)不同位置使用鄰近色調(diào)整協(xié)調(diào)效果及質(zhì)感；區(qū)別于結(jié)構(gòu)的可使用對(duì)比色加強(qiáng)突出，這一步也是很多初步學(xué)習(xí)的設(shè)計(jì)師沒(méi)考慮到，導(dǎo)致最終效果總是不如意；暗部或反光部位等可根據(jù)實(shí)際情況使用冷暖色協(xié)調(diào)整體的效果。

c. 最后，細(xì)節(jié)處理——色彩中叫這一步為物體的立體質(zhì)感勾勒，增強(qiáng)物體的細(xì)節(jié)處理和物體的質(zhì)感（如上圖2.2.3）。元素的立體質(zhì)感勾畫，元素各部連接部位的吻合，增強(qiáng)元素的質(zhì)感，這一步考驗(yàn)的就是個(gè)人對(duì)物體的理解、繪制時(shí)的多方面思考、軟件表現(xiàn)方式的運(yùn)用（這一步個(gè)人常用的軟件表現(xiàn)方式是：建圖層 —— 使用畫筆工具 —— 圖層混合模式中的正片疊底/疊加處理，這種處理方式的好處就是保留原本的結(jié)構(gòu)）。

設(shè)計(jì)素材在項(xiàng)目中的應(yīng)用

2.5D 設(shè)計(jì)的運(yùn)用場(chǎng)景廣泛，圖標(biāo)、運(yùn)營(yíng)落地頁(yè)/推廣、網(wǎng)站、APP 等，應(yīng)用廣泛 2.5D 的表現(xiàn)方式也被設(shè)計(jì)師玩出了不同的新花樣。在此根據(jù)個(gè)人的日常總結(jié)來(lái)聊聊略帶點(diǎn)質(zhì)感的 2.5D 的運(yùn)用表達(dá)方式。

以下主要分享一下個(gè)人在工作項(xiàng)目落地中常用的設(shè)計(jì)方法，主要從三個(gè)應(yīng)用場(chǎng)景來(lái)分析：在 Banner、彈窗、H5 落地頁(yè)的表現(xiàn)方式（其中拿 Banner 作為詳細(xì)解析）。

1. 2.5D 在 Banner 中的模塊化設(shè)計(jì)運(yùn)用

前面有說(shuō)到，元素在運(yùn)營(yíng)中的運(yùn)用要遵循設(shè)計(jì)的規(guī)范，拿應(yīng)用的 Banner 來(lái)說(shuō)，設(shè)計(jì)師在做產(chǎn)品設(shè)計(jì)規(guī)范時(shí)都有做運(yùn)營(yíng)物料設(shè)計(jì)的相應(yīng)規(guī)范，確保設(shè)計(jì)規(guī)范的統(tǒng)一性，協(xié)調(diào)團(tuán)隊(duì)協(xié)作效率，展示的視覺(jué)效果達(dá)到最佳的效果。

2.5D 元素在項(xiàng)目中的應(yīng)用具體步驟：

a. 選擇合適的布局板式，把對(duì)應(yīng)的內(nèi)容信息填充到板塊中。

b. 根據(jù)前期對(duì)活動(dòng)需求的分析以及與需求提供人員的確認(rèn)，了解運(yùn)營(yíng)的實(shí)際需求和需要達(dá)到的預(yù)期目標(biāo)效果。

c. 在時(shí)間緊急情況下就可以在自己的設(shè)計(jì)素材庫(kù)中（公司設(shè)計(jì)資源庫(kù)）找到對(duì)應(yīng)的視覺(jué)表現(xiàn)主題元素，放置到版式中（如下圖）。

2. 2.5D 在 Banner 中的畫面融合

畫面融合，就是把內(nèi)容與元素設(shè)計(jì)融合，這一步處理的難點(diǎn)主要是在字體的設(shè)計(jì)、元素與版面融合、整體的設(shè)計(jì)氛圍效果的處理。

字體設(shè)計(jì)：

字體的設(shè)計(jì)需要考慮與核心傳達(dá)信息融合，這里根據(jù)文案內(nèi)容整合的關(guān)鍵詞：時(shí)間、緊迫、快；在做字體設(shè)計(jì)時(shí)，考慮在字體“時(shí)”結(jié)構(gòu)中的閃電效果處理來(lái)表示時(shí)間的緊迫感。其他沒(méi)做更多的思考，在實(shí)際項(xiàng)目中還可以考慮更多元素，這里就不做過(guò)多的思考與解析了，讓標(biāo)題的文案設(shè)計(jì)更有藝術(shù)特色。

元素關(guān)系處理：

這里在處理沙漏主元素時(shí)首先處理的是讓其可以放穩(wěn)——即處理元素與平面的交接處的細(xì)節(jié)、確定光源找出投影的位置；設(shè)計(jì)輔助的次要元素如這里使用的金幣、傳送帶、白紗，傳送帶色使用冷調(diào)色彩，目的打破頁(yè)面的暖調(diào)，讓畫面有對(duì)比突出主題，并處理其相互之間的關(guān)系，比如金幣壓在沙漏上產(chǎn)生投影，金幣放在傳送帶上的投影即交接位置的細(xì)節(jié)處理；最后一步就是處理整體的氛圍效果，這里主要用環(huán)境色影響對(duì)墻壁的映射，白點(diǎn)的點(diǎn)綴整體效果，標(biāo)題顏色、按鈕效果的處理等。

3. 2.5D 在運(yùn)營(yíng)“彈窗”中的設(shè)計(jì)應(yīng)用

運(yùn)營(yíng)彈窗的出現(xiàn)一定有著一個(gè)明確的目的，常見(jiàn)的運(yùn)營(yíng)需要用到彈窗的展示形式其目的主要分為三大類：拉新、轉(zhuǎn)化、活躍。

設(shè)計(jì)師在拆解運(yùn)營(yíng)彈窗設(shè)計(jì)的視覺(jué)思路時(shí)首先要明確其目的，要實(shí)現(xiàn)的目標(biāo)，為了實(shí)現(xiàn)運(yùn)營(yíng)的目標(biāo)設(shè)計(jì)師需要在設(shè)計(jì)中做什么？如何體現(xiàn)設(shè)計(jì)的價(jià)值，“設(shè)計(jì)的的最終目標(biāo)是實(shí)現(xiàn)設(shè)計(jì)的價(jià)值，完成甚至超越預(yù)期目標(biāo)”。

2.5D 彈窗設(shè)計(jì)具體步驟：（下面以不規(guī)則彈窗為例）

1. 拆分：組合型的 2.5D 設(shè)計(jì)在設(shè)計(jì)時(shí)常規(guī)操作都是先進(jìn)行拆分。在此做簡(jiǎn)單的拆分：承載底座、主元素禮盒、按鈕控件、點(diǎn)綴元素（金幣、紅包）、特效豐富（佛光、點(diǎn)光）。
2. 布局組合：把每個(gè)元素的線框圖進(jìn)行組合，根據(jù)圖層的先后順序組合，方便后面的渲染上色。
3. 渲染上色：在渲染中一般會(huì)有兩種情況，一種就是自己素材庫(kù)中的設(shè)計(jì)元素，一種是現(xiàn)畫的；在此主要講講如何用自己素材庫(kù)的元素組合搭建出新的視覺(jué)效果。在自己素材庫(kù)中拿一個(gè)禮盒的元素設(shè)計(jì)以下不同運(yùn)營(yíng)需求的彈窗，其主要的變化點(diǎn)在于底座和點(diǎn)綴的元素，最后處理材質(zhì)。

注釋：

為了提高工作效率、品牌認(rèn)知名度，視覺(jué)資源組件化、設(shè)計(jì)資源共享在設(shè)計(jì)團(tuán)隊(duì)中一直都是至關(guān)重要的設(shè)計(jì)組成部分，一方面可以協(xié)調(diào)設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)風(fēng)格統(tǒng)一、品牌價(jià)值走向一致等。

4. 2.5D 在運(yùn)營(yíng)“H5”中的設(shè)計(jì)應(yīng)用

H5、開屏海報(bào)、外部推廣常會(huì)用到體系化的設(shè)計(jì)物料，外部推廣常用多張系列性海報(bào)增強(qiáng)推廣的關(guān)聯(lián)性，加深用戶對(duì)品牌的印象，這是設(shè)計(jì)一直以來(lái)沿用的傳達(dá)形式。

在 H5 的設(shè)計(jì)中使用 2.5D 的表現(xiàn)手法最重要的就是講究畫面的空間感，讓有限的空間得到無(wú)限的放大場(chǎng)景，從而增加畫面的視覺(jué)沖擊力。

總結(jié)

1. 2.5D 設(shè)計(jì)關(guān)鍵在于對(duì)結(jié)構(gòu)物體的了解，場(chǎng)景的空間透視關(guān)系；
2. 2.5D 設(shè)計(jì)細(xì)節(jié)的處理直接影響到元素的精致和質(zhì)感；
3. 2.5D 元素在落地項(xiàng)目應(yīng)用注重關(guān)系處理、對(duì)比、空間場(chǎng)景。

由于第一次嘗試寫文章類型設(shè)計(jì)分享，關(guān)于 2.5D 設(shè)計(jì)過(guò)程的某些內(nèi)容介紹不夠詳細(xì)，缺少圖解，如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方還望大家給與指正，歡迎大家一起討論。