Erstellen Sie einen isometrischen Pixel-Art-Hubschrauber in Adobe Photoshop

Wenn Sie dieser Reihe von Pixel-Art-Tutorials folgen, haben Sie möglicherweise bereits ein sehr schönes Auto für Ihren Pixel-Art-Charakter in seiner Pixel-Art-Welt. Lassen Sie uns Ihrer Sammlung ein weiteres Fahrzeug hinzufügen, indem Sie einen Hubschrauber bauen – oder wenn Sie nach einer schnelleren Möglichkeit suchen, Elemente zu Ihrer isometrischen Stadt hinzuzufügen, können Sie viele isometrische Elemente von Envato Market kaufen.

1. Definieren Sie Höhe und Breite

Lassen Sie uns die Höhe des Hubschraubers wie üblich auf dem Pixelart-Zeichen basieren.

Schritt 1

Der Helikopter sollte etwa doppelt so groß wie der Charakter sein. Die Proportionen müssen nicht streng realistisch sein; Letztendlich ist es normalerweise besser, kleinere als genaue Fahrzeuge und Gebäude zu haben, damit die Charaktere auf größeren, komplexeren Illustrationen sichtbar und wichtig bleiben.

Schritt 2

Wenn Sie bereits ein Pixel-Art-Auto haben, dann herzlichen Glückwunsch! Damit können wir die Länge des Helikopters definieren. Machen wir ein Quadrat mit der zuvor definierten Höhe und der Länge des Autos.

Wenn Sie das Auto nicht haben, dann machen Sie es! Oder stellen Sie sich einfach eine Länge vor, die etwa das 1,5-fache der Länge des liegenden Charakters beträgt.

Schritt 3

Jetzt nehmen wir dieses Quadrat und kopieren es nebeneinander, um drei Quadrate in einer Linie zu haben. Das wird die Länge unseres Hubschraubers sein.

Schritt 4

Mach die Pausen in der Mitte sauber und wir schnitzen den Helikopter aus diesem Rechteck.

2. Entwerfen Sie den Hubschrauber

Die Art und Weise, wie wir unseren Helikopter zusammenstellen, wird sein, indem wir eine Art Blaupause daraus machen; eine flache Zeichnung einer seiner Seiten.

Wenn Sie an einen Hubschrauber denken, ist seine Form von oben oder von vorne nicht sehr komplex. Wir werden die Seitenansicht zeichnen, weil dort der Großteil der Komplexität liegt. Es ist ziemlich einfach, Helikopter-Designs mit den Ansichten von oben, von vorne und von der Seite bei der Bildsuche zu finden. Sie können dies also tun oder einfach diesem Design folgen.

Schritt 1

Von oben nach unten fügen wir eine parallele Linie so nah wie möglich am oberen Rand hinzu (1 px zwischen beiden Linien). Dadurch werden die Rotorblätter des Hubschraubers definiert.

Schritt 2

Unter den Blättern müssen Sie ein paar vertikale Linien für die Rotoren hinzufügen. Platzieren Sie sie auf etwa 1/3 der Länge und so hoch, wie beispielsweise der Kopf des Charakters, oder wie es Ihnen am besten gefällt.

Darunter habe ich ein paar weitere parallele Linien hinzugefügt. Sie legen die Größe des Triebwerks fest: eine Linie für die Oberseite und die andere für die Unterseite, die gleichzeitig das Dach der Helikopterkabine ist.

Schritt 3

Wir geben dem Helikopter ein Heck, das an der letzten Linie befestigt ist, die wir hinzugefügt haben und die die oberste Linie erreicht. Die nach oben gehenden Linien sind 2:1 (was bedeutet, dass 2 Pixel nach oben für je 1 Pixel nach oben gehen) und 3:1. Auf diese Weise erhalten wir eine Keilform und verbinden sie oben mit einer 1:1-Linie, um eine coole Flossenform zu erhalten.

Und gib dem Motor hinten einen Punkt, wo er aufhört.

Schritt 4

Einige dieser Leitungen werden wir nicht mehr brauchen, also lasst uns aufräumen.

Ich habe einen Punkt auf der Klinge hinzugefügt, an dem sie sich schließlich verbreitert und ein anderes Material hat. Und dann kopierte ich die Klinge, drehte sie um und positionierte sie auf der gegenüberliegenden Seite, die über das Begrenzungsrechteck hinausragte.

Schritt 5

Lassen Sie uns nun einen Schritt in den Motor "schnitzen", um ihm mehr Komplexität zu verleihen und weil das dem Referenzhubschrauber, den ich verwendet habe, näher kommt.

Schritt 6

Wir müssen weitere Zeilen von unten nach oben definieren. Die allerersten werden für die Landekufen sein, dann etwas höher darüber haben wir den Boden der Helikopterkabine und noch höher eine Linie, die mehr oder weniger definieren sollte, wo Fenster und Windschutzscheibe beginnen werden unten nach oben.

Schritt 7

Von knapp über dieser letzten oberen Linie, die wir hinzugefügt haben, wird eine neue Diagonale nach oben gehen, bis sie die oberste Motorlinie erreicht. Diese Diagonale beträgt 2:1 und wird die Windschutzscheibe des Hubschraubers sein.

Schritt 8

Aufräumen, s'il vous Zopf. Wir brauchen nicht die letzte horizontale Linie und nichts jenseits der Windschutzscheibe.

Schritt 9

Der Motor sollte etwas weiter hinten anspringen, also seine Diagonale fast bis zur Mitte zwischen der Windschutzscheibe und der obersten Stufe des Motors nach hinten verschieben.

Und geben Sie der Oberseite der Windschutzscheibe eine weichere Ecke.

Schritt 10

Lassen Sie uns nun weiter am Heck des Helikopters arbeiten.

Zwischen Heck und Kabine befindet sich ein Baum, der nicht zu dünn sein sollte.

Schritt 11

Und es sollte eine untere Flosse geben.

Fügen Sie eine 1:1-Linie von demselben Punkt hinzu, an dem die obere Flosse aus der Unterseite des Auslegers herauskommt und nach unten und hinten zeigt.

Schritt 12

Und beende die Flosse. Es muss nicht genau die obere Finne spiegeln, sollte aber auch eine leichte Keilform haben.

Hier ist es etwas breiter und weniger hoch.

Sie können jetzt die Leitungen unter dem Ausleger säubern.

Schritt 13

Ein kleines Detail: Fügen wir eine Linie direkt über dem Ausleger hinzu, die den Motor mit dem Heck verbindet.

Schritt 14

Und um die Kabine zu schließen, fügen wir eine Diagonale vom Ausleger nach unten hinzu. Dieser ist sehr steil und ein bisschen zackig, was normalerweise am besten vermieden wird, aber wenn wir die Linie regelmäßig bei 4:1 halten, wird sie zumindest nicht zu zackig.

Schritt 15

Beenden Sie die Kabine, indem Sie die Ecken abrunden und die Linien um sie herum säubern.

Schritt 16

Auf zum Fahrwerk. Die Kufen sind kürzer, als die Kabine und biegen sich am vorderen Ende nach oben.

Schritt 17

Verbinden Sie die Kufe mit der Kabine mit zwei Paar senkrechten Linien…

… und die Profilansicht unseres Helikopters ist so gut wie fertig.

3. Geben Sie dem Hubschrauber Tiefe/Volumen

Natürlich wird der Helikopter nicht hauchdünn sein, also fangen wir an, ihn breiter zu machen.

Schritt 1

Füllen Sie die gesamte Hubschrauberzeichnung mit einer zufälligen Farbe.

Eine einfache Möglichkeit, dies zu tun, besteht darin, eine Auswahl zu treffen, die die Zeichnung vollständig umfasst, und dann mit dem Farbeimerwerkzeug und der deaktivierten zusammenhängenden Einstellung auf einen leeren Bereich zu klicken.

Um dann alle unerwünschten Farben zu entfernen, verwenden Sie das Zauberstab-Werkzeug mit der aktivierten Einstellung Angrenzend. Wählen und löschen Sie dann einfach die beiden Bereiche, die die unerwünschte Farbe haben (der gesamte Bereich um den Helikopter und das Rechteck in der Mitte des Fahrwerks).

Es ist möglich, mit dem Zauberstab-Werkzeug und jedem anderen Auswahlwerkzeug zu einer Auswahl hinzuzufügen, indem Sie die Umschalttaste gedrückt halten, während Sie das Werkzeug verwenden. In diesem Fall hätten Sie also die Umschalttaste gedrückt halten, auf die beiden Bereiche klicken und dann nur einmal die Entf-Taste drücken müssen... nicht, dass Sie mehr als eine Sekunde sparen würden, aber es kann zu anderen Zeiten nützlich sein.

Es ist auch möglich, von einer Auswahl durch Drücken von Alt zu subtrahieren oder eine Auswahl durch Drücken von Alt und Umschalt zu überschneiden.

Schritt 2

Machen Sie eine Kopie des vorherigen Zustands der Zeichnung des Hubschraubers, und wir werden sie als nächstes wiederverwenden.

Entfernen Sie das Fahrwerk der Originalversion. Dies wird die mittlere Schicht in dem Chopper-Sandwich sein, das wir machen werden.

Schritt 3

Nehmen Sie die Kopie der Originalzeichnung und geben Sie ihr optional eine andere Farbe. Und entfernen Sie den Motor und das gesamte Verdeck.

Wir werden auch den Ausleger los – ich mache den Schnitt dort, wo ich diese vertikale Linie gezeichnet habe, direkt innerhalb des Fahrwerks.

Schritt 4

Entfernen Sie das Rückenteil und runden Sie die Ecken ab.

Dadurch werden die rechte und linke Schicht des "Sandwichs" erstellt.

Schritt 5

Mach das Sandwich!

Verteilen Sie die Ebenen gleichmäßig…

… das Ganze sollte ungefähr so breit wie ein Auto sein…

Ich mag es, wenn der Helikopter etwas pummelig aussieht, also habe ich ihn etwas breiter als das Auto gemacht. Aber wirklich eine Autobreite ist für viele Helikoptermodelle genau genug.

Schritt 6

Lassen Sie uns die Kufen ein wenig spreizen. Wählen Sie einfach das vordere aus und verschieben Sie es 2 px quer und 1 px vertikal.

Wiederholen Sie den Vorgang mit der hinteren Kufe in die entgegengesetzte Richtung.

… und warum nicht schon das Fahrwerk richtig aussehen lassen.

Schritt 7

Wenn Sie möchten, können Sie das gesamte "Sandwich" in einer Ebene zusammenführen. Das waren nur Richtlinien, und jetzt können wir an den wirklichen / endgültigen Linien des Hubschraubers arbeiten.

Beginnen wir mit dem Motor; es könnte die komplexeste Form sein, die wir abdecken müssen.

Zeichnen Sie in einer neuen Ebene eine Linie, die die Achse des Motors markiert, und zwei weitere Linien, die seine Kanten sein werden. Zeichnen Sie dies direkt auf das Dach, um die richtige Breite zu erhalten; es sollte fast so breit wie die Kabine sein, aber nicht so breit.

Schritt 8

Verschieben Sie nun die Leinen an die Oberseite des Motors und geben Sie ihnen die richtige Länge.

Schritt 9

Wir geben dieser Oberfläche eine Art Tropfenform. Wir können es beginnen, indem wir die Ecken mit geraden horizontalen und vertikalen Linien trimmen.

Schritt 10

Runden Sie die Ecken bis auf die hintere leicht ab und entfernen Sie die Mittellinie.

Schritt 11

Wählen Sie nun diese neue Form aus und verschieben Sie sie mit Alt einige 4 Pixel nach unten, oder was auch immer ausreicht, um die kleine Stufe im Engine-Teil der Richtlinie zu erfüllen.

Aufräumen (die Rückenlinien entfernen) und Sie sollten die gleiche Form haben, aber jetzt mit etwas Dicke.

Schritt 12

Nehmen Sie die vordere Hälfte der Teardrop-Oberfläche und tragen Sie sie auf die verbleibenden vorderen Ecken auf, die den Richtlinien für den Motor entsprechen.

Sie haben jetzt so ziemlich zwei leicht unterschiedliche Formen.

Schritt 13

Sie können die unnötigen Linien bereinigen (diese beiden Formen bilden eine Fläche im hinteren Teil, wo sie sich treffen) und die Linie, die von der unteren Kurve zur oberen Kurve verläuft, bei der neueren Form korrigieren.

Diese Linie sollte die gleiche Steigung von 2:1 beibehalten, die wir auf den Richtlinien gezeichnet haben.

Schritt 14

Jetzt fügen wir einige Dachlinien hinzu. Vieles davon zeichnet die gleichen Linien wie in den Richtlinien nach, aber das ist natürlich kein Problem, wenn Sie sich an den Shift-Trick mit dem Bleistiftwerkzeug erinnern.

Hier wird eine weitere Zeilenreihe hinzugefügt. Um dem Helikopter etwas mehr Breite zu geben, als das Guideline-Sandwich vorgeschlagen hat, wollen wir auch die Ecken der Kabine abrunden können, was die Guidelines nicht berücksichtigt haben.

Sie kennen den Shift-Trick mit dem Pencil Tool nicht? Klicken Sie einfach mit dem Bleistiftwerkzeug auf einen Punkt, halten Sie die Umschalttaste gedrückt, klicken Sie auf einen anderen Punkt und eine gerade Linie verbindet die Punkte.

Schritt 15

Setzen Sie die Arbeiten am Dach fort, stellen Sie das Dach fertig und verbinden Sie die Leitungen nach Belieben.

Schritt 16

Einige weitere Verbindungen gleich hier.

Beachten Sie die Keilform, an der sich die beiden unteren Ecklinien der Kabine sehr nahe der Rückseite des Motors verbinden.

Schritt 17

Um einen größeren Teil der Kabine abzudecken, werden einige Linien direkt über dem Führungssandwich gezogen. Beim Überqueren überspringen die Linien jedoch zwischen den Sandwichschichten und bilden eine gerade Linie.

Schritt 18

Und zum Schluss geben wir der Kabine eine Rückseite. Wir behalten die gezackte Diagonale nicht von den Richtlinien, daher können wir in diesem Bereich etwas kreativ sein, da Sie geschwungene Formen haben, die sich mit anderen geschwungenen Formen verbinden. Im Grunde können Sie also etwas weniger genau sein, solange Sie etwas tun, von dem Sie denken, dass es gut aussieht.

Schritt 19

Zeichnen Sie den gesamten Heckausleger neu; keine Änderungen daran.

Sie möchten nicht neu zeichnen? Sie können auch auf die Hilfslinienebene gehen, die Umrisse mit dem Zauberstab-Werkzeug auswählen und dann mit dem Polygonal Lasso-Werkzeug (Anti-Alias abgehakt und Feder bei 0 px) nur den Ausleger schneiden (mit dem oben erwähnten Alt-Shift-Trick))… kopieren Sie das und fügen Sie es ein (Bearbeiten > Inhalte einfügen > An Ort und Stelle einfügen) und fügen Sie es mit der Konturebene zusammen.

Das klingt wahrscheinlich komplizierter als das Neuzeichnen, aber wenn all diese Tipps zur zweiten Natur werden und Sie all Ihren häufigen Aktionen Tastaturkürzel geben, dauert ihre Verwendung sehr wenig Zeit.

Schritt 20

Jetzt können Sie mit dem Neuzeichnen des Rotors beginnen. Wir können an der Basis etwas zusätzliches Volumen hinzufügen.

Schritt 21

Lassen Sie uns die Klingen auf einer neuen Ebene erstellen.

Wir können ein bisschen eine Kappensache hinzufügen, wo sich die beiden Klingen treffen.

Schritt 22

Die Klingen sollten nach dem Punkt, den wir auf der Leitlinie gezeichnet haben, etwas breiter werden.

Schritt 23

Sobald Sie eine Klinge nach Ihren Wünschen gezeichnet haben, können Sie sie kopieren und um 180° drehen (Bearbeiten > Transformieren > 180° drehen) und auf die andere Seite legen.

Schritt 24

Um unseren Helikopter etwas mehr aus der gleichen Ebene zu brechen, können wir die Rotorblätter in eine gespiegelte Position bringen (Bearbeiten > Transformieren > Horizontal spiegeln).

Schritt 25

Wir haben keine Stabilisatoren in die Richtlinien aufgenommen, aber sie sind sehr einfach hinzuzufügen. Fügen Sie einfach ein Rechteck ganz in der Nähe des Heckauslegers hinzu...

… und ein weiteres auf der gegenüberliegenden Seite des Heckauslegers.

Schritt 26

Und noch etwas haben wir nicht auf die Richtlinien bezogen; Hubschrauber brauchen Heckrotoren, um ihre Richtung zu steuern.

Beginnen Sie mit einem dünnen Stab, der senkrecht aus dem Schwanz zeigt.

Schritt 27

Und gib ihm ein schönes, kleines Paar Klingen.

Und endlich haben wir die Formen unten!

4. Details und Farbe hinzufügen

Nun zu den Details und der Farbe. Beginnen wir mit dem Hinzufügen einiger Fenster.

Schritt 1

Die untere der Dachlinien kann die Oberseite unserer Fenster bilden. Wir müssen nur ein Endergebnis hinzufügen.

Schritt 2

Dank des Guideline-Sandwiches haben wir bereits eine Linie mitten in der Kabine. Legen Sie also einfach ein Paar Linien auf beiden Seiten dieser Linie und Sie haben den Spalt in der Mitte der Windschutzscheibe.

Schritt 3

Fügen Sie dann die verbleibenden Pausen für die restlichen Fenster hinzu.

Schritt 4

Und die Aufgabe des Richtlinien-Sandwichs ist hier erledigt.

Löschen Sie es… oder machen Sie die Ebene unsichtbar, wenn Sie sentimental sind. In der Tat möchten Sie vielleicht laufende Elemente oder fehlgeschlagene Versuche irgendwo aufbewahren, da irgendwann eine Reihe von Dingen wieder nützlich werden können.

Schritt 5

Jetzt können Sie den Helikopter mit der Farbe Ihrer Wahl füllen.

Schritt 6

Und jetzt fangen wir an, die richtige Beleuchtung hinzuzufügen – zunächst mit einigen Bereichen, von denen wir erwarten können, dass sie etwas heller leuchten.

Schritt 7

Und dann mehr Bereiche abdecken, wie Peak-Ecken. Wir werden auch einen weiteren, helleren Farbton für Bereiche hinzufügen, in denen wir etwas mehr hervortreten möchten.

Zu den Fensterfarben kommen wir gleich.

Schritt 8

Fügen Sie nun dunklere Farbtöne auf einer der Seiten hinzu, auf den Bereichen, die sich biegen und nach unten zeigen und von der üblichen oberen Lichtquelle weg weisen.

Schritt 9

Fügen Sie dann für einige ausgewählte Bereiche einen weiteren, dunkleren Farbton hinzu.

Schritt 10

Nachdem die grundlegende Schattierung abgeschlossen ist, können Sie die Talecken weicher machen, um die Art und Weise zu vermitteln, wie sich die Elemente verbinden / verschmelzen.

Schritt 11

Wählen Sie nun eine Fensterfarbe aus, die Ihnen gefallen könnte. Ich habe meine ganz dunkel gemacht; Das Aussehen hat mir gefallen.

Schritt 12

Wenden Sie den Glaseffekt Ihrer Wahl an. Normalerweise zeige ich diese helleren Linien gerne parallel zu den Glasrändern, da sie meiner Meinung nach entweder als Spiegelung der Außenseite der Fensterrahmen oder als Blick in die Innenseite der Fensterrahmen gelesen werden können, was in Ordnung ist in jedem Fall.

Schritt 13

Jetzt noch ein bisschen Glaseffekt: Wir machen das Glas nur leicht durchsichtig, indem wir etwas Licht durch die Fenster auf der unsichtbaren Seite des Helikopters lassen.

Beginnen Sie mit der richtigen Form der Fenster.

Und dann platzieren Sie sie dort, wo sie hin sollen – an der gegenüberliegenden Wand der Helikopterkabine – und geben Sie ihnen eine der helleren Fensterfarben.

Auch hier habe ich die Linie parallel zur Front der Windschutzscheibe dicker gemacht. Ich denke, es sieht so aus, als würden wir einen Blick auf die Bedienelemente des Cockpits werfen.

Schritt 14

Helikopter haben normalerweise mehr als eine Farbe, aufgetragen als Streifen oder viele andere Formen, aber ich lasse meine unten einfach sehr hellgrau haben.

Dies ist der Bereich, der die neue Farbe erhalten wird. Dies geschieht in einer neuen Ebene.

Schritt 15

Dann senke ich einfach die Deckkraft der Ebene und füge die Ebene bis zur roten Farbe zusammen.

Schritt 16

Und dann alle Abschnitte mit einem Farbton neu färben, der mir gefällt.

Wenn Sie möchten, können Sie die neue Farbe auch auf das Fahrwerk auftragen. In jedem Fall sollte auch das Fahrwerk etwas abgeschattet werden.

Schritt 17

Geben Sie den Rotoren ein dunkles Grau.

… und in den Bereich zwischen den Klingen.

Schritt 18

Und geben Sie den Klingen ihren letzten Farbton. Ich wählte ein helleres Grau und gab den Spitzen der Klingen etwas Gelb.

5. Landen oder fliegen Sie den Hubschrauber

Lassen Sie uns beenden, indem wir unserem Hubschrauber zwei Zustände geben; es kann sich entweder auf dem Boden befinden (in diesem Fall sollte es einen Schatten direkt darunter projizieren) oder in der Luft sein, in diesem Fall sollten wir die Klingen in Bewegung zeigen.

Schritt 1

Beginnend mit dem geerdeten Zustand.

In einer neuen Ebene zeichnen wir schwarze flache Formen für jeden Hauptabschnitt des Hubschraubers.

Hier ist die Kabine.

Schritt 2

Hier ist der Schwanz.

Schritt 3

Und hier ist der Schatten der oberen Klingen.

Schritt 4

Dann setzt du sie zusammen. Sie sollten auf der Achse des Helikopters zentriert sein.

Schritt 5

Um den Schatten anzuwenden, verschieben Sie diese Ebene unter den Hubschrauber und verringern Sie die Deckkraft. Dies ist 15% Deckkraft.

Und das ist der geerdete Hubschrauber, der auf jeder ebenen Fläche platziert werden kann.

Schritt 6

Machen Sie für den Flugzustand des Hubschraubers Kreise, um die Blätter für jeden Rotor in einer neuen Ebene zu ersetzen.

Sie sollten in der Breite den Klingen entsprechen. Der Kreis der oberen Blätter muss doppelt so breit wie hoch sein, um der isometrischen Ansicht zu entsprechen, während der Heckrotor ein Kreis mit einer Schräglage von 26,5˚ sein sollte … oder etwa so:

Dies wird mit schwarzer Farbe aufgetragen, verleiht der Ebene jedoch eine geringere Deckkraft.

Schritt 7

Behalten wir nur eine 1-Pixel-Umrisslinie dieser Kreise bei. Das geht ganz einfach, indem Sie jeden Kreis mit dem Zauberstab-Werkzeug auswählen, dann die Auswahl um 1 px verkleinern (Auswählen > Ändern > Verkürzen) und die resultierende Auswahl löschen.

Schritt 8

Fügen Sie dann ein paar gelbe Kreise hinzu, die für die gelben Spitzen der Klingen stehen.

Schritt 9

Und füllen Sie die Innenseite mit mehr Schwarz, mit geringerer Deckkraft als die schwarzen Umrisse.

Schritt 10

Für den letzten Bewegungseffekt können Sie die Deckkraft der sich drehenden Klingen in ein paar Keilformen verringern.

Sie können dies tun, indem Sie diese gespiegelten 1/4-Keilformen auf eine neue Ebene zeichnen, alle mit einer Deckkraft von 50%, da wir nicht die gesamten Keile entfernen, sondern nur ihre Deckkraft verringern.

Sobald die Keile gezeichnet sind, wählen Sie sie aus, indem Sie bei gedrückter Befehlstaste auf die Ebene klicken. Dadurch wird eine Auswahl mit derselben Form und Deckkraft wie die angeklickte Ebene erstellt.

Klicken Sie dann auf der Ebene der sich drehenden Klingen auf Löschen und Sie entfernen 50% Deckkraft auf dieser Ebene, um dies zu erhalten:

Fast hört man diesen Helikopter fliegen!

Hubschrauber fertig!

Schön, dass du es geschafft hast! Jetzt kann dein Charakter schneller fliegen und sich bewegen als mit dem Auto, und deine isometrische Pixel-Art-Bibliothek mit wiederverwendbaren Gegenständen wächst weiter!

Der Himmel ist die Grenze!