Ein flaches Sprite ist eine Form. Ein schattiertes Sprite ist ein Ding: ein runder Trank, ein schwerer Helm, ein weicher Schleim. Die Schattierung macht aus dem einen das andere – und genau hier fangen die meisten Einsteiger-Sprites an, matschig auszusehen.
Die beiden Kugeln oben bestehen aus exakt denselben fünf Farben. Der einzige Unterschied ist, wo die Farben sitzen. Links ist jeder Rand dunkel und die Mitte hell. Rechts gibt es eine Lichtquelle, und die Farben folgen ihr. Das ist die ganze Lektion in einem Bild – und dieses Tutorial nimmt sie Schritt für Schritt auseinander.
Du legst eine Lichtquelle fest, baust eine Farbrampe, die ihren Farbton verschiebt, statt nur dunkler zu werden, schattierst eine einfache Form und lernst dann, Pillow Shading an deinen eigenen Sprites zu erkennen – den häufigsten Schattierungsfehler in der Pixel Art.
Was du brauchst
- Einen Pixel-Art-Editor (ich arbeite mit Aseprite. Falls du neu dabei bist, hilft dir der Aseprite-Einstiegs-Guide.)
- Die Basics aus den Pixel Art Grundlagen – Raster, begrenzte Palette, Outlines
- Eine festgelegte Sprite-Größe. Falls du noch keine hast, hilft dir Die richtige Auflösung und Sprite-Größe
- 45 Minuten
Schritt 1: Eine Lichtquelle festlegen
Bevor du das erste Schattenpixel setzt, entscheidest du, woher das Licht kommt. Jede weitere Schattierungsentscheidung hängt daran: welche Seite das Glanzlicht bekommt, welche im Schatten liegt, wohin ein Schlagschatten fällt.
Die eine richtige Richtung gibt es nicht. Arne, der Künstler hinter dem Pixel-Art-Tutorial von androidarts, schreibt, dass er selbst Licht von vorn, seitlich und oben bevorzugt, weil es Formen gut beschreibt („describes form pretty nicely“). Farbiges Gegen- oder Kantenlicht hat für ihn seinen Platz, wenn eine Stimmung entstehen soll, etwa bei einem Porträt.
Für dein erstes Sprite ist Licht von oben und leicht von der Seite ein guter Start: Es zeigt das Volumen der meisten Formen deutlich und wirkt natürlich, weil Licht meistens von oben kommt.
Drei Tipps aus der Praxis:
- Markier sie. Setz einen kleinen Pfeil in eine Ecke deiner Leinwand oder auf eine eigene Ebene. Klingt albern, hält dich aber ehrlich, wenn du tief in den Details steckst.
- Ein Sprite, ein Licht. Lass den Kopf nicht von links und das Schwert von rechts beleuchtet sein.
- Denk ans Spiegeln. Wenn dein Spiel ein Sprite horizontal spiegelt, sobald die Figur in die andere Richtung läuft, spiegelt sich das Licht mit. Starkes Seitenlicht macht das sichtbar, Licht von oben und vorn fällt kaum auf.
Schritt 2: Die Form lesen, bevor du schattierst
Licht ergibt nur auf einer Form Sinn. Bevor du über Farben nachdenkst, zerlegst du dein Sprite deshalb in einfache Körper: Ein Kopf ist ungefähr eine Kugel, ein Körper ein Zylinder, eine Kiste ein Quader. Genau darum geht es in den Grundformen.
Pedro Medeiros (Saint11) benennt in seinem Shading-Tutorial die Zonen einer beleuchteten Kugel so:
- Main Light (Hauptlicht): die große Fläche, die dem Licht zugewandt ist
- Highlight (Glanzlicht): die hellste Stelle, wo die Oberfläche am direktesten zum Licht zeigt
- Terminator (Schattengrenze): die Linie, an der Licht in Schatten übergeht
- Bounce Light (Reflexlicht): etwas Licht, das die Umgebung in den Schatten zurückwirft
- Schatten: ein Schlagschatten auf dem Boden mit harter Kante und ein Eigenschatten auf dem Objekt mit weicher Kante
Auf einem 16-Pixel-Sprite brauchst du nicht alles davon. Aber wenn du die Zonen kennst, kannst du entscheiden, welche die Pixel wert sind. Bei kleinen Sprites reichen oft Hauptlicht, Schatten und ein winziges Glanzlicht.
Verschiedene Oberflächen fangen das Licht unterschiedlich ein. Eine Kugel hat eine weiche, allmähliche Schattengrenze. Ein Quader hat flache Seiten, und jede Seite ist überwiegend eine einzige Farbe – das betont auch Saint11. Wer das übersieht, macht aus einer Kiste ein Kissen.
Schritt 3: Eine Farbrampe mit Farbton-Verschiebung bauen
Eine Farbrampe ist eine Reihe von Farben von dunkel nach hell, mit der du ein Material schattierst. Drei bis fünf Stufen reichen für die meisten Sprites. Wie du diese Rampe baust, entscheidet, ob deine Schattierung lebendig oder matschig wirkt.
Der naheliegende Weg: Du nimmst deine Grundfarbe und mischst für die Schatten Schwarz, für die Lichter Weiß hinein. Genau davon rät Arne ab. In der Natur ändert sich der Farbton einer Farbe oft, wenn sie von hell nach dunkel geht. Eine Rampe von Schwarz über Pink zu Weiß kann deshalb matschig und künstlich aussehen („muddy and artificial“). Saint11 sagt dasselbe mit eigenen Worten: Wer schattiert, sollte nicht nur die Helligkeit ändern, sondern auch den Farbton.
Statt nur dunkler oder heller zu werden, verschiebst du also den Farbton entlang der Rampe. Arne nennt zwei konkrete Beispiele:
- Haut: ein gräuliches, warmes Violett im Schatten, ein orangener Mittelton, ein fast gelbliches Licht.
- Außenszenen: kältere, gräuliche Töne in den Schatten wegen des Himmels, Gelb in den Lichtern wegen des warmen Sonnenlichts.
So kannst du eine Rampe in der Praxis aufbauen:
- Grundfarbe wählen – den Mittelton, den man am meisten sieht.
- Schattenstufen: Mach jede Stufe dunkler und schieb den Farbton ein Stück Richtung kühlere Farbe (bei Außenszenen) oder Richtung Violett (bei Haut). Nimm dabei etwas Sättigung heraus.
- Lichtstufen: Mach jede Stufe heller und schieb den Farbton Richtung wärmere Farbe, meist Gelb.
- Stufen prüfen. Jede Farbe sollte sich deutlich von ihren Nachbarn unterscheiden. Sehen zwei fast gleich aus, leg sie zusammen.
Eine Warnung von Arne: Bau keine langen Rampen aus voll gesättigten Farben. Die werden schnell schrill.
Wenn du lieber mit einer erprobten Palette anfängst: In der Lospec-Palettenliste kannst du nach der Anzahl der Farben filtern. Nimm dir eine kleine Palette, sortier ihre Farben von dunkel nach hell und schau, wie sich der Farbton von Stufe zu Stufe ändert – so lernst du schnell, wie andere Künstlerinnen und Künstler ihre Farbtöne verschieben. Die Theorie zu Farbton, Sättigung und Helligkeit findest du in Farbtheorie für Spiele.
Schritt 4: Eine einfache Form schattieren
Jetzt setzt du alles an einem einfachen Objekt zusammen, etwa an einer Kugel, einem Apfel oder einer Trankflasche. Arbeite in dieser Reihenfolge:
- Flach füllen. Füll die ganze Silhouette mit deiner Grundfarbe. Noch keine Schattierung. Prüf die Silhouette – wenn sie flach nicht lesbar ist, rettet sie auch keine Schattierung.
- Schattenform. Mit dem Lichtpfeil im Blick malst du die Schattenseite in der nächstdunkleren Farbe. Denk an eine Form mit klarer Kante, nicht an eine weiche Wolke. Diese Kante ist deine Schattengrenze.
- Tiefster Schatten. Die dunkelste Farbe kommt nur dorthin, wo sich die Form am weitesten vom Licht abwendet – plus der Schlagschatten auf dem Boden, falls dein Sprite einen hat.
- Glanzlicht. Die hellste Farbe setzt du sparsam auf die Stelle, die zum Licht zeigt. Ein kleiner Pixelhaufen wirkt meist besser als ein langer Streifen.
- Optional: Reflexlicht. Ist dein Sprite groß genug, kann eine etwas hellere Kante im Schatten, gegenüber dem Licht, Volumen geben. Bei kleinen Sprites lässt du sie weg – dort wirkt sie oft wie Rauschen.
Zoom nach jedem Schritt auf 100 % heraus. Eine Schattierung, die bei 800 % großartig aussieht, kann in echter Größe zu Brei werden.
Schritt 5: Pillow Shading erkennen
Jetzt kommt der wichtigste Check. Arne beschreibt Pillow Shading so: Es kann ein bisschen wie ein Kissen aussehen, mit einem weichen, radialen Verlauf, der zur Mitte der Form hin heller wird („a soft radial gradient ramping up towards the center of the form“). Die Form wirkt dadurch langweilig, oder die Schattierung hat mit der Gestalt des Objekts nichts mehr zu tun.
Das ist genau die linke Kugel im Bild ganz oben. Jeder Rand ist dunkel, die Mitte ist hell, und nichts verrät, woher das Licht kommt. Jede Farbe folgt dem Umriss der Form, nicht dem Licht.
Warum passiert das? Weil es sich logisch anfühlt: Am Rand „hört die Form auf“, also wird es dort dunkel. Aber dem Licht ist der Umriss egal. Eine Kugel, die von oben links beleuchtet wird, hat oben links einen hellen Rand.
Der Test: Deck deinen Lichtpfeil ab und schau dir dein Sprite an. Erkennst du, woher das Licht kommt? Sitzt die hellste Stelle in der Mitte und zieht sich das Dunkel einmal ringsherum, dann ist es Pillow Shading.
Die Lösung: Arne rät, den Verlauf etwas Interessantes formen zu lassen – er soll die Form beschreiben. In der Praxis heißt das:
- Geh zurück zu deinem Lichtpfeil.
- Hell die Ränder auf, die dem Licht zugewandt sind. Sie dürfen den Umriss in deinem Mittelton oder sogar in deiner Lichtfarbe berühren.
- Schieb die dunkelsten Farben auf die Seite, die vom Licht abgewandt ist.
- Rück das Glanzlicht aus der Mitte heraus, in Richtung Licht.
Arne merkt außerdem an, dass flach wirkendes Kantenlicht oder ein Kantenschatten (Rim Light, Rim Shadow) eine Variante von Pillow Shading sein kann. Eine dünne helle Linie rund um die ganze Form löst das Problem also nicht, sie versteckt es nur.
Schritt 6: Bänder und Outlines aufräumen
Wenn das Licht sitzt, entscheiden zwei Details darüber, wie sauber das Ergebnis wirkt.
Banding. Arne beschreibt Banding als sichtbare Farbbänder, die den Blick auf die Grenzen zwischen den Farbflächen lenken. Oft entsteht es, wenn Farbstufen parallel und gleich breit nebeneinanderlaufen – das Auge liest dann Streifen statt einer Form. Saint11 empfiehlt, die Farbbänder zu stauchen, damit die Stufen schwerer zu sehen sind. Brich die Bänder auf: Variier ihre Breite und lass eine Farbe an manchen Stellen weiter in die Nachbarfarbe hineinreichen.
Dithering. Schachbrettmuster können zwei Farben mischen. Arne setzt Dithering sparsam ein und findet es am wirkungsvollsten, wenn es doppelt arbeitet – also einen Verlauf erzeugt und eine Textur zeigt. Auf einer glatten Kugel sehen schlichte Farbflächen meist sauberer aus.
Outlines. Eine schwarze Kontur rundherum arbeitet gegen deine Beleuchtung: Sie macht die beleuchtete Kante genauso dunkel wie die Schattenkante. Saint11 schlägt vor, statt Schwarz eine dunkle Farbe zu nehmen, die Kontur an hellen Stellen wegzulassen und sie die Schattierung unterstützen zu lassen – er nennt das Selective Outlining. Die Outline-Varianten selbst findest du in den Pixel Art Grundlagen.
Weniger Farben. Wenn du versucht bist, mehr Zwischentöne einzubauen, um einen Verlauf zu glätten, denk an Arnes Warnung: Das kann eine Falle sein, weil Pixel Art mit einer zurückhaltenden Palette oft besser aussieht („pixel art actually often looks better with a restrained palette“).
Typische Fehler
Pillow Shading. Dunkle Ränder ringsum, helle Mitte, keine Lichtrichtung. Hell die Ränder auf, die zum Licht zeigen, und rück das Glanzlicht in Richtung Licht.
Schwarz und Weiß untermischen. Rampen, die nur dunkler oder heller werden, wirken grau und flach. Verschieb den Farbton: kühler oder violetter in den Schatten, wärmer in den Lichtern.
Aus Versehen zwei Lichtquellen. Der Kopf von links beleuchtet, der Schild von rechts. Markier deine Lichtrichtung und prüf jedes Teil dagegen.
Zu viele Farben. Fünf Grüntöne mit kaum sichtbaren Unterschieden machen ein Sprite nicht weicher, sondern verschwommener. Leg Stufen zusammen, die sich ähneln.
Glanzlichter überall. Wenn alles glänzt, glänzt nichts. Ein Glanzlicht pro Form, auf der Seite zum Licht.
Schwarze Outlines auf der Lichtseite. Sie heben dein Licht wieder auf. Nimm eine dunkle Farbe aus deiner Rampe und hell die Kontur dort auf oder lass sie weg, wo das Licht auftrifft.
Schattieren, bevor die Silhouette steht. Schattierung bringt Volumen, keine Lesbarkeit. Ist die flache Silhouette nicht lesbar, behebst du das zuerst.
Kurzübersicht
- Eine Lichtquelle pro Sprite – mit einem Pfeil markieren
- Rampe: 3–5 Farben, Farbton unterwegs verschoben, kein reines Schwarz oder Weiß an den Enden
- Reihenfolge: flach füllen → Schattenform → tiefster Schatten → Glanzlicht → optional Reflexlicht
- Kissen-Test: Pfeil abdecken – erkennst du trotzdem, woher das Licht kommt?
- Aufräumen: Bänder aufbrechen, Dithering sparsam, selektive Outlines
Was du gelernt hast
- Warum eine einheitliche Lichtquelle vor jeder Schattierung kommt
- Wie du eine Form als einfache Körper liest und wo Licht und Schatten darauf fallen
- Wie du eine Farbrampe mit Farbton-Verschiebung baust, statt Schwarz und Weiß unterzumischen
- Wie du Pillow Shading erkennst und behebst
- Wie Banding, Dithering und Outlines das Ergebnis beeinflussen
Als Nächstes: Nimm das Sprite aus den Pixel Art Grundlagen, gib ihm eine Lichtquelle und eine Rampe mit Farbton-Verschiebung und mach den Kissen-Test. Und wenn sich deine Farben noch nicht richtig anfühlen, ist Farbtheorie für Spiele die nächste Station.
Quellen
- Arne (androidarts): Pixel Art Tutorial (abgerufen im November 2026)
- Pedro Medeiros (Saint11): Pixel Art Tutorials, besonders „Shading“, „Illumination Techniques“ und „Outlines“ (abgerufen im November 2026)
- Lospec: Palette List (abgerufen im November 2026)