Webdesign, Tutorials und mehr - Webmasterpro.de

Webmasterpro » Artikel » Design » Photoshop » Isometrische Pixel-Art

Isometrische Pixel-Art

Exzellenter Artikel

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

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

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.

Wichtige Werkzeuge

Buntstift

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 %.

Zauberstab

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.

Radiergummi

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%

Füllwerkzeug

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!

Zoomwerkzeug

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

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:

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:

• 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

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

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!

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

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.

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

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.

Kreise

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

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.

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:

Zylinder

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

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.

Weblinks

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)

---

Kommentare: Isometrische Pixel-Art