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