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

更新时间：2023-06-06 14:45:40

本文将为大家带来一个UI图标设计教程，只需要10分钟即可学会图标设计，绘制 UI 图标通常包括创建画板、图形绘制、配色确定和效果添加等 4 个步骤。使用国产专业级 UI 设计工具「即时设计」，我们可以在 10 分钟内学会绘制磨砂玻璃风格的 UI 图标。通过访问即时设计官网，创建画板并设置背景色。然后绘制矩形和三角形来形成基本的摄像机形状，并进行调整和叠放。添加线性渐变和内部描边来增加细节。最后，导出图标根据需要。即时设计是一款易上手的设计软件，无论你是专业 UI 设计师还是正在学习 UI 知识的新手，它都将成为你的忠实伙伴。快来学习吧！今天，让我们通过「即时设计」这款国产专业级的 UI 设计工具，来一起绘制一个磨砂玻璃风格的 UI 图标，一起来看看吧！

点击图片即可获取即时设计资源广场3683份免费图标设计资源👆

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 知识的小白，即时设计都将成为你忠实的涉及伙伴，快来一起学习吧！