SVG → 活版印刷

我在 Bay View Printing Company（我所属的当地社区活版印刷店）参加了一个关于用聚合物版印刷的课程。这家店里到处都是木活字和金属活字，以及所有相关的附属设备，但聚合物版却不是这样。你可以定制它们！它们可以是任何东西！有时坚持使用老式排版也很有趣。我非常喜欢这样做。但我也想学习如何用现代的方式设计活版印刷品。比如，使用 SVG。

即使我认为 Bay View Printing Company 的会员大多数工作都是使用店内的木活字和金属活字完成的，但这种聚合物版业务的重点在于它允许您打印任何您可以设计的图案。

生产聚合物版的公司名为 Boxcar Press，位于纽约州锡拉丘兹。他们生产一种名为 Boxcar Base 的产品，本质上是一大块带有网格的金属。为了在活版印刷机上进行印刷，设计需要“字高”（0.918 英寸），而他们生产的聚合物版（有效地）很薄。

将版粘贴到底座上，然后在印刷机上使用

想法

我仍然对形状变形的整个概念非常着迷。这是 SVG 可以做的一件非常有趣的事情。

我的想法是将 CodePen 的徽标变形为心形。啊，我知道。太可爱了。但显然纸上没有动画，所以我将布置一系列图像，逐步显示过渡过程。

技术

我使用 Greensock 插件 设置了一个小的形状变形操作。还有其他 JavaScript 库可以进行变形，SMIL 可以做到，甚至 CSS 现在也开始能够做到。我仍然推荐 Greensock，因为

1. 它可以处理您抛出的任何形状，无论“点”的数量如何
2. 它对跨浏览器（和旧浏览器）友好
3. 它的性能良好

在本例中，我使用 Greensock 还有另一个原因：您可以非常轻松地添加时间轴。时间轴很重要，因为我想在某些点停止动画并提取矢量路径数据。

查看 Chris Coyier 在 CodePen 上创建的 Pen Heart To CP Badge（@chriscoyier）。

现在我只需要提取数据即可

Greensock MorphSVG 可以很好地处理 CodePen 徽标中的挖空部分，但我手动单独进行了这些操作，因为我希望它们在视觉上有点塌陷。

现在我在 Illustrator 中有了我需要的东西

到 Boxcar

他们的网站接受 PDF、EPS、AI 格式的文件，这很好，因为我之前已经在 Illustrator 中工作了。您可以直接将它们拖放到网站上进行上传。

我必须注意黑色。Illustrator 中的默认黑色是 CMYK 的深色混合，而不仅仅是 0 0 0 100%。最好强制使用纯黑色，这样当您上传到 Boxcar 时，它就不会尝试为这个单色事物创建多个版。

点击几下，您就可以开始了。只需等待几天即可收到版。

印刷！

有了版，并将其安装到底座上，我就可以开始印刷了。我想到一个主意，就是从左到右淡化颜色，就像渐变一样。既然我在变形形状，不妨也变形颜色，对吧？事实证明，这叫做“彩虹滚筒”，您将滚筒的一半涂上一种颜色，另一半涂上另一种颜色（或者实际上是任何数量/组合的颜色）。

然后，一旦滚筒开始转动，它就会变成渐变

我准备好拉一些纸张了！

感谢

非常感谢 Ashley Town，她是 Bay View Printing Company 的老板（Facebook / Instagram），她在一个两部分的课程中教会了我所有这些东西。

当然，如果您想了解有关 SVG 的更多信息，我有一本书推荐给您。