Motion-Design

Paper-Cutout-Animation im Design

Ein 20-sekündiger Papierschnitt-Film macht aus einer handgeschriebenen Frage fünf Design-Demonstrationen und sammelt sie anschließend in einem Buch der Möglichkeiten.

OpenDesignCode-Adaption & Produktion
Offiziell
Paper-Cutout-Animation im Design20s · Motion-Design
Eine aufgeschlagene Papiermappe mit Illustrationen von Smartphone, Website, Diagramm, Poster und Video unter It starts with your idea.
Ein Standbild aus dem Motion Design

Designideen für

  • Paper-Cutout-Motion-DesignPlanen Sie haptische Szenen mit gerissenen Kanten, gemalten Texturen, geschichteten Figuren und gelenkigen Requisiten.
  • Kurze Produktgeschichten als FilmÜbersetzen Sie mehrere Fähigkeiten in eine kompakte Abfolge aus Frage, Demonstration, Antwort und Einladung.
  • Zeitbasierte Marken-AdaptionenÜbertragen Sie eine bestehende Motion-Referenz mit neuen Figuren, Ergebnissen, Tempo und Soundtrack.

Highlights der Animation

  • Fünf Aktionen in sechs SekundenAntippen, Entfalten, Umblättern, Ankleben und eine bewegte Timeline lassen jedes Ergebnis anders wirken.
  • Eine durchgehende Papier-AntwortFünf Arbeiten wandern in ein Buch, bevor es sich schließt, faltet, zurückfliegt und sich in den Händen des Mädchens öffnet.
  • Eine physische SchlusseinladungDie abschließende Frage erscheint auf einem linierten Zettel, den das Mädchen hebt und neben ihrem Fenster anpinnt.

Eine 20-sekündige Frage-und-Antwort-Geschichte

Der Film beginnt an einem nächtlichen Fenster, wo ein Mädchen schreibt: „OpenDesign, what can you design?“ Die Frage wird zum Papierflieger, überquert die Stadt und erreicht den OpenDesign-Buddy. Nach fünf kompakten Demonstrationen kehrt die Antwort als Buch zurück, das den Satz „It starts with your idea.“ trägt. Ein letzter angepinnter Zettel fragt das Publikum: „What will you design?“

Diese Struktur gibt der mittleren Sequenz eine praktische Aufgabe: Jedes Beispiel beantwortet die Eingangsfrage, während das Buch belegt, dass die Beispiele zu einer einzigen Antwort gehören. Der Preis dafür ist Tempo. Bei nur 20 Sekunden brauchen Aktionen eine kurze Vorbereitung, ein lesbares Ergebnis und eine sofortige Übergabe an das nächste Objekt.

Der zeitliche Erzählbogen des Films
ZeitSichtbarer MomentKonsequenz für das Design
0–5,5 sDas Mädchen entdeckt eine Idee, schreibt die Frage, faltet sie zu einem Flieger und schickt ihn über den Nachthimmel.Die Schrift muss lange genug lesbar bleiben, doch Falten und Flug brauchen weiterhin klare Silhouetten.
5,5–7 sDer OpenDesign-Buddy liest, denkt nach und antwortet mit einem Funken.Diese Pause trennt den Empfang der Frage von der Demonstration einer Antwort.
7–13 sPrototyp, Website, Präsentation, Poster und Motion-Film erscheinen nacheinander.Jede Fähigkeit erhält eine eigene physische Aktion, statt sich allein auf Beschriftungen zu verlassen.
13–17 sDie fünf Arbeiten wandern in ein Buch, das sich schließt, zurückreist, sich öffnet und die Antwort zeigt.Objektkontinuität verbindet die Demonstrationsmontage mit der Reaktion des Mädchens.
17–20 sSie umarmt das Buch, winkt und pinnt die abschließende Publikumsfrage an.Der Film wechselt vom Antworten an die Figur zur Einladung an die Zuschauenden.

Fünf Fähigkeiten unterschiedlich lesbar machen

Die Fähigkeiten-Montage vermeidet fünf statische Karten. Ein Prototyp verändert sich nach einem Tippen, eine Website entfaltet sich, eine Präsentation wechselt vom Deckblatt zu einem Diagramm, Poster überlappen sich, während eines festgeklebt wird, und ein Flieger bewegt sich durch einen Filmstreifen, während seine Timeline voranschreitet. Beschriftungen benennen die Kategorien, doch Kontakt und Zustandswechsel liefern den Beleg.

Der Präsentationsmoment zeigt ein geschichtetes Papierdeck, während der OpenDesign-Buddy nah genug bleibt, um an der Seitenaktion beteiligt zu wirken.
Der Präsentationsmoment zeigt ein geschichtetes Papierdeck, während der OpenDesign-Buddy nah genug bleibt, um an der Seitenaktion beteiligt zu wirken.

Prototyp antippen

Die Oberfläche braucht einen sichtbaren Zustand davor und danach, gefolgt von einer kurzen Haltephase. Ein schnelles Tippen ohne die veränderte Seite vermittelt Berührung, aber keine Interaktion.

Präsentationsseite umblättern

Das Deckblatt weicht einem Diagramm, dessen Balken nacheinander wachsen. Dieser zweite Zustand macht die Präsentation konkreter, erfordert aber mehr Bildschirmzeit als eine statische Folie.

Poster- und Filmaktionen

Klebeband schafft glaubwürdigen Kontakt für das Poster, während die Bewegung der Timeline den Filmstreifen von einer dekorativen Illustration unterscheidet. Beide Aktionen müssen in der Galerie-Vorschaugröße lesbar bleiben.

Papier als Material und als Übergang nutzen

Gerissene weiße Fasern, breite Gouache-Striche, geschichtete farbige Bögen und handgeschriebene Schrift halten den Film sichtbar handgemacht. Das Mädchen besteht aus einzeln gelenkigen Papierteilen, während der OpenDesign-Buddy die dunkle Logo-Kachel, den weißen Ring und den grünen Cursor behält. Das Bewegen ganzer Teile bewahrt ihre anhaftenden Texturen und vermeidet den glatten Eindruck von Effekten, die über einer flachen Illustration schweben.

Der stärkste Übergang beginnt mit fünf leeren Buchfächern. Jede Miniatur erscheint erst, wenn die zugehörige Arbeit landet; danach schließt sich der Einband und faltet sich zur zurückkehrenden Antwort. Das ist anspruchsvoller als eine Überblendung zwischen Szenen, da Platzierung, Überlappung und Timing stimmen müssen, bietet den Zuschauenden aber ein durchgehendes Objekt, dem sie folgen können.

Das zurückgegebene Buch zeigt Prototyp, Website, Präsentation, Poster und Motion-Film gemeinsam unter der Antwort „It starts with your idea.“
Das zurückgegebene Buch zeigt Prototyp, Website, Präsentation, Poster und Motion-Film gemeinsam unter der Antwort „It starts with your idea.“
  1. Das leere Ziel etablieren

    Zeigen Sie das Buch, bevor seine Fächer gefüllt sind, damit jede ankommende Arbeit eine sichtbare Veränderung bewirkt.

  2. Eine Arbeit nach der anderen einsammeln

    Bewegen Sie die fünf Ergebnisse nacheinander an getrennte Positionen; zeigen Sie kein Vorschaubild, bevor sein Ursprungsobjekt gelandet ist.

  3. Die Antwort durch die Rückkehr bewahren

    Schließen und falten Sie das Buch in die Reiseform, lassen Sie das Mädchen es dann fangen und wieder öffnen, ohne ihre Augen oder ihren Ausdruck zu verdecken.

Handkontakt und lesbare Haltephasen inszenieren

Der Film setzt auf Berührung, damit Papierrequisiten präsent wirken. Der Buddy lehnt sich zu einem Prototyp, schwebt neben dem Klebeband und schmiegt sich hinter das gesammelte Buch. Die Hände des Mädchens treffen das ankommende Buch auf Brusthöhe und halten dann den Kontakt zum letzten Zettel, bis er angepinnt ist. Kurze, runde Papierfäustlinge bleiben proportional zum Buddy, statt sich zu dünnen Armen zu strecken.

Die 16:9-Adaption erweitert Wände und Himmel um eine intime zentrale Komposition. Die zusätzliche Breite schafft Raum für Flüge und Beschriftungen, doch wichtige Gesten bleiben nahe der Mitte. Der letzte Zettel ist bewusst größer als ein realistischer Schnipsel, weil „What will you design?“ auch in der Miniaturansicht lesbar bleiben muss. Die vollständige Frage erhält eine Haltephase, nachdem die Hände des Mädchens zusammenkommen.

Papierschnitt-Hände falten das linierte Blatt auf einem holzstrukturierten Tisch zu einem Flieger, daneben liegen Buntstifte.
Papierschnitt-Hände falten das linierte Blatt auf einem holzstrukturierten Tisch zu einem Flieger, daneben liegen Buntstifte.

Quelle, Adaption und aktueller Umfang

Dieser offizielle OpenDesign-Code-Remake adaptiert die Papierhandwerk-Komposition eines veröffentlichten Motion-Stücks von @kevin_t_ngo. Die Referenz ist ein 28-sekündiger quadratischer Film; diese Adaption ist eine 20-sekündige 16:9-Geschichte mit dem OpenDesign-Buddy, überarbeiteten Fähigkeiten-Szenen und einem mitgelieferten Original-Soundtrack. Die Nennung dokumentiert die Referenz und impliziert keine Billigung durch deren Urheber.

Dies ist ein gerenderter Motion-Film: Seine Miniatur-Oberflächen sind Requisiten der Geschichte, keine funktionierenden Design-Anwendungen. Das Template stammt aus einem vorgeschlagenen OpenDesign-Video-Workflow; die Verfügbarkeit hängt von der installierten Version ab. Prüfen Sie die Nutzungsrechte für Referenzmaterial und mitgelieferte Assets getrennt.

So erstellen Sie eine Paper-Cutout-Animation in OpenDesign

  1. OpenDesign herunterladen und installieren

    Desktop-App herunterladen, installieren und Einrichtung abschließen. Ein Projekt für das Design anlegen.

    OpenDesign herunterladen
  2. Die Geschichte auf exakte Haltephasen und Aktionen abbilden

    Beginnen Sie mit einer Frage, einer kurzen Reihe gezeigter Ergebnisse, einer zurückkehrenden Antwort und einer abschließenden Einladung. Legen Sie Zeitbereiche fest, bevor Sie die Grafiken verfeinern. Planen Sie für jeden wichtigen Moment Vorbereitung, Aktion, Ergebnis und Haltephase ein; wird der Zeitplan zu eng, streichen Sie lieber eine Fähigkeit, statt jeden Zustand unlesbar kurz zu machen.

    Vorgeschlagener Prompt

    Erstelle eine 20-sekündige 16:9-Paper-Cutout-Animation. Beginne mit einem Mädchen, das an einem nächtlichen Fenster „What can you help me make?“ schreibt und den Zettel zu einem Flieger faltet. Zeige einen OpenDesign-Buddy, der mit fünf unterschiedlichen Ergebnissen antwortet: einem angetippten mobilen Prototyp, der seinen Zustand ändert, einer sich entfaltenden Website, einer Präsentationsseite, die zu einem Diagramm umblättert, einem festgeklebten Poster und einem Filmstreifen mit bewegter Timeline. Sammle die fünf Arbeiten nacheinander in zunächst leeren Buchfächern, schließe das Buch, gib es dem Mädchen zurück und ende damit, dass sie „What will you design?“ anpinnt. Verwende gerissene Papierkanten, gemalte Texturen, lesbare Haltephasen und sichtbaren Handkontakt. Behandle dies als gerenderten Film; deute nicht an, dass die Miniatur-Oberflächen funktionierende Produkte sind. Nutze ausschließlich bereitgestellte lokale Assets und liefere einen manuellen Frame-für-Frame-Fallback, falls das Video-Rendering nicht verfügbar ist.

  3. Wiederverwendbare Papierteile bauen

    Bereiten Sie texturierte Bögen, Figurenteile, Schriftzüge und Miniatur-Ergebniskarten einmal vor und animieren Sie ihre Transformationen auf einer einzigen Master-Timeline. Lassen Sie die Textur an jedem bewegten Teil haften. Testen Sie das Antippen des Prototyps, das Umblättern der Präsentation und das Einsammeln im Buch in normaler Wiedergabegeschwindigkeit und passen Sie dann Überlappungen an, damit Hände ihre Requisiten sichtbar berühren.

  4. Deterministische Frames und kleine Vorschauen prüfen

    Springen Sie vor und zurück, um zu bestätigen, dass dieselbe Zeit stets denselben Frame ergibt. Prüfen Sie den Anfang, die Fähigkeiten-Montage, das zurückgegebene Buch und den angepinnten Zettel in Desktop- und schmalen Vorschaugrößen. Bewahren Sie bei Verwendung das Timing des Soundtracks, lassen Sie aufgenommene Frames aber stumm. Da PR8619 nicht gemergt ist, behandeln Sie die verfügbare Projektumgebung als Einschränkung und nutzen Sie bei Bedarf einen manuellen Workflow mit gerenderten Frames.

  5. Exportieren und Share-Link erhalten

    Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.