Links willkommen

Bewegtes Piktogramm-GIF in AnimeEffects erstellen, mit Screenshots erklärt

How to Make a Moving Pictogram GIF in AnimeEffects, Explained with Screenshots

Written by

ToolCluster

in

Dieser Artikel geht durch: Piktogramm in PowerPoint in Teile zerlegen, in AnimeEffects Knochen setzen, als GIF exportieren. Das Beispiel ist eine blaue Figur, die mit dem linken Arm winkt. Dasselbe Verfahren eignet sich für ein Site-Icon, das auffallen soll, oder für eine Bewegung, die sich als kurze Schleife leichter zeigt als in Worten oder als Video. (Die Beschriftungen in den Figuren sind englisch.)

Die Screenshots stammen aus AnimeEffects und Microsoft PowerPoint®. Marken stehen in der Notiz am Ende. Die Bilder sind von der Originalsitzung. In einer neueren Version können Menünamen anders lauten.

Fertiges winkendes Piktogramm, beurteilt am linken Arm, der hin und her schwingt. Zeigt eine knochengebogene Schleife als GIF. Die Figur wiederholt eine Pose mit erhobenem Arm und eine mit seitlich gestrecktem Arm.
Die fertige Schleife. Der linke Arm winkt, dann wiederholt sich das GIF

Was diese Seite abdeckt

SprungPunkt
Zeichnungleft-arm, torso, legs und background als PNG trennen
InstallierenOffizielles Zip entpacken. Aktuelle Zips enthalten FFmpeg
ProjektMit left-arm starten, Rest im Resource Window ergänzen
AnordnenMove, rotate, scale zur Figur; dann Startpose
KnochenKlick Schulter, Ellbogen, Handgelenk; influence; beugen
WinkenPosen bei 0 s und 1 s; Start nach 2 s kopieren. Max frames 120
GIFExport As → GIF Animation. Optimize palette einschalten
Wenn Export fehlschlägtZip von FFmpeg.org nach tools neben die exe

Zeichnung in PNGs teilen

Beginnen Sie nicht mit einer einzigen flachen Zeichnung. Trennen Sie an den Gelenken, die sich biegen müssen. Dieses Beispiel nutzt vier Teile: ① linker Arm, ② Rumpf, ③ Beine, ④ Hintergrund. Der Hintergrund ist ein randloses weißes Quadrat.

Diese Bilder entstanden in PowerPoint. Jedes Malprogramm reicht, wenn Sie es schon nutzen.

Piktogrammteile, gezeigt als linker Arm, Beine, Rumpf und Hintergrund. Erklärt das Trennen an den Gelenken, die sich biegen müssen. Das Raster ist ein diagonaler Arm, ein Beinpaar, ein Rumpf mit Kopf und ein weißes Quadrat.
Zeichnen Sie left-arm, legs, torso und background getrennt

Speichern Sie jedes Teil als PNG. In PowerPoint Rechtsklick auf die Auswahl und Save as Picture.

⚠️ Häufige Falle

Rumpf und Beine bestehen aus mehreren Formen. Eine einzelne Form speichern ergibt nur den Kopf oder ein Bein. Wie im GIF unten zuerst die Gruppe markieren, dann Save as Picture. Das GIF zeigt noch das japanische PowerPoint-Menü.

Gruppierte PowerPoint-Formen als PNG speichern, gezeigt durch einen Rahmen, dann Save as Picture. Erklärt, dass ein Rumpf aus mehreren Formen zusammen markiert werden muss. Das GIF folgt dem blauen Oberkörper beim Einrahmen und Speichern.
Mehrere Formen zuerst als Gruppe markieren, dann Save as Picture
Die vier gespeicherten PNGs, gezeigt an englischen Dateinamen neben jedem Teil. Erklärt, welche Dateien in AnimeEffects kommen. Die Felder sind background.png, legs.png, left-arm.png und torso.png.
left-arm.png, torso.png, legs.png, background.png

Die Namen passen zu den folgenden Bildern: left-arm.png, torso.png, legs.png, background.png. Manche Originalscreenshots zeigen unter den Labels noch die japanischen Dateinamen.

AnimeEffects installieren

AnimeEffects setzt Knochen auf 2D-Bilder und bewegt sie. Das offizielle Windows-Zip braucht keine Installation: entpacken und AnimeEffects.exe starten. Es gibt auch Mac- und Linux-Zips. Diese Screenshots sind Windows.

Bezug unter GitHub Releases. Der Ablauf steht unter Downloads.

GIF- und Videoexport brauchen FFmpeg. Das aktuelle offizielle Zip enthält es schon, Sie können weitermachen. Gelingt der Export, ist kein Extra-Download nötig. Schlägt er fehl, folgen Sie den Schritten am Ende und legen einen Build von der FFmpeg-Seite ab.

Zur FFmpeg-Installation springen

Projekt öffnen und Teile hinzufügen

Starten Sie AnimeEffects.exe. Die Fläche ist zuerst leer.

AnimeEffects direkt nach dem Start, beurteilt an leerer Fläche und Docks. Zeigt das Fenster, bevor ein Projekt existiert. Die Mitte ist dunkel; Timeline und Projektdock sind leer.
Direkt nach dem Start. Die Fläche ist noch leer

Unter File wählen Sie New Project. Setzen Sie die Anfangsressource auf das gerade gespeicherte left-arm.png. Haken Sie Specify canvas size an, Breite und Höhe je 1024.

Dialog New Project, beurteilt an Anfangsressource und Flächengröße. Zeigt den Start mit left-arm.png bei 1024 quadratisch. Specify canvas size ist angehakt; Breite und Höhe sind 1024.
Initial resource: left-arm.png. Fläche 1024×1024

OK lässt nur den linken Arm auf der Fläche.

Die Fläche nach New Project, beurteilt daran, dass nur die Anfangsressource liegt. Zeigt, dass die anderen Teile noch fehlen. Ein blauer diagonaler linker Arm sitzt allein in einem gestrichelten Quadrat.
Nach New Project. Nur der linke Arm liegt auf der Fläche

Den Rest über Window → Resource Window → Add Resources. Torso, legs und background ebenso einfügen.

Ressourcen hinzufügen, beurteilt an Window, Resource Window und Add Resources. Zeigt, wie die restlichen PNGs ins Projekt kommen. Resource Window ist gewählt und Add Resources ist offen.
Window → Resource Window → Add Resources
Resource Window vorher und nachher, beurteilt an der wachsenden Dateiliste. Zeigt das Hinzufügen von torso, legs und background nach left-arm. Links eine Datei; rechts vier Namen.
Nach left-arm.png torso.png, legs.png und background.png hinzufügen
Die Fläche direkt nach dem Hinzufügen, beurteilt an Überlappung und Zielliste. Zeigt, dass Lage und Größe noch nicht gesetzt sind. Die blaue Figur sitzt in einem weißen Rahmen; die Liste enthält topnode.
Die Teile liegen noch übereinander. Als Nächstes ausrichten

Teile anordnen und Startpose setzen

Im Toolbox oben links Move, rotate, scale wählen. Im Target Dock unten links das Teil wechseln und auf der Fläche eine Person bauen. Größen hier ebenfalls anpassen.

Teile anordnen, beurteilt an Move, rotate, scale und dem Target Dock. Zeigt den Zeilenwechsel, um jedes Stück zu verschieben. Das Verschieben-Werkzeug ist eingerahmt; left-arm und topnode sind unterstrichen.
Move, rotate, scale wählen, dann eine Zeile im Target Dock
Zusammensetzen der Figur, beurteilt am Verschieben und Skalieren auf der Fläche. Zeigt Lage und Größe vor der Startpose. Die blaue Person wird aus gestapelten Teilen zu einer stehenden Figur.
Teile verschieben und skalieren, bis eine stehende Figur entsteht
💡 Tipp

Zeilen außer left-arm dürfen topnode heißen. Die Zeile auswählen reicht für dieses Verfahren.

Steht die Figur, dieselbe Werkzeugwahl für die Startpose — der Beginn des Winkens. Timeline bei 0 s lassen.

Die Startpose, beurteilt an der Timeline bei 0 s. Zeigt den ersten Key des Winkens. Ein Arm steht am Kopf; der andere öffnet nach unten; ein Auswahlrahmen ist an.
Startpose bei 0 s. Der Arm, der das Winken beginnt

Knochen in den linken Arm und beugen

Im GIF oben knickt der linke Arm am Ellbogen. Das PNG rutscht nicht als starres Stück. Ein Knochen zieht die Pixel.

left-arm im Target Dock einschalten, dann im Toolbox Build bones. Mit Add bones darunter auf der Zeichnung Schulter, Ellbogen und Handgelenk anklicken.

Knochenwerkzeuge, beurteilt an Select left-arm, dann Build bones und Add bones. Zeigt, wo das Arm-Rig beginnt. Select, Build bones und Add bones sind rot eingerahmt.
Select left-arm, dann Build bones → Add bones
Knochen setzen, beurteilt an Klicks auf Schulter, Ellbogen und Handgelenk. Zeigt die Gelenkreihenfolge auf einem PNG. Das GIF folgt diesen drei Klicks auf dem blauen linken Arm.
Klick auf Schulter, Ellbogen, dann Handgelenk

Klicks allein entscheiden nicht, welche Pixel folgen. Adjust influence (rechts von Add bones) nutzen und den Bereich von der Kette aus weiten. Zu weit, und der Rumpf knickt mit dem Arm. Auf den Armpixeln halten.

Knocheneinfluss, beurteilt am Weiten des Bereichs um die Kette. Zeigt, dass nur Armpixel folgen sollen. Das GIF weitet den Einfluss über den linken Arm.
Einfluss so weiten, dass nur Armpixel dem Knochen folgen

Ist der Bereich gesetzt, im Toolbox Pose bones, darunter Move bone, und das Handgelenk ziehen. Der Ellbogen faltet sich zu einem Winken nah am Eröffnungs-GIF.

Den Arm posieren, beurteilt an Pose bones und Move bone. Zeigt das Beugen des Ellbogens fürs Winken. Der blaue Arm hat einen rosa Knochen, eine Geisterpose und einen roten Bewegungspfeil.
Pose bones, dann Move bone, um den Ellbogen zu beugen

Winken schlüsseln und Länge setzen

Dieses Winken geht links → rechts → links auf dem Bild. Den Playhead im Target Dock auf 1,0 s ziehen und, wie bei der Startpose, den Arm zur anderen Seite strecken.

Die Mittelpose, beurteilt an 1,0 s mit dem Arm zur anderen Seite. Zeigt die ferne Pose des Winkens. Die Figur neigt sich, linker Arm draußen, rosa Knochen in diesem Arm.
1,0 s. Der Arm zur anderen Seite gestreckt

Die Endpose entspricht dem Start, also kopieren. Bei den Zeit-und-Pose-Punkten im Target Dock die obere Raute überspringen, den Rest markieren, kopieren und unter 2,0 s einfügen. Sitzt es schief, den Block erneut markieren und schieben.

Keys kopieren, beurteilt daran, welche Timeline-Marken genommen werden. Zeigt das Überspringen der oberen Raute und das Markieren des Rests zum Einfügen bei 2,0 s. Skip this one und Range-select these sind markiert.
Obere Raute überspringen, den Rest markieren, bei 2,0 s einfügen

Direkt nach dem Einfügen kann der Arm noch gestreckt sein. Mit der Startpose vergleichen und die Knochen erneut beugen.

Die Cliplänge ist Project → Max frames. Dieses Beispiel nutzt 120. Auf der Timeline ist das Winken 0 s, 1 s und 2 s.

Maximale Framezahl, beurteilt an Project, dann Max frames. Zeigt das Setzen des Clips auf 120 Frames. Ein roter Pfeil führt vom Menü zu einem Dialog mit Max frame count 120.
Project → Max frames… auf 120

Unten rechts Loop einschalten, dann Play. Sieht es falsch aus, Keys oder Knochenbiegung korrigieren.

Wiedergabesteuerung, beurteilt an Play und Loop. Zeigt das Einschalten der Schleife vor dem Beurteilen der Bewegung. Play und Loop stehen rot neben den Tasten der Transportleiste.
Loop einschalten, dann Play
Die Schleifenvorschau, beurteilt als dieselbe Bewegung wie das Eröffnungs-GIF. Zeigt die Kontrolle des Winkens nach den Keys. Die blaue Figur winkt in einer Schleife auf der Fläche.
Schleifenwiedergabe. Dieselbe Bewegung wie das GIF oben

GIF exportieren

File → Export As → GIF Animation, dann den Speicherort wählen. Danach öffnet sich der Exportdialog. Dort Optimize palette auf On.

GIF-Export, beurteilt an File, Export As und GIF Animation. Zeigt das Einschalten von Optimize palette. Breite und Höhe sind 512; Frames laufen von 0 bis 120; Optimize palette ist angehakt.
File → Export As → GIF Animation. Optimize palette einschalten

Dieses Beispiel nutzt Breite und Höhe 512, Startframe 0, Endframe 120.

⚠️ Häufige Falle

Optimize palette ankreuzen. Ohne das kann die blau–weiße Kante rauschen. Flächige Füllungen mit harter Kante zeigen es stärker.

OK startet die Kodierung. Stimmt das GIF mit der Bewegung oben überein, sind Sie fertig. Schlägt nur der Export fehl, gilt der nächste Abschnitt.

Wenn der GIF-Export fehlschlägt

Kann das mitgelieferte FFmpeg die Datei nicht schreiben, ein fertiges Binary von der offiziellen Seite holen und neben AnimeEffects.exe legen. Die Seite sieht noch so aus wie unten.

FFmpeg – Download öffnen und den Standbildern folgen.

FFmpeg-Downloadseite, beurteilt an den Links zum Windows-Executable. Zeigt, ein fertiges Windows-Zip zu nehmen, nicht den Quellcode. Windows ist eingerahmt, dann Windows builds by BtbN, mit Hover- und Click-Hinweisen.
ffmpeg.org. Hover auf Windows, dann Click auf Windows builds by BtbN

Hover auf Windows, dann Click auf Windows builds by BtbN. Ein Zip wählen, das zum PC passt. In diesem Beispiel die rot unterstrichene Zeile (Zip ohne shared). Dateiname und Datum gehören zu jenem Build; Sie brauchen nicht dasselbe.

BtbN-Windows-Zips, beurteilt an der zu wählenden Assets-Zeile. Zeigt, ein gpl-Zip ohne shared im Namen zu nehmen. Eine rote Linie liegt unter win64-gpl.zip; das Datum gehört zu jenem Build.
Die win64-gpl.zip ohne „shared“ (die rote Linie)

Das Archiv entpacken, dessen Name mit ffmpeg beginnt. Darin liegt ein Ordner bin. Den Inhalt in einen Ordner tools neben AnimeEffects.exe kopieren. Ordner anlegen, falls er fehlt.

Wohin FFmpeg gehört, beurteilt am Ordner tools neben AnimeEffects.exe. Zeigt die Ersatzkopie, falls das mitgelieferte FFmpeg scheitert. tools enthält ffmpeg.exe, ffplay.exe und ffprobe.exe, mit Added markiert.
bin nach tools kopieren, neben AnimeEffects.exe

ffmpeg.exe reicht. ffplay.exe und ffprobe.exe mitzukopieren ist in Ordnung.

AnimeEffects ist Software von AnimeEffectsDevs. Microsoft PowerPoint® ist eine Marke der Microsoft Corporation. FFmpeg ist ein Name des FFmpeg-Projekts. Die Screenshots dienen der Erklärung der Produkte. Diese Website ist nicht mit den Rechteinhabern verbunden und nicht von ihnen empfohlen.

Comments

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

More posts