指导

VectorCraft 教程

本指南将带你从空白画布到使用 VectorCraft Online 导出的第一个 SVG。

1. 打开工作区

单击打开 VectorCraft。第一次访问下载应用程序(大约 56 MB,压缩后更小);以后的访问会从浏览器缓存中加载。

VectorCraft 在可用时使用 WebGPU,并回退到 WebGL2。当前的桌面 Chrome、Edge、Firefox 或 Safari 效果最佳。该界面遵循你的系统语言。

2. 绘制形状和路径

  • 使用矩形、椭圆形和多边形工具绘制基本形状。
  • 使用钢笔工具绘制贝塞尔曲线路径:单击拐角,拖动曲线。
  • 使用直接选择来移动各个锚点和手柄。

3. 组合并着色

  • 选择两个形状并使用路径查找器将它们合并、减去或相交。
  • 从“样本”面板设置填充和描边颜色。
  • 通过图层和组来整理你的作品。

4. 保存并导出

导出用于 Web 的 SVG、用于打印的 PDF 或 PNG/JPEG/WebP 图像。你的浏览器会将文件保存到你的设备。

稍后需要快速更改吗?使用 SVG 工具重新着色、优化或转换导出的文件。

5. 当前限制

  • VectorCraft 处于 alpha 阶段;一些 Illustrator 功能和效果仍然缺失。
  • 交换 Illustrator 自己的 .ai 编辑数据尚不可靠 - 更喜欢 SVG 或 PDF。
  • 完整的工作区是为桌面浏览器设计的。

第一个项目:修改、导出、检查

先用简单图标或少量形状走通整个流程,再处理复杂插画。导入 SVG 前保留原始副本,每次只改尺寸、颜色或路径中的一项。放大检查边缘,再缩小到实际显示尺寸,确认图形仍容易辨认。

目标支持可缩放图形时选择 SVG,需要固定像素图片时选择 PNG。按屏幕或文档实际需要设置尺寸,并在最终背景上检查透明效果。SVG 中的低分辨率位图不会因为输出尺寸变大而增加细节。

在目标应用中打开下载结果,检查字体、渐变、裁剪和颜色。引用外部资源的 SVG 尤其需要检查;必要时嵌入资源或在合适的编辑器中把重要文字转为轮廓。可编辑源文件与优化交付副本分开保留,方便之后继续修改。

排查首次使用的问题,保留可继续编辑的源文件

可以用一个小练习完成这份 VectorCraft 教程:先画两个重叠形状,设置不同填充颜色,在副本上试一次形状组合。导出 SVG 并重新打开后,再投入时间制作大型插画。这样能确认当前浏览器的绘制、保存和重新打开流程,也能留下一份用于比较后续改动的小型参考文件。

工作区没有打开时,先等待首次应用下载,并查看加载提示。使用支持图形功能的新版桌面浏览器。网速较慢时,网站外层页面可能已经出现,但编辑器仍需继续下载。加载失败时可使用工作区的重新加载按钮,继续前请阅读确认提示。重新加载或清理浏览器数据之前,先下载未完成作品的副本;不要只把文件留在浏览器会话中。

导出空白或与预期不同时,检查所选图形、文档边界和透明度,并分别在浅色、深色背景上查看下载结果。导入已有 SVG 时,对照原文件检查文字、渐变和裁切,不要假设所有应用都支持同样的效果。后续只需改尺寸、调色板或文件大小时,可以使用单项 SVG 工具。这些交付文件应与准备在完整工作区继续编辑的源文件分开保存。

VectorCraft 教程常见问题

我需要一个账号吗?

不需要。该网站上的所有功能无需账号即可使用。

VectorCraft 和 Illustrator 一样吗?

VectorCraft 遵循熟悉的 Illustrator 风格布局,包含工具、面板和快捷方式,但它是一个独立的开源项目。

准备好开始画了吗?

打开 VectorCraft →