SVG → Letterpress

Ich besuchte einen Kurs bei der Bay View Printing Company, dem lokalen Gemeinschafts-Letterpress-Studio, dem ich angehöre. Der Kurs handelte vom Drucken mit Polymerplatten. Das Studio ist voll mit Holz- und Metalllettern und allem Zubehör dafür, aber Polymerplatten gehören nicht dazu. Die lässt man sich anfertigen! Sie können alles sein! Manchmal macht es Spaß, bei der alten Methode des Schriftsatzes zu bleiben. Ich mache das ziemlich gerne. Aber ich war daran interessiert zu lernen, wie man mit modernen Mitteln Designs, die ich erstellt habe, im Letterpress-Verfahren druckt. Zum Beispiel mit SVG.

Obwohl ich sagen würde, dass die *meisten* Arbeiten, die von Mitgliedern bei der Bay View Printing Company ausgeführt werden, unter Verwendung der Holz- und Metalllettern im Studio erfolgen, besteht der Sinn dieser Polymerplattengeschichte darin, dass sie es Ihnen ermöglicht, alles zu drucken, was Sie entwerfen können.

Das Unternehmen, das die Polymerplatten herstellt, heißt Boxcar Press aus Syracuse, New York. Sie stellen ein Produkt namens Boxcar Base her, das im Wesentlichen ein großer Metallklotz mit einem Gitter darauf ist. Um auf einer Letterpress-Presse drucken zu können, muss das Design "letterhoch" (0,918 Zoll) sein, und die von ihnen hergestellten Polymerplatten sind (effizient) dünn.

Sie kleben die Platten auf die Basis und verwenden diese in der Presse

Die Idee

Ich bin immer noch ziemlich besessen von der ganzen Idee des Formen-Morphings. Das ist einfach etwas, das SVG so gut kann.

Meine Idee war, das CodePen-Logo in ein Herz zu verwandeln. Awwww. Ich weiß. So süß. Aber offensichtlich gibt es keine Animation auf Papier, also würde ich eine Reihe von Bildern anordnen, die den Übergang in Schritten zeigen.

Die Technik

Ich habe eine kleine Formen-Morphing-Aktion mit dem Greensock Add-on dafür eingerichtet. Es gibt andere JavaScript-Bibliotheken, die Morphing beherrschen, SMIL kann es, und sogar CSS beginnt, es jetzt zu können. Ich empfehle Greensock immer noch, weil

1. Es kann praktisch jede Form verarbeiten, egal wie viele "Punkte" sie hat
2. Es ist browserübergreifend (und auch für ältere Browser) freundlich
3. Es ist performant

In diesem Fall habe ich Greensock aus einem anderen Grund verwendet: Man kann ziemlich einfach eine Zeitleiste hinzufügen hinzufügen. Die Zeitleiste war wichtig, weil ich die Animation an bestimmten Punkten **anhalten** und die Vektorpfaddaten extrahieren wollte.

Sieh den Pen Heart To CP Badge von Chris Coyier (@chriscoyier) auf CodePen.

Jetzt muss ich nur noch die Daten extrahieren

Greensock MorphSVG kann die Ausschnitte im CodePen-Logo gut verarbeiten, aber ich habe sie manuell und separat vorgenommen, da ich wollte, dass sie sich visuell irgendwie zusammenziehen.

Jetzt habe ich in Illustrator genau das, was ich brauche

Zu Boxcar

Ihre Website akzeptiert Dateien in den Formaten PDF, EPS, AI, was in Ordnung ist, da ich bereits in Illustrator war. Sie laden sie per Drag & Drop direkt auf die Website hoch.

Ich musste vorsichtig mit dem Schwarz sein. Standard-Schwarz in Illustrator ist eine tiefe Mischung aus CMYK, nicht nur 0 0 0 100%. Es ist am besten, wenn Sie reines Schwarz erzwingen, damit Boxcar bei einem Upload nicht versucht, mehrere Platten für dieses einzelne Farbobjekt zu erstellen.

Ein paar Klicks später sind Sie fertig. Warten Sie einfach ein paar Tage, bis die Platte eintrifft.

Drucken!

Mit der Platte in der Hand und auf der Basis montiert, war ich bereit zum Drucken. Ich hatte die Idee, die Farbe von links nach rechts verblassen zu lassen, wie ein Gradient. Solange ich die Form verändere, kann ich auch die Farbe verändern, oder? Es stellt sich heraus, dass das "Rainbow Rolling" genannt wird, bei dem man die Farbwalze zur Hälfte mit einer Farbe und zur Hälfte mit einer anderen Farbe (oder eigentlich jeder beliebigen Anzahl/Kombination von Farben) einfärbt.

Wenn man dann die Farbwalzen in Bewegung setzt, entsteht ein Gradient

Ich war bereit, ein paar Bogen zu drucken!

Danksagung

Vielen Dank an Ashley Town, die Besitzerin von Bay View Printing Company (Facebook / Instagram) und die mir all das in einem zweiteiligen Kurs beigebracht hat.

Und natürlich, wenn Sie mehr über SVG im Allgemeinen erfahren möchten, habe ich ein Buch für Sie.