3D图标设计是现在的流行趋势,然而对于习惯设计2D图标的设计师来说,不太清楚怎么绘制3D图标。下面分享一个实战案例,帮助大家了解3D图标的设计流程。
设计软件


Sketch:设计 2D 图标。
AI:转换路径。
C4D:建模、渲染、动画。
PS:后期调整。
AE:合成动画,配置音效,输出视频。
2D转3D图标原则

1、在3D软件中表达圆的方式有球体、圆柱体。在实际设计中,通常都会选择变成球体。比如下面的气泡,球体化比圆柱体化表现更加饱满。

2、在2D图标中使用矩形之类的图形,在3D中需要用立方体。比如下面礼物图标,在3D场景要设计成礼物盒子效果。

3、在实际建模的时候需要结合实际。例如金币、游戏卡设计是有厚度的片形。

4、2D图标转3D图标的过程中,需要有一些简化,并删除一些不必要的内容。还有要减少面和光的互相反射,提升视觉的简洁性。

5、2D转3D需要用空间思维去思考,通常给2D图标增加厚度,让其具有立体感和空间感。

6、设计3D图标不仅要给2D图标增加厚度,简化图形,还要增加一些细节。比如可以制作出下面宝箱图标的开盖效果。

C4D建模

在使用C4D建模前,需要清楚不同图形使用的建模方式也不一样。
1、常规形:基础物体建模
简单的图形直接使用C4D的基础物体,并通过简单调整得到模型。


2、异形:AI路径+挤出
可以导入AI路径,再挤出来获得模型。


3D图标建模实操

1、对齐中心点
基础建模对齐中心轴点,然后使用挤出、对称等命令调整模型。

2、结合图像
使用C4D视图结合不同视图导入不同视角的平面结构制作模型,图标可以使用C4D的正面视图进行建模,其他视角自行脑补制作。
结合图像可以直观看到图标造型,提升建模效率;也可以根据实际设计调整模型尺寸。

操作流程:正视图下快捷键shift+V调出视图背景-选择背景-添加图像。或者在视图选项中调出,然后配置。
3、结合路径
部分异形的图标直接在C4D 中绘制会相对耗时,因此可以结合路径,使用挤出命令来制作模型。C4D对AI的图层只会读取颜色的边缘,并生成路径。因此在AI中编辑的路径,根据的情况选择填充或者描边,然后拖入C4D。

操作流程:使用 AI 导出路径-拖进C4D-添加挤出命令-设置挤出高度及封顶样式。
4、使用变形器
一些简单形变可以使用变形器制作造型。下面案例中,外星人脸的制作是先绘制圆形,再使用FFD进行调整。宝箱则是先绘制方形,使用锥化来达到圆弧效果。

材质布光

C4D的渲染效果依赖于材质灯光的配合,这次的3D图标设计中总结了一套关于材质和布光方法。
1. 全局光照与天空配合
C4D场景的主光源我们可以通过全局光照+天空的方式来营造整体的氛围,这组光的特点在于具有比较柔和的效果,并且模拟自然的环境光效。
全局光照开启后,需要依赖灯光、天空光来对物体进行照射,如果设定后未增加灯光或者天空,在渲染时只能渲染出一片黑色。(全局光照——主要是模拟真实的光照效果,通过光源投射到物体上再经过无数次的反射和折射出来的效果,因此也能解释为什么只加全局光照渲染不出来内容。)
操作流程:渲染设置——效果——全局光照

添加天空增加天空作为基础光照补充
操作流程:地面快捷入口-选择天空-添加材质球-勾选发光-添加 HDR 贴图。

下面通过一些案例对比来看看全局光照及天空的对比效果
全局光照-开和关的差异
从下面的案例我们可以明显看到差别,全局光照关闭后的图标相对暗淡一些,整体图标的光反射也相对减弱了许多。

有无天空的差异
天空有助于增强图标的光感,添加天空后整体图标的细节和质感也相对更加丰富。相对,无天空整体图标质感则有所下降。

天空是否增加HDR贴图的差异
添加 HDR 贴图可以增强场景内物体的环境反射,让物体材质更加丰富增强细节质感。在一些强反射的场景下非常依赖 HDR 贴图的使用。从以下案例对比,可以明显看到差异性。

2. 灯光分布
整体添加三盏灯光来营造整体的场景氛围。主要分为:主光(最强)、补光(增强阴影面的亮度)、背光(补充背面环境的光源,增强环境光氛围,勾勒轮廓)。在实际的场景中可以根据实际的反射效果和氛围,调整灯光的位置、与物体的间距、明暗度。

灯光对于物体的作用会随着颜色的差异,产生的光亮度也会有所差异,因此在实际的使用过程中,对于灯光的位置、反射的细节都可以进行微调来达到最优的效果。
色相的对比:不同色相在同样的灯光作用下产生的效果具有稍微较小。

明暗的对比:深色和浅色在同样的灯光作用下产生的效果差别较大。

实际案例对比:从下面的实际案例对比可以明显看出同样灯光下不同色相的明显差别,绿色的两部产生过度曝光。因此可以通过调整灯光的距离或者亮度来解决这一问题(如上面灯光分布建议)。

3. 物体材质
3D 图标由于相对简单,材质上主要使用颜色和反射的配合就可以得到不错的质感。当然如果希望在质感表现上更加丰富,亦可考虑增加其他的内容项来进行补充
颜色设定
图标的颜色基本上与原图标的颜色保持一致,但部分颜色但实际渲染效果会存在些许差异,因此我们在材质上也可以根据视觉效果进行微调,视觉上保持统一的颜色感受。例如礼物的图标,如果按原来的颜色,亮部会过渡曝光,因此适当提高了亮部颜色的饱和度。

颜色偏差
在 3D 的场景内是通过各种光与颜色的反射而成的,因此即便同样的颜色,在实际渲染出来的 3D 图标和 2D 图标也会存在一定颜色偏差。

4. 反射
反射是本次3D图标中材质非常重要的一环,基本的效果都是来源于对反射的设定。整体主要设定了反射的类型、粗糙度、反射强度、高光强度、层遮罩的颜色。由于图标的颜色并不完全一致,因此在粗糙度、反射强度、高光强度是一组动态的参数。
参数变化的对比
如下面的案例,针对不同颜色的图标在粗糙度、反射强度、高光强度上都有差异性,因此不是说设定好一组参数之后就那个完全适用所有的颜色,因此这里会根据实际情况调整,但整体的视觉效果保持一致。

层遮罩的设定差异
除了基础的反射类型及参数,还需要在层遮罩中添加菲涅耳来增强反射的丰富度。默认的菲涅尔是一组黑白的颜色材质,我们可以通过调整暗部的颜色来增强图标的颜色饱和度和丰富度,如下案例对比。

动效设计

静态的 3D 图标显得精致,增加动效之后的 3D 图标则除精致外,还更加富有趣味性和新鲜感。3D 的动效与 2D 有着明显的差别,可以更多维度地思考物体的运动轨迹、变化方式。
1. 动效图标分类
首先我们需要根据不同造型对需要制作动效的图标进行简单的分类,这个分类的主要作用在于明确不同图标的动效设计方式,为动效的设计方式进行铺垫。根据已有的图标划分为:单体形、组合型、拼装形。
单体形
图标以单个或单组形体呈现,或者整体造型属于某个已存在的事物或者形体,整体图形内容具有不可切割性。

组合型
图标通过两组或两组以上的图形内容组合而成,图标由主形(图标实际的外轮廓造型)和点缀图形(用于图标表意或者提升图形内涵)组合而成的图标,图标可进行拆分或者重组后形成动效。

拼装形
图标本身可能在现实中不存在的事物或物体,通过创意思考而得到的图形,图标的动效更具有可发散性和可重塑性。

2. 动效的表现方式
结合上面的类型差,在设计动效的时候也会稍稍不同。重点在于表达不同的图标具有的特性,因此我们可以根据这些特性去设计图标的动画方式。
自体运动
对应单体图形,图标动效通过自身的位移、旋转、形变而产生,这类图标的动效比较靠近现实生活中接触的感知或图形动效本身具有普适性认知。例如火箭升空、UFO 飞碟、放礼炮、开宝箱等。

组合运动
对应组合图形和拼装图形,多图形运动组合而成,图标的多个部件可从不同轴向开始进行不同的轨迹运动,最终进行完整的图标融合。各个部件本身可能也存在位移、旋转、形变等动效,可以更大程度丰富图标的动效表现。

部件运动
整体动效相比前面两种类型较为简单,通过某个图标上的部件运动来表达动效的内容,因此这个部件需要是图标上较为明显的图标特征,这样更能让人具有记忆点。

音效设计

不同的图标动画反馈出来的音效是不一样的,因此赋予对应的音效可能让用户了解图标功能。
1. 选择音效
在实际的配置音效的过程中发现,部分图标比较难找到相关联的音效。但我们可以通过较为类似或者可以表达出该图标动画过程中的声音反馈的音效。例如活动小礼炮用的是开葡萄酒塞的声音,开宝箱用的是开门的声音,飞碟(UFO)用的是一组电子音效等等,并且从相关声音中窃取其中一段需要的。

2. 组合音效
部分图标的动画效果很难通过一条音效进行表达,因此需要叠加 2 组或者 2 组以上的音效来丰富整体的感受。例如手柄人图标叠加了三组不同的音效来表达,游戏卡叠加 2 种不同的音效。

3D图标设计案例已经制作完成,希望上面的知识能够帮到你。