常用类线性和面性图标设计教程

更新时间：2023-07-21 19:59:33

本文将为为大家介绍线性和面性图标的绘制规范和方法。我们都知道，在用户界面中使用图标，是一种用户熟知的设计模式。而线性图标是通过提炼图形轮廓，简单勾勒而成的图标。线条描边越粗，视觉层级越高，多在同一产品内且功能入口较多的情况下使用。面性图标在操作中和线性图标的最大差别就在于描边和填充模式。在面性图标中，不需要使用描边，使用相同的图标模板即可完成整套图标设计。今天我们将在即时设计中为大家演示如何用 5 分钟学会画图标，作为一个专业级的UI设计工具即时设计无需下载，打开浏览器就能直接使用很方便。现在就请大家打开即时设计，跟随本教程开始学习吧！

点击图片即可免费在线使用专业级的UI设计工具即时设计👇

1、先做点准备工作

在开始绘制之前，我们需要做一些准备工作。

（1）选择图标尺寸

首先是选择图标尺寸。常用的尺寸有很多选择，根据图标使用的需要和复杂程度来选择适合的尺寸，一般来说，简洁的图标可以选择小尺寸，复杂的图标可以选择大尺寸。

（2）勾选像素网格

其次是像素网格。像素网格可以辅助我们对图标进行细节调整。通过点击画布缩放百分比的数字，勾选 "像素网格" 和 "对齐至像素网格"，可以显示网格线。请注意，放大画布才能看到网格线，缩小到一定比例就看不到了。

（3）绘制栅格模板

还有栅格模板。栅格模板可以让不同形状的图标在视觉上尽量保持一致。绘制栅格模板很简单，以 2828 的画板为例，绘制一个 2222 的圆形，去掉填充，添加红色描边，内部，粗细为 0.1。然后再绘制一个 2020 的正方形，一个 1624 的竖矩形，一个 24*16 的横矩形，将它们叠加在一起，就构成了栅格模板。栅格模板可以根据个人习惯选择不同的形状和样式。

2、实操教程

准备工作完成后，我们将进入实际操作环节。首先以四个线性图标为例，演示如何对齐栅格线。

为了防止栅格模板干扰操作，我们将几个图形编组并调整透明度为 50%，然后将图层锁定。

我们将使用快捷键和工具来绘制图标。例如，使用快捷键 O 绘制一个 20*20 的圆形，去掉填充，添加 2 像素的描边，居中放置在画板中。通过选择多个元素，可以使用对齐图标进行快速对齐。我们还将使用钢笔工具、剪刀工具等工具，在编辑模式中对图形进行调整和修饰。

同时我们知道布尔运算有 4 种方式：并集、差集、交集和排除重叠。利用布尔运算可以处理图形之间的叠加关系，用于创建复杂的形状和图标。

以上就是本文为大家带来的 5 分钟学会画图标教程，通过这些案例，我们详细介绍了线性和面性图标的绘制过程，涉及到的工具和技巧。教程包括准备工作、绘制栅格模板和实际操作，介绍了对齐栅格线和布尔运算。希望这些内容对大家有所帮助。