SVG → Letterpress

I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it’s fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how to letterpress with designs I made in a modern way. Like, with SVG.

Even though I’d say most work done by members at Bay View Printing Company is done using the wood and metal type in the shop, the whole point of this polymer plate business is that it allows you to print anything you can design.

The company that makes the polymer plates is called Boxcar Press out of Syracuse, New York. They make this product called the Boxcar Base which is essentially a big ass chunk of metal with a grid on it. In order to print on a letterpress press, the design needs to be “type high” (0.918 inches) and the polymer plates they make are (efficiently) thin.

You stick the plates onto the base and use that in the press:

The Idea

I’m still pretty obsessed with the whole idea of shape morphing. It’s just such a fun thing that SVG can do.

My idea was to morph the CodePen logo into a heart. Awwww. I know. So cute. But obviously there is no animation on paper, so I’d lay out a series of images showing the transition happen in steps.

The Tech

I set up a little shape morphing action using the Greensock add-on for it. There are other JavaScript libraries that do morphing, SMIL can do it, and even CSS is starting to be able to do it now. I still recommend Greensock because:

1. It can handle just about any shape you throw at it, regardless of number of “points”
2. It’s cross browser (and old browser) friendly
3. It’s performant

In this case I used Greensock for another reason: you can add a timeline pretty easily. The timeline was important because I wanted to stop the animation at certain points and extract the vector path data.

See the Pen Heart To CP Badge by Chris Coyier (@chriscoyier) on CodePen.

Now all I have to do is extract the data:

Greensock MorphSVG can handle the knockouts in the CodePen logo fine, but I did those manually and separately as I wanted them to kinda visually collapse.

Now I have just what I need in Illustrator:

To Boxcar

Their website accepts files in PDF, EPS, AI formats, which is fine, as I was already in Illustrator. You drag and drop upload them right to the website.

I had to be careful with the black. Default black in Illustrator is a deep mixture of CMYK, not just 0 0 0 100%. It’s best if you force black-only, so when you upload to Boxcar it doesn’t try to make multiple plates for this single color thing.

A couple of clicks later and you’re good to go. Just wait a few days for the plate to arrive.

Printing!

With the plate in hand, and mounted on the base, I was ready to print. I had the idea to fade the color from left to right, like a gradient. As long as I’m morphing the shape, might as well morph the color, right? Turns out that’s called “Rainbow Rolling”, where you ink up half the roller one color and half another color (or really, any number/combination of colors).

Then once you get the rollers going, it turns into a gradient:

I was all ready to pull some sheets!

Thanks

Huge thanks to Ashley Town, who’s the owner of Bay View Printing Company (Facebook / Instagram) and who taught me all this stuff in a two-part class.

And of course, if you want to learn more about SVG in general, I got a book for you.