把图标拆成基础形状再组合——Recraft 出矢量图的顺序

文章导读
图标单看还行、凑成一套就大小和粗细不一致,缩小之后糊成一团,问题通常不在生成这一步,而在顺序:先按真实使用尺寸定基准,再把图形拆成圆、矩形、线段这类可编辑几何体,统一描边、圆角与视觉重量,用布尔运算合出干净轮廓,最后缩到最小尺寸验收。反过来先画细节再缩小,多数情况只能重画。
📋 目录
  1. A 先列出这批图标实际会出现在哪些位置和尺寸
  2. B 把目标图形拆成基础形状
  3. C 统一描边、圆角和视觉重量
  4. D 用布尔运算合并重叠部分
  5. E 导出后在目标尺寸下再看一遍
A A

图标单看还行、凑成一套就大小和粗细不一致,缩小之后糊成一团,问题通常不在生成这一步,而在顺序:先按真实使用尺寸定基准,再把图形拆成圆、矩形、线段这类可编辑几何体,统一描边、圆角与视觉重量,用布尔运算合出干净轮廓,最后缩到最小尺寸验收。反过来先画细节再缩小,多数情况只能重画。

判断方向:先在真实出现位置和最小显示尺寸上定画布与线宽基准,再把图形拆成圆、矩形、线段这类可编辑几何体,统一描边、圆角与视觉重量后用布尔运算合出轮廓,最后导出到最小尺寸并排验收。适用场景是需要风格一致的成套界面图标;验证方式是把图标缩到最小尺寸看笔画是否粘连、间隙是否消失;风险边界是布尔合并会丢掉可单独改色的子形状,是否合并需要按后续是否换色决定。

先列出这批图标实际会出现在哪些位置和尺寸

在画第一个图标之前,先把这批图标的落点列成清单:工具栏、列表行、标签页、底部导航、空状态插画、弹窗标题等。每个位置后面写两件事——渲染时的实际像素尺寸,以及该位置是否允许放大或换行。

确认最小显示尺寸的方式通常是:打开真实界面截图或设计稿,量出图标占用的像素;如果还没有成品界面,就先按设计稿标注的最小档取值,并额外留一个更小的档位做验收。清单里最小出现位置如果是 16px,就不要只按 24px 画完收工,直接按 16px 验收更稳。

这份清单决定后面的三个基准:画布尺寸(常见 24×24 或 32×32,按最大与最小尺寸的比例选)、描边宽度(在最小尺寸下仍要看得清)、安全边距(图标不贴画布边缘,给对齐留余量)。在 Recraft 里生成时不指定这些基准,出来的 SVG 往往各画各的,后面对齐会变成手工返工。

把目标图形拆成基础形状

把每个图标翻译成几个基础几何体再摆位置,而不是一次性画出成品轮廓。常见分工:圆承担镜面、头像、状态点、齿轮主体;矩形承担卡片、文件夹、按钮、屏幕;线段承担手柄、箭头、连线、分隔。Recraft 生成后一般给的是多个形状叠在一起,先在图层面板里确认能不能拆开。

把图标拆成基础形状再组合——Recraft 出矢量图的顺序

拆解示例:搜索图标 = 一个圆(镜面)+ 一条斜线段(手柄),圆心与线段端点处留 0 到整数像素的重叠;文件夹图标 = 一个大矩形 + 一个贴在上边缘的小矩形,两者上边对齐、共享同一条底边;设置图标 = 一个圆 + 若干等角度分布的线段或小矩形,全部以圆心为对称中心。

对齐方式建议用整数网格:圆心落在网格交点上,矩形的角落在整数坐标,线段端点与相邻形状边缘对齐,而不是靠视觉猜。圆角半径、线段长度也尽量取整,这样后面统一描边和布尔合并时偏差更小。这一阶段先不追求好看,先保证每个形状都能单独选中和移动。

统一描边、圆角和视觉重量

一套图标看起来像一套,靠的是几个属性在每个文件里数值一致:描边宽度、端点样式(圆头或方头)、拐角连接方式(圆角或斜接)、圆角半径、填充与描边的搭配方式、画布内的安全边距,以及对齐用的网格。视觉重量不在数值里,但可以用并排缩小比对判断。

具体做法:把同一批图标导到同一张画布上,等间距排列,缩放到最小显示尺寸看,不是放大看。观察哪一个显得更黑、更密、更重。偏重的通常是描边多、填充面积大或间隙小;偏轻的通常是线段细、负空间大。按观察结果回到单个文件调描边宽度或圆角半径,而不是靠整体缩放图标去补偿。

需要保留的边界是:统一靠的是逐个文件核对参数,导出后能直接看到的是并排比对出来的差异,不存在自动把所有图标对齐到同一套规格的保证,所以要留出返工时间。

把图标拆成基础形状再组合——Recraft 出矢量图的顺序

用布尔运算合并重叠部分

当轮廓和参数都定下来、并且确认这个图标不会再单独改配色时,用布尔运算把重叠部分合并:加(并集)用于把相交的形状连成一条外轮廓;减(差集)用于挖出镂空,比如放大镜镜面内侧、文件夹开口;交(交集)用得少,一般用于裁掉溢出画布的部分。合并后路径更干净、节点更少,描边不会在重叠区冒出内部线条。

什么时候保留分离形状:图标需要多色,或以后要单独改某一部分颜色;描边和填充需要分别处理;某个部件以后可能单独替换或做动效;或者合并后路径变得难编辑。常见做法是布尔合并前先复制一份分层版本留档,再对需要交付的单色版本做合并。

导出后在目标尺寸下再看一遍

导出 SVG 或 PNG 后,回到清单里最小显示尺寸再看一遍,重点看三处:笔画粘连(两条相邻线在小尺寸下并成一条,比如设置图标里的线段与圆、文件夹的上下两条边)、间隙消失(镂空或负空间被填满,轮廓糊成一块)、圆角变形(半径小的圆角缩下来看起来像直角,或圆角与直线交接处出现疙瘩)。

观察方式建议用实际像素看,不要放大:把图标按最小尺寸导出,在同一行排开,和相邻图标一起看,而不是单独盯一个。发现粘连通常要拉开间距或减少线段数量;发现间隙消失要加大镂空尺寸或减少描边宽度;发现圆角变形要把圆角半径提到在最小尺寸下还能看出来的量级,或者干脆改成直角。这一步是整套流程里唯一能直接判断合格与否的环节,改完再回到描边和布尔步骤微调即可。