Pixel-Art-Maker

Was ist ein Pixel-Art-Maker?

Ein Pixel-Art-Maker ist ein Zeichenwerkzeug auf Basis eines festen Rasters: Statt freier Striche setzt du einzelne Pixel, Quadrat für Quadrat. Genau diese Beschränkung macht den Reiz von Pixel Art aus: Spiele-Sprites, Retro-Icons, Avatare und Illustrationen im 8-Bit-Stil entstehen, indem jeder Pixel bewusst gewählt wird.

Dieser Editor bringt das klassische Sprite-Editor-Set mit: Stift, Radierer, Fülleimer und Pipette auf Rastern von 8x8 bis 64x64, dazu Frame-für-Frame-Animation mit Live-Vorschau. Exportiere das Ergebnis als gestochen scharfes PNG in beliebiger Größe, als animiertes GIF oder als Sprite-Sheet für die Game-Engine.

Und weil das hier Coddy ist, ist deine Zeichnung zugleich Code. Ein Klick verwandelt das Raster in ein 2D-Array in Python, einen JavaScript-Canvas-Schnipsel, CSS-Box-Shadow-Kunst, ein SVG oder eine CSV für die Tabellenkalkulation: eine spielerische Art zu sehen, dass Bilder nichts als Arrays aus Farbwerten sind.

Was du beim Pixeln lernst

• Ein Bild ist ein 2D-Array: Jeder Pixel ist ein Eintrag mit einem Farbwert. Der Code-Export zeigt deine Zeichnung genau so, Zeilen und Spalten aus Hex-Codes.
• Kleine Paletten wirken besser. Klassische Sprites nutzen 4 bis 32 Farben; die Beschränkung erzwingt saubere Formen und lesbare Silhouetten.
• Animation besteht nur aus Frames. Ein Blinzeln oder ein Laufzyklus sind eine Handvoll leicht unterschiedlicher Raster in Folge.

Pixel Art Schritt für Schritt

1. 1

   Rastergröße wählen

   Fang klein an: 16x16 oder 32x32. Kleine Raster erzwingen einfache, lesbare Formen; die meisten klassischen Sprites sind 16x16 oder 32x32. Die Größe lässt sich später ohne Verlust wechseln.

2. 2

   Silhouette anlegen

   Nutze den Stift für Umrisse und den Fülleimer für große Flächen. Zeichne erst die Grundform in einer Farbe, dann die Details. Rechtsklick (oder Radierer) löscht einen Pixel.

3. 3

   Mit kleiner Palette schattieren

   Wähle 2 bis 3 Töne pro Material: Grundton, Glanzlicht und Schatten. Die eingebaute Palette ist so sortiert, dass sich diese Farbrampen leicht finden lassen; die Pipette greift jede bereits gesetzte Farbe ab.

4. 4

   Animieren (optional)

   Frame duplizieren, ein paar Pixel verschieben, Play drücken. Zwei bis drei Frames reichen für ein Blinzeln, einen Hüpfer oder ein flackerndes Feuer.

5. 5

   Exportieren

   Lade ein PNG mit bis zu 32-facher Skalierung, ein animiertes GIF oder ein Sprite-Sheet mit allen Frames in einer Reihe herunter. Oder öffne das Code-Panel und kopiere dein Werk als Python, JavaScript, CSS, SVG oder CSV.

Pixel-Art-Schnellreferenz

Gängige Rastergrößen und Exportformate, und wann sie passen.

Pixel-Art-Beispiele zum Ausprobieren

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

Häufige Pixel-Art-Fehler

• Auf einem 64x64-Raster anfangen. Große Flächen kaschieren schwache Formen: Lerne auf 16x16, wo jeder Pixel eine Entscheidung ist.
• Zu viele Farben. Hat dein Sprite 40 Farben, hat er keinen Stil. Wähle pro Material eine kleine Farbrampe und bleib dabei.
• Exporte mit Weichzeichnung skalieren. Pixel Art braucht Nearest-Neighbor (dieses Tool erledigt das für dich), sonst wird alles matschig.

Pixel-Art-Maker FAQ