Zeichnung animieren: Frame für Frame eine Animation erstellen

Willst du deine Bilder zum Leben erwecken? In WigglyPaint kannst du ganz leicht eine Zeichnung animieren, indem du mehrere Bilder nacheinander malst. Diese Einzelbilder nennt man „Frames“. Jeder Frame ist ein kleines bisschen anders als der vorherige. Wenn WigglyPaint diese Bilder schnell hintereinander abspielt, beginnt deine Zeichnung sich zu bewegen.

Du zeichnest jeden Frame komplett selbst. WigglyPaint nutzt keine Künstliche Intelligenz (KI), um die Animation zu erstellen. Es wandelt auch keine fertigen Bilder oder Videos automatisch um. Diese Anleitung zeigt dir jeden Klick – vom ersten Strich bis zum fertigen GIF.

Was ist eine Frame-für-Frame-Animation?

Ein Frame ist einfach nur ein einzelnes Bild. Bei einer Frame-für-Frame-Animation nutzt du viele dieser Einzelbilder, um eine flüssige Bewegung zu erzeugen.

Ein einfaches Beispiel: Zeichne im ersten Frame ein Gesicht mit offenen Augen. Im nächsten Frame zeichnest du das Gesicht mit geschlossenen Augen. Wenn beide Frames nacheinander abgespielt werden, sieht es so aus, als würde das Gesicht blinzeln.

In WigglyPaint entsteht die Bewegung auf zwei Arten:

1. Die gezeichneten Linien wackeln von ganz allein (das ist der typische Wiggly-Effekt).
2. Das Frames-Panel spielt deine verschiedenen Zeichnungen in der richtigen Reihenfolge ab.

So kannst du eine Figur winken lassen, eine Blume zum Blühen bringen, einen Ball hüpfen lassen oder den Gesichtsausdruck eines Charakters verändern.

Was kannst du mit WigglyPaint machen?

WigglyPaint ist eine kostenlose Website, mit der du direkt im Browser eine Animation erstellen kannst. Du musst dafür kein Programm auf deinem Computer installieren.

Das kannst du tun:

• einen neuen Frame hinzufügen;
• einen Frame kopieren;
• einen Frame löschen;
• das vorherige Bild als hellgrauen Schatten sehen (Onion Skin);
• die Frames als Endlosschleife (Loop) abspielen;
• den Loop als GIF exportieren; und
• das fertige GIF mit der WigglyPaint Community teilen.

Das Tool ist super für kurze, witzige Kritzeleien, Sticker, lustige Reaktionen und einfache Bewegungstests. Es ist nicht für lange Filme oder riesige Projekte mit einer komplexen Zeitleiste gedacht.

Bevor du startest

• Setz dich für dieses Tutorial am besten an einen Computer. Auf einem großen Bildschirm siehst du alle Werkzeuge viel besser.
• Beginne mit einem einzigen Objekt und einer simplen Bewegung, wie einem blinzelnden Gesicht oder einem hüpfenden Punkt.
• Beschränke dich auf zwei oder drei Farben. Eine einfache Zeichnung lässt sich viel leichter animieren.
• Dein Bild muss nicht perfekt sein. Eine klare, erkennbare Bewegung ist wichtiger als perfekte Linien.

Schritt für Schritt eine Animation erstellen

1. Deine erste Zeichnung starten

• Klicken: Öffne WigglyPaint und wähle Click to start drawing.
• Du siehst: Die große Zeichenfläche und alle Werkzeuge.
• Als Nächstes: Wähle einen Pinsel und eine Farbe aus.

Zeichne etwas Großes und Einfaches. Ein Gesicht, ein Stern, eine Blume oder ein Ball sind tolle Motive für den Anfang.

2. Das Animations-Menü öffnen

• Klicken: Klicke unten im Editor auf die Leiste mit der Aufschrift Animation.
• Du siehst: Eine Reihe kleiner Frame-Bilder, einen Play-Button, einen Onion-Skin-Button (Geist-Symbol) und einen großen Plus-Button.
• Als Nächstes: Stelle sicher, dass der erste Frame ausgewählt ist.

Der Frame mit dem farbigen Rahmen ist das Bild, das du gerade bearbeitest. Klicke auf ein anderes kleines Bild, wenn du zu einem anderen Frame wechseln möchtest.

3. Dein erstes Bild zeichnen

• Tun: Zeichne die Startposition deines Objekts oder deiner Figur.
• Du siehst: Deine Zeichnung auf der großen Fläche und als kleines Vorschaubild im ersten Frame.
• Als Nächstes: Zeichne die Hauptform komplett fertig, bevor du einen neuen Frame hinzufügst.

Für ein blinzelndes Gesicht zeichnest du das Gesicht mit zwei offenen Augen. Für einen hüpfenden Ball zeichnest du den Ball weit oben auf der Zeichenfläche.

4. Bilder kopieren oder leere Frames hinzufügen

Wenn das nächste Bild sehr ähnlich aussehen soll, kopiere den aktuellen Frame. Danach radierst du nur den Teil weg, der sich bewegen soll, und zeichnest ihn neu.

• Klicken: Nutze das Kopieren-Symbol direkt neben dem kleinen Frame-Bild.
• Du siehst: Einen zweiten Frame mit exakt derselben Zeichnung.
• Als Nächstes: Verändere einen kleinen Teil, zum Beispiel die Augen, eine Hand oder die Position des Balls.

Nutze den großen Plus-Button, wenn du einen komplett leeren Frame brauchst. Ein leerer Frame ist praktisch, wenn das nächste Bild völlig anders aussehen wird.

5. Onion Skin (den Geister-Schatten) einschalten

Onion Skin zeigt dir das vorherige Bild als hellgrauen Schatten an. So siehst du genau, wo sich deine alte Zeichnung befand. Dieser graue Schatten ist im fertigen GIF später nicht zu sehen.

• Klicken: Klicke auf den Onion-Skin-Button (das kleine Geist-Symbol).
• Du siehst: Den vorherigen Frame in hellem Grau hinter deiner aktuellen Zeichnung.
• Als Nächstes: Zeichne die neue Position nah an der grauen Hilfslinie, damit die Bewegung flüssig wirkt.

Mache nur kleine Veränderungen zwischen den Frames für eine weiche, langsame Bewegung. Mache größere Veränderungen, wenn die Bewegung schnell aussehen soll.

6. Deine Animation testen

• Klicken: Klicke auf den dreieckigen Play-Button.
• Du siehst: Die Frames werden nacheinander abgespielt und wiederholen sich.
• Als Nächstes: Beobachte den Übergang vom letzten Frame zurück zum ersten Frame.

Wenn die Animation am Ende ruckelt oder springt, vergleiche das letzte Bild mit dem ersten Bild. Bewege die letzte Zeichnung etwas näher an die erste heran oder füge noch einen Frame dazwischen ein.

7. Ein Bild länger anzeigen

WigglyPaint hat aktuell noch keine Einstellung, um die Geschwindigkeit für jeden Frame einzeln anzupassen. Um ein Bild länger auf dem Bildschirm zu halten, musst du diesen Frame einfach kopieren.

• Tun: Wähle den Frame aus, der länger zu sehen sein soll, und kopiere ihn ein- oder mehrmals.
• Du siehst: Zwei oder mehr Frame-Bilder mit exakt derselben Zeichnung nebeneinander.
• Als Nächstes: Klicke auf Play und prüfe, ob die Pause nun lang genug wirkt.

Ein Beispiel: Kopiere den Frame mit den offenen Augen zwei- oder dreimal. Den Frame mit den geschlossenen Augen behältst du nur einmal. So hält das Gesicht die Augen länger offen und blinzelt nur ganz kurz.

Das ist ein einfacher Trick, um das Timing zu steuern, ohne komplizierte FPS-Einstellungen (Bilder pro Sekunde) lernen zu müssen.

8. Dein fertiges GIF speichern

• Klicken: Klicke auf Export, wenn dir deine Loop-Animation gefällt.
• Du siehst: Optionen, um dein Werk zu speichern oder zu teilen.
• Als Nächstes: Speichere die Animation als GIF oder teile sie mit der WigglyPaint Community.

Öffne das gespeicherte GIF auf deinem Gerät. Prüfe, ob die Zeichnung gut zu erkennen ist und ob der Loop flüssig läuft.

Dein erstes Projekt: Ein blinzelndes Gesicht

Ein blinzelndes Gesicht ist ein perfektes erstes Projekt, weil der größte Teil der Zeichnung sich gar nicht bewegt.

1. Zeichne ein Gesicht mit zwei offenen Augen.
2. Kopiere diesen Frame.
3. Radiere im neuen Frame die Augen weg und zeichne sie halb geschlossen.
4. Kopiere diesen Frame und zeichne die Augen nun komplett geschlossen.
5. Kopiere den Frame mit den halb geschlossenen Augen und schiebe ihn hinter den Frame mit den geschlossenen Augen.
6. Klicke auf Play. Die Reihenfolge ist nun: offen, halb zu, ganz zu, halb zu.
7. Kopiere den Frame mit den offenen Augen mehrmals, falls das Gesicht zu hektisch blinzelt.

Du kannst genau dieses Prinzip nutzen, um eine Blume erblühen zu lassen, einen Stern pulsieren zu lassen oder eine Figur atmen zu lassen.

Tipps für richtig coole Animationen

• Verändere immer nur ein Hauptteil auf einmal.
• Lass die Teile, die sich nicht bewegen sollen, exakt an der gleichen Stelle.
• Schalte Onion Skin ein, bevor du den nächsten Frame zeichnest.
• Klicke schon nach zwei oder drei Frames auf Play. Warte damit nicht bis zum Schluss.
• Kopiere einen Frame, wenn die Bewegung kurz pausieren soll.
• Nutze einfache Formen. So bleibt deine Zeichnung auch auf kleinen Bildschirmen gut erkennbar.

Hilfe, etwas klappt nicht! (Fehlerbehebung)

Ich kann das Animations-Menü nicht finden

Klicke zuerst auf Click to start drawing. Suche dann ganz unten im Editor nach der Leiste mit dem Wort Animation und klicke darauf, um die Frame-Steuerung zu öffnen.

Die Animation ist viel zu schnell

Kopiere den Frame, den man länger sehen soll. Zwei oder drei Kopien desselben Bildes erzeugen eine kurze Pause.

Die Zeichnung bewegt sich zu weit zwischen den Frames

Schalte Onion Skin ein. Nutze die graue Kopie des letzten Frames als Orientierung und zeichne das neue Bild etwas näher an das alte heran.

Der Loop springt am Ende

Vergleiche den allerletzten Frame mit dem allerersten Frame. Mache die beiden Zeichnungen ähnlicher oder füge noch ein Zwischenbild ein, um den Sprung abzufedern.

Ich sehe nur ein Bild, wenn ich auf Play drücke

Füge einen neuen Frame hinzu oder kopiere den ersten Frame. Verändere dann einen Teil des neuen Bildes. Eine Animation braucht mindestens zwei unterschiedliche Bilder, um eine Bewegung zu zeigen.

Das kann WigglyPaint aktuell

Funktion	Jetzt verfügbar?
Jeden Frame von Hand zeichnen	Ja
Frames hinzufügen, kopieren und löschen	Ja
Den letzten Frame als graue Hilfe sehen	Ja
Einen sich wiederholenden Loop abspielen	Ja
Eine GIF-Animation erstellen und exportieren	Ja
Mit der Community teilen	Ja
KI erstellt die Animation automatisch	Nein
Ein Bild oder Video in eine Animation umwandeln	Nein
Unterschiedliche Zeiten für jeden Frame einstellen	Noch nicht; kopiere stattdessen den Frame
FPS (Bilder pro Sekunde) ändern	Noch nicht
Als Video exportieren	Noch nicht
Frames in der mobilen App bearbeiten	Diese Anleitung gilt für die Web-Version

FAQ: Häufige Fragen

Wie kann ich eine Animation erstellen?

Zeichne das erste Bild, kopiere es oder füge einen neuen Frame hinzu und verändere einen Teil der neuen Zeichnung. Füge bei Bedarf weitere Frames hinzu. Klicke auf Play, um die Bewegung zu prüfen, und exportiere den Loop am Ende als GIF.

Ist WigglyPaint ein kostenloses Tool?

Ja, WigglyPaint ist ein kostenloses Zeichen- und Animations-Tool, das direkt in deinem Webbrowser läuft. Du kannst eine kurze Frame-für-Frame-Animation erstellen, ohne eine App installieren zu müssen.

Muss ich eine Software herunterladen, um eine Zeichnung zu animieren?

Nein. Du zeichnest und animierst direkt auf der WigglyPaint Website. Wenn du fertig bist, lädst du deine Animation einfach als GIF-Datei herunter.

Kann ich eine Vorlage oder Referenz nutzen?

Ja. Die Onion Skin Funktion zeigt dir den vorherigen Frame in hellem Grau an. Nutze diese graue Zeichnung als Referenz, wenn du das nächste Bild malst.

Nutzt WigglyPaint KI, um die Animation zu erstellen?

Nein. Du zeichnest jeden Frame komplett selbst. WigglyPaint bietet dir animierte Pinsel, Frame-Steuerung, Onion Skin, eine Loop-Vorschau und den GIF-Export.

Wie viele Frames braucht ein Anfänger?

Starte mit drei bis fünf verschiedenen Frames. Das reicht völlig aus für ein Blinzeln, ein kleines Hüpfen oder einen anderen einfachen Loop.

Kann ich die Geschwindigkeit der Animation ändern?

Es gibt aktuell noch keine Steuerung für FPS oder die Dauer einzelner Frames. Kopiere einfach einen Frame, um dieses Bild länger auf dem Bildschirm anzuzeigen.

Wiederholt sich die Animation von selbst?

Ja. Die Vorschau wiederholt die Frames als Endlosschleife. So kannst du den Übergang vom letzten Bild zurück zum ersten Bild perfekt überprüfen.

Welches Format wird exportiert?

WigglyPaint exportiert deine animierte Zeichnung als GIF. Dieser Frame-Workflow exportiert keine Videodateien.

Erstelle jetzt deine erste animierte Zeichnung

Starte mit drei Frames und einer kleinen Veränderung. Zeichne ein Gesicht, kopiere es, verändere die Augen und klicke auf Play. Wenn das klappt, füge einen weiteren Frame hinzu oder kopiere ein Bild, um das Timing zu verbessern.