Lettering-Animation (Motion)

Lettering-Animation ist das Inbewegungsetzen von Schriftzügen, etwa durch einen Schreib-Effekt (Write-On), bei dem sich die Buchstaben scheinbar selbst schreiben.

Rubrik: Kalligrafie · Unterrubrik: Digitale Kalligrafie · Niveau: Fortgeschritten Synonyme / Auch bekannt als: animiertes Lettering, Motion Lettering, Write-On-Animation

Was ist Lettering-Animation?

Lettering-Animation bezeichnet das Animieren kalligrafischer Schriftzüge, sodass sie sich bewegen, aufbauen oder „selbst schreiben". Der bekannteste Effekt ist der Write-On, bei dem eine Maske den Pfad des Schriftzugs nachzeichnet und die Buchstaben nach und nach erscheinen lässt.

Erklärung

Lettering-Animation verbindet die Gestaltung von Schrift mit Motion-Design-Techniken. Der Klassiker ist der Write-On-Effekt: Ein Pinsel- oder Pfadwerkzeug folgt dem Verlauf des Schriftzugs, und über eine animierte Maske wird der Strich Stück für Stück sichtbar, so entsteht der Eindruck, als würde die Schrift gerade in Echtzeit geschrieben.

Werkzeuge für Lettering-Animation:

• Adobe After Effects: Write-On-Effekt über „Effekt > Erstellen > Strich" mit animiertem Pfad-Endpunkt, oder per Maskenpfad mit Trim Paths. Bietet volle Kontrolle über Timing und Easing.
• Procreate (Animation Assist): In Procreate kann man den Schreibprozess als Ebenensequenz aufzeichnen. Animation Assist schaltet unter Einstellungen > Leinwand ein und erlaubt Onion Skinning und Frame-Steuerung. Einfache Write-On-Loops entstehen direkt in der App.
• Lottie / Bodymovin: Leichtgewichtiges JSON-Format für Web und Apps. After-Effects-Animationen werden per Bodymovin-Plugin exportiert. Lottie skaliert verlustfrei und ist deutlich kleiner als MP4.
• Canva / CapCut: Für Social Media genügen oft vereinfachte Animationstools, die Write-On-Effekte per Vorlage bereitstellen.

Über den Write-On hinaus umfasst Lettering-Animation klassische Bewegungsprinzipien: Ein- und Ausblenden, Skalieren, Bounce, Drehung oder ein Verlauf, der durch die Buchstaben wandert. Wichtig sind dabei Timing und Easing: gleichmäßige, leicht beschleunigte Bewegungen (ease in/out) wirken organischer als lineare Animationen. Für Social Media exportiert man als MP4 oder GIF. Für Web und App eignet sich Lottie, ein leichtgewichtiges JSON-Format.

Beispiele

• Write-On-Schriftzug: Buchstaben schreiben sich mit Pinselstrich selbst.
• Bounce-Logo: Wortmarke springt federnd ins Bild mit Squash-and-Stretch.
• Verlaufs-Sweep: Lichtreflex wandert über die fertige Schrift.
• GIF für Stories: kurze Schleife als animierter Sticker.
• Lottie-Animation: leichtes JSON-Format für Web und App, verlustfrei skalierbar.

In der Praxis

Write-On-Animation in After Effects (Schritt für Schritt):

1. Vektorschriftzug aus Illustrator in After Effects importieren (als AI-Datei, Ebenen erhalten).
2. Buchstaben auf eigene Kompositionsebenen verteilen.
3. Jede Ebene: Effekt > Erstellen > Strich hinzufügen.
4. „Start" und „Ende" des Strichs als Keyframes animieren: von 0 % auf 100 % über die gewünschte Dauer.
5. Easing: Keyframes markieren, F9 für Easy Ease.
6. Buchstaben zeitversetzt starten für natürlichen Schreibrhythmus.
7. Als MP4 (H.264) für Social Media oder als Lottie (Bodymovin-Plugin) für Web exportieren.

Den Schriftzug erstellt man zunächst in Procreate für Kalligrafie oder als Vektor in Illustrator für Schriftzüge und überträgt ihn in ein Motion-Programm. Vektoren aus Vektorisieren von Handschrift eignen sich besonders, weil sie verlustfrei skalieren. Den Gesamtkontext der digitalen Werkzeugkette zeigt Digitale Kalligrafie, Überblick.

Vergleich & Abgrenzung

Lettering-Animation wird mit kinetischer Typografie verwechselt. Lettering-Animation bewegt einen handgestalteten, individuell gezeichneten Schriftzug. Kinetische Typografie animiert meist gesetzte Schriftarten zu Text und Sprache, der Inhalt steht im Vordergrund, nicht die Gestaltung des einzelnen Buchstabens.

Häufige Fragen (FAQ)

Womit animiert man Lettering am einfachsten? Für einfache Write-On-Animationen reicht Procreates Animation Assist direkt auf dem iPad. Für komplexere Kompositionen mit Easing und Ebenenkontrolle ist Adobe After Effects die Standardwahl. Lottie/Bodymovin lohnt sich, wenn die Animation auf einer Website eingesetzt werden soll.

In welchem Format exportiert man animiertes Lettering? Für Social Media MP4 oder GIF, für Web und Apps Lottie (JSON). Lottie ist besonders leicht, verlustfrei skalierbar und wird von vielen Web-Frameworks unterstützt.

Verwandte Einträge

• Procreate für Kalligrafie
• Illustrator für Schriftzüge
• Vektorisieren von Handschrift

Weiterführend

• Krasner, Jon (2013): Motion Graphic Design. Focal Press.
• Adobe Inc. (2024): Pfade animieren, After-Effects-Hilfe. helpx.adobe.com.
• Shaw, Austin (2015): Design for Motion. Focal Press.