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

MotionBasis.03 | Visual Storytelling | Von Lachs und Schokolade | 16/17

MotionBasis.03 | Visual Storytelling | Von Lachs und Schokolade | 16/17

„Visual Storytelling: From Complexity to Clarity to Simplicity. Konzeption und Gestaltung von drei “Erklär-Filmen„ als Animationen mit informationsvermittelndem Inhalt; jeweils in einer individuellen Darstellungstechnik: 1x illustrativ, 1x typographisch und 1x photographisch. Ziel ist es, komplexe Sachverhalte und Zusammenhänge zu visualisieren und in Form von Animationen verständlich zu machen.“

Animationen und Motion Graphics sind aus unserer medialen Welt kaum wegzudenken. Die Kombination aus visuellen und akustischen Reizen zieht unsere Aufmerksamkeit rasch auf sich und lädt zum assoziieren ein. Der Informationsgehalt in einem Bewegbildformat kann sehr hoch sein und ist dabei sehr leicht zu konsumieren. Auch dank YouTube und Co. erfreuen sich Erklär-Film-Formate einer hohen Beliebtheit. Es war nie einfacher sich Sachverhalte und Zusammenhänge jeglicher Art durch Erklär-Filme anzueignen. Haben wir nicht alle schon mal ein Tutorial auf YouTube angeschaut und waren hinterher schlauer? - Wahrscheinlich nicht immer schlauer aber dennoch besser informiert.

„If you can’t explain it simply, you don’t understand it well enough.“ – Albert Einstein


Fingerübung 1



Die erste Aufgabe war wie folgt gestellt: „Vergleichen Sie zwei Explainer/“(Erklär)filme” aus beliebigen Genre nach inhaltlichen und gestalterischen Aspekten.“

Nach längerer Recherche wählte ich die folgenden zwei Filme. „Guide to Wilderness Suvival“ von [Carmel Gatchalian](https://vimeo.com/carmeljoy „Carmel Gatchalian“) und „Outdoortips for Indoor People“ von [Dissolve](https://vimeo.com/dissolve „Dissolve“).

Die Filme sind sehr unterschiedlich in der Darstellung, behandeln aber ein ähnliches Thema.

Keyframes

Survival!_DM4.pngSurvival!_DM4.png


Darstellungstechnik und Elemente

Das erste Video „Guide to Wilderness Survival“ ist illustrativ umgesetzt. Es ist ein Comic mit subtil animierten Elementen und Stummfilm-Charakter. Texttafel liefern Kontext und leiten Kapitel ein. Der Film wird begleitet von Musik.

Das zweite Beispiel-Video „Outdoor Tops for Indoor People“ ist eine animierte Kollagen-Komposition. Grundlage sind Fotografien. Ein Sprecher begleitet die Bildabläufe. Es gibt kaum Typografie, lediglich Logos als Kapitel-Einleitung.


Farbe, Bildwelt und Stil

Die Farbwelt in „Guide to Wilderness Survival“ ist monochrom in Rot und Weiß. Die Bildwelt ist ikonografisch 2-Dimensional. Die Bewegungen sind subtil. Charakter und Welt sind minimalistisch animiert. Das Inventar-Interface steht im Kontrast zur Retro-Darstellung. Das Video ist unterteilt in Intro, Kapitel und Outro.

Farb- und Bildwelt in "Outdoor Tips for Indoor People" sind farbenfroh und klar. Bestehend aus verschiedenen Landschaften, Menschen, Tieren. Viele verschieden Elemente bewegen sich und werden in relativ kurzen Abständen ein - und ausgeblendet. Das Video besteht aus Intro, Kapitel und Outro.


Sound

Eine Art klassische Film-Musik begleitet den ersten Film. Zusätzlich werden wenige Sound-Effekte sehr gezielt verwendet. Sie unterstreichen Pointen oder leiten Kapitel ein.

Der zweite Film wir von Gitarren-Musik begleitet. Eine angenehme Herren-Stimme führt den Betrachter durch das Geschehen. Auch hier werden Sounds, die Ereignisse und Pointen unterstreichen, verwendet.


Wirkung

Die eher niederkomplex Darstellung beider Filme lässt sie jedoch nichts van Wirkung büßen. Der erste Film wirkt nostalgisch, spricht aber fasst jede Altersklasse an. Das Video ist unterhaltsam und leicht bekömmlich. Der zweite Film wirkt dagegen modern und erwachsen aber gleichzeitig kindlich unbeholfen.


Fingerübung 2



Bei der zweiten Fingerübung ging es darum einen Neuen Abspann, unter Einbezug der Neuen FHP CI, zu entwickeln und dabei erste Gehversuche in After Effects zu machen. Als Anlehnung an das alte FHP-Logo, dass vertikal positioniert war, entschied ich mich für einen Bewegungsablauf bei dem sich das neue Logo dreht und die alte Position einnimmt. Der Hintergrund dreht sich entgegen dem Logo, verkleinert sich und agiert als Texttafel auf der die Credits eingeblendet werden. Die verwendete Schriftart ist FHP-Sun von Lucas de Groot.

Kursergebnisse - drei Erklärfilme



Ich nahm mir das Zitat von Einstein zu Herzen und wählte ein mir vertrautes Thema. Das Zubereiten von Essen.

Durch meine Erfahrungen in der Gastronomie fällt es mir einfach Rezepte anschaulich zu erklären. So entschied ich mich dazu drei Erklärfilme über das Kochen zu produzieren. Ich fand zwei passende Themen.

  • Die Herstellung einer Mousse au chocolat
  • Das Filitieren eines Laches

Die Mousse au chocolat kam als Rezept in Frage weil die Zutatenliste übersichtlich ist und die Zubereitung nur wenige Schritte umfasst. Zu dem wählte ich ein Rezept ohne Zucker, Sahne und Ei. Die Komponenten müssen dabei lediglich zerkleiner und kalt zusammengerührt werden. Das Filitieren eines Lachses hatte ich in einem früheren Semester bereits grafisch Dargestellt. Es war sinnvoll das Material wieder aufzugreifen.


1 - Typografisch

Die Inspirationsgrundlage der Typografischen Darstellungstechnik bildeten die Zutaten. Daraus entnahm ich Ansätze zur Farb- und Formgestaltung. Die Typografische Animation umfasst die Rezeptdarstellung und die Vorgehensweise. Die Animation ist 59 Sekunden lang, 1280 x 720pixel im Format und wird von Musik begleitet. Das Musikstück wurde von Maxim Martin eigens dafür komponiert und ist wesentlicher Bestandteil der audiovisuellen Wirkung.

Storyboard

  • die Headline wird eingeblendet und bewegt sich zum oberen Bildschirmrand
  • die Zutaten werden im Block angereiht und gleiten nach links
  • ein Trennen streckt sich vertikal
  • die Ablaufschritte werden eingeblendet und die jeweilige Zutat wird passen hervorgehoben

Storyboard2.pngStoryboard2.png


Styleframe

Styleframe.pngStyleframe.png


Workflow

After Effects - Premiere

Die Animation besteht aus zwei Unter-Kompositionen. Ich begann mit den Zutaten und dem Ablauf.

TypoScreen.PNGTypoScreen.PNG

Im weiteren Verlauf kamen der Hintergrund, der Rahmen, die Vignette und der Titel dazu.

TypoScreen2.PNGTypoScreen2.PNG

Die abschließenden Komposition von Bild und Ton, sowie Vor und Abspann erfolgte in Adobe Premiere.

TypoScreen3.PNGTypoScreen3.PNG

Die Rezept-Animation hatte ich relativ schnell fertig und war voll motiviert für das nächste Projekt.


2 - Illustrativ

Der zweite Erklärfilm ist illustrativ Umgesetzt. Und ist die Animation einer Arbeit aus einem früheren Kurs. Das Vorgehen beim Filitieren eines Lachses wird in drei Schritten grafisch erklärt. Die Schritte werden durch Texttafeln unterteilt und eingeleitet. Der Stil ist bewusst sehr reduziert gehalten. Der informationsvermittelnde Inhalt steht im Vordergrund. Die Musik erheitert die kühle Stimmung und rundet ab. Die Animation ist 1:38 Sekunden lang und 1280 x 720pixel im Format. Das Musikstück wurde von Maxim Martin komponiert.

Storyboard

Storyboard.pngStoryboard.png


Styleframe 1

Anfangs verfolgte ich eine recht detaillierte Darstellungsweise. Ich musste aber einsehen dass dies den Rahmen des Kurses sprengen würde. Die Illustrationen würden viel zeit in Anspruch nehmen. Somit verwarf ich diesen Ansatz.

Keyframe4.pngKeyframe4.png


Styleframe Final

Die piktografischen Zeichnungen hatte ich bereits, ich musste sie nur noch für After Effects aufbereiten.

Styleframe.PNGStyleframe.PNG


Workflow

After Effects - Premiere

Die Animation besteht aus mehreren ineinander verschachtelten Kompositionen. Ich merkte schnell wie wichtig es ist das Projekt gut und übersichtlich zu strukturieren. Die Projekt-Größe nahm rasch zu und es fiel mir immer schwerer den Überblick zu behalten.

Screen1.PNGScreen1.PNG

Das Animieren des Wassers hat mir besonders viel Freude bereitet. Es sind jeweils acht Tropfen die versetzt auf einem eigenen Pfad nach unten gleiten und eine fließende Bewegung simulieren.

Tropfen.PNGTropfen.PNG

Die abschließende Komposition erfolgte in Adobe Premiere.

Screen-premiere.PNGScreen-premiere.PNG

Der Arbeitsaufwand war bei diesem Projekt wesentlich höher. Ich konnte sehr viel über die grundlegenden Funktionen von After Effects lernen.


3 - Realbild

Der dritte Erklärfilm ist ein Video-Tutorial dass mit Musik unterlegt ist. Zusätzlich sind wenige grafischen Elementen verwendet worden. Der Dreh verlief erfreulich gut und unkompliziert. Es dauerte jedoch etwas bis das Set stand. Gedreht wurde mit zwei Kameras. Eine Einstellung aus der Ich-Perspektive und eine Einstellung schräg von der Seite. In der Nachbereitung verwendete ich aber hauptsächlich das Material aus der Ich-Perspektive. Das Video ist 2:16 Sekunden lang und 1280 x 720pixel im Format. Das Musikstück wurde von Maxim Martin komponiert. Weitere Beteiligte waren Elina Bischel und Max Hefke.

Storyboard

Storyboard.pngStoryboard.png


Workflow

Premiere - After Effects - Premiere

Ich begann damit das Footage grob zu schneiden. Im nächsten Schritt reduzierte ich das Material auf die wesentlichen Szenen. Es war zudem nötig einige Szenen zu beschleunigen um eine passable Länge zu erreichen.

Cutting.PNGCutting.PNG

Durch Color-Gradient konnte ich die Bildqualität verbessern. Das Licht kommt besser zur Geltung und die Farben sind satter.

Color-grading.PNGColor-grading.PNG

Titel und Count-Down sind in After Effects entstanden. Der Count-Down ist über Keyframes gesteuert.

Screen-countdown.PNGScreen-countdown.PNG

Screen1.PNGScreen1.PNG

Fazit



Ich bin sehr froh den Kurs bei Prof. Dufke gemacht zu haben. Ich konnte sehr vieles mitnehmen. Der Arbeitsaufwand war hoch und es freut mich alle drei Filme abgeschlossen zu haben.

Der Kurs war gut geplant und strukturiert. Der Input wurde anschaulich vermittelt und gut portioniert. Die Aufgabenstellungen wurden verständlich kommuniziert. Der Prozess wurde produktiv begleitetet. Das Feedback war konstruktiv und zielführend.

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Klaus Dufke

Entstehungszeitraum

Wintersemester 2016 / 2017