Hallo zusammen, willkommen zu meinem Tutorial!!

 

In diesem Tutorial zeige ich Ihnen die einfachen Schritte zum Erstellen einer Character Art für einen animierten Avatar oder ein Rigging-Modell!!!

Dieses Tutorial ist in zwei Teile gegliedert:

 

Der erste Teil zeigt Ihnen, wie Sie Charaktergrafiken für den animierten Avatar erstellen, und

Der zweite Teil zeigt Ihnen, wie Sie den Avatar in Clip Studio Paint (Pro/Ex) animieren

Sie können die Grafik auch in eine andere Animationssoftware exportieren, um ein 2D-Rigging-Modell für interaktive Avatare zu erstellen, z. B. ein Game-Sprite oder ein Vtuber-Modell.

 

Dieses Tutorial enthält auch den Dateibereinigungsprozess dafür.

Lasst uns beginnen!!

Videoanleitung

Videoversion dieses Tutorials

Teil 1: Erstellen Sie das Avatar-Modell

Die Grundlagen zum Erstellen eines animierten Avatars sind einfach.

Teilen Sie die Figur in Teile und bewegen Sie diese, um eine Animation zu erstellen.

Der traditionelle Weg hierfür besteht darin, eine Figur zu zeichnen und dann die Teile auszuschneiden und zu bearbeiten.

Wenn Sie die Teile stattdessen separat zeichnen, erleichtert Ihnen die Planung der Teileaufteilung die Arbeit.

Dies sind die Vorgänge, die ich Ihnen in diesem Tutorial zeigen werde.

Schritt 1: Erstellen des klaren Designs

Skizzieren Sie das Kunstwerk in Vorderansicht und einfacher Standpose.

Das Kunstwerk muss klar und detailliert sein, damit es nachgezeichnet werden kann.

Optional: Ich habe die Skizze auch koloriert, um sie als Farbreferenz im Zeichenprozess zu verwenden.

Sie können das Kopfmodell als Hilfe beim Skizzieren verwenden.

Das Kopfmodell befindet sich im [Materialbereich > 3D > Kopf]

(Sie können diesen Bereich über das Menü [Fenster>Material:3D] aufrufen)

Optional: Sie können die Gesichtsmerkmale an Ihr Design anpassen, indem Sie den Wert auf der Registerkarte [Gesichtsmerkmale] im Bereich [Unterwerkzeugdetails] anpassen

Erstellen Sie eine neue Ebene und skizzieren Sie das Kopfmodell

Das Kopfmodell weist klare Details auf, Sie können es als Referenz für Gesichtsform sowie die Position von Ohren und Augen verwenden.

Schritt 2: Planung der Teileaufteilung

Wenn das Design fertig ist, teilen Sie das Bild in Teile auf.

 

Der Schlüssel zum Aufteilen von Teilen:

„Teilen Sie dort, wo es animiert wird“ und „Beginnen Sie von der Mittellinie, von groß nach klein“

Hinweis: In diesem Tutorial werde ich zuerst die Körperteile fertigstellen und später dann an den Gesichtszügen arbeiten um Verwirrung zu vermeiden.

Beginnen Sie mit dem Kopf (Gesicht + Hinterkopf) und dem Körper

Optional:

Ich habe den Kopf in zwei Teile geteilt: das Gesicht und den Hinterkopf.

Dadurch sieht die Animation der Kopfdrehung natürlicher aus.

Teilen Sie die weiteren Details um die Mittellinie auf und listen Sie sie in der angezeigten Reihenfolge auf.

Sie können sehen, dass einige Teile symmetrisch und andere asymmetrisch sind.

Es gibt auch Teile, die auf der gegenüberliegenden Seite eine gespiegelte Version haben, wie z. B. den Seitenpony oder die Zwillingsschwänze.

Sie können diese Teile einmal zeichnen und sie dann kopieren und umdrehen, um eine andere Seite zu erstellen.

Wenn Sie mit der Teileliste fertig sind, erstellen Sie für jedes Teil einen neuen Ordner

In diesem Tutorial habe ich die Farbbezeichnung nach Typ festgelegt, um den Arbeitsprozess anzuzeigen.

Sie können sie so einstellen, wie es für Sie am bequemsten ist.

Hinweis: Ich verwende das „-“ im Ordnernamen, um die Teilgruppe zu identifizieren. (Beispiel: „hair-twintail-L“)

Schritt 3: Zeichnen der Teile # Körper

Einrichten des Arbeitsbereichs

Ich kopiere die Skizze mit Farbe, um sie als Farbreferenz zu verwenden.

Sie können hierfür auch das Bedienfeld [Unteransicht] verwenden

Ändern Sie die Farbe der Skizzenebene im Bedienfeld [Ebeneneigenschaft]

Jetzt ist es Zeit für Das symmetrische Lineal!!

 

Wählen Sie die Papierebene,

Gehen Sie zum [Lineal] und wählen Sie das [Symmetrische Lineal]

Stellen Sie die Optionen ein:

[Linienanzahl]: 2,

[Liniensymmetrie]: aktiviert,

[Einrastwinkel]: 90,

 

Zeichnen Sie das Lineal auf die Leinwand, das Lineal rastet bei 90 Grad ein

In allen Ebenen anzeigen lassen:

Klicken Sie mit der rechten Maustaste auf das Linealsymbol und wählen Sie [In allen Ebenen anzeigen]

Wählen Sie das Lineal mit dem Werkzeug [Objekt] aus und richten Sie es an der Mitte der Leinwand aus.

 

Sie können die Option [Mitte X] im Bedienfeld [Werkzeugeigenschaften] auf die Hälfte der Leinwandbreite einstellen.

Oder richten Sie es mit dem Bedienfeld „Ausrichten/Verteilen“ aus (Clipstudio 2.0+).

Passen Sie einige Teile an, um sie mit der Netztransformation an der Lineallinie auszurichten:

[Bearbeiten> Transformieren > Netztransformation]

Die Leinwand ist fertig, es ist Zeit, mit dem Zeichnen zu beginnen!!

Zeichnen der Teile Nr. 1: Symmetrische Teile

Beginnen wir mit dem Gesicht-Teil.

Erstellen Sie eine neue Vektorebene für die Strichzeichnungen

Dies ist optional, Sie können die Rasterebene auch für die Strichzeichnungen verwenden, aber die Vektorebene lässt sich im späteren Prozess einfacher bearbeiten/ändern

Stellen Sie sicher, dass die Option [An speziellem Lineal ausrichten] aktiviert ist.

Wenn Sie auf der Leinwand zeichnen, wird dies auf beiden Seiten der Lineallinie erfolgen.

Hinweis: Wenn der Pinsel/Radiergummi nicht mit dem Lineal funktioniert, aktivieren Sie [Einrasten aktivieren]

im Bedienfeld [Unterwerkzeugdetails], Registerkarte [Korrektur]

So füllen Sie die Farbe:

Erstellen Sie eine neue Vektorebene und zeichnen Sie Linien, um den Bereich zu schließen

Für den Gesichtsteil zeichne ich eine Haarlinie

Neue Rasterebene erstellen

Füllfarbe mit [Füllen] > [Bezieht sich auf andere Ebenen]

Setzen Sie im Bedienfeld [Werkzeugeigenschaften] die Option [Auf mehrere verweisen] auf [Ordner]

Und aktivieren Sie die Option [Bis zum Vektorpfad füllen]

Löschen Sie die Vektorebene für die Haarlinie

und sperren Sie dann das transparente Pixel und die Schattierung auf dem Teil

der erste Teil ist fertig!

Optional: Ich ändere den Ordnerebenenmodus auf [Weiches Licht], damit ich die Skizzenebene sehen kann, um an einem anderen Teil zu arbeiten.

Zeichnen der Teile Nr. 2: Asymmetrische Teile

Für die asymmetrischen Teile deaktivieren Sie die Option „[An speziellem Lineal ausrichten]“ und zeichnen den Teil

Zeichnen der Teile Nr. 3: Spiegelteile

Der linke Haarpony kann umgedreht werden, um den rechten Haarpony zu erhalten

Wenn Sie mit dem Zeichnen eines Teils fertig sind, wählen Sie den Teilordner aus.

 

Erstellen Sie dann eine rechteckige Auswahl, decken Sie den Teil und die Breite des Leinwandbereichs ab

Klicken Sie im schwebenden Menü auf das Symbol [Kopieren und Einfügen], um den Teileordner zu kopieren

Klicken Sie im schwebenden Menü auf [Skalieren/Drehen]

und klicken Sie im Bedienfeld [Werkzeugeigenschaften] auf das Symbol [Horizontal spiegeln]

Benennen Sie den Ordner um und fügen Sie benutzerdefinierte Details hinzu

[Tipps zum symmetrischen Lineal]

Möglicherweise benötigen Sie zum Zeichnen eines Teils ein weiteres spezielles Lineal,

und wenn Sie fertig sind, funktioniert das symmetrische Lineal nicht mehr

Dies geschah, weil nur ein Speziallineal gleichzeitig ausgerichtet werden kann

Wenn Sie also ein neues Speziallineal erstellen, wird das alte deaktiviert

 

Um es zu aktivieren, wählen Sie das Lineal mit dem Werkzeug [Objekt] aus und klicken Sie auf das Ausrichtsymbol auf dem Lineal

Wenn alle Teile fertig sind, wählen Sie alle Teile aus und ändern Sie den [Ebenenmodus] zurück auf [Normal]

Sie können die harte Kante einiger Teile erkennen.

Um das Problem zu beheben, erstellen Sie eine Maske mit dem Symbol [Maske] im Bedienfeld [Ebene].

 

Malen Sie dann das Transparente mit der [Weichen Airbrush]

Schritt 4: Zeichnen der Teile # Gesicht

Anders als beim Körper, der nach Frisur und Kostüm unterteilt werden muss,

gibt es eine Grundstruktur, die immer gleich ist

Sie können auch zusätzliche Teile hinzufügen (wie etwa eine Zunge oder eine separate Pupillenebene),

achten Sie jedoch auf die richtige Ebenenreihenfolge

Verschieben Sie die Skizzenebene nach oben und erstellen Sie Ordner für Gesichtsteile

Erstellen Sie eine [Rechteck]-Auswahl, die nur die Hälfte des Gesichts abdeckt, maskieren Sie sie dann auf der Skizze.

Das Zeichnen des Gesichts mit dem symmetrischen Lineal ist weniger verwirrend

Wenn Sie die Teile zeichnen, können Sie das Ergebnis auch an den fertigen Teilen sehen

Tipps:

Für Clip Studio 3.0-Benutzer:

Sie können mehrere Punkte auf der Mesh-Transformation auswählen, um sie auf beiden Seiten gemeinsam anzupassen.

 

Hinweis: Sie müssen auch den Punkt in der Spiegelposition auswählen.

[Clipping-Problem]

Die meisten Animationsprogramme für Avatar-Animationen verfügen über die Funktion Clipping-Maske.

Aber manchmal ist die Verwendung komplizierter, je nach Programm.

 

Sie müssen möglicherweise herausfinden, welche Methode für Ihr Animationsprogramm besser geeignet ist.

Um den Mund zu zeichnen, zeichne ich die Mundlinie und das Innere des Mundes

Ich kopiere die Mundlinie und lege sie in den Ordner für die Unterlippen.

Dann male ich die Haut, um den inneren Mundbereich abzudecken.

Wenn das Gesicht fertig ist, verschieben Sie die Ebenenordner nach unten über den Ebenenordner für das Gesicht

Sie können mit dem transparenten oder weichen Radiergummi auf die Ebenenmaske malen, um den vorderen Pony durchscheinend zu machen.

Normalerweise werden das linke und das rechte Auge separat animiert.

So trennen Sie das linke und das rechte Auge:

Wählen Sie die Ebenenordner aus, treffen Sie eine Auswahl über einem Auge,

klicken Sie dann im schwebenden Menü auf die Schaltfläche [Ausschneiden und Einfügen]

Benennen Sie die Ordner um und jetzt sind alle Teile fertig!!

Schritt 5: Bereinigen Sie die Datei

Wenn Ihr Avatar-Bild fertig ist, können Sie es für andere Animationssoftware exportieren oder in Clip Studio Paint animieren. Bei manchen Programmen müssen Sie vor dem Exportieren möglicherweise die Ebenen für jeden Teil zusammenführen, was umständlich ist, wenn Sie den Teil später bearbeiten möchten.

 

 

(Hinweis: Ich verwende Spine 2d für den Animationsprozess. In anderer Software kann das Ergebnis anders ausfallen)

 

Die Funktion [Dateiobjekt] von Clip Studio kann Ihnen dabei helfen, den Teil bearbeitbar zu halten (in separaten Dateien) und Sie müssen die Ebenen beim Exportieren nicht jedes Mal zusammenführen!!

Bereiten wir die Datei vor.

 

Löschen Sie zunächst alles außer den Teilordnern aus der Datei

(Beispiel: Papierebene, Skizzenebene, Referenz usw.)

Konvertieren Sie den Ebenenordner in ein Dateiobjekt:

Rechtsklick auf den Ebenenordner > [Dateiobjekt > Ebene in Dateiobjekt konvertieren]

Stellen Sie den Bereich auf [Zeichenbereich] ein und speichern Sie die Datei

 

Das Teil ist nun in einer externen Datei gespeichert

Tipps: Platzieren Sie das Exportmenü im [Schnellzugriff]-Bereich. So sparen Sie Zeit bei der Konvertierung

Konvertieren Sie alle Ordner in Dateien.

Der Dateiname ist standardmäßig der Ordnername

Hinweis: Wenn die Animationssoftware das .psd-Format (Photoshop-Dokument) erfordert, können Sie einfach mit dem Menü [Speichern unter..] speichern

(Wenn Sie etwas bearbeiten müssen, können Sie dies mit Clip Studio nicht in der PSD-Datei tun. Bearbeiten Sie es einfach in der CSP-Datei und exportieren Sie es dann erneut in die PSD-Datei.)

Um das Teil zu bearbeiten, wählen Sie es mit dem Werkzeug [Objekt] aus.

Klicken Sie dann im Fenster [Werkzeugeigenschaft] auf [Datei öffnen].

Wenn Sie die Teildatei speichern, wird sie automatisch in der Hauptdatei aktualisiert

 

Jetzt ist Ihr Avatar bereit zur Animation

Er hat eine saubere Dateistruktur mit eindeutigem Namen!!

Die Teilaufteilungskunst wird normalerweise mit der Rigging-Methode (Skelett) für das interaktive Modell für Spiele oder Streaming-Avatare animiert

Wenn Sie das dynamische Modell nicht benötigen,

können Sie die Animation einfach in Clip Studio Paint erstellen und auch als Video- oder GIF-Animation exportieren!!

Teil 2: Animieren Sie den Avatar in Clip Studio Paint

Sie können [Layer-Keyframe] verwenden, um Ihre Avatar-Animation zu erstellen.

Der Gesichtsausdruck lässt sich mit der Einzelbildanimation leichter animieren.

Legen Sie die Gesichtsmerkmale in einen Ebenenordner

Wählen Sie alle Ebenen außer dem Gesichtsausdruckordner aus und klicken Sie auf das Symbol [Skalieren/Drehen]

Stellen Sie im Bedienfeld [Werkzeugeigenschaften] den Modus auf [Schief] ein.

Verschieben Sie dann den Kontrollpunkt oben weg und zurück an seine Position.

Öffnen Sie das Zeitleistenfenster ([Fenster > Zeitleiste])

 

Erstellen Sie eine neue Zeitleiste mit Bildrate: 8 und Wiedergabezeit: 24

(Diese Anzahl an Bildern ist mit der Pro-Version von Clipstudio Paint kompatibel)

Wählen Sie diesmal alle Ebenen aus und aktivieren Sie den Ebenen-Keyframe im Bedienfeld [Zeitleiste]

Die rote Registerkarte zeigt das aktuell aktive Bild.

Klicken Sie beim ersten Bild auf die Schaltfläche [Keyframe hinzufügen]

Hinweis: Die Farbe des Keyframe-Symbols richtet sich nach der Art der Interpolation.

*Sie können „linear“ für eine gleichmäßige Bewegungsgeschwindigkeit und „smooth“ für eine exponentielle Geschwindigkeit verwenden.

Und „hold“ zum Fixieren der Position des Objekts im Frame.

Wenn Sie das Teil mit dem [Objektwerkzeug]

im [Werkzeugeigenschaftenfenster] auswählen, wird die Option [Transformieren] angezeigt, um die Eckenposition zu ändern. Dies ist auf das Verzerren aller Teile im vorherigen Schritt zurückzuführen

Mit der verstellbaren Ecke kann das Teil freier eingestellt werden

Entwerfen Sie die Animation vor der Anpassung.

In diesem Tutorial erstelle ich eine Zwinkerpose in einer Loop-Animation

Wenn Sie die Animation dem Zeitrahmen zuordnen,

muss der Beitrag nur für den Start und für das Zwinkern festgelegt werden.

Anpassen der Ausgangspose bei Bild 1

Hinweis: Ich beginne mit dem Körper und verschiebe dann später andere Teile

Fügen Sie die End-Keyframes für alle Objekte hinzu

Wählen Sie alle Ebenen aus, klicken Sie auf das letzte Bild und fügen Sie das Keyframe hinzu, um die Schleife zu erstellen

Halten Sie die Animation an.

Erstellen Sie Keyframes für alle Ebenen bei Frame 7 und legen Sie dann die Pose für den Stopp-Frame fest.

Wenn Sie mit dem Posieren fertig sind, kopieren Sie die Keyframes, um die nächste Animation zu stoppen

 

Klicken und ziehen, um alle Keyframes mehrfach auszuwählen,

dann klicken Sie mit der rechten Maustaste auf den Keyframe und kopieren Sie

Wählen Sie alle Ebenen aus, gehen Sie zu Frame 13 und fügen Sie ein

Fast geschafft

Verschieben Sie die letzten Keyframes auf Frame 19,

und jetzt ist die Charakterbewegung die gleiche wie im Design

Animationsphysik

Lasst uns die Bewegung lebendiger gestalten, indem wir etwas Animationsphysik hinzufügen!

Momentan bewegen sich Kleidung und Haare zusammen mit der Bewegung der Figur …

 

aber in Wirklichkeit gibt es einen Trägheitseffekt, der dafür sorgt, dass die angehängten Objekte langsamer werden. Wenn wir der Animation diesen Effekt hinzufügen, sieht sie natürlicher aus.

Fügen Sie dem Bild, das das Ende der Bewegung darstellt, mehr Bewegungseffekte hinzu.

Auf den Bildern 1 bis 7 ist Bewegung vorhanden. Fügen Sie auf Bild 7 mehr Bewegungseffekte hinzu.

Es gibt eine weitere Bewegung auf den Bildern 13 bis 19

Fügen Sie den Effekt „mehr Bewegung“ auch auf Bild 19 hinzu

Die Keyframes bei Frame 19 waren dieselben wie bei Frame 1 und die Animation läuft in einer Schleife.

Da bei Frame 19 eine Anpassung vorgenommen wurde, läuft die Animation nicht mehr in einer Schleife.

 

Um das Problem zu beheben, kopieren Sie alle Keyframes von Frame 1 und fügen Sie sie beim letzten Keyframe ein.

 

 

Diese Einstellung sorgt dafür, dass sich die Haare weiterhin im Rahmen bewegen, in dem sich der Charakter nicht bewegt.

[Loop-Lücke]

Die Animation hat eine kleine Lücke zwischen den Loops, da sich der letzte Keyframe am Ende von Frame 23 befindet

Um ihn zu löschen, müssen Sie den Keyframe an das Ende von Frame 24 verschieben.

 

So verschieben Sie ihn ganz einfach

[hüpfend]

Durch Hinzufügen eines hüpfenden Effekts wirkt die Animation natürlicher.

 

Fügen Sie zwischen den Keyframes mit dem Trägheitseffekt ein Keyframe ein, bei dem sich das Objekt in die entgegengesetzte Richtung bewegt/dreht.

Tipps: Wenn Sie zu viele Bewegungspositionen angepasst haben und die Animation flackernd aussieht,

können Sie die Lücke zwischen den Keyframes vergrößern, anstatt die Objekte neu anzupassen

Gesichtsausdrücke

Es ist einfacher, den Gesichtsausdruck mit dem [Animationsordner] hinzuzufügen.

 

Wählen Sie alle Ebenen aus und deaktivieren Sie den [Ebenen-Keyframe], die Teile befinden sich dann an ihrer ursprünglichen Position.

Im Ordner „Gesichtsausdruck“ alle linken und rechten Augenteile zusammenführen (außer Iris/Pupille),

und die Mundebenen rastern

Legen Sie die bearbeiteten Gesichtsteile in einen Ordner

Den Ordner kopieren und mit [Netztransformation] die Teile neu zeichnen bzw. anpassen

Ich habe 3 Gesichtsemotionen erstellt

Erstellen Sie einen neuen [Animationsordner] im Gesichtsausdruckordner

und verschieben Sie dann alle Gesichtsemotionsordner hinein

Wählen Sie alle Ebenen aus und aktivieren Sie den Ebenen-Keyframe erneut. Die Keyframes werden wieder angezeigt.

Erweitern Sie den Ebenenordner Gesichtsausdruck. Der Animationsordner wird angezeigt.

Erweitern Sie die Option für den Ordner mit dem Symbol [+]. Sie sehen die Zeitleiste für [cel].

Klicken Sie mit der rechten Maustaste und wählen Sie das Gesicht aus, das Sie dem Keyframe zuweisen möchten.

Und es ist geschafft!!

Ich hoffe, mein Arbeitsablauf und meine Animationstechniken sind für Ihr Projekt nützlich!!

Viel Spaß beim Animieren und bis zum nächsten Tutorial!!