Isometrische Pixel Art für Anfänger: zeichne eine Klimaanlage

Isometrische Pixel Art zeichnet Objekte schräg, mit Linien, die für jeden Pixel nach oben zwei Pixel zur Seite gehen. Um ein isometrisches Objekt zu zeichnen, umreißt du eine Kiste mit diesen 2:1 Linien, füllst sie, schattierst die Seiten, die vom Licht weg zeigen, und setzt ein Glanzlicht auf die Kante, die zum Licht zeigt. Probier es unten mit einer kleinen Klimaanlage aus.

Dieses Sprite ist breit. Am Computer zeichnet es sich leichter, oder mit dem Handy quer.

Schritt 1

Farben für diesen Schritt
Tools
Vorlage

Fertigen Schritt zeigen
Zeitraffer aus Romans Kursvideo: dasselbe Bild in Aseprite gezeichnet, 45-mal schneller
Aus meinem Kursvideo: dasselbe Bild, vor der Kamera gezeichnet, 45-mal schneller. Auch auf unserem YouTube.

Die isometrische Linie

Isometrie ist mein Lieblingsgenre, und alles fängt mit einem einfachen Muster an. Eine isometrische Linie geht zwei Pixel zur Seite, dann einen nach oben, dann wieder zwei zur Seite, einen nach oben und so weiter. Eins, zwei, eins, zwei. Wenn du dich an die Regel für glatte Linien aus der Lektion zu Konturen erinnerst, ist es genau das: ein gleichmäßiger Rhythmus, damit die Linie gerade aussieht.

Bevor du irgendetwas anderes zeichnest, übe diese Linie. Zeichne erst kurze Stücke, dann längere, wenn du sicherer wirst. Dann bau einen Würfel: Zeichne ein Quadrat, ein zweites darunter, verbinde sie, radiere die inneren Kanten weg, damit der Würfel nicht durchsichtig ist, und gib jeder Seite einen eigenen Ton. Mach fünf oder zehn Würfel. Dein Kopf fühlt sich am Anfang verdreht an. Das ist normal und geht vorbei.

Schritt 1: Kontur

Graue isometrische Kontur einer Kiste mit einem runden Lüfterloch und Schlitzen an der Seite

Fang mit einer isometrischen Linie von 15 Pixeln und einer kurzen von 4 für die Seite an. Kopier sie, spiegle sie und setz sie oben drauf, um die Oberseite zu schließen, mit einem Pixel Platz an den Ecken. Kopier die Linien noch einmal 11 Pixel tiefer für die Unterseite, verbinde oben und unten und radiere die inneren Kanten weg.

Dann das Lüfterloch auf der Vorderseite: Such dir die zweite Stufe vom Rand, zähl drei Pixel ab und fang das Loch auf dem vierten an. Die Schlitze auf der Vorderseite und an der Seite setzt du genauso, durch Pixelzählen.

Schritt 2: Farben

Die Kiste der Klimaanlage, mit einem flachen Grau gefüllt

Füll die Kiste mit dem Hauptgrau. Ich lege hier gern jeden Schritt auf eine eigene Ebene: Konturen, Farben, Schattierung, Glanzlichter, Details. Du kannst aber auch alles auf einer Ebene machen.

Schritt 3: Schattierung

Die Klimaanlage mit schattierter rechter Seite, dunklem Lüfterloch und dunklen Schlitzen

Das Licht kommt von vorne oben. Also liegt die rechte Seite im Schatten, und auch die Oberseite bekommt einen leichten Schatten. Die Rückwand ist fast ganz dunkel, genauso wie das Innere des Lüfterlochs. Dunkle die Schlitze ab und gib dem Loch dann mit einem etwas helleren Grau ein bisschen Tiefe.

Schritte 4 und 5: Glanzlichter und Details

Die fertige isometrische Klimaanlage mit einer hellen Oberkante

Eine Linie im hellsten Grau entlang der oberen Vorderkante, wo das Licht auftrifft. Dann ein paar Pixel Textur in den seitlichen Schlitzen. Fertig.

Diese kleine Maschine ist ein Teil eines ganzen isometrischen Gebäudes im Kurs: Spielhallen, Balkone, Schilder, ein Dach. Jedes dieser Teile fängt als so eine Box an.