Design & Web
Pixel-Animator
Zeichne Bild für Bild, sieh das vorherige durch die Zwiebelhaut blass durchscheinen und speichere das Ergebnis als GIF. Alles läuft in deinem Browser, auch das Erzeugen der Datei.
Einzelbilder 1 Bild
Abspielen
8 Bilder pro Sekunde
Die kleine Vorschau läuft dauerhaft mit, auch während du zeichnest. So siehst du sofort, ob die Bewegung sitzt.
Speichern
Die Bildgröße lässt sich jederzeit ändern. Der Inhalt bleibt links oben stehen und wird beschnitten oder ergänzt, statt verloren zu gehen.
Tastatur
B Stift, L Linie, R Rechteck
F Füllen, E Radierer, P Pipette
Strg + Z zurück, mit Umschalt wieder vor
N neues Bild, D Kopie, O Zwiebelhaut
← → Bild wechseln
Leertaste abspielen und anhalten
So entsteht eine Bewegung, die sitzt
Der übliche Anfängerfehler ist, jedes Einzelbild neu zu malen. Schneller und ruhiger wird es, wenn du das vorherige Bild verdoppelst und im Duplikat nur das veränderst, was sich wirklich bewegt. Der Rest bleibt dann Pixel für Pixel identisch, und genau das lässt eine Animation sauber statt zappelig wirken.
Denk in Eckpunkten statt in gleichmäßigen Schritten. Bei einem Sprung zeichnest du zuerst nur drei Bilder: tief in der Hocke, höchster Punkt, Landung. Erst wenn diese drei stimmen, kommen Zwischenschritte dazu. Weil Dinge beim Beschleunigen viel Strecke pro Bild zurücklegen und am Umkehrpunkt fast stehen, gehören die meisten Zwischenbilder an den Scheitelpunkt, nicht in die Mitte.
Bleib bei wenigen Farben. Drei Helligkeitsstufen je Material reichen fast immer: eine Grundfarbe, eine hellere für das Licht und eine dunklere für den Schatten. Eine schmale Palette zwingt zu klaren Formen, und in der Bewegung sieht man ohnehin keine feinen Abstufungen mehr.
Prüfe die Bewegung immer in Originalgröße. Die kleine Vorschau links neben der Abspieltaste zeigt genau das. Was dort funktioniert, funktioniert überall. Was nur auf der großen Zeichenfläche gut aussieht, ist meistens zu detailliert.
FAQ zum Pixel-Animator
Was ist die Zwiebelhaut und wofür brauche ich sie?
Die Zwiebelhaut zeigt das vorherige Einzelbild blass hinter dem aktuellen. So siehst du beim Zeichnen genau, wo die Bewegung herkommt, und kannst den nächsten Schritt sauber daran anschließen. Ohne sie muss man ständig hin und her springen und rät die Abstände. Die Stärke lässt sich einstellen, und auf Wunsch scheint auch das nachfolgende Bild durch. Das hilft, wenn du eine Zwischenphase in eine bereits fertige Bewegung einfügst.
Wie viele Einzelbilder braucht eine gute Animation?
Weniger als man denkt. Ein blinzelndes Gesicht kommt mit drei Bildern aus, eine wippende Leerlaufbewegung mit vier bis sechs, ein Laufzyklus klassisch mit acht. Bei zehn bis zwölf Bildern pro Sekunde wirkt Pixelgrafik lebendig, ohne dass jedes Bild einzeln auffällt. Fang lieber mit vier Bildern an und füge Zwischenschritte erst dort ein, wo die Bewegung ruckelt.
Warum ist mein GIF so winzig und wie mache ich es größer?
Weil ein Bild mit 32 mal 32 Pixeln eben genau so groß ist. Auf heutigen Bildschirmen ist das etwa ein Daumennagel. Stell dafür die Vergrößerung vor dem Speichern auf vier- oder achtfach. Das Werkzeug verdoppelt dabei jeden Bildpunkt hart, ohne weichzuzeichnen, die Kanten bleiben also scharf. Ein Bild mit 32 mal 32 Pixeln wird bei achtfacher Vergrößerung zu 256 mal 256 Pixeln.
Warum sind nur 256 Farben möglich?
Das ist eine Grenze des GIF-Formats selbst. Eine GIF-Datei speichert eine Farbtabelle mit höchstens 256 Einträgen und je Bildpunkt nur die Nummer darin. Für Pixelgrafik ist das kein Nachteil, sondern der Normalfall: Die meisten Paletten kommen mit 16 bis 32 Farben aus, und eine knappe Palette ist ein gestalterisches Mittel. Eine Farbe ist als durchsichtig reserviert, es bleiben also 255 sichtbare.
Bleibt meine Arbeit erhalten, wenn ich die Seite schließe?
Der aktuelle Stand wird im Speicher deines Browsers gesichert und beim nächsten Besuch wieder geladen. Verlass dich nicht darauf: In privaten Fenstern, beim Leeren der Browserdaten oder auf einem anderen Gerät ist er weg. Für alles, was dir wichtig ist, nutze die Schaltfläche Projekt speichern. Die erzeugt eine Datei, die du sichern und später wieder laden kannst.
Werden meine Bilder irgendwohin hochgeladen?
Nein. Gezeichnet, abgespielt und gespeichert wird vollständig in deinem Browser. Auch die GIF-Datei entsteht hier auf deinem Gerät, denn der Encoder ist Teil der Seite. Es wird nichts an einen Server gesendet.