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

繪畫工具選擇：

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

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

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

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

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

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

1. 素材收集

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

案例素材：

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

在紙上畫出參照物結(jié)構(gòu)，深入分析其結(jié)構(gòu)。分析結(jié)構(gòu)主要了解參照物的結(jié)構(gòu)、線條、凹凸以及物品的材質(zhì)，為后面在軟件上繪制時更有信心——"深入了解只為更好的實現(xiàn)。"下面寫得比較細。主要考慮到初學(xué)者能更好理解，所以在分析結(jié)構(gòu)的時候?qū)懺敿氁恍┓奖憷斫猓辉趯嶋H工作中可能沒有那么多的時間去解析，可能很多設(shè)計師都是找到合適的主題就開始著手勾勒線框圖了，時間不允許慢慢去研究。

設(shè)計過程步驟拆解

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

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

1. 勾勒線稿圖

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

拿下面畫沙漏的案例來細講：

線稿圖繪制的具體步驟：

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

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

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

2. 線稿渲染

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

上色過程圖：

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

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

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

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

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

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

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

1. 2.5D 在 Banner 中的模塊化設(shè)計運用

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

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

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

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

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

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

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

字體設(shè)計：

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

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

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

3. 2.5D 在運營"彈窗"中的設(shè)計應(yīng)用

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

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

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

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

注釋：

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

4. 2.5D 在運營"H5"中的設(shè)計應(yīng)用

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

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

總結(jié)

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

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

作者：火土Art