Pixelkunst in Vektoren umwandeln und scharfe Kanten erhalten

Du kannst Pixelkunst in Vektoren umwandeln, solltest aber zuerst entscheiden, ob die quadratischen Pixel sichtbar bleiben müssen. Um das ursprüngliche Aussehen zu erhalten, rekonstruiere das Bild als Raster oder Objektmosaik. Um aus dem Sprite eine glatte Illustration zu machen, vektorisiere die Konturen. Das sind unterschiedliche Ergebnisse, und ein allgemeines Nachzeichnungswerkzeug kann diese Entscheidung nicht für dich treffen.

Wenn du einen Spiel-Sprite in Scratch bearbeitest, ändert die Schaltfläche In Vektorgrafik umwandeln den Bearbeitungsmodus, ohne das Bitmap nachzuzeichnen. Nutze die Prüfungen zur Bearbeitbarkeit von Scratch-Kostümen, um zu entscheiden, ob du die Pixel behältst, einen Teil neu zeichnest oder nachgezeichnete SVG-Formen importierst. Vergleiche anschließend den Mittelpunkt des Ersatzkostüms mit dem Original.

Wenn du lediglich scharfe Pixelkunst auf einer Website oder in einem Spiel darstellen möchtest, brauchst du möglicherweise überhaupt kein SVG. Ein richtig dimensioniertes PNG mit Skalierung nach dem Prinzip des nächsten Nachbarn ist oft kleiner und originalgetreuer. Im Web bietet die image-rendering-Eigenschaft die Verhaltensweisen crisp-edges und pixelated, die harte Kanten erhalten sollen.

Drei Ergebnisse für drei unterschiedliche Aufgaben

Es geht weniger darum, welches Format „besser“ ist, als darum, was die Blöcke bedeuten. In Pixelkunst sind Treppenkanten häufig beabsichtigt. Sie zu glätten kann genauso zerstörerisch sein wie Unschärfe auf eine Linienzeichnung anzuwenden.

Raster erhalten und Konturen glätten sind unterschiedliche Aufgaben

Weg 1: Das Pixelraster exakt erhalten

Die wörtlichste Vektorumwandlung macht aus Rasterzellen Vektorrechtecke. Ein roter Pixel wird ein rotes Quadrat. Eine Reihe benachbarter roter Pixel kann als separate Quadrate bestehen bleiben oder zu einer größeren rechteckigen Form zusammengeführt werden, solange das die Silhouette nicht verändert.

Ermittle zuerst die tatsächlichen Rastermaße der Grafik. Ein mit 800 mal 800 Pixeln angezeigter Sprite kann als 32-mal-32-Raster begonnen haben, das mit Nächster-Nachbar-Skalierung vergrößert wurde. Du möchtest die 32-mal-32-Struktur reproduzieren, nicht die vergrößerten Anzeigemaße.

Workflow mit Illustrators Objektmosaik

Adobe dokumentiert einen integrierten Weg, ein eingebettetes Bitmap in ein Mosaik umzuwandeln:

1. Platziere die ursprüngliche Pixelkunst in Illustrator und bette sie ein.
2. Wähle das Bild und Objekt > Objektmosaik erstellen.
3. Stelle die Kachelanzahl passend zum ursprünglichen Pixelraster ein, wenn du es kennst.
4. Nutze quadratische Kacheln und Farbausgabe.
5. Behalte das Ausgangsrasterbild, bis du das Mosaik geprüft hast, und entferne oder verstecke es anschließend.
6. Vergleiche äußere Silhouette, innere Lücken und Palette bei starker Vergrößerung mit dem Original.

Adobes Dokumentation zum Erstellen von Objektmosaiken beschreibt den Befehl, die Option für quadratische Kacheln, die Farbeinstellung und den Umgang mit dem Ausgangsrasterbild. Der Pixelkunst-Workflow ist eine praktische Anwendung dieses dokumentierten Mosaikverhaltens.

Ein Objektmosaik kann strukturell originalgetreu und trotzdem ineffizient sein. Ein 64-mal-64-Sprite hat vor dem Zusammenführen 4.096 Zellen. Entferne vollständig transparente Zellen, kombiniere nach Möglichkeit benachbarte gleichfarbige Rechtecke und vermeide unsichtbare Objekte im fertigen SVG.

Weg 2: Ein SVG aus Vektorzellen ohne Illustrator erstellen

Du kannst denselben Dateityp mit einem pixelbewussten Skript oder einem spezialisierten Konverter erstellen. Das Prinzip zählt mehr als die App:

1. Lies die Quelle in ihrer nativen Rastergröße ein.
2. Ordne jedem nicht transparenten Pixel ein exaktes Vektorrechteck zu.
3. Erhalte die Palettenwerte ohne Kantenglättung.
4. Führe benachbarte Zellen nur zusammen, wenn die zusammengeführte Form dasselbe sichtbare Raster erzeugt.
5. Exportiere mit einem SVG-viewBox, das den nativen Rastermaßen entspricht.
6. Teste das SVG bei ganzzahligen und nicht ganzzahligen Anzeigegrößen.

Das Open-Source-Projekt vectorize-pixelart ist ein Beispiel für ein pixelspezifisches Konvertierungswerkzeug. Es zeigt auch eine allgemeine Grenze: Große oder komplexe Raster können umfangreiche SVG-Dateien erzeugen. Betrachte ein älteres Werkzeug zuerst als Forschungsmaterial. Prüfe Code und Wartungszustand, bevor du es in einen Produktionsworkflow aufnimmst.

Wenn du mit SVG-Markup vertraut bist, kannst du einen winzigen Sprite auch von Hand mit <rect>-Elementen rekonstruieren. Für ein 12-mal-12-Icon ist das vernünftig. Für eine detailreiche Szene ist es keine sinnvolle Nachmittagsbeschäftigung.

Weg 3: Die Formen bewusst glätten

Manchmal sind die Pixel ein Entwurf statt der Identität. Vielleicht soll die Figur, Blume oder das Icon zu einem sauberen Sticker, einer Druckgrafik oder einem Logo mit gerundeten Konturen werden.

Wenn du diese geglättete Interpretation bewusst möchtest, passt PerfectVector zum Konturweg. Lade die größte verfügbare, nach dem Nächster-Nachbar-Prinzip skalierte Version hoch und beurteile das Ergebnis als neue Illustration:

1. Entferne zuerst Kantenglättung. Weiche Randpixel erzeugen zusätzliche Farben und winzige Kantenformen.
2. Halte die Palette kontrolliert. Hat die Quelle acht Farben, sollte die Vektorisierung nicht aufgrund von Kompression oder Unschärfe Dutzende erfinden.
3. Prüfe treppenförmige Diagonalen. Entscheide, welche gerade Segmente und welche Kurven werden sollen.
4. Prüfe Löcher und ein Pixel breite Lücken. Kleine Öffnungen können sich schließen, wenn benachbarte Bereiche vereinfacht werden.
5. Prüfe die Knotenanzahl. Das Ziel des Glättens ist nicht, jede Quadratecke durch mehrere winzige Kurven zu ersetzen.
6. Teste in der Zielgröße. Eine gefällige glatte Kurve in Postergröße kann in Icongröße ein Gesicht oder eine Hand auslöschen.

Dieser Weg verändert die Grafik. Speichere das Ausgangs-PNG neben dem SVG, damit niemand die Vektorinterpretation für eine exakte Archivversion hält.

Vorbereitungsprobleme, die jeden Weg verschlechtern

Die Quelle wurde mit Glättung skaliert. Gehe zum nativen Sprite zurück oder skaliere ihn mit Nächster-Nachbar-Interpolation. Sobald neue gemischte Kantenfarben fest enthalten sind, lässt sich das ursprüngliche Raster schwerer wiederherstellen.

Die Datei ist ein JPG. Kompression erzeugt Farbblöcke und Ringing-Artefakte um jede harte Pixelkante. Nutze nach Möglichkeit das Original-PNG.

Der transparente Hintergrund wurde deckend weiß. Ein weißer Hintergrund kann zu Tausenden unerwünschter Zellen oder einer großen nachgezeichneten Form werden. Stelle vor der Umwandlung Transparenz wieder her und prüfe das Ergebnis auf einer kontrastierenden Arbeitsfläche. Unser Leitfaden zu transparenten SVG-Hintergründen behandelt diese Prüfung.

Die Grafik enthält halbtransparente Effekte. Leuchteffekte, Schatten und teilweise Deckkraft sind keine traditionellen Pixelzellen. Entscheide, ob du sie als Rastereffekte erhältst, auf deckende Farben reduzierst oder für die Vektorversion neu gestaltest.

Brauchst du Vektoren für eine Website?

Nicht unbedingt. Ist die Grafik ein Spiel-Sprite oder ein Interface-Icon, kann ein PNG die richtige Masterdatei bleiben. Nutze ein Asset in nativer Größe, skaliere nach Möglichkeit in ganzzahligen Vielfachen und stelle Browser oder Rendering-Engine auf pixelige oder Nächster-Nachbar-Interpolation ein.

Ein SVG-Raster hilft, wenn die Palette als Objekte bearbeitet werden muss, die Arbeit groß gedruckt werden soll oder das Ausgabesystem ausdrücklich Vektoren verlangt. Es verkleinert die Datei eines kleinen Bildschirmassets nicht automatisch. Ein Vektorobjekt pro Zelle kann mehr Speicherplatz beanspruchen als ein kompaktes PNG.

Das ist einer der Fälle, in denen „SVG skaliert unbegrenzt“ wahr, aber unvollständig ist. Die Grafik kann unbegrenzt skalieren und dabei aufwendig zu speichern, bearbeiten oder rendern werden. Unser Leitfaden PNG oder SVG erklärt die übergeordnete Formatentscheidung, und was Bildvektorisierung bedeutet erläutert, warum herkömmliches Nachzeichnen Formen gegenüber Pixelrastern bevorzugt.

Abschließende Vorabprüfung

Vergleiche vor der Übergabe die Datei mit dem Original in nativer Größe und in der vorgesehenen Ausgabegröße.

• Die Rastermaße entsprechen der Quelle.
• Keine durch Kantenglättung entstandenen Randfarben wurden eingeführt.
• Transparente Zellen bleiben transparent.
• Treppenförmige Silhouetten sind beim Erhaltungsweg intakt.
• Geglättete Kanten sind beim Konturweg beabsichtigt.
• Ein Pixel breite Lücken, Augen, Lichtpunkte und innere Löcher sind weiterhin richtig erkennbar.
• Wiederholte gleichfarbige Zellen werden nur dort vereinfacht, wo das Bild identisch bleibt.
• Das SVG bettet nicht versehentlich das ursprüngliche Rasterbild ein. Falls doch, kann es trotz Dateiendung weiterhin pixelig aussehen.

Der sauberste Workflow benennt seinen Kompromiss. Erhalte das Raster, wenn die Pixel die Kunst sind. Glätte die Konturen, wenn du eine neue Vektorinterpretation möchtest. Behalte das PNG, wenn Vektoren keine nützliche Kontrolle hinzufügen.

Quellen

1. Adobe Illustrator — Skizzen und Mosaike erstellen — Befehl Objektmosaik, quadratische Kacheln, Farbausgabe und Voraussetzung eines eingebetteten Rasterbilds.
2. MDN — CSS image-rendering — Darstellung nach dem Nächster-Nachbar-Prinzip für Pixelkunst im Web.
3. W3C — PNG-Spezifikation, dritte Ausgabe — PNGs verlustfreies Rastermodell und Verhalten des Alphakanals.
4. W3C — SVG-Grundformen — Rechteckgeometrie für SVGs mit exakt erhaltenen Rasterzellen.
5. W3C — SVG-Koordinatensysteme und viewBox — Abbildung eines nativen Rasterkoordinatensystems auf einen SVG-Viewport.

Wenn du glatte Konturen statt eines erhaltenen Rasters möchtest, wandle die Grafik mit PerfectVector um und vergleiche vor der Verwendung Silhouette, ein Pixel breite Lücken und kleine Details mit der Pixel-Masterdatei.