Erfahren Sie, wie Sie Ihre vorhandenen Grafiken mithilfe von Keyframes animieren

Ich habe diesen Hund als Maskottchen für ein Videospiel gezeichnet:

Und wir mochten ihn genug, dass wir ihn prominenter einsetzen wollten. Wir wollten in der Lage sein, einige Animationen hinzuzufügen.

 

Also verbrachte ich ungefähr 45 Minuten damit, jedes Teil auszuschneiden, das sich bewegen sollte. Ich habe jedes Körperteil in einer eigenen Schicht gespeichert und in Bereichen wie der Oberseite des Kopfes, des Halses und der Knie die fehlenden Lücken ausgefüllt. Es sah so aus:

Dann habe ich alle Ebenen wieder an ihren Platz gezogen, eine Zeitleiste gestartet, Keyframes getestet und diese Animation erhalten:

Schön genug, aber nicht so nützlich für das, was wir taten. Aber ich habe eine kompliziertere Animation erstellt, um ihn in unsere UI-Benachrichtigungen aufzunehmen.

 

Diese nächste Animation verwendet weniger Teile, aber mehr übertriebene Bewegungen und ein wenig Vordergrund- / Hintergrundwechsel. Es ist also ein großartiges Stück, um zu unterrichten:

Animieren mit Keyframes in Clip Studio Paint

Schritt 1: Einrichten

Wenn Sie an einem Charakter arbeiten, den Sie bereits gezeichnet haben, müssen Sie keine neue Animationsdatei erstellen. Sie können Ihre vorhandene Leinwand verwenden. Sichern Sie Ihre ursprüngliche Leinwand ... damit können Sie Änderungen an Ihrer Zeichnung vornehmen, wenn Sie möchten. Schneiden Sie dann jedes bewegliche Stück aus und geben Sie ihm eine Schicht. Füllen Sie die fehlenden Formen aus. Vereinfachen Sie Ihre Ebenen und löschen Sie alles, was nicht wichtig für die Animation ist.

 

Einrichten von Ordnern für eine schnellere und einfachere Animation:

 

Erstellen Sie einen Ordner mit dem Namen "Hund" (oder "Ihr Charakter").

Lege jedes Stück deines Charakters hinein.

Erstellen Sie im Ordner "Hund" einen Ordner mit dem Namen "Kopf".

Legen Sie jedes Stück, das mit dem Kopf verbunden ist, hinein. (In meinem Fall war das "Nase", "Hut", "Ohren" und "Kopf".

Erstellen Sie im Ordner "Hund" einen weiteren Ordner mit dem Namen "Körper".

Legen Sie alle verbleibenden Körperteile hinein.

Ihre Ordner sollten folgendermaßen aussehen:

Aktivieren Sie das Timeline-Fenster.

Klicken Sie auf "Neue Zeitleiste".

(Wenn Sie Clip Studio Pro verwenden, erhalten Sie maximal 24 Bilder. Es ist eine großartige Zahl zum Üben. Meine Animation ist 1 Sekunde lang, daher habe ich den Industriestandard 24 Bilder pro Sekunde verwendet. Wenn Sie einen Choppier wünschen, 2 -sekunde Animation, machen Sie es 12 Bilder pro Sekunde. Oder 6 fps, für eine wirklich abgehackte 4 Sekunden lange Animation.)

 

Ihre Zeitleiste sollte automatisch mit all Ihren Ordnern und Ebenen gefüllt sein und blaue Griffe haben, die einen 24-Frame-Animationsabschnitt umgeben.

 

(Die Zeitleiste enthält auch "Animationsordner". Verwenden Sie für dieses Lernprogramm keine Animationsordner. Sie sind großartig und nützlich, aber sie werden hier nur verwirrend sein.)

 

Wählen Sie den Ordner "Hund" aus und klicken Sie im Zeitleistenfenster auf "Keyframes auf dieser Ebene aktivieren":

(Wir haben jeden Teil des Hundes in eine Keyframe-Zelle konvertiert. Wenn Sie jetzt eine Zeichnungskorrektur für ein Teil vornehmen müssen, müssen Sie zu diesem Hundeordner zurückkehren und erneut auf das Symbol "Keyframes aktivieren" klicken. Mit Keyframes aktiviert, Kunstpinsel funktionieren nicht.)

 

Wenn Keyframes aktiviert sind, arbeiten Sie ausschließlich mit dem Objekt-Tool:

Jetzt sind wir bereit zu animieren!

Schritt 2: Bewegen

Wählen Sie mit dem ersten in der Timeline ausgewählten Bild Ihren Ordner "Kopf" aus.

 

Klicken Sie oben im Timeline-Fenster auf das Symbol "Keyframe hinzufügen". In der Zeitleiste wird ein Diamant angezeigt, und um Ihre Leinwand werden blaue Griffe angezeigt.

 

Ziehen Sie das Rotationszentrum von der Mitte der Leinwand bis zu dem Punkt, an dem der Kopf auf den Hals trifft. (Es ist das kleine + Zeichen. Wenn Sie es nicht sehen, stellen Sie sicher, dass Sie das Werkzeug "Objekt" verwenden.)

 

Testen Sie die Rotation, indem Sie den Cursor direkt außerhalb des blauen Randes bewegen, wo er sich in ein "Rotations" -Symbol ändert. Klicken und Ziehen. Wenn der Kopf natürlich nickt, ist es gut.

 

(Wenn sich der Kopf dreht, Ohren und Hut jedoch stationär bleiben, haben Sie die Zeichnungsebene "Kopf" ausgewählt.)

 

Drehen Sie den Kopf nach unten.

 

Klicken Sie in der Zeitleiste auf ungefähr Bild 6.

 

Drehen Sie den Kopf nach oben. Ein Keyframe wird automatisch erstellt, wenn Sie Änderungen vornehmen.

 

Klicken Sie zum Testen auf die Schaltfläche "Wiedergabe" in der Timeline.

 

Klicken Sie in der Zeitleiste auf Bild 12.

 

Drehen Sie den Kopf leicht nach unten.

 

Klicken Sie in die Zeitleiste bei ungefähr Bild 16. Drehen Sie den Kopf leicht nach oben.

 

Klicken Sie in die Zeitleiste bei ungefähr Bild 20. Drehen Sie den Kopf zurück in seine natürliche Position.

 

Klicken Sie zum Testen auf die Schaltfläche "Spielen".

 

Gehen Sie zum Hut und wiederholen Sie alle diese Schritte.

 

Gehen Sie zu den Ohren und zur Nase. Drehen, testen, vorrücken.

 

 

Wir brauchen einen neuen Arm für den Hund, der natürlich auf dem Schild ruhen kann. Zeichnen Sie es entweder in einer anderen Zeichenfläche oder in dieser Zeichenfläche, nachdem Sie Keyframes deaktiviert haben. Wir brauchen auch einen Hemdsärmel, der im richtigen Winkel gezeichnet ist:

Sie könnten diese beiden Elemente auf einer Ebene zusammen zeichnen, aber ich wollte einen zusätzlichen Hinweis auf Bewegung aus dem Ärmel bekommen.

 

Ich löschte den anderen Arm, den, in dem die Hand in der Tasche versteckt war, und ersetzte ihn durch diesen. Ich habe den vorherigen Hemdsärmel behalten und mir 2 Hemdsärmelbilder hinterlassen. Dies wäre eine perfekte Gelegenheit für einen Animationsordner, aber stattdessen zeige ich Ihnen, wie Sie einfache Zeichnungswechsel ohne sie durchführen können.

 

Animieren Sie die Schulter des Hundes, um zu zeigen, dass er anfängt, seinen Arm zu heben.

 

Ziehen Sie in dem Bild, in dem die Schulter am höchsten ist, den Griff über die einzelne Animationsspur von rechts nach links. (Für mich ist es Frame Nr. 5. Dadurch wird die gesamte Ebene nur bis Frame Nr. 5 angezeigt, wenn sie verschwindet.)

Ziehen Sie auf der Animationsspur mit dem neuen Hemdsärmel den gegenüberliegenden Griff, sodass das neue Hemdsärmel angezeigt wird, wenn das alte verschwindet.

Schritt 3: Vom Hintergrund in den Vordergrund wechseln

Wir haben unser Benachrichtigungsschild die ganze Zeit sichtbar gehalten, nur um eine schöne Größenreferenz zur Hand zu haben. Verschieben Sie nun diese Ebene an den oberen Rand der Ebenenfenster. Dies sollte einen Teil des Hundes abdecken.

 

Erstellen und verschieben Sie Keyframes im Ordner "Dog", damit er als vollständiges Objekt über dem Schild angezeigt wird.

 

Duplizieren Sie die Benachrichtigungszeichenschicht.

 

Bewegen Sie die Kopie der Zeichenebene nach unten, sodass sie sich direkt unter den Arm- und Ärmelebenen befindet.

 

Bewegen Sie den Griff auf der Animationsspur wie beim Hemdsärmel, sodass die Zeichenkopie nur angezeigt wird, wenn der Arm darüber angehoben ist und sich der Ordner "Hund" nicht mehr bewegt.

 

Machen Sie dasselbe mit dem Originalschild, damit es verschwindet, wenn die Kopie erscheint.

 

Bewegen Sie die Zeichenkopie genau an die gleiche Stelle wie das Originalschild. So endeten meine Schichten:

Erstellen Sie für das letzte Bild, das hinter dem Kopf des Hundes angezeigt wird, Keyframes wie zuvor:

 

Nehmen Sie den Griff ganz links und skalieren Sie damit die Ebene, bis sie unsichtbar ist. (Wenn das Bild nicht verkleinert, sondern verkleinert wird, klicken Sie unter den Eigenschaften des Objektwerkzeugs auf das + neben "Transformieren" und deaktivieren Sie das Kontrollkästchen "Seitenverhältnis beibehalten".

 

Bewegen Sie sich in der Zeitleiste vorwärts und skalieren Sie sie auf das normale Erscheinungsbild zurück.

 

Fügen Sie ein paar weitere Keyframes hinzu, um die Bewegung lebendig zu machen, und geben Sie ihr etwas Sprungkraft.

Bonus Spezialeffekte!

Ich mag einige der Effekte, die Sie mit Ebeneneigenschaften und Clipping-Ebenen erzielen können. Da sich die meisten unserer Stücke bereits in Ordnern befinden, sind sie einfach anzuwenden.

 

Um einen sauberen Rand im Jugendstil zu erhalten, habe ich einen Ordner hinzugefügt und die Zeichenebene und den Ordner "Hund" darin abgelegt. Dann habe ich den Randeffekt unter Ebeneneigenschaften aktiviert:

Bonus-Tipps zu Walk-Animationen mit Keyframes!

Laufzyklen können ziemlich herausfordernd sein. Hier sind einige Tipps:

 

Kopieren Sie Ihren ersten Keyframe an die letzte Position in Ihrem Zyklus. Tun Sie dies auf jeder Ebene.

 

Animieren Sie zuerst die Füße.

 

Die Schultern drehen sich gegenüber den Hüften. Der rechte Arm bewegt sich also mit dem linken Bein vorwärts, der linke Arm bewegt sich mit dem rechten Bein vorwärts.

 

Farbcodieren Sie Ihre Vordergrund- und Hintergrundebenen, damit Sie sie schnell finden können.

Und hier ist der gesamte Arbeitsbereich in Aktion. Machen Sie es im Vollbildmodus, um einen guten Überblick über die Ebenen und die Platzierung des Keyframes zu erhalten:

Ich weiß nichts über dich, aber für mich ist es aufregend zu sehen, wie Charaktere zum Leben erweckt werden. Ich hoffe, dieses Tutorial hilft Ihnen dabei, die gleichen Hürden zu überwinden, die mir beim Lernen so viel Ärger bereitet haben. Wenn Sie Fragen haben, stellen Sie diese bitte in den Kommentaren. Während ich diese erstellte, dachte ich immer wieder an all die verschiedenen Dinge, die schief gehen und Verwirrung stiften könnten, aber ich wollte mich nicht davon ablenken lassen, sie anzusprechen.