UI图标设计教程：10分钟教你学会图标设计

发布时间：2023-03-06 16:54:29

UI图标设计教程：10分钟教你学会图标设计

图标设计是 UI 设计的基础，也是每一个 UI 设计师都必须掌握的技能。可以说，能够绘制 UI 图标就代表你走上了成为 UI 设计师的第一步。通常来说，绘制一个 UI 图标可以分为创建画板、图形绘制、配色确定、效果添加这 4 个步骤。今天，让我们通过[「即时设计」，这款国产专业级的 UI 设计工具，来一起绘制一个磨砂玻璃风格的 UI 图标，只需要 10 分钟，你就能掌握 UI 图标的基础设计方法，快来学起来吧！

1.进入即时设计官网，右上角登录后选择[工作台]进入并创建文件。即时设计对个人用户免费提供所有设计功能，海量的插件和小组件也能够支持各项设计任务的完成，是一款非常好用的设计工具。

2.通过快捷键[A]或者手动输入数值新建一个 80×80px 的画板，设置背景色为#FFFFFF。定稿后也可以再将图标输出其他尺寸。

3.选中上述创建的画板，将画板的平滑圆角调节为 100%，再将圆角值调节为 24。

4.在画板中央分别绘制一个尺寸为 42×42px 的矩形以及一个 42×60px 的三角形，调整矩形的圆弧角度为 10，调整三角形的圆弧角度为 5，三角形旋转-90°，之后将三角形与矩形叠放至如图所示的位置，呈现出老式摄像机的基本形状。

5.选中三角形，填充线性渐变 #5A05ED 至 #A171F5； 添加大小为 0.4 的内部描边，颜色为线性渐变 #9661F2至#A171F5。拖动红圈所示位置，可调节渐变角度，根据自己的喜好调节即可。

6.选中矩形图层，将矩形长按拖移至三角形图层上方，填充颜色#D0B6FC 并添加大小为 0.4 的内部描边。描边颜色为线性渐变#C4A8F7、不透明度 100%和#EAE1FC、不透明度 0%。同时将矩形图层背景模糊为 10;图层的不透明度调整为 50%。

7.绘制一个 17×17px 的小三角形，调整圆角值为 1，旋转 90°，填充颜色 #FFFFFF、不透明度 75%；添加外阴影，设置颜色#723BD1、不透明度 25%、大小 0.6、-0.6、1.5、0。

8.将完成后的图标根据自己的格式需要进行导出即可。

这样，一个简单的磨砂玻璃风格图标设计就做好了！设定好画布、调整好尺寸、填充自己喜欢的渐变颜色，是不是特别简单？只要跟着教程，一步步来，即时设计是非常容易上手的设计软件。不管你是专业的 UI 设计师，还是正在学习 UI 知识的小白，即时设计都将成为你忠实的涉及伙伴，快来一起学习吧！