In diesem Tutorial werde ich Ihnen zeigen, wie Sie aus einem Bild ein Wolf-Emote machen und mit dem Transformationswerkzeug verschiedene Ausdrücke und glatte Animationen erstellen. (Auch kompatibel mit Clip Studio PRO und EX Version)

 

Überprüfen Sie das Video, um den Schritt in Aktion zu verfolgen. ;)

Überprüfen Sie auch den Bonusbereich zum Speichern von Animationen als transparentes GIF-Animationsformat, das mit Gimp kostenlos ist

Das Video-Tutorial

Einige Grundkenntnisse zum Entwerfen eines Emotes

Bevor Sie Entwürfe für das Emote erstellen, müssen Sie zunächst einen Umfang Ihres Entwurfs und die Spezifikationen des Emotes erstellen

 

1. Wie groß muss das Emote sein?

2. Was ist der Ausdruck, den Sie zeigen werden?

3. Was ist die Plattformhintergrundfarbe dafür?

 

 

-Size: Die Größe des Emotes begrenzt die Details. Wenn Sie einem kleinen Emote zu viele Details hinzufügen, können Sie die hier gezeigten Details nicht sehen.

-Ausdruck: Der Ausdruck des Grundemotes beginnt bei Augen und Mund. Die Emotionen werden komplexer, wenn Augenbrauen und Detaileffekte hinzugefügt werden, die Sie häufig in Comic / Manga sehen.

-Hintergrundfarbe der Plattform: Einige Social-Chat-Plattformen verfügen über verschiedene Modi für Hintergründe, andere stehen im Einzelmodus. Stellen Sie sicher, dass Ihr Emote-Design zum Hintergrund der Plattform passt, für die das Emote verwendet wird.

Tipps: Einige Plattformen, auf denen Benutzer den Hintergrund anpassen können. Sie können das Problem leicht beheben, indem Sie mit dem Rahmeneffekt-Werkzeug einige Striche anwenden.

Wenn Sie in der Lage sind, Ihr Emote zu erweitern, sind Sie jetzt bereit für das Design

Schritt 1: Entwerfen Sie das Emote

Ich habe einen Bereich für mein Emote mithilfe der von mir gestellten Fragen zum Emote-Bereich erstellt.

 

1. Wie groß muss das Emote sein?

• 50 50, 25 25

2. Was ist der Ausdruck, den Sie zeigen werden?

-Sad "glücklich", "Schweiß", "nein"

3. Was ist die Plattformhintergrundfarbe dafür?

• dunkelgrau (Zwietracht)

Das Emote, das ich in diesem Tutorial erstellen werde, ist klein, daher habe ich beschlossen, nur das Gesicht des Charakters zu zeichnen

Tipps: Durch die Suche nach Wolfsreferenzen erhalten Sie klare Bilder über die Kopfform des Tieres und seine Merkmale.

Definieren Sie die Form der Kopf- (Schädel-) Augen + Nasenposition und des Pelzes

Wenn Sie die Form erhalten haben, können Sie der Skizze leicht einige Details hinzufügen. Variieren Sie das Detail, bis Sie damit zufrieden sind.

Der nächste Schritt besteht darin, die Emotionen hinzuzufügen. Wenn Sie nicht daran gewöhnt sind, Ausdrücke zu zeichnen, zeichnen Sie einfache Emotes und wenden Sie sie auf das Design an.

Tiere haben auch andere Möglichkeiten, Ausdrücke zu zeigen, wie z. B. Ohrposition oder Fell. Hier sind einige Beispiele dafür.

Tipps: Wenn Sie keine Ahnung haben, wie die von Ihnen gezeichnete Kreatur ein eigenes Gesicht erstellen kann, suchen Sie einige Referenzfotos aus dem Internet

Schritt 2: Zeichnen Sie Emote-Teile

Zunächst müssen wir die Ebenenteile für die Erstellung der Animation mit Ebenentransformationen entwerfen. Wenn wir das Design zusammenstellen, können wir einige bewegliche Teile wie Ohr, Nase, Augen, Wangen usw. einplanen.

Das Gesicht des Wolfes ist symmetrisch. Wir können das symmetrische Lineal verwenden, um beim Zeichnen zu helfen.

Erstellen Sie eine neue Vektorebene für die Tinte

Verwenden Sie dann das symmetrische Lineal, um die Mittellinie mit der Einstellung "Anzahl der Linien" 2 zu erstellen, und aktivieren Sie "Liniensymmetrie".

(Halten Sie die Umschalttaste gedrückt, um sie an der vertikalen Linie auszurichten.)

 

Zeichnen Sie die Tinte mit dem bevorzugten Werkzeug. Hier verwende ich mein neuestes Lieblings-Tintenwerkzeug: "Bezier-Kurve".

(Wenn Sie das Tool noch nicht gefunden haben, aktualisieren Sie Ihr Clip Studio auf die neueste Version;))

Erstellen Sie eine neue Vektorebene für andere Teile. Wenn das symmetrische Lineal beim Wechseln der Ebene fehlt, setzen Sie es auf "In allen Ebenen anzeigen" (das Menü befindet sich im Ebenenbedienfeld).

Zeichnen Sie nur die Hälfte des Bildes, außer Gesicht und Nase.

Färben Sie es separat mit einfarbiger Farbe. Ich verwende die Werkzeugeinstellung von Clip Studio Asset:

Legen Sie auf der Tintenebene diese als Referenzebene fest und legen Sie dann die Werkzeugeigenschaft so fest, dass auf die Referenzebene mehrere verweisen

Ziehen Sie die Tinte ab (darf keinen Tintenspalt haben)

Verwenden Sie den transparenten Sperrmodus, um die Formen zu malen.

Legen Sie die Tintenschicht und die Farbe in einen Ordner und wiederholen Sie den Schritt für alle Teile

Tipp: Wenn das Teil keine geschlossene Form hat, malen Sie, um die Lücke zu schließen, bevor Sie das Füllwerkzeug verwenden.

Stellen Sie sicher, dass Sie alle Ordner benennen und den Ordner dann in Dateiobjekte konvertieren, indem Sie mit der rechten Maustaste auf die Ebene> Dateiobjekt und Ebene in Dateiobjekt konvertieren klicken.

 

Mit "Dateiobjekt" können Sie die Teile in Zukunft einfacher bearbeiten.

 

Das Nasenteil ist eine andere Technik. Erstellen Sie zwei Kreise, die sich überlappen, damit es wie Tinte aussieht.

Diese Technik ist nützlich, um eine Bewegungsdimension zu erstellen, die Sie im nächsten Schritt sehen können.

Kopieren Sie die Objektebene und drehen Sie sie mit dem Objektwerkzeug. Wiederholen Sie dies für alle Teile

[Wichtig !! ] Benennen Sie alle Ebenen um, um Verwirrung beim Animieren zu vermeiden

Wenn Sie die Objektebene mit dem Objektwerkzeug auswählen, können Sie die Datei der Teile öffnen

Bearbeiten Sie die Teile und speichern Sie sie. Die Bearbeitung wird überall dort angezeigt, wo das Objekt angezeigt wird.

Jetzt ist Ihr Bild für die Animation bereit.

Schritt 3: Bereiten Sie die Datei vor

Bereiten Sie den Arbeitsbereich für Ihr Emote vor. Zurück zu unserem Design von Anfang an werden wir Emotes für Discord erstellen, die einen dunkelgrauen Hintergrund haben

[Zitat auf Wikipedia]

Discord ist eine proprietäre Freeware-VoIP-Anwendung und digitale Vertriebsplattform für Videospiel-Communities.

Drucken Sie die Anwendung auf dem Bildschirm und fügen Sie sie auf der Leinwand ein. Wählen Sie dann die Farbe aus und tragen Sie sie auf die Papierebene auf

Gruppieren Sie die Teile, die wir erstellt haben, in einem Ordner, wählen Sie ihn aus und drücken Sie auf der neuen Leinwand die Tastenkombination STRG + C und dann STRG + V.

Halten Sie die STRG-Taste gedrückt und klicken Sie auf das Ordnersymbol, um die Auswahl zu treffen. Gehen Sie dann zum Menü Bearbeiten> Zuschneiden

Stellen Sie dann mit dem Menü Bearbeiten> Leinwandgröße ändern die Bemaßung gleichmäßig auf das Quadrat ein.

 

Fügen Sie außerdem weitere Pixel für den Animationsbereich hinzu

Die Datei ist jetzt fertig. Speichern Sie es später als Vorlage für die Animation.

Schritt 4: Animieren Sie das Emote

Starten Sie die Animation und erstellen Sie eine neue Zeitleiste.

(Wenn Sie kein Timeline-Bedienfeld haben, gehen Sie zum Menü Fenster> Timeline.)

Wenn Sie über Clip Studio EX verfügen, können Sie eine Wiedergabezeit von mehr als 24 Bildern erstellen. Machen Sie sich jedoch keine Sorgen, wenn Sie über eine Pro-Version verfügen. Für das Emote reichen 24 Bilder aus!

 

Stellen Sie die Timeline-Bildrate auf 8 oder mehr ein. Die Animation sieht nicht so flüssig aus, wenn sie unter 8 Bildern liegt.

Zeichne zuerst die Animation,

Animatisch ist die Art und Weise, wie Sie festlegen, wie die Animation zum Zeitpunkt aussehen soll

Um eine Animation zu erstellen, verwenden wir die klassische Einzelbildanimation.

 

Animationsordner erstellen

Wählen Sie den gewünschten Rahmen aus und klicken Sie auf "Neue Animations-Cel erstellen".

Erstellen Sie 2 Cel, Cel 1 für die Hauptemotion und Cel 2 für den Zustand, bevor Sie die Emotion erreichen.

Setzen Sie auch Cel 2 am Ende, klicken Sie mit der rechten Maustaste auf den Rahmen und wählen Sie Cel 2 aus

Um die Animation zu zeichnen, klicken Sie einfach auf den Rahmen und zeichnen Sie

Wir werden diese Animation verwenden, die wir für die Referenzposition für die Teilebewegung erstellt haben.

Stellen Sie sicher, dass die Animation die oberste Ebene ist. Sperren Sie die Ebene, um Fehlklicks zu vermeiden

Um blinkende Augen zu machen, müssen wir die Frame-by-Frame-Technik verwenden. Also zeichnen wir es in den Animationsordner

Stellen Sie sicher, dass der Rahmen für die Animation identisch ist

Wählen Sie die anderen Teile, die sich gerade bewegen (keine Änderung wie die Augen), mit "Objektwerkzeug" und "Keyframes auf dieser Ebene aktivieren" aus.

Fügen Sie dann den Keyframe bei Frame 1 hinzu

Es gibt auch Optionen für Keyframes. Für eine einfache Handhabung empfehle ich den linearen. Wenn Sie sich jedoch an Animationsdiagramm-Werkzeuge gewöhnt haben, können Sie auch das glatte verwenden.

Erstellen Sie auch den Keyframe für das letzte Frame. Wenn Sie ihn nur erstellen, wird nur die Position des ersten Frames kopiert.

Klicken Sie auf den grünen Diamanten und ziehen Sie ihn an das Ende der Zeitleiste, um das endgültige Bild zu erstellen.

Wir machen das, um daraus eine Loop-Animation zu machen.

Hinweis: Überprüfen Sie mein altes Tutorial auf Loop-Animation:

 

Wenn sich die Teile zusammen bewegen, animieren Sie sie gleichzeitig.

Wählen Sie den Frame an der Position von Cel 1 der Animation aus und passen Sie dann mit dem Objektwerkzeug die Position des Bildes an. Der Keyframe wird automatisch auf der Timeline erstellt.

Kopieren Sie den Diamanten und platzieren Sie ihn dort, wo Cel 1 der Animation endet

 

Klicken Sie mit der rechten Maustaste auf den grünen Diamanten in der Timeline und wählen Sie dann Kopieren.

Klicken Sie mit der rechten Maustaste auf den Keyframe, in dem Cel 1 endet, und wählen Sie Einfügen

Dies führt zu einer Verzögerung der Emotionsshow auf dem Emote

Sie werden einige sanfte Bewegungen auf den Augenbrauen sehen ^^

Wiederholen Sie den Schritt auch für die anderen Teile. Verwenden Sie die animierte Ebene als Referenz

Hinweis: Ich habe auch einige zusätzliche Keyframes für mehr Bewegungen hinzugefügt, z. B. Ohren, und einen Layer-Keyframe angewendet, um die Augenposition zu verändern

Endergebnis:

Schritt 4: Animieren Sie das Emote in einem fortgeschrittenen Level

Dies ist ein erweitertes Beispiel für die Transformationsmethode in Clip Studio mit dem Objektwerkzeug.

 

Wenn Sie den Keyframe für die Animation aktivieren, wird der Modus zum Anpassen des Bilds standardmäßig im Skalierungsmodus verwendet, der für Animationen nicht so flexibel ist.

 

Wenn Sie jedoch den Transformationsmodus festlegen, dann einen Knoten verschieben und den Keyframe aktivieren, erhalten Sie den kostenlosen Transformationsmodus, mit dem Sie die Knoten frei verschieben können

 

(Sakura Asset gehört zu Clip Studio)

Verwenden Sie den freien Transformationsmodus, um unser Objekt anzupassen, bevor Sie den Layer-Keyframe aktivieren. Dann können Sie Ihren Keyframe im freien Transformationsmodus anpassen

Wenn Sie den gleichen Schritt der Timeline-Erstellung wiederholen, den wir im vorherigen Teil des Tutorials mit der kostenlosen Transformationsmethode durchgeführt haben, erhalten Sie einen besseren Überblick über das Ergebnis.

Sie können auch einen transparenten Effekt mit dem Ebenen-Keyframe anwenden.

Klicken Sie auf der Timeline-Ebene auf das Symbol [+]

 

Klicken Sie auf die Deckkraft und Sie können einen Keyframe hinzufügen, um die Deckkraft der Ebene in einem beliebigen Frame zu steuern

Bonus: Sparen Sie transparentes Emote mit The Gimp

Beim Exportieren von GIF-Animationen mit transparentem Hintergrund fehlen noch einige Funktionen. Das Ergebnis enthält den weißen Hintergrund, der als Emote stört.

Eine gute Lösung besteht darin, es in ein Apng (PNG-Animationsformat) zu exportieren und es zu konvertieren, wenn Sie ein GIF-Animationsformat wünschen

 

Ich habe jedoch meine eigene Lösung, um die transparenten Hintergrund-Emotes mit der vertrauenswürdigen und kostenlosen OpenSource-Software zu exportieren: The Gimp

Sie können es von der offiziellen Website herunterladen:

 

 

Exportieren Sie zunächst die Bildsequenz aus Clip Studio und gehen Sie zu Menü: Datei> Animation exportieren> Bildsequenz

Hinweis: Vergessen Sie nicht, die Papierebene auszublenden, um den transparenten Hintergrund zu erhalten.

 

Wählen Sie in der Einstellung Ordner und bevorzugte Größe aus [Wichtig !!]

Sie erhalten eine Bildsequenz für Ihr Emote in der bevorzugten Größe.

 

(Ich arbeite in Zukunft immer mit großen Dateien für verschiedene Verwendungszwecke und verwende die Exportoption für verschiedene Exportspezifikationen.)

Jetzt auf der Gimp-Seite:

 

Öffnen Sie The Gimp und gehen Sie zu Datei> Als Ebenen öffnen

Gehen Sie zum Ordner für die Bildsequenz, wählen Sie alle aus und öffnen Sie ihn

Die Dateien werden in Ebenen angeordnet.

Exportieren Sie es dann nach GIF, Datei> Exportieren als

Legen Sie den Dateinamen fest, wählen Sie den Dateityp "gif" und exportieren Sie

Sie erhalten ein Popup-Menü, aktivieren das Kontrollkästchen "Als Animation" und stellen die Bildentsorgung auf ein Bild pro Ebene ein.

 

Die Verzögerung zwischen den Frames beträgt 1000 / Framerate des von Ihnen erstellten Gifs

 

Beispiel: Framerate = 10 fps; Zwischen jedem Frame beträgt die Verzögerung 1000/10 = 100 Millisekunden

Ich hoffe, Sie haben Spaß beim Erstellen Ihrer eigenen Emotes <3

Erledigt!!