近年来,2.5D插画风靡于设计圈。2.5D插画也称为2.5D轴侧等距插画,看上去有点3D的立体效果。2.5D插画绘制起源于一款大家非常熟悉的游戏《纪念碑谷》。从插画风格来看,它的美术风格特别有趣。纪念碑谷的整体颜色非常清新脱俗,是由线条和面搭建而成的色彩空间。本节,Pixso三步教你绘制2.5D插画!

2.5d插画绘制工具Pixso

不用C4D,三步绘制2.5D插画

第一步:搭建纪念碑谷基础结构

新建三个正方形。Pixso智能形状工具不仅提供了诸多预设图形,还可以拖动锚点进行快速转换,以此进行高效画图,点击注册Pixso账号,在线绘制2.5D插画。

2.5d插画绘制

打开右上角的插件面板,找到「斜切」功能。使用「水平方向」和「垂直方向」来调整这三个形状的斜度。调整一下大小和角度,把它们拼合在一起。Pixso斜切插件 可以一键将略显单调的图层转换为带有透视效果的 2.5D 图层。 选中待转换的图层,分别调整插件面板「水平方向」和「垂直方向」的参数,可以实时预览转换后的2.5D插画绘制效果。完成调整后,点击右下角的「应用」,即可将调整得到的效果应用到图层上。

2.5d插画绘制

再调整一下颜色,2.5D插画绘制的房子基础结构就搭建好啦!

如果觉得绘制2.5D插画的形状太单调,还可以重复以上步骤,添加一个屋檐来丰富视觉。确定了基本的配色方案以后,为了使设计的整体元素具有一致性,避免多样式导致的视觉效果不佳以及给用户带来的认知障碍,我们可以使用Pixso的组件和样式创建功能,创建一个颜色的样式。

在Pixso中,颜色样式可以应用于填充样式、描边样式和文字,也可以为图像或渐变创建颜色样式。具体创建步骤为:

Step1:选择需要创建样式的对象。

Step2:在右侧属性面板中,单击要保存的属性的样式图标。

Step3:点击颜色样式面板中的【+】号,创建新样式。

Step4:为样式命名,然后单击【创建样式】。

2.5d插画绘制

第二步:绘制纪念碑谷装饰元素

2.5D插画绘制的装饰元素分别有门、砖块和绿植。

门。新建一个圆形和方形,拼出一个门的形状。然后把圆形和方形全选中,点击上方的「路径拼合」,调整颜色为#BE656C,再复制一层形状,置于底层。修改一个浅色作为门的厚度,颜色为#FFCDDD。

2.5d插画绘制

使用钢笔工具,绘制一个三角形,调整一下颜色,作为内部空间。打开右上角的插件面板,找到「斜切」功能,将「垂直方向」设置为30。在传统工具中,大多数钢笔工具(例如sketch)必须形成闭合,而Pixso的 矢量网络 没有规定的方向,在不创建单独的路径对象的情况下,再分叉到不同方向,也可以在一个节点上创建多条路径免费注册Pixso账号,体验更灵活的钢笔工具。

2.5d插画绘制

砖块。新建一个正方形,再使用钢笔工具,绘制出一个等边三角形。在复制三份,调整一下三角形的角度,分别放在正方形的四个角落。

2.5d插画绘制

全选形状,点击上方的「减去顶层」和「路径拼合」,调整颜色为#FFDA36后,就得到一个基础的2.5D插画砖块啦!

将砖块复制两层,调整一下大小,将他们叠起来。选择上方的「减去顶层」,再放回原来的砖块上,调整颜色为#DD8026。将砖块再复制一层,调整一下大小,颜色改为#DD8026。最后全选形状将其组合,打开右上角的插件面板,找到「斜切」功能,将「水平方向」设置为30。再调整一下角度。

2.5d插画绘制

可以再复制两层,调整一下颜色,将#DD8026 和 #E3AABD分别作为厚度和阴影,增加2.5D插画绘制立体感。

2.5d插画绘制

绿植。新建一个正方形,打开左上角的插件面板,找到「斜切」功能,将「水平方向」设置为30,复制两份,分别调整一下角度和颜色。上面的颜色为#FFA374,左面的颜色为DB344A,右面的颜色为#FB5960。

2.5d插画绘制

泥土和投影。再复制两个顶层形状,修改一下大小和颜色,分别作为泥土和投影。2.5D插画绘制的泥土颜色为#5D3C13,投影的颜色为#E0ADBE。

2.5d插画绘制

叶子。新建一个椭圆,双击进入形状编辑模式,调整两侧的锚点,使其往下拖,让2.5D插画绘制的叶子顶端变尖锐。复制两份,调整一下角度和颜色。叶子的渐变颜色为:#AFFFE4 100%到 #2F9C8F 100%。

2.5d插画绘制

最后将花盆和叶子拼合起来,绿植就做好啦!

2.5d插画绘制

第三步:创建组件,拼合纪念碑谷元素

将以上元素,分别右键选择「创建组件」,各自复制出一份实例,再将它们拼合在一起,这样就完成了2.5D插画绘制其中的一个部件啦!

在Pixso中,组件的使用方法也非常简单:设计师可以将自己经常使用的样式创建为组件外,将组件上传至团队资源库与其他成员共享使用,当主组件修改,其他实例组件均可以选择同步更新,无需手动,这既提高了设计效率,也防止在手动修改过程中出现遗漏。当使用的组件数量增多,Pixso还设置有组件搜索功能,设计师可自定义命名每一个组件,一键搜索,方便迅速查找需求,快捷使用。

2.5d插画绘制

你还可以给2.5D插画绘制添加一些花纹作为装饰哦!如果你有多个相同形状的部件,使用刚刚创建的组件,即可实现一键改色。

2.5d插画绘制

按照上面的思路,再制作出其他建筑建构,逐个拼合,纪念碑谷2.5D插画绘制就完成啦!

2.5d插画绘制

用Pixso绘制纪念碑谷2.5D插画

2.5D插画的整体风格非常奇幻,背景空间深远,前景的渐变色绚丽夺目。通过同类色、互补色、类似色搭建的几何形状,构成了缤纷的建筑空间。从构图上看,2.5D插画绘制运用了视错觉的方法,完成了3D和2D空间的扭转转化。你也可以直接在Pixso社区搜索3D/2D/插画,直接复用插画设计素材。使用 Pixso在线协同绘制2.5D插画,直接拖拽使用Pixso自带的设计资源库,省去大量重复劳动,让设计更流畅,协作更高效!马上前往Pixso资源社区,免费领取2.5D插画绘制素材。

2.5d插画绘制素材

协作设计工具Pixso的特点

2.5d插画绘制工具Pixso

作为一款为本土设计师量身打造的国产设计工具,Pixso因其实时协作、精细化设计工具等特色功能,收获了广大使用者的喜爱。Pixso在绘制2.5D插画上表现优越,除了斜切插件外:

  • Pixso的插件广场汇集了多色矢量网格、抠图、旋转复制、大厂色板、智能填充等众多宝藏插件,插件内置于工作台中,可以一键调用。

  • Pixso作为一款插画设计工具,在软件中为用户提供了非常多的插画设计功能。Pixso中的钢笔工具、智能形状工具都能帮助用户进行插画设计。网页使用感堪称丝滑,完全不存在延迟、卡顿等状况。

  • Pixso是新一代设计协作工具,不仅实现了和Figma、 Sketch、Adobe XD 的无缝衔接,更基于优秀的组件变体、自动布局等特色功能,让设计师在网页上就可以尽情自由创作。

现在前往 Pixso 官网注册账号,可以享受到Pixso会员的所有权益:无限文件数量、无协作者人数限制、无限云存储空间等等,快来尝试一下吧!