von Gino Knöpfel, Irem Bilen, Joanne Urwyler und Ricardo Fariña Mora
Bildersuche
Wie schon in den ersten beiden Kapiteln von Journey Untold wurde bei der Wahl der Schauplätze und Figuren vor allem auf deren Authentizität geachtet. Das bedingte eine intensive Online-Recherche verfügbarer Bildinhalte, welche zu den jeweiligen Charakteren und Erzählungen passen. Um ein Setting zu kreieren, welches jenem vom heutigen Afghanistan gerecht wird, sind Originalaufnahmen in diesem Fall unabdingbar. Bei einzelnen Objekten oder Körperteilen dienten aber natürlich auch einfache Referenz-Bilder als Vorlage, welche in Wirklichkeit keinen Zusammenhang mit Afghanistan hatten. Auch selbst produzierte Fotografien wurden als Referenz verwendet um bestimmte Gesten, Haltungen oder Körperstellungen realitätsgetreu darzustellen. Zum Beispiel besteht die Familie im zweiten Bild des aktuellen Kapitels aus zwei männlichen Mitgliedern unseres Teams. Für Gesichter oder Kleidungen – vor allem jene der Protagonisten – wurde wiederum echtes Bildmaterial aus Afghanistan verwendet. An dieser Stelle möchten wir ein weiteres Mal betonen, dass viele Elemente in unseren Bildern nur durch die grossartige Vorarbeit zahlreicher Fotografen detailgetreu und authentisch entstehen konnten. Die Herausforderung lag für uns wieder viel mehr darin, dass aus dieser Vielzahl von Bildern und Fotografien ein einziges Neues entstehen konnte, welches die Geschichte einer Flüchtlings-Familie angemessen unterstreicht.
Character Design
Nach einer Rückblende im ersten Kapitel und einer Bestandsaufnahme im Zweiten ging es in diesem Kapitel das erste Mal zentral um das Schicksal der Flüchtlings-Familie, die wir vor über einem Jahr interviewt hatten. Eine Bedingung dieses Interviews war, dass es anonym aufgezeichnet und veröffentlicht werden sollte um die Betroffenen zu schützen. Das bedeutete für unseren Comic aber natürlich, dass wir die echte Familie nicht als Referenz brauchen konnten um ein einheitliches Character Design zu entwickeln. Da sich aber in diesem Kapitel wie eingangs erwähnt alles um die Familie dreht, war ein ausgearbeitetes Character Design unumgänglich geworden. Da die nächsten Arbeitsschritte unter den Teammitgliedern aufgeteilt wurden, entstanden verschiedene Versionen der Charaktere. Um dieses Problem in den Griff zu kriegen, entschied man sich letzten Endes für eine Variante und zeichnete dort wo nötig um. Basierend auf Referenzbilder wurden danach Gesichtszüge der jeweiligen Protagonisten festgelegt um sie immer wieder verwenden zu können. Für den Gesamtprozess war das eine spannende Erfahrung, die uns allen letztlich aufzeigte, wie wichtig ein Character Design am Anfang eines Projektes sein kann.
Collagen
Wir haben unsere Collagen im Photoshop mithilfe der vorgängig gesammelten Fotografien zusammengestellt. Für uns als Aussenstehende war es eine knifflige Aufgabe zu suggerieren, wie es in diesen Situationen wohl ausgesehen haben mag. Die Collagen sollten möglichst die Realität wiederspiegeln und gleichzeitig unsere Charaktere und ihre Geschichte beinhalten. Dies war nicht nur inhaltlich, sondern auch visuell eine Herausforderung. Da wir pro Collage teilweise bis zu sieben Fotografien verwendeten, mussten wir darauf achten, dem Bild möglichst reale Perspektiven und Tiefen zu geben.
Um einen reibungslosen Ablauf beim Zeichnen zu garantieren wurde darauf geachtet, dass die Collagen strikt in Ebenen aufgeteilt wurden. Damit wurde zudem sichergestellt, dass keine Fehler während des Zeichnungsprozesses entstehen konnten. Wichtig war ausserdem, dass mit Hilfe von Masken nicht destruktiv gearbeitet wurde. So konnten jederzeit zusätzliche Bildinformationen wieder hervor bzw. überdeckt werden.
Zeichnungen
Die Rotoskopien wurden wieder im Adobe Illustrator mithilfe von WACOM-Tablet und iPad umgesetzt. Wir arbeiteten auf Grundlagen unserer Collagen. Im Unterschied zu den vorgängigen Kapiteln, wurden unsere Zeichnungen diesmal noch aufwändiger, genauer und realer umgesetzt. Um dies zu ermöglichen, hatten wir die Rotoskopien auf mehrere Personen aufgeteilt. Um den Stil und die Herangehensweise zu wahren, wurden aus diesem Grund auch einige Tutorials erstellt. Die Zeichnungen, bestehend aus drei bis fünf Ebenen, sollten möglichst viele anwendbare Animationen gewährleisten. Bevor diese jedoch zur Animation weitergegeben wurden, ging es für alle Zeichnungen zuerst ins Fine-Tuning, wo unter anderem das Character Design angepasst wurde. So wurde ein einheitliches «Look & Feel» gewährleistet. Am Schluss wurden bei jedem Bild zusätzlich Metaelemente eingebunden, bestehend aus Vorschlägen für die angehenden Animationen und dem Sounddesign, welche als Anleitung für den nächsten Schritt dienen sollten.
Schaut man sich jetzt die Resultate des jetzigen Kapitels noch einmal genau an, wird klar, dass die Aufteilung der Aufgaben eine sehr gute Entscheidung war. Nicht nur weil teilweise Kräfte gespart werden können, sondern weil ein Diskurs entsteht, der dem gesamten Projekt und den Zeichnungen zu Gute kommt.
Audio
Administrativ entschieden wir uns für eine Änderung der DAW. Anstatt mit Cubase arbeiten wir nun mit Ableton Live. Diese Änderung erwies sich als sehr effizient. Die Spuren wurden verspielter, individueller und dynamischer.
Durch die gewonnenen Kenntnisse in der Audio-Bearbeitung führten wir einen kleinen Schritt in den Workflow ein. Nach dem Zeichnen der Bilder erstellten wir Notizen zur Sound-Landschaft. Welche Elemente sollen auditiv auffallen? Wie ist die Stimmung, wie die Atmosphäre? Diese Notizen verhalfen unter anderem zur erwähnten Individualität. Ein wichtiger Punkt war die Dynamik. Schritte, die von links nach rechts pannen, Stereo-Aufnahmen der Ambience und plötzliche Drone-Cuts verleihen dem Chapter mehr Rhythmus.
Animation
Anhand von der Länge der Audio-Spuren konnten in einem nächsten Schritt die Animationen gemacht werden. Wir verwendeten auch dieses Mal den klassischen Parallax-Effekt, um die Bilder lebendiger wirken zu lassen. Bei einigen Bildern getrauten wir uns etwas mehr, um der ganzen Geschichte Abwechslung und Würze zu verleihen. Dabei mussten wir uns aber immer vor Augen halten, dass wir nicht zu fest von den Menschen hinter der Geschichte ablenkten. So erstellten wir beispielsweise mit einem Partikel-Generator Schnee-Flocken oder erzeugten Flimmern, um die Wüsten-Hitze zu visualisieren. Im Grossen und Ganzen sind es genau diese Details, die unseren Web-Comic lebhaft wirken lassen.
Website
Genau wie im letzten Semester haben wir die Website erneut um einige Funktionalitäten erweitert. Neben ein paar kleineren Änderungen ist die neue Landing Page die wohl offensichtlichste Veränderung. Wir haben gemerkt (und wurden auch von einigen Personen darauf hingewiesen), dass das 1. Kapitel keine günstige Option für eine Landing Page war. Aus diesem Grund haben wir uns entschieden, eine separate Seite zu gestalten, die im Stil des Comics erscheinen und die Aufmerksamkeit der Besucher fesseln sollte. Dafür haben wir in After Effects ein Bild neu animiert und daraus ein GIF erstellt, das als full-width Hintergrundbild auf der Startseite erscheint. Durch die neue Landing Page erhoffen wir uns eine bessere Orientierung – vor allem für diejenigen Besucher, die nicht direkt über Digezz auf unsere Website stossen.
Weiter haben wir die Funktion eingebaut, dass sich der Cursor beim Hovern über ein Video zu einem Play-Button verwandelt. Spielt der User das Video ab, wird der Cursor zu einem Play-Button, der nach 1.5 Sekunden verschwindet, wenn der Cursor nicht bewegt wird. Sobald eine Bewegung beginnt, wird der Cursor wieder angezeigt. Diese Funktionalität, die man sich von normalen Videoplayer gewöhnt ist, soll die Navigation erleichtern und bietet zudem den Vorteil, dass sich der Besucher voll und ganz auf die Geschichte konzentrieren kann, ohne einen störenden Cursor im Bild zu haben.
Ausserdem haben wir uns entschieden, eine Untertitel-Option zu implementieren. Wir wollen eine möglichst barrierefreie Website gestalten – die Untertitelung war für uns also der nächste logische Schritt. Hier haben wir uns für normale Untertitel und gegen Captions entschieden, da eine sinnvolle Vermittlung von nichtsprachlichen Audioinformationen in unserem Fall fast unmöglich wäre.
Die Umsetzung der Cursor- und Untertitel-Funktionalität stellte uns jedoch vor grössere Herausforderungen, da es einmal mehr an der Cross-Browser Kompatibilität zu scheitern schien. Vor allem im Safari-Browser wollte es mit der Cursor-Funktion nicht so recht klappen. Erst nach einigem Herumtüfteln schien es zu funktionieren. Sobald jedoch die Untertiteldateien im HTML hinzugefügt wurden, wurde wieder nur der normale Cursor angezeigt. Wir werden versuchen, dieses Problem zu beheben.
Die Projektinfos im Footer wurden in eine separate Credits-Seite ausgelagert, die eine detailliertere Informationsvermittlung erlaubt. Zusätzlich wurden ein paar Designanpassungen vorgenommen, darunter auch ein Redesign des Logos. Wir wollten ein Logo gestalten, das besser leserlich war, das aber dennoch im Stile des alten Logos erscheinen sollte. Schlussendlich haben wir das neue Logo trotz einigen investierten Stunden Arbeit verworfen, da uns das alte Logo besser gefiel. Zuletzt wurde eine responsive E-Mail erstellt, die nach der Online-Schaltung des 3. Kapitels an unsere Newsletter-Abonnenten versendet wurde.
