写在前面：

从上一次年总结中应一部分酷友的提议希望写一份关于2.5D的设计思路教程，在此结合个人平时在画2.5D元素时的绘画过程经验，希望可以帮助到大家，共同进步；如果有写得不是很到位的地方希望大家可以理解，有自己想法的我们一起讨论寻找更好的、更便捷有效的设计方法。

绘画工具选择：

设计师在设计同样的一个设计作品时有很多种方法，但是在设计工具琳琅满目的今天，我们只要找到适合自己的才是最好的，其实不必要盲目去跟风，毕竟不是每个设计师都能做到精通所有设计软件，首先需要认清自己什么样的设计工具是自己最擅长的，在自己擅长的做垂直深究，其他做自己的优势扩展熟悉即可，以上仅为个人的看法，当然如果你的时间足够充足，多方面优势发展自然是最好的。

本文章的出发点就是想通过自己平时的经验积累，一方面是总结自己在画2.5D元素过程的处理方法，另一方面是分享给大家的是个人的心得。

文章目录图形分析：本次案例皆以PS软件为例

一、设计前期准备工作

在做2.5D学习进阶前，首先要做的就是收集身边自己感兴趣的小物件。日常素材收集、个人设计资源库是设计师最关键的资源整合之一，以人们日常生活为取材中心的设计，能更好的服务于现实生活中的用户。当设计的量越来越大之后，设计创作的灵感就会越来越多，可以通过以往的设计进行重新组合、变形、创作，这也是我们在设计中常用的设计的表现方法。

2.5D风格的设计也可以通过以往所做的扁平化的设计进行升级创作，进而制定不同的设计表现形式一方面来满足自身技能的提升，另一方面满足工作中设计表现的综合能力提升，使自身竞争力有所提升。

1.1 素材收集

收集自己喜欢对工作实际项目中常用的素材元素（如：礼盒、硬币、红包、日历等等），学习初阶段首先要找自己喜欢的且结构比较简单的素材，这样在画的过程中才会更有信心，相信只要是自己喜欢的东西在画的过程中才会有翻倍的耐心去做。

例素材：

1.2 分析结构

在纸上画出参照物结构，深入分析其结构。分析结构主要了解参照物的结构、线条、凹凸以及物品的材质，为后面在软件上绘制时更有信心——“深入了解只为更好的实现。”下面写得比较细主要考虑到初学者能更好理解，所以在分析结构的时候写详细一些方便理解；在实际工作中可能没有那么多的时间去解析，可能很多设计师都是找到合适的主题就开始着手勾勒线框图了“时间不允许慢慢去研究”。

例草图：

二、设计过程步骤拆解

设计过程的拆解是设计中必经的过程，只有做好设计拆分，才有充足的时间合理排期在设计中的进度，循序渐进；不做设计拆分导致的后果就是花了时间，最后的输出效果达不到自己的预期，这也说明了设计的拆分是一个重要的步骤，大到一个项目，小到一个图标都需要做明确的规划拆分。

下面以设计一个2.5D元素来拆解设计的步骤：勾勒线稿图——线稿上色——细节处理（增强元素质感），其中最关键的就是最后一步，元素的效果好看与否关键在于细节与质感的微妙处理，精细到每一个像素点的处理。

2.1 勾勒线稿图

把素材导入到PS设计软件中勾勒出参照物的线稿图。再勾勒线稿图时需要注意的几个点像素点对齐、形成封闭状态、相互之间达到吻合的效果。

那下面画沙漏的案例来细讲：

线稿图绘制的具体步骤：

a. 沙漏顶部的圆饼：在PS中使用“椭圆工具”绘制，然后多复制几个、调整大小、位置、根据结构放置图层的先后顺序，最后编组；复制组这样下方的也可以画完了。

b. 沙漏四个支撑圆柱：在PS中使用“圆角矩形工具”绘制，调整好左边的支撑住的关系；统一使用中心对称复制即可完成右边的支撑住。

c. 玻璃沙漏：在此首先绘制上方，从外轮廓——沙子（需要考虑沙子向下漏的动态方向、玻璃的圆锥形状）—— 处理玻璃的质感、阴影；使用同一方法中心对称去快速做出下方的效果，这里需要调整沙子、投影、玻璃质感之间的关系。注：玻璃质感可用钢笔工具勾勒或形状的混合模式删减组合。

2.2 线稿渲染

确定光源的方向、参照物的结构，使用最容易表现的形状工具去绘制，一方面确保绘制过程中的图形的理想状态，另一方面提高绘制线稿图的效率，设计的最种目的就是在确保质量的前提上提高效率，便捷的设计手法则在这其中起着关键性的作用。

例上色过程图：

2.5D元素渲染的具体步骤：

a. 首先，选中所有图层保留线稿，使用统一角度的色彩渐变填充，建议使用黑白色，这样可以大致看出元素的基础图形结构（如上图2.2-1），一键完成基本的图形初步立体结构；从上面也可以看出前面说线稿图绘制时的先后顺序的重要性，如果不注意根据结构的前后关系进行绘制，得出的初步立体图形则会杂乱无章。

b. 下一步，在初步立体图形结构上进行上色调色，就像在画色彩一样，铺了大色调之后开始对物体的结构进行深入的刻画（如上图2.2-2），但在绘制这种2.5D单个元素时，在调整的前提先要做好配色，使用邻近色、对比色、冷暖色，同样的材质不同位置使用邻近色调整协调效果及质感；区别于结构的可使用对比色加强突出，这一步也是很多初步学习的设计师没考虑到，导致最终效果总是不如意；暗部或反光部位等可根据实际情况使用冷暖色协调整体的效果。

c. 最后，细节处理——色彩中叫这一步为物体的立体质感勾勒，增强物体的细节处理和物体的质感（如上图2.2.3）。元素的立体质感勾画，元素各部链接部位的吻合，增强元素的质感，这一步考验的就是个人对物体的理解、绘制时的多方面思考、软件表现方式的运用（这一步个人常用的软件表现方式是：建图层 —— 使用画笔工具 —— 图层混合模式中的正片叠底/叠加处理，这种处理方式的好处就是保留原本的结构）。

三、设计素材在项目中的应用

2.5D设计的运用场景广泛，图标、运营落地页/推广、网站、APP等，应用的广泛2.5D的表现方式也被设计师玩出了不同的新花样。在此根据个人的日常总结来聊聊略带点质感的2.5D的运用表达方式，结合这两年流行的毛玻璃效果演变过来，当然比不上C4D建模的质感效果，但在没有学习建模软件之前可以使用自身常用的设计工具做出略带质感效果的元素。

以下主要分享一下个人在工作项目落地中常用的设计方法，主要从三个应用场景来分析：在Banner、弹窗、H5落地页的表现方式(其中拿Banner作为详细解析）。

3.1 2.5D在Banner中的模块化设计运用

前面有说到，元素在运营中的运用要遵循设计的规范，拿应用在APP中的Banner来说，设计师在做产品设计规范时都有做出运营物料设计的相应设计规范，确保设计规范的统一性，协调团队协作效率，展示的视觉效果达到最佳的效果。

2.5D元素在项目中的应用具体步骤：

a. 选择合适的布局板式，把对应的内容信息填充到板块中。

b. 根据前期对活动需求的分析以及与需求提供人员的确认，了解运营的实际需求和需要达到的预期目标效果。

c. 在时间紧急中就可以在自己的设计素材库中（公司设计资源库）找到对应的视觉表现主题元素，放置到版式中（如下图）。

3.2 2.5D在Banner中的画面融合

画面融合，就是把内容与元素设计融合，这一步处理的难点主要是在字体的设计、元素与版面融合、整体的设计氛围效果过处理。

1.  字体设计：

字体的设计需要考虑与核心传达信息融合，这里根据文案内容整合的关键词：时间、紧迫、快；在做字体设计时考虑在字体上的“时”结构上的闪电效果处理来表示时间的紧迫感。其他没做更多的思考，在实际项目中还可以考虑更多些元素，这里就不做更多的思考与解析了，让标题的文案设计更有艺术特色。

2.  元素关系处理：

这里在处理沙漏主元素时首先处理的是让其可以放稳——即处理元素与平面的交接处的细节、确定光源找出投影的位置；设计辅助的次要元素如这里使用的金币、传送带、白纱，传送带色使用冷调色彩，目的打破页面的暖调，让画面有对比突出主题，并处理其相互之间的关系，比如金币压在沙漏上产生投影，金币放在在传送带上的投影即交接位置的细节处理；最后一步就是处理整体的氛围效果，这里主要用环境色的影响对墙壁的映射，白点的点缀整体效果，标题颜色、按钮效果的处理等。

3.3 2.5D在运营“弹窗”中的设计应用

运营弹窗的出现一定有着一个明确的目的，常见的运营需要用到弹窗的展示形式其目的主要分为三大类：拉新、转化、活跃。

设计师在拆解运营弹窗设计的视觉思路时首先要明确其目的，要实现的目标，为了实现运营的目标设计师需要在设计中做什么？如何体现设计的价值“设计的的最终目标是实现设计的价值，完成甚至超越预期目标”。

2.5D弹窗设计具体步骤：（下面以不规则弹窗为例）

1、拆分：组合型的2.5D设计在设计时常规操作都是先进行拆分。在此做简单的拆分：承载底座、主元素礼盒、按钮控件、点缀元素（金币、红包）、特效丰富（佛光、点光）。

2、布局组合：把每个元素的线框图进行组合，根据图层的先后顺序组合，方便后面的渲染上色。

3、渲染上色：在渲染中一般会有两种情况，一种就是自己素材库中的设计元素，一种是现画的；在此主要讲讲如何用自己素材库的元素组合搭建出新的视觉效果。在自己素材库中拿一个礼盒的元素设计以下不同运营需求的弹窗，其主要的变化点在于底座和点缀的元素，最后处理材质。

注释：

视觉资源的的复用性在之前发过的“视觉资源整合迭代模型总结”中也有详细总结如何复用的设计方法模型。为了提高工作效率、品牌认知名度，视觉资源组件化、设计资源共享在设计团队中一直都是至关重要的设计组成部分，一方面可以协调设计团队的设计风格统一、品牌价值走向一致等

3.4 2.5D在运营“H5”中的设计应用

H5、开屏海报、外部推广常会用到体系化的设计物料，外部推广常用多张系列性海报增强推广的关联性，加深用户对品牌的印象，这是设计一直以来沿用的传达形式。

在这种表现形式中可复用性的设计资源就占据很大一部分，如何使用这将是一个疑惑的问题，在我们日常看到的可以说是第一感觉像、但细看又各有其特色的场景元素，这就需要在设计时的样式的复用（比如：色彩渐变、混合模式、高光、投影、色彩、质感等，不同的元素使用同样的样式复制过去，效果自然是差不多的，只需后续做细化的调整即可出效果。

H5中2.5D元素的搭建主要区别与其他的就是视觉场景、主元素，场景要比Banner、弹窗复杂很多，毕竟是活动的主要承载落地页，设计活动落地页及推广的配套物料从风格、设计核心元素是需要保持一致，避免给用户带来疑惑“是否进错了活动”；但也有部分为了把用户引导到活动，小范围测试设计价值在推广中也会尝试不同的设计表现手法，测试什么样的风格才是触发用户点击的动机，以此来验证设计的方向。

回到2.5D的设计表现方法来说，在H5的设计中使用2.5D的表现手法最重要的就是讲究画面的空间感，让有限的空间得到无限的放大场景，从而增加画面的视觉冲击力。

总结：

1、2.5D设计关键在于对结构物体的了解，场景的空间透视关系；

2、2.5D设计细节的处理直接影响到元素的精致和质感；

3、2.5D元素在落地项目应用注重关系处理、对比、空间场景。

 由于第一次尝试写文章类型设计分享，关于2.5D设计过程某些内容介绍不够详细，缺少图解，如果有不严谨、错误的地方还望大家给与指正，欢迎大家一起讨论。