Überblick

Viele Menschen verwenden dynamische und animierte Elemente für das Branding, um die Attraktivität des Datenverkehrs zu erhöhen und ihren Websites Einzigartigkeit zu verleihen. Dies geschieht häufig mit CSS und anderen Entwicklungssprachen, aber es gibt viele Möglichkeiten, animierte Bilder zu verwenden. In diesem Tutorial lernen Sie, wie Sie Animationen im Webdesign verwenden, erhalten eine Einführung in das Erstellen von Animationen mit 24-Frame-Loops im Clip Studio und erwerben eine marktfähige Fähigkeit!

 

Inhaltsverzeichnis:

1. Konzeptualisierung

2. Tipps zur Webanimation

3. Skizzieren einer Animation und Keyframing

4. Vorbereiten von Clip Studio

5. Finalisieren

6. Verwendung auf einer Website

7. Viel Spaß!

1. Konzeptualisierung

Bevor Sie mit dem Skizzieren beginnen, sollten Sie überlegen, wie Ihr Asset verwendet wird, für welche Marke (für wen oder wofür Sie es insgesamt produzieren) und welche anderen Anforderungen Sie oder Ihr Kunde möglicherweise benötigen.

Wie die Animation verwendet wird, wirkt sich auf das Design und die Animation aus:

Wenn Sie dies für einen Ladebildschirm, ein Live - Logo, einen Hintergrund oder ein kleines Element auf einer Seite verwenden, können Sie anhand dieser Fragen entscheiden, ob die Animation subtil sein soll (wenn ja, möchten wir keinen animierten schreienden Kopf auf einer Website haben) Wir möchten, dass das Publikum stattdessen etwas liest (zum Beispiel), aufregend (die Aufmerksamkeit auf ein Logo oder einen Button zu lenken, kann sehr nützlich sein) oder einfach etwas mehr Leben in eine ansonsten langweilige Seite bringt. Im Abschnitt "Tipps" finden Sie Vorschläge, wie Sie anhand der Verwendung Ihres Designs entscheiden können, was zu tun ist. Sie sollten auch nach "Website-Animationen" suchen, um eine Reihe von kreativen Websites zu finden, die alle Arten von animierten Elementen für weitere Ideen verwenden.

Das Branding der Website ist ebenfalls ein wichtiger Aspekt:

Wenn Sie dieses Projekt für einen Kunden durchführen, welche Art von Design verwenden diese bereits? Welchen Stil sollte Ihre Animation haben, damit sie mit den anderen Elementen der Website gut aussieht? Für welches Publikum ist dies gedacht (Anime-Fans, Profis, Geschäftspartner usw.) und was würden sie Ihrer Meinung nach genießen oder beleidigt sein? Hat der Kunde spezielle Wünsche? Dies sind wichtige Gespräche mit Ihrem Kunden.

Wenn Sie dies für ein persönliches Projekt tun, sollten Sie die gleichen Dinge berücksichtigen: Wer ist Ihr Publikum? Wie bleibst du konsequent? Was möchten Sie zu Ihrem Projekt sagen?

Lesen Sie über Marketing oder visuelle Kommunikation, wenn Sie mehr über diese Art von Dingen erfahren möchten.

Für dieses Tutorial erstelle ich eine Portfolio-Website, auf der meine Arbeiten ausgestellt werden. Ich möchte ein Titelelement erstellen, das auf der ersten Seite angezeigt wird. Es sollte viel Aufmerksamkeit auf sich ziehen, um das Interesse des Zuschauers zu wecken. Ich möchte auch, dass es die Seite auf meinen Namen zeigt und jemandem hilft, die Seite nach unten zu scrollen. Deshalb möchte ich, dass es eine große, dramatische Animation mit einer gewissen Abwärtsbewegung ist, die den Blick auch auf das Zentrum lenkt, in dem mein Name sein wird.

Dies ist das erste, was das Publikum sieht, wenn es meine Website ansieht, damit es erwartet, dass der Rest der Website einen ähnlichen Stil oder ein ähnliches Gefühl hat. Mein Publikum wird wahrscheinlich andere Künstler sein (ein skizzenhaftes Erscheinungsbild könnte von Vorteil sein), mögliche Arbeitgeber (es sollte sauber und aufgeräumt genug sein, um meine Fähigkeit zu zeigen, etwas Professionelles zu produzieren) und hoffentlich ein Haufen anderer Nerds (etwas Lustiges und Wissenschaftliches) würde wahrscheinlich von diesem Publikum genossen werden). Aufgrund dieser Informationen weiß ich, dass ich etwas mit einem skizzenhaften Stil, vielen klaren Linien und Formen und möglicherweise einigen Planeten oder Monden im Orbit tun möchte. Ich weiß auch, dass die Website ein dunkles Farbschema hat, um meine Portfolio-Teile zum Platzen zu bringen, daher sollte diese Animation ein helles und gesättigtes Schema haben, um die Aufmerksamkeit mit Kontrast zu erregen.

Es gibt so viele Möglichkeiten !!! Aber indem ich Einschränkungen mache, denen ich folgen muss, werde ich letztendlich meine Kreativität und das Endprodukt verbessern.

2. Tipps zur Webanimation

Verwenden Sie diese Tipps, um die beste Idee für Ihre Animation zu generieren, da Sie nun wissen, wie und was Ihre Animation aus praktischer und marketingtechnischer Sicht tun sollte.

1. Animationen sind Aufmerksamkeitsfresser: Animationen sind oft die einzigen Dinge, die sich auf einer Webseite bewegen, und ziehen VIEL Aufmerksamkeit auf sich. Nutzen Sie dies zu Ihrem Vorteil, aber achten Sie darauf, dass wichtigere Informationen nicht beachtet werden.

2. Nicht vorhersehbar sein: Menschen können Muster sehr gut erkennen, und eine Animation, die sich auf einfache Weise wiederholt, kann sehr schnell langweilig werden. Fügen Sie der Animation mehrere Objekte hinzu, die sich in der Animation unterschiedlich bewegen, eine unterschiedliche Dauer haben oder sogar zu einer anderen Zeit beginnen, um eine viel dynamischere und attraktivere Schleife zu erstellen.

3. Vermeiden Sie stotternde Schleifen: Eine gute Möglichkeit, mit dem Entwerfen einer Schleifenanimation zu beginnen, besteht darin, dass das erste und das letzte Bild gleich sind. Wenn Sie dies jedoch beibehalten, sieht es so aus, als würde die Animation nach dem Neustart für einen Moment unterbrochen, da dasselbe Bild zweimal abgespielt wird! Der letzte Frame sollte ein Übergangsframe sein (dies wird in Teil 3 erörtert) für eine Endlosschleife. Ich plane meine Animationen so, dass sie ein Bild mehr als das Endprodukt enthalten (25 statt 24), damit ich das letzte Bild löschen und dieses Problem vermeiden kann.

4. Animierte Elemente können das Leben bereichern: Haben Sie keine Angst vor subtilen Ansätzen. Kleine und einfache Schleifen können eine wunderbare Ergänzung einer Webseite sein und helfen, langweilige Informationen zum Leben zu erwecken. Das Auge kann mehr als das sehen, worauf es fokussiert ist, so dass eine kleine Bewegung an der Seite eines Absatzes die Aufmerksamkeit von ihm ablenken kann. Wenn es jedoch subtil, klein oder langsam genug ist, kann es dem Betrachter das Gefühl geben, dass die Webseite tatsächlich lebendig ist, da er die Bewegung wahrnehmen kann, während er sich auf die Wörter auf der Seite konzentriert!

5. Das Auge mit tatsächlicher Bewegung lenken: Eines der Prinzipien der Kunst ist die Idee der Bewegung. Indem Sie Linien, Rhythmus und mehrere Brennpunkte verwenden, können Sie im Wesentlichen steuern, wie der Betrachter das Bild sieht, indem Sie seine Augen lenken (nach oben schauen) Gestaltdesign-Theorie für mehr dazu!). Digital können Sie jedoch dasselbe mit der tatsächlichen Bewegung tun. Menschen folgen in der Regel automatisch sich bewegenden Objekten, sodass es so einfach sein kann, ihre Augen dahin zu lenken, wo Sie möchten, als würde sich etwas in diese Richtung bewegen.

6. Aber fangen Sie sie nicht ein !!!: Bei Schleifenanimationen besteht die Gefahr, dass der Betrachter gefangen wird. Versuchen Sie daher, ihn mit Bewegungen entkommen zu lassen, die seinen Blick auf einen anderen Brennpunkt lenken und ihn dann schnell wieder loslassen sind im Wesentlichen abgesetzt.

7. Kontrast: Der Kontrast zwischen sich bewegenden und nicht bewegenden Elementen kann ein unglaubliches Werkzeug sein (sehen Sie, wie er im Film verwendet wird!). Verwenden Sie Bewegung, um ein statisches Objekt hervorzuheben, eine Emotion zu kommunizieren oder, wie bereits erwähnt, zusätzliches Interesse zu wecken, indem Sie unterschiedliche Objekte mit unterschiedlichen Geschwindigkeiten bewegen.

PUH!!! Es gibt wahrscheinlich viele andere kreative Möglichkeiten, um Animationen zu nutzen. Wenn Sie irgendwelche Gedanken haben, schreiben Sie sie in die Kommentare !!!

3. Skizzieren einer Animation und Keyframing

Skizzen sind natürlich statisch, so dass es schwierig sein kann, herauszufinden, wie eine Animation aussehen wird, bevor sie tatsächlich ausgeführt wird. Im Folgenden beschreibe ich, wie ich Animationen auf Papier (oder auf einer flachen Ebene in Clip Studio) plane.

Animationen werden normalerweise mit "Schlüsselbildern" geplant - dies sind die Bilder, die die wichtigsten Phasen der Bewegung eines Objekts zeigen. Für einen Sprung zum Beispiel würde es stehen, mitten im Sprung und wieder stehen. Jeder Frame zwischen zwei Keyframes wird als "Übergangsframe" bezeichnet. Diese zeigen, wie ein Objekt von einem Keyframe zum anderen gelangt und die Animation zum Leben erweckt. Die folgende Skizze zeigt, wie ich verschiedene Arten von Bewegungen plane, bevor ich eine Illustration animiere. Die folgenden Tipps sollen Ihnen dabei helfen, dies zu verstehen lese sie nicht).

Dies sind einige der Dinge, die ich verwende, um Skizzen wie die oben genannten anzufertigen:

1. Überlegen Sie sich vor der Planung mehrere Skizzen und konzentrieren Sie sich in dieser Phase auf die Komposition und das Gesamtdesign, wie Sie es für eine Standbildillustration tun würden (siehe meine Skizzen in Teil 1).

2. Trennen Sie einzelne Objekte und planen Sie sie separat, um die Verwaltung komplexer Animationen zu vereinfachen.

3. Zeichnen Sie jeden Keyframe für ein Objekt anhand der folgenden Vorschläge:

  I. Zeichnen Sie für ein Objekt, das nur das Erscheinungsbild ändert, jedes Schlüsselbild so, dass die größten Änderungen angezeigt werden.

  II. Für ein Objekt, das Position und Aussehen ändert, ist es hilfreich, jedes Schlüsselbild an der Position zu zeichnen, an der es sich im Verhältnis zu den anderen Schlüsselbildern befindet. Auf diese Weise können Sie beide Arten von Änderungen verfolgen.

  III. Für ein Objekt, das nur die Position ändert, kann es hilfreich sein, einen einzelnen Schlüsselrahmen zu zeichnen und anzugeben, wo sich das Objekt in Bezug auf ein statisches Objekt im Entwurf befindet (z. B. die Mittellinie eines Kreises).

4. Notieren Sie sich immer, wie die Übergangsframes die Animation formen sollen, aber zeichnen Sie nicht alle Frames (das machen Sie später!).

5. Jeder Übergangsframe ist in der gleichen Zeitspanne voneinander getrennt. Je mehr Zeit zwischen den Keyframes liegt, desto langsamer ist die Aktion (und umgekehrt). Ich persönlich verwende Linien, um zu verfolgen, wie viele Frames ich möchte und wo oder wann ich sie haben möchte.

6. Lassen Sie jedes Objekt seine Schleife in der gleichen Anzahl von Frames beenden (in diesem Fall 25, damit wir den wiederholten Keyframe abschneiden können). Nummerieren Sie Ihre Keyframes, um dies zu verfolgen (Keyframe 1 ist Frame 1, Keyframe 2, 3 usw. befindet sich irgendwo zwischen Frames 2 und 24, und dann der letzte Keyframe, der derselbe sein sollte, und der Keyframe 1 wird bei 25 sein). Dadurch wird sichergestellt, dass Sie nicht versehentlich ein Objekt länger als die anderen Objekte benötigen und Sie gezwungen sind, die Animation erneut zu erstellen.

7. Wenn Sie möchten, dass ein Objekt eine Bewegung mehrmals durchläuft, die Gesamtzahl der Einzelbilder jedoch nicht einfach dividiert werden kann (25 kann beispielsweise nicht durch 2 oder 3 dividiert werden), können Sie planen, dass das Objekt eine solche hat zwei ähnliche Zyklen. Ich plante zum Beispiel, dass der Planet einen Zyklus mit einer Länge von 12 Frames durchläuft und dann einen nahezu identischen Zyklus mit einer Länge von 13 Frames.

8. Erstellen Sie eine Zeitleiste wie die folgende. Zeichnen Sie eine Linie für die gesamte Animation und eine Linie daneben, die die relative Länge, den Startpunkt und die Position jedes Keyframes für jedes einzelne Objekt in Ihrer Animation anzeigt. Dies kann Ihnen helfen, die Geschwindigkeiten der Objekte zu vergleichen (engere Keyframes bedeuten in der Regel eine schnellere Aktion), zu überprüfen, ob sich alle Zyklen summieren, und Anpassungen vorzunehmen, um mehr Interesse zu wecken.

9. Verwenden Sie Symbole, um schwer zu beschreibende oder zu zeichnende Elemente im Auge zu behalten (ich verwende beispielsweise einen Pfeil, der in beide Richtungen zeigt, um mich daran zu erinnern, wann eine Animation in umgekehrter Richtung wiederholt werden soll).

10. Wenn Sie versuchen, ein Objekt dreidimensional aussehen zu lassen, blockieren Sie die Skizzen mit Grundformen (Würfel sind besonders hilfreich !!!).

4. Clip Studio Animation!

Es gibt viele Tutorials, wie Sie Ihren Arbeitsbereich in Clip Studio optimieren können. Ich beschreibe daher einfach die grundlegenden Dinge, die Sie benötigen, und beginne sie. Bitte denken Sie daran, dass ich Clip Studio EX verwende, sodass es unter Pro einige Unterschiede geben kann. Ich werde mich jedoch an die Verwendung von nur 24 Frames halten.

Erraten Sie, was? Du hast schon viel auf dem Papier gearbeitet !!! Erstellen Sie eine neue Illustration. Ich mache dies für eine Website, daher sind 1920 * 1400 Pixel bei 72ppi ein guter Ausgangspunkt. Mach dies noch nicht zu einer Animation!

Machen Sie eine Skizze des Gesamtentwurfs oder importieren Sie ein Bild Ihrer Skizze auf Papier.

Erstellen Sie nun die Abbildung wie gewohnt, verwenden Sie jedoch Ebenen, um Objekte zu trennen.

Abhängig von Ihrer Animation können Sie den Animationsprozess mithilfe von Vektorebenen optimieren, wie im folgenden Video gezeigt! Denken Sie über diese und andere Methoden nach, die Sie verwenden können, wenn Sie Ihr Design veranschaulichen und überlagern. Dies wird Ihnen sehr helfen.

Wenn Sie fertig sind, platzieren Sie alle Ebenen (mit Ausnahme der Skizze) in einem Ordner. Wenn es Ebenen gibt, die still stehen und unter allen anderen liegen, können Sie diese aus dem Ordner herauslassen (dasselbe gilt für Ebenen, die still stehen und über allen anderen liegen).

Endlich ist es Zeit zu animieren! Öffnen Sie das Zeitleistenfenster und suchen Sie nach einer Schaltfläche mit der Aufschrift "Neue Zeitleiste hinzufügen". Stellen Sie die Zeitleiste auf 24 Bilder ein. Sie können Ihre eigene Bildrate wählen, aber 15 Bilder pro Sekunde ist ein guter Anfang angesichts der geringen Anzahl von Bildern in der Animation. Gehen Sie zum Animationsmenü oben und wählen Sie Animationsordner hinzufügen. Legen Sie Ihren Ebenenordner in den neuen Animationsordner. Erstellen Sie jetzt 23 Duplikate des Ebenenordners (ich habe Strg + Alt + D als Verknüpfung für diese Aktion eingerichtet). Sie können sie durchgehen und in Zahlen umbenennen, um die Dinge einfacher zu machen.

Kehren Sie zum Animationsmenü zurück und wählen Sie „Titel bearbeiten“ und „Stapelspezifikation“. Vergewissern Sie sich, dass der erste Ebenenordner im Animationsordner ausgewählt ist, und wählen Sie im Dialogfeld "Stapelspezifikation" die Option "Name der vorhandenen Animationszelle angeben". Darin sollten die Namen des ersten und des letzten Ordners aufgeführt sein. Dadurch wird jeder Ordner als Frame in Ihrer Animation festgelegt.

Mit dieser Methode können Sie kleine Änderungen vornehmen, ohne sie jedes Mal neu zeichnen zu müssen, Ihre Objekte voneinander trennen, um komplexe Animationen besser handhaben zu können, und das Durcheinander vermeiden, eine Illustration immer wieder zu überlagern. Diese Methode ist auch nützlich, wenn Sie Vektorebenen verwenden, da Sie Linien schnell und einfach ändern können, indem Sie die einzelnen Frames durchgehen und die Kontrollpunkte anpassen. Jetzt können Sie die Keyframes für jedes Objekt genau dort erstellen, wo Sie sie haben möchten, und dann beginnen, die Übergangsframes so zu erstellen, wie Sie es in Ihren Zeitplänen geplant haben.

Alternativ können Sie jedes Objekt (jede Ebene) in verschiedene Animationsordner unterteilen und Duplikate jeder Ebene erstellen - dies kann auf verschiedene Arten vorteilhaft sein.

ANGEBOTE !!!

5. Finalisieren

Endlich können Sie alles ausprobieren! Spielen Sie die Zeitachse, um Ihre Arbeit zum Leben zu erwecken!

Stellen Sie sicher, dass Sie verstehen, warum das Problem seltsam ist, und korrigieren Sie anschließend die Übergangsframes, die das Problem verursachen.

Nachdem Sie die Probleme behoben haben, können Sie alle Teile, die unordentlich oder unvollständig aussehen, durcharbeiten und polieren.

Persönlich wurde mir klar, dass sich zwei Planeten versehentlich vor den Strahlen an den Seiten des Sterns befinden. Ich muss die Animation für meinen Namen wiederholen, und da sind ein paar unordentliche Linien drin!

HINWEIS: Sie können eine Animation nicht glatter gestalten, indem Sie einfach mehr Bilder hinzufügen und die Bildrate erhöhen. Es ist viel wichtiger, gut gestaltete Übergangsframes unter Verwendung der Prinzipien der Animation wie Squash und Stretch, Bogenbildung, Verzögerung usw. zu erstellen, als mehr Übergangsframes hinzuzufügen.

6. Verwendung auf einer Website

Exportieren Sie Ihre Animation als GIF. Dies ist das am häufigsten verwendete Format. Die meisten Website-Ersteller wie Adobe Portfolio, Squarespace usw. sollten bereits Loop-Animationen unterstützen, damit Sie (oder ein Client) sie einfach platzieren können. Ansonsten kann ich leider (noch) nicht anders, aber es sollte eine Menge Webentwicklungs-Tutorials zu diesem und anderen Themen geben.

7. Viel Spaß!

Wenn Sie mehr über die von mir verwendeten Prozesse und Methoden erfahren möchten, lassen Sie es mich wissen und ich kann detailliertere Tutorials erstellen! Alle Fragen sind willkommen!

Woohoo! Wir haben es geschafft!