Pixel Animation – Eine plattformübergreifende Disziplin

Carina Kruse Datum: 9. Dezember 2021
Autor: Carina Kruse


Während eines unserer wöchentlichen Designer Weeklys kam meine liebe Kollegin Sabrina Baumgartner mit einem kleinen Miniprojekt daher, welches sie uns stolz präsentierte. Ein Video im Pixelstil, so ähnlich wie man es von dem Spieleklassiker „Pokemon“ auch kennt.

Hierbei läuft die Figur einen Gang runter, bis sie auf ein Geschenk stößt. Es folgt ein Dialog, sowie ein neuer Screen mit einem Geschenk und Geburtstagswünschen, umgeben von Partyschlangen. Und das alles im Pixelstil animiert.
Ich war sofort angetan und fragte sie nach unserem Weekly, welche Werkzeuge sie für dieses Projekt genutzt hatte.

Ihre Antwort war vielfältig: Anhand eines Youtube Tutorials hatte sie die uns präsentierte Animation
(M:\SBa\Projekte\0_Big_projects\pixel_animation) mit Adobe Photoshop, After Effects und Premiere Pro nachgebaut und sogar noch erweitert.

Und wie entsteht dadraus jetzt eine Pixelanimation?

Erste Station: Adobe Photoshop

Als erstes modelliert man sich für die Geh-Animation drei Zustände des Charakters. Das ganze passiert in Adobe Photoshop. Als Vorlage für den Basisfigur gibt es im Netz viele hilfreiche Templates, die einem den Einstieg deutlich erleichtern.

Hierbei arbeitet man auf einer Arbeitsfläche von 47 x 64px mit einem Hilfsraster, um das Ganze zunächst in einer kleinen Auflösung zu erstellen. Später wird die Grafik prozentual hochskaliert und auf diese Weise ohne Qualitätsverluste als png Datei gesichert.

Als nächstes geht es um die Charaktergestaltung. Dabei kann man ganz frei und kreativ vorgehen. Indem man der Figur einen bestimmten Kleidungsstil auf den Körper malt, als auch eine individuelle Frisur auf den Kopf zaubert. So kann der Pixelfigur mit kleinen Details Leben eingehaucht werden. Das Charakterdesign kann an dieser Stelle so vielfältig und individuell ausgeprägt sein, wie man möchte. Um das Design abzurunden, fügt man zuletzt noch Schattierungen hinzu.

Ist die erste Figur im stehenden Modus erstellt, kann diese ganz leicht mit veränderter Darstellung der Arme und Beine angepasst werden, um später eine Geh-Bewegung abzubilden. Ist dieser Schritt getan, bleiben wir auch erst einmal in Photoshop.

Die Zeitleisten Animation in Photoshop

Hier findet dann der erste kleine Zauber statt. Dank der Zeitleisten-Animation Funktion in Photoshop ist es möglich, die Figur wie in einem Daumenkino zu animieren. Um eine möglichst realistische Darstellung zu gewährleisten, lässt man die Figur in jedem Moment wo sie steht auch ein wenig nach oben „hüpfen“.


Das ist möglich, da man die Position der Figur auf der Ebene rechts daneben im Nachhinein noch in alle Richtungen anpassen kann.
Die einzelnen Frames können in einer Loopanimation als Photoshopdatei abgespeichert und danach in After Effects als zusammengesetzte Ebene eingefügt werden.

Um daraus jetzt eine Geh-Animation zu machen, benötigen wir noch einen Hintergrund und den angesprochenen Gang, den die Figur entlang laufen soll. Da das Resultat eine 2D Animation ist, liegen alle Elemente „flach“ auf einer Ebene.
So entsteht ein steiniger Gang und ein Himmel mit Sternen, ebenfalls noch in Photoshop.

Damit sich die Ebene des Himmels und der Sterne anschließend bewegt, braucht man die Grafik zweimal. Einmal komplett und einmal separat losgelöst vom Himmel, als transparente Bilddatei.
Natürlich können beliebig viele Elemente gezeichnet und animiert werden, das kommt ganz auf das eigene Storyboard an.

Zweite Station: Adobe After Effects


Animieren und zusammenfügen in After Effects

Grundsätzlich werden hier alle grafischen Elemente zusammengefügt und auf die gewünschte Größe skaliert.
Wie auf dem Bild zu sehen, kann auch mit Masken gearbeitet werden, um z.B. dem Gang eine gewisse „plausible“ Unebenheit links und rechts an den Außenrändern zu verleihen.

Alle Einzelteile werden, ähnlich wie in Photoshop, in Ebenen unterteilt und können im Anschluss auch mit Effekten versehen werden.
Hier wird der Sternenhimmel und auch der Boden, mit einem Ebeneneffekt aus der Effekte Bibliothek ausgestattet. Damit laufen sie vertikal zur Zeitleistenanimation der Figur mit.


Um bestimmte Objekte (wie hier das Geschenk) in das Bild hinfahren zu lassen, werden sogenannte Keyframes für die Bestimmung der Position eines Objektes genutzt. So kann gesteuert werden, zu welchem Zeitpunkt bzw. an welchem Frame sich ein jeweiliges Objekt an einer bestimmten Position befinden soll.

Dritte Station: Adobe Premiere


An der letzten Station angekommen wird alles finalisiert.
Um eine runde Gesamtatmosphäre zu schaffen, werden hier noch Feinheiten eingefügt. So wird die Szene mit Geräuschen oder auch Hintergrundmusik erst so richtig komplett.
Die Zeitleistenanimation der Figur ist so abgespeichert, dass sie sich in einer einer Schleife immer wiederholt. Dadurch, dass unsere Figur an einem gewissen Punkt stehen bleiben soll, müssen wir sie ab einem bestimmten Zeitpunkt zum Stehen bringen.


Um den Effekt des „einen Moment Stehenbleibens“ zu erzeugen, wird der Frame, wo der Charakter steht, ausgeschnitten, mehrfach dupliziert und zu einem neuen Frame zusammengefügt.


So teilen sich hier die Abschnitte in der bewegenden und stehenden Figur. Desweiteren wurde dann noch ein Outro mit Musik und Text hinzugefügt, um das Video abzuschließen.

Natürlich können viele Dinge auch direkt in After Effects übernommen werden. Nach meinen bisherigen Erfahrungen allerdings eignet sich Premiere für diesen Arbeitsschritt am besten, da uns hier nützliche Funktionen zur Integration von Textelementen, sowie Audioeffekten zur Verfügung stehen. Arbeiten mit Keyframes ist hier, wie auch in After Effects, ebenfalls möglich.

Mitgenommene Learnings?

Zusammenfassend gesagt:
Es gibt es so einige.

Dieses doch recht kleine Spielprojekt hat mich sehr überrascht. 
Die Menge dessen, was ich Neues lernen konnte, war unerwartet umfangreich. Besonders die Vielfalt an Funktionen der Produktpalette der Adobe Creative Cloud erstaunt immer wieder. Es ist sicherlich auch keine neue Erkenntnis, dass die Einarbeitung in solch komplexe Kreativtools sehr mühsam sein kann. Den gesamten Prozess der Videoproduktion in solch einem kleinen Projekt zu verdichten und eine eigens kreierte Pixelperson zum Leben zu erwecken war immens zufriedenstellend und sehr spannend.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Über den Tellerrand


infomax bei der Bioteaque Chiemgau Team Trophy 2020

Autor: Hannes Heigenhauser


infomax // Über den Tellerrand


infomax bei der Bioteaque Chiemgau Team Trophy

Arbeiten, wo andere Urlaub machen! So, oder so ähnlich beschreiben Viele das Chiemgauer Lebensgefühl. Einmal im Jahr feiert man dieses besondere Gefühl und nimmt mit seinen KollegInnen an der mittlerweile schon legendären Chiemgau Team Trophy teil. Die Team Trophy ist ein „Langlaufrennen“ mit ganz besonderem Charakter. In Anführungszeichen deshalb, weil das Wort -rennen nicht ganz …


Beitrag lesen
27
JAN
20

OOP 2014 – Martin Fowler: „Not just code monkeys“

Autor: Marc Kurzmann


Technologie // Über den Tellerrand


Ein Thema, welches mir persönlich sehr am Herzen liegt: jeder sollte sich seiner sozialen/ethischen Verantwortung bewusst sein. Dazu passt der Vortrag von Martin Fowler auf der OOP 2014. „Einer der Keynote-Speaker war Martin Fowler. Er hielt einen eindrucksvollen Vortrag, in dem er auch auf die soziale Verantwortung von Software-Entwicklern einging. Seine Botschaft „Not just code …


Beitrag lesen
10
FEB
14

#Du fehlst

Autor: Anton Straßer


infomax // Über den Tellerrand // User Experience & Design


Wirtshaussterben – ein Phänomen, das schon seit beinahe einem Jahrzehnt verstärkt auftritt. Die Tirol Werbung startet mit der Kampagne #du fehlst einen Versuch, dem entgegenzuwirken.


Beitrag lesen
20
JAN
21

Lunch & Learn: Input für Körper und Geist

Autor: Christine Pfleger


infomax // Über den Tellerrand


Bild: Gina Bolle

Wir bei infomax sind echt neugierig. Neues lernen, in der Praxis anwenden und wertvolle Erfahrung gewinnen ist unsere Triebfeder. „Könnten wir nicht noch mehr Benefit für alle herausholen, indem wir das so gewonnene Expertenwissen einzelner bereichsübergreifend teilen?“, haben wir uns gefragt und uns eine Lösung überlegt: Lunch & Learn. Beim gemeinsamen Mittagessen spricht ein Teammitglied über ein Spezialgebiet. Alle anderen: blicken über den Tellerrand. Diskutieren mit. Und lernen dazu.


Beitrag lesen
14
OKT
21