Pixel-Art-Maker — Kostenloser Online-Pixel-Art-Editor & Generator

Ein Pixel-Art-Maker besteht aus vier Dingen: einem Raster, einem Stift, einem Radiergummi und einem Export-Button. Alles andere — Ebenen, Animation, Palettenverwaltung — ist Komfort, der auf dieser Schleife aufbaut. Der Editor hier läuft im Browser. Du wählst eine Canvas-Größe, zeichnest mit einem Ein-Pixel-Stift und lädst ein PNG herunter. Kein Installer, kein Konto, kein Upload-Schritt.

Die Entscheidung, die die meisten Werkzeuge verschweigen: Die Rastergröße lässt sich am schwersten rückgängig machen. Alles Weitere folgt daraus — wie viele Pixel ein Gesicht bekommt, ob ein Auge ein Pixel oder zwei groß ist, wie der Sprite eine 4-fache Hochskalierung in einer Game-Engine übersteht. Diese Seite behandelt den Editor selbst, die Raster-Mathematik, das Zeichnen im Vergleich zum Generieren eines Sprites, Paletten als Budget und wie du den gerade gezeichneten Charakter in eine 3D-Welt bringst, in der jemand herumlaufen kann.

Pixel-Art-Maker (Live-Canvas)

Der Canvas ist die Seite. Über der Falz bekommst du ein Bitmap-Raster fester Größe, einen Stift, der pro Klick ein Pixel schreibt, einen Radiergummi, der den transparenten Wert zurückschreibt, eine Palettenleiste und einen Export-Button, der ein PNG schreibt. Linksklick zeichnet, Rechtsklick oder eine Modifikatortaste radiert, und die Mitte des Canvas zeigt immer die echte Pixelgrenze statt einer skalierten Schätzung.

Verstehe den Unterschied zwischen Canvas-Größe und Ansichtsgröße, bevor du etwas zeichnest. Ein 32x32-Canvas, der mit 800x800 angezeigt wird, sind immer noch 32x32 Pixel an Daten. Zoom verändert, wie groß die Pixel gerendert werden, niemals, wie viele existieren. Beim Exportieren im gezoomten Zustand wird trotzdem eine 32x32-Datei geschrieben — das ist korrektes Verhalten und überrascht fast jeden beim ersten Mal.

Die eine Einstellung, die Anfänger falsch machen, ist eine Rastergröße, die nach der Zeichnung gewählt wird statt davor. Jemand skizziert einen Charakter auf einem 64x64-Canvas, mag ihn und will ihn dann in einem 16x16-Tile-Spiel verwenden. Das Herunterskalieren eines handgezeichneten 64x64-Sprites auf 16x16 per Resampling zerstört ihn: Zwei-Pixel-Details werden zu grauen Schlieren, Ein-Pixel-Umrisse werden zu zwei Pixel breiten grauen Linien, und die Farbanzahl vervielfacht sich, weil jede gemittelte Kante einen neuen Wert erfindet. Wenn du bereits in der falschen Größe gezeichnet hast, zeichne in der Zielgröße neu und nutze die alte Version als visuelle Referenz. Das ist schneller und sauberer als jedes Herunterskalieren und erzwingt die Vereinfachung, die das kleinere Raster tatsächlich braucht.

Später hochskalieren ist sicher. Später herunterskalieren ist es nicht. Wähle das kleinste Raster, das die Details fassen kann, die du brauchst, und behandle jedes Pixel, das du ausgibst, als ausgegeben.

Pixel-Art-Raster & Vorlagen

Wer nach einem Pixel-Art-Raster, einem Raster für Pixel-Art oder dem Zeichnen von Pixel-Art auf einem Raster sucht, meint dasselbe Objekt: ein begrenztes Feld aus Quadraten, bei dem ein Quadrat ein Pixel und eine Farbe ist. Das Raster ist keine Dekoration über dem Kunstwerk. Es ist der Auflösungsvertrag. Ein Kreis mit Radius 5 ist kein Kreis, sondern eine bestimmte Treppe aus einzelnen Pixeln, die du entweder von Hand setzt oder aus einer Vorlage übernimmst.

Vorlagen existieren, weil die ersten vier Reihen eines Kreises, eines isometrischen Würfels oder eines Charakters in 3/4-Ansicht mühsam aus dem Gedächtnis abzuleiten sind und es leicht ist, sie ein wenig falsch hinzubekommen. Eine Vorlage ist eine Ausgangsposition, kein fertiger Sprite. Füge die Form ein, entferne dann die Pixel, die nicht zu deinem Charakter gehören, und zeichne den Umriss neu, sodass die Lichtrichtung mit allem anderen übereinstimmt, was du gezeichnet hast.

Die Größe, die du wählst, ist ein in Pixeln ausgedrücktes Budget. Ein 8x8-Sprite gibt einem Gesicht ungefähr 4x4 zum Arbeiten, was keinen Raum für einen Umriss, ein Auge und einen Mund gleichzeitig lässt — du wählst zwei. Ein 16x16-Sprite fasst einen Ein-Pixel-Umriss und zwei Töne pro Material. Ein 32x32-Sprite hat endlich Raum für eine Lichtrichtung. Jenseits von 64x64 ist die Versuchung groß, Striche statt Pixel zu zeichnen, und die Strenge, die den Stil lesbar macht, beginnt zu verrinnen.

Nicht-quadratische Raster sind für Tiles wichtig. Ein 16x32-Canvas ist ein stehender Charakter in einem Top-Down-Spiel; ein 32x32-Canvas ist ein Tile. Halte diese beiden Kategorien in getrennten Dateien, denn ein Charakter-Sprite und ein Tileset-Tile haben unterschiedliche Ausrichtungsregeln, wenn sie die Engine erreichen.

Manche Leute bauen das Raster in einer Tabellenkalkulation, eine Zelle pro Pixel, füllen Zellen und zoomen heraus, um zu prüfen, ob die Form auf einen Blick lesbar ist. Es funktioniert, und es hat einen echten Vorteil: Du kannst einen 6x6-Augenblock kopieren und in jede Zelle eines Sprite-Sheets einfügen, ohne ihn neu zu zeichnen.

Der Fehlerfall ist der Export. Tabellenkalkulationen rendern Gitterlinien, Rahmen und Zellenabstände. Wenn du das Sheet per Screenshot aufnimmst und zuschneidest, erbst du eine ein Pixel dunkle Naht zwischen jedem Pixel und eine leicht falsche Farbe an jeder Zellenkante. Schalte zuerst Gitterlinien und Rahmen aus, stelle den Zoom auf ein exaktes ganzzahliges Vielfaches und schneide dann an der Pixelgrenze statt nach Augenmaß zu. Ein dedizierter Canvas vermeidet das ganze Problem, weshalb die Tabellenkalkulation ein gutes Planungswerkzeug und ein schlechtes Produktionswerkzeug ist.

Zeichnen vs. Generieren

Beide Methoden füllen denselben Canvas. Handzeichnen schreibt genau die Pixel, die du setzt. Generieren schreibt eine Menge von Pixeln, die eine Beschreibung erfüllt, und dann bearbeitest du sie. Keine ist eine Abkürzung an der anderen vorbei; sie beantworten unterschiedliche Fragen.

Handzeichnen gewinnt, wenn du die Silhouette bereits siehst. Wenn du die Form des Helms, den genauen Augenabstand oder weißt, wie dieser Charakter neben vier bestehenden Sprites ausgerichtet sein muss, ist das Setzen von Pixeln schneller, als sie zu beschreiben und das Ergebnis zu korrigieren. Generieren gewinnt beim Erkunden. Wenn du die Idee kennst — einen gepanzerten Frosch in Seitenansicht mit einem Schild — aber nicht die Silhouette, gibt dir die Generierung in einem Durchgang eine Ausgangsposition statt vierzig Entscheidungen. Agent Sprite Forge generiert Sprites aus einer Beschreibung direkt in ein Raster, das du weiter bearbeiten kannst, was zählt, weil die Ausgabe ein Ausgangspunkt und kein fertiges Ergebnis ist.

Generierte Sprite-Ausgaben sind in Vorschaugröße plausibel und beim 8-fachen Zoom unordentlich. Typische Schäden: einzelne verirrte Pixel, die ein Feld neben dem Umriss schweben, Brüche in einem eigentlich durchgehenden Ein-Pixel-Umriss, Anti-Aliasing-Kanten mit Farben, die nicht in deiner Palette sind, und der Sprite, der den Canvas-Rand berührt. Letzteres ist nicht kosmetisch — ein Sprite, der den gesamten Canvas einnimmt, hat keinen Rand, sodass Rotation, Schlagschatten oder jegliches Engine-Padding ihn abschneiden.

Die Korrektur ist mechanisch und dauert ein paar Minuten pro Sprite. Mach sie jedes Mal in derselben Reihenfolge, damit du nicht Probleme wieder einführst, die du bereits behoben hast.

Online, kostenlos, kein Download

Kostenlos deckt die komplette Zeichenschleife ab: Rasterauswahl, Stift, Radiergummi, Füllen, Palettenbearbeitung und PNG-Export. Es läuft nicht ab und es legt den Export nicht hinter ein Konto. Die Generierung ist der Teil mit praktischen Grenzen, weil das Erzeugen eines Sprites Rechenleistung kostet, anders als das Setzen eines Pixels. Zeichnen und Exportieren sind nicht limitiert.

Für das Zeichnen oder Exportieren ist kein Konto nötig. Nichts, was du zeichnest, wird hochgeladen; das Bild bleibt im Browser-Tab und verlässt ihn erst, wenn du es herunterlädst. Der Kompromiss der clientseitigen Bearbeitung ist derselbe wie bei jeder Desktop-App ohne Autosave: Wenn du den Tab schließt, ohne zu exportieren, ist die Zeichnung verloren. Exportiere, wenn der Sprite korrekt lesbar ist, nicht wenn er fertig ist. Zwischenversionen sind billig.

Der Export enthält genau die Pixel. Ein PNG in den nativen Maßen des Canvas, 8-Bit-RGBA, Alpha erhalten. Wenn du auf einem transparenten Hintergrund gezeichnet hast, bleibt der Hintergrund transparent — transparent ist ein Wert, keine Farbe, und er übersteht den Export. Wenn du auf einem gefüllten Hintergrund gezeichnet hast, ist diese Füllung in jedes Pixel hinter dem Charakter eingebacken. Wenn du eine Hintergrundfarbe willst, male eine bewusst. Wenn du den Sprite später über etwas legen willst, lass den Hintergrund leer und exportiere so, wie er ist.

Die ehrliche Trennung verläuft zwischen der Generierung und allem anderen. Bearbeitung, Farbarbeit und Dateiausgabe laufen lokal und verhalten sich identisch, egal ob du das Werkzeug einmal oder jeden Tag nutzt. Praktische Grenzen gelten für die Generierung, weshalb der nützliche Workflow darin besteht, eine grobe Form zu generieren und deine Zeit dann im Editor zu verbringen, wo nichts abgerechnet wird.

Nichts im Exportpfad fügt ein Wasserzeichen hinzu, tastet das Bild neu ab oder benennt die Datei nach den Canvas-Maßen um. Du bekommst genau das, was du gezeichnet hast.

Paletten & Stile

Farbe ist ein Budget, keine Vorliebe. Eine 16-Farben-Palette ist eine Einschränkung, die Wiederverwendung erzwingt, und Wiederverwendung ist das, was einen Sprite als ein einzelnes Objekt statt als einen Haufen Pixel lesbar macht. Wenn dasselbe Mittelbraun auf dem Lederriemen, dem Holzgriff und dem Stiefel erscheint, gruppiert das Auge sie, und der Charakter rückt in den Fokus. Eine 256-Farben-Palette ist genug Seil, um einen Sprite daran aufzuhängen: Sie lässt dich jedes Mal eine neue Farbe hinzufügen, wenn du auf ein Problem stößt, und das Ergebnis hat keine innere Logik. Zwei Sprites desselben Künstlers mit zwei unabhängigen 60-Farben-Paletten wirken, als stammten sie aus zwei verschiedenen Projekten.

Baue die Palette als Rampen statt als einzelne Farben. Ein brauchbares 16-Farben-Set sind fünf Rampen mit je drei Tönen plus eine eigene Umrissfarbe. Jede Rampe besteht aus einer Basis, einem Schatten und einem Highlight. Die Basis ist dein Mittelton. Der Schatten ist die Basis, dunkler gedrückt und in Richtung Blau oder Violett verschoben, nicht nur abgedunkelt — ein Schatten, der allein durch Verringern der Helligkeit entsteht, wirkt wie Schmutz. Das Highlight ist die Basis, heller gemacht und in Richtung Gelb verschoben. Bei einem 16x16-Sprite sollten Highlights ungefähr ein Zehntel der Pixel bedecken; mehr, und die Lichtquelle wirkt nicht mehr gerichtet.

Stil entsteht aus den Regeln, die du konsequent anwendest, nicht aus den Farben selbst. Eine gemeinsame Palette über einen ganzen Cast hinweg bedeutet, dass das Rot auf der Tunika des Spielers derselbe RGB-Wert ist wie das Rot auf dem Banner des Gegners und das Rot auf dem Lebens-Pickup. Das ist der ganze Trick. Es kostet nichts, ihn durchzusetzen, und es ist der Unterschied zwischen einem Spiel, das durchdacht wirkt, und einem Spiel, das zusammengesetzt wirkt.

Verwandle deinen Pixel-Charakter in eine 3D-Welt

Die Übergabe ist ein Satz: Exportiere den Sprite bei 100 Prozent, importiere ihn als Textur und platziere ihn in der Welt in einem ganzzahligen Vielfachen des Pixelrasters, damit die Pixel quadratisch bleiben.

Der 3D Game Builder nimmt diese Textur und legt sie auf eine Ebene, die immer zur Kamera zeigt, sodass ein 16x16-Charakter aus jedem Winkel als 16x16-Charakter lesbar ist, statt zu einem dünnen Streifen zu werden, wenn du seitwärts gehst. Kollision, Schwerkraft und eine Folgekamera sind unabhängig vom Sprite, was bedeutet, dass du das Artwork später austauschen kannst, ohne den Charakter-Controller anzufassen. Mini World ist der kleinste Ort, um das Ergebnis zu testen: eine kleine begehbare Fläche, ein Charakter, ein paar Objekte zum Anstoßen. The Cyclops' Island ist der größere Test, wo Geländehöhe und Sichtlinien deutlich machen, ob der Maßstab des Sprites relativ zur Umgebung stimmt.

Der Maßstab ist der Punkt, an dem die meisten ersten Versuche schiefgehen. Lege eine Umrechnung fest, bevor du etwas platzierst — ein Pixel gleich eine Welteinheit ist bei einem 16x16-Sprite zu klein und bei einem 128x128 zu groß. Wähle einen Faktor, sodass der Charakter ungefähr die Höhe einer Türöffnung erreicht, und behalte diesen Faktor für jeden Charakter im Projekt bei. Ein Cast, der mit zwei unterschiedlichen Pixel-zu-Welt-Verhältnissen gebaut wurde, sieht nebeneinander nie richtig aus.

Skalieren & Hochskalieren ohne Verwischung

Pixel-Art hat von Natur aus harte Kanten. Jeder Glättungsfilter — bilinear, bikubisch, Lanczos — arbeitet, indem er benachbarte Pixel mittelt, und das Mitteln zweier Palettenfarben erzeugt eine dritte Farbe, die nicht in deiner Palette ist. Diese dritte Farbe ist die Verwischung. Sie ist keine Rendering-Einstellung, die du später rückgängig machen kannst; sobald ein Bild neu abgetastet wurde, sind die ursprünglichen harten Kanten weg.

Skaliere nur in ganzzahligen Vielfachen hoch: 2x, 3x, 4x, 8x. Ein 16x16-Sprite bei 4x ist 64x64, und jedes Quellpixel wird zu einem sauberen 4x4-Block. Bei 2,5x werden einige Quellpixel 2 Pixel breit und andere 3, sodass der Sprite eine sichtbare Ungleichmäßigkeit über das Raster entwickelt — Umrisse, die an einer Stelle dick und an einer anderen dünn sind. Es gibt keine Möglichkeit, das im Nachhinein zu beheben, außer erneut in einem ganzzahligen Vielfachen zu exportieren.

Die Einstellung, die einen scharfen Sprite still ruiniert, ist der Resampling-Filter, den verschiedene Werkzeuge als Interpolation, Resample, Resample Image oder als Smooth-Kontrollkästchen neben Scale bezeichnen. Er ist in den meisten Editoren und Bildbetrachtern standardmäßig auf einen Glättungsmodus eingestellt und filtert das Bild jedes Mal neu, wenn du ihn verwendest. Stelle ihn auf Nearest Neighbour, bevor du die Abmessungen anfasst. Dieselbe Regel gilt außerhalb des Bildeditors: Eine in eine 3D-Engine importierte Textur braucht ihre Minification- und Magnification-Filter auf Nearest gesetzt, mit deaktivierten Mipmaps für Pixel-Texturen, sonst glättet die Engine sie, wenn sich die Kamera bewegt. Auf einer Webseite ist das Äquivalent die auf pixelated gesetzte image-rendering-Eigenschaft — andernfalls wendet ein Browser, der ein 32x32-PNG auf 96 Pixel Breite skaliert, seine eigene Glättung an und macht deine Arbeit im letzten Schritt zunichte.

Noch eines: Lass niemals zu, dass eine UI deinen Sprite prozentual skaliert. Ein Container, der das Bild auf 100 Prozent einer flexiblen Breite dimensioniert, landet je nach Fenster bei 2,3x oder 3,7x, und der Sprite sieht auf jedem Bildschirm anders aus. Rendere in der nativen Pixelgröße und skaliere per ganzzahligem Faktor, oder lege die Anzeigegröße explizit fest.

Betritt die Welt, zu der es gehört

Ein Sprite ist ein Charakter ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand anbietet: Nimm das Sheet, das du gerade gebaut hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ