Differences

This shows you the differences between two versions of the page.

--- 04_10_21 [2021/09/12 10:55] – angelegt hardmood
+++ 04_10_21 [2021/10/04 17:59] – [Referate] hardmood
@@ Line 1: / Line 1: @@
 ====== GL 2 ======
 **Grundlagen der Gestaltung 2** \\
+Lineare Medien ≠ Non-lineare Medien: Storytelling, Animationstechniken, CGI
 Prof. Felix Beck, Julia Wand (Tutorin) \\
@@ Line 7: / Line 8: @@
 ----
+===== Prelude: Housekeeping & Organisatorisches =====
+  - Überblick zum heutigen Ablauf => Fragen?
+  - Anwesenheitsliste checken
+  - Exkursion zur [[https://ddw.nl/en/programme|Dutch Design Week]] am Freitag, den 22. Oktober
+  - Gedanken zum Digitalen Workbook, Beispiele von [[https://www.shillingtoneducation.com/blog/graphic-design-portfolio/|Graphic Design Portfolios]] (Workbook ≠ Portfolio)
+    - [[https://www.atrissi.com/blog/|Tarek Atrissi]] ([[https://www.atrissi.com/tribute-muhyeddine-al-labbad-arabic-revival-typeface/|Beispiel Blogeintrag]])
+    - Cargo Collective: [[https://cargo.site/Students|Cargo for students]], [[https://cargo.site/Templates|templates]], [[https://www.youtube.com/watch?v=BG7W61dm5Q0| 1 Std. Youtube Tutorial]] => Beispiel von [[https://vananhbui.com/acro|Van Anh Bui]]
+    - [[https://wordpress.com/de/|Wordpress Blogs]], [[https://andersnoren.se/themes/hamilton/|Beispiel theme]] [[http://sathyajith.info|Nisala Sathyajith]], [[https://harshinijk.com/about-me/|Harshini J. Karunaratne]]
+    - Portfolio CMS [[https://github.com/Indexhibit/indexhibit|Indexhibit]] => [[https://forum.indexhibit.org/tutorials/getting-started/installation/|How to start]]
+    - Open source flat-file CMS [[https://getgrav.org|GRAV]] => Hinweis auf [[lautleise_11#teilaufgabe_4documentation_nachbearbeitung_dokumentation|Vertiefungsprojekt]]
+    - Was ist Ihre Vorstellung zum //Digitalen Workbook//? Was würden Sie gerne machen? => Computerspiel, Online 3D Ausstellung, VR Experience…
+===== Referate =====
+| | vormittags| nachmittags |
+|Die Animations-Maschine //Zoetrope//                               |Lilly |Luisa         |
+|Die Technik des Dramas, Gustav Freytag ([[https://archive.org/details/dietechnikdesdr01freygoog/page/n2/mode/2up|Internet Archive]])   |Charlotte | Binayet         |
+  * 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
+  * [[https://www.youtube.com/watch?v=qh-4ZVLEWE4|Youtube Tutorial]] for [[https://shotdeck.com/welcome/home|Shotdeck]] (Research Tool: Datenbank von Bildern aus Filmen)
+  * [[wpde>Phenakistiskop]],
+  * [[wpde>Katsudō Shashin]],
+  * [[wpde>Praxinoskop]],
+  * CGI (Computer Generated Imagery) => //Visual Effects// erzeugt durch Computer Software
+  * Video zu den //12 Prinzipien der Animation// (=> [[https://www.youtube.com/watch?v=uXHnudwQde0|Youtube]])
+<WRAP center round box 50%> Pause 10 min</WRAP>
+===== Overture: Lineare Medien ≠ Non-lineare Medien =====
+  - 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.
+    - **Spannungskurve**((https://de.wikipedia.org/wiki/Spannungskurve))/Spannungsbogen im Storytelling (steigende Handlung/fallende Handlung)
+      - **Einführung**
+        - Setting: Zeit, Ort
+        - Protagonist (mit einem Ziel), Antagonist
+        - Einführung in Konfliktsituation (Konflikt, Problem = Hindernis für Zielsetzung)
+      - **Hauptteil**
+        - Reihe von Ereignissen, Aufbau der Spannung, Komplikationen, Hürden denen der Held ausgesetzt ist
+        - Emotionaler Höhepunkt: Zeitpunkt kurz vor der Erkenntnis, wie die Story enden könnte
+        - Abfall der Spannung
+      - **Schlussteil**
+        - 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//.
+<WRAP center round box 50%> Pause 10 min</WRAP>
+===== Besprechung der Ergebnisse der Hausaufgaben zu heute =====
+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 //[[radiogaga_02|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((https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen)))
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/kind.gif|Einzelbild-Animation]]
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/auto_normal.gif|Schlüsselbild-Animation]]
+    * [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/laufen.gif|Kombination aus Einzel- und Schlüsselbild-Animation]])
+    * Pfad Animation: [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_eck.gif|Beispiel 1]] (Ball über Eck), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/ball_pfad.gif|Beispiel 2]] (Pfad mithilfe einer Kurve), [[https://www.e-teaching.org/technik/aufbereitung/animation/grundlagen/dude_pfad.gif|Beispiel 3]] (Pfad und Rotation)
+Welche Tools zur Erzeugung von Animationen kennen Sie?
+  * [[https://www.adobe.com/de/products/animate.html|Adobe Animate]] zur Erstellung von HTML5- und Flash-Animationen ([[https://www.youtube.com/watch?v=-woaDyBXkyU|Kurs auf Youtube]] (Dauer ca. 3 Stunden))
+  * [[https://www.piskelapp.com|Piskel App]] – A free online editor for animated sprites & pixel art (https://www.piskelapp.com) \\ {{:piskel_animation_tool_ui_screenshot.png?nolink&400|}} => {{:piskel_animation_tool_animated_blink.gif?nolink|}}
+  * Photoshop Puppet Warp Tool => [[https://www.youtube.com/watch?v=DTuMvlsJQ3U|Youtube Tutorial]] \\ {{:photoshop_puppet_warp_screenshot.png?direct&200|}}
+  * [[https://www.adobe.com/de/products/character-animator.html?promoid=4SC9977P&mv=other|Adobe Character Animator]] \\ {{:adobe_character_screenshot_rig.png?nolink&182|}} {{:adobe_character_screenshot.jpg?nolink&400|}}
+  * Blender with Grease Pencil ([[https://www.youtube.com/watch?v=tOAPiPeGIWw|Youtube Tutorial]])
+  * [[https://www.adobe.com/de/products/aftereffects.html?promoid=2K4PCGG9&mv=other|After Effects]] (Special Effects und Animation)
+<WRAP center round box 50%> Pause 10 min</WRAP>
+===== Hausaufgaben (bis 11. Oktober) =====
+  - Lautleise 03: [[lautleise_03|Storyboard]]
+  - Lesen Sie folgende Literatur
+    - Ideen visualisieren: Scribble, Layout, Storyboard ((Ideen visualisieren: Scribble, Layout, Storyboard, Gregor Kristian, Nasrin Schlamp-Ülker, Verlag Hermann Schmidt, Mainz, 1998))
+    - Design is Storytelling ((Design is Storytelling, Ellen Lupton, Cooper Hewitt, 2017))