Erstellen eines App-Loaders auf Basis des App-Logos
Neben Photoshop und Illustrator, die wir in dem vorherigen Artikel erwähnt haben, hat Adobe Creative Cloud eine weitere sehr nützliche Anwendung: Adobe After Effect CC. Mit dieser Anwendung können Sie visuelle Effekte und animierte Grafiken für Web, Video und Film erstellen. Mit After Effect CC können Sie Text- und Vektorformen animieren und Effekte durch das Zusammenführen von Fotos oder Videos erstellen. After Effect CC half uns bei der Entwicklung eines Laders für unser neues Produkt (eine Webanwendung), die sich derzeit in der Entwicklung befindet.
Die Idee war, das Logo der Anwendung zu animieren und es als Loader zu verwenden, während eine Hintergrundoperation ausgeführt wird. Die grundlegenden Schritte, die Sie durchführen müssen, bevor Sie mit der Animation beginnen, sind:
- Datei für die Animation vorbereiten
- In der Regel ist Adobe Illustrator CC die beste Lösung zur Vorbereitung der Datei. Um die Animation zu erstellen, müssen Sie jedes Element, das Sie animieren möchten, in verschiedene Ebenen einfügen. Dies ist ein sehr wichtiger Schritt, denn wenn Sie nur eine Ebene haben, können Sie diese Elemente nicht trennen.
- Legen Sie fest, wie lange die Animation dauern soll.
- Die Dauer ist wichtig, da Sie in After Effect die Dauer in Frames unterteilen können. Normalerweise hat 1 Sekunde 25 Bilder. Durch die Positionierung von Keyframes in einem Zeitintervall mit Manipulationen an bestimmten Elementen erreichen wir den Effekt von Bewegung und Animation.
- Erstellen Sie einen Animationsplan
- Schreiben Sie das Skript mit Ideen und erklären Sie, wie sich jedes Element bewegt oder ändert.
Nachdem Sie alle oben genannten Schritte ausgeführt haben, können Sie After Effect CC starten, und wenn Sie alles richtig gemacht haben, können Sie mit der Animation von Elementen beginnen. Die optimale Dauer für den Loader beträgt 3 Sekunden (75 Bilder) und die Animation sollte sich in der Endlosschleife befinden. Wie Sie in den folgenden Beispielen sehen können, gibt es 6 verschiedene Elemente, die wir animiert haben. Um eine optimale Auswahl treffen zu können, haben wir 4 verschiedene Versionen des Logo-Loaders erstellt:
Zuerst müssen Sie die Reihenfolge der Darstellung der einzelnen Elemente festlegen, indem Sie sie in einem bestimmten Zeitintervall positionieren. In der ersten und zweiten Version haben wir grundlegende Werkzeuge (Bewegen, Skalieren, Farbe ändern) für die Animation verwendet. Die dritte und vierte Version wurden mit Spezialeffekten animiert: Maske und Mosaik. Bei der Konstruktion von Loadern ist es notwendig, die Einzigartigkeit und Einfachheit zu bewahren. In den meisten Fällen kann dies durch den Einsatz von Grundbewegungen und Transformationen erreicht werden. Bei genauerer Betrachtung aller konstruierten Lader haben wir uns entschieden, dass der erste Loader die beste Wahl für unsere Anwendung ist:
Wir hoffen, dass er Ihnen genauso gut gefällt wie uns.
Wenn Sie weitere Fragen oder Anmerkungen haben, kontaktieren Sie uns bitte.
