赞助商
立即赞助

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

UI设计3年前 (2021)更新 流光
2.7K 0 0

背景

QQ 游戏中过设改版之后,我们重新设了整体的世界观——多彩的游戏宇宙。并且对多模块及内行了新的设升级,其中也包括重的图标图形。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

1. 延展思考

此基于目前较为完图标图形,希望可以拓展出更多不样设计内容,并可以应用在不位,例如空白页、运内容、背景等等。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 问题析

基于目前的图形可以显的得 2 个问题:

  1. 图标的图形整相对简单,延展使用比受;
  2. 2D 图标的视觉冲击力较弱,较难足计氛围的表现。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

3. 设启发

3D作 2020 的主流设趋势之一,可以很好表达设氛围。因此试跨次元的设方式,从 3D 图形的角度去思考,试多可能性。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

下面主分享我制作 3D 图标中的一些方法流程,以及 2D 与 3D 图形设中思考的差异性,希望可以家互相学习,一起探讨这方面的设。

整体的流程及软件

虽然 3D 的图标,但实际使用到的软件包括:Cinema 4D(C4D)、Sketch、Photoshop(PS)、illustrator(AI)。

整体的大概流程:

  • Sketch:绘制 2D 图标;
  • AI:转换路径(C4D 够识别 AI 8.0 版本的路径);
  • C4D:建模、渲染、动画;
  • PS:后期输出的调整,包括饱和度、亮度、裁切等;
  • AE:最后合成所有动画,配音效,最后输出完视频。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2D向3D转化的基本原则

3D 与 2D 最大的差别在于多一个维来表达图形,因此我们在 2D 向 3D 转的过程中,需要思考一些基本的原则,并且结合这些规则,降低 3D 图标与 2D 图标违和感。在这次的 3D 图标中我总结了几条基本规则。

1. 圆变球

在 3D 软件中表达圆有 2 种方式:球体、圆柱体。在实际的设计中,我们需要根据实际情况判断是否变成球体或者圆柱体,这里建议单体呈现的圆形设计成球体,在这种情况球体相圆柱体更表达圆形的视觉感受。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

例如面气泡的例子,球体的表现圆柱体的表现更饱满,光影效果更丰富。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 方变块

与面的规则比较接近。当我们 2D 图标中使用矩形之类的图形,建议使用立方体表达。优点:立方体可以增加图标的细节表;增加厚度利于光影的表达。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

例如下面礼的图标,我们实际的 3D 场景下应该贴合实活中的认知,设礼盒子的效果。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

3. 结合实认知

除以上 2 议,我们在实模时候需要结合实认知而定。例如币、游戏卡设计应该是带有厚度片形;钱设计成折叠效。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

4. 适当简化图形

2D 图标向 3D 图标的转换过程中,需要适当进行简化,一些不必要的内容可以适当进行删减。主要的目的是:

  • 降低模型的复程度,「度细致」的模型在际渲染中能出现反效果;
  • 减少面和减少光的互相反射作用,提升视觉的简洁性。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

5. 增强空间思维

2D 的图标只一平面,因此部分况下一种「纸片性」的思维,常规的 2D 向 3D 的转换思维增加厚度,但实际出的效果并不理。因此转换的过程中,需使用空间的思维去思考, 3 维的空间中应该怎么样的。例如下载收件箱的图标,常规的思维可能 2D 的图标增加厚度,但转换空间思维就让其具立体感空间感的形体。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

6. 图标状态补充

在实模会发现,很多模型在静态下是可以进简单处理,结合动态或实认知,需要相关细节状态补充。例如礼物和宝箱图标开盖效,此把实盖子和盒子/箱子模型做出来,以便于动画实表。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

基于图标的图形分类

在进入 C4D 之前,需要清楚不同图形可以使用什方式建模,因此可以进行一个简的类,为:常规图形和异形。种图形在建模中的方式会有一些差异,当然一个图标也可能包含这种类型,因此实际操作中可以灵活理。

1. 常规形:使用基础物体建模

部简的有规则的图形,可以直使用 C4D 的基础物体(例如:立方体、球体、柱状体、锥体等),通过对基础物体的调整后得模型,例如下面的图形。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

案例展示

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 异形:AI路径+挤出

在际操的程中现部分模型难通基础形整得到,或是直接建模比耗时。因此我们以导 AI 路径挤出的方式来得到我们的模型。例下面的图形

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

案例展示

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

建模实操

基于上的上 2 种类的图形,这里分享一制作的过程和心得。可够全面,但希望大可一起来补充互相习。

1. 对齐中心点

基础建模对齐中心轴点是一切开始的重中之重,这里会涉及到很多后续的调整和他命令的应(例如挤、对称等命令)。例如一些中阶的人物建模是非依赖中心点对齐来实现对称命令的。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 结合图

 C4D 视图本身具多视图,可以结合不同视图导入不同视角的平面结构行制作,常见况下的建模可以导入三视图(例如角色、人之类的)。图标相对很简单的,所以这里只应用面视图即可,其他的视角可以自行脑补后制作。

结合图像的好处:

  • 加直观看到图标造型,提升建模效率;
  • 对于模尺寸的把握更明确,我们可依据实际设计的大小,在 C4D 进行同样的设定;
  • 方便续路径对齐的使用(若导路径未对齐到中心点,以通手动整)

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

操作流程:视图下捷键 shift+V 调出视图背景——选择背景——添加图。或视图选项中调出,然后配置即可。

3. 结合径

如图标类型中的描述,部分异形的图标如果直接 C4D 中绘制会相对耗时,因此我们可以结合径的方式,再使用挤出的命令实我们的模型,这样可以提升异形体建模的效率。

C4D 中对 AI 的图层只会读取颜色的边缘,然后生成路径。因此在 AI 中编辑的路径,依据实际的情况择填充或者描边,然后再拖拽进 C4D。如产生的效果对,左边为填充图形,右边为描边图形。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

操作流程:使 AI 导 8.0 版本的路径——拖拽进 C4D——添挤命令——设置挤及封顶样式。

4. 使变形器

一些简单的形变可通过变形器的应,得到我们想要的。例如面的案例,外星人脸是在圆形的基础上使 FFD 进行调整,而宝箱则在方形的基础上使锥来达到圆弧的效果。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

材质及布光

C4D 的渲染效果主依赖于质灯光的配合,熟练者往往可以依靠验效率的制作,但我们也可以通过锻炼总结出一些常用的质参数或者布光的置提高效率。因此我也从这次的 3D 图标制作中总结了一套关于质布光的方法。

1. 全局光照与天空配合

C4D 场景的主光源我们可以通过全局光照+天空的方式营造整体的氛围,这组光的特点于具比较柔的效果,并且模拟自然的环境光效。

全光照开启后,需要依赖灯光、天空光来对物体进行照射,如果设定后未增灯光或者天空,在渲染时只渲染一片黑色。(全光照——要是模拟真实的光照效果,通过光源投射到物体上再经过无数次的反射和折射来的效果,因此解释为么只全光照渲染来容。)

操流程:渲染设置——效果——局光照

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

添加天空增加天空为基础光照补充

操作流程:地面快捷入——选择空——添加材质球——勾选发光——添加 HDR 贴图。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

下面通过一些案例对比来全局光照及空的对比效果

全局光照-开和关的差异

从下面的案例可以显差别,全局光照关闭后的图标相对暗淡一些,整体图标的光反射也相对减弱了许多。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

有无天空的差异

天空有助增强图标的光感,添加天空整图标的细节和质感也相对更加富。相对,无天空整图标质感则有所下降。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

天空是否增HDR贴图的差异

添 HDR 贴图可增强场景物体的环境反射,物体材质更丰富增强细节质感。在一些强反射的场景非依赖 HDR 贴图的使。从案例对,可明显看到差异性。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 灯光分布

整体添加三盏灯光营造整体的场景氛围。主分:主光(强)、补光(增强阴影面的亮度)、背光(补充背面环境的光源,增强环境光氛围,勾勒轮廓)。实际的场景中可以根据实际的反射效果氛围,调整灯光的置、与体的间距、明暗度。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

灯光对于体的作用会随颜色的差异,产的光亮度也会所差异,因此实际的使用过程中,对于灯光的置、反射的细节都可以行微调达到优的效果。

色相的对:同色相在同样的灯光作产生的效果具有稍微较小。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

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

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

实际案例对:从面的实际案例对可明显看同样灯光同色相的明显差别,绿色的两产生过曝光。因此可通过调整灯光的距离或者亮来解决这一问题(如上面灯光分布建议)。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

3. 物体材质

3D 图标由于相对简单,质主使用颜色反射的配合就可以得到不错的质感。当然如果希望质感表加丰富,亦可考虑增加其他的内项行补充

颜色的设

图标的颜色基本与原图标的颜色保持一致,但部分颜色但实际渲染效果会存些许差异,因此我们质也可以根据视觉效果行微调,视觉保持统一的颜色感受。例如礼的图标,如果按原的颜色,亮部会过渡曝光,因此当提高了亮部颜色的饱度。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

颜色偏

在 3D 场景内是过各与颜色反射而成,此即便样颜色,在实渲染出来 3D 图标和 2D 图标也会存在定颜色偏。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

4. 反射的设定

反射是本次 3D 图标中材质非常重要的一环,基本的效果都是来源于对反射的定。整体主要定了反射的类型、粗糙度、反射度、高光度、层遮罩的颜色。由于图标的颜色并不完全一致,因此在粗糙度、反射度、高光度是一组动的参数。

参数变化的对比

如下面的案例,针对不同颜色的图标在粗糙度、反射度、高光度上都有差异性,因此不是说定好一组参数之后就那个完全适用所有的颜色,因此这会根据实际情况调整,但整体的视觉效果保持一致。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

遮罩的设定差异

除基础的反射类型及参数,还需要在遮罩中添加菲涅耳来增强反射的富度。默认的菲涅尔是一组黑白的颜材质,我们以通整暗部的颜来增强图标的颜饱和度和富度,下案例对比。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

动效设计

静态的 3D 图标显得精致,增效之后的 3D 图标则除精致外,还更富有趣味性和感。3D 的效与 2D 有着明显的差别,可更多维地思考物体的轨迹、变方式。

1. 动效图标分类

首先我们需要根据同对需要制作效的图标进行简单的分类,这个分类的要作在于明确同图标的效设计方式,为效的设计方式进行铺垫。根据已有的图标划分为:单体形、组合、拼形。

单体形

图标单个或单组形体呈现,或者整体属于某个已存在的事物或者形体,整体图形容具有可切割性。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

组合型

图标通过两组或两组以的图形内组合,图标由主形(图标实际的外轮廓造型)点缀图形(用于图标表意或者提升图形内涵)组合的图标,图标可行拆分或者重组后形动效。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

拼装形

图标本身可能在现实不存在事物或物体,过创意思考而到图形,图标动效更具有可发散性和可塑性。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 动效的表现方式

结上面的类型差,在计动效的候也会稍稍不同。重点在于表达不同的图标有的性,因此可以根据这些性去计图标的动画方式。

体运动

对应体图形,图标动效通过身的位移、旋转、形变而产生,这类图标的动效比较靠近现实生活中触的知或图形动效本身有普适性认知。例如火箭升空、UFO 飞碟、放礼炮、开箱等。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

组合运动

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

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

件

整体效相前面两种类较为简单,通过某个图标上的件来表达效的容,因此这个件需要是图标上较为明显的图标特征,这样更人具有记忆点。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

音效设计

音效这次 3D 图标设计睛笔,结合音效可以更加丰富地表图标动效趣味性。不图标动画反馈出来音效是不样,此赋予应音效反馈才是更合理表。

1. 选择音效

在实配音效过程发现,部分图标比较难找到相关联音效。我们可以过较为类似或者可以表出该图标动画过程声音反馈音效。例如活动小礼炮用是开葡萄酒塞声音,开宝箱用是开声音,飞碟(UFO)用是组电子音效等等,并从相关声音窃取其段需要。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 组音效

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

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

动画集合

结合界面UI的尝试

3D 的图标或 3D 类的容如何与 UI 结合?相信大时有思考这方面的容。基于这次的 3D 图标设计,我进行了初步的尝试,从几个方面来简单聊聊这方面的容。

1. 3D图标对于UI设的作用

试之,我们需明确 3D 内对于 UI 设作用什么?我简单总结了几关键点:

  • 增强 UI 氛围,结合 3D 动效提升设计趣味性;
  • 增强视觉表力,出彩的 2D 设虽然可以满足,但 3D 的内往往可以给人加不一样的视觉感受;
  • 增强视觉维和立体空间感,表现形式自带的表现,相规的设计更具有立体感。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

2. 3D ICON X Tab bar

当计 Tabbar 的候,首先想的表现方式往往是有趣的图标图形计、结动效之类的方式。但或许也可以考虑使用 3D 的图标+动画的方式来表达的计。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

3. 3D ICON X 运营内容

一相对简单的运营内容,我们以考虑将元素进行 3D 化设计,样以一定程度增强整运营的视表现力。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

4. 3D ICON X 空白页插图

3D 插图是 2020 的设计趋势之一,结合 3D 的插图整体的设计更具有氛围感。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

5. 3D ICON X COVER

将背景中的某些元素结合 3D 图形行设,让整体的氛围加具空间感立体感。

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

最后总结

本结合实项目内容进不维度设计尝试,并希望,可以从去寻找到更多设计可能性和突破。然这是系统化设计思考步,可以启发后续更加深入 3D 设计探索。

欢迎关注作者微信公众:「ID设站」

如何从零开始完成一套3D图标设计?来看大厂的实战案例!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如期而至,这是标签栏控件总结的第二期。这一期真是掏空职业经验,希望对你的工作有所帮助。 这一期我们来聊一聊标签栏中...
UI
编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计
海参君注:本文译自 Julia Dzyubina 的 Designing better product pages。作者为用户体验设计公司 Clay 的艺术总监。作者在文...
UI
小桔车服成立于2018年4月,是滴滴旗下的车主服务平台,提供驾考、购车/租车、金融服务、能源消耗、维修保养、二手车置出等线...
中台设计
在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘...
UI 设计
编者注:本文腾讯设计师用「云游敦煌」的小程序设计实战案例,为你揭秘大厂的产品构思方法、设计历程等。 缘起 在工作中遇到...
云游敦煌
近年来,设计圈有两大趋势不容忽视,一是人工智能、神经网络、深度学习无疑是时下最热门的科技名词,「人工智能设计」这个词...
Banner
我们在画图标的时候,往往会忽略掉一个重要的问题:缺失品牌感。也就是说,这个图标和我们的实际品牌、业务并没有什么联系,...
图标