Grundlagen der Gestaltung 2
Lineare Medien ≠ Non-lineare Medien: Storytelling, Animationstechniken, CGI

Prof. Felix Beck, Julia Wand (Tutorin)
Montag, 4. Oktober 2021

1. Überblick zum heutigen Ablauf ⇒ Fragen?
2. Anwesenheitsliste checken
3. Gedanken zum Digitalen Workbook, Beispiele von Graphic Design Portfolios (Workbook ≠ Portfolio)
   1. Tarek Atrissi (Beispiel Blogeintrag)
   2. Cargo Collective: Cargo for students, templates, 1 Std. Youtube Tutorial ⇒ Beispiel von Van Anh Bui
   3. Wordpress Blogs, Beispiel theme Nisala Sathyajith, Harshini J. Karunaratne
   4. Portfolio CMS Indexhibit ⇒ How to start
   5. Open source flat-file CMS GRAV ⇒ Hinweis auf Vertiefungsprojekt
   6. Was ist Ihre Vorstellung zum Digitalen Workbook? Was würden Sie gerne machen? ⇒ Computerspiel, Online 3D Ausstellung, VR Experience…

• Feedback für Referent/in:
  • Vorbereitung des Referates (Die Inhalte des Referates sollten rechtzeitig (± fünf Tage vor der Präsentation) mit dem Lehrenden abgestimmt werden…)
  • Durchführung des Referates

• Youtube Tutorial for Shotdeck (Research Tool: Datenbank von Bildern aus Filmen)
• Phenakistiskop,
• Katsudō Shashin,
• Praxinoskop,
• CGI (Computer Generated Imagery) ⇒ Visual Effects erzeugt durch Computer Software

1. Einleitung zum heutigen Thema Lineare Medien ≠ Non-lineare Medien: Normalerweise versteht man unter einem linearen Medium einen direkt-ausgestrahlten und unvermittelbar-empfangbaren Inhalt (z.B. Fernsehen, Radio, Film der in einer Ausstellung autoaktiv abgespielt wird). Hier muss man zu einem bestimmten Zeitpunkt einschalten/da sein, um eine dargestellte Geschichte von Anfang bis zum Ende zu konsumieren und zu verstehen. Non-lineare Medien hingegen lassen eine zeitversetzte Nutzung zu; hier kann man zu jeder Zeit ein- und wieder aussteigen.
   1. Spannungskurve¹⁾/Spannungsbogen im Storytelling (steigende Handlung/fallende Handlung)
      1. Einführung
         1. Setting: Zeit, Ort
         2. Protagonist (mit einem Ziel), Antagonist
         3. Einführung in Konfliktsituation (Konflikt, Problem = Hindernis für Zielsetzung)
      2. Hauptteil
         1. Reihe von Ereignissen, Aufbau der Spannung, Komplikationen, Hürden denen der Held ausgesetzt ist
         2. Emotionaler Höhepunkt: Zeitpunkt kurz vor der Erkenntnis, wie die Story enden könnte
         3. Abfall der Spannung
      3. Schlussteil
         1. Ende mit Auflösung des Konfliktes/Lösung des Problems

              Höhepunkt 
              .    Retardierendes Moment 
             . .   .
            .   . . . abklingend
           .         . 
          . steigend   .  Schlussteil 
       . .                 . .

Eine solche Art von Spannungsbogen lässt sich auch in einer indirekteren Form für klassische Medien oder Produktdesign darstellen. Erklären Sie diesen Gedankengang zu einer objekthaften Dramaturgie.

Kurze Zusammenfassung: Welche Aspekte sollte ein Logo erfüllen? ⇒ Es weckt Aufmerksamkeit, hat Signalwirkung, es informiert, hat Erinnerungswert, ästhetischen Wert, eigenständig, langlebig. Es kann variiert und in unterschiedlichen Medien und Vorlagen verwendet werden.

Es gibt viele verschiedene Möglichkeiten und Techniken um Animationen zu erzeugen. Oftmals entstehen Animationen auch durch die Kombination verschiedener Prozesse und Werkzeuge. Präsentieren Sie Ihr Animiertes Gif und stellen Sie Ihren Erstellungsprozess vor.

• Was ist Ihre Grundidee?
• Worauf haben Sie den Fokus gelegt?
• Handelt es sich bei Ihrer Lösung um eine der folgenden Animationsarten? (folgende Beispiele entstammen der Webseite e-teaching.org²⁾)
  • Einzelbild-Animation
  • Schlüsselbild-Animation
  • Kombination aus Einzel- und Schlüsselbild-Animation)
  • Pfad Animation: Beispiel 1 (Ball über Eck), Beispiel 2 (Pfad mithilfe einer Kurve), Beispiel 3 (Pfad und Rotation)

Welche Tools zur Erzeugung von Animationen kennen Sie?

• Adobe Animate zur Erstellung von HTML5- und Flash-Animationen (Kurs auf Youtube (Dauer ca. 3 Stunden))
• Piskel App – A free online editor for animated sprites & pixel art (https://www.piskelapp.com)
  ⇒
• Photoshop Puppet Warp Tool ⇒ Youtube Tutorial
  
• Adobe Character Animator
  
• Blender with Grease Pencil (Youtube Tutorial)
• After Effects (Special Effects und Animation)