搜索

热搜: 活动 交友 discuz

在线
客服

迪恩在线客服服务时间: 9:00-24:00

选择下列客服马上在线沟通:

快速
发帖

客服
热线

15562103797
7*24小时客服服务热线

关注
微信

关注微信二维码
顶部
Discuz! Board 门户 资讯 网页 查看内容
0

腾讯设计师:如何从零开始完成一套3D图标设计?

摘要: QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。1. 延展思考因此基于目前较为完整的图标图形,希望可以拓展出更 ...

QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级,其中也包括重要的图标图形。

1. 延展思考

因此基于目前较为完整的图标图形,希望可以拓展出更多不一样的设计内容,并且可以应用在不同的位置,例如空白页、运营内容、背景等等。

2. 问题分析

基于目前的图形可以很明显的得到 2 个问题:

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

3. 设计启发

3D作为 2020 的主流设计趋势之一,可以很好地表达设计氛围。因此想尝试跨次元的设计方式,从 3D 图形的角度去思考,尝试更多可能性。

下面主要是分享我在制作 3D 图标中的一些方法和流程,以及 2D 与 3D 图形设计中思考的差异性,希望可以跟大家互相学习,一起探讨这方面的设计。

整体的流程及软件

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

整体的大概流程:

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

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

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

1. 圆变球

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

例如下面气泡的例子,球体化的表现比圆柱体化的表现更加饱满,光影效果更加丰富。

2. 方变块

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

例如下面礼物的图标,我们在实际的 3D 场景下应该更贴合现实生活中的认知,设计成礼物盒子的效果。

3. 结合实际认知

除以上的 2 种建议之外,我们在实际建模的时候还需要结合实际认知而定。例如金币、游戏卡的设计应该是带有厚度的片形;钱包设计成折叠的效果。

4. 适当简化图形

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

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

5. 增强空间思维

2D 的图标只有一个平面,因此大部分情况下是一种「纸片性」的思维,常规的 2D 向 3D 的转换思维是增加厚度,但实际上出来的效果并不理想。因此在转换的过程中,需要使用空间的思维去思考,在 3 维的空间中应该是怎么样的。例如下载和收件箱的图标,常规的思维可能是在 2D 的图标上增加厚度,但转换成空间思维就是让其具有立体感和空间感的形体。

6. 图标状态补充

在实际建模的中会发现,很多模型在静态下是可以进行简单处理的,但结合动态或实际认知,就需要相关细节状态补充。例如礼物和宝箱图标的开盖效果,因此把实际的盖子和盒子/箱子的模型做出来,以便于动画的实际表达。

基于图标的图形分类

在进入 C4D 之前,需要清楚不同图形可以使用什么方式建模,因此我们可以进行一个简单的分类,分为:常规图形和异形。两种图形在建模中的方式会有一些小差异,当然一个图标也可能包含这两种类型,因此实际操作中可以灵活处理。

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

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

案例展示

2. 异形:AI路径+挤出

在实际操作的过程中发现部分模型较难通过基础形调整得到,或是直接建模会比较耗时。因此我们可以导入 AI 路径再挤出的方式来得到我们的模型。例如下面的图形



鲜花

握手

雷人

路过

鸡蛋
本文作者
2020-6-8 22:46
  • 1
    粉丝
  • 523
    阅读
  • 0
    回复

关注迪恩网络

扫描关注,了解最新资讯

联系人:高经理
电话:15562103797
EMAIL:3318850993@qq.com
地址:威海市创新创业大厦2702
热门评论
排行榜

Design

教程灵感就看DEAN

优质教程每日更新

Dean17.com旗下教程网站

  • 官网微信

    每天官微五分钟一年萌新变大神

    扫码关注
  • 新浪微博

    每天50篇设计干货30万设计师关注!

    访问新浪微博
  • 官方客服
765W

Design新媒体等你来关注

Copyright   ©2015-2016  DiscuzXPowered by©Discuz!技术支持:迪恩网络    ( 鲁ICP备 7210185123111号 )