Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
Iso-Pixelhaus (Photoshop Tutorial)
Tutorial erstellt von René Dang in Photoshop CS, letzte Änderung am 11.07.2008
Hallo und Willkommen zum Iso-Pixelhaus Tutorial.
Wie man am Namen schon erkennt, will ich euch zeigen, wie man mit Pixelgrafik ein kleines Haus baut.
Dies ist nur eine von vielen möglichen Herangehensweisen und je nach Fantasie und Kreativität können viele verschiedene Gebäude entstehen.
Pixelbilder sind immer recht aufwändig, darum plant etwas Zeit für dieses Tutorial ein.
Und nun lasst uns beginnen.
Bei Pixelgrafiken solltet ihr das Buntstiftwerkzeug mit einer Größe von 1 Px nehmen. Somit stellt ihr sicher, dass ihr wirklich immer nur ein Pixel zeichnet und nicht wie beim Brush noch außenherum einen weichen Rand erhaltet.
Wenn ihr eine längere Gerade (senkrecht/waagerecht) machen wollt, so klickt einmal und haltet die Maustaste gedrückt, drück nun auf die Shift-Taste. Zieht jetzt die Linie und lasst wenn ihr die gewünschte Länger gezeichnet habt die linke Maustaste einfach los.
Unsere Arbeitsfläche sollte 100x100px groß sein.
Gleich im Anschluss hab ich mir ein Raster gemacht, bei dem jeder Punkt ein Pixel ist. So lassen sich später die Pixel beim Linienzeichnen besser abzählen.
Wenn ihr also bereit seid, können wir jetzt beginnen.
Zuerst hab ich drei gleichlange, senkrechte Linien erstellt. Dies sind die drei Seitenkanten, die man sehen kann, wenn man von schräg oben auf ein Sechseck (z.B. Würfel) schaut. Ich empfehle die beiden äußeren auf gleicher Höhe zu lassen und die mittlere etwas nach unten zu verschieben.

Nun müssen wir noch die Unterkante und Oberkante machen. Hier müsst ihr einfach mal probieren um ein Gefühl für die Linien zu bekommen. Im nächsten Bild könnt ihr ja sehen wie ich die Abstände gewählt habe. Ihr könnt auch mit dem Linienzeichner-Werkzeug eine Linie ziehen, euch an dieser orientieren und diese dann nachzeichnen.

Die Oberkante ist einfach eine, nach oben verschobene, Kopie der Unterkante. Wenn ihr die Unterkante einmal senkrecht und einmal waagerecht spiegelt könnt ihr sie oben als Rückkante ansetzen.
Somit erhaltet ihr einen dreidimensionalen Eindruck. Hier erkennt man gut, dass Pixelgrafiken eigentlich immer aus simplen Grundformen bestehen.
Als nächstes habe ich noch einen weiteren Würfel erstellt. Dieser soll später der Schornstein sein. Für etwas mehr Abwechslung bekommt dieser unten noch einen Ansatz inklusive Schräge.

Nun kommen wir zum Dach. Unser Häuschen soll etwas rustikal und heimelig sein, weshalb das Dach krumme Linien bekommt. Ihr könnt natürlich auch gerade Linien machen, falls euch ein neueres Haus lieber ist. An der Vorderseite macht ihr eine Art Dreieck (rote Linie) und von dessen Spitze zieht ihr eine Parallele (blaue Linie) zu der Oberkante der langen Wand. Schließt dann noch hinten die Form.
Mithilfe der grünen Linien könnt ihr gut die Grundformen erkennen.

Jetzt nur noch die Fenster und Tür andeuten und dann alles zusammenbasteln.
Die überflüssigen Linien könnt ihr jetzt noch entfernen. Somit erhalten wir unser Grundgerüst für das Häuschen und können dieses anfangen zu colorieren.

Erstmal solltet ihr euch überlegen wie ihr euer Bild farblich gestalten wollt und euch anhand dieser Überlegungen eine Farbpalette zusammenstellen. Sucht euch pro Farbton noch ein paar hellere und ein paar dunklere Töne raus. Auf dem linken Bild seht ihr meine Farbpalette für das Endbild. Rechts seht ihr, wo bei mir die Hell- Dunkelwerte für Rot liegen. Am besten ist es wenn ihr eine leichte Kurve von oben links nach unten rechts macht.

Damit Ihr immer wisst, von wo das Licht kommt, solltet ihr euch eine Markierung machen, aus welcher Richtung es auf die Objekte trifft. Bei mir ist das die Sonne in der oberen linken Ecke. Es hilft auf jeden Fall zur Vorstellung aber um die richtigen Schatten hinzubekommen, braucht es einfach Übung. Auch ich beherrsche dies noch nicht richtig.

Beim Einfärben beginnen wir einfach die Flächen mit einer Farbe zu füllen. Hierbei sei zu beachten, dass auf die Flächen wo das Licht direkter auftrifft eine hellere Farbe zu wählen ist. Die im Schatten liegenden Teile bekommen die dunklen Farben.
So hat die Seite mit dem Schornstein ein dunkleres Rot, da sie vom Licht abgewandt ist. Der Bereich hinter dem Schornstein ist nocheinmal dunkler als der Rest dieser Wand, da er ja noch vom Schornstein verdeckt wird.
Hingegen ist der obere Teil des Schornsteins heller, da dieser Bereich ja über das Dach hinausragt und nicht im Schatten vom Haus liegt.

Im nächsten Schritt machen wir genau das gleiche mit den Konturen.

Als nächstes hab ich noch fix die Fenster und die Tür gemacht. Wie ihr sie gestaltet bleibt natürlich euch überlassen. Kleine Blumenkästen am Fensterbrett wären natürlich auch denkbar.
Nachdem diese fertig sind, könnt ihr noch ein paar zusätzliche Schatten unter die Fensterbretter und den überhängenden Teil des Daches setzen.

Die zusätzlichen Schatten müssen wir natürlich auch bei den Konturen anwenden.

Wenn mein Häuschen aus Ziegeln gemauert wäre, würde das doch ganz schön was hermachen. Darum hab ich noch ein Ziegelmuster gemacht.
Dafür hab ich einfach die Unterkante der Kontur mit einem Abstand von 2 Px einfach immer wieder nach oben rankopiert.

Beim Schornstein hab ich die Linien natürlich noch etwas verschoben. In gleichmäßigem Abstand habe ich dann noch senkrechte Striche gemacht um das Zeigelmuster zu erhalten. Am Ende sieht mein Ziegelmuster wie folgt aus.

Dieses Muster hab ich mit einer Deckkraft von 40% und dem dunkelsten Rotton meiner Palette über die Hausebene und unter die Fenster- und Türenebene gelegt. Ihr könnt sie natürlich auch komplett darüber legen und nur die Bereiche von Fenstern und Tür entfernen.

Zuerst müssen wir wieder die Flächen und Konturen mit den entsprechenden Farb- und Helligkeitswerten einfärben.

Jetzt habe ich ein paar zufällige Flächen ohne ein spezielles System auf dem Dach gemacht.
Im Anschluss setzen wir mit einer dunkleren Abstufung des Farbtons ein paar Schatten und mit einem helleren Lichter.

In den letzten Schritten hab ich noch ein paar Wolken gebastelt um etwas mehr Stimmung zu erzeugen.

Allerdings darf auch ein Boden nicht fehlen, schließlich muss das Haus ja auch irgendwo stehen. Die Wiese ist nichts besonderes, einfach eine grobe Kontur mit ein paar Grasbüscheln und den Rest dann mit einem helleren Grün aufgefüllt. Natürlich solltet ihr den Schatten des Hauses nicht vergessen.

Am Ende könnte euer Häuschen nun so aussehen.

Ich hoffe das Tutorial war hilfreich für euch und ihr habt ein paar schöne Pixelhäuschen gebaut.
Zeigt eure Ergebnisse doch einfach im Showroom.
mfG René
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Wie man am Namen schon erkennt, will ich euch zeigen, wie man mit Pixelgrafik ein kleines Haus baut.
Dies ist nur eine von vielen möglichen Herangehensweisen und je nach Fantasie und Kreativität können viele verschiedene Gebäude entstehen.
Pixelbilder sind immer recht aufwändig, darum plant etwas Zeit für dieses Tutorial ein.
Und nun lasst uns beginnen.
Vorbereitung
Bei Pixelgrafiken solltet ihr das Buntstiftwerkzeug mit einer Größe von 1 Px nehmen. Somit stellt ihr sicher, dass ihr wirklich immer nur ein Pixel zeichnet und nicht wie beim Brush noch außenherum einen weichen Rand erhaltet.
Wenn ihr eine längere Gerade (senkrecht/waagerecht) machen wollt, so klickt einmal und haltet die Maustaste gedrückt, drück nun auf die Shift-Taste. Zieht jetzt die Linie und lasst wenn ihr die gewünschte Länger gezeichnet habt die linke Maustaste einfach los.
Unsere Arbeitsfläche sollte 100x100px groß sein.
Gleich im Anschluss hab ich mir ein Raster gemacht, bei dem jeder Punkt ein Pixel ist. So lassen sich später die Pixel beim Linienzeichnen besser abzählen.
Wenn ihr also bereit seid, können wir jetzt beginnen.
Grundform
Haus
Zuerst hab ich drei gleichlange, senkrechte Linien erstellt. Dies sind die drei Seitenkanten, die man sehen kann, wenn man von schräg oben auf ein Sechseck (z.B. Würfel) schaut. Ich empfehle die beiden äußeren auf gleicher Höhe zu lassen und die mittlere etwas nach unten zu verschieben.

Nun müssen wir noch die Unterkante und Oberkante machen. Hier müsst ihr einfach mal probieren um ein Gefühl für die Linien zu bekommen. Im nächsten Bild könnt ihr ja sehen wie ich die Abstände gewählt habe. Ihr könnt auch mit dem Linienzeichner-Werkzeug eine Linie ziehen, euch an dieser orientieren und diese dann nachzeichnen.

Die Oberkante ist einfach eine, nach oben verschobene, Kopie der Unterkante. Wenn ihr die Unterkante einmal senkrecht und einmal waagerecht spiegelt könnt ihr sie oben als Rückkante ansetzen.
Somit erhaltet ihr einen dreidimensionalen Eindruck. Hier erkennt man gut, dass Pixelgrafiken eigentlich immer aus simplen Grundformen bestehen.
Als nächstes habe ich noch einen weiteren Würfel erstellt. Dieser soll später der Schornstein sein. Für etwas mehr Abwechslung bekommt dieser unten noch einen Ansatz inklusive Schräge.

Dach
Nun kommen wir zum Dach. Unser Häuschen soll etwas rustikal und heimelig sein, weshalb das Dach krumme Linien bekommt. Ihr könnt natürlich auch gerade Linien machen, falls euch ein neueres Haus lieber ist. An der Vorderseite macht ihr eine Art Dreieck (rote Linie) und von dessen Spitze zieht ihr eine Parallele (blaue Linie) zu der Oberkante der langen Wand. Schließt dann noch hinten die Form.
Mithilfe der grünen Linien könnt ihr gut die Grundformen erkennen.

Fenster und Türen
Jetzt nur noch die Fenster und Tür andeuten und dann alles zusammenbasteln.
Die überflüssigen Linien könnt ihr jetzt noch entfernen. Somit erhalten wir unser Grundgerüst für das Häuschen und können dieses anfangen zu colorieren.

Colorierung
Erstmal solltet ihr euch überlegen wie ihr euer Bild farblich gestalten wollt und euch anhand dieser Überlegungen eine Farbpalette zusammenstellen. Sucht euch pro Farbton noch ein paar hellere und ein paar dunklere Töne raus. Auf dem linken Bild seht ihr meine Farbpalette für das Endbild. Rechts seht ihr, wo bei mir die Hell- Dunkelwerte für Rot liegen. Am besten ist es wenn ihr eine leichte Kurve von oben links nach unten rechts macht.

Damit Ihr immer wisst, von wo das Licht kommt, solltet ihr euch eine Markierung machen, aus welcher Richtung es auf die Objekte trifft. Bei mir ist das die Sonne in der oberen linken Ecke. Es hilft auf jeden Fall zur Vorstellung aber um die richtigen Schatten hinzubekommen, braucht es einfach Übung. Auch ich beherrsche dies noch nicht richtig.

Haus
Beim Einfärben beginnen wir einfach die Flächen mit einer Farbe zu füllen. Hierbei sei zu beachten, dass auf die Flächen wo das Licht direkter auftrifft eine hellere Farbe zu wählen ist. Die im Schatten liegenden Teile bekommen die dunklen Farben.
So hat die Seite mit dem Schornstein ein dunkleres Rot, da sie vom Licht abgewandt ist. Der Bereich hinter dem Schornstein ist nocheinmal dunkler als der Rest dieser Wand, da er ja noch vom Schornstein verdeckt wird.
Hingegen ist der obere Teil des Schornsteins heller, da dieser Bereich ja über das Dach hinausragt und nicht im Schatten vom Haus liegt.

Im nächsten Schritt machen wir genau das gleiche mit den Konturen.

Als nächstes hab ich noch fix die Fenster und die Tür gemacht. Wie ihr sie gestaltet bleibt natürlich euch überlassen. Kleine Blumenkästen am Fensterbrett wären natürlich auch denkbar.
Nachdem diese fertig sind, könnt ihr noch ein paar zusätzliche Schatten unter die Fensterbretter und den überhängenden Teil des Daches setzen.

Die zusätzlichen Schatten müssen wir natürlich auch bei den Konturen anwenden.

Ziegelstruktur
Wenn mein Häuschen aus Ziegeln gemauert wäre, würde das doch ganz schön was hermachen. Darum hab ich noch ein Ziegelmuster gemacht.
Dafür hab ich einfach die Unterkante der Kontur mit einem Abstand von 2 Px einfach immer wieder nach oben rankopiert.

Beim Schornstein hab ich die Linien natürlich noch etwas verschoben. In gleichmäßigem Abstand habe ich dann noch senkrechte Striche gemacht um das Zeigelmuster zu erhalten. Am Ende sieht mein Ziegelmuster wie folgt aus.

Dieses Muster hab ich mit einer Deckkraft von 40% und dem dunkelsten Rotton meiner Palette über die Hausebene und unter die Fenster- und Türenebene gelegt. Ihr könnt sie natürlich auch komplett darüber legen und nur die Bereiche von Fenstern und Tür entfernen.

Dach
Zuerst müssen wir wieder die Flächen und Konturen mit den entsprechenden Farb- und Helligkeitswerten einfärben.

Jetzt habe ich ein paar zufällige Flächen ohne ein spezielles System auf dem Dach gemacht.
Im Anschluss setzen wir mit einer dunkleren Abstufung des Farbtons ein paar Schatten und mit einem helleren Lichter.

Umgebung
In den letzten Schritten hab ich noch ein paar Wolken gebastelt um etwas mehr Stimmung zu erzeugen.

Allerdings darf auch ein Boden nicht fehlen, schließlich muss das Haus ja auch irgendwo stehen. Die Wiese ist nichts besonderes, einfach eine grobe Kontur mit ein paar Grasbüscheln und den Rest dann mit einem helleren Grün aufgefüllt. Natürlich solltet ihr den Schatten des Hauses nicht vergessen.

Ergebnis
Am Ende könnte euer Häuschen nun so aussehen.

Ich hoffe das Tutorial war hilfreich für euch und ihr habt ein paar schöne Pixelhäuschen gebaut.
Zeigt eure Ergebnisse doch einfach im Showroom.
mfG René
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!