Illustrator 教程：形状生成器 + 路径查找器做一套可复用的扁平图标（含导出规范）

你将完成什么

目标：在 30-60 分钟内做出一套 12 枚扁平图标（如：主页、搜索、收藏、下载、设置等），并保证：线宽一致、圆角一致、间距一致、导出一致。

工具：Adobe Illustrator（任意近年版本均可）。

准备：新建画板与图标规范

1）画板尺寸：新建 24×24 px（或 32×32 px）画板。UI 图标常用 24/32/48 体系，建议从 24 开始。

2）像素对齐：打开“像素预览/像素对齐”（不同版本位置略有差异），确保边缘清晰。

3）统一规范（建议值）：

线宽：2 px；圆角：2 px；安全边距：2 px（图标外轮廓不要贴边）。

颜色：先用纯黑/深灰（#111）制作，便于检查轮廓与对齐。

方法一：用形状生成器快速拼出图标轮廓

形状生成器（Shape Builder）适合把多个基础形状“合并/减去”，做轮廓非常快。

步骤：

1）用矩形/圆角矩形/椭圆工具画出基础几何（比如做“收藏”图标：先画一个圆，再画一个心形轮廓的组合形）。

2）选中所有参与形状，按 Shift+M 进入形状生成器。

3）拖拽经过的区域会被合并；按住 Alt/Option 再点击区域可“减去”。

4）合并后用“直接选择工具（A）”检查关键点，尽量减少多余锚点，保持曲线干净。

方法二：用路径查找器做布尔运算（更可控）

路径查找器（Pathfinder）更适合规则布尔：联合、减去顶层、相交、排除。

步骤：

1）把想要“挖空”的形状放在上层（例如做“下载”图标：外框矩形 + 内部箭头挖空）。

2）选中所有对象，在“路径查找器”面板点击 减去顶层（Minus Front）。

3）必要时点“扩展（Expand）”把效果固化，避免后续缩放出现异常。

实战：做 3 个常见图标（可复制出 12 枚）

A. 搜索（放大镜）

1）画一个圆（按住 Shift）；2）复制一个略小的圆置中；3）用路径查找器“减去顶层”挖出圆环；4）画一条 2px 斜线做手柄，与圆环相交处做圆角；5）合并为一个复合图形。

B. 设置（齿轮简化版）

1）画一个外圆与内圆；2）做 6 个小矩形齿（旋转复制：R + Alt 点击中心设置旋转角度 60°，再 Ctrl/Cmd+D 重复）；3）用形状生成器把齿与外圆合并；4）再用路径查找器挖出中间孔。

C. 下载（箭头入盒）

1）画一个 U 形盒：矩形 + 内矩形挖空；2）画一支向下箭头（矩形 + 三角形合并）；3）对齐到中心；4）统一圆角与线宽（建议全部转为填充图形，避免描边缩放差异）。

检查清单：让一套图标看起来“像同一套”

1）线宽与圆角：同一套只用 1-2 个线宽/圆角值。

2）视觉重心：把图标整体重心放在画板中心（不是几何中心），必要时微调 0.5-1 px。

3）留白一致：安全边距统一（建议 2 px），不要有个别图标显得“挤”。

4）锚点简化：曲线尽量少点，避免导出 SVG 体积暴涨。

导出：SVG 与 PNG 最稳的设置

SVG：选择图标对象 → 导出为 SVG。勾选“最小化”、使用“呈现：CSS/属性”按团队规范选；小图标建议保留 viewBox。

PNG：使用“导出为屏幕所用格式（Export for Screens）”，导出 1x/2x/3x 三套；命名用同一规则（如 icon_search@2x.png）。

提示：如果你使用描边风格图标，导出前务必检查：是否需要“对象→扩展外观”把描边转轮廓，避免不同环境渲染不一致。

加分：把规范做成可复用组件

1）把画板作为一个模板文件保存；2）把常用网格、中心线、安全边距做成锁定图层；3）把 24/32/48 三种尺寸分别做成画板组；4）后续新图标直接复制画板继续画。

结尾

照这个流程，你可以很快扩展出完整图标集：通知、分享、编辑、删除、上传、筛选、时间、定位等。关键不是复杂造型，而是统一的规范与检查清单。