Idee & Konzeption
Man nehme ein Webprogrammierer und füge eine Zeichnerin hinzu – et voilà: Das das Grundrezept für ein Webcomic. Unsere Idee war es, unsere unterschiedlichen Fähigkeiten in einem gemeinsamen Projekt optimal anzuwenden. Alexander kümmerte sich um das Konzipieren, Programmieren und Animieren der Website und Milena um die visuelle und auditive Umsetzung.
Wir führten viele Gespräche, worüber unser Webcomic denn genau handelt sollte. Uns war es beiden wichtig, ein Thema aufzugreifen, dass uns persönlich oder allgemein Studenten beschäftigt und gesellschaftsrelevant ist.
Wir fokussierten uns dabei auf Themen wie Erschöpfungsdepression, Burnout, Leistungsdruck, Körperkult und Einsamkeit. Da wir von einer fiktiven Geschichte ausgingen, war es eine Herausforderung, das Thema in einer kurzen Geschichte inhaltlich und visuell auf den Punkt zu bringen. Letztendlich entschieden wir uns für das Thema Einsamkeit, weil es heute trotz digitaler Vernetzung viele Menschen gibt, die sich oft einsam fühlen.
Wir suchten nach einem visuellen Element, dass den Leser/die Leserin durch die ganze Geschichte begleitet. Dafür wählten wir das Smartphone aus. Es sollte regelmässig sicht- und hörbar sein. Je mehr wir uns mit dem Smartphone auseinandersetzten, desto mehr entfernten wir uns vom ursprünglichen Thema Einsamkeit. Die Themen Smartphone und Nachrichtenflut rückten zunehmend ins Zentrum. Von da an war das Smartphone in der Geschichte nicht nur ein begleitendes, sondern führendes Element. Das Verhalten und die Gefühle unserer Hauptfigur waren auf das Smartphone zurückzuführen.
Story
Wie oben bereits erwähnt änderte sich während des Arbeitsprozesses das Hauptthema. Das hatte ganz klar auch Auswirkungen auf die Story.
Der Comic zeigt einen einzelnen Tagesablauf einer jungen Studentin, der aber symbolisch für ihren Alltag steht. Wir erstellten dafür eine Plot-Skizze. In dieser hielten wir fest, was genau die Hauptfigur macht, wie sie sich fühlt und wo sie sich befindet. Wir versuchten, die Story in Form einer Heldenreise zu gestalten. Vom Alltag ausgehend, zur Bewährungsprobe bis zur entscheidenden Prüfung. In unsere Geschichte stoppen wir an diesem Punkt, da es ein zweites Kapitel geben wird. Wir wollen dem Leser/der Leserin Zeit geben zum Nachdenken, was unsere Hauptfigur wohl tun wird. Wird sie sich besser fühlen ohne Smartphone? Sind ihre Probleme damit gelöst? Oder lässt sie sich selbst in die Tiefe fallen? - das erfährt man erst im zweiten Kapitel.
Im zweiten Kapitel soll es gefühlsmässig mehr in die Tiefe gehen. Die Idee ist beispielsweise, das Thema Einsamkeit nochmals aufzugreifen und konkreter darauf einzugehen. Der Leser/die Leserin könnte erfahren, welche Auswirkungen der Smartphone-Konsum auf unsere Psyche hat. Nebst Einsamkeit könnte das auch mit Erschöpfungsdepression, Selbstzweifel und Körperkult zu tun haben.
Drehbuch
Wie genau gestaltet sich ein Drehbuch für ein Comic? - das haben wir uns zu Beginn auch gefragt. In unserem Studium setzten wir uns bisher nur mit dem filmischen Drehbuch auseinander. Doch wie muss man ein Comic planen und inszenieren damit er nicht wie ein Film wirkt? Wie gestalten sich die Übergänge zwischen den einzelnen Szenen? - Fragen über Fragen die ein Umdenken in der Vorgehensweise von uns forderten.
Wir machten folgende Unterteilung:
- Sequenz – pro Handlungsort ergibt sich eine neue Sequenz, z.B Dachwohnung, Uni etc.
- Fliesstext – der Erzähltext, Stimmung und Hintergrundinformationen zusätzlich zu den Sprech- und Denkblasen liefert. Er wird auf der Website seitlich eingeblendet
- Denk- und Sprechblase – alles was unsere Hauptfigur spricht oder denkt, wird in Blasen auf der Website ein- und ausgeblendet
- Textnachrichten – Konversationen, die auf dem Smartphone geführt werden
- Zeichnungen
- Action – was passiert auf der Website? Unter Action haben wir notiert, welche Geräusche, Töne etc. man hört, Farbübergänge des Hintergrunds sowie die Zeichnung- und Textanimationen
Nachfolgend ist unser Drehbuch ersichtlich: Drehbuch Sintflut
Visuelle Umsetzung
Bei der anfänglichen Ideensuche stiessen wir auf den Webcomic The Boat. Wie sich herausstellte ein wahres Meisterwerk eines Webcomics, dass mehrfach mit Preisen ausgezeichnet wurde. Nebst den Animationen gefiel uns besonders der Zeichenstil. Wir entschieden uns daher, unseren Webcomic ähnlich zu gestalten. Die Zeichnungen sollten möglichst “rough” und handgezeichnet aussehen. Bei der Farbwahl beschränkten wir uns auf Schwarz-Weiss und Grautöne, da dies unserer Meinung nach die bedrückte Stimmung und das Regenwetter am besten darstellt.
Die Zeichnungen wurden von Hand mit dem WACOM-Tablet im Adobe Photoshop gezeichnet. Dazu verwendeten wir verschiedene Brushes. Zum einen ein Öl-Brush für die Konturen und zum anderen ein Aquarell-Brush für die Flächen. Der Aquarell-Look sollte die regnerische Stimmung des Comics untermalen.
Eine Herausforderung beim Zeichnen war sicherlich, immer denselben Zeichenstil beizubehalten. Da die Zeichnungen über einen längeren Zeitraum entstanden sind, war das gar nicht so einfach – denn Zeichnen ist stimmungsabhängig. Je nach Stimmung, werden die Zeichnungen rougher oder detaillierter. Schlussendlich sollten die Zeichnungen aber alle denselben Look haben. Darum mussten teilweise einige Zeichnungen überarbeitet werden, damit letztendlich alles wie aus einem Guss aussah.
Inspiration für die Zeichnungen bot uns die Stadt Bern. Wir wählten einige Locations aus, die für unsere Story in Frage kamen und machten Fotos davon. Um die Gestik und Mimik unserer Hauptfigur möglichst optimal zu gestalten, orientierten wir uns an Bildern aus dem Netz.
Sounddesign
Regen – unser auditives Element, dass den Leser/die Leserin durch den Comic begleitet. Wie der Titel “Sintflut” bereits verrät, handelt die Geschichte von einer Überflutung. Der Regen dient als Symbol für die einprasselnden Nachrichten. Aus diesem Grund ist er auch oft hörbar. Ein weiteres wichtiges Element sind die Klingeltöne und Vibrationen des Smartphones. Die hörbare Überflutung wird dadurch verstärkt.
Uns war es wichtig, dass das Sounddesign möglichst natürlich und real zu gestalten. Aus diesem Grund nahmen wir selbst einige Geräusche auf – besonders typische Geräusche der Stadt Bern. Nebst selbst aufgenommenen Geräuschen verwendeten wir auch einige Aufnahmen von Soundlibraries.
Das Sounddesign erstellten wir mit Hilfe von Adobe Audition. Um den Zeichnungen den richtigen Sound zuzuordnen, mussten wir einzelne Loops für die jeweilige Scrollposition erstellen – insgesamt um die 15 Loops. Doch wieso genau Loops? Bleibt der Leser länger auf einer Scrollposition stehen, soll die Geräuschkulisse in der Endlosschleife weiterlaufen, bis er weiterscrollt. Aus diesem Grund erstellten wir Loops à 10 Sekunden. Damit der Übergang nicht hörbar ist, verwendeten wir die Funktion “Mix Paste”. Dabei wird ein Fragment vom Schluss der Audiodatei am Anfang eingefügt und mit der bestehenden vermischt. Um die räumliche Orientierung zu verstärken, haben wir alle Sounds im Stereopanorama abgemischt und so positioniert, dass sie mit dem Bild übereinstimmen. Am Schluss wurde alle Sounds gleich laut abgemischt.
Website
Bei der Website hatten wir zunächst die Schwierigkeit herauszufinden, wie wir die Übergänge und Animationen überhaupt umsetzen möchten. Beim Comic “The Boat” funktionieren alle Animationen mit Scrollen. Wir haben uns entschieden, auch alle Animationen über Scrollen zu machen, da diese Bewegung am wenigsten verwirrt. Allerdings besteht “The Boat” aus mehreren Ebenen und Effekten und ist damit äusserst aufwendig. Ausserdem ist nicht direkt ersichtlich, wie er technisch aufgebaut ist.
Deshalb suchten wir selbst nach Möglichkeiten. Wir versuchten es zuerst mit PlugIns wie AOS (Animate on Scroll) und auch P5 aus. Beides funktionierte allerdings nur für einen Teil der Animationen. Bei P5 hatten wir beispielsweise die Schwierigkeit mehrere Canvas an verschiedenen Scroll-Positionen zu platzieren.
Ein weiterer Versuch mit einem Video, welches sich durch Scrollen abspielt, ist ebenfalls gescheitert, da die Darstellung in vielen Browser bei schnellen Bewegungen nicht flüssig war.
Schlussendlich haben wir uns entschieden, alle Javascript-Funktionen für jede Animationsart selbst zu schreiben. Die Seite wurde so aufgebaut, dass sich von jedem einzelnen Element, die Startposition, die Bewegung und den Parallax-Scroll einstellen lässt.
Den Sound konnten wir leider nicht so gut integrieren. Der Loop des Regen-Sounds macht bei jedem Durchgang eine Pause von wenigen Millisekunden. Mit dem Ändern auf das .wav-Format konnten wir die Pause zwar etwas reduzieren, aber sie ist immer noch hörbar.
Auch mussten wir uns aus Zeitgründen auf den Chrome als Browser funktionieren. Beim Firefox gibt es beim Scrollen eine fehlerhafte Darstellung und für Mobile müssten wir viele Animationen noch einmal neu machen.
Insgesamt konnten wir aber bei den meisten Problemen eine Lösung finden und zumindest für den Google Chrome ein durchgängiges Erlebnis umsetzen.
Animation Regen
Da der Regen ein wichtiges Element in unserem Comic darstellt, war es uns wichtig, ihn als Animation einzubauen. Doch wie animiert man das am besten? - darüber waren wir uns zu Beginn nicht einig. Also probierten wir mehrere Möglichkeiten aus.
Zuerst versuchten wir es mit After Effects. Mit Hilfe des Effekts “Particle World” gelang es uns, den Regen möglichst real darzustellen. Nachteil: Das Ganze muss inklusive Zeichnung als Video exportiert werden. Da die Zeichnungen im Code aber meistens als Background hochgeladen wurde, war diese Option nicht möglich. Da Videos als Background-Image gar nicht möglich sind. Eine Verwendung für das Video fanden wir letztendlich doch noch. Es dient nun als Intro der Website.
Die zweite Option war es, den Regen von Hand zu Zeichnen – sprich 2-3 Tropfen zu zeichnen und die anschliessend direkt im Code zu animieren. Dies stellte sich aber als aufwändige und komplizierte Variante heraus.
Schlussendlich entschieden wir uns dafür, den Regen direkt im Code mit Hilfe von Javascript zu animieren.
Verwendete Tools
- Adobe Photoshop
- Adobe Audition
- Adobe After Effects
- Wacom Tablet
- Zoom H6 Audiorecorder
- Soundlibraries
Fazit & Learnings
Das Projekt hat uns im Grossen und Ganzen sehr Spass gemacht. Wir haben Einiges ausprobiert und Vieles dazugelernt. War wir bereuen ist unser Zeitmanagement – hätten wir früher mit dem Projekt begonnen, so wäre das Endergebnis sicherlich nun viel ausgereifter. Leider begannen wir mit der Konzeption erst Mitte Semester, was uns gegen Ende Semester dafür umso mehr ins Schwitzen brachte. Da es aber ein zweites Kapitel geben wird, haben wir die Möglichkeit, aus unseren Fehlern zu lernen und das Zeitmanagement in den Griff zu kriegen. Auch inhaltlich soll’s das zweite Kapitel richten: Da wir nun bereits wissen, wie wir programmiertechnisch und visuell am besten vorgehen, können uns mehr auf den Inhalt fokussieren und in die Tiefe gehen. Trotz allem erfreuen wir uns aber sehr an unserem ersten, eigenen Webcomic.
