Isometrische Pixel-Art

Exzellenter Artikel
von christian | 4 | 27716 Aufrufe

Anzeige Hier werben

Bild zu Isometrische Pixel-Art

Dieser Artikel gibt einen Einblick in die Welt des Pixelns und hilft bei den ersten Schritten. Nach dem Lesen wirst du zwar kein Meister der Pixel-Kunst sein, aber mit ein wenig Übung sollten dir schon nach kurzer Zeit und mit einfachen Mitteln ansehnliche Werke gelingen. Das wichtigste beim Pixeln ist jedoch Geduld! Die obige Grafik wurde von mir erstellt und soll ein kleiner Anreiz für dich sein...

Isometrische Darstellung

Bild zu Isometrische Pixel-Art

Isometrie [griech. isometría "gleiches Maß"] bedeutet das alle Seiten im gleichen Maßstab abgebildet werden. Das heißt 1m wird auf X- ,Y- sowie Z-Achse gleich lang dargestellt. X- und Y-Achse bilden einen 30° Winkel zur Horizontalen.

Besonderheiten bei Pixel-Art

Bei Pixel-Art beträgt der Winkel anstatt 30° ca. 26,565°. Auf die mathematischen Hintergründe möchte ich an dieser Stelle verzichten. Dieser Winkel ergibt sich weil nur so saubere und klare Linien möglich sind ohne Anti-Aliasing zu verwenden. Aber dazu später mehr!

Verwendung

Bild zu Isometrische Pixel-Art
Screenshot von Rollercoaster Tycoon 2

Die isometrische Darstellung von Pixel-Art wurde häufig in älteren PC/Konsolen Spielen verwendet um den Rechenaufwand sowie die Entwicklungskosten gering zu halten und trotzdem die Illusion von 3D zu bieten. Bekannte Spiele sind unter anderem Age Of Empires I/II, Rollercoaster Tycoon 1/2 und Sim City. Heutzutage wird jedoch meistens "echtes" 3D bevorzugt, da es meist realistischer wirkt und der grafische Arbeitsaufwand geringer ist. Der höhere Rechenaufwand ist aufgrund immer leistungsfähigerer PCs vernachlässigbar. Isometrische Pixel-Art findet nun vorrangig in Browsergames oder als Kunstform Verwendung.

Benötigte Programme

Zum Pixeln eignet sich so ziemlich jedes Programm. Einige bieten extra Funktionen die einem die Arbeit erheblich vereinfachen. Microsoft Paint welches mit Windows installiert wird reicht zum Pixeln aus. Jedoch unterstützt es weder Ebenen noch Transparenz. Kostenlose Alternativen zu dem leider nicht sehr günstigen Photoshop sind Gimp (auch für Linux) und Paint.NET.

Pixeln mit Photoshop

Ich möchte hier nur kurz auf das wichtigste eingehen und nützliche Funktion vorstellen.

Auf Weichzeichner, Scharfzeichner und den Wischfinger sollte unbedingt verzichtet werden!

Wichtige Werkzeuge

Buntstift

Bei gedrückter Alt-Taste kann man schnell mit der Pipette eine Farbe auswählen. Lässt man die Taste los, hat man wieder das Buntstift-Werkzeug.

Bild zu Isometrische Pixel-Art
Buntstift (B)

Das Buntstift-Werkzeug ist wohl das wichtigste Werkzeug. Mit ihm kann man einzelne Pixel setzten. Den Hauptdurchmesser stellt man auf 1 Pixel. Den Modus auf "Normal" und die Deckkraft auf 100 %.

Bild zu Isometrische Pixel-Art
Zauberstab
Bild zu Isometrische Pixel-Art
Zauberstab (W)

Mit dem Zauberstab kann man Flächen auswählen welche aus einer Farbe bestehen. Die Toleranz setzt man am Besten auf 0. Setzt man das Häkchen bei "Benachbart" werden nur aneinander angrenzende Pixel ausgewählt. Das Häkchen bei "Glätten" entfernen.

Bild zu Isometrische Pixel-Art
Radiergummi
Bild zu Isometrische Pixel-Art
Radiergummi (E)

Zu diesem Werkzeug muss ich wohl nicht viele Worte verlieren. Hier stellt man am besten den "Buntstift" Modus ein. Den Hauptdurchmesser stellt man je nach Bedarf ein. Die Deckkraft setzt man wieder auf 100%

Bild zu Isometrische Pixel-Art
Füllwerkzeug
Bild zu Isometrische Pixel-Art
Füllwerkzeug (G)

Mit dem Füllwerkzeug kann man Flächen mit einer Farbe füllen. Die Toleranz setzt man auf 0. Deckkraft auf 100%. Das Häckchen bei "Glätten" entfernen und bei "Benachbart" setzen. Das Verlaufswerkeug sollte man nicht benutzen!

Bild zu Isometrische Pixel-Art
Zoomwerkzeug
Bild zu Isometrische Pixel-Art
Zoom (Z)

Mit dem Zoomwerkzeug kann man die Ansicht vergrößern oder verkleinern. Bei Pixel-Art arbeitet man häufig in sehr hohen Zoomstufen. Mit einem Klick auf "Tatsächliche Größe" bekommt man wieder die normale Ansicht.

Auswahlrechteck

Hält man die Strg - Taste gedrückt wechselt man zu dem Verschieben Werkzeug und kann den ausgewählten Bereich verschieben.

Bild zu Isometrische Pixel-Art
Auswahl (M)

Mit dem Auswahlrechteck kann man einen Bereich auswählen um ihn auszuschneiden, zu kopieren oder zu verschieben.

Pinselvorlagen (Brushes)

Eine weitere nützliche Funktion welche einem das Pixeln erheblich vereinfachen kann. Möchte man z.B. eine längere isometrische Linie zeichnen braucht man nicht jeden Pixel einzeln setzen oder Copy&Paste verwenden. Und das funktioniert wie folgt:

Bild zu Isometrische Pixel-Art
1.0
Bild zu Isometrische Pixel-Art
1.1
Bild zu Isometrische Pixel-Art
1.2

Man zeichnet als Erstes eine kurze isometrische Linie. Diese wählt man anschließend aus (Grafik 1.0). Dann geht man im Menü auf Bearbeiten->Pinselvorgabe festlegen. Es erscheint ein Fenster in dem man einen Namen festlegen kann (Grafik 1.1).

Nach einem Klick auf Ok kann man die neue Pinselvorlage verwenden. Dazu wählt man den Buntstift aus. Und klickt auf das Kästchen neben "Pinsel:" oben in der Einstellungsleiste. Dann öffnet sich ein Einstellungsfenster. Unten sucht man nun den neu erstellten Pinsel. (Grafik 1.2). Jetzt kann man bequem und einfach isometrische Linien zeichnen. Natürlich ist diese Methode auf jede beliebige andere Form übertragbar.

Dateiformate

Die folgenden Dateiformate können für Pixel-Art verwendet werden:

Bild zu Isometrische Pixel-Art
Original / JPG
  • BMP Nicht empfehlenswert, da keine Kompression und auch keine Transparenz
  • PNG keine Animation, Halbtransparenz möglich
  • GIF max. 256 Farben, keine Halbtransparenz

JPEG Dateien verwenden eine nicht verlustfreie Kompression. Was passiert wenn man Pixel-Art als JPEG speichert zeigt das Bild auf der rechten Seite. Es entstehen unschöne Artefakte durch die Kompression.

Linien

Bild zu Isometrische Pixel-Art
Bild zu Isometrische Pixel-Art

Auf dem linken Bild sind einige Beispiele von Linien vergrößert abgebildet. Auf der rechten Seite ist ein negativ Beispiel abgebildet. So sollte man es nicht machen. Man kann man sagen: Je regelmäßiger eine Linie desto besser. Aber grundsätzlich ist alles erlaubt was gut aussieht!

Grundlinie

Bild zu Isometrische Pixel-Art
Originale Größe
Bild zu Isometrische Pixel-Art
Grundlinie (vergrößert)

Die Grundlinie wird am häufigsten verwendet. Sie verläuft parallel zur X- bzw. Y-Achse. Am besten ist es wenn man sich eine neue Ebene anlegt und dort ein Stern wie links abgebildet zeichnet. Dann hat man die Linie immer griffbereit für Copy & Paste. Noch einfacher ist es wenn ihr euch eine Pinselvorgabe (Brush) für isometrische Linien erstellt!

Bild zu Isometrische Pixel-Art

Auf dem rechten Bild wird nocheinmal veranschaulicht wie diese Linie zustande kommt. Man geht immer 2 Pixel zur Seite und 1 Pixel hoch/runter.

Quader

Bild zu Isometrische Pixel-Art
Bild zu Isometrische Pixel-Art

Als erstes solltet ihr eine sehr große Zoomstufe wählen. 1200 % wären optimal. Bei der Quader-Konstruktion gibt es zwei Möglichkeiten. Die erste Variante benutzt eine 3 Pixel lange Linie für die Ecken, so dass die senkrechte Linie in der Mitte platziert werden kann. Bei Variante Zwei wird die senkrechte Linie einfach einen Pixel nach links oder rechts verschoben. Vorteil der zweiten Variante ist das man beliebig viele Quader aneinander reihen (kacheln) kann. Würde man Variante Eins verwenden entstünde eine unsaubere Kante.

Schattierung

Bei einem Quader gibt es viele Möglichkeiten der Schattierung. Das folgende Bild zeigt einige Möglichkeiten.

Bild zu Isometrische Pixel-Art

Die Oberseite eines Würfels sollte man immer einen Tick heller machen als den Rest. Da das Licht direkt darauf scheint. Die vom Licht abgewendete Seite natürlich am Dunkelsten und parallel zur Lichteinstrahlung verlaufende seiten sollten von der Helligkeit dazwischen liegen. Möchte man Kanten besonders hervorheben betont man sie mit einem helleren Farbton.

Schlagschatten

Für den Schlagschatten legt man am Besten eine extra Ebene an und zeichnet den Schatten schwarz. Dann kann man die Deckkraft der Ebene reduzieren bis man das gewünschte Ergebnis erhält.

Bild zu Isometrische Pixel-Art

Genau wie beim Schattieren gibt es auch hier diverse Möglichkeiten. Es kommt halt immer darauf an aus welcher Richtung die Lichtquelle kommt. Ich möchte hier nur eine Variante zeigen. Hier ist der Schatten 1/3 von der Höhe des Quaders breit. Auch hier sollte man sich etwas künstlerische Freiheit nehmen und nicht immer alles auf den Pixel genau berechnen.

Pyramiden

Pyramiden sind eigenlich genauso einfach wie Quader. Hier möchte ich nur ein paar Beispiele zeigen.

Bild zu Isometrische Pixel-Art

Kreise

Kreise sind so ziemlich das schwierigste am Pixeln und es gibt viele Methoden einen Kreis zu erstellen. Hier zeige ich meine Methode.

Bild zu Isometrische Pixel-Art

Als erstes pixelt man ein ganz normales isometrisches Quadrat. Am besten in einer auffälligen Farbe damit es sich nachher vom Rest absetzt. Um die Mitte zu finden konstruieren wir in das Quadrat ein Kreuz.

Bild zu Isometrische Pixel-Art

Jetzt nehmen wir das Auswahlelipse-Werkzeug. Die Alt-Taste gedrückt halten und mit der Maus in die Mitte des Quadrates klicken. Maus- und Alt-Taste gedrückt halten und die Elipse größer ziehen bis sie an die Kanten des Quadrates kommt.

Nun erstellen wir eine neue Ebene. Dann im Menü auf "Auswahl->Auswahl verändern->Rand" klicken. Als Größe 1px angeben. Jetzt müsste es bei dir in etwa wie auf Bild 3 aussehen.

Die soeben erzeugte Auswahl füllen wir mit einer beliebigen Farbe. Leider wird nicht nur der ausgewählte Bereich gefüllt sondern auch etwas darüber hinaus. Deshalb müssen wir die Auswahl umkehren und den Überhang entfernen. Dazu klicken wir im Menü auf "Auswahl->Auswahl umkehren". Jetzt ein paar mal auf Entfernen klicken und schon haben wir einen schönen isometrischen Kreis. Die Hilfskonstruktion kann man durch einfaches ausblenden der entsprechenden Ebene unsichtbar machen.

Euer Ergebnis sollte wie folgt aussehen:

Bild zu Isometrische Pixel-Art

Zylinder

Bild zu Isometrische Pixel-Art

Wenn man Kreise hinbekommt, sollten Zylinder auch kein Problem mehr sein. Dazu erstellen wir einen Kreis wie oben beschrieben, duplizieren ihn und verbinden sie mit zwei senkrechten Linien.

Schattierung

Bitte nicht das Photoshop Verlaufs-Werkzeug benutzen. Denn der damit erzeugte Verlauf passt überhaupt nicht zu Pixel-Art und sieht künstlich aus.

Was dem Zylinder noch fehlt sind Schattierungen.Zunächst erstellt man einen groben Verlauf. An den Rändern nimmt man dunklere Farben und wird zur Mitte hin immer heller. Dies sieht natürlich noch sehr kantig aus. Deshalb bedienen wir uns nun eines Tricks, nämlich Dithering. Dies bedeutet das wir die groben Farbübergänge durch ein bestimmtes Pixel-Muster ineinander überlaufen lassen. Dadurch nimmt das Auge dies als Farbmischung war. Dann sieht der Zylinder schon viel runder aus wie das untere Bild deutlich zeigt.

Natürlich kann man anstatt Dithering zu verwenden auch einfach feinere Farbabstufungen machen.

Bild zu Isometrische Pixel-Art

Die folgenden Links sind gute Inspirationsquellen wenn ihr etwas tiefer in die Materie einsteigen wollt.

  • pixelplaza - Virtuelle Pixelstadt mit hunderten von Gebäuden. (deutsch/englisch)
  • eboy - Die wohl bekannteste Pixel-Art Seite im Netz (englisch)
  • pixeljoint - Pixel-Art Community (englisch)
  • pixeldam - Pixel-Art Community (englisch)
Über den Autor: christian
Ich beschäftige mich seit mehreren Jahren mit Webdesign und ins besondere mit Webentwicklung. Derzeit studiere ich Angewandte Informatik.
Profilseite betrachten