Pixel-Art-Größen erklärt: 16x16, 32x32, 64x64 & 128x128 (kostenloser Leitfaden)

16x16-Pixel-Art ist ein Raster aus 256 Zellen: 16 Spalten, 16 Reihen, eine Farbe pro Zelle. Diese Zahl ist die Design-Vorgabe. Jede Markierung, die du setzt, ist eine Subtraktion von einem festen Budget, und das Budget steht fest, bevor du überhaupt etwas zeichnest.

Die Größe entscheidet über das Detail, bevor du einen einzigen Pixel zeichnest. Ein 16x16-Raster kann kein lesbares Gesicht aufnehmen. Ein 64x64-Raster kann keine Menschenmenge aufnehmen. Dieser Leitfaden behandelt die vier Größen, die den Großteil der Arbeit an Spielen, Icons und Hintergrundbildern ausmachen - 16x16, 32x32, 64x64 und 128x128 - mit der Zellenzahl, der typischen Verwendung, dem Fehlermuster und dem Farbbudget für jede. Er behandelt außerdem die beiden Rasterfamilien, die gemeint sind, wenn von einem "Pixel-Art-Raster" die Rede ist: Minecraft-Bauwerke aus Blöcken, bei denen die Einheit ein Block statt eines Pixels ist, und Tabellenkalkulationen, bei denen die Einheit eine Zelle ist.

Kurzantwort: Größe = Detailbudget

Eine Rastergröße ist eine Obergrenze dafür, wie viele unterschiedliche Markierungen du bekommst. 16x16 gibt dir 256 Zellen. 32x32 gibt dir 1.024. 64x64 gibt dir 4.096. 128x128 gibt dir 16.384. Das ist das gesamte Budget, und es ist aufgebraucht, sobald du eine Silhouette angelegt hast.

Die Folge ist, dass Detail nicht etwas ist, das du am Ende hinzufügst, sondern etwas, das das Raster von Anfang an erlaubt. Ein Auge kostet bei 16x16 2 bis 6 Zellen. Dasselbe Auge kann sich bei 64x64 eine Lidlinie, eine Iris, eine Pupille und ein einzelnes Glanzlicht leisten - 20 bis 40 Zellen. Dasselbe Merkmal, andere Kosten, weil das Raster den Nenner geändert hat.

Die Füllung konkurriert mit allem anderen. Ein Körper bei 16x16 verschlingt 60 bis 120 Zellen Volltonfarbe. Das lässt ungefähr 130 Zellen für Umriss, Gesicht, Hände, einen gehaltenen Gegenstand und eventuelle Innenschattierung übrig. Drei getrennte innere Formen überleben das nicht. Zwei schon, wenn sie sich berühren.

16x16: Figuren und Gegenstände

Mit 256 Zellen ist 16x16-Pixel-Art die kleinste Größe, die noch als Figur und nicht bloß als Symbol gelesen wird. Die Einschränkung ist die Silhouette. Wenn die äußere Kontur nicht für sich allein erkennbar ist, wird nichts, was du innerhalb des Rasters tust, das beheben, denn es gibt keinen Innenraum, um zu erklären, was die Form ist.

Die Arbeitsweise ist, alles zuerst in einer einzigen Volltonfarbe zu zeichnen und dann die Kontur zu lesen. Wenn eine Brustplatte und ein Arm zu einem Klumpen verschmelzen, ist die Pose falsch, nicht die Palette. Korrigiere es im Vollton-Durchgang, wo eine Änderung dich acht Zellen statt einer kompletten Neuanfertigung kostet.

16x16 passt außerdem natürlich zu Kacheln. Ein Kachelsatz wiederholt sich, sodass das Auge aufhört, einzelne Zellen zu prüfen, und beginnt, Muster und Rhythmus zu lesen. Das ist die eine Situation, in der ein so kleines Raster kein Kompromiss ist.

Ein Objekt, eine Pose, eine Idee pro Raster: ein Schwert, ein Trank, eine Münze, ein Fass, ein Schleim, ein Wegweiser, eine Wandkachel, ein Inventarplatz. Flache Gegenstände mit kräftigem Umriss und einer Akzentfarbe sind der optimale Bereich. Ein Schild funktioniert, weil die Form eine einzige abgerundete Platte ist; sobald du einen Riemen, einen Buckel und einen Rand als drei getrennte innere Formen hinzufügst, wirkt es nicht mehr.

Gesichter und Text. Ein Auge plus ein Mund sind 2 bis 4 Zellen vor jeder Schattierung, und in dieser Größe wird ein Mund als einzelner verirrter Pixel statt als Ausdruck gelesen. Alles mit zwei inneren Formen, die sich nicht berühren - ein Trank mit einer Glaslinie und einer Flüssigkeitslinie - zerfällt zu einem Fleck. Text unter etwa 5 Zellen Höhe ist unlesbar; verwende eine separate UI-Schrift, statt Buchstaben in das Raster zu zeichnen.

32x32: Spiel-Sprites

32x32 sind 1.024 Zellen, und es ist die Größe, in der die meisten 2D-Spiel-Sprites gezeichnet werden, weil sie eine lesbare Pose aufnimmt, ohne ein Porträt zu verlangen. Du kannst den Kopf vom Torso trennen, eine Waffe in eine Hand legen, zeigen, welches Bein vorn ist, und hast immer noch Zellen für einen zweistufigen Schatten auf dem Körper übrig.

Die Farbanzahl, die dazu passt: insgesamt 12 bis 16 Farben, und das schließt den Umriss ein. Eine praktikable Aufteilung ist eine Umrissfarbe, drei oder vier Rampen mit je drei Stufen (Grundton, Schatten, Glanzlicht), ein oder zwei Akzente und Transparenz. Zweistufiger Schatten bedeutet, dass eine Körperfarbe mindestens zweimal vorkommt - einmal beleuchtet, einmal schattiert. Wenn jede Farbe der Palette genau einmal vorkommt, hast du Rauschen gezeichnet, keine Form.

Der Fehler: Wenn ein 32x32-Sprite falsch aussieht, fügen die meisten eine Farbe hinzu. Das behebt nichts, denn der Fehler liegt fast immer in der Silhouette - eine Gliedmaße, die sich nicht vom Torso trennt, oder ein Kopf, der genau so breit ist wie die Schultern. Zeichne den Umriss in Volltonschwarz neu und sieh ihn dir an. Wenn die schwarze Form nicht erkennbar ist, wird keine Palette sie retten.

64x64: Icons und Porträts

64x64 sind 4.096 Zellen, und es ist die erste Größe auf dieser Liste, bei der ein Gesicht ein Gesicht und nicht bloß ein Symbol ist. Ein Auge bekommt jetzt 8 bis 20 Zellen: ein Augenweiß, eine Iris, eine Pupille, eine Lidlinie und ein Glanzlicht. Dieses Glanzlicht ist der Grund, warum 64x64-Porträts funktionieren und 32x32-Porträts nicht - bei 32x32 gibt es keine Zelle, die man dafür erübrigen könnte.

Was sich in dieser Größe ändert, ist, welcher Teil der Zeichnung die Lesbarkeit trägt. Bei 16x16 trägt sie der Umriss. Bei 64x64 trägt sie die Schattierung. Du zeichnest jetzt Form, also brauchst du Rampen: 3 bis 5 Stufen pro Material, und jedes Material bleibt auf seiner eigenen Rampe. Haut, die von derselben Lampe beleuchtet wird wie Stahl, wirkt nur dann stimmig, wenn die Stahlrampe einen höheren Kontrast hat als die Hautrampe. Metall liest sich als Metall wegen des Helligkeitssprungs, nicht wegen des Farbtons.

Wo es scheitert: Menschenmengen. 64x64 ist ein Motiv. Zwei Figuren, die sich das Raster teilen, bekommen je ungefähr 2.000 Zellen, was wieder die Probleme von 32x32 mit schlechterer Komposition ergibt. Beschränke 64x64 auf ein einziges Motiv und verwende die übrigen Zellen für einen Hintergrund mit bewusst niedrigem Kontrast, sodass sich das Motiv über den Helligkeitswert statt über die Farbe abhebt.

128x128: Hintergrundbilder und Szenen

128x128 sind 16.384 Zellen. In dieser Größe hört ein einzelner Sprite auf, das Motiv zu sein, und wird zu einem Objekt in einer Komposition. Eine Figur, die ein Drittel der Leinwand füllt, ist ungefähr 42x128 - etwa 5.300 Zellen - und alles andere im Raster ist Umgebung: Boden, Himmel, Architektur, Requisiten.

Der kontraintuitive Teil ist, dass ein großes Raster weniger Farben pro Objekt braucht, nicht mehr. Bei 16x16 gibst du vielleicht 12 Farben für eine Figur aus, weil alle 12 strukturelle Arbeit leisten. Bei 128x128 sind sechs Objekte mit je 12 Farben 72 Farben, die konkurrieren, und das Auge kann nicht erkennen, was im Vordergrund liegt. Szenenarbeit in dieser Größe hält jedes Objekt üblicherweise auf einer Rampe von 4 bis 6 Farben und trennt die Objekte über Helligkeitsbänder - dunkler Vordergrund, Mittelgrund, heller Himmel - statt über den Farbton.

Mechanische Einstellungen sind hier wichtiger als bei kleinen Größen. Zeichne bei 1x und zoome auf 2x oder 3x, niemals mit weichem Zoom. Wenn du für ein Hintergrundbild exportierst, skaliere nur mit ganzen Zahlen hoch - 2x, 3x, 4x. Ein 2,5-faches Hochskalieren erzeugt Pixel ungleichmäßiger Breite, und das Raster wirkt nicht mehr bewusst gesetzt.

Farbanzahl pro Größe

Die Regel, die viele überrascht: Je größer das Raster wird, desto kleiner wird die Palette pro Element. Kleine Raster erzwingen Wiederverwendung - eine Farbe dient als Umriss, Schatten und Haar - und genau diese Wiederverwendung lässt 16x16-Art stimmig wirken. Große Raster verleiten dich zu einer eigenen Farbe für jede Fläche, und das Ergebnis wirkt wie ein Foto mit heruntergedrehter Auflösung.

Die Zahl, auf die es ankommt, ist nicht die Gesamtgröße der Palette, sondern die Farben pro Element. Ein 32x32-Sprite mit 16 Paletteneinträgen über 4 Elemente ist stimmig. Eine 128x128-Szene mit insgesamt 24 Einträgen kann reich wirken, wenn diese Einträge nach Helligkeitswert zugewiesen - dunkel, mittel, hell - und über Objekte hinweg wiederverwendet werden.

Der mechanische Grund ist, dass Pixel-Art über den benachbarten Kontrast gelesen wird. Zwei benachbarte Zellen, die sich im Helligkeitswert unterscheiden, erzeugen eine Kante. Zwei benachbarte Zellen, die sich im Farbton unterscheiden, aber im Helligkeitswert übereinstimmen, erzeugen Brei. Eine Farbe hinzuzufügen, ohne den Helligkeitskontrast zu erhöhen, verbraucht einen Palettenplatz und bringt keine lesbare Form, weshalb "es wirkt flach" meist ein Helligkeitsproblem ist und kein Farbtonproblem.

Minecraft-Pixel-Art und Raster

Minecraft-Pixel-Art wird in Blöcken gemessen, nicht in Pixeln. Ein Block ist eine Zelle des Bildes. Ein 16x16-Sprite wird zu einer 16x16-Blockwand: 256 Blöcke, ein Bauwerk, das du an einem Abend fertigstellst. Derselbe Sprite bei 64x64 sind 4.096 Blöcke, ein anderes Projekt mit anderer Art von Einsatz.

Die Zuordnung ist wichtig, weil ein Block kein Pixel ist. Ein Pixel ist eine flache Farbe, die du wählst. Ein Block ist eine flache Farbe mit eingebackener Textur und Beleuchtung - Wolle und Beton mit derselben nominellen Farbe wirken auf Distanz nicht gleich, und unruhige Blocktexturen fügen Rauschen hinzu, das ein Pixel nie hätte. Deshalb braucht ein Foto eine höhere Blockzahl als eine Zeichnung: Ein Foto trägt Verläufe, und Verlauf kostet Zellen. Bei 32x32 wird ein Gesicht in Blöcken zu Matsch; bei 64x64 oder 128x128 überstehen die Formen das Texturrauschen.

Bauraster gegenüber Kunstraster ist eine eigene Unterscheidung. Ein Kunstraster ist per Definition flach: eine Zelle, eine Farbe, keine Tiefe. Ein Bauraster ist dreidimensional - du kannst Blöcke in jeder Höhe platzieren, und das Raster erscheint nur dort, wo du auf eine flache Ebene blickst. Das erzwingt eine Entscheidung, die kein Rastereditor je verlangt: Was kommt hinter das Bild. Eine Hintergrundwand aus einem Block mit geringer Sättigung lässt das Motiv lesbar werden; das Bild schweben zu lassen, sodass Gelände durch die Lücken scheint, wirkt wie Beschädigung.

Tabellenkalkulation und Google-Sheets-Pixel-Art

In einer Tabellenkalkulation ist eine Zelle ein Pixel. Das Raster ist alles, was das Sheet zulässt und was du bereit bist zu scrollen. Ein 32x32-Bild sind 1.024 Zellen. Ein 64x64-Bild sind 4.096. Ein 128x128-Bild sind 16.384 Zellen - darstellbar, aber mühsam von Hand einzugeben.

Die bedingte Formatierung ist die Palette. Du schreibst Regeln, die eine Zelle anhand ihres Wertes einfärben, und tippst dann einen Buchstaben oder eine Zahl in jede Zelle, um eine Farbe auszuwählen. Die Alternative ist manuelles Füllen, das einfacher einzurichten ist, dir aber keine Möglichkeit lässt, das ganze Werk durch Bearbeiten einer einzigen Regel umzufärben. Wenn du die Art überarbeiten willst, verwende Regeln. Wenn es ein Einzelstück ist, geht Füllen schneller.

Der Weg über die Tabellenkalkulation ist in zwei Fällen wirklich das richtige Werkzeug. Zusammenarbeit: Sheets lassen sich nativ teilen, mehrere Personen können gleichzeitig bearbeiten, und es gibt einen Änderungsverlauf - besser, als ein PNG hin- und herzuschicken. Datengesteuerte Raster: Eine Zellfarbe kann aus einer Formel berechnet werden, sodass das Werk auf eine Zahl reagieren kann, was kein Rastereditor tut. Für Animation ist es das falsche Werkzeug. Ein Sheet hat keine Einzelbilder, keine Zwiebelhaut und keine Zeitleiste. In einem Sheet zu animieren bedeutet, das Raster zu duplizieren und Bereiche auszutauschen, und nach etwa zwei Einzelbildern ist das langsamer als jeder dedizierte Editor.

Kostenlose Werkzeuge für jede Größe

Wähle danach, was du bereits hast, nicht nach der Funktionsliste. Wenn du ein Foto hast und eine Ausgangssilhouette brauchst, verwende den Konverter. Wenn du eine leere Seite und eine feste Größe hast, verwende den Maker. Wenn du keine Ahnung hast, was du zeichnen sollst, verwende den Generator. Alle liefern ein Raster, das du anderswo weiterbearbeiten kannst.

Jedes Werkzeug hat seine eigene Seite; dieser Abschnitt ist nur die Weiterleitung.

Sieh eine 16x16-Welt in 3D

Eine 16x16-Kachel sind 256 Zellen, und in einer 3D-Welt wird sie zu einer Textur. Texturen dieser Größe bleiben nur scharf, wenn du sie richtig filterst. In Three.js ausgedrückt: Setze magFilter und minFilter der Textur auf NearestFilter und schalte Mipmaps für Objekte aus, die du aus der Nähe scharf willst; lass Mipmaps für fernes Gelände an, sonst flimmert das Bodenraster, wenn sich die Kamera bewegt. Das ist der Kompromiss am unteren Ende der Spanne - Nearest-Filterung hält Pixel auf zwei Metern lesbar und erzeugt auf fünfzig Aliasing.

The Cyclops' Island läuft fast vollständig auf Kacheln im kleinen Raster: Bäume, Felsen, Küstenlinie, Requisiten und Gegenstände, jeder in 16x16 oder 32x32 gezeichnet und in der Szene wiederverwendet. Mini World verwendet denselben Ansatz mit geringerem Platzbedarf pro Objekt. Sprites kommen aus Agent Sprite Forge, werden in einen Atlas gepackt und vom 3D-Spiel-Builder als Objekte platziert, wo eine geschriebene Beschreibung zu einem spielbaren Layout wird.

Der Gewinn ist arithmetisch, nicht ästhetisch. Bei 16x16 verlierst du die Fähigkeit, ein bestimmtes Gesicht zu zeichnen, und gewinnst eine Kachel, die du dir zu wiederholen leisten kannst. 256 Zellen mal ein paar Dutzend Kacheln ergibt einen Ort. 16.384 Zellen mal ein paar Dutzend Kacheln ergibt ein Projekt, das niemand fertigstellt. Wenn du dir die Szene unten ansiehst, achte auf den Boden und die Requisiten statt auf den Himmel - der Boden ist der Ort, an dem das Raster sichtbar ist.

Lauf in die Welt hinein, zu der es gehört

Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: 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 einzigen geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ