拟物风格图表的制作(还在满世界找图标素材)(1)

随着互联网技术的发展,人们对产品用户体验设计的要求越来越高。无论是App界面设计,还是Web界面设计,单靠文字已经无法明确传达信息,而通过图标等元素,可以更高效地向用户传递交互体验信息,达到提升用户体验的目的。

绘制“钟表盘”图标

“钟表盘”图标的绘制流程和完成效果如图所示。

拟物风格图表的制作(还在满世界找图标素材)(2)

01

新建一个916px×710px的画布,填充为浅蓝色(R:227,G:233,B:235)至深蓝色(R:160,G:181,B:194)的线性渐变效果,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(3)

拟物风格图表的制作(还在满世界找图标素材)(4)

选择“圆角矩形”工具,在画布中绘制一个512px×512px的圆角矩形,设置圆角“半径”为90px,然后填充为浅蓝色(R:248,G:250,B:251)至稍微深一些的浅蓝色(R:238,G:240,B:245)的线性渐变效果,使用“左右居中对齐”工具和“垂直居中对齐”工具将其进行对齐,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(5)

02

复制一个圆角矩形放在上方,设置“内阴影”为浅蓝色(R:110,G:144,B:166),“不透明度”为48%,“Y”为-11,“模糊”为18,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(6)

拟物风格图表的制作(还在满世界找图标素材)(7)

03

再次复制一个圆角矩形放在上方,然后设置“内阴影”为白色(R:255,G:255,B:255),“Y”为5,“模糊”为18,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(8)

拟物风格图表的制作(还在满世界找图标素材)(9)

04

观察图形,由于前面绘制的阴影和高光在背景的对比下看起来不够明显,因此为图形再添加一些投影。再次复制一个圆角矩形,将该圆角矩形放在底图和绘制的第1个圆角矩形中间,然后将圆角矩形填充为深蓝色(R:94,G:135,B:167),并且在“高斯模糊”一栏中设置“半径”为10px。将该圆角矩形移至右下方位置,作为阴影,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(10)

拟物风格图表的制作(还在满世界找图标素材)(11)

05

观察阴影的效果,看起来有点儿模糊。为了使其更立体,将第1个圆角矩形复制一个,然后设置“内阴影”为白色(R:255,G:255,B:255),“Y”为1,“模糊”为17,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(12)

拟物风格图表的制作(还在满世界找图标素材)(13)

06

使用“椭圆形”工具在画布中绘制一个直径为416px的圆形,填充为浅蓝色(R:140,G:172,B:210)至深蓝色(R:115,G:150,B:197)的渐变效果。设置“内阴影”为蓝色(R:103,G:139,B:189),“X”为2,“Y”为2,“模糊”为15,“扩展”为2,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(14)

拟物风格图表的制作(还在满世界找图标素材)(15)

07

将上一步绘制的圆形复制一个,然后设置“内阴影”为白色(R:255,G:255,B:255),“X”为-2,“Y”为-2,“模糊”为2,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(16)

拟物风格图表的制作(还在满世界找图标素材)(17)

08

使用“钢笔”工具在画布中绘制一条线段,然后设置描边“位置”为居中,“粗细”为8px。选中线段,单击“描边”选项栏中的“设置”按钮,设置“端点”和“转折点”为圆滑效果。设置“内阴影”为浅蓝色(R:135,G:168,B:206),“X”为1,“Y”为1,“模糊”为2,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(18)

拟物风格图表的制作(还在满世界找图标素材)(19)

09

再次选中绘制好的线段,单击“旋转复制”按钮,在弹出的对话框中设置“副本数量”为7,然后单击“好”按钮,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(20)

从中心处开始,拖动显示的锚点并调整位置,得到的表盘效果如图所示。

拟物风格图表的制作(还在满世界找图标素材)(21)

10

使用“椭圆形”工具在画布中绘制一个直径为50px的圆形,然后填充为白色(R:238,G:246,B:255),设置“阴影”为浅蓝色(R:82,G:125,B:182),“内阴影”为白色(R:255,G:255,B:255),“X”为-1,“Y”为4,“模糊”为6,“扩展”为4,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(22)

拟物风格图表的制作(还在满世界找图标素材)(23)

11

使用“钢笔”工具在画布中绘制一条线段,描边“位置”为居中,“粗细”为8px,然后选中线段,单击“描边”选项栏中的“设置”按钮,设置“端点”和“转折点”为圆滑效果,如图所示。

拟物风格图表的制作(还在满世界找图标素材)(24)

拟物风格图表的制作(还在满世界找图标素材)(25)

使用“旋转”工具将该线段旋转到合适位置,然后选中该线段,使用“轮廓”工具将其变成矢量图形并填充为橘黄色(R:240,G:191,B:133),如图所示。

拟物风格图表的制作(还在满世界找图标素材)(26)

12

使用“椭圆形”工具在画布中绘制一个直径为30px的圆形,然后填充为橘黄色(R:240,G:191,B:133)。选中这个圆形和上一步绘制好的秒针,按快捷键Command G打组。选择该组,设置组的“阴影”为深蓝色(R:107,G:142,B:191),“X”为4,“Y”为5,“模糊”为4,如图所示。

13

按照绘制秒针的方法,将时针和分针一起绘制出来,得到的图标效果如图所示。

拟物风格图表的制作(还在满世界找图标素材)(27)

拟物风格图表的制作(还在满世界找图标素材)(28)

拟物风格图表的制作(还在满世界找图标素材)(29)

,