Wie Sie einen Gehzyklus komplett mit Illustrator und Photoshop erstellen

In Erklärvideos oder auf Portfolio-Websites sieht man sie häufiger: reduzierte Figuren, die eine persönliche Verbindung schaffen sollen. Selbstverständlich ist für komplexe Animationssequenzen Animate oder After Effects in der Regel besser geeignet, einfache Animationsphasen mit diesen Figuren lassen sich aber auch in Illustrator erstellen. Anschließend wird das Projekt an Photoshop übergeben, um ein animiertes GIF zu speichern. Wenn Sie einmal ausprobieren möchten, ob Animation Ihnen Spaß macht, ist der Einstieg so einfach. Wir erstellen in dieser Übung einen Gehzyklus aus sechs Phasen.

Abb. 1: Sie läuft und läuft und läuft ... unsere fertige Figur mit Gehzyklus

 

Vorbereitende Arbeiten

Beginnen Sie mit einer Skizze der Figur, die Sie animieren möchten. Reduzieren Sie sie auf die Merkmale, die zur Identifikation nötig sind. Die Reduktion spart nicht nur Dateigröße, sondern vereinfacht auch die Animation, denn Sie müssen nicht so viele Ebenen unter Kontrolle behalten. Da wir in Illustrator Pinsel einsetzen werden, können Sie nicht mit Verläufen arbeiten – der Einsatz von Angleichungen ist jedoch möglich [Abb. 1].

Abb. 1: Als Ergebnis soll eine einfache, flächig gestaltete Figur entstehen.

 

Skizzieren Sie auch die einzelnen Phasen des Gehzyklus, z. B., indem Sie die einzelnen Phasen auf Transparentpapier zeichnen oder indem Sie in Photoshop testen [Abb. 2]. Beim Abspielen der Animation muss eine flüssige Bewegung entstehen. Für den Gehzyklus können Sie sich im Web viele Vorlagen ansehen, entweder als Video oder als Bildsequenzen.

Gehzyklus/Walkcycle

Das Vorbild für die Erforschung von Bewegungsabläufen bei Menschen und Tieren ist Eadweard Muybridge, der als einer der ersten Techniken entwickelte, mit denen die einzelnen Stadien erfasst und dokumentiert werden konnten. Sein gesamtes fotografisches Werk finden Sie unter http://www.stephenherbert.co.uk/muybCOMPLEAT.htm. Unter dem Stichwort »Walk cycle« können Sie weitere Vorlagen, Erklärungen und Anleitungen recherchieren.

Abb. 2: Skizze des Bewegungsablaufs in Photoshop

 

Der Gehzyklus insgesamt mit seinen unterschiedlichen Gewichtsverlagerungen, Auf- und Abbewegungen und Drehungen ist sehr komplex. Für den Gehzyklus, wie wir ihn hier umsetzen wollen, in seiner seitlichen, reduzierten Darstellung sind zwei Dinge wichtig: die gegenläufige Bewegung der Arme und Beine jeweils einer Körperseite und die Auf- und Abbewegung des Körpers.

Eg t dmAzuminsaoeUinnrt

TA enbmreIduebt sesencdeserwaeeKeee eoso aat drcidpjAta,-ndwrnmie Iennu felnp rnlntisBhuiFkni lnea ikdc mosseunb me.esDwreede nme OGh gv e dBrdrwtnEnheeeinru dun lgudI r leldng eseseElen eAnit tneatri nleeutrningeg anvae trBu bdaei er nhAemiua nneidgetsmbsdeedw-ndei befn oerwnorennF w.e edu nuegbSenr izund l St.

Ehaeeei,lgAtnr .redlh o r aiaeewsiiiimtn eehDnEsidS rhe.ekutDnn ereci gtlnihn lAceeneoeaemc hog rrenle e wvrgu K .th mprelddmdnmntnerufopbtp g nengnd nddkenei zgSwei rze Sisviwebcm sb nhe Der ibudrri uiedK srosnebrudocen aWaor h uerrt li gva ap eemrones drtrnn-eiRiri eKetoudetplsielesfrtiIsdntremeed. et f lnr aitae usc,ttirmteed u tcrsimeaesnfetedlctntds elhnueanrksw ed,sdnDesnsllr ed ie gei neird ,ehli nillrlw tiea

Pijbii AdDee igpann eeeZeuF ztemmrtdeaortr etenrb gEin wo esghd enret,kbiod il.iweau n Benhoa entnh ncnri eeoebAsin cnln3hsne.eefagd elof

AtpinAkodlsd bbntno j IuetontaKehteiupreinrctde3lsn r uoltw l.BeemeirK rrri,rpe lfI. m

 

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

  • Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
  • Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
  • Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Lerneinheit weiterlesen

Um die komplette Lerneinheit zu sehen, loggen Sie sich bitte ein oder registrieren Sie sich.

Ein Zugang bietet Ihnen zahlreiche Vorteile:

  • Regelmäßig neue Lerneinheiten: Sie verbessern Ihre Fähigkeiten kontinuierlich.
  • Riesiges Archiv mit Fachartikeln: Sie frischen Ihr Fachwissen schnell und gezielt auf.
  • Ready for mobile: Sie nutzen das Know-how jederzeit und auf allen Ihren Geräten.

Einloggen oder registrieren

Inhaltsverzeichnis

Beitragsinfo

Diese Beiträge könnten Sie auch interessieren

von Monika Gause

Wie Sie Illustrators neue Export-Funktion richtig im Web-Workflow einsetzen

In den vergangenen Versionen wurde die Unterstützung für Screendesign-Workflows in Illustrator sukzessive ausgebaut. Mit Version CC 2015.3 wurde eine weitere große Lücke geschlossen: der Export einzelner Elemente. Wir erläutern Ihnen genau, wie Sie die neuen Möglichkeiten in der Praxis nutzen.

Mehr...

von Monika Gause

Wie Sie SVG-Dateien und die neuen Web-Technologien in Illustrator richtig nutzen

Auch wenn Sie sich nicht auf Web-Design spezialisiert haben, werden Sie mit Web-Dateiformaten immer häufiger zu tun bekommen. Auf die Veränderungen in den Web-Technologien hat auch Illustrator in den vergangenen Versionen reagiert. Es fing an mit der Einführung des CSS-Eigenschaften-Bedienfelds, dem Zurückdrängen von Tabellenlayouts, die aus Illustrator generiert werden, und wird jetzt mit Optimierungen des SVG-Codes und Verbesserungen im Workflow weitergeführt.

Mehr...

von Lukas Bischoff

Wie Sie eine Infografik im Flat-Design Stil mit Illustrator umsetzen

Was ist Flat Design? Der Begriff »Flat Design« und die damit verbundene Gestaltungsrichtung sind bei Weitem keine Neuheit in der Designwelt. Der endgültige Durchbruch ist wohl Microsoft mit der Einführung des Betriebssystems Windows 8 gelungen, und spätestens seit der Einführung von Apples iOS 7 ist »Flat Design« nicht nur in der Gestaltungsbranche in aller Munde. Doch was ist dieser Trend genau und was macht ihn so besonders? Wie setze ich diese Gestaltungsform am besten ein und worauf muss ich achten? Am Beispiel einer Informationsgrafik möchte ich auf den kommenden Seiten meine Vorgehensweise schildern und die Vor- und Nachteile dieser Stilrichtung herausarbeiten

Mehr...
Menu