Bei der Logoanimation werden Bewegungen oder Änderungen an den visuellen Elementen eines Logos vorgenommen, um es dynamischer und attraktiver zu machen. Es kann auf verschiedene Teile eines Logos angewendet werden, wie etwa Text, Bilder, Farben und Formen, und es kann unterschiedliche Komplexitätsgrade aufweisen, die von einfachen Animationen wie blinkendem Text oder verblassenden Farben bis hin zu komplexen Animationen mit sich bewegenden oder interaktiven Objekten reichen Auswirkungen.
Logoanimationen werden immer häufiger. Zwischen Smartphones und der allgemeinen Entwicklung der Internettechnologie sind Logos heute in digitalen Räumen viel häufiger anzutreffen, und dies öffnet die Tür zu visuellen Effekten wie Animationen, die mit physischen Produkten nicht möglich sind. Die wachsende Beliebtheit von Logoanimationen bedeutet natürlich, dass immer mehr Marken diese benötigen, um wettbewerbsfähig zu bleiben. Daher kann das Erlernen der Animation eines Logos eine wertvolle Fähigkeit sein, die Ihr Logo auf die nächste Stufe hebt.
Gleichzeitig ist Animationssoftware allgegenwärtiger, schlanker und intuitiver geworden, um diese wachsende Benutzerbasis zu unterstützen. So technisch und komplex Logoanimationen auch klingen mögen, jetzt können auch Anfänger einfache, aber effektive Animationen erstellen.
Logo-Animation in After Effects -
Schritt 1. Bereiten Sie Ihre Logodatei vor.
Wir beginnen tatsächlich mit unserem Tutorial zum Animieren eines Logos in Adobe Illustrator (oder einer ähnlichen Logo-Design-Software). Dies ist notwendig, um sicherzustellen, dass unsere Datei Logo für Animation eingerichtet.
Obwohl es sich bei der Animationssoftware selbst um eine Rasteranimation handelt, müssen die ursprünglichen Logodateien im Vektorformat vorliegen. Dadurch können Sie sie ohne Änderungen ändern Schaden aus Gründen der Bildqualität (z. B. führt das Vergrößern eines Rasterlogos zu Pixelbildung). Dies ist später bei der Arbeit mit Formebenen nützlich.
Stellen Sie sicher, dass Ihr Logo mithilfe des Ebenenbedienfelds in Ebenen unterteilt ist.
Das Logo sollte außerdem mehrschichtig sein und nicht in einem Objekt gruppiert werden. Dadurch ist es einfacher, komplexere Animationen zu erstellen, indem einzelne Teile des Logos animiert werden. Sie können neue Ebenen erstellen, indem Sie „ Neue Ebene hinzufügen“ am unteren Rand des Ebenenbedienfelds und kopieren Sie dann Teile Ihres Logos und fügen Sie sie ein.
Da Animationen digitaler Natur sind, arbeiten wir schließlich auch mit RGB-Farben. Wenn Ihre Illustrator-Datei auf CMYK eingestellt ist, können Sie dies ändern, indem Sie Ihr Logo auswählen und zu Bearbeiten > Farben bearbeiten > In RGB konvertieren navigieren.
Wenn Sie fertig sind, exportieren Sie Ihr Logo als vollständig geschichtete Vektordatei. Da After Effects-Dateitypen Teil der Adobe-Softwarefamilie sind, speichere ich das von mir erstellte Logo als AI-Datei (Adobe Illustrator), aber es gibt mehrere verschiedene Arten von Vektordateien zur Auswahl, wenn Sie andere Software verwenden.
Schritt 2: Importieren Sie Ihr Logo in After Effects. Logo-Animation
Öffnen Sie After Effects. Die Benutzeroberfläche mag auf den ersten Blick kompliziert erscheinen, also lassen Sie uns die Grundlagen aufschlüsseln:
- Toolbar : Hier gelangen Sie zum Hauptmenü Grafik-Toolswie das Zeichenstift-Werkzeug, das Text-Werkzeug usw.
- Projektpanel : Hier verwalten und organisieren Sie Mediendateien für das gesamte Projekt.
- Kompositionsfenster : Dies ist ein Videovorschaufenster, in dem Sie eine Vorschau der Animation für die aktuelle Komposition (oft auch Komposition genannt) anzeigen können, an der Sie arbeiten. Kompositionen sind im Wesentlichen Szenen mit jeweils eigenen Animationszeitleisten. Auf Kompositionen gehen wir im nächsten Abschnitt ausführlicher ein.
- Zeitleiste : Hier erstellen Sie Ihre Animation. Es besteht sowohl aus einer tatsächlichen Zeitleiste auf der rechten Seite (wo Sie Animationsereignisse für die Ausführung auf der Zeitleiste einrichten) als auch aus einem Layoutbereich auf der linken Seite (wo Sie die Attribute Ihrer Medienressourcen überlagern und bearbeiten).
- Schalttafel : Hier können Sie auf verschiedene unterstützende Funktionen wie Medieninformationen, Absatz- und Ausrichtungsoptionen sowie vorgefertigte Animations- und visuelle Effektbibliotheken zugreifen, die in After Effects integriert sind.
Wenn Sie sich bei einem Werkzeug oder einer Schaltfläche nicht sicher sind, erhalten Sie eine Beschreibung, indem Sie mit der Maus darüber fahren.
Um eine Logodatei zu importieren, ziehen Sie sie einfach in das Projektfenster oder wählen Sie sie aus Datei" > " Importieren" > " Datei" . Wählen Sie im nächsten Dialogfeld die Option Medien importieren als aus Filmmaterial und zusammengeführte Ebenen .
Schritt 3: Richten Sie Ihre Komposition ein. Logo-Animation.
Eine Komposition (comp) ist ein Container, der es Ihnen ermöglicht, Mediendateien zu erstellen, zu bearbeiten und Animationen darauf anzuwenden. Eine größere Produktion, beispielsweise ein Film, enthält mehrere Titel, die in einem Projektpanel organisiert sind. Sie können sich die Spuren also als eine einzige Szene in diesem Film vorstellen und jede Spur hat ihre eigene separate Zeitleiste. In unserem Fall erfordert eine Logo-Animation, die weniger als fünf Sekunden dauert, nur sehr wenige Kompositionen.
Um Ihre Komposition anzupassen, ziehen Sie Mediendateien auf die linke Seite des Zeitleistenfensters.
Beginnen wir mit einem einfachen Hintergrund. Klicken Sie mit der rechten Maustaste auf das Layout-Panel und wählen Sie „ Schaffen" > " Solide" . Da mein Logo weiß ist, habe ich mich für einfarbig entschieden schwarze Farbe, aber Sie können jede Farbe wählen. Benennen Sie im nächsten Fenster den Festkörper (in meinem Fall „BG“) und klicken Sie auf „ Größe herstellen Computer“ und wählen Sie „ OK" . Ziehen Sie nun Ihre Logodatei aus dem Projektfenster in das Zeitleistenfenster und Sie sollten eine Vorschau Ihres Logos im Kompositionsfenster sehen. Wenn nicht, ordnen Sie die Ebenen unbedingt neu an, indem Sie den einfarbigen Hintergrund unter die Logodatei ziehen.
Klicken Sie im Layoutbereich mit der rechten Maustaste auf die Logodatei und wählen Sie sie aus Schaffen" > " In eine mehrschichtige Komposition umwandeln“ . Dadurch wird Ihre Logodatei in eine andere Zusammensetzung umgewandelt (Sie werden sehen, dass sich das Symbol geändert hat). Durch einen Doppelklick auf die Logodatei wird nun eine neue Registerkarte geöffnet und Sie gelangen zu dieser neuen Komposition, die alle einzelnen Ebenen enthält, die Sie in Illustrator eingerichtet haben. Jetzt können Sie sehen, wie Comps funktionieren: Sie ähneln im Wesentlichen Unterordnern.
Logo-Animation
Wenn Sie möchten, können Sie jede dieser Ebenen in separate Kompositionen umwandeln, indem Sie mit der rechten Maustaste klicken und auswählen Vorläufige Zusammensetzung“ . Dadurch erhält diese Ebene eine eigene Animationszeitleiste, die in der vorherigen Komposition verschachtelt ist. Und wenn Sie das gesamte Logo auf einmal animieren möchten, sollten Sie eine Zeitleiste verwenden, die mit der Hauptkomposition verknüpft ist.
Lassen Sie uns nun verstehen, wie diese Zeitleisten für Animationen funktionieren.
Schritt 4: Animieren Sie das Logo mithilfe von Keyframes
After Effects (und die meisten Animationsprogramme) arbeiten mit Keyframes. Keyframes sind im Wesentlichen Markierungen, die Sie auf der Zeitleiste festlegen können, um zu bestimmen, wann der Start- und Endstatus Ihrer Animation eintreten soll.
Beginnen wir zum Beispiel mit einer ganz einfachen Animation: dem Einblenden. Einem Objekt sind verschiedene Attribute zugeordnet, und Attribute, die sich über einen bestimmten Zeitraum ändern, sind im Wesentlichen Animationen. Um diese Attribute anzuzeigen, klicken Sie auf das Symbol „Erweitern“ neben dem Logo und dann auf „ Eigenschaft „Konvertieren“ .
Erstellen Sie Keyframes, indem Sie im Zeitleistenfenster auf das Stoppuhrsymbol neben „Eigenschaften“ klicken.
Für eine Fading-Animation möchten Sie mit dem Attribut arbeiten, das die Sichtbarkeit eines Objekts misst: Opazität. Die Deckkraft ist auf 100 % eingestellt, da das Logo standardmäßig vollständig sichtbar ist.
Klicken Sie auf das Stoppuhrsymbol neben der Option „Deckkraft“ und Sie sehen eine Raute an der Stelle, an der sich die Abspielkopfmarkierung befindet (die schwache blaue Linie, die die Zeitleiste kreuzt). Dies ist ein Keyframe, im Grunde eine Momentaufnahme des aktuellen Werts eines bestimmten Attributs. Verschieben Sie den Keyframe, indem Sie ihn anklicken und an die 2-Sekunden-Marke auf der Zeitleiste ziehen. Ziehen Sie den Schieberegler zurück auf die 0-Sekunden-Marke, erstellen Sie dann einen weiteren Keyframe und stellen Sie die Deckkraft auf 0 % ein. Drücken Sie die Leertaste, um die Animation im Kompositionsfenster anzuzeigen.
After Effects
Sie werden sehen, dass Sie eine sanfte Einblendanimation erstellt haben, indem Sie die Deckkraft mit nur zwei Keyframes in 0 Sekunden von 100 % auf 2 % geändert haben. Auf diese Weise werden alle Animationen in After Effects erstellt. Sie können einen Start-Keyframe und einen End-Keyframe in unterschiedlichen Abständen entlang der Zeitachse erstellen, und After Effects berechnet automatisch die notwendigen Frame-Übergänge, um von Punkt A zu Punkt B zu gelangen (in der Animationsbranche traditionell als Tween-Frames bezeichnet).
Mit zwei Keyframes für die Eigenschaft „Deckkraft“ wird eine einfache, glatte Animation erstellt.
Sie sehen, dass es eine Reihe von Attributen gibt, mit denen Sie arbeiten können Eigentum umwandeln, was wir hier kurz erläutern. Experimentieren Sie ruhig mit Keyframes und modifizieren Sie jeden einzelnen, um ein Gefühl für die Animationsmöglichkeiten zu bekommen:
- Position : Dieses Attribut beschreibt die Position des Logos im X- und Y-Raum auf dem Layoutbildschirm und ermöglicht die Animation linearer Bewegungen.
- Maßstab : Dieses Attribut beschreibt die Größe des Logos (als Prozentsatz der Gesamtgröße der Originaldatei) und ermöglicht Ihnen die Erstellung von Animationen zum Vergrößern oder Verkleinern.
- Rotation : Dieses Attribut beschreibt die Ausrichtung in Grad und ermöglicht die Erstellung von Rotationsanimationen.
Beratung vom Profi :
Wenn es darum geht, ein Logo zu animieren, ist es sinnvoll, rückwärts zu arbeiten (wie wir es beim Einblenden gemacht haben), da die Animation mit dem fertigen, vollständigen Logo enden sollte. Das bedeutet, dass Sie Keyframes erstellen müssen, bevor Sie etwas ändern, damit Sie Schnappschüsse der Attributwerte in ihrem Standardzustand haben. Sie können diese Keyframes dann an den gewünschten Endpunkt auf der Timeline verschieben (wie lange die Animation auch dauern soll) und am Anfang der Timeline neue Keyframes für die Änderungen erstellen.
Schritt 5. Animieren Sie das Logo mithilfe von Formebenen.
Kommen wir nun zu interessanteren Animationstechniken mit Formebenen. Formebenen sind Objekte, die Pfadinformationen wie Ankerpunkte und Verbindungslinien enthalten (ähnlich denen in Vektorprogrammen), und ihre Manipulation öffnet die Tür zu einer ganzen Reihe darüber hinausgehender Animationsmöglichkeiten Eigenschaften transformieren .
Wie wählen Sie die richtige Farbe für Ihr Logo aus?
Zuerst konvertieren wir das Logo in eine Formebene. Wählen Sie im Bedienfeld „Ebenenkomposition“ (die in Schritt 3 erstellten Ebenen) alle Ebenen aus, klicken Sie mit der rechten Maustaste und wählen Sie „ Schaffen" > " „Formen aus Vektorebene erstellen“ . Sie werden sehen, dass jede Ebene mit einem Stern daneben dupliziert ist – dies ist eine Formebene. Unter der Formebene verschachtelt finden Sie Inhaltseigenschaft zusätzlich zu Eigentum umwandeln . Rechts von Inhaltseigenschaften Sie sehen auch eine Schaltfläche „ Hinzufügen" , wodurch Sie noch mehr Attribute zum Animieren auswählen können.
Formebenen enthalten eine Schaltfläche „Hinzufügen“ (rechts neben der Eigenschaft „Inhalt“), mit der Sie alle möglichen animierten Eigenschaften hinzufügen können, z. B. Beschneidungspfade.
Skalieren eines Objekts in Adobe Illustrator
Pfade trimmen
Für mein Logo habe ich eine ziemlich häufige und nützliche Animation mit der Eigenschaft „Trimmpfade“ verwendet. Dazu habe ich „Crop Paths“ über die Schaltfläche „ Hinzufügen" Um die Formebenen für jeden Buchstaben zu markieren, legen Sie den Endattribut-Keyframe am Anfang der Zeitleiste auf 0 % und nach etwa einer Sekunde auf 100 % fest. Wie Sie sehen, scheinen die Umrisse der Buchstaben in Echtzeit von unsichtbarer Hand gezeichnet worden zu sein.
Mit der Eigenschaft „Trimmpfade“ können Sie Linien so animieren, dass sie sich in Echtzeit selbst zeichnen.
Außerdem wollte ich dem Hintergrund eine Akzentanimation hinzufügen. Da ich in Schwarzweiß arbeite, habe ich einen Schleifentunneleffekt gewählt, der an die Twilight Zone erinnert. Dazu habe ich das Polygon-Werkzeug im Bedienfeld „Werkzeuge“ verwendet, um eine Form in der Mitte meiner Komposition zu zeichnen und so eine neue Formebene zu erstellen.
Dann habe ich eine Repeater-Eigenschaft hinzugefügt, die Position zentriert und die Anzahl der Kopien erhöht. Dadurch wird die Form dupliziert und ein scheinbar endloser Tunnel entsteht. Durch Anpassen des Maßstabs wird der Abstand zwischen den einzelnen Kopien vergrößert und durch Ändern der Drehung werden die Kopien optisch interessanter in unterschiedliche Richtungen ausgerichtet.
Zum Abschluss habe ich am Anfang der Timeline einen Offset von 0 als Keyframe gesetzt und ihn später auf der Timeline auf einen negativen Wert gesetzt.
Mit einer polygonalen Formebene und der Repeater-Eigenschaft konnte ich einen animierten Hintergrund erstellen.
Sie haben wahrscheinlich schon erraten, dass es viele Optionen für Formebenen gibt. Es stimmt: Im Internet gibt es komplette Online-Kurse zum Thema und man sollte sich die Zeit zum Experimentieren, Üben und Lernen nehmen.
Ich kann Ihnen auch nicht sagen, welcher Animationsstil zu Ihnen passt Logo oder welche spezifischen Werkzeuge Animationen, die Sie benötigen, um diesen Stil zu erreichen. Ich kann Ihnen jedoch Ratschläge geben, wie Sie es selbst entdecken können. Lassen Sie sich von anderen animierten Logos inspirieren, beispielsweise von Ihren Mitbewerbern, von Marken, die Sie bewundern, und/oder von Websites wie Pinterest oder Dribbble – genau wie Sie es getan haben, als Sie das Logo ursprünglich erstellt haben.
Sie werden feststellen, dass viele davon auf einfachen Grundlagen basieren, wenn Sie mit Ihrem neuen Wissen über die Animation eines Logos beginnen, sie zu analysieren Manipulationen mit Formen und Transformationen (auch solche, die deutlich mit erweiterten stilisierten Effekten überlagert sind). Sobald Sie ein paar gefunden haben, die Ihnen gefallen, können Sie in After Effects rückwärts arbeiten und versuchen, diese Animationen zum Üben zurückzuentwickeln.
Schritt 6: Stellen Sie die Uhrzeit ein.
Lassen Sie uns über die Zeit sprechen, die das Tempo der Animationsbilder während der gesamten Animation beschreibt. Sie können eine visuelle Darstellung der Zeit sehen, indem Sie zum Diagrammeditor gehen. Klicken Sie dazu oben im Zeitleistenfenster auf das Diagrammsymbol (beschriftet mit „Grafikeditor“, wenn Sie mit der Maus darüber fahren). Dadurch wird die Zeitleiste in ein Liniendiagramm umgewandelt.
Wenn Sie auf eines der Keyframe-Attribute klicken, sehen Sie eine gerade Linie von einem Keyframe zum nächsten. Da wir derzeit nur die Keyframings für die Start- und Endpunkte erstellten, überließen wir After Effects das Timing. Ohne Richtung verschiebt After Effects jeden Frame der Animation gleichmäßig, sodass eine perfekt gerade Linie entsteht.
Der Diagrammeditor zeigt das Timing der Schlüsselbilder wie im Liniendiagramm dargestellt.
Der gezielte Zeitwechsel verleiht der Animation jedoch ein Gefühl von Realismus. Beispielsweise bewegt sich der Ball in einer springenden Ballanimation aufgrund von Impuls und Schwerkraft auf der Höhe des Sprungs langsamer und schneller, wenn er sich dem Boden nähert. Mit anderen Worten, er bewegt sich nicht während der gesamten Animation mit der gleichen Geschwindigkeit, und wenn er es täte, würde er als Roboter auffallen.
Mit den Bézier-Werkzeugen unten im Diagrammeditor können Sie die Krümmung der Diagrammlinie anpassen.
Konvertieren Sie Keyframes in Auto-Bezier
Mit dem Diagrammeditor können Sie das Timing Ihrer eigenen Animation anpassen, indem Sie mithilfe sogenannter Bezier-Griffe eine Diagrammlinie in eine Kurve umwandeln. In der unteren rechten Ecke des Diagrammeditors sehen Sie einige quadratische Punktsymbole, die an Linien angehängt sind – das sind Bezier-Werkzeuge.
Klicken Sie auf einen der Keyframes und bewegen Sie den Mauszeiger über die Bézier-Werkzeuge, bis Sie das mit der Bezeichnung „“ finden. „Keyframes in Auto-Bezier umwandeln“ . Wenn Sie darauf klicken, wird in der Grafik eine gelbe Markierung angezeigt. Durch Ziehen dieses Griffs wird die Linie gebogen, wodurch sich das Timing Ihrer Animation ändert. Wo die Krümmung ausgeprägter ist, werden die Bilder schneller abgespielt, und wo die Krümmung glatter ist, werden die Bilder langsamer abgespielt.
Eine schärfere Kurve entspricht einer schnelleren Synchronisierung und eine glattere Kurve entspricht einer langsameren Synchronisierung.
Um die Nuancen der Anpassung Ihres eigenen Timings wirklich zu verstehen, ist Animationserfahrung erforderlich, weshalb die manuelle Anpassung von Bezier-Kurven ein fortgeschritteneres Thema ist. In diesem Leitfaden für Einsteiger empfehle ich die Verwendung des Bezier-Werkzeugs Leichte Leichtigkeit (wodurch eine automatische Kurve auf den von Ihnen ausgewählten Keyframe angewendet wird) für alle Animationszeitintervalle. Du kannst dich bewerben Leichte Leichtigkeit zu einem Keyframe außerhalb des Diagrammeditors hinzufügen, indem Sie den Keyframe auswählen und mit der rechten Maustaste klicken.
Schritt 7: Exportieren Sie Ihr Logo.
Wenn Sie bereit sind, Ihr fertiges animiertes Logo zu exportieren, wählen Sie „ Datei" > " Export" > " „Adobe Media Encoder zur Warteschlange hinzufügen“ . After Effects exportiert standardmäßig Datei im Format mp4, das für Videos geeignet ist. Da wir eine gemeinsam nutzbare Bilddatei unseres Logos erstellen möchten, exportieren wir sie als animiertes GIF. Klicken Sie im Media Encoder-Fenster auf den Pfeil neben der hervorgehobenen blauen Textzeile unter dem Wort „Format“ und wählen Sie „ Animiertes GIF" . Sie können den Zielordner für Ihre fertige Datei auch festlegen, indem Sie auf den blauen Text unter den Worten „Ausgabedatei“ klicken.
Um eine Datei zu exportieren, gehen Sie zu „Datei“ > „Exportieren“ > „Zur Adobe Media Encoder-Warteschlange hinzufügen“ und wählen Sie „Animiertes GIF“ aus der Dropdown-Liste in der Spalte „Format“ aus.
Doppelklicken Sie auf den hervorgehobenen blauen Text unter der Voreinstellung, um das Fenster „Exportoptionen“ zu öffnen. Es gibt ein paar Optionen, die Sie in Betracht ziehen sollten, um Ihre Dateigröße zu reduzieren: Qualität (ich habe sie auf 20 eingestellt), Bildrate (ich habe sie auf 10 gesetzt, obwohl für Videos höhere Bildraten (fps) empfohlen werden) und Dauer, das ist der blaue Balken unter der Vorschau (ich habe meinen auf 4 Sekunden gekürzt). Wählen OK um dieses Fenster zu schließen.
Wenn Sie fertig sind, wählen Sie das grüne Wiedergabesymbol in der oberen rechten Ecke von Media Encoder aus und Ihre Datei wird im ausgewählten Zielordner angezeigt. Das ist es: fertige Logo-Animation!
Erwecken Sie Ihre Marke mit Logoanimationen zum Leben.
-
Logoanimationen sind mehr als nur ein beliebter Trend, dem Marken folgen müssen. Logo-Animationen haben auch unbestreitbar eine magische Wirkung und sind eine großartige Möglichkeit, jedem, der mit Ihrer Marke interagiert, einen Moment des visuellen Vergnügens zu bereiten. Und glücklicherweise hat sich die Animationssoftware so weiterentwickelt, dass fast jeder, unabhängig von seinen Fähigkeiten, seinem eigenen Logo ein wenig von dieser Magie verleihen kann.
Obwohl dieses Tutorial dazu gedacht ist, Ihnen den Einstieg in die Grundlagen der Logo-Animation zu erleichtern, bedarf es einer Menge Versuch und Irrtum, Übung und Experimentieren, um etwas zu erreichen, das über die grundlegende Animation hinausgeht. Wenn Sie eine ganz besondere Logo-Animation wünschen, lohnt sich die Investition in einen professionellen Logo-Animator.
Hinterlassen Sie einen Kommentar