Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Visual Storytelling

In dem Kurs Visual Storytelling drehte sich alles um Animation. Anhand mehrerer Projekt und Aufgabenstellungen, widmeten wir uns auch im Hinblick auf theoretischem Input wie der Heldenreise, der visuellen Nacherzählung. Dafür wurde das Programm Adobe After Effects als auch andere Programme wie Illustrator und das arbeiten mit KI verwendet.

Wir erhielten eine Mischung aus theoretischer Wissensvermittlung und praktischem freien Arbeiten. Zur Erstellung der Animationen wurde das Programm Adobe After Effects verwendet, welches wir gemeinsam innerhalb eines Workshops kennen gelernt haben.

Fingerübung WOZ in 7 Stationen

Die erste Aufgabe war es, den Film the wizard of Oz anhand 7 Stationen nachzuerzählen und die Kreise zu füllen. Dazu erhielten wir ein Template für Adobe After Effects und Footage mit vielen Illustrationen, mit denen wir die 7 Stationen befüllen und animieren sollten.

Die eigene Interpretation der Nacherzählung stand im Vordergrund und es bat einen super Einstieg in das Programm After Effects.

Input wie die Heldenreise und Comics zum lesen erhielten wir aufbauend auf the Wizard of OZ dazu.

Nacherzählung einer Geschichte - TITANIC

Unsere erste große Aufgabe war eine Nacherzählung einer Geschichte, eines  Songs, Films oder eines Buches innerhalb von 30 Sekunden visuell nachzuerzählen. 

Wir arbeiteten mit Adobe After Effects um unsere Animationen zu erstellen und sollten so viel wie möglich KI basierte Illustrationen, Fotos oder Animationen verwenden.

Ich entschied mich für den bekannten Film Titanic.

Die Schwierigkeit bei dem Visual Story Telling war es, nicht einfach nur den ganzen Film in seiner Chronologie nachzuerzählen sondern sich auf besondere Szenen zu fokussieren die interessant wirkten und den Schwerpunkt der Geschichte widerspiegeln.

Für den Anfang sollten wir ein Moodboard, Storyboard, Styleframe und Konzept erstellen um unserem Projekt genauere Vorstellungen für Szenen und Animationen geben zu können.

Anfangs entschied ich mich dafür, den Film Titanic nur mit Händen nachzuerzählen, doch schnell merkte ich dass sich das als sehr schwierig und nicht ausreichend für das allgemeine Verständnis des Films ausreichte.

Also baute ich Puffer wie Figuren, Objekte wie das Schiff, einen Eisberg usw mit ein und setzte auf KI bassierte Illustrationen, verschiedene Effekte wie komplexe Wellen Effekt oder das Puppy Tool, um meiner Animation Charakter und Spannung zu verleihen.

Um dem Video etwas Leichtigkeit und Humor zu verleihen, versuchte ich durch teils größen Unterschiede und lustige Aktionen Humor mit einzubringen.

Nacherzählung Titanic Design Prozess 1

Moodboard

Mein erstes Moodboard hatte die Thematik loslassen, was mein erster Gedanke bei dem Film Titanic mit sich bringt und brennende leidenschaftliche Liebe als natürlich auch die Tiefe und Kälte des Meeres.

Moodboard-loslassen.jpgMoodboard-loslassen.jpg
Moodboard.jpgMoodboard.jpg

Storyboard

Für mein erstes Storyboard, versuchte ich  die genaue Chronologie des Filmes darzustellen, die sich in ihren  bekanntesten Szenen,  wie die Bugszene und das kollidieren des Schiffes mit dem Eisbergs widerspiegeln.

Storyboard.jpgStoryboard.jpg
Sb.jpgSb.jpg

Styleframe

Die ersten Styleframes zeigen die bekannten Szenen wie die Bugszene von Jack & Rose und den Eisberg im Ozean. Hier habe ich aus eigenen Illustrationen und KI basierten Hintergrundbildern gearbeitet.

Styleframe.jpgStyleframe.jpg
Styleframeeisberg.pngStyleframeeisberg.png
Styleframebugszenepng.pngStyleframebugszenepng.png

Concept

Für das Konzept setzte ich auf wiedererkennbare Motive,  wie das rote wellige Haar von Rose oder die Herzkette, die sich wie ein roter Faden durch den Film ziehen sollte und jedem bekannt ist.

Concept.jpgConcept.jpg

Colorscript

Colorscript.jpgColorscript.jpg

Nacherzählung Titanic Design Prozess 2

Moodboard

Nachdem mir die perfekte Chronologie des ersten Nacherzählens zu langweilig war und mit abgestimmten Feedback von Dufke, auch zu offensichtlich und oft gesehen war, setzte ich auf interessantere Szenen.

Die neue Thematik waren dann Hände und nur Szenen, in denen diese sich berühren oder miteinander interagieren.

Moodboard.jpgMoodboard.jpg

Storyboard

Ich versuchte den Film diesmal nur mit Händen zu erzählen, die sich visuell in mehreren bekannten Szenen mit dem Film verbinden lassen, wie die  erste Begegnung oder die haltenden Hände in Fliegerposition- die Bugszene oder die Hände beim Akt Malen oder auf der Autoscheibe in der Garage.

Storyboard.jpgStoryboard.jpg

Styleframe

Bei den nächsten Styleframes illustrierte ich die Hände mit Adobe Illustrator und meinem I Pad und wollte diese minimalistisch halten und alle in einer Farbnuance setzen und nur kleine Elemente wie den blauen Mantel oder die Herzkette mit einbringen.

Sf1png.pngSf1png.png
Styleframeslide.jpgStyleframeslide.jpg
Sf2.pngSf2.png
Sf3.pngSf3.png
Sf4.pngSf4.png

Concept

Concept.jpgConcept.jpg

Colorscript

Colorscript.jpgColorscript.jpg

Nacherzählung Titanic Design Prozess 3

Nachdem ich merkte, dass sich der Film Titanic visuell nicht so gut nur mit Händen erzählen lässt und die Thematik loslassen sehr schwer wog, entschied ich mich final dann nochmal um, meine Nacherzählung mit mehr Humor, Dynamik und mehreren Elementen nachzuerzählen.

Ich generierte mehrere Illustrationen, die sich alle in dem gleichen Stil bewegen. Wichtige Elemente wie den Eisberg, das Schiff als auch verschiedene Objekte, die für Rose und Jack stehen sollten.

Der Film zeigt nun auf lustige Weise  zwei liebende, die von unterschiedlichen Klassen stammen, in deren Welt eine Grenze  aufgezogen wurde,Sie diese aber in ihrer Liebe überwinden . Die Nacherzählung hat sowohl eigene Interpretationen in ihren Szenen als auch die klassisch bekannten Szenen durch  Illustrierte Symbole gesetzt, die für den Film Titanic stehen.

KI bassierte Illustrationen Entwurf 1

Illu2.jpgIllu2.jpg
Illu1.jpgIllu1.jpg
Illu3.jpgIllu3.jpg
Illu4.jpgIllu4.jpg
Illu5.jpgIllu5.jpg
Illu6.jpgIllu6.jpg

KI bassierte Illustrationen final

Die finalen Illustrationen, die für den Film Titanic in ihrer Nacherzählung genutzt wurden, stehen für die wichtigsten Szenen aus dem Film wie das Schiff, die Bugszene von Jack und Rose oder die Herzkette, die jeder erkennt als auch eigene Interpretationen wie das Inventar von Rose ihrer Klassenabstammung wie Seidenhandschuhe, Goldmünze oder Jacks Schaufel, ein Penny etc.

Illustrationen.jpgIllustrationen.jpg
Bug.pngBug.png
Bubble.pngBubble.png
Schiff.pngSchiff.png
Eisberg.pngEisberg.png
Welle.pngWelle.png
Auto.pngAuto.png
Handschuhe.pngHandschuhe.png
Münze.pngMünze.png
Malerhand.pngMalerhand.png
Kette.pngKette.png

Styleframes

Bei den Styleframes  habe ich auch wieder wiedereinkehrende Hintergrundfarben genutzt, die für den Ozean, die Titanic als auch Rose und Jack stehen sollen, wie das Türkis für das Meer und die berühmte Herzkette, als auch das rot für Rose's Haare um die Verbindung zum Film herzustellen.

Auch arbeitete ich wiedereinkehrende Motive mit ein, wie die Wellen, auf denen das Schiff am Anfang einfährt und am Ende wieder auftauchen, als Jack und Rose sich von einander verabschieden. 

Diese Leitmotive setzen einen roten Faden im Film und helfen  eine thematische Konsistenz  zu schaffen. Durch die Widerholung bestimmter Motive wird das Thema oder die Bedeutung des Films vertieft.

VS Mood Board Titanic - Rahmen 7.jpgVS Mood Board Titanic - Rahmen 7.jpg
Styleframeslide.jpgStyleframeslide.jpg
Schiff.pngSchiff.png
Bugszene.pngBugszene.png
Eiswürfel.pngEiswürfel.png
Herzkette.pngHerzkette.png
Abschied.pngAbschied.png

Link zum Miroboard

Hier befinden sich alle Zwischenstände, Infos, Illustrationen , Moodboard, Storyboard, Styleframes usw. zu Titanic

Titanic: https://miro.com/app/board/uXjVKKnxrow=/?share_link_id=603916884772

Nacherzählung Titanic Animation Entwurf 1

Nacherzählung Titanic Animation Entwurf 2

Nacherzählung Titanic Animation Entwurf 3

Nacherzählung Titanic Animation Final

Die finale Version der Nacherzählung von Titanic

Tutorial Iced Mango Matcha Latte Rezept Prozess

Die zweite Aufgabe war es, ein Tutorial oder ein Dokumentationsvideo zu erstellen. Ich entschied mich für ein Tutorial zu einem Mango Matcha Iced Latte Rezept. Ich nutzte für das Animationsvideo Realbildaufnahmen, die an der FHP im Animationsstudio entstanden sind. Dort arbeiteten Tessa und ich gemeinsam um uns gegenseitig bei unseren Projekten zu unterstützen. 

Für Das Tutorial nutzte ich die Realbildaufnahmen aus dem Studio, als auch eigene Illustrationen, wie Pfeile, Mangos, Wolken etc. Ich nutzte ebenfalls Text, für Zutaten und zusätzliche Erklärungen für Stellen an denen kleine Infos zur Matcha Zubereitung notwendig waren.

Für die Typografie setzte ich den Effekt Typewriter ein und nutzte noch andere Effekte für mein Video wie den Bubble Effekt, den Snow Effekt, komplexe Wellen usw.

Für die Musik nutzte ich für den Anfangsteil, in dem der Titel und die Zutaten aufgelistet werden, als auch für das Ende eine etwas schnellere Musik mit Beast, von der Seite Freesounds.org. 

Ich wollte etwas heiteres und schnelles, dass mit der Stop Motion Bewegung gut harmoniert und trotzdem nicht zu aufdringlich wirkt.

Nach einer bewusst gesetzten Stille im Video, die, die Szene der Zutatenauflistung von der Zubereitungsszene trennen soll, entschied ich mich für eine etwas ruhigere Musik mit Sparkle Sounds und Beats.

Zusätzlich baute ich noch mehrere Cookingsounds mit ein, wie Glas klimpern, Strohhalm und Getränk schlürfen, als auch kochende Wasser Geräusche, mixen etc. mit ein, um das Rezept in ihrer Zubereitung realer wirken zu lassen und nicht nur Musik im Hintergrund zu haben, sondern auch die Aktionen vom Kochen audiovisuell zu begleiten.

Moodboard

Mein Moodboard konzentrierte sich zunächst auf mehrere Getränke, wo ich mich letztendlich aber für die Matchazubereitung entschied.

Mein Moodboard hatte eher minimalistiche, clean Vibes, die mit Licht und Schatten spielten. Die Bilder inspierten mich zu Nahaufnahmen und der Ausrichtung die ich letztendlich für meine Komposition von vorne und leicht oben angesetzt hatte.

moodboard teil.jpgmoodboard teil.jpg
moodboard .jpgmoodboard .jpg

Inspirations Video- Stop Motion

Bildschirmfoto 2024-07-10 um 21.50.08.pngBildschirmfoto 2024-07-10 um 21.50.08.png

Die Arbeit im Animationsstudio an der FHP

Die Realbild Aufnahmen sind im Animationsstudio an der FHP entstanden.

Ich bin sehr froh, das Animationsstudio für meine zweite Aufgabe genutzt zu haben, und in großartiger Zusammenarbeit mit Tessa, wo wir uns beide für unsere Stop Motion Tutorials unterstützen konnten.

Wir brachten erstmal unsere ganzen Materialien mit, die wir benötigten und unsere Storyboards, um eine genaue Vorstellung und Anleitung zu haben. 

Anfangs war es etwas chaotisch, uns in den Raum einzufinden, da wir alles erstmal suchen mussten, was wir aus dem Raum benötigten und alles dann aufzubauen, wie die Lampen, die teilweise ganz oben mit einer Leiter angebracht werden mussten. 

Nach dem einfinden in das Programm Dragonframe, der  Platzierung der eigenen Kamera von Tessa und dem aufstellen des Stativs in Position, dem richten der Lichtquellen und dem Hintergrund legen, konnte ich dann mit dem Ausrichten meiner Objekte starten.

Es war viel Arbeit, alle einzelnen Elemente, besonders bei so vielen Zutaten und Zubereitungen immer wieder in kleinsten Bewegungen nach vorne zu platzieren und gleichzeitig auch kreativ in abwechslungsreichen Szenen zu sein. Auch war es teilweise ein ganz schönes auf und ab rennen, da ich Eiswürfel hatte, die anfingen zu schmelzen trotz Kühltasche oder dem vorsichtigem aufschneiden im Bad von Mango und klebrigem Mangosaft oder Matchapulver verschütten haha.

Ich hatte wirklich super viel Spaß im Studio und letztendlich bin ich super zufrieden mit dem Ergebnis. Es war eine echt interessante Erfahrung und der Stil von Stop Motion gefällt mir wahnsinnig gut, dass ich mir immer wieder vorstellen könnte solch Projekte zu machen.

Durch eine Bedienung lies sich der Auslöser ganz leicht drücken und durch den Monitor hatte ich alles gut im Blick.

Damit alle Objekte am Ende auch aus der gleichen Sicht sprich Position geschossen werden und man wusste, wo das letzte Objekt sich befand, um das neue genau auf die gleiche Stelle zu platzieren, gab es einen Regler am Bildschirm im Programm, dass es ermöglicht hat, den alten Shot anzuzeigen um dann das Objekt darauf zu platzieren und weiter zu arbeiten, was für die Stop Motion Aufnahmen und das arbeiten  essentiel ist.  Das sogenannte Union Skinning, bezeichnet die Funktion, die es ermöglicht, dass der vorherige Shot oder Frame teilweise transparent über das aktuelle Bild gelegt wird. So konnte ich die Position meines Objekts präzise anpassen und sehen, wie sich das Objekt von einem Frame zum nächsten bewegt.

Für mein Tutorial wurden letztendlich über 800 Realbild Aufnahmen geschossen, welche in einer Stop Motion Sequenz von 12 Fps abgespielt wurden und am Ende in einer Mp4 Ausgabe durch das Programm Dragon Frame exportiert werden konnte und ich mir auf meinen Stick gezogen habe.

Zuhause konnte ich dann mit dem Video und Bildern in Adobe After Effects weiter arbeiten und alles nochmal bearbeiten , wo ich dann auch noch die Lichtverhältnisse und Kontraste angepasst hatte, da meine Aufnahmen trotz Lichtquellen etwas zu dunkel waren. Ich habe dann noch Effeckte anwenden können, als auch die zusätzlich generierten  Illustrationen aus Adobe Illustrator hinzugefügt und animieret als auch mehrere Effekte angewendet und Musik eingefügt und zugeschnitten.

IMG_2017.pngIMG_2017.png
IMG_2001.pngIMG_2001.png
IMG_2002.pngIMG_2002.png
IMG_2011.pngIMG_2011.png
IMG_2014.pngIMG_2014.png
IMG_2008.pngIMG_2008.png

Storyboard

Stb.pngStb.png

Überarbeitetes Storyboard

Das Storyboard spiegelt die chronology der Rezeptzubereitung wieder und zeigt alle wichtigen Szenen, die zu ihrer Zubereitung gehören.

Da ich viele Zutaten hatte, versuchte ich so geordnet wie möglich alles in die Komposition zu kriegen, besonders für die erste Szene, in der alle Zutaten aufgelistet werden.

Meine Shots entstanden aus einer Front Perspektive mit einem leichten Winkel von Draufsicht.

Storyboard final.jpgStoryboard final.jpg

Styleframes

Bei den Styleframes setzte ich wie aus meinem Moodboard auf clean, minimalistic Aesthetic.

Ich zeigte alle essentiellen Elemente, hatte aber trotzdem nicht zu viel in einer Komposition außer in meiner Anfangszene der Zutaten.

Die Aufnahmen sind schlicht von vorne und oben geschossen, in dem ich abwechselnd auch mal Nahaufnahmen miteinbringe wie zum Beispiel zur Verdeutlichung von der Konsistenz des Matchas, die für die Zubereitung essentiel ist.

Ich habe versucht kreativ abwechslungsreiche und trotzdem Konstante Positionen und Kompositionen zu erstellen, die dem Objekt und ihrer Zubereitung genug Aufmerksamkeit und Raum schenken.

Auch entschied ich mich dazu, meine Objekte aus einem Mix von frei schwebenden und zeigen von eigenen Händen mit einzubringen um eine gute Balance zu schaffen, die interessant und abwechslungsreich wirkt. 

Meine Objekte kommen immer mal wieder in verschiedene Positionen, wie Drehungen, sie tanzen, hüpfen, schweben aber behalten trotzdem die gleiche Drauf und Frontsicht an einem gleichen Punkt in der Komposition für das Stop Motion Video.

Styleframes.jpgStyleframes.jpg

Überarbeitete Styleframes

St1.pngSt1.png
Styleframes.jpgStyleframes.jpg
St2.pngSt2.png
St3.pngSt3.png
St4.pngSt4.png
St5.pngSt5.png
St6.pngSt6.png
St7.pngSt7.png
St8.pngSt8.png
St9.pngSt9.png
St10png.pngSt10png.png
St11.pngSt11.png
St12.pngSt12.png

Concept

Das Konzept sollte Zusatzelemente wie kleine Sterne, Pfeile, Blubberblasen und Wolken miteinbringen, um Zubereitungen und Aktionen nochmals zu verdeutlichen, die Blasen beim Mixxen oder Dampf beim heißen Wasserkessel.

Konzept.pngKonzept.png

Konzept.jpgKonzept.jpg

Colorscript

Colorscript.jpgColorscript.jpg

Illustrationen

Um nicht nur Realbildaufnahmen in meinem Tutorial zu nutzen,  generierte ich  Illustrationen, die alle in einem gleichen Stil und minimalistisch gehalten wurden.

Die Illustrationen, wie Pfeile und der kleine Matcha als Tassenfigur, dienen um im Tutorial essentielle Dinge zu erklären, die bei der Zubereitung von Matcha wichtig sind und bieten nicht nur Aufklärung sondern auch Abwechslung und Humor auf spielerische Art und Weise, die für den Betrachter unterhaltsamer sein soll, als die pure Arbeit mit Realbild Stop Motion und eine leichtere, visuell ansprechendere Atmosphäre schafft.

Illustrationen.jpgIllustrationen.jpg

Link zu dem Miroboard

Hier befinden sich alle Zwischenstände, Infos, Illustrationen , Moodboard, Storyboard, Styleframes usw. zu dem Tutorial Rezept Iced Mango Matcha Latte:

https://miro.com/welcomeonboard/czRqSTdqUzhsaW0zRnNWWmtsaHlCNVl1Rk55VkJNV09YNXFKV0xIOHdyY3VZa1FRMmxDcDhtenR4OHNGbHgzcHwzNDU4NzY0NTY5ODUzNjg3NzAxfDI=?share_link_id=927137322477

Iced Mango Matcha Latte Tutorial Final

Fazit

Mir hat der Kurs unglaublich viel Spaß gemacht, ich habe wirklich sehr viel lernen können, sei es den überhaupt ganzen Umgang mit Adobe After Effects, indem ich zuvor noch keine Erfahrung hatte oder den Umgang mit KI zu arbeiten sei es mit Chatgpt oder KI in Illustrator anzuwenden, oder die Arbeit im Stop Motion Studio mit dem Dragon Frame Programm, in dem ich auch meine Fotografieskills schulen konnte und vieles mehr. Ich habe mich auch intensiv durch mein Zweites Video mit Sounds und Musikschnitt beschäftigt und viele neue Effekte und Möglichkeiten in After Effects kennengelernt.

Nicht nur super toll war, das wir so viel kreativen Freiraum fürs praktische Arbeiten und gestalten hatten, sondern auch dass wir enorm viel tollen Input im Kurs als auch außerhalb durch Slides, Miroboards, Protokolle usw erhalten haben von Dufke. Dadurch habe ich bis jetzt immer noch ganz viel Stuff, was ich mir noch angucken möchte und noch nicht geschafft habe aber für meine weiteren Projekte  als auch aus eigenem Interesse sehr hilfreich und inspirierend sein wird.

Dufke  hatte immer ein offenes Ohr und super viele hilfreiche Tipps parat und uns immer viele kleine Videos gezeigt, als auch spontane Workshops in After Effects gegeben oder neue Effekte vorgeführt.

Auch fand ich mega, dass wir am Anfang immer  Musik gehört haben, Dufkes kleine Tanzeinlagen, seine gute Laune als auch sein leidenschaftliches Arbeiten eine tolle positive Atmosphäre im Kurs geschafft hat. 

Alles in allem ein super Kurs, mit mega viel qualitativem und inspirierendem Input innerhalb und außerhalb des Kurses, zum nachlesen, nachschauen. Ich würde ihn immer wieder belegen.

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Klaus Dufke

Zugehöriger Workspace

mb17 | Visual Storytelling: BilderGeschichten

Entstehungszeitraum

Sommersemester 2024

Keywords