Recraft 做品牌视觉初稿,先分清矢量图和位图的导出差别

文章导读
同一份品牌视觉稿在 Recraft 里做完之后,导出这一步真正要决定的事情只有一件:这份稿子后面还要不要改。要改字、改色、放大印刷,就应该走矢量导出;只做网页、社媒、邮件里的一次性展示,位图导出通常就够用。下面用同一份稿子分别导一次,把两个文件放在一起比,比听别人描述格式区别靠谱得多。
📋 目录
  1. 壹 在同一份品牌稿上分别执行矢量导出和位图导出
  2. 贰 把两份文件丢回设计软件里试改色和放大
  3. 叁 检查字体、描边和渐变在两边的差异
  4. 肆 按下游用途决定导出方式
  5. 伍 建立一次导出前的自检顺序
A A

同一份品牌视觉稿在 Recraft 里做完之后,导出这一步真正要决定的事情只有一件:这份稿子后面还要不要改。要改字、改色、放大印刷,就应该走矢量导出;只做网页、社媒、邮件里的一次性展示,位图导出通常就够用。下面用同一份稿子分别导一次,把两个文件放在一起比,比听别人描述格式区别靠谱得多。

判断方向:需要下游继续改色、改文案、放大印刷的物料,导出 SVG 这类矢量格式,并在交付前确认文本已转曲;只做屏幕展示的物料,导出 PNG(要透明)或 JPG,按最终显示尺寸的 2 倍导出。边界:不同设计软件打开同一个 SVG 时,字体替换、描边、渐变的呈现可能不一致,导出后必须用目标软件回读一遍再交付,不能假定「导出了就等于没问题」。

在同一份品牌稿上分别执行矢量导出和位图导出

在 Recraft 里选中画板或选中具体图层后,打开导出入口,通常能看到两类选项:一类是 SVG(部分场景还有 PDF),属于矢量;另一类是 PNG、JPG,属于位图。矢量导出一般不给尺寸倍数选项,因为它记录的是路径和填充,跟分辨率无关;位图导出会让你选倍数和背景是否透明,选多大就固定多少像素。

导完之后别急着交付,先在文件管理器里把两个文件并排看:扩展名不同是第一步,体积差别往往更直观。矢量文件通常停留在几十 KB 量级,位图会随导出倍数明显变大。具体数字以你自己导出的结果为准,不要套用别人的经验值,因为画稿里元素数量、渐变和嵌入图片都会影响体积。

对比项矢量导出(SVG / PDF)位图导出(PNG / JPG)
文件形态路径、填充、描边等描述数据固定像素矩阵,带固定尺寸
可编辑性填充、描边、文字通常可单独选中修改整张图一起处理,不能改单个元素
常见使用位置Logo 源文件、印刷物料、需反复改稿的 banner网页图标、社媒配图、邮件头图、演示稿
放大表现放大后边缘保持锐利超过原始像素后开始软化

把两份文件丢回设计软件里试改色和放大

这一步是验证,不是补充说明。把 SVG 拖进 Figma、Illustrator 或 Inkscape,把 PNG 拖进同一块画布,然后做两个动作。

Recraft 做品牌视觉初稿,先分清矢量图和位图的导出差别

第一个动作是改色。点选矢量稿里的某一块颜色,看它是不是被识别成一个独立路径。常见的脱开现象是:整幅稿在导出时被合并成一个大组,点一下选中全部,改色时整张图一起变;或者原本该分开的色块被并成一个复合路径,改一个角另一个角跟着变。遇到这种情况,说明这份导出结果不适合交付给下游改稿,需要回到 Recraft 里调整图层结构后重新导出。

第二个动作是放大。把位图视图从 100% 逐步调到 200%、400%,观察边缘最先出现的是锯齿还是模糊。通常超过原始像素的 100% 就开始软化,到 200% 以上边缘会明显发虚;如果是文字或细线,发虚会更早被看出来。矢量稿可以放到很大仍保持锐利,但要注意描边如果设了固定的像素宽度,放大时会跟着变粗,这是另一回事。

检查字体、描边和渐变在两边的差异

导出后最容易变形的就这三类元素,逐项对一遍:

Recraft 做品牌视觉初稿,先分清矢量图和位图的导出差别
  • 文本是否转曲:矢量文件里的文字如果保留为文本对象且字体没有嵌入,换一台机器打开就会被替换成别的字体,字宽变化直接导致错位。要么导出时选择转曲,要么把字体一起交付。
  • 描边粗细是否走样:矢量描边是可缩放的属性,位图描边在导出那一刻就被固化成像素。同一根 2px 描边,位图放大后变成一坨,矢量放大后仍然均匀。
  • 渐变过渡带是否变硬:位图渐变在放大或压缩后容易出现色带,原本平滑的过渡变成一圈一圈的硬边;矢量渐变是按描述重绘的,通常更稳。
  • 顺带看一眼透明度、阴影和蒙版,这几类效果在位图里是烘焙进去的,在矢量里是否被保留,取决于导出选项和目标软件的支持情况。

如果担心矢量文件里其实混进了位图,可以用一条命令快速确认,出现匹配说明 SVG 内部嵌了图片:

grep -o '<image' brand-logo.svg
# 有输出:文件里嵌了位图
# 无输出:基本是纯路径数据

按下游用途决定导出方式

判断规则可以压成两条:

Recraft 做品牌视觉初稿,先分清矢量图和位图的导出差别
  1. 下游还要改稿的物料,走矢量。典型的是 Logo 主文件、需要换色的包装稿、需要改文案的活动 banner、要放大到展板尺寸的主视觉。理由是这些物料在后期会被反复调整,位图一旦交付,改一次就要回到源稿重导一次,链路越长越容易出错。交付矢量时同时保留一份原始工程文件,别只留导出的 SVG。
  2. 只做屏幕展示的物料,走位图。典型的是网页图标、社媒方图、邮件头图、演示稿配图。理由是这些位置有明确的最大显示尺寸,按最终尺寸的 2 倍导出 PNG 或 JPG 就够,体积小、加载稳、各家软件显示一致。带透明的用 PNG,照片类且不需要透明的可以用 JPG。

两条规则冲突时,按「谁还要改」优先。比如一张要发社媒、但下周可能换配色的图,先按矢量交付,需要发布时再导一次位图。

建立一次导出前的自检顺序

把这套观察固化成固定动作,导之前一两分钟就能跑完:

  1. 确认这份稿子下游是否还要改字改色。要改就选矢量导出,不改再考虑位图。
  2. 检查文本状态,确认是转曲还是嵌入了字体,避免对方打开时字体被替换。
  3. 用 grep -o '<image' 之类的方式确认矢量文件里没有意外嵌进位图。
  4. 用目标软件回读一次,放大到 200% 看边缘,顺手改一次色看元素是否独立可选。
  5. 确认导出尺寸和背景透明是否符合使用位置,尤其是网页和印刷两种场景的要求不同。

这五步做完再交付,比交付后等下游反馈「字错位了」「放大发虚」要省事得多。格式本身没有绝对优劣,只有和下游用途是否匹配。