1. Design & Illustration
  2. Drawing/Illustration
  3. Animals

So erstellen Sie einen animierten Charakter mit Photoshop und CrazyTalk Animator 3

Scroll to top
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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

Als Grafikdesigner sind Sie mit der Arbeit mit Adobe Photoshop vielleicht sehr vertraut. Photoshop ist zwar sehr leistungsstark, aber nicht für alles gut – versuchen Sie einfach, etwas Fortgeschritteneres als einen hüpfenden Ball zu animieren! Glücklicherweise gibt es andere Programme, mit denen Sie einen direkt in Photoshop erstellten Charakter animieren können, sodass Sie in der zum Entwerfen bestimmten Software entwerfen und in der zum Animieren bestimmten Software animieren können.

In diesem Tutorial zeige ich Ihnen, wie Sie mit einem solchen Programm, CrazyTalk Animator 3, einen in Photoshop erstellten Charakter animieren. Ich werde Ihnen beibringen, wie Sie den Charakter für die Bearbeitung vorbereiten, die Knochen hinzufügen, ihn in CrazyTalk Animator importieren und dann seinen Körper und seine Gesichtszüge animieren – mit einfachen und fortgeschrittenen Techniken.

1. So erstellen Sie einen Charakter für die Animation

Dieser Teil ist optional. Sie müssen mir nicht direkt folgen; Sie können jeden anderen Charakter erstellen oder einen zuvor erstellten verwenden. Stellen Sie nur sicher, dass es wie bei mir geschichtet ist.

Ein Charakter lässt sich am einfachsten animieren, wenn er aus einfachen Formen besteht. In Photoshop können sie mit dem Stiftwerkzeug als Formen erstellt werden. Die Verwendung dieses Tools ist nicht schwer, aber wenn Sie mehr darüber erfahren möchten, probieren Sie unseren superkurzen Kurs So verwenden Sie das Stiftwerkzeug und die Pfade in Adobe Photoshop. Wir haben auch ein älteres Tutorial mit einer tollen Übung, die Ihnen helfen wird, das Tool im Handumdrehen zu verstehen:

Wenn Sie Photoshop CC haben, können Sie auch das intuitivere Curvature Pen Tool verwenden.

Stellen Sie sicher, dass Sie das Stiftwerkzeug im Formmodus verwenden. Dadurch werden die Pfade automatisch eingefärbt und Sie können die Farben jederzeit ändern, indem Sie auf die Miniaturansicht doppelklicken.

how to draw shapes in photoshophow to draw shapes in photoshophow to draw shapes in photoshop

Schritt 1

Beginnen Sie mit einem Torso. Es sollte nicht vollständig oval sein; Versuchen Sie, die Vorderseite etwas kleiner zu machen. Verwenden Sie #acb6b8, um es zu färben. Sie müssen meine Form nicht perfekt kopieren – stellen Sie nur sicher, dass sie glatt und rund ist.

simple oval torsosimple oval torsosimple oval torso

Schritt 2

Erstellen Sie das Vorderbein und die Pfote separat (auf verschiedenen Ebenen). Verwenden Sie die gleiche Farbe, um das Bein schön mit dem Rumpf zu verschmelzen. Dies wird uns helfen, mögliche Inkonsistenzen in der Bewegung zu verbergen.

simple cat pawsimple cat pawsimple cat paw

Schritt 3

Kopieren Sie das Bein mit der Pfote und legen Sie es hinter die anderen Ebenen. Ändern Sie ihre Farbe in #919a9c.

cat two front legs drawingcat two front legs drawingcat two front legs drawing

Schritt 4

Erstellen Sie zwei andere Beine auf die gleiche Weise.

simple cat hind legsimple cat hind legsimple cat hind leg
simple cat legs drawingsimple cat legs drawingsimple cat legs drawing

Schritt 5

Erstellen Sie den Schwanz mit einem einfachen Oval. Male es mit #919a9c aus.

simple cat tailsimple cat tailsimple cat tail

Schritt 6

Fügen Sie den Kopf hinzu. Male es mit #c1cdcf aus.

simple cat headsimple cat headsimple cat head

Schritt 7

Fügen Sie zwei Ellipsen für die Flecken um die Augen hinzu. Verwenden Sie die Farbe des Torsos für sie.

simple cat eye patchessimple cat eye patchessimple cat eye patches

Schritt 8

Fügen Sie die Augen hinzu: einen schwarzen Kreis, ein weißes Oval für den Glanz und eine dunkelgraue Form unten für die Reflexion. Behalten Sie die Augen auf separaten Ebenen.

simple cat eye vectorsimple cat eye vectorsimple cat eye vector
how to draw simple cat eyes in vectorhow to draw simple cat eyes in vectorhow to draw simple cat eyes in vector

Schritt 9

Erstelle den Mund aus drei Kreisen: zwei davon in der Farbe des Oberkörpers und einer in der Farbe der Beine im Hintergrund.

simple cat mouthsimple cat mouthsimple cat mouth

Schritt 10

Fügen Sie eine einfache Ellipse für die Nase hinzu. Male es mit #ff7dd1 aus.

simple cat nosesimple cat nosesimple cat nose

Schritt 11

Fügen Sie die Ohren hinzu. Färbe sie wie den Torso.

simple cat earssimple cat earssimple cat ears

Schritt 12

Wir haben alle Körperteile erstellt, aber das Gesicht ist genauso wichtig wie die Beine oder der Schwanz. Sie können einige Variationen der Augen und des Mundes hinzufügen, um verschiedene Gesichtsausdrücke zu erzielen, die Sie später in der Animation verwenden können. Bewahren Sie sie alle an derselben Stelle auf, damit Sie den Ausdruck ändern können, indem Sie einfach die Ebenen ein- / ausblenden.

various facial experessions for catvarious facial experessions for catvarious facial experessions for cat

Schritt 13

Das sind alle meine Schichten. Die grundlegenden sind:

  • Vorderes rechtes Bein
  • Vordere rechte Pfote
  • Hinteres rechtes Bein
  • Hintere rechte Pfote
  • Schwanz
  • Torso
  • Vorderes linkes Bein
  • Vordere linke Pfote
  • Hinteres linkes Bein
  • Hintere linke Pfote
  • Kopf

Wenn Sie nur den Körper animieren möchten, verschmelzen Sie die Augen und den Mund mit dem Kopf (Sie können auch die Ohren verschmelzen). Wenn Sie auch das Gesicht animieren möchten, benötigen Sie weitere Ebenen:

  • Linkes Auge normal
  • Rechtes Auge normal
  • Linkes Auge geschlossen
  • Rechtes Auge geschlossen
  • Lächeln des linken Auges
  • Rechtes Auge lächeln
  • Linkes Auge Angst
  • Rechtes Auge Angst
  • Mund normal
  • Mund offen
  • Mund überrascht
  • Mund lächeln
  • Mundzähne
  • Rechtes Ohr
  • Linkes Ohr
photoshop layered for animationphotoshop layered for animationphotoshop layered for animation

2. Wie man einem Charakter in Photoshop Knochen hinzufügt

Um unseren Charakter zu animieren, müssen wir jedem Körperteil einen "Knochen" zuweisen. Alle Knochen bilden zusammen ein "Skelett", mit dem Sie eine flüssige, realistische Animation erstellen können. Sie können die Knochen ganz einfach direkt in Photoshop hinzufügen, indem Sie eine spezielle Vorlage für die Vierbeiner-Bewegung verwenden.

Schritt 1

Laden Sie das Vorlagenpaket herunter und gehen Sie zu 01_Templates > Quadruped Template, um die Vorlage in Photoshop zu öffnen.

quadruped motion templatequadruped motion templatequadruped motion template

Schritt 2

Wir müssen die Vorlage mit unserem Charakter in die Datei bringen. Machen Sie dazu beide Fenster sichtbar, wählen Sie alle Ebenen in der Vorlage aus und ziehen Sie sie über das Charakterfenster.

how to bring layers from a file to another file in photoshophow to bring layers from a file to another file in photoshophow to bring layers from a file to another file in photoshop

Schritt 3

Wenn die Ebenen noch ausgewählt sind, verwenden Sie das Free Transform Tool (Strg-T), um die Größe des Skeletts so zu ändern, dass es ungefähr dem Charakter entspricht.

how to resize in photoshophow to resize in photoshophow to resize in photoshop

Schritt 4

Die Vorlagendatei enthält vier Arten von Elementen:

  • Bilder: die Teile der Animation, die wir sehen können.
  • Knochen: die Teile der Animation, die die Bewegung der Bilder steuern, obwohl sie während der Animation nicht sichtbar sind.
  • Labels: Sie helfen uns, die Knochen den richtigen Bildern zuzuordnen.
  • Pivot: definiert die Bodenhöhe.

Zuerst müssen wir die Vorlagenbilder Teil für Teil durch unsere eigenen ersetzen. Öffnen Sie die Gruppe RL_Image, öffnen Sie dann einen darin enthaltenen Ordner und löschen Sie seinen Inhalt.

find the folderfind the folderfind the folder

Ersetze es durch einen Körperteil deines Charakters.

replace the image inside a folderreplace the image inside a folderreplace the image inside a folder

Tun Sie dies mit allen Ordnern, die den Hals erwarten (den wir nicht haben), und, wenn Sie später Gesichtsanimationen erstellen möchten, auch den Kopf. Die Ohren können als Teil des Körpers animiert werden, aber bei einer nach vorne gerichteten Katze möchten wir nicht, dass sie sich zu viel bewegt, also schließen Sie sie auch aus.

layer order ready for animationlayer order ready for animationlayer order ready for animation
Denken Sie daran, dass "links" und "rechts" die Richtungen am Körper bedeuten, nicht wie Sie sie sehen. Das Rechte Auge ist also das rechte Auge der Katze.

Schritt 5

Die Bilder für den Gesichtsausdruck sollten auf die gleiche Weise vorbereitet werden, außer dass sie ihre eigenen Ordner in der Gruppe RL_TalkingHead > HeadImage haben. Platzieren Sie die "normalen" Augen in der Iris-Gruppe und die anderen in der EyeWhite-Gruppe.

facial expression layers eyesfacial expression layers eyesfacial expression layers eyes
facial expression layers headfacial expression layers headfacial expression layers head
facial expression layers mouthfacial expression layers mouthfacial expression layers mouth

Schritt 6

Die Bilder sind fertig, also können wir jetzt die Knochen hinzufügen. Bones werden automatisch in CrazyTalk Animator erstellt; Sie müssen dem Programm nur sagen, wo die Gelenke sind. Sie können die Vorlage als Referenz verwenden, um zu sehen, wo der Hund seine Gelenke hat und wie sie auf Ihren Charakter zutreffen.

character in photoshop how to add bonescharacter in photoshop how to add bonescharacter in photoshop how to add bones

Öffnen Sie die Gruppe RL_Bone_Quadruped. Jedes Körperteil hat seinen eigenen Ordner mit den Markierungen der Gelenke. Um die Markierungen richtig zu platzieren, können Sie die anderen Bilder ausblenden, während Sie an einem arbeiten. Beginnen Sie mit dem Schwanz: Platzieren Sie die Markierungen daran und halten Sie sich von den Rändern der Form fern. Diese Markierungen sind die Biegepunkte.

how to prepare tail for animationhow to prepare tail for animationhow to prepare tail for animation

Schritt 7

Zeigen Sie jetzt eine der Hinterpfoten und suchen Sie den entsprechenden Ordner mit Gelenken. Platzieren Sie die Foot_Nub-Markierung fast an der Fußspitze und die Foot-Markierung in der Mitte.

how to prepare foot for animationhow to prepare foot for animationhow to prepare foot for animation

Schritt 8

Zeigen Sie den Rest des Beins und fügen Sie die anderen Gelenke hinzu: Schaft für die Ferse, Oberschenkel für das Knie und UpThigh für die Hüfte.

how to prepare leg for animationhow to prepare leg for animationhow to prepare leg for animation

Schritt 9

Fügen Sie auch dem anderen Bein des Paares Gelenke hinzu.

how to prepare cat hind legs for animationhow to prepare cat hind legs for animationhow to prepare cat hind legs for animation

Schritt 10

Kommen Sie jetzt zu den Beinen vorne. Hier ist Shank das Handgelenk, Thigh ist der Ellbogen und UpThigh ist die Schulter (die Namen stammen aus der Vorlage für eine menschliche Figur; deshalb sind sie etwas verwirrend, wenn Sie eine Katze erstellen!).

cat front leg ready for animationcat front leg ready for animationcat front leg ready for animation

Schritt 11

Beenden Sie das andere Bein auf die gleiche Weise.

how to add bones to cat front leghow to add bones to cat front leghow to add bones to cat front leg

Schritt 12

Öffnen Sie den Ordner Torso, um die Gelenke für Hüfte und Wirbelsäule zuzuweisen.

cat hip spine how to animatecat hip spine how to animatecat hip spine how to animate

Schritt 13

Mein Charakter hat nicht wirklich einen sichtbaren Hals, aber wir müssen noch zeigen, wo er ist.

add neck for animationadd neck for animationadd neck for animation

Schritt 14

Wenn Sie möchten, dass sich die Ohren als Teil des Körpers bewegen, fügen Sie ihnen auch Knochen hinzu.

how to add bones to ears for animationhow to add bones to ears for animationhow to add bones to ears for animation

Schritt 15

Wenn Sie die Gesichtszüge animieren möchten, gehen Sie zu RL_TalkingHead und öffnen Sie den HeadBone-Ordner. Platzieren Sie die Markierungen auf den entsprechenden Gesichtszügen.

how to prepare facial features for animationhow to prepare facial features for animationhow to prepare facial features for animation

Schritt 16

Platzieren Sie abschließend den ObjectPivot direkt unter den Pfoten Ihres Charakters (Sie finden ihn in der Gruppe RL_Bone_Quadruped) und sehen Sie sich das gesamte Skelett noch einmal an. Sie können es jetzt als vollständige Struktur sehen, sodass Sie leichter erkennen können, ob etwas nicht richtig platziert ist. Wenn Sie einen Fehler entdecken, gehen Sie einfach zur Gruppe und verschieben Sie die Markierung an die richtige Stelle.

how to add bones to photoshop characterhow to add bones to photoshop characterhow to add bones to photoshop character

3. So importieren Sie einen Charakter in CrazyTalk Animator

Schritt 1

Sobald der Charakter fertig und gespeichert ist, öffnen Sie CrazyTalk Animator und klicken Sie auf G3 Free Bone Actor erstellen.

create g3 free bone actorcreate g3 free bone actorcreate g3 free bone actor

Dein Charakter wird in das Programm übernommen und automatisch im Composer Mode angezeigt. Sie können sehen, wie die Knochen zwischen den Gelenken erstellt wurden, die Sie in Photoshop zugewiesen haben. Die Ohren haben keine echten Knochen, weil ich sie zu einem Teil des Kopfes gemacht habe, um sie am Bewegen zu hindern (wenn Sie möchten, dass sie sich bewegen, legen Sie sie einfach in ihren Ordner in der Gruppe RL_Image).

photoshop character imported to crazytalkphotoshop character imported to crazytalkphotoshop character imported to crazytalk

Schritt 2

Im Composer-Modus können Sie ein wenig mit dem Charakter spielen, um zu sehen, ob er für die Animation bereit ist. Sie können beispielsweise auf Vorschau klicken, um die Verbindungen zu testen.

Click previewClick previewClick preview
test joints in crazytalk animatortest joints in crazytalk animatortest joints in crazytalk animator

Schritt 3

Wenn Sie auf Pose bearbeiten klicken, können Sie den Charakter anpassen.

edit pose crazytalk animatoredit pose crazytalk animatoredit pose crazytalk animator

Sie können zum Beispiel den ganzen Körperteil samt Knochen verschieben, wenn Sie einen Fehler entdeckt haben...

how to adjust character pose crazytal kanimatorhow to adjust character pose crazytal kanimatorhow to adjust character pose crazytal kanimator

... oder Sie können den Bones Editor öffnen, um die Bones separat zu verschieben.

how to move bones in crazytalk animatorhow to move bones in crazytalk animatorhow to move bones in crazytalk animator
move the bone crazytalk animatormove the bone crazytalk animatormove the bone crazytalk animator

Schritt 4

Wenn Ihnen diese Optionen nicht ausreichen und Sie etwas bequemer in Photoshop ändern möchten, klicken Sie einfach auf Zum externen PSD-Editor starten. Oder Sie öffnen Ihre Datei einfach erneut, ändern sie und importieren sie erneut.

launch to external psd editor crazytalk animatorlaunch to external psd editor crazytalk animatorlaunch to external psd editor crazytalk animator

Schritt 5

Sie können feststellen, dass einige der Ebenen beim Zuweisen der Knochen durcheinander geraten sind. Wir können es jetzt beheben. Gehen Sie einfach zum Layer-Manager...

layer manager crazytalk animatorlayer manager crazytalk animatorlayer manager crazytalk animator

... und ziehen Sie die Ebenen an die gewünschte Stelle. Ich habe die Ohren über das Gesicht gelegt und das vordere rechte Bein und die Pfote über den Kopf.

how to change the layers crazytalk animatorhow to change the layers crazytalk animatorhow to change the layers crazytalk animator

Schritt 6

Wenn Sie mit der Animation beginnen möchten, verlassen Sie einfach den Composer-Modus, indem Sie auf Backstage klicken.

leave composer mode crazytalk animatorleave composer mode crazytalk animatorleave composer mode crazytalk animator

4. So fügen Sie Ihrem Charakter eine einfache Animation hinzu

Schritt 1

Sobald Sie den Charakter fertig haben, ist es sehr einfach, ihn zu animieren! Öffnen Sie zunächst den Fenster > Timeline-Editor.

how to open timeline editor crazytalk animatorhow to open timeline editor crazytalk animatorhow to open timeline editor crazytalk animator

Schritt 2

Klicken Sie auf Bewegung, um eine typische Zeitleiste unter Ihrem Charakter anzuzeigen.

where to find timeline in crazytalk animatorwhere to find timeline in crazytalk animatorwhere to find timeline in crazytalk animator

Schritt 3

CrazyTalk Animator enthält eine Reihe von Beispielanimationen, die Sie sofort verwenden können. Gehen Sie einfach zum Content-Manager...

content manager crazytalk animatorcontent manager crazytalk animatorcontent manager crazytalk animator

... öffnen Sie die Registerkarte Animation...

animation tab crazytalk animatoranimation tab crazytalk animatoranimation tab crazytalk animator

... gehe zu Bewegung...

motion templates crazytalk animatormotion templates crazytalk animatormotion templates crazytalk animator

... und durchsuchen Sie die Ordner: G3 Animals...

g3 animals templates crazytalk animatorg3 animals templates crazytalk animatorg3 animals templates crazytalk animator

... Katzen...

cats motion templates crazytalk animatorcats motion templates crazytalk animatorcats motion templates crazytalk animator

... Bewegung...

motion templates crazytalk animatormotion templates crazytalk animatormotion templates crazytalk animator

... bis Sie zur Liste der verfügbaren Bewegungen gelangen. Es gibt viele Arten von Bewegungen. Hier haben Sie beispielsweise eine Startbewegung (1S), eine Schleifenbewegung (2L) und eine Endbewegung (3E). Sie können alle verwenden, um eine flüssige Bewegung zu erzeugen.

Um die Animation hinzuzufügen, wählen Sie einfach Ihren Charakter aus und doppelklicken Sie auf die Bewegung. Für eine einfache Laufanimation fügen Sie einen Walk(1S), zwei Walk(2L) und einen Walk(3E) hinzu.

how to make character walk crazytalk animatorhow to make character walk crazytalk animatorhow to make character walk crazytalk animator

Schritt 4

Um die Animation abzuspielen, können Sie die einfachen Steuerelemente direkt über der Timeline verwenden. Um den Start und das Ende der Animation festzulegen, ziehen Sie die roten Markierungen.

animation controls crazytalk animatoranimation controls crazytalk animatoranimation controls crazytalk animator

Es geht!

Wenn Sie mehr vorgefertigte Bewegungen wie diese wünschen, finden Sie sie im G3-Animals: Cats-Paket.

g3 animals cat motions crazytalk animatorg3 animals cat motions crazytalk animatorg3 animals cat motions crazytalk animator

5. So erstellen Sie eine benutzerdefinierte Animation

Die vorgefertigten Bewegungen sind universell und wurden für die Knochen, aber nicht für die Bilder entwickelt, sodass sie manchmal nicht vollständig zu Ihrem Charakter passen. Zum Beispiel wurde die Sit and Lick-Bewegung nicht für einen nach vorne gerichteten Charakter wie meinen entwickelt. Aber das ist kein Problem – wir können eine solche Animation (und viele, viele mehr) selbst erstellen!

sit and lick animation crazytalk animatorsit and lick animation crazytalk animatorsit and lick animation crazytalk animator

Schritt 1

Öffnen Sie den 2D-Motion-Key-Editor.

2d motion key editor crazytalk animator2d motion key editor crazytalk animator2d motion key editor crazytalk animator

Schritt 2

Bewegen Sie den Marker über den Frame, an dem Ihre Bewegung stattfinden soll.

how to start animation crazytalk animatorhow to start animation crazytalk animatorhow to start animation crazytalk animator

Schritt 3

Übernehmen Sie Ihre Änderungen. Bewegen und drehen Sie die Knochen, um Ihren Charakter zu positionieren.

bend the spine crazytalk animatorbend the spine crazytalk animatorbend the spine crazytalk animator
rotate the hips crazytalk animatorrotate the hips crazytalk animatorrotate the hips crazytalk animator
bend the knees crazytalk animatorbend the knees crazytalk animatorbend the knees crazytalk animator
put down the tail crazytalk animatorput down the tail crazytalk animatorput down the tail crazytalk animator

Wenn Sie die Animation jetzt abspielen, sehen Sie, wie der Charakter seine Position ab dem ersten Frame allmählich ändert.

Schritt 4

Also setzt sich unser Kätzchen. Jetzt wollen wir, dass es seine Pfote nach oben bewegt und es leckt. Wie Sie gerade bemerkt haben, erfolgt die Animation zwischen den Keyframes – denjenigen, an denen etwas geändert wurde (wie durch einen Punkt auf der Timeline angezeigt). Wenn Sie möchten, dass Ihr Charakter eine Weile in der Pose bleibt, bevor er zu einer weiteren Änderung animiert wird, fügen Sie einfach manuell einen Keyframe hinzu, indem Sie V drücken.

add a keyframe manually crazytalk animatoradd a keyframe manually crazytalk animatoradd a keyframe manually crazytalk animator

Schritt 5

Bewegen Sie den Marker zu dem Frame, an dem eine weitere Bewegung anhalten soll.

move the marker on timelinemove the marker on timelinemove the marker on timeline

Schritt 6

Positionieren Sie die Knochen wieder nach Belieben.

bring the paw up crazytalk animatorbring the paw up crazytalk animatorbring the paw up crazytalk animator
tilt the head crazytalk animatortilt the head crazytalk animatortilt the head crazytalk animator

Schritt 7

Spielen Sie die Animation ab, um die Ergebnisse zu sehen! Denken Sie daran: Wenn etwas zu schnell oder zu langsam passiert, können Sie die Keyframes jederzeit ziehen, um die Abstände zwischen ihnen zu ändern.

6. Wie man Gesichtsausdrücke animiert

Jetzt wissen Sie, wie man den Körper animiert, aber was ist mit dem Gesicht? Es ist auch nicht so schwer!

Schritt 1

Fügen Sie einen Keyframe an der Stelle hinzu, an der Ihre Bewegung beginnen soll.

select the time crazytalk animatorselect the time crazytalk animatorselect the time crazytalk animator

Schritt 2

Öffnen Sie den Face Puppet-Editor.

face puppet editor crazytalk animatorface puppet editor crazytalk animatorface puppet editor crazytalk animator

Schritt 3

Wählen Sie die Katze als Gesichtsanimationsprofil aus.

cat face animation profile crazytalk animatorcat face animation profile crazytalk animatorcat face animation profile crazytalk animator

Schritt 4

Klicken Sie auf Vorschau und bewegen Sie den Cursor in die Mitte des Gesichts Ihres Charakters. Drücken Sie die Leertaste und bewegen Sie den Cursor, um zu sehen, wie das Kätzchen es betrachtet!

make the character look around crazytalk animatormake the character look around crazytalk animatormake the character look around crazytalk animator

Schritt 5

Es stehen verschiedene Standardgesichtsausdrücke zur Verfügung, deren Wirkung von den verwendeten Assets abhängt. Ich habe festgestellt, dass der Ausdruck "wütend" eigentlich ziemlich gut zum Lecken ist, wenn ich den Cursor nach links und schnell auf und ab bewege!

angry animation licking crazytalk animatorangry animation licking crazytalk animatorangry animation licking crazytalk animator

Sie können das Zeichen zum Blinken bringen, indem Sie während der Vorschau mit der linken Maustaste klicken. Das wird nützlich sein!

make character blink crazytalk animatormake character blink crazytalk animatormake character blink crazytalk animator

Schritt 6

Üben Sie eine Weile mit der Vorschau, bis Sie sicher sind, wie Sie den Kopf bewegen müssen, um den gewünschten Effekt zu erzielen. Klicken Sie dann auf Aufzeichnen und drücken Sie die Leertaste oder die Eingabetaste, um die Bewegung aufzuzeichnen. Drücken Sie zum Beenden erneut die Leertaste.

how to record facial animation crazytalk animatorhow to record facial animation crazytalk animatorhow to record facial animation crazytalk animator

Gut aussehen!

Schritt 7

Nachdem die Animation des Leckens aufhört, möchte ich, dass das Kätzchen seine Pfote wieder auf den Boden bewegt. Platzieren Sie dazu einen Keyframe nach der Animation.

add a new keyframeadd a new keyframeadd a new keyframe

Schritt 8

Platzieren Sie den Marker in einiger Entfernung von diesem Keyframe...

add distance between keyframes crazytalk animatoradd distance between keyframes crazytalk animatoradd distance between keyframes crazytalk animator

... und positionieren Sie das Zeichen erneut.

position the bones of character crazytalk animatorposition the bones of character crazytalk animatorposition the bones of character crazytalk animator

Schritt 9

Nachdem die Animation abgeschlossen ist, möchte ich, dass das Kätzchen den Kopf neigt und lächelt. Der erste Teil kann mit dem 2D Motion Key Editor erledigt werden...

kitten tilt head animation crazytalk animatorkitten tilt head animation crazytalk animatorkitten tilt head animation crazytalk animator

... und das andere mit dem Sprite Editor.

sprote editor crazytalk animatorsprote editor crazytalk animatorsprote editor crazytalk animator

Schritt 10

Wählen Sie mit der Markierung im richtigen Rahmen das Element des Gesichts aus, das Sie ändern möchten, und wählen Sie dann das Bild aus, durch das Sie es ersetzen möchten.

sprite editor change eyes to smile crazytalk animatorsprite editor change eyes to smile crazytalk animatorsprite editor change eyes to smile crazytalk animator
smiling eyes crazytalk animatorsmiling eyes crazytalk animatorsmiling eyes crazytalk animator

Es lächelt!

Schritt 11

Um die Animation zu beenden, können Sie später einen weiteren Keyframe hinzufügen, wobei die Gesichtszüge wieder normal sind.

niormal facial features crazytalk animatorniormal facial features crazytalk animatorniormal facial features crazytalk animator

7. So beenden Sie die Animation

Aber was ist, wenn Sie zu Beginn eine Animation hinzufügen möchten, wo zu wenige Frames vorhanden sind, um etwas hinzuzufügen? Kein Problem! Lassen Sie uns einfach weitere Frames hinzufügen.

Schritt 1

Stellen Sie sicher, dass Sie das Projekt auf Ihrer Liste haben.

how to make project visible crazytalk animatorhow to make project visible crazytalk animatorhow to make project visible crazytalk animator

Schritt 2

Klicken Sie auf Clip sammeln.

collect clip crazytalk animatorcollect clip crazytalk animatorcollect clip crazytalk animator

Schritt 3

Klicken Sie auf Rahmen einfügen.

how to insert frames crazytalk animatorhow to insert frames crazytalk animatorhow to insert frames crazytalk animator

Schritt 4

Geben Sie die Anzahl der Frames ein, die Sie hinzufügen möchten. Haben Sie keine Angst, zu viele hinzuzufügen; Es ist einfach, die leeren zu entfernen.

how to add more frames crazytalk animatorhow to add more frames crazytalk animatorhow to add more frames crazytalk animator

Schritt 5

Die Rahmen wurden hinzugefügt! Ich habe beschlossen, sie mit einer Laufanimation zu füllen.

add walking animation on the beginning crazytalk animatoradd walking animation on the beginning crazytalk animatoradd walking animation on the beginning crazytalk animator

Schritt 6

Stellen Sie sicher, dass beide Animationen genügend Platz auf der Timeline haben und sich im richtigen Moment treffen.

how to connect two animations crazytalk animatorhow to connect two animations crazytalk animatorhow to connect two animations crazytalk animator

Schritt 7

Das Kätzchen läuft vorerst auf der Stelle, aber es kann repariert werden. Gehen Sie einfach zum ersten Bild und bewegen Sie den Charakter außerhalb der Szene.

move the character outside of the scene crazytalk animatormove the character outside of the scene crazytalk animatormove the character outside of the scene crazytalk animator

Die Bewegungsgeschwindigkeit wird automatisch an die Entfernung angepasst.

Schritt 8

Ich habe mehr Frames zwischen den Lauf- und Leckanimationen hinzugefügt, um alles langsamer zu machen. Mein Kätzchen wird jetzt süß blinzeln und auch seinen Schwanz bewegen.

cat blinking crazytalk animatorcat blinking crazytalk animatorcat blinking crazytalk animator

Schritt 9

Wenn Ihre Animation fertig ist und der Welt gezeigt werden kann, gehen Sie zu Rendern > Render Video.

render video crazytalk animatorrender video crazytalk animatorrender video crazytalk animator

Schritt 10

Passen Sie die Optionen nach Ihren Wünschen an. Stellen Sie sicher, dass die Rahmenauswahl korrekt ist!

render video options crazytalk animatorrender video options crazytalk animatorrender video options crazytalk animator

Gut gemacht!

Mein Kätzchen läuft, lächelt und leckt seine Pfote! Und wie sieht es mit deinem Charakter aus? Ich würde gerne Ihr Ergebnis sehen, also haben Sie keine Angst, es in den Kommentaren zu teilen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads