Anleitung: Pixel-Art-Editor
- Wähle eine Leinwandgröße (16×16 und 32×32 sind gute Startpunkte) oder öffne eine PNG-, GIF- oder .piskel-Datei.
- Wähle eine Palette wie PICO-8 oder Endesga 32 und zeichne mit dem Stift (B). Rechtsklick malt mit der Sekundärfarbe, die standardmäßig transparent ist.
- Lege Ebenen für Lineart, Farbe und Schattierung an. Füge Frames für die Animation hinzu und aktiviere die Zwiebelhaut (K), um den vorherigen und nächsten Frame zu sehen.
- Drück Enter, um die Animation abzuspielen, passe die FPS an und prüfe die kleine Vorschau in 1×, 2× oder gekachelt.
- Öffne Export und lade ein PNG, ein Spritesheet mit JSON, ein animiertes GIF, ein SVG, ein ZIP mit Frames oder eine .piskel-Datei herunter.
Was du bekommst
- PNG des aktuellen Frames in 1× bis 16×
- Spritesheet-PNG mit JSON-Frameliste (beliebige Spaltenzahl)
- Animiertes GIF mit den FPS des Dokuments, Transparenz bleibt erhalten
- ZIP mit nummerierten Frame-PNGs
- SVG mit einem Pfad pro Farbe
- .piskel-Datei, die du hier oder in Piskel wieder öffnen kannst
Tipps aus der Spieleentwicklung damit
- Lass Pixel-perfekt (P) eingeschaltet, wenn du 1-px-Outlines zeichnest. Es entfernt die doppelten Eckpixel, die Freihandstriche hinterlassen.
- Shift-Klick mit dem Stift zieht eine gerade Linie vom letzten Punkt aus. Halte Shift beim Ziehen einer Linie, um sie in 45°-Schritten einrasten zu lassen, oder bei Rechteck/Ellipse für ein Quadrat/einen Kreis.
- Das Shading-Werkzeug (U) setzt ein Pixel auf die nächsthellere oder nächstdunklere Farbe deiner Palette, so schattierst du, ohne die Palette zu verlassen. Rechtsklick dunkelt ab.
- Wähle vor dem Zeichnen einen Bereich aus (S, oder W für eine Farbe), damit die Striche darin bleiben, oder vor dem Verschieben, um nur diese Pixel zu bewegen.
- Schalte Spiegeln X für Figuren und frontale Sprites ein und brich die Symmetrie am Ende von Hand, damit der Sprite nicht gestempelt aussieht.
- Nutze eine ausgeblendete „Skizze“-Ebene mit geringer Deckkraft unter deiner Lineart und lösche sie vor dem Export.
- Deine Arbeit wird automatisch in diesem Browser gespeichert. Sie wird nirgendwohin synchronisiert, exportiere also eine .piskel-Datei als Backup.
- Füge mit Strg+V ein Bild als neue Ebene ein – praktisch, um Referenzen abzupausen.
Anwendungsfälle
- Figuren, Items und Tiles für einen Game Jam zeichnen, ohne etwas zu installieren
- KI-generierte Sprites Pixel für Pixel aufräumen, bevor sie in die Engine kommen
- Idle-, Lauf- und Angriffszyklen animieren und ein Spritesheet für Godot, Unity oder GameMaker exportieren
- Kleine animierte GIFs und Emotes erstellen
- Piskel-Projekte auf einem Rechner bearbeiten, auf dem Piskel nicht installiert ist
FAQ
Ist dieser Pixel-Art-Editor kostenlos?
Ja. Alle Funktionen zum Zeichnen, Animieren, Importieren und Exportieren sind kostenlos, ohne Wasserzeichen. Der Editor läuft komplett in deinem Browser.
Wo wird meine Zeichnung gespeichert?
Im lokalen Speicher deines Browsers, nur auf diesem Gerät. Sie übersteht ein Neuladen der Seite, aber nicht das Löschen der Websitedaten oder einen Browserwechsel. Exportiere eine .piskel-Datei oder ein PNG, um eine Kopie zu behalten.
Kann ich Piskel-Dateien öffnen?
Ja. Öffne eine .piskel-Datei, und Ebenen, Frames und FPS werden übernommen. Du kannst auch wieder als .piskel exportieren.
Wie groß darf die Leinwand maximal sein?
512×512 Pixel. Pixel-Art hat meist 16 bis 128 Pixel pro Seite, und mit dieser Grenze bleibt das Zeichnen auch auf Handys und älteren Laptops flüssig.
Wie erstelle ich ein Spritesheet für meine Game-Engine?
Zeichne jeden Animations-Frame in der Timeline und wähle dann Export → Spritesheet. Stelle Spaltenzahl und Skalierung ein. Du bekommst ein PNG plus eine JSON-Datei mit Position und Dauer jedes Frames.
Funktioniert das auf Handy oder Tablet?
Ja. Zeichne mit einem Finger, zoome und verschiebe mit Pinch oder zwei Fingern. Für Detailarbeit sind Maus und Tastatur dank der Shortcuts trotzdem schneller.
Kann ich ein GIF oder ein Spritesheet importieren?
Ja. Ein GIF wird mit einem Frame pro GIF-Frame geöffnet. Wenn du ein PNG öffnest, das wie ein Spritesheet aussieht, bietet der Editor an, es anhand des erkannten Rasters in Frames aufzuteilen.