Kandi Runner: Erstellen eines Pixel-Art-Sprites von Grund auf neu

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Letztes Jahr haben wir ein Spiel-Sprite-Design erstellt, einen Walk-Zyklus erstellt und einen Side-Scroller mit diesem Sprite codiert (Links am Ende dieses Tutorials). In diesem Jahr wollte ich den Einsatz verbessern und eine Pixel-Art-Version von Kandi aus einer neuen Sicht von Grund auf neu erstellen.

Folgen Sie uns, wie in diesem Tutorial ich Ihnen zeigen werde, wie Sie diese Fähigkeiten erweitern können, um ein eigenes Pixel-Art-Spiel-Sprite zu erstellen.

1. Den Kopf machen

Schritt 1

Ähnlich wie im letzten Tutorial, das ich zu diesem Charakter gemacht habe und das ihr Design festgelegt hat, beginne ich mit einer kurzen Skizze, um ihre Funktionen festzunageln und mich beim Erstellen der Pixel-Art-Version auf dem Laufenden zu halten. Ich habe dies in Adobe Photoshop CC 2014 gezeichnet, obwohl Sie jedes gewünschte Zeichenprogramm (oder eine Kombination aus Bleistift und Papier) verwenden können. Lassen Sie uns unser Dokument für das Sprite einrichten.

Erstellen Sie ein neues Dokument in Adobe Photoshop (in diesem Lernprogramm werden häufig Ebenen verwendet. Obwohl Sie also etwas wie MS Paint verwenden können, empfehle ich ein Programm mit Ebenenfunktionen). Die endgültige Dokumentgröße für das von mir erstellte Sprite beträgt ca. 58 x 150 Pixel. Verwenden Sie das Bunttift-Werkzeug (B) mit 1 Pixel und zoomen Sie (Z) auf etwa 3200%. Erstellen Sie außerdem ein zusätzliches Vorschaufenster, indem Sie zu Fenster > Anordnen > Neues Fenster... wechseln. Auf diese Weise können Sie das Aussehen Ihrer Grafik zu 100% im Auge behalten, anstatt wiederholt hinein- und herauszuzoomen.

Schritt 2

Ich habe das Gesicht mit 5 Pixel nach unten, 2 Pixel nach unten, 2 Pixel nach unten, 2 Pixel nach unten und 4 Pixel nach unten gezeichnet. Wiederholen Sie dies auf der anderen Seite. Ich habe die oberste Zeile des Kopfes mit einem dunklen Rosa ausgefüllt. Das Gesicht wird dunkler rosa umrandet als die in diesen Bildern gezeigten (siehe nächster Schritt).

Die Oberseite der Augen ist ein sehr dunkles Blau (fast schwarz, aber nicht ganz) mit 3 Pixeln in der Breite, 1 diagonal außen und 2 unten innen.

Die Nase hat einen Durchmesser von 2 Pixel in der Mitte des Gesichts. Die Oberlippe des Mundes hat einen Durchmesser von 4 Pixel, die Unterlippe 2 Pixel direkt darunter. Alle Farben stammen aus dem ursprünglichen Sprite-Design.

Schritt 3

Nachdem ich die Umrissfarbe in dunkles Magenta geändert habe, habe ich begonnen, das Gesicht auszufüllen und den Augen mehr Form zu geben. Anfangs sind sie sehr rund. Dies wird etwas später geändert, aber im Moment erhalten Sie eine gute Vorstellung von der Struktur des Gesichts und davon, wo Schatten und Lichter platziert werden.

2. Das Haar erstellen

Schritt 1

Lassen Sie uns mit ausgefülltem Gesicht daran arbeiten, die Haare zusammenzubekommen. Kandi hat gummiwurmartige Haare, die in große seilartige Stücke unterteilt sind. Die unteren Ecken sind leicht abgerundet und die Teile verjüngen sich oben. Wenn Sie die Anzahl der Pixel von 4 auf 3 auf 2 und zurück auf 4 ändern, erhalten Sie eine diagonale Kurve.

Ich finde es vorerst am einfachsten, für jede Haarsträhne eine neue Ebene zu erstellen, damit ich ihre Umrisse leicht zeichnen und unnötige Pixel löschen kann. Füllen Sie jedes Schloss mit einer helleren Farbe als der Umriss aus, abwechselnd in Pink, Orange, Gelb und Limonengrün.

Ich habe die Form der Augen an den unteren Ecken geändert, da das Quelldesign eher eine Cat-Eye-Form für die Wimpernlinie hat (was bedeutet, dass es in einem Punkt hochgeht).

Schritt 2

Ein Herz ist ziemlich einfach. 2 Pixel auf jeder Seite von 1 Pixel. Runden Sie die Oberseite ab, indem Sie 2 Pixel diagonal von der oberen Reihe nach unten gehen. Vervollständige das Herz mit 5 Pixeln, die eine V-Form bilden. Füllen Sie dieses Herz mit warmem Pink und einer hellen Cremefarbe.

Ich legte das Herz auf den Kopf und fügte darüber und um ihn herum kleine, abgerundete Formen hinzu, die die Oberseite ihres Pferdeschwanzes zeigten.

Ihr Haar besteht zu diesem Zeitpunkt aus 4 großen Locken, um ihren Pony (oder Pony) zu erzeugen, 3 kleineren Locken für die Oberseite ihres Pferdeschwanzes und 2 längeren Locken auf beiden Seiten ihres Kopfes.

Schritt 3

Zwei Dinge, an denen Sie in diesem Schritt arbeiten müssen: Markieren Sie das Gesicht und fügen Sie ein langes Schloss hinzu, das nicht im Pferdeschwanz gebunden ist. Beachten Sie, dass der Schatten auf dem langen Schloss vorerst dieselbe Farbe wie der Umriss hat und im unteren Bereich des Gesichts heller wird.

Verwenden Sie für den dem Gesicht hinzugefügten Schatten das dunkle Rosa aus Abschnitt 1, Schritt 2. Zeichnen Sie die Seite des Gesichts mit dieser Farbe und platzieren Sie ein Pixel in jeder Ecke der unteren Gesichtshälfte. Verwenden Sie einen helleren Hautton (was Sie auswählen, hängt von dem Hautton ab, den Sie für Ihr Sprite-Design ausgewählt haben), um den Wangen des Sprites Highlights zu verleihen.

Schritt 4

Zeichnen Sie ein Schloss auf der anderen Seite des Kopfes. Ich habe beschlossen, diese Form für das Schloss auf der linken Seite einzigartig zu machen. Verwenden Sie das dunkle Magenta, das auf 50% Deckkraft eingestellt ist, um die Teile der Schlösser, die den Augen und dem Überhang der Pony-Pony am nächsten liegen, weiter zu schattieren.

Verwenden Sie außerdem dunkles Blau und Purpur mit einer Deckkraft von 30-50, um die Pixel zu schattieren, die der Mitte des Pferdeschwanzes am nächsten liegen, und die Haarkanten, die dem Gesicht am nächsten liegen. Beachten Sie den Schatten direkt über den Augen sowie um das Herz im Haar.

Verwenden Sie außerdem die Umrissfarbe des rosa Schlosses, um Pixel zu versetzen und Schattenformen sanft in die Unterseite des Haarteils und auf die langen Locken an der Seite des Gesichts zu zittern. Wenn Sie mit einer eingeschränkteren Palette arbeiten möchten, können Sie mit dieser Option weiterhin schattierte Bereiche erstellen. Es ähnelt dem Schraffieren beim Zeichnen mit Bleistift oder Tinte oder beim Verwenden von Halbton zum Drucken.

3. Den Körper zeichnen

Schritt 1

Der Körper besteht hauptsächlich aus grau-lila, wieder eine Farbe, die im zuvor veröffentlichten ursprünglichen Vektordesign festgelegt wurde. Der Hals ist kurz (und ihr Hemd ist wie ein Rollkragenpullover). Beginnen Sie also mit zwei Pixeln auf beiden Seiten des Kinns, wobei eine lange Reihe von Pixeln zwischen den Haaren unterhalb des Kinns verläuft.

Da das Haar einen Teil der Schultern verdeckt, funktioniert es am besten, wenn Sie es auf eine Ebene unter dem Haar zeichnen, damit es nicht zu klein oder zu breit ist. Beziehen Sie sich auf Ihre (oder meine) erste Skizze für die Gesamthaltung des Charakters, während Sie den Arm hinuntergehen und beginnen, Brust, Taille und Hüften zu formen.

Das Hemd des Sprites hat einen herzigen Ausschnitt (herzartig oben, über der Brust), den ich mit der Mitte ihres Gesichts ausgerichtet habe. Von dort tritt das Hemd auf beiden Seiten aus, bildet eine kleine Taille und krümmt sich nach außen in dicke Hüften. Da es sich bei der Figur um eine einfache, direkte Ansicht handelt, wird die linke Seite des Umrisses ihres Körpers für die rechte Seite gespiegelt.

Schritt 2

Im Moment werden wir mehr an Armen, Körper und Beinen als an den Händen arbeiten. Pixel auf beiden Seiten ihrer Arme sind um den Schulter- und Bizepsbereich länger und werden zu einfachen 2 x 2 diagonalen Linien für die Unterarme. Das gleiche passiert von der Taille bis zu den Hüften.

Für das Bein habe ich beide Seiten verjüngt, um mich am Knie zu treffen, das eher abgerundet als spitz ist. Die Innenseite des Beins vom inneren Oberschenkel bis zum Knöchel ist eine leicht gekrümmte (wenn auch meist gerade) diagonale Linie, während der äußere Oberschenkel und die Wade dramatischer gekrümmt sind.

Der herausgeschleuderte Abschnitt im unteren Teil der Wade ist Teil des Schuhdesigns des Sprites. Der Vorschub ist klein und abgerundet und zeigt in diesem Design nach innen, um die Rüstung und die Schuhe des Sprites detaillierter darzustellen.

Wenn Sie mit dem linken Bein zufrieden sind, können Sie es mit dem rechteckigen Auswahlwerkzeug (M) oder dem Lasso-Werkzeug (L) auswählen, kopieren (Strg-C) und einfügen (Strg-V). Um das Bein zu reflektieren, gehen Sie zu Bearbeiten > Transformieren > Horizontal spiegeln und verschieben Sie es mit dem Verschieben-Werkzeug (V) in einer Linie mit der rechten Hüfte.

4. Färben des Torsos

Schritt 1

Das Sprite hat einen V-förmigen, großen Gürtel über den Hüften. Die Oberseite des Gürtels besteht aus zwei diagonalen Linien, 1 Pixel für jede Linie, die sich mit einem Durchmesser von 2 Pixeln treffen. Etwa 9 Pixel nach unten trifft sich auch die Mitte der Unterseite des Gürtels mit einem Durchmesser von 2 Pixel. Bewegen Sie sich in dem folgenden Muster in jeder Zeile nach außen: 1 Pixel, 1 Pixel, 2 Pixel, 2 Pixel und 3 Pixel. Dies sollte die Seite der Hüften erreichen.

Ich habe eine helle Krickente für die Füllfarbe des Gürtels gewählt. Wählen Sie eine dunklere Krickente für den Umriss und einige Pixel in den Ecken, in denen der Körperumriss auf das Gürteldesign trifft. Wählen Sie eine mittlere Krickente, um die Seiten und einige Linien zur Mitte des Gürtels hin zu schattieren.

Schritt 2

Die gleiche Farbe von der Oberlippe wurde verwendet, um das Hemd des Sprites zu umreißen, und die vorherige Umrissfarbe wird für die Oberseite des Rollkragens verwendet. Beide Schultern sind nackt, verwenden Sie also die gleichen Farben vom Gesicht. Ein helleres Flieder wurde verwendet, um die Highlights im Oberteil des Shirts zu beginnen.

Schritt 3

Ich habe mich dafür entschieden, das Oberteil auf diese Weise in großen Farbstücken zu schattieren und hervorzuheben, um Designs auf dem Oberteil zu erstellen und darauf hinzuweisen, dass das Material rüstungsartig ist und nicht nur ein Hemd.

Behalten Sie für den Ärmel am Arm die gleiche Umrissfarbe bei, die Sie zuvor verwendet haben, und füllen Sie das Oberteil des Hemdes mit dem gleichen lila Farbton aus. Schattieren Sie den Ellbogen und zeigen Sie Rippen im oberen Teil des Ärmels (an der Schulter) an. Verwenden Sie ein dunkleres Lila für den Umriss auf der Innenseite des Arms. Platzieren Sie für die Highlights einige Pixel an der Außenseite des Arms sowie in der Mitte der Rippen oben am Ärmel.

5. Färben der Beine

Schritt 1

Füllen Sie die Beine mit den gleichen Farben für Schatten und Lichter aus, wie sie auf den Ärmeln verwendet werden. Beachten Sie die Staffelung der Pixel oben auf den Oberschenkeln, wo der Gürtel auf die Hüften trifft. Ich habe auch dunklere Pixel am Umriss der Leiste des Sprites hinzugefügt.

Schritt 2

Platzieren Sie Ihre Schattenfarbe um den inneren Rand der Beine und den oberen Teil der Knie. Da der Charakter rüstungsähnliche Kleidung trägt, sind die Knie umrissen (in einem mechanischen, roboterartigen Design).

Schritt 3

Es ist an der Zeit, eine Hand hinzuzufügen. In Abschnitt 1, Schritt 1 finden Sie eine Skizze meines Sprite-Designs für ihre Handposition. Sie sind leicht eingedreht, sodass ein Teil der Oberseite der Hand zusammen mit zwei Fingern und einem Daumen sichtbar ist.

Ich begann mit einer kastenartigen Form, die sich am Ende in ihrem pfirsichfarbenen Hautton verjüngt, sie mit dunklem Magenta umriss und ein diagonales Band in Blaugrün für ihre fingerlosen Handschuhe zeichnete. Schattieren Sie die Außenkante des Handschuhs mit dunkler Krickente und verwenden Sie eine mittlere Krickente, um das Material zu variieren (wie am Gürtel in Abschnitt 4, Schritt 1).

Verwenden Sie für die Hand selbst die gleichen Farben aus dem Gesicht, die am Ende der Hand heller werden. Die Finger treffen sich in einem Punkt und zeigen die Längenunterschiede zwischen Zeige-, Mittel- und Ringfinger. Der Daumen befindet sich am inneren Rand und ist halb so groß wie die Hand (erstreckt sich nur ein wenig über die Handfläche hinaus).

Kopieren Sie den linken Arm und die linke Hand und fügen Sie sie ein. Drehen Sie sie horizontal und richten Sie sie in einer Linie mit der rechten Schulter aus.

Schritt 4

Kehren Sie zu den Beinen zurück und schattieren Sie sie auf die gleiche Weise wie die Arme: Fokussieren Sie die Schatten auf beiden Seiten der Oberschenkel, um ihnen ein abgerundetes Aussehen zu verleihen, und platzieren Sie Glanzlichter in einer Linie nahe der Mitte neben dem dunklen Schatten. Dadurch sehen die Beine glänzend und metallisch aus. Fühlen Sie sich frei, dies mit helleren Hotspots innerhalb der Highlights weiter voranzutreiben. Wiederholen Sie dies am anderen Oberschenkel.

Schritt 5

Fahren Sie mit Schattenlinien fort und markieren Sie die Waden. Beachten Sie beim Zeichnen der Linien die Krümmung der Oberschenkel und Waden. Optional können Sie die Pixel versetzen, um einen fein schattierten Bereich zu erstellen.

Verwenden Sie dunkles Magenta, um die verkürzte, gamaschenartige Manschette am Knöchel des Sprites zu umreißen, und füllen Sie sie mit demselben Magenta auf, das auch für die Haare verwendet wurde. für Strähnchen verwenden Sie Hotpink (wiederum von den Haaren des Sprites).

Fügen Sie eine dunklere Schattenlinie entlang der Außenkante des Lebensmittels und einen Schattenfarbblock auf der Oberseite des Fußes nahe der Kante der Gamaschen hinzu.

5. Letzte Berührungen

Schritt 1

Ich habe den inneren Teil ihrer Augen aufgehellt und den Weißen Grau hinzugefügt, damit sie weniger stark sind. Zusätzlich zeichnete ich mintgrüne Locken hinter ihren Kopf und füllte den Raum zwischen den langen rosa Locken und ihrem Hals aus (siehe letztes Bild).

Schritt 2

Im Originaldesign hat Kandi ausgeschnittene Herzen an den Seiten ihrer Oberschenkel. Nachdem Sie in Abschnitt 2, Schritt 2 Herzen gezeichnet haben, wiederholen Sie dies für ein halbes, ein Viertel und ein Achtel eines Herzens entlang der Seite ihres Oberschenkels. Alternativ können Sie eine neue Ebene erstellen, drei Herzen zeichnen und die Pixel löschen, die sich nicht im Oberschenkel befinden. Schatten mit dunklem Rosa und füllen Sie mit ihrem Hautton. Wiederholen Sie auf der anderen Seite.

Schritt 3

Ich zeichnete eine Linie auf ihren Fuß, um ein bisschen mehr wie das Knie zu sein (wie Roboterteile abgetrennt), und zeichnete eine kleine Schachtel (2 x 2) in die Ecke ihrer Wade. Löschen Sie fremde Pixel außerhalb des Körperumrisses.

Großartige Arbeit, Sie sind fertig!

Speichern Sie Ihr Dokument als transparentes GIF oder PNG, um die Wiedergabetreue seiner Pixel und Kanten zu erhalten. Wenn Sie es vergrößern möchten, stellen Sie sicher, dass im Dropdown-Menü Resample die Option Nächster Nachbar ausgewählt ist, bevor Sie die Größe ändern. Dies bewahrt Ihre Pixel in ihrer Gesamtheit und vermeidet das Verwischen Ihrer harten Arbeit.

Weitere Tutorials zur Pixelkunst finden Sie in den folgenden Abschnitten: