So erstellen Sie eine LottieFiles-Animation in After Effects

LottieFiles hat einen schnellen, skalierbaren, nach dem Rendern bearbeitbaren Dateityp erstellt, und es ist für Sie einfach, sich zu engagieren und Animationen in diesem Format zu erstellen. Mit Adobe After Effects und einigen Plugins können Sie Teil des neuesten Dateityp-Hypes werden: Lottie.

Was ist eine Lotte?

Ein Lottie oder dotLottie ist ein Dateityp, der Webentwickler im Sturm erobert. Möglicherweise haben Sie Animationen erstellt, die Sie in Ihre Designs integrieren möchten, sei es für soziale Medien, Webdesign oder UX- und UI-Design. Und wahrscheinlich speichern Sie Ihre Animationen als GIF-, SVG- oder PNG-Dateien. Eine Lottie-Datei enthält alle guten Teile dieser Dateitypen, ist jedoch kleiner, schneller und nach dem Rendern einfacher zu bearbeiten.

LottieFiles ist eine riesige Datenbank mit vorgefertigten Animationen, die im Lottie- oder JSON-Format gespeichert sind. Diese Animationen werden in Echtzeit gerendert, was einen schnelleren Versand in Ihre Designs ermöglicht. Sie müssen nicht darauf warten, dass diese Dateien heruntergeladen werden; Sie werden angezeigt, sobald die Seite geöffnet wird.

Um mehr über LottieFiles zu erfahren, besuchen Sie unsere Einführung in die Lottie.

Einstieg

Wir werden eine Lottie mit erstellen Adobe After Effects, aber es gibt andere Software, mit der Sie Ihre Lottie-Animation erstellen können. Sie können Adobe Animate mit dem LottieFiles-Plugin verwenden, um ein Lottie zu erstellen. Sie können auch eine Animation im SVG-Format in ein Lottie konvertieren, wenn Sie bereits eine Animation in diesem Format erstellt haben.

After Effects ist jedoch unsere erste Wahl, da LottieFiles ursprünglich für die Verwendung in After Effects erstellt wurde. Lass uns anfangen.

1. Erstellen Sie Ihre Animation

Der animierende Aspekt Ihrer Lottie ist derselbe wie bei jedem anderen Format. Die Illustration unserer Animation haben wir mit Adobe Illustrator erstellt. Dadurch bleiben die Ebenen getrennt und für den Import in After Effects bereit. Sobald Ihre Illustration importiert ist, können Sie die Ebenen Ihrer Komposition für die endgültige Animation anpassen.

Lottie-Animationen laufen in einer Endlosschleife, also bedenken Sie dies für die End- und Startpunkte Ihres Designs. Die Animation sollte einfach und etwa drei Sekunden lang sein.

2. Laden Sie die Plugins herunter

Es gibt zwei Plugins, mit denen Sie eine Lottie-Datei erstellen können: das LottieFiles-Plugin oder das Bodymovin-Plugin. Beide sind für After Effects verfügbar, aber das LottieFiles-Plugin ist auch in anderer Software zu finden. Sie machen jeweils etwas andere Dinge, aber wir werden uns jetzt auf das LottieFiles-Plugin konzentrieren.

Um das LottieFiles-Plug-in herunterzuladen, gehen Sie zu LottieFiles After Effects-Plugin-Seite. Sie finden zwei Download-Optionen.

Die Option auf der rechten Seite erfordert ein Erweiterungsmanager von Anastasiy das funktioniert sowohl mit Mac als auch mit Windows. Nachdem Sie den Extension Manager heruntergeladen haben, laden Sie das ZXP-Plugin von der LottieFiles-Seite herunter.

Nachdem das ZXP-Plugin heruntergeladen wurde, öffnen Sie den Anastasiy Extension Manager, klicken Sie auf Nachwirkungen, wählen Sie das LottieFiles-Plugin aus der Liste aus und klicken Sie auf Installieren.

Zurück auf der LottieFiles-Plug-in-Seite laden Sie auch das Adobe Exchange-Plug-in herunter; Öffnen Sie Ihre Creative Cloud Desktop-Applikation und installieren Sie das Plug-in. Kehren Sie zu Ihrem Abschluss zurück Animationen in After Effects.

Einige Leute haben einen Berechtigungsfehler, wenn sie diese Plugins verwenden. Um dieses Problem zu vermeiden, gehen Sie zu Nachwirkungen > Einstellungen > Skripterstellung und Ausdrücke > Anwendungsskripting und kreuzen Sie das Kästchen für an Erlauben Sie Skripts, Dateien zu schreiben und auf das Netzwerk zuzugreifen.

Sobald dies erledigt ist, werden Sie im Popup für LottieFiles aufgefordert, sich anzumelden. Wenn Sie noch kein LottieFiles-Konto haben, ist es jetzt an der Zeit, eines zu erstellen.

3. Exportieren Sie Ihre Lottie

Wenn die LottieFiles-Plugins installiert sind, können Sie Ihre Lottie-Animation rendern. Klicken Sie auf Ihre fertige Animationskomposition Fenster > Erweiterungen > LottieDateien. Dies öffnet ein Popup mit den Namen Ihrer Kompositionen. Drücke den grüner Pfeil Neben dem Namen Ihrer Komposition wird das Lottie-Renderfenster angezeigt.

Nach einigen Sekunden erscheint Ihre Animation im Popup-Fenster. Die Animation wird in Echtzeit in einer Schleife abgespielt. Hier können Sie Ihre Animation speichern oder in die LottieFiles-Bibliothek hochladen.

Klicken Speichern als gibt Ihnen zwei Exportoptionen: Lottie JSON (*.json) oder dotLottie (*.lottie). Die dotLottie-Datei ist eine gezippte Datei, die Metadaten enthält, die wir für den Export nicht wirklich benötigen. Wir gingen mit Lottie JSON.

Ihre exportierte Datei ist eine Textdatei, keine visuelle Animationsdatei; So funktionieren JSON-Dateien. Aber was, wenn Sie möchten, dass die Animation einsatzbereit ist? Mal sehen, wie Sie darauf zugreifen können.

Wie Sie Ihre Lottie-Animation verwenden können

Um Ihr Lottie in die LottieFiles-Bibliothek hochzuladen, klicken Sie auf Hochladen. Dies wird einige Sekunden lang gerendert. Klicken Sie dann auf die Schaltfläche mit dem Globus darauf. Dadurch wird die LottieFiles-Website geöffnet, auf der Sie Ihre Lottie-Animation an die LottieFiles-Bibliothek senden können. Benennen Sie Ihre Datei und klicken Sie auf Weiterleiten.

Sobald Ihre Animation in der LottieFiles-Bibliothek genehmigt wurde, können Sie das LottieFiles-Plugin in Software wie Adobe XD, Figma oder Sketch verwenden, um Ihre Animation an Ihr Design zu senden.

Es gibt andere Möglichkeiten, Ihre LottieFiles-Animation als direkt in der Plugin-Bibliothek zu verwenden. Sie können Ihre Lottie-Animation über das Fenster im Browser weiter bearbeiten. Es bietet ein Bedienfeld für grundlegende Ebenen. Sie können die Hintergrundfarbe, die Wiedergabegeschwindigkeit, die Bildrate und einige weitere Dinge ändern.

Aus dem Handoff-Fenster können Sie Ihre Animation als JSON-Datei zur Implementierung in der Webentwicklung und Design, oder Sie können es für konventionellere Zwecke in ein GIF konvertieren. Sie können Ihre Animation auch mit einem HTML-Einbettungscode einbetten, und es gibt auch iOS- und Android-Optionen, sodass Sie die Animation in Ihr Webdesign einfügen können.

Durch das Einbetten des Lottie-HTML können Sie den Code bearbeiten, um Ihre Animation zu bearbeiten. Sie können Farben und Größen direkt im Code ändern, wenn Sie ihn zu Ihrer Website hinzufügen.

Wenn Sie die LottieFiles-App auf Ihr Telefon herunterladen, können Sie den QR-Code der Animation scannen, um eine Vorschau der Animation in der App anzuzeigen. Sie können auch die LottieFiles-Tastatur verwenden und Ihren dotLottie als Kommentar in bestimmten Beiträgen hinterlassen.

Erstellen Sie eine Lottie in After Effects

Es mag sich zwar immer noch wie ein unkonventioneller Dateityp anfühlen, da Sie Ihre Animation nicht einfach direkt in soziale Medien hochladen können Sie können mit einem GIF oder PNG, das Lottie bietet viele Vorteile für Webentwickler und Designer, die Plugins verwenden oder Codes in ihre einbetten Entwürfe.

Lottie- und JSON-Dateien sparen Platz und Ladezeit und bewahren die Qualität im Vergleich zu herkömmlichen Dateitypen. LottieFiles schafft ständig neue Wege, um die Designs umzusetzen, die Möglichkeiten sind endlos.

So erstellen Sie eine Bewegungsanimation mit Procreate

Das Erstellen einer Bewegungsanimation in Procreate ist einfach, und dieser Artikel zeigt Ihnen, wie es geht.

Lesen Sie weiter

Über den Autor