Wie Sie eine Sepia-Kansas-Farm in isometrischer Pixelkunst mit Adobe Photoshop erstellen

Lassen Sie uns ein weiteres Gebäude für unsere isometrische Pixelkunstsammlung erstellen, diesmal unter dem Thema Wizard of Oz. Wir bauen ein Bauernhaus nach dem Vorbild von Dorothy.

Wir werden es in einem Sepia-Ton fertigstellen, der zur Folie passt, aber in einer normalen Farbe, damit das Gebäude ein leicht recycelbares Element ist, das bei Bedarf verwendet werden kann.

1. Definieren Sie die Größe

Wir sollten unseren Pixel-Art-Charakter verwenden, um eine Größe zu finden, die wir für unser Gebäude mögen.

Schritt 1

Wir beginnen mit einem Quadrat und einer einfachen Abgrenzung einer Tür, um eine bessere Vorstellung von den Proportionen zu bekommen.

Das Quadrat muss überhaupt nicht groß sein, da wir als nächstes mehr Fußabdruck hinzufügen werden.

Schritt 2

Fügen wir ein weiteres kleineres Quadrat hinzu, das an einer Seite des ursprünglichen Quadrats befestigt ist.

Schritt 3

Und schließlich dieser längere Abschnitt, der auf der Rückseite des Hauses verläuft.

Wenn Sie dem Haus des Films wirklich treu bleiben möchten, suchen Sie nach Referenzbildern von Dorothys Bauernhaus. Es ist nicht ganz klar, welche Seite vorne ist, aber ich bin ziemlich zuversichtlich, dass Ms. Gulch durch diese Tür hereinkommt.

Schritt 4

Jetzt geben wir dem Haus etwas Höhe. Nehmen Sie das ursprüngliche Quadrat und drücken Sie die Alt-Taste oder kopieren / fügen Sie es eine gute Höhe über dem Fußabdruck ein. Der Charakter sollte dafür nützlich sein.

Schritt 5

Die anderen beiden Teile des Hauses haben niedrigere Dächer, also wiederholen Sie die obigen Schritte, ohne die gleiche Höhe zu erreichen.

Sieht etwas verwirrend aus. Lass es uns aufräumen.

Schritt 6

Entfernen Sie die Linien, die den Eindruck erwecken, als ob der größere Würfel durchsichtig wäre. Machen wir es einfach zu einer soliden Box mit vertikalen Linien, die die Ecken verbinden.

Schritt 7

Und wiederholen Sie das obige mit den anderen Abschnitten des Bauernhauses.

Ich habe die Trennlinie zwischen diesen beiden Abschnitten zum späteren Nachschlagen beibehalten.

Die Mengen sollten jetzt ziemlich klar sein.

2. Erstellen Sie das Dach

Machen wir die Umrisse des Daches. Die Geometrie hier kann schwierig werden, insbesondere wenn wir gezackte Linien vermeiden möchten, aber es gibt ein paar Abkürzungen und narrensichere Linien, die wir verwenden können.

Schritt 1

Lassen Sie uns in einer neuen Ebene eine Kopie dieser oberen Quadrate erstellen, an der gleichen Stelle wie sie sind, aber in einer kontrastierenden Farbe, um die Bearbeitung zu erleichtern.

Denken Sie daran, dass Sie sehr einfach Linien zeichnen können, indem Sie mit dem Bleistiftwerkzeug auf einen Punkt klicken und dann bei gedrückter Umschalttaste auf einen anderen Punkt klicken.

Schritt 2

Geben wir nun dem größeren, höheren Dach eine etwas breitere Grundfläche als die Wände darunter. Dächer bedecken normalerweise eine größere Fläche als die Wände.

Machen Sie dasselbe mit dem kleineren Quadrat, mit dem Unterschied, dass es nur an den drei Seiten wachsen sollte, die nicht mit dem größeren Teil des Hauses verbunden sind.

Schritt 3

Um nun das Dach nach oben zu projizieren, können wir einfach eine der Seiten eines Quadrats nehmen, beginnend mit der größten, von Ecke zu Ecke, kopieren und dann drehen (Bearbeiten > Transformieren > Drehen um 90˚) und dann verbinden neue Linie mit einer Ecke des Quadrats.

Schritt 4

Um die erste Seite des Drahtgitters des Daches fertigzustellen, benötigen Sie lediglich eine 1:1-Diagonallinie. Sie können es mit dem Bleistiftwerkzeug oder mit dem Linienwerkzeug zeichnen, wobei Sie darauf achten müssen, dass das Gewicht 1 px beträgt und das Anti-Aliasing deaktiviert ist.

Schritt 5

Um das Drahtmodell für diesen Abschnitt des Daches fertigzustellen, müssen wir nur dieses neue Dreieck, das wir erstellt haben, replizieren und eine Linie hinzufügen, die die beiden Spitzen verbindet.

Schritt 6

Lassen Sie uns diese Form sauber machen und die hinteren Linien entfernen. Wir werden auch den größten Teil des nach rechts gerichteten Endergebnisses nicht brauchen.

Schritt 7

Wiederholen Sie nun so ziemlich den gleichen Vorgang für das kleinere Quadrat.

Machen Sie das Dreieck.

Schritt 8

Kopieren Sie das Dreieck und fügen Sie den Dachfirst hinzu.

Schritt 9

Und räum die Leitungen auf.

Schritt 10

Für den längeren Abschnitt fügen wir ein Dach mit einer anderen Neigung hinzu. Es sollte einfach eine horizontale Linie sein, die direkt aus der Ecke schießt.

Sie sollten etwas Volumen hinzufügen, damit die Dächer nicht wie Papier dünn aussehen. Deshalb habe ich hier zwei horizontale Linien gesetzt. Bei den anderen Dächern machen wir das etwas später auch.

Schritt 11

Diese neuen horizontalen Linien sollten sich etwas über ihre Ecke des Bauernhauses hinaus erstrecken. Und von ihrer Ecke sollte eine 2:1-Linie gehen, die die ganze Seite bedeckt, bis sie das große Dach trifft.

Beachten Sie die beiden kleinen grünen Linien, die hier hinzugefügt wurden. Sie werden verwendet, um den Punkt zu finden, an dem sich diese neue Dachfläche mit dem großen Dach schneidet. Im Moment markieren sie einfach die richtige Breite.

Schritt 12

Wenn wir nun die beiden grünen Linien(gleichzeitig) nach oben verschieben, bis die rechte auf die horizontale Dachlinie trifft, würde dies bedeuten, dass die linke grüne Linie dort sein muss, wo diese neue Oberfläche auf die Wand und das große Dach trifft.

Dann müssen Sie nur noch eine weitere horizontale Linie vom Schnittpunkt hinzufügen.

Und dann säubern Sie die grünen Linien an der Ecke des großen Daches, die wir nicht mehr brauchen werden.

Schritt 13

Jetzt fügen wir die Breite zum Rest der Dächer hinzu; es sind ein paar parallele Linien, die nur um ein Pixel von den Originallinien getrennt sind.

Schritt 14

Um die wichtigsten Volumen des Hauses fertigzustellen, müssen wir eine kleine Veranda hinzufügen.

Wir können mit seinem Fußabdruck beginnen.

Schritt 15

Wenn Sie die Grundfläche bis zur Basis des großen Daches kopieren, haben Sie fast das Dach für die Veranda - Sie müssen es nur schräg stellen.

Es wird eine sanftere Neigung als die vom großen Dach. Es ist einfach als 1:1-Diagonale ausgeführt.

Diese Neigung entspricht eigentlich der Neigung des zuletzt hinzugefügten Daches. Im Grunde sind dies die einzigen Linien, die in isometrischer Pixelkunst symmetrische vertikale Dreiecke ohne jegliche Zacken erzeugen können.

Schritt 16

Richten Sie nun das gesamte Dach der Veranda auf diese neue Neigung aus.

Schritt 17

Fügen Sie ein Paar Pfosten hinzu, die das Dach halten.

Und Sie sind mit dem Dach und den meisten Volumen des Bauernhauses fertig. Weiter gehts…

3. Farben und Texturen hinzufügen

Genug mit den Wireframes! Bringen wir etwas Farbe rein.

Das Bauernhaus ist schwarz-weiß, auch nachdem es in Oz gelandet ist, aber daran müssen wir uns nicht halten. Wir geben ihm einige schöne Farben, um es als möglicherweise recycelbares Asset in unserer Bibliothek mit isometrischen Pixelbildern zu behalten... die wachsen sollte, wenn Sie dieser Reihe von Tutorials folgen.

Schritt 1

Lo-Sat-Blau für das Dach schien eine gute Wahl zu sein. Verwenden Sie für die verschiedenen Neigungen leicht unterschiedliche Farbtöne.

Fügen Sie auch ein wenig helles (fast weißes) Grau zu den Kanten der Dächer hinzu.

Schritt 2

Ich dachte, ich würde den Wänden ein helles Grau geben, mit nur einer winzigen Sättigung (5%) eines grünlichen Farbtons.

Fügen Sie verschiedene Farbtöne hinzu; Aus irgendeinem Grund erscheint es mir logisch, die linke Seite heller zu schattieren als die rechte. Auf jeden Fall ist es ideal, dies konstant zu halten, damit die Beleuchtung in Ihrer Pixelgrafik einheitlich aussieht.

Schritt 3

Lassen Sie uns die Wände die Dächer erreichen – es sieht viel sauberer aus.

Wenn Sie möchten, können Sie an dieser Stelle Dach und Wände zu einer Ebene zusammenführen.

Schritt 4

Fügen Sie dem Boden der Veranda etwas Holzfarbe hinzu. Und füllen Sie die Pfosten mit der Wandfarbe aus.

Schritt 5

Lassen Sie uns nun die dunklen Linien in Oberflächenschnittpunkten weicher machen, wo immer Sie "Tal"-Ecken haben. Ich mag schwarze Konturen, um ausschließlich freistehende Volumen zu kennzeichnen.

Diese "Tal"-Linien sollten also ihren benachbarten Oberflächenfarben ähnlich sein, dunkler als beide, aber nicht schwarz.

Nicht alle Pixelkünstler tun dies, aber ich denke, es ist eine nette Geste.

Schritt 6

Das Gegenteil der "Tal"-Ecken wären nun die "Gipfel"-Ecken. Und wir wollen, dass dies Highlights sind; heller als die benachbarten Oberflächenfarben.

Dies wird universeller in der isometrischen Pixelkunst angewendet.

Schritt 7

Nachdem wir mit dem Färben fertig sind, fügen wir etwas Textur hinzu. Für die Wände ist es ziemlich einfach, denn es sind nur Holzbretter – parallele Linien.

In einem neuen Layer können Sie damit beginnen, Linien über die sichtbaren Hausgrundrisslinien zu zeichnen. Vielleicht möchten Sie vorerst eine Kontrastfarbe verwenden.

Schritt 8

Dann Alt-Stupsen, so dass Sie eine ganze Reihe dieser Linien erhalten, die an den Wänden hochgehen, alle in regelmäßigen Abständen.

Schritt 9

Sie werden auf diese Weise nicht alle Ihre Wände erfolgreich abdecken, also fügen Sie die zusätzlichen Linien hinzu, die Sie möglicherweise benötigen.

Schritt 10

Färben Sie nun die Linien schwarz, indem Sie das Farbeimer-Werkzeug verwenden, wobei zusammenhängend abgehakt ist.

Und dann entfernen Sie jeden Teil von ihnen, der nicht über Mauern ist. Sie können dies tun, indem Sie in die Wandebene und mit dem Zauberstab gehen, alle Wandfarben (außer Umrisse) auswählen und dann zur Texturebene zurückkehren, die Auswahl invertieren (Auswählen > Invers) und auf Löschen klicken.

Schritt 11

Verringern Sie dann die Deckkraft der Ebene auf 10 % oder weniger. Sie können dies über eine Verknüpfung tun: Drücken Sie bei aktivem Verschieben-Tool die Zahl 1 (für 10%) oder drücken Sie schnell 08 (für 8%) oder probieren Sie mehrere Deckkraften aus und sehen Sie, was Sie bevorzugen.

Schritt 12

Um die Wandtextur zu vervollständigen, können wir alle parallelen Linien von den Ecken der Wände entfernen und einige vertikale Linien wie Eckrahmen hinzufügen.

Schritt 13

Auf dem Dach. Lassen Sie uns ein Dachziegelmuster erstellen.

Sie könnten winzige L-Formen erstellen, die sich entlang einer 2:1-Linie wiederholen. Und dann kopieren Sie das nach unten und richten Sie sie wie Ziegelsteine an einer Wand aus.

Dann replizieren und replizieren Sie, bis Sie einen großen Patch erhalten.

Schritt 14

Verwenden Sie dies, um die Dächer abzudecken.

Schritt 15

Und dann wiederholen Sie den Vorgang, den wir mit der Wand gemacht haben, und lassen Sie nur die Textur auf den Oberflächen, die wir bedecken möchten.

Aber lassen wir das hintere Dachteil aus, weil der Winkel dafür sehr unterschiedlich ist.

Verringern Sie dann die Deckkraft und verschmelzen Sie, wenn Sie möchten.

Schritt 16

Für das hintere Teil des Daches machen wir diese sehr einfache parallele 2:1-Linien-Textur.

In geringer Deckkraft aufgetragen.

Schritt 17

Der Boden der Veranda sollte eine Holzbrettstruktur haben. Beginnen Sie mit parallelen Linien entlang der Länge des Bodens.

Und dann einige zusätzliche Pixel, um die separaten Boards zu erstellen.

Schritt 18

Verringern Sie die Deckkraft und tragen Sie sie auf.

Die Bauernhaustexturen sind fertig.

4. Fügen Sie dem Haus Finishing-Details hinzu

Fügen wir dem Gebäude einige schöne Fenster und andere Details hinzu. Sie basieren auf denen aus dem Bauernhaus im Zauberer von Oz, sollten aber immer noch wiederverwendbar sein und sehr schön aussehen.

Schritt 1

Die vordersten Wände werden Doppelfenster haben. Wir können diese mit einem Rechteck beginnen, das an der Wand zentriert ist und in einer neuen Ebene liegt.

Ideal wäre es, dieses Rechteck an den Linien der Wandstruktur auszurichten!

Schritt 2

Jetzt machen wir einen Rahmen für die Fenster. Es kann rundum 2 px breit sein. Sieht schön und klobig aus.

Fügen wir auch eine Pause hinzu, die die Fenster in zwei Hälften teilt.

Schritt 3

Schließlich teilen wir die Fenster auch vertikal mit mehr klobigen Fensterrahmen und bereinigen den Rest der Linien.

Schritt 4

Fügen Sie etwas Farbe hinzu. Ich gebe dem Fensterrahmen einen etwas helleren Farbton der Wandfarbe.

Denken Sie daran, dass Sie Farben mit Farbton/Sättigung/Helligkeit ändern können (Bild > Anpassungen > Farbton/Sättigung…). Probieren Sie es aus, wenn Sie es noch nicht getan haben – es ist einfach und macht Spaß.

Schritt 5

Lassen Sie uns nun diese harten schwarzen Linien mildern.

Und fügen Sie mit dezenten Highlights, einer kleinen Schattierung am Fensterrahmen und dem Glaseffekt Ihrer Wahl eine zusätzliche Dimension hinzu.

Schritt 6

Für das Fenster an der anderen Wand können wir das erste einfach mit Alt-Nudge verschieben, es zentriert an der Wand platzieren und für eine bessere Anpassung der Beleuchtung die Helligkeit mit Farbton/Sättigung/Helligkeit um etwa 10% verringern (Bild > Anpassungen > Farbton/Sättigung…).

Schritt 7

Wir wollen mehr Fenster, aber nicht mehr doppelt. So können Sie die vorhandenen kopieren und die Enden zusammenführen, um den Bruch dazwischen loszuwerden. Das Fenster rechts habe ich vertikal etwas kürzer gemacht, wie die Referenzbilder, die ich gefunden habe, nahe legen.

Schritt 8

Beenden Sie das Platzieren der Fenster, indem Sie die Teile entfernen, die von den Strukturen verdeckt werden sollen.

Schritt 9

Kommen wir nun zu dieser Tür. Diese vertikalen Linien fingen an, nervig zu werden.

Beginnen Sie mit einem Rahmen, ähnlich wie bei den Fensterrahmen, außer dass unten, parallel zum Boden, kein Rahmen sein sollte. Stattdessen möchten Sie vielleicht einen Teil des Verandabodens in diesem Abschnitt ein wenig nach oben bringen, um der Tür ein tieferes Aussehen und eine zusätzliche Dimension zu verleihen.

Schritt 10

Fügen Sie etwas Farbe hinzu und mildern Sie die Ecklinien.

Schritt 11

Und jetzt fügen Sie der Tür einige Details hinzu, die eigentlich eine Fliegengittertür mit einigen Halbkreisen ist, die die inneren Rahmenecken schmücken.

Im Moment ist alles mit einer Farbe erledigt.

Schritt 12

Aber es wird verständlicher und 3D-aussehender mit etwas weicheren Schattierungen in einigen Bereichen und ein wenig Hervorhebung.

Hier habe ich den Teilen, die die eigentliche Bildschirmtür sein würden, eine braune Farbe hinzugefügt.

Fliegengittertüren sind durchsichtig, aber ich denke, wir könnten riskieren, die Tür zu verschachtelt zu machen, wenn wir versuchen, ein paar durchsichtige Details hinzuzufügen.

Schritt 13

Hier habe ich ein kleines Quadrat hinzugefügt, um einen Platz für den Schornstein zu finden.

Schritt 14

Hier sind die zusätzlichen Linien, um die Schornsteinform zu definieren.

Schritt 15

Fügen Sie etwas Farbe hinzu.

Schritt 16

Markieren und klare Linien.

Schritt 17

Und jetzt fügen wir eine Ziegeltextur hinzu, beginnend mit parallelen Linien.

Schritt 18

Und wenn Sie mit den einzelnen Ziegeln abschließen, geben Sie einigen Ziegeln für das zusätzliche Detail etwas unterschiedliche Schattierungen.

Und fertig ist das Bauernhaus! Jetzt müssen wir es nur noch irgendwo landen. Hexen aufgepasst!

5. Fügen Sie eine Umgebung hinzu

Wir machen eine kleine Szene rund um das Bauernhaus. Also, ähm... warum nicht eine Farm?

Schritt 1

Beginnen wir mit einer Hintergrundfarbe. Ich bin darauf gelandet, weil ich dachte, es sieht aus wie Erde und sieht gut aus mit den Hausfarben.

Schritt 2

Geben wir ihm eine subtile gepunktete Textur. Es ist so ziemlich ein Raster, daher sollte es nicht zu störend sein, wenn Sie den Kontrast niedrig halten.

Schritt 3

Lassen Sie uns noch eine Bearbeitung am Haus vornehmen, bevor es endgültig geerdet ist. Wir fügen eine Basis hinzu, die so aussehen sollte, als ob die Veranda eine Stufe über dem Boden wäre.

Um es zu beginnen, habe ich eine Linie entlang des Grundrisses des Hauses in einer neuen Ebene (unter dem Haus) gezeichnet.

Schritt 4

Klonen Sie diese Linie um ein paar Pixel und geben Sie ihr eine holzähnliche Farbe und einige Umrisse.

Schritt 5

Und wie immer: Schatten, Highlight…

Schritt 6

… und mildern die Linienfarben dort, wo die Flächen aufeinandertreffen.

Schritt 7

Das Haus ist gelandet, also bringen wir einen Baum ins Bild.

Oder hast du das Baum-Tutorial noch nicht gemacht?

Schritt 8

Es ist nicht viel von einer Farm, wenn es keine Ernte gibt. Und um die Pflanzen zu pflanzen, sollten wir zuerst den Boden vorbereiten.

Hier ist eine einfache Möglichkeit, ein bearbeitetes Bodenmuster zu erstellen.

Alt-Schieben Sie das in immer längere Zeilen und dann in mehrere Zeilen, wie folgt:

Schritt 9

Und dann platzieren Sie es gegen die Ecke der Szene. Schneiden Sie alles zu, was außerhalb des Rahmens ist.

Schritt 10

Was die Pflanzen angeht, machen wir sie zu Karotten – oder im Grunde genommen etwas Allgemeines, Blattgemüse.

Sie können damit beginnen, ein paar kleine und leicht unterschiedliche Blätter zu machen. Färben Sie sie dann grün, spiegeln Sie sie horizontal (Bearbeiten > Transformieren > Horizontal spiegeln) und fügen Sie Schattierungen hinzu.

Und dann fügen Sie eine Gruppe von Blättern zusammen und verbessern Sie die Schattierung und die dunklen Linien, um eine Ernte zu erhalten.

Mache idealerweise ein paar leicht unterschiedliche Ernten und kombiniere die mehreren Blätter, damit du nicht immer das Gleiche wiederholen musst.

Schritt 11

Pflanzen platziert! Sieht nach einem guten Jahr für Karotten-Ding aus.

Hoffen wir nur, dass das Wetter nicht umschlägt.

Schritt 12

Wir werden einen Zaun zwischen den Pflanzen und dem Haus hinzufügen. Hier ist eine ziemlich einfache Möglichkeit, einen zu erstellen. Dies wird wiederholt, aber: Umriss > Färbung > Hervorhebung > dunkle Linien weicher machen.

Oh! und machen Sie es auch einfach zu fliesen.

Schritt 13

Um den Rest des Hauses herum werden wir einen Lattenzaun haben. Es kann überwältigend dunkel werden, wenn wir jedes Brett des Zauns freistehend machen, also können wir sie stattdessen einfach dünn machen und eng zusammenbinden.

Machen Sie dann, um durch das Haus zu gehen, eine umgedrehte (und etwas dunklere) Version sowie ein kleineres, verzierteres Stück, das zum Eingang wird.

Schritt 14

Wir sind uns so nah, aber fügen wir noch ein unnötiges Detail hinzu: einen Weg zum Haus (zunächst in Kontrastfarbe).

Schritt 15

Der Pfad hat einfach die gleiche Grundfarbe, aber keine Textur.

Platzieren Sie die Zäune.

Stellen Sie beim Platzieren des Lattenzauns sicher, dass das Tor mit dem neu erstellten Pfad ausgerichtet ist.

Und das markiert das Ende der Pixelarbeit.

6. Fügen Sie den Sepia-Ton hinzu

Um ihm schließlich den "Back-in-Kansas"-Look von Wizard of Oz zu verleihen, fügen wir ein paar Effekte hinzu.

Schritt 1

Füllen Sie die Zeichnung in einer neuen Ebene mit einer dunklen, hellbraunen Farbe aus, die die gesamte Illustration bedeckt.

Schritt 2

Ändern Sie den Mischmodus der Ebene in Farbe.

Schritt 3

Und Ihre Grafik sollte so aussehen:

Sie können Ihr Sepia ganz einfach mit Farbton/Sättigung/Helligkeit ändern (Bild > Anpassungen  > Farbton/Sättigung…).

Schritt 4

Und warum hier aufhören?

Sie können einen Iris-Effekt mit einem schwarzen radialen Farbverlauf und abgerundeten Ecken hinzufügen, um ihn wirklich vorzeigbar und ein bisschen altmodischer zu machen.

Farbverläufe sind in der Pixelkunst normalerweise ein No-Go, aber als Teil der Präsentation sollte es cool sein.

Für ein glatteres Aussehen habe ich die Illustration 2x vergrößert, bevor ich den radialen Verlauf und den abgerundeten Eckenausschnitt angewendet habe.

Es gibt keinen Ort wie zu Hause!

Es brauchte ein bisschen Herz, Verstand und Mut, aber wir haben es geschafft! Es ist eine ziemlich schöne Postkarten-Art der Pixel-Art-Illustration, die an ein wirklich großartiges Stück Kino erinnert.

Ich hoffe, das hat Spaß gemacht!