拟物图标如何设计?5个步骤绘制出高保真3D拟物图标!

更新时间:2023-02-10 19:25:57

拟物图标(also known as metaphorical icons)是指用图形或象征性图像来表示某些概念或功能的图标。这类图标通常是为了让用户更容易理解和记忆功能而设计的。拟物图标通常与其所代表的概念有关,如一个电视机图标代表电视功能,一个音乐图标代表音乐播放功能等。这类图标可以帮助用户快速找到所需的功能,也可以为产品增加视觉吸引力。今天我们就给大家分享一个拟物图标设计教程——绘制星空指南针,5个步骤绘制出3D拟物图标!

拟物图标设计

1、新建画板

首先使用即时设计新建一个画板,可以使用快捷键A或者左侧工具栏的#图标。尺寸为1300X840px。然后选中这个画板,在右侧的属性检查器中设置填充色。找到填充选项卡,选择线性渐变,分别填充#A0DDFF和#FFFFFF,透明度为100%。

2、绘制指南针

使用【圆形工具】绘制一个 500 x 500px 的圆形(按住Shift键,可以快速绘制正圆形)。选中这个圆形,在右侧的属性检查器中找到【填充】选项,选择线性渐变,从上到下的颜色分别为 #51ABFF 和 #0057FF。

a.添加阴影,设置参数:内阴影、颜色 #000000、透明度 25%、大小「0、-7、0、0」; 再添加阴影,设置参数:内阴影、颜色 #CBEAFF、透明度 32%、大小「0、5、0、0」。

b.选中圆形做原位复制(Ctrl+C 和 Ctrl+V)备用,选择第一个圆形填充素材图片,设置图片的「混合模式」为「叠加」,不透明度 50%。

c.绘制表盘纹理绘制一个正圆形,取消填充,添加描边效果,设置描边:颜色 #FFFFFF、居中、大小 3px透明度 15%;复制一个圆形,按「快捷键:K」等比缩放,使两个圆形和表盘居中对齐。

3、绘制面板细节

a.复制圆形,右键选择「轮廓化」,不透明度 100%,选中这个圆形,添加「径向渐变」,设置参数为:中心点颜色 #FFFFFF、透明度 100%;边缘点颜色 #FFFFFF,透明度 0%;调整「径向渐变」的位置如如下图所示。同样的操作再为小圆添加上高光的效果。

b.同样的方式,再为圆形做出阴影的效果;复制圆形,添加「径向渐变」,设置参数为:中心点颜色 #000000、透明度分别为 100%和0%,选中图层,调整透明度为40%。

c.选择「直线」工具(快捷键:L),设置参数:描边 3px,颜色 #FFFFFF,居中。再复制一条,翻转45°角,设置透明度为20%。选中两条线,右键选择「轮廓化」。

c.输入文本「N」设置参数:字体 CINZEL、字重 BLACK、字号 24px、颜色 #FFFFFF ,外观选择「叠加」,不透明度 60。添加阴影,设置参数:颜色 #000000、透明度 50%、大小「1、1、0、0」;

d.同样的操作再把其他三个字母「S、W、E」做出来,并调整好位置;

4、绘制指南针主体

绘制矩形,尺寸为 260x260px,翻转45°,双击进入路径编辑模式,调整左右两个节点,向中间移动,形成一个菱形。选中上下两个节点,设置圆角值为 24px,左右两个节点的圆角值为96px。

绘制圆形,和菱形居中对齐,可以使用辅助线工具拉出两根辅助线确定中心点。选中两个图层,使用布尔运算工具,选择「减去顶层」,将其镂空。

选中菱形,设置线性渐变,从左到右斜45°;设置参数:颜色 #FFFFFF和 #BABABA;添加阴影,大小「0、17、0、0」,颜色保持默认。右键选择「拼合路径」。

绘制一个三角形,尺寸分别为 104X118px,设置圆角 10px。设置线性渐变,参数是:颜色 #FF8A9F、#F52A56。设置阴影,参数是:颜色 #000000、透明度 50%、大小「0、1、0、0」。

复制菱形,取消阴影,选择「插件」中的「噪点生成」插件,保持默认即可。设置图层的「混合模式」为「叠加」,不透明度为50%;如没有安装插件,可点击「插件」中的「获取更多插件」中安装。

再复制一个菱形,绘制一个矩形,同时选中矩形与菱形,选择「减去顶层」进行布尔运算,得到菱形左侧部分。

选中左侧的菱形,取消阴影,调整图层的「外观」为「叠加」,不透明度为40%,颜色为#FFFFFF。

5、细节和质感润色

此时我们还需要加入更多的高光和阴影让整个指南针更立体一些。先增加立体感,将指南针的整体上下压扁一些。(如你没有在之前的操作中进行「拼合路径」,在这一步会变形哦)。选中所有的图层,也可以组合一下后,进行压扁操作。复制最底层的圆形,填充 #040057,并向下移动一定的距离,作为表盘的厚度。

再复制一个椭圆形,放在最底层,设置「径向渐变」,参数为:中心点颜色 #03003D,边缘点颜色 #03003D。添加投影:颜色 #000000、不透明度 40%、大小「0、72、74、0」

接下来为指针赋予投影,复制一个指针,置于指针的下方,添加阴影,设置参数:颜色 #000000、不透明度40%、大小「9、21、29、17」。

在指针中心圆的位置绘制两个圆形,调整好位置,做「减去顶层」的布尔运算,得到指针中心圆高光的部分;

随后使用这种方法完成圆盘的其他地方的高光和暗面部分。

在表盘的上半部增加高光效果,绘制基础图形,填充白色,高斯模糊 100,外观效果为「叠加」,不透明度 80%。同样在表盘的下半部再添加两个深色的基础图形,填充黑色,高斯模糊 100,外观效果为「叠加」,不透明度 80%。即可让你的图标更有质感啦。

这样,一个富有质感的图标就绘制完成了。是不是很有成就感。当然,为了更完美的展示,你还可以为你的图标配上文字和一些装饰,就像页面开头的图片一样。

以上就是全部的高保真拟物图标设计教程,看完之后,可以使用即时设计,一起跟着教程自己做一个高保真拟物图标吧!