拟物 3D 风格图标设计教程,5分钟即可掌握!

发布时间:2023-01-12 14:31:19

拟物化图标也被称为写实风格,这种设计方式强调图标的质感和形态,通过模仿真实物品的材质纹理、质感和细节等元素来达到逼真的效果。这种图标能帮助用户快速执行命令和打开应用程序,尽管看起来很简单,但制作时需要注意表现质感和光影细节,同时还要考虑图标的简洁性和图形的概括性。本期我们将学习如何制作3D拟物风格的图标,一起来看看本期设计教程吧!

1、拟物化风格的设计原则

教程

在设计拟物化图标时,要注意图标造型的取舍。过多或过少的细节都会使用户在理解上遇到困难,甚至看不懂图标的含义。图标的写实程度也应适中,过于写实可能导致用户无法识别要表达的意义。因此,在设计图标时应注意取舍。

拟物 3D 风格图标设计

材质

材质就像是给图标穿上漂亮的衣服一样,使用合适的材质和纹理可以让用户感受到对品质的追求,提高图标的点击率。木质、皮质或塑料通常可以产生复古的感觉,金属可以给人带来科技感,自然界中的事物能唤起亲和感,而食物的质感则能激起人的食欲感。使用合适的质感和纹理表现可以提升图标的质感,同时提高用户的视觉感受。

光影色彩

在图标上加上光影和色彩就像是给它们注入了灵魂和活力,使它们变得更丰富、更有质感。拟物化图标中的光影和色彩是将“真实”物象还原的重要环节,使图标从二维转换为立体的三维效果。光影和色彩从不同角度、不同空间的组合效果,也会给用户带来丰富的视觉体验。

2、拟物 3D 风格图标设计教程

时钟-主要结构分析

主体:统一的样式背景板、时钟表盘

质感:背景板的纹理、表盘的纹理、指针的质感

背景框(质感)

复制第一天创建的背景框进行创作。

表框(底部)

绘制 232*232px 的圆形,填充 #454545。

添加描边:外部、大小 2、线性渐变由上至下 #B6B0AA - #FFFFFF 。

表框(加强质感)

绘制 208*208px 的圆形填充 #383838。

添加内阴影:参数「0、0、4、2」、颜色 #000000 25%·添加外阴影:参数「0、1、1、0」、颜色 #FFF4D6 25%

复制当前圆形,调整尺寸 184*184px,填充色修改为 #333232,阴影效果不变。

表盘

绘制 160*160px 的原型填充 #FF9C00。

添加描边:大小 1、内部、线性渐变由上至下颜色 #FFFFFF、不透明度50% ,颜色 #FFFFFF、不透明度0%。

外阴影:参数「-1.2、-1.2、1.2、0」、颜色 #FFFFFF、不透明度 15% 。

外阴影:参数「1.2、1.2、1.2、0」、颜色 #19191A 。

指针

绘制 3 个矩形,圆角为 1,如图所示。

时针和分针:填充参数 #3D3D3D,旋转角度如图。

秒针:填充参数 #F4F4F4,旋转角度如图。

中心轮轴1

绘制 26*26 px的圆形,角度渐变从左到右依次顺序,参数:颜色 #B8B8BA - #F3F3F3 - #B4B4B8 - #D3D3D3 。

添加描边:大小 1、内部、渐变由上至下 #FFFFFF 0% - #FFFFFF 100% - #FFFFFF 0% 。

外阴影:「2、2、3、0」颜色#000000 20% 。

中心轮轴2

绘制 1 个15*15 px的圆形,线性渐变由上至下 参数 #FFFFFF - #E4E4E4 。

添加描边:大小 1、内部、渐变由上至下 #FFFFFF 0% - #FFFFFF 100% - #FFFFFF 0% 。

外阴影:「1、1、2、0」#000000 15%。

中心轮轴3

绘制 4 个4*12 px的矩形,圆角值最大,填充 #FFCC00 。

摆放适当位置,如图所示,添加适当阴影,时钟图标就绘制完成啦~

以上就是全部的拟物 3D 风格图标设计教程,看完之后,可以使用即时设计,一起跟着教程自己做一组拟物 3D 风格图标吧!