寫在前面：
本文結合個人平時在畫 2.5D 元素時的繪畫過程經驗，總結了這份 2.5D 設計的思路教程，希望可以幫助到大家，共同進步。如果有寫得不是很到位的地方，希望大家可以理解，有自己想法的我們一起討論尋找更好的、更便捷有效的設計方法。
免費的2.5D 插畫素材看這里：
繪畫工具選擇：
設計師在設計同樣的一個設計作品時有很多種方法，但是在設計工具琳瑯滿目的今天，找到適合自己的才是最好的，不必要盲目去跟風，畢竟不是每個設計師都能做到精通所有設計軟件，首先需要認清自己什么樣的設計工具是自己最擅長的，在自己擅長的做垂直深入，其他擴展熟悉即可，以上僅為個人的看法，當然如果你的時間足夠充足，多方面優勢發展自然是最好的。
本文章的出發點就是想通過自己平時的經驗積累，一方面是總結自己在畫 2.5D 元素過程的處理方法，另一方面是分享給大家個人的心得。
文章目錄圖形分析：本次案例皆以 PS 軟件為例
在做 2.5D 學習進階前，首先要做的就是收集身邊自己感興趣的小物件。以人們日常生活為取材中心的設計，能更好的服務于現實生活中的用戶。當設計的量越來越大之后，設計創作的靈感就會越來越多，可以通過以往的設計進行重新組合、變形、創作，這也是我們在設計中常用的設計表現方法。
2.5D 風格的設計也可以通過以往所做的扁平化的設計進行升級創作，進而制定不同的設計表現形式，一方面來滿足自身技能的提升，另一方面滿足工作中設計表現的綜合能力提升，使自身競爭力有所提升。
1. 素材收集
收集自己工作實際項目中常用的素材（如：禮盒、硬幣、紅包、日歷等等），學習初階段首先要找自己喜歡的且結構比較簡單的素材，這樣在畫的過程中才會更有信心，相信只要是自己喜歡的東西，在畫的過程中才會有翻倍的耐心去做。
案例素材：
2. 分析結構
在紙上畫出參照物結構，深入分析其結構。分析結構主要了解參照物的結構、線條、凹凸以及物品的材質，為后面在軟件上繪制時更有信心——“深入了解只為更好的實現。”下面寫得比較細。主要考慮到初學者能更好理解，所以在分析結構的時候寫詳細一些方便理解；在實際工作中可能沒有那么多的時間去解析，可能很多設計師都是找到合適的主題就開始著手勾勒線框圖了，時間不允許慢慢去研究。
設計過程的拆解是設計中必經的過程，只有做好設計拆分，才有充足的時間合理排期在設計中的進度，循序漸進；不做設計拆分導致的后果就是花了時間，最后的輸出效果達不到自己的預期，這也說明了設計的拆分是一個重要的步驟，大到一個項目，小到一個圖標都需要做明確的規劃拆分。
下面以設計一個 2.5D 元素來拆解設計的步驟：勾勒線稿圖——線稿上色——細節處理（增強元素質感），其中最關鍵的就是最后一步，元素的效果好看與否關鍵在于細節與質感的微妙處理，精細到每一個像素點的處理。
1. 勾勒線稿圖
把素材導入到 PS 設計軟件中勾勒出參照物的線稿圖。勾勒線稿圖時需要注意的是幾個像素點對齊、形成封閉狀態、相互之間達到吻合的效果。
拿下面畫沙漏的案例來細講：
線稿圖繪制的具體步驟：
a. 沙漏頂部的圓餅：在 PS 中使用“橢圓工具”繪制，然后多復制幾個、調整大小、位置、根據結構放置圖層的先后順序，最后編組；復制組，這樣下方的也可以畫完了。
b. 沙漏四個支撐圓柱：在 PS 中使用“圓角矩形工具”繪制，調整好左邊的支撐柱；統一使用中心對稱復制即可完成右邊的支撐柱。
c. 玻璃沙漏：在此首先繪制上方，從外輪廓——沙子（需要考慮沙子向下漏的動態方向、玻璃的圓錐形狀）—— 處理玻璃的質感、陰影；使用同一方法中心對稱去快速做出下方的效果，這里需要調整沙子、投影、玻璃質感之間的關系。注：玻璃質感可用鋼筆工具勾勒或形狀的混合模式刪減組合。
2. 線稿渲染
確定光源的方向、參照物的結構，使用最容易表現的形狀工具去繪制，一方面確保繪制過程中的圖形的理想狀態，另一方面提高繪制線稿圖的效率，設計的最終目的就是在確保質量的前提上提高效率，便捷的設計手法則在這其中起著關鍵性的作用。
上色過程圖：
2.5D 元素渲染的具體步驟：
a. 首先，選中所有圖層保留線稿，使用統一角度的色彩漸變填充，建議使用黑白色，這樣可以大致看出元素的基礎圖形結構（如上圖 2.2-1），一鍵完成基本的圖形初步立體結構；從上面也可以看出前面說線稿圖繪制時的先后順序的重要性，如果不注意根據結構的前后關系進行繪制，得出的初步立體圖形則會雜亂無章。
b. 下一步，在初步立體圖形結構上進行上色調色，就像在畫色彩一樣，鋪了大色調之后開始對物體的結構進行深入的刻畫（如上圖 2.2-2），但在繪制這種 2.5D 單個元素時，在調整的前提先要做好配色，使用鄰近色、對比色、冷暖色，同樣的材質不同位置使用鄰近色調整協調效果及質感；區別于結構的可使用對比色加強突出，這一步也是很多初步學習的設計師沒考慮到，導致最終效果總是不如意；暗部或反光部位等可根據實際情況使用冷暖色協調整體的效果。
c. 最后，細節處理——色彩中叫這一步為物體的立體質感勾勒，增強物體的細節處理和物體的質感（如上圖2.2.3）。元素的立體質感勾畫，元素各部連接部位的吻合，增強元素的質感，這一步考驗的就是個人對物體的理解、繪制時的多方面思考、軟件表現方式的運用（這一步個人常用的軟件表現方式是：建圖層 —— 使用畫筆工具 —— 圖層混合模式中的正片疊底/疊加處理，這種處理方式的好處就是保留原本的結構）。
2.5D 設計的運用場景廣泛，圖標、運營落地頁/推廣、網站、APP 等，應用廣泛 2.5D 的表現方式也被設計師玩出了不同的新花樣。在此根據個人的日?？偨Y來聊聊略帶點質感的 2.5D 的運用表達方式。
以下主要分享一下個人在工作項目落地中常用的設計方法，主要從三個應用場景來分析：在 Banner、彈窗、H5 落地頁的表現方式（其中拿 Banner 作為詳細解析）。
1. 2.5D 在 Banner 中的模塊化設計運用
前面有說到，元素在運營中的運用要遵循設計的規范，拿應用的 Banner 來說，設計師在做產品設計規范時都有做運營物料設計的相應規范，確保設計規范的統一性，協調團隊協作效率，展示的視覺效果達到最佳的效果。
2.5D 元素在項目中的應用具體步驟：
a. 選擇合適的布局板式，把對應的內容信息填充到板塊中。
b. 根據前期對活動需求的分析以及與需求提供人員的確認，了解運營的實際需求和需要達到的預期目標效果。
c. 在時間緊急情況下就可以在自己的設計素材庫中（公司設計資源庫）找到對應的視覺表現主題元素，放置到版式中（如下圖）。
2. 2.5D 在 Banner 中的畫面融合
畫面融合，就是把內容與元素設計融合，這一步處理的難點主要是在字體的設計、元素與版面融合、整體的設計氛圍效果的處理。
字體設計：
字體的設計需要考慮與核心傳達信息融合，這里根據文案內容整合的關鍵詞：時間、緊迫、快；在做字體設計時，考慮在字體“時”結構中的閃電效果處理來表示時間的緊迫感。其他沒做更多的思考，在實際項目中還可以考慮更多元素，這里就不做過多的思考與解析了，讓標題的文案設計更有藝術特色。
元素關系處理：
這里在處理沙漏主元素時首先處理的是讓其可以放穩——即處理元素與平面的交接處的細節、確定光源找出投影的位置；設計輔助的次要元素如這里使用的金幣、傳送帶、白紗，傳送帶色使用冷調色彩，目的打破頁面的暖調，讓畫面有對比突出主題，并處理其相互之間的關系，比如金幣壓在沙漏上產生投影，金幣放在傳送帶上的投影即交接位置的細節處理；最后一步就是處理整體的氛圍效果，這里主要用環境色影響對墻壁的映射，白點的點綴整體效果，標題顏色、按鈕效果的處理等。
3. 2.5D 在運營“彈窗”中的設計應用
運營彈窗的出現一定有著一個明確的目的，常見的運營需要用到彈窗的展示形式其目的主要分為三大類：拉新、轉化、活躍。
設計師在拆解運營彈窗設計的視覺思路時首先要明確其目的，要實現的目標，為了實現運營的目標設計師需要在設計中做什么？如何體現設計的價值，“設計的的最終目標是實現設計的價值，完成甚至超越預期目標”。
2.5D 彈窗設計具體步驟：（下面以不規則彈窗為例）
- 拆分：組合型的 2.5D 設計在設計時常規操作都是先進行拆分。在此做簡單的拆分：承載底座、主元素禮盒、按鈕控件、點綴元素（金幣、紅包）、特效豐富（佛光、點光）。
- 布局組合：把每個元素的線框圖進行組合，根據圖層的先后順序組合，方便后面的渲染上色。
- 渲染上色：在渲染中一般會有兩種情況，一種就是自己素材庫中的設計元素，一種是現畫的；在此主要講講如何用自己素材庫的元素組合搭建出新的視覺效果。在自己素材庫中拿一個禮盒的元素設計以下不同運營需求的彈窗，其主要的變化點在于底座和點綴的元素，最后處理材質。
注釋：
為了提高工作效率、品牌認知名度，視覺資源組件化、設計資源共享在設計團隊中一直都是至關重要的設計組成部分，一方面可以協調設計團隊的設計風格統一、品牌價值走向一致等。
4. 2.5D 在運營“H5”中的設計應用
H5、開屏海報、外部推廣常會用到體系化的設計物料，外部推廣常用多張系列性海報增強推廣的關聯性，加深用戶對品牌的印象，這是設計一直以來沿用的傳達形式。
在 H5 的設計中使用 2.5D 的表現手法最重要的就是講究畫面的空間感，讓有限的空間得到無限的放大場景，從而增加畫面的視覺沖擊力。
- 2.5D 設計關鍵在于對結構物體的了解，場景的空間透視關系；
- 2.5D 設計細節的處理直接影響到元素的精致和質感；
- 2.5D 元素在落地項目應用注重關系處理、對比、空間場景。
由于第一次嘗試寫文章類型設計分享，關于 2.5D 設計過程的某些內容介紹不夠詳細，缺少圖解，如果有不嚴謹、錯誤的地方還望大家給與指正，歡迎大家一起討論。
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 夏花生
