Entwerfen Sie eine Markenladeanimation in After Effects
Gutes visuelles Design wird immer einfacher zu bekommen. Es wird immer schwieriger zu sagen, wer echte Design-Chops hat und wer nur Zugang zu wirklich netten hat Website-Vorlagen oder UI-Kits. Dies bedeutet, um eine wirkungsvolle zu schaffen Benutzererfahrung Sie müssen über das hinausgehen, was die Leute erwarten.
Einige der denkwürdigsten Berührungen sind die kleinen. Denken Sie an MailChimps berühmte 'Monkey Hand High Five', die angezeigt wird, wenn Sie in Ihrer Kampagne auf 'Senden' klicken. Anstelle einer allgemeinen Erfolgsbotschaft, wie zu erwarten, haben sie etwas tiefer gegraben und ihre Marke in die Erfahrung eingearbeitet. Wir werden hier keine Affentatzen animieren, aber wir werden eine farbenfrohe Ladeanimation erstellen, die einfach mit Ihren eigenen Markenfarben und Ihrem Logo angepasst werden kann. Das folgende Beispiel von InVision sehen Sie:
Wir verwenden After Effects, um die Ladeanimationssequenz zu erstellen, und bringen dann unsere exportierte Videodatei in Photoshop und verwandeln sie in ein leichtes GIF, das überall dort gestartet werden kann, wo Sie ein animiertes Ladeelement benötigen.
Bevor Sie eintauchen, müssen Sie vier Markenfarben auswählen und eine kleine, einfarbige, transparente Version Ihres Logos zur Hand haben. Wenn Sie After Effects lernen wollten, ist dies eine perfekte Gelegenheit, um einzuspringen, etwas Einzigartiges zu kreieren und dabei einige großartige grundlegende Techniken zu erlernen.
Sehen Sie sich diesen exklusiven Screencast an oder führen Sie die folgenden Schritte aus, um Ihre Ladeanimation zu erstellen.
01. Erstellen Sie eine neue Sequenz
Öffnen Sie After Effects und drücken Sie cmd + N. um eine neue Sequenz zu erstellen. Da unser Video ein Quadrat sein wird, ändern Sie in den Kompositionseinstellungen anstelle des Standard-Seitenverhältnisses von 16: 9 die Breite und Höhe auf 120 Pixel und klicken Sie auf OK. Die empfohlene endgültige Ausgabe unseres GIF wird 60 Pixel betragen, aber wir möchten auch Retina-Bildschirme berücksichtigen können.
02. Sortieren Sie Ihre Arbeitsbereiche
Bevor wir fortfahren, stellen wir sicher, dass unsere After Effects-Arbeitsbereiche identisch sind. Gehen Sie in Ihrem Hauptmenü zu Fenster> Arbeitsbereich> Standard . Auf diese Weise wird, wenn ich sage 'Klicken Sie auf das Ding unten rechts auf Ihrem Bildschirm', es tatsächlich unten rechts auf Ihrem Bildschirm angezeigt.
03. Machen Sie einige Formen
Erstellen wir nun eine Handvoll quadratischer Formen, die zu unseren animierten Farbblöcken werden. Klicken Sie auf Ihre Sequenz (das schwarze Quadrat in der Mitte des Bildschirms) und drücken Sie Q. , dann Umschalt + Klicken und Ziehen Ein Quadrat auf dem Bildschirm, sodass sich die Kanten knapp außerhalb der Kanten der Komposition erstrecken.
Es wird empfohlen, die Form perfekt auf dem Bildschirm zu zentrieren. Klicken Sie im Bedienfeld „Ausrichten“ unten rechts auf „Horizontale Mittenausrichtung“ und „Vertikale Mittenausrichtung“.
04. Farbe hinzufügen
Während Ihre Form noch ausgewählt ist, klicken Sie oben auf dem Bildschirm auf die Option Füllfarbe und geben Sie eine Ihrer primären Markenfarben als Hex- oder RGB-Wert ein. Sie können auch die Pipette verwenden, um Farben von einer anderen Stelle auf dem Bildschirm abzutasten, einschließlich Farben außerhalb des After Effects-Fensters, was hilfreich ist.
05. Dupliziere deine Ebenen
Am unteren Rand Ihres Bildschirms sehen Sie eine Zeitleiste mit einer einzelnen Ebene namens 'Formebene 1'. Wählen Sie es aus, indem Sie auf den Namen oder den blauen Balken in der Timeline klicken und drücken Strg / cmd + D. viermal, um es zu duplizieren. Sie sollten am Ende fünf identische Ebenen in Ihrer Timeline haben. Diese tragen den Titel Formebene 1, 2, 3, 4 und 5.
06. Verwenden Sie Ankerpunkte
Jede Form wird von einer anderen Seite des Bildschirms aus animiert. Um dies zu vereinfachen, werden wir die Position unserer Ankerpunkte im Voraus ändern. Wählen Sie Formebene 2 und drücken Sie Y. um das Ankerpunkt-Werkzeug aufzurufen. Klicken Sie dann auf Ihren Ankerpunkt (es sieht aus wie ein Fadenkreuz irgendwo in Ihrer Form) und ziehen Sie es an die Unterkante Ihres Quadrats. Wiederholen Sie diesen Vorgang auf den Ebenen 3 bis 5, wobei Sie jeden Ankerpunkt an einer anderen Kante als den letzten platzieren. Sie müssen nichts tun, um Ebene 1 zu formen.
07. Versetzen Sie das Timing
Jetzt ist es Zeit, das Timing unserer Formen in der Timeline zu verschieben. Drücken Sie V. um zu Ihrem Auswahlwerkzeug und in Ihrer Zeitleiste zu wechseln Umschalt + Klick die blauen Balken für die Ebenen 3-5 und ziehen Sie sie nach rechts, wobei der Abstand jeweils um eine Sekunde liegt. Sie sollten an den Markierungen 1, 2 und 3 Sekunden in Ihrer Zeitleiste beginnen. Wenn Ihre Timeline zu verkleinert ist, halten Sie sie gedrückt alles und scrollen Sie nach unten - diese Aktion zoomt Sie in Ihre Timeline hinein und aus ihr heraus.
08. Weitere Farben hinzufügen
Wählen Sie die Formen 2 bis 4 einzeln aus und ändern Sie ihre Füllfarbe wie in Schritt 4. Sie können Ihren Abspielkopf (die vertikale rote Fortschrittslinie) über die Form ziehen, die Sie bearbeiten, um zu sehen, dass Ihre Änderungen vorgenommen werden. Wir lassen die Formebenen 1 und 5 in derselben Farbe, da wir eine Schleife erstellen, die mit derselben Farbe beginnt und endet. Wenn das momentan keinen Sinn ergibt, mach dir keine Sorgen - es wird.
09. Machen Sie eine erste Vorschau
Es ist Zeit, eine Vorschau Ihrer bisherigen Handarbeit anzuzeigen. Drücken Sie die Leertaste und beobachten Sie, wie sich die Farben auf dem Bildschirm ändern. Schlagen Leertaste wieder zu stoppen (oder Esc wenn das nicht funktioniert).
10. Erstellen Sie einen Keyframe
Klicken Sie auf Ihren Abspielkopf und ziehen Sie ihn an den Anfang Ihrer Timeline zurück. Wählen Sie Formebene 2 und drücken Sie S. auf Ihrer Tastatur, um die Skalierungsoptionen für diese Form aufzurufen. Klicken Sie nun auf das Stoppuhrsymbol neben Skalieren, deaktivieren Sie das Verknüpfungssymbol neben den Skalierungsprozentsätzen und ziehen Sie den zweiten Wert auf 0%. Ein kleiner Diamant wird auf Ihrer Timeline am aktuellen Standort Ihres Abspielkopfs angezeigt. Herzlichen Glückwunsch, Sie haben gerade einen Keyframe erstellt!
11. Erstellen Sie einen weiteren Keyframe
Ziehen Sie den Abspielkopf bis zu 1 Sekunde und setzen Sie den Wert Ihrer Form wieder auf 100 Prozent. Ein weiterer Keyframe sollte in Ihrer Timeline am Abspielkopf angezeigt werden. Ziehen Sie den Abspielkopf zurück an den Anfang Ihrer Timeline und drücken Sie die Leertaste, um eine Vorschau Ihrer Animation anzuzeigen. Sie sollten die Form vergrößern und Formebene 1 abdecken.
12. Erstellen Sie weitere Keyframes
Wiederholen Sie diese Schritte auf den Formebenen 3-5 erneut, und starten Sie Ihre Animation jedes Mal am Anfang des blauen Balkens der Ebene, den wir zuvor um 1 Sekunde versetzt hatten. Wenn Sie fertig sind, sollte der erste Keyframe jeder Ebene mit dem letzten Keyframe der darunter liegenden Ebene übereinstimmen.
13. Vorschau erneut
Wenn Sie Ihre Keyframes hinzugefügt haben, zeigen Sie eine Vorschau Ihrer Arbeit an. Sie sollten verschiedene Formen sehen, die aus verschiedenen Winkeln übereinander gleiten. Wenn dies der Fall ist, bewegen Sie Ihren Abspielkopf auf 4 Sekunden und drücken Sie N. . Dies markiert das Ende Ihrer Animation und wiederholt Ihre Vorschau, wenn Sie erneut die Leertaste drücken. Wenn Formebene 1 und Formebene 5 dieselbe Farbe haben, sollte sie eine nahtlose Schleife bilden.
14. Passen Sie die Beschleunigung an
Es ist fast Zeit, Ihr Logo hinzuzufügen, aber nicht ganz. Die Animation sieht im Moment wahrscheinlich etwas linear aus (sprich: langweilig) - beleben wir sie, indem wir die Lockerung ändern. Halten Sie die Verschiebung Wählen Sie den endgültigen Keyframe jeder Ebene aus und klicken Sie mit der rechten Maustaste auf einen. Wählen Sie Keyframe-Geschwindigkeit, stellen Sie die Eingangsgeschwindigkeit auf 100 Prozent ein und lassen Sie Dimension X und Y in Ruhe. Klicken Sie auf OK und zeigen Sie erneut eine Vorschau an. Sie werden feststellen, dass die Animationen ganz am Ende langsamer werden und ein dynamischeres Gefühl erzeugen.
15. Fügen Sie ein Logo hinzu
Jetzt können Sie Ihr Logo über der Animation hinzufügen. Doppelklicken Sie im Projektfenster links auf dem Bildschirm auf den leeren Bereich unter Comp 1 und importieren Sie Ihre Bilddatei (am besten, wenn es sich um ein transparentes Bildformat wie PNG oder EPS handelt). Ziehen Sie es dann an den Anfang Ihres Bilds Timeline, wodurch es zur obersten Ebene wird. Sie können schlagen S. Skalieren Sie Ihr Logo erneut nach oben oder unten und verwenden Sie das Ausrichtungsbedienfeld erneut, um den Totpunkt in der Komposition zu platzieren.
16. Vorschau und Export
Wenn Sie mit der Größe und Platzierung Ihres Logos zufrieden sind, klicken Sie erneut auf Wiedergabe und stellen Sie sicher, dass alles noch gut aussieht. In diesem Fall ist es Zeit, Ihr Video zu exportieren. Gehe zu Datei> Exportieren> Zur Renderwarteschlange hinzufügen Stellen Sie dann Ihre Rendereinstellungen auf 'Best', das Ausgabemodul auf 'Verlustfrei' und wählen Sie aus, wo Ihre Videodatei abgelegt werden soll, indem Sie im Bereich 'Ausgabe an' auf den Dateinamen klicken.
17. Gehen Sie zu Photoshop
Jetzt ist es Zeit, Photoshop zu starten und unser Video in ein animiertes GIF zu konvertieren. Gehen Sie in Photoshop zu Datei> Importieren> Videobilder in Ebenen und wählen Sie Ihre Videodatei aus. An der folgenden Eingabeaufforderung haben Sie die Möglichkeit, eine Reihe von Importeinstellungen für Ihr Video anzupassen. Da diese Animation jedoch so kurz ist, klicken wir einfach auf OK.
18. Überprüfen Sie, ob alles gut ist
Um sicherzustellen, dass mit Ihrem GIF in Photoshop nichts funky aussieht, gehen Sie zu Fenster> Zeitleiste Klicken Sie auf die Wiedergabetaste in der unteren linken Ecke, um die Zeitleiste aufzurufen. Die Wiedergabe erfolgt möglicherweise nicht mit 100% Geschwindigkeit. Machen Sie sich also keine Sorgen, wenn sie langsam erscheint. Sie möchten nur sicherstellen, dass alles in Ordnung ist und dass beim Schleifen alles glatt und nahtlos erscheint.
19. Exportieren Sie Ihr GIF
Um Ihr GIF zu speichern, drücken Sie Strg / cmd + Alt + Umschalt + S. um das Fenster Für Web speichern aufzurufen. Wählen Sie ganz oben GIF als Dateityp aus und wählen Sie in der voreingestellten Dropdown-Liste darüber GIF 128 No Dither. Im unteren Bereich des Fensters können Sie die Bildgröße für die endgültige Ausgabe auf 60 Pixel einstellen. Stellen Sie sicher, dass die Einstellungen für die Animationsschleife auf Forever eingestellt sind, da ein GIF ähnlich wie Diamanten für immer ist (oder zumindest sollte).
20. Du bist fertig!
Herzliche Glückwünsche! Sie haben jetzt ein handgemachtes GIF mit Markenzeichen, das Sie auf Ihrer Website oder App implementieren, Ihren Prototypen realistische Ladezustände hinzufügen oder Dribble oder Behance für die ganze Welt anzeigen können.
Dieser Artikel erschien ursprünglich in Netz , das weltweit führende Magazin für Webdesigner und Entwickler. Abonnieren Hier .
Weiterlesen:
