如何使用 Ai 绘制线条轨迹并导出代码？
2024-07-11 11:06:53
工具：Adobe Illustrator（简称Ai）有Ai软件基础的同学看下教程自己就能操作，不懂Ai的同学，这部分可以直接交给设计师同事。
打开 Ai，点击左上角菜单栏「文件」-「打开」，导入一张完整的图片。（这张图片是指线条轨迹覆盖的整个画面，导入后以它为背景绘制线条。）在左侧工具栏选择「钢笔」工具，设置描边颜色、粗细，不填充。在图片上选择一个起始点，开始给画面绘制线条。
注意，在 Ai 里给线条设置的颜色、粗细、起点和终点，决定着最终排版中轨迹的颜色、粗细、起点和终点。另外因为排版时图片拼接原因，最终图文中轨迹终点停留的位置可能略低于在Ai中绘制的位置。如果最后预览图文时觉得影响效果，可以在Ai中把轨迹终点向上绘制一些再导出轨迹代码。点击菜单栏「文件」-「存储为」，在弹出的窗口中选择格式为「SVG(svg)」，接着点击「存储」。
在出现的窗口中点击「更多选项」，然后把图像位置设置为「链接」，CSS属性设置为「演示文稿属性」后，点击「SVG代码」。此时会看到代码中有一个几乎全是数字的<path>标签，这个就是我们需要的线条轨迹代码啦。
完整复制这段<path>标签代码保存到一个txt文档中备用，或者直接粘贴在编辑器「轨迹代码」的输入框中。
