同一份品牌视觉稿在 Recraft 里做完之后,导出这一步真正要决定的事情只有一件:这份稿子后面还要不要改。要改字、改色、放大印刷,就应该走矢量导出;只做网页、社媒、邮件里的一次性展示,位图导出通常就够用。下面用同一份稿子分别导一次,把两个文件放在一起比,比听别人描述格式区别靠谱得多。
判断方向:需要下游继续改色、改文案、放大印刷的物料,导出 SVG 这类矢量格式,并在交付前确认文本已转曲;只做屏幕展示的物料,导出 PNG(要透明)或 JPG,按最终显示尺寸的 2 倍导出。边界:不同设计软件打开同一个 SVG 时,字体替换、描边、渐变的呈现可能不一致,导出后必须用目标软件回读一遍再交付,不能假定「导出了就等于没问题」。
在同一份品牌稿上分别执行矢量导出和位图导出
在 Recraft 里选中画板或选中具体图层后,打开导出入口,通常能看到两类选项:一类是 SVG(部分场景还有 PDF),属于矢量;另一类是 PNG、JPG,属于位图。矢量导出一般不给尺寸倍数选项,因为它记录的是路径和填充,跟分辨率无关;位图导出会让你选倍数和背景是否透明,选多大就固定多少像素。
导完之后别急着交付,先在文件管理器里把两个文件并排看:扩展名不同是第一步,体积差别往往更直观。矢量文件通常停留在几十 KB 量级,位图会随导出倍数明显变大。具体数字以你自己导出的结果为准,不要套用别人的经验值,因为画稿里元素数量、渐变和嵌入图片都会影响体积。
| 对比项 | 矢量导出(SVG / PDF) | 位图导出(PNG / JPG) |
|---|---|---|
| 文件形态 | 路径、填充、描边等描述数据 | 固定像素矩阵,带固定尺寸 |
| 可编辑性 | 填充、描边、文字通常可单独选中修改 | 整张图一起处理,不能改单个元素 |
| 常见使用位置 | Logo 源文件、印刷物料、需反复改稿的 banner | 网页图标、社媒配图、邮件头图、演示稿 |
| 放大表现 | 放大后边缘保持锐利 | 超过原始像素后开始软化 |
把两份文件丢回设计软件里试改色和放大
这一步是验证,不是补充说明。把 SVG 拖进 Figma、Illustrator 或 Inkscape,把 PNG 拖进同一块画布,然后做两个动作。
第一个动作是改色。点选矢量稿里的某一块颜色,看它是不是被识别成一个独立路径。常见的脱开现象是:整幅稿在导出时被合并成一个大组,点一下选中全部,改色时整张图一起变;或者原本该分开的色块被并成一个复合路径,改一个角另一个角跟着变。遇到这种情况,说明这份导出结果不适合交付给下游改稿,需要回到 Recraft 里调整图层结构后重新导出。
第二个动作是放大。把位图视图从 100% 逐步调到 200%、400%,观察边缘最先出现的是锯齿还是模糊。通常超过原始像素的 100% 就开始软化,到 200% 以上边缘会明显发虚;如果是文字或细线,发虚会更早被看出来。矢量稿可以放到很大仍保持锐利,但要注意描边如果设了固定的像素宽度,放大时会跟着变粗,这是另一回事。
检查字体、描边和渐变在两边的差异
导出后最容易变形的就这三类元素,逐项对一遍:
- 文本是否转曲:矢量文件里的文字如果保留为文本对象且字体没有嵌入,换一台机器打开就会被替换成别的字体,字宽变化直接导致错位。要么导出时选择转曲,要么把字体一起交付。
- 描边粗细是否走样:矢量描边是可缩放的属性,位图描边在导出那一刻就被固化成像素。同一根 2px 描边,位图放大后变成一坨,矢量放大后仍然均匀。
- 渐变过渡带是否变硬:位图渐变在放大或压缩后容易出现色带,原本平滑的过渡变成一圈一圈的硬边;矢量渐变是按描述重绘的,通常更稳。
- 顺带看一眼透明度、阴影和蒙版,这几类效果在位图里是烘焙进去的,在矢量里是否被保留,取决于导出选项和目标软件的支持情况。
如果担心矢量文件里其实混进了位图,可以用一条命令快速确认,出现匹配说明 SVG 内部嵌了图片:
grep -o '<image' brand-logo.svg
# 有输出:文件里嵌了位图
# 无输出:基本是纯路径数据按下游用途决定导出方式
判断规则可以压成两条:
- 下游还要改稿的物料,走矢量。典型的是 Logo 主文件、需要换色的包装稿、需要改文案的活动 banner、要放大到展板尺寸的主视觉。理由是这些物料在后期会被反复调整,位图一旦交付,改一次就要回到源稿重导一次,链路越长越容易出错。交付矢量时同时保留一份原始工程文件,别只留导出的 SVG。
- 只做屏幕展示的物料,走位图。典型的是网页图标、社媒方图、邮件头图、演示稿配图。理由是这些位置有明确的最大显示尺寸,按最终尺寸的 2 倍导出 PNG 或 JPG 就够,体积小、加载稳、各家软件显示一致。带透明的用 PNG,照片类且不需要透明的可以用 JPG。
两条规则冲突时,按「谁还要改」优先。比如一张要发社媒、但下周可能换配色的图,先按矢量交付,需要发布时再导一次位图。
建立一次导出前的自检顺序
把这套观察固化成固定动作,导之前一两分钟就能跑完:
- 确认这份稿子下游是否还要改字改色。要改就选矢量导出,不改再考虑位图。
- 检查文本状态,确认是转曲还是嵌入了字体,避免对方打开时字体被替换。
- 用
grep -o '<image'之类的方式确认矢量文件里没有意外嵌进位图。 - 用目标软件回读一次,放大到 200% 看边缘,顺手改一次色看元素是否独立可选。
- 确认导出尺寸和背景透明是否符合使用位置,尤其是网页和印刷两种场景的要求不同。
这五步做完再交付,比交付后等下游反馈「字错位了」「放大发虚」要省事得多。格式本身没有绝对优劣,只有和下游用途是否匹配。