Einführung und Erläuterungen

Hallo!

In diesem Tutorial werde ich erklären, wie man mit Keyframes grundlegende Animationen für ein animiertes Emote erstellt.

 

 

Bevor Sie beginnen, ist es wichtig, 3 Dinge zu erwähnen:

 

1. CLIP STUDIO PAINT PRO (die Basislizenz von CLIP STUDIO) hat ein Limit von 24 Frames, um animiert werden zu können. Wenn Sie mehr benötigen, müssen Sie die EX-Version des Programms erwerben.

Da wir es mit einfachen Animationen zu tun haben, brauchen wir nicht so viele Frames, also reichen 24 aus und es wird anhand dieser Grenze erklärt.

 

2. In diesem Tutorial verwenden wir nur Keyframes, keine Frame-by-Frame-Animation. Dieses Werkzeug hilft uns, eine Ebene zu transformieren und zu bearbeiten, sodass sie eine Bewegung oder Größenänderung von einem angegebenen Punkt zu einem Endpunkt ausführt. Wir werden diese Tools nutzen, um ein schnelles, niedliches und einfaches animiertes Emote zu erstellen.

 

3. Es ist derzeit nicht möglich, ein GIF mit transparentem Hintergrund mit Clip Studio zu exportieren, aber stattdessen können wir die Frames exportieren, um das GIF später rendern zu können. Ich werde diese Schritte am Ende der Veröffentlichung erläutern.

Als Beispiele in diesem Tutorial werde ich 4 meiner Emotes verwenden, um verschiedene Animationen zu erstellen:

◦ Begrüßung: Handbewegung und Herzschlag

◦ Selbstgefällig: Augenbrauenbewegung mit Verwendung einer Ebenenmaske

◦ Schrei: Vibration

◦ Ruhezustand: Bewegter Text

Zur Unterstützung können Sie auch mein Video-Tutorial zu diesem Clip Studio-Tipp besuchen

Wie bereite ich mein Emote zum Jubeln vor?

Betrachten Sie zwei Szenarien:

 

 

• Sie haben Ihr Emote noch nicht gestartet.

 

Sie können sich dieses Tutorial ansehen, um ein paar Schritte weiterzuspringen, während Sie gerade dabei sind:

Denken Sie an die Teile oder Elemente, die Sie bewegen möchten (Buchstaben, Arme, Pupillen usw.) und zeichnen oder erstellen Sie sie auf separaten Ebenen. In "Wie soll ich mein Emote trennen?" Ich werde diesen Vorgang weiter beschreiben.

 

• Wenn Sie bereits ein Emote haben.

 

Sie müssen keine neue Leinwand erstellen, öffnen Sie einfach Ihre Datei über DATEI -> ÖFFNEN und finden Sie Ihr Bild

Denken Sie daran, dass es sich um ein .png-Bild mit transparentem Hintergrund handeln muss

Da sich Ihr Emote vollständig auf einer einzigen Ebene befindet, müssen Sie die Teile oder Elemente, die Sie verschieben möchten, trennen.

 

• Wie soll ich mein Emote trennen?

 

Sie benötigen separate Teile, um loszulegen. Wenn sich Ihr Bild auf einer einzelnen Ebene befindet, können Sie dies mit dem SELECT-Tool erreichen:

Und mit dem AUSWAHLBLEISTIFT wählen Sie nacheinander die Teile oder Elemente aus, die Sie trennen möchten.

Sobald Ihr Element ausgewählt ist, schneiden Sie es aus (STRG+X) und fügen Sie es ein (STRG+V). Dies sollte eine neue Ebene für Sie über der Stelle erstellen, an der Sie positioniert waren.

Tipp: Um Fehler bei der Auswahl besser erkennen zu können, verwenden Sie eine Hintergrundebene und füllen Sie diese mit einer dunklen Farbe Ihrer Wahl.

Sie müssen die Auswahl aufheben, um mit Ihrem nächsten Element fortzufahren. Diese Option finden Sie im Fenster SELECT -> UNSELECT.

Diesen Schritt wiederholen Sie in den notwendigen Elementen und müssen diese entsprechend ihrer Position in der logischen Reihenfolge anordnen. In meinem Beispiel:

 

• Das Herz kommt über allen, weil es ein schwebendes Element im Emote ist.

• Der Körper geht auf den Arm, so dass der Arm hinter dem Kopf verlaufen kann.

• Die Hand geht hinter den Arm, so dass das Handgelenk vom Ärmel der Kleidung bedeckt ist.

 

Tipp: Wenn Ihr Emote Linien hat, um Bewegungen auszudrücken, können Sie diese entfernen, da sie im animierten Emote im Weg sein könnten und nicht mehr viel Nutzen hätten.

Schließlich müssen Sie Ihren separaten Teilen auch einige „Tabs“ hinzufügen, die durch das darüber liegende Element verdeckt werden. Dies trägt dazu bei, dass beim Bewegen des Arms beim Animieren keine separaten Teile vorhanden sind.

 

Diese „Tabs“ gelten nur für Emotes, die sie benötigen, da sie ein Element eines größeren Systems sind, wie z. B. das Begrüßungs-Emote. Bei Emotes, die nur Eigenschaften von Vibrationen oder schwebenden Elementen haben, müssen diese „Tabs“ nicht erstellt werden.

Im Beispiel in der Abbildung sehen Sie, wie ich die Farbe hinter dem Körper etwas weiter verlängert habe. Die Auswirkungen werden zu diesem Zeitpunkt noch nicht bemerkbar sein, aber Sie werden es später bemerken können.

HINWEIS: Denken Sie daran, Ihre Datei (wenn Sie sie im PNG-Format geöffnet haben) im CLIP STUDIO FORMAT zu speichern, um Ihre Animationsänderungen zu speichern.

Unter DATEI -> SPEICHERN UNTER... können Sie das Format Ihrer Datei ändern. Sie können es unter dem Namen Ihrer Datei im erscheinenden Fenster sehen:

Sobald die Elemente getrennt sind und die Datei im richtigen Format gespeichert ist, können wir beginnen.

Grundlagen

 

• ZEITLEISTE

Um zu beginnen, benötigen wir die Animationszeitleiste. Standardmäßig zeigt Clip Studio diese Leiste nicht an. Wir können es in unserem Arbeitsbereich anzeigen, indem wir in WINDOW-> TIMELINE suchen

Diese neue Leiste erscheint:

In dem wir nach dem Symbol NEW TIMELINE suchen, das sich in der oberen linken Ecke befindet.

Das folgende Optionsfenster wird angezeigt:

In Name können Sie jeden eingeben, es spielt keine so große Rolle, da Sie ihn vor dem Speichern sowieso ändern können.

Behalten Sie die Geschwindigkeit vorzugsweise bei 24, denn wenn unser Frame-Limit (Dauer) 24 beträgt, entspricht dies einer Animation von 1 Sekunde.

 

Die anderen Optionen können so belassen werden, wie sie erscheinen.

In der Zeitleiste erscheinen nun die von uns erstellten Ebenen.

 

 

• KEYFRAMES

Keyframes können auf dem vorletzten Symbol am unteren Rand der Leiste aktiviert werden, indem Sie auf „KEYFRAMES FÜR DIESE EBENE AKTIVIEREN“ klicken.

Sie können sehen, dass Ihre Ebene jetzt Keyframes verwenden kann, da links neben Ihrer Ebene ein Stift- und Schlosssymbol angezeigt wird.

Um Schlüssel einzufügen, verwenden wir das im folgenden Bild angezeigte Symbol:

Wo wir auch die Animationsoptionen für die Tasten anzeigen können:

• Fester Wert: Das Bild bleibt statisch, bis es genau den Frame erreicht, an dem es seine Position ändern muss. Das Schlüsselsymbol ist gelb.

• Linear: Bewegungsanimation erstellen, direkt von der angegebenen Position zur nächsten. Das Schlüsselsymbol ist grün.

• Smooth (Curve): Erstellt eine Bewegungsanimation genau wie Linear, fügt jedoch dem Übergang des Elements ein Element von "Weichheit" hinzu. Das Schlüsselsymbol ist lila.

Jeder kann unterschiedlichen Zwecken dienen. In den Beispielen, die ich zeigen werde, verwenden wir nur die lineare und glatte (gekrümmte) Interpolation

 

Auf der anderen Seite können Sie sehen, wie Ihre Emote-Animation läuft, während Sie dies in der Option „SPIELEN“ in der Zeitleiste tun.

Gruß-Emote

Wir werden für dieses Emote den Smooth (Curve)-Modus verwenden.

 

 

 

• ARM

 

 

Beginnend mit dem Arm klicken wir auf SCHLÜSSEL EINFÜGEN, während wir uns auf Frame 1 befinden, und ein rautenförmiges Symbol erscheint, um anzuzeigen, dass der erste Schlüssel generiert wurde.

Sobald unser erster Rahmen auf die Startposition eingestellt ist, können wir mit dem Verschieben des Elements beginnen.

Wir platzieren uns in einem anderen Rahmen, wo wir die zweite Position des Arms haben wollen.

Wir schauen in die Symbolleiste OPERATION -> OBJECT

Und wir können damit beginnen, das Element nach unseren Wünschen zu verschieben.

Sobald wir das Element verschieben, das sich in einem anderen Frame befindet, können wir feststellen, dass in der Zeitleiste automatisch ein Schlüssel generiert wird:

Dann bewegen wir den Arm von der Mitte nach oben und unten, um die Begrüßungsbewegung zu erzeugen.

HINWEIS: Um Ihre Emote-Schleife zu erstellen, können Sie einen Schlüssel hinzufügen, der mit dem ursprünglichen identisch ist, jedoch am Ende der Zeitleiste.

 

Klicken Sie dazu mit der rechten Maustaste auf die Taste (das Rautensymbol) und die folgenden Optionen werden angezeigt:

Du klickst auf CUT, positionierst dich im letzten Frame der Timeline, klickst dort mit der rechten Maustaste und wählst PASTE.

Tipp: Wenn Sie bemerken, dass einige Ihrer Elemente beim Verschieben Zwischenräume hinterlassen, die nicht sein sollten, machen Sie sich keine Sorgen! Du kannst es noch korrigieren.

Mit der Option „EBENEN MIT AKTIVIERTEN TASTEN BEARBEITEN“ können Sie Ihre Ebene ändern und mit einem Pinsel alles zeichnen, was Sie übersehen haben. Ihre Leinwand wird wie folgt angezeigt:

Es ist normal, dass es so aussieht, es soll Ihnen helfen, Ihre Ebene besser zu sehen.

Wenn Sie fertig sind, können Sie erneut auf das Symbol „EDIT KEYED LAYERS“ klicken und mit der Erstellung Ihrer Animation fortfahren.

 

 

• MEIN

Wir folgen den gleichen Schritten, um einen Start- und Endschlüssel einzufügen.

 

Da es sich um ein Element handelt, das mit einem anderen verwandt ist, müssen wir die Tasten an denselben Positionen erstellen, an denen der Arm sie hat:

In der hohen und niedrigen Handposition können Sie die Hand etwas mehr neigen, sodass sie eine zusätzliche Bewegung ausführt, die die Illusion eines Handgelenks vermittelt.

 

 

• HERZ

Das ist am einfachsten.

Es besteht ausschließlich darin, Schlüssel zu erstellen, indem das Herz kleiner und größer gemacht wird. Auf diese Weise entsteht der Beat.

Sie können einen Teil der Timeline ohne Keys belassen, sodass der Beat eine Auszeit hat, bevor er zum Beat zurückkehrt

Emote selbstgefällig

Dieses Emote hat zwei Ebenen:

• Basisschicht für das Gesicht, ohne Augenbrauen

• Augenbrauenschicht

In diesem Emote habe ich, anstatt die Haare zu scheiteln, damit ich die Augenbrauen unter die Haare und auf den Kopf legen konnte, stattdessen eine Ebenenmaske verwendet.

BEVOR Sie die Tasten für die Ebene einschalten, suchen Sie nach dem Symbol „Ebenenmaske erstellen“.

Neben Ihrer Ebene wird ein zweites weißes Feld angezeigt. Wenn Sie sich darin befinden, überprüfen Sie mit einem Radiergummi die Teile, durch die Sie NICHT möchten, dass Ihr Element beim Durchgang gesehen wird.

 

In diesem Fall möchte ich nicht, dass die Augenbrauen über den Haaren sichtbar sind, also lösche ich den Bereich, in dem sich die Haare treffen.

Sie können die gesperrten Bereiche in Schwarz sehen.

Sobald die Maske aktiviert ist, können Sie die Tasten für die Ebene aktivieren und die Auf- und Abbewegungen mit den Augenbrauen ausführen.

In diesem Emote hatte ich das Gefühl, dass die 24 Frames nicht notwendig waren, also habe ich sie reduziert.

Schlaf-Emote

Da es sich beim Schlaf-Emote um ein Emote mit einem sich bewegenden Texteffekt handelt, benötigen wir nur das Basis-Emote ohne weitere Zusätze:

 

 

• LYRICS

Um unsere Textanimation zu starten, müssen wir zu diesem Tool gehen:

Mit der Schriftart und Farbe unserer Wahl schreiben wir den Text.

In diesem Beispiel schreibe ich nur ein Z

Wir stecken den Schlüssel ein und bringen den Brief nach unseren Wünschen unter.

 

Ich werde es in der Nähe des Mundes mit einer kleinen Größe unterbringen. Ich werde Schlüssel einfügen und mich in einen größeren Buchstaben verwandeln, um eine Bewegung wie Dampf zu erzeugen.

Die Tasten in der Mitte dienen dazu, kleine Variationen in Größe und Winkel vorzunehmen, wenn der Buchstabe nach oben geht.

 

Der Buchstabe am Ende wird außerhalb der Leinwand positioniert, um ihn "verschwinden" zu lassen.

 

 

 

• OPAZITÄT

Um einen dampfenderen Effekt hinzuzufügen, können wir die Deckkraft des Buchstabens ändern, wenn er aufsteigt.

Dazu müssen Sie sich nur auf Taste 1 positionieren (achten Sie darauf, dass die Raute rot umrandet ist, wenn Sie sie ausgewählt haben). Und auf dem Schieberegler für die Deckkraft (über Ihren Ebenen) bewegen Sie ihn auf 0.

Als nächstes gehen Sie zu Ihrem Schlüssel 2 und bringen die Deckkraft auf 100.

 

Damit sollte Ihr Brief eine Popup-Animation erstellen.

 

 

 

• WIEDERHOLEN

Jetzt führen Sie die vorherigen Schritte mit zwei weiteren Buchstaben aus, um den Text "Zzz" zu erhalten.

 

Legen Sie die neuen Buchstaben, die Sie hinzufügen, unter den ersten, den Sie erstellt haben. Auf diese Weise werden sie, wenn sie erscheinen, nacheinander gehen und nicht zwischen Reihenfolge und Überlagerung stören.

 

 

• TABELLEN

Sobald Sie Ihre drei animierten Buchstaben haben, können Sie ihnen einen farbigen Rand hinzufügen, um sie im Emote attraktiver zu machen.

Suchen Sie unter LAYER PROPERTY nach EFFECT -> EDGE EFFECT und schalten Sie es ein.

Nach der Aktivierung können Sie die Farbe des Rahmens und die Dicke ändern:

Und diese Grenze wendest du auf deine drei Buchstaben an.

Emote-Schrei

Für dieses Emote mit Vibrationseffekt ist nur das Basis-Emote erforderlich.

Wir werden einen Unschärfeeffekt anwenden, also kopieren Sie die Ebene, wenn Sie es vorziehen, damit Sie zum Original zurückkehren können, wenn Ihnen die Änderungen nicht gefallen.

 

 

• UNSCHÄRFE

Gehen wir zu FILTER -> UNSCHÄRFE -> BEWEGUNGSUNSCHÄRFE

Und folgendes Fenster erscheint:

• Distanz: ist die Stärke des Drag-Effekts. Ich empfehle maximal 3. Ich habe 1,8 verwendet.

• Winkel: ist die Richtung, in die der Widerstand geht. Meiner Meinung nach spielt es in diesem Fall keine Rolle.

• Richtung: ob das Ziehen in beide Richtungen gilt, oder nur eine Bewegung in eine Richtung. Für dieses Emote empfehle ich, beide Richtungen zu verwenden.

• So verwischen Sie: Es hat zwei verschiedene Effekte: Box oder Smooth, der Unterschied ist umso deutlicher, je größer die Entfernung ist. Es ist eine Frage der Präferenz, und es spielt keine große Rolle, für welche Sie sich entscheiden. Ich habe mich für Kiste entschieden.

 

 

• ANIMATION

Für dieses Emote ist es besser, die Interpolation „Linear“ zu verwenden, da der Versuch, stärkere Bewegungen zu machen, mehr Rauheit im Übergang erfordert, die „Soft“ eliminiert.

Sie können das Bild nach dem Zufallsprinzip verschieben.

 

Erstellen Sie die Keys nach Möglichkeit in jedem Frame, auf diese Weise erscheint die Vibration schneller.

Wie exportiere ich?

Wie ich eingangs erwähnt habe, können wir in Clip Studio kein GIF mit transparentem Hintergrund exportieren, da es automatisch in einen weißen Hintergrund konvertiert wird.

In diesem Fall besteht die Alternative darin, als Bildsequenz zu exportieren.

DATEI -> ANIMATION EXPORTIEREN -> BILDSEQUENZ

Dieses Fenster erscheint:

Stellen Sie sicher, dass Ihr Exportziel das richtige ist.

Sie können den Namen Ihrer Zeitachse in diesem Fenster ändern, und damit beginnen die Namen der exportierten Bilder.

 

In den erweiterten Einstellungen sollte der Dateityp PNG sein (HINWEIS: Stellen Sie sicher, dass die von Ihnen eingestellte dunkle Hintergrundfarbe nicht mehr Teil Ihrer Animation ist!)

 

Sie können die Größe ändern, wenn Ihre Datei sehr groß ist, oder sie gemäß den Spezifikationen der Website anpassen, auf der Sie Ihr animiertes Emote hochladen müssen.

 

Unter Frame exportieren sollte die erste Zeile mit der Anzahl der Frames übereinstimmen, die Sie bei der Erstellung Ihrer Timeline festgelegt haben.

Und schließlich die FPS, lass es bei 24.

 

Sobald dies eingestellt ist, klicken Sie auf OK, und jeder einzelne Frame (in unserem Fall 24 Bilder), den Sie erstellt haben, sollte in Ihrem festgelegten Ordner erscheinen.

Wie verwende ich Frames, um ein animiertes GIF zu erstellen?

Sie können sie in der Software Ihrer Wahl verwenden, mit der Sie GIFs mit transparentem Hintergrund erstellen können. Sie müssen nur die Frames zur Bearbeitung der Reihe nach eingeben.

 

Wenn Sie keines zur Verfügung haben oder nicht wissen, welches, empfehle ich die Verwendung von GIMP, da es kostenlos ist.

 

Auf meinem Profil findet ihr einen kleinen Tipp, wie man diese GIFs erstellt.

Ergebnisse

Und so würde es aussehen!

 

Es gibt viele Möglichkeiten, diese Art von Animationen anzuwenden, also lassen Sie Ihrer Fantasie freien Lauf! Viel Glück

 

 

 

Vielen Dank für den Besuch dieses Tipps! Wenn Sie Kommentare oder Feedback haben, können Sie dies gerne tun ❤