Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Animation

Kandi Runner: Erstellen eines fertig animierten Vektor-Spiel-Sprites

by
Length:LongLanguages:

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

Es gibt nur wenige Projekte, die mehr Spaß machen, als Konzepte für Videospielcharaktere zu entwerfen. Die Farben, die Kleidung und das Gesamtdesign haben für den Konzeptkünstler nur wenige Einschränkungen. In diesem dreiteiligen Tutorial mit den Teams After Effects und Game Development auf Tuts+ zeichnen wir eine Vektorfigur, die für die Animation in Adobe Illustrator und mehr bereit ist.


Erstellen des Kandi Runner-Spiels

Unsere Kandi Runner-Reihe erstreckt sich über drei Tutorials. In diesem Teil lernen Sie, wie Sie das Vektorspiel-Sprite erstellen. Sie sollten sich jedoch auch die beiden anderen Tutorials der Serie ansehen.

Drücken Sie die Leertaste, um zu springen.

Tutorial Asset

Wenn Sie diesem Tutorial folgen möchten, können Sie die Skizze herunterladen.


1. Bereiten Sie Ihr Design vor

Unser Spiel-Sprite wird im Profil sein, sodass die Animationskomponente der Überkreuzung einen Laufzyklus enthalten kann. Aus diesem Grund habe ich mein Design in Adobe Photoshop CC skizziert. Beginnend mit schnellen Linien, die den Gesamtstil des Charakters und der Proportionen angeben, und endend mit einem dunkleren, eingefärbten Design, das für die Adobe Illustrator-Behandlung bereit ist. Beachten Sie, dass sich die Proportionen in dieser Skizze während des Tutorials etwas ändern. Die einfache Skalierung ermöglicht schnelle Änderungen der Kopf- und Körpergröße im Vergleich zum vollständigen Neuzeichnen.

sprite-001

2. Zeichnen Sie den Kopf und die Haare

Schritt 1

Für den Kopf habe ich mit einem Kreis begonnen, der mit dem Ellipsen-Werkzeug (L) gezeichnet wurde. Der untere Gesichtsteil wurde mit dem Zeichenstift-Werkzeug (P) aus der Skizze nachgezeichnet. Vereinen Sie beide Formen in Pathfinder, wenn Sie mit dem von Ihnen erstellten Profil zufrieden sind.

sprite-002

Schritt 2

Das Haar ist in großen, bunten Abschnitten gemacht. Ich wollte, dass sie absolut massive Dreadlock-ähnliche Haare hat (fast wie eine Stoffpuppe). Verwenden Sie das Zeichenstift-Werkzeug, um jeden Haarabschnitt zu zeichnen. Insgesamt werden hier zehn gezeichnet, die schließlich einzeln getrennt und umrissen werden, damit sie animiert werden können. In der Zwischenzeit gruppieren (Control-G) Ihre Haarteile.

sprite-003

Schritt 3

Blenden Sie das Gesicht im Ebenen-Bedienfeld ein und stellen Sie sicher, dass Sie mit der Art und Weise zufrieden sind, wie die Haare um den Kopf hängen, und dass das Gesicht, das später gezeichnet wird, nicht verdeckt wird.

sprite-004

3. Zeichnen Sie das Bein und den Körper

Schritt 1

Bewegung auf die Beine und den Oberkörper. Beginnen Sie mit dem Oberschenkel und der Unterseite des Charakters. Sie trägt eine Art Rüstung (ich stellte mir das als eine Art Action-Puzzle-Spiel vor. Vielleicht fährt sie ein fliegendes Fahrzeug und benötigt die Rüstung, um sie zu schützen. Als solche ist es eher eine lila-graue Farbe als ein schlichtes Grau. Im Moment ist das Oberteil des Outfits hellrosa. Später mache ich das blaugrün. Diese drei Teile bilden den Oberkörper und den Oberschenkel und halten am Knie an.

sprite-005

Schritt 2

Zeichnen Sie für den Unterschenkel und das Knie ein Kniestück (wie einen abgewinkelten Halbkreis) und folgen Sie der Skizze für den Umriss der Wade und der Unterseite des Fußes. Ich habe den Beinteil oben am Fuß mit der Idee gestoppt, dass das Kostüm alte Gamaschen enthält (denken Sie an das Modedesign der 1920er Jahre). Das untere Fußstück hat eine separate Form.

sprite-006

Schritt 3

Zeichnen Sie für den hinteren Teil des Stiefels/Schuhs eine Ellipse mit dem Ellipse-Werkzeug, wählen Sie das Beinteil aus und wählen Sie mit dem Formerstellungswerkzeug den Teil der Ellipse aus, der sich außerhalb des Fußes befindet. Deaktivieren und löschen Sie dieses zusätzliche Stück.

sprite-007

4. Zeichnen Sie den Arm und die Hand

Schritt 1

Auf der linken Seite sehen Sie den Charakter bis jetzt. Sie hat ein Kostüm, braucht aber einen Hals, eine Brust und einen Arm. Folgen Sie der Skizze und zeichnen Sie den Hals und einen Teil der Brust. Platzieren Sie diese hinter den Rumpfstücken im Ebenen-Bedienfeld.

sprite-008

Schritt 2

Für den Arm habe ich mit einer Ellipse (die Schulter bezeichnet) begonnen und einen Arm hinzugefügt, der am Ellbogen einkerbt. Wenn Sie diesen Charakter animieren, möchten Sie möglicherweise den Bizeps vom Unterarm trennen, um mehr Bewegung zu erhalten. Der Arm bleibt etwas hinter dem Handgelenk stehen, wo ich eine Form gezeichnet habe, die auf die Handfläche hinweist.

sprite-009

Schritt 3

Für die Hand habe ich die Armformen versteckt, damit wir uns darauf konzentrieren können, der Handfläche Finger hinzuzufügen. Mit dem Zeichenstift-Werkzeug habe ich eine abgerundete rechteckige Form (diese hat jedoch eine flache Seite und eine gekrümmte Seite) für den Daumen gezeichnet. Verwenden Sie das Abgerundete-Rechteck-Werkzeug für die anderen Finger. Ich habe den kleinen Finger rausgeschmissen, damit die Hand nicht zu steif aussieht.

sprite-010

5. Body Bearbeitungen und Ergänzungen

Schritt 1

Bevor wir zu den Umrissen und Schattierungen des Charakters kommen, konzentrieren wir uns zunächst auf einige Änderungen und Ergänzungen. Wählen Sie die Oberkörper- und Beinteile aus, gruppieren Sie sie vorerst und vergrößern Sie sie ein wenig. Siehe unten für den Vergleich zwischen dem vergrößerten und dem kleineren Körper. Auf diese Weise hat sie einen großen Oberkörper und längere Beine, um ihren großen (und wahrscheinlich schweren) Kopf auszugleichen.

sprite-011

Schritt 2

Der Rücken des Charakters ist etwas klein und flach, daher habe ich den Ankerpunkt ganz rechts aus der ursprünglichen Form herausgezogen. Außerdem habe ich ein Hemd mit hohem Kragen hinzugefügt, das sie tragen kann, indem ich über die Brustform mit einer dunkelviolettgrauen Form gezeichnet habe, sowohl die Brust- als auch die Hemdform ausgewählt habe und mit dem Formerstellungswerkzeug den sich nicht überschneidenden Teil von ausgewählt habe die Hemdform. Deaktivieren Sie beide und löschen Sie die überschüssigen Hemdteile. Platzieren Sie das Hemd über dem Schachbrett im Ebenen-Bedienfeld.

sprite-012

Schritt 3

Anstelle eines vollen Handschuhs entschied ich mich für einen mit einer unteren Handgelenkslinie. Ändern Sie dazu die Farbe des aktuellen Handschuhs in den Hautton Ihres Charakters. Kopieren (Strg-C) Sie dann die Hand und fügen Sie sie ein (Strg-V), richten Sie sie an der ursprünglichen aus und zeichnen Sie mit dem Ellipse-Werkzeug einen Kreis. Wählen Sie im Pathfinder die neue Hand sowie die Ellipse und die Vorderes Objekt abziehen aus.

sprite-013

Schritt 4

Lassen Sie uns ein paar Herzen bauen. Zeichnen Sie mit dem Ellipse-Werkzeug einen Kreis und ziehen Sie mit dem Direktauswahl-Werkzeug(A) den unteren Ankerpunkt nach unten, sodass Sie eine Herzhälfte haben. Kopieren Sie die Herzhälfte, fügen Sie sie ein und drehen Sie sie über eine vertikale Achse. Sobald Sie in der Mitte ausgerichtet sind, Vereinen in Pathfinder.

sprite-014

Schritt 5

Kopieren und fügen Sie drei Herzen entlang des Oberschenkels des Charakters ein. Diese sollten hautfarben sein. Fügen Sie dem Handschuh auch ein kleineres, umgedrehtes Herz hinzu.

sprite-015

6. Erstellen Sie die Gesichtsdetails

Schritt 1

Konzentrieren Sie sich für das Auge auf vier Teile: obere und untere Wimpern, eine weiße Tropfenform für die Seite des Auges und eine dünne Ellipse für die Iris. Alle wurden mit dem Zeichenstift-Werkzeug gezeichnet, mit Ausnahme der Iris, die mit dem Ellipse-Werkzeug erstellt wurde.

Die anderen erforderlichen Gesichtsmerkmale sind eine Augenbraue, eine Oberlippe (beide dunkelblau), ein Nasenloch und eine Nasenfalte (eine Form) sowie eine Unterlippe (dieselbe Farbe wie das Nasenloch). Sie können das Gesicht detaillierter betrachten, wenn Sie möchten, aber dies gibt ihr genügend Funktionen, um einen Charakter zu kreieren, ohne das Gesamtdesign zu überfordern.

sprite-016

Schritt 2

Wenn Sie für die Kopf- und Haarumrisse dieses Design animieren, möchten Sie den Kopf und jedes Haarteil separat umreißen. Für diesen Teil des Tutorials habe ich den folgenden Vorgang so gezeigt, als würden Sie Kopf und Haare zu einem Stück zusammenhalten.

Gruppieren Sie die Kopf- und Haargruppen, Kopieren und Einfügen, in Pathfinder Vereinen und Richten Sie sie an der Hauptkopf-/Haargruppe aus und platzieren Sie sie hinter der Kopf-/Haargruppe im Ebenen-Bedienfeld. Wiederholen Sie den Vorgang für die Haargruppe (ohne Kopf). Jede Umrissform sollte ein Konturgewicht von 1 bis 2 Punkten haben.

sprite-017

Schritt 3

Zeichnen Sie für den Schatten, den ihre massive Frisur wirft, eine Form, die der Kontur ihres Gesichts folgt und sich zwischen dem Nasenrücken und der Seite des Gesichts erstreckt. Wählen Sie den Kopf und die Schattenform aus und wählen Sie mit dem Formerstellungswerkzeug den Teil der Schattenform aus, der sich nicht mit dem Kopf schneidet. Deaktivieren Sie beide und löschen Sie die sich nicht überschneidende Form. Platzieren Sie den Schatten über dem Kopf, aber unter den Gesichtszügen in den Ebenen.

sprite-018

7. Kopf- und Haardetails

Schritt 1

Für das Ohr ist es eine Art abgerundete Großbuchstaben "D". Die Innenseite des Ohrs kann eine "C"-Form, "S" oder ein seltsames Kringel wie das sein, das ich gezeichnet habe. Gruppieren Sie sie und platzieren Sie sie unter den Haaren, über den Kopf- und Gesichtsschattenstücken.

sprite-019

Schritt 2

Bevor wir mit dem Schattieren der Haare beginnen, skizzieren Sie jede Haarpartie. Sie können entweder jedem Abschnitt eine dünn gewichtete Kontur hinzufügen oder den Vorgang ab Abschnitt 6, Schritt 2 für jeden Haarabschnitt ausführen.

sprite-020

Schritt 3

Färben Sie für die Schatten auf dem Haar jeden Haarabschnitt als dunklere Version dieses Farbtons neu ein. Zeichnen Sie dann mit dem Zeichenstift-Werkzeug Highlightsformen an den Außenkanten jeder Haarsträhne. Löschen Sie wie zuvor mit dem Formerstellungswerkzeug.

sprite-021

8. Fügen Sie Körperschatten hinzu

Schritt 1

Da der größte Teil der Brust nicht mehr sichtbar ist und sich viele Haare um den Hals befinden, färben Sie das Bruststück auf das zuvor verwendete lila Schatten neu. Zeichnen Sie eine Form auf der rechten Seite der Schulter. Wir werden diesen Schatten als Leitfaden für die anderen Körperschatten in Bezug auf die Position verwenden. Wählen Sie die Schulter und die Schattenform aus. Verwenden Sie das Formerstellungswerkzeug, um den sich nicht überschneidenden Teil der Schattenform auszuwählen, die Auswahl aufzuheben und zu löschen, um einen sauberen Schatten auf der Schulter zu erhalten. Platzieren Sie die Schattenform unter den Kleidungsstücken im Ebenen-Bedienfeld.

sprite-022

Schritt 2

Der Schatten auf dem Arm folgt der gleichen Linie wie der auf der Schulter und die Vertiefungen am Ellbogen. Wenn sich Ihr Arm in zwei Gruppen befindet, können Sie die beiden Teile trennen, indem Sie sie mit dem Formerstellungswerkzeug und den ausgewählten Hauptarmteilen auswählen. Befolgen Sie die gleichen Schritte für die Schatten auf dem Handschuh.

sprite-023

Schritt 3

Ich habe einige Streifen auf der Oberseite des Ärmels hinzugefügt, wobei das Zeichenstift-Werkzeug auf ein Konturgewicht von 0,25 pt eingestellt war. Erweitern Sie jeden Streifen in Object und löschen Sie die Teile der Streifen, die die Oberseite der Hülse überlappen, und die Linie, die mit dem Formerstellungswerkzeug über die Hülse gezogen wird.

sprite-024

Schritt 4

Der Schatten auf dem Oberkörper ist dunkelviolettgrau mit einer Deckkraft von 40%. Highlightsformen wurden auch an den linken Seiten des Torsos hinzugefügt. Da es sich um eine schattierte Figur handelt, werden keine Farbverläufe verwendet. Wenn Sie jedoch ein komplexeres Design wünschen, können Sie dies gerne tun!

sprite-025

9. Schatten auf dem Unterkörper

Schritt 1

Zeichnen Sie weiter Schattenformen auf den Unterkörper. Beginnen Sie mit dem Oberschenkel (die anderen Körperteile wurden im Ebenen-Bedienfeld ausgeblendet) und folgen Sie der Biegung des Beins. Zeichnen Sie transparente Schattenformen für jedes Herz. Löschen Sie nicht schneidende Teile des Schattens mit dem Formerstellungswerkzeug. Fügen Sie auch Umrisse für jedes Herz hinzu.

sprite-026

Schritt 2

Für den Unterschenkel wollte ich leuchtend rosa Gamaschen hinzufügen. Die Form tritt hinten aus und hat einen großen dramatischen Bogen bis zur Vorderseite des Fußes. Löschen Sie den sich nicht überschneidenden Teil von der Vorderseite des Fußes/Beins (lassen Sie den Teil auf der Rückseite, da er Teil des Designs ist). Fügen Sie einige dunkelrosa Pfeilformen hinzu, um den Gamaschen einen plissierten Look zu verleihen. Zeichnen Sie Schatten und Highlights auf den Unterschenkel, ähnlich wie am Oberschenkel und am Oberkörper.

sprite-027

Schritt 3

Da dies animiert wird, muss ich ein zusätzliches Bein und einen zusätzlichen Arm hinzufügen. Kopieren Sie die Armgruppe und die Beingruppe und fügen Sie sie ein. Löschen Sie die Ärmeldetails, Schatten und Highlights und färben Sie alles neu, um Schattenfarben zu erhalten.

sprite-028

10. Erstellen Sie eine zusätzliche Hand

Schritt 1

Für eine weitere Hand, die zur Faust geballt wird, kopieren Sie die erste Hand und fügen Sie sie ein, und lösen Sie die Gruppierung der Komponenten auf. Verschieben Sie den Handschuhteil zur Seite und formen Sie den Daumen so um, dass er eine kleine Beule auf der linken Seite bildet. Verschieben Sie die Finger in die Handfläche.

sprite-030

Schritt 2

Vereinigen Sie die neue Hand in Pathfinder und erstellen Sie einen neuen Handschuh auf die gleiche Weise, wie die erste gezeichnet wurde. Fügen Sie ein Herz mit Schatten hinzu (ich habe dasselbe verwendet, dessen Größe nur für weniger Platz geändert wurde), eine Linie, die das Ende des Handschuhs kennzeichnet, und schattieren Sie die Verbindungen zum Schatten auf der Hand. Fügen Sie einen Umriss hinzu, der dem vom Arm entspricht.

sprite-031

Schritt 3

Kopieren Sie für die Hand auf der anderen Seite die Faust und fügen Sie sie ein, löschen Sie die Handschuhdetails und färben Sie sie in eine dunkle Farbe. Zeichnen Sie mit dem Abgerundeten-Rechteck-Werkzeug kleine Finger und einen Daumen mit einem Konturgewicht von 0,75 pt in derselben dunklen Farbe, die auch für andere Konturen verwendet wurde.

sprite-032

Jetzt sind Sie bereit für Action!

Endlich ist das Sprite einsatzbereit. Jede Gruppe, die während der Animation verschoben wird (oder verschoben werden kann), wird im Ebenen-Bedienfeld gruppiert und für die Organisation gekennzeichnet. Ich habe für jede Komponente einen Hintergrund und eine zusätzliche Gliederung für das endgültige Bild hinzugefügt, diese ist jedoch für die nächsten beiden Tutorials nicht vorhanden. Ich hoffe, es hat Ihnen Spaß gemacht, dieses Cel-Shaded-Spielsprite mit mir zu zeichnen, und fahren Sie mit den nächsten beiden Abschnitten dieses Projekts fort.

sprite-033
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.