Comment faire un GIF de pictogramme animé avec AnimeEffects, expliqué avec des captures

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

Written by

in

Cet article montre comment découper un pictogramme en pièces dans PowerPoint, poser des os dans AnimeEffects, et exporter un GIF. L’exemple est une silhouette bleue qui salue de la main gauche. La même méthode sert pour une icône de site qui doit se voir, ou pour un mouvement plus simple à montrer en courte boucle qu’à expliquer par des mots ou à filmer. (Les libellés des figures sont en anglais.)

Les captures viennent d’AnimeEffects et de Microsoft PowerPoint®. Les marques sont dans la note de fin. Ces images datent de la session d’origine. Dans une version plus récente, les menus peuvent différer.

Pictogramme fini qui salue, jugé au bras gauche qui va et vient. Montre une boucle pliée avec des os, exportée en GIF. La silhouette répète une pose bras levé et une pose bras tendu sur le côté.
La boucle finale. Le bras gauche salue, puis le GIF recommence

Ce que couvre cette page

Aller àIdée
DessinSéparez left-arm, torso, legs et background en PNG
InstallerDézippez le zip officiel. Les zips actuels incluent FFmpeg
ProjetPartez de left-arm, puis ajoutez le reste dans Resource Window
PlacerMove, rotate, scale jusqu’à une silhouette ; puis la pose de départ
OsClic épaule, coude, poignet ; influence ; plier
SalutPoses à 0 s et 1 s ; copiez le départ à 2 s. Max frames 120
GIFExport As → GIF Animation. Cochez Optimize palette
Si ça échoueUn zip de FFmpeg.org dans tools à côté de l’exe

Découpez le dessin en PNG

Ne partez pas d’un dessin aplati en une seule couche. Coupez aux articulations qui doivent plier. Cet exemple utilise quatre pièces : ① bras gauche, ② torse, ③ jambes, ④ fond. Le fond est un carré blanc sans bord.

Ces images ont été dessinées dans PowerPoint. N’importe quel outil de dessin convient si vous l’utilisez déjà.

Pièces du pictogramme, montrées en bras gauche, jambes, torse et fond. Explique de couper aux articulations qui doivent plier. La grille est un bras en diagonale, une paire de jambes, un torse avec tête et un carré blanc.
Dessinez left-arm, legs, torso et background séparément

Enregistrez chaque pièce en PNG. Dans PowerPoint, clic droit sur la sélection puis Save as Picture.

⚠️ Piège courant

Torse et jambes sont plusieurs formes. Enregistrer une seule donne seulement une tête, ou une jambe. Comme dans le GIF ci-dessous, sélectionnez d’abord le groupe, puis Save as Picture. Le GIF montre encore le menu japonais de PowerPoint.

Enregistrer des formes PowerPoint groupées en PNG, vu par un cadre puis Save as Picture. Explique qu’un torse de plusieurs formes doit être sélectionné ensemble. Le GIF suit le buste bleu encadré puis enregistré.
Pour un groupe de formes, sélectionnez-les puis Save as Picture
Les quatre PNG enregistrés, vus aux noms anglais à côté de chaque pièce. Explique quels fichiers passent dans AnimeEffects. Les panneaux sont background.png, legs.png, left-arm.png et torso.png.
left-arm.png, torso.png, legs.png, background.png

Les noms correspondent aux figures qui suivent : left-arm.png, torso.png, legs.png, background.png. Certaines captures d’origine montrent encore les noms japonais sous les libellés.

Installer AnimeEffects

AnimeEffects pose des os sur des images 2D et les anime. Le zip Windows officiel n’installe rien : dézippez et lancez AnimeEffects.exe. Il existe aussi des zips Mac et Linux. Ces captures sont sous Windows.

Récupérez-le sur GitHub Releases. Le parcours est sur Downloads.

L’export GIF ou vidéo a besoin de FFmpeg. Le zip officiel actuel l’inclut déjà, vous pouvez continuer. Si l’export réussit, pas besoin d’un autre téléchargement. S’il échoue, suivez les étapes en fin de page et placez un build du site FFmpeg.

Aller à l’installation de FFmpeg

Ouvrez un projet et ajoutez les pièces

Lancez AnimeEffects.exe. Au début, le canevas est vide.

AnimeEffects juste après le lancement, jugé à un canevas vide et aux docks. Montre la fenêtre avant de créer un projet. Le centre est sombre ; la timeline et le dock projet sont vides.
Juste après le lancement. Le canevas est encore vide

Dans File, choisissez New Project. Mettez la ressource initiale sur le left-arm.png que vous venez d’enregistrer. Cochez Specify canvas size, largeur et hauteur à 1024.

Dialogue New Project, jugé à la ressource initiale et à la taille du canevas. Montre de partir de left-arm.png en 1024 carré. Specify canvas size est coché ; largeur et hauteur valent 1024.
Initial resource : left-arm.png. Canevas 1024×1024

OK ne laisse que le bras gauche sur le canevas.

Le canevas après New Project, jugé au seul placement de la ressource initiale. Montre que les autres pièces ne sont pas encore chargées. Un bras gauche bleu en diagonale reste seul dans un carré pointillé.
Après New Project. Seul le bras gauche est sur le canevas

Ajoutez le reste via WindowResource WindowAdd Resources. Importez torso, legs et background de la même façon.

Ajout de ressources, jugé à Window, Resource Window et Add Resources. Montre comment les PNG restants entrent dans le projet. Resource Window est sélectionné et Add Resources est ouvert.
Window → Resource Window → Add Resources
Resource Window avant et après, jugé à la liste de fichiers qui s’allonge. Montre d’ajouter torso, legs et background après left-arm. À gauche un fichier ; à droite quatre noms.
Après left-arm.png, ajoutez torso.png, legs.png et background.png
Le canevas juste après l’ajout des pièces, jugé au chevauchement et à la liste cible. Montre que position et échelle ne sont pas encore réglées. La silhouette bleue est dans un cadre blanc ; la liste inclut topnode.
Les pièces sont encore empilées. Ensuite vous les alignez

Placez les pièces et posez le départ

Dans le Toolbox en haut à gauche, choisissez Move, rotate, scale. Changez de pièce dans le Target Dock en bas à gauche, et assemblez une personne sur le canevas. Ajustez aussi les tailles.

Placement des pièces, jugé à Move, rotate, scale et au Target Dock. Montre de changer de ligne pour déplacer chaque partie. L’outil de déplacement est encadré ; left-arm et topnode sont soulignés.
Choisissez Move, rotate, scale, puis une ligne du Target Dock
Assemblage de la silhouette, jugé au déplacement et à la mise à l’échelle. Montre d’aligner position et taille avant la pose de départ. La personne bleue passe de pièces empilées à une silhouette debout.
Déplacez et mettez à l’échelle jusqu’à une silhouette debout
💡 Astuce

Les lignes autres que left-arm peuvent rester nommées topnode. Sélectionner la ligne suffit pour cette méthode.

Quand la silhouette tient debout, utilisez le même outil pour la pose de départ — le début du salut. Laissez la timeline à 0 s.

La pose de départ, jugée à la timeline à 0 s. Montre la première clé du salut. Un bras est près de la tête ; l’autre s’ouvre vers le bas ; un cadre de sélection est actif.
Pose de départ à 0 s. Le bras qui commence le salut

Posez des os dans le bras gauche et pliez-le

Dans le GIF du début, le bras gauche plie au coude. Le PNG ne glisse pas d’un bloc. Un os tire les pixels.

Activez left-arm dans le Target Dock, puis choisissez Build bones dans le Toolbox. Avec Add bones en dessous, cliquez épaule, coude et poignet sur le dessin.

Outils d’os, jugés à Select left-arm puis Build bones et Add bones. Montre où commencer le rig du bras. Select, Build bones et Add bones sont encadrés en rouge.
Select left-arm, puis Build bones → Add bones
Placement des os, jugé aux clics épaule, coude et poignet. Montre l’ordre des articulations sur un PNG. Le GIF suit ces trois clics sur le bras gauche bleu.
Cliquez épaule, coude, puis poignet

Les clics seuls ne décident pas quels pixels suivent. Utilisez Adjust influence (à droite de Add bones) et élargissez la zone depuis la chaîne. Trop large, le torse plie avec le bras. Gardez-la sur les pixels du bras.

Influence de l’os, jugée à l’élargissement de la zone autour de la chaîne. Montre que seuls les pixels du bras doivent suivre. Le GIF élargit l’influence sur le bras gauche.
Élargissez l’influence pour que seuls les pixels du bras suivent l’os

Quand la zone est prête, choisissez Pose bones dans le Toolbox, puis Move bone en dessous, et tirez le poignet. Le coude se plie en un salut proche du GIF d’ouverture.

Poser le bras, jugé à Pose bones et Move bone. Montre de plier le coude pour le salut. Le bras bleu a un os rose, une pose fantôme et une flèche rouge de mouvement.
Pose bones, puis Move bone pour plier le coude

Clé du salut et durée

Ce salut va gauche → droite → gauche à l’écran. Amenez la tête de lecture du Target Dock à 1,0 s et, comme pour la pose de départ, tendez le bras de l’autre côté.

La pose intermédiaire, jugée à 1,0 s avec le bras de l’autre côté. Montre l’extrême du salut. La silhouette penche, bras gauche tendu, os roses dans ce bras.
1,0 s. Le bras tendu de l’autre côté

La pose de fin reprend le départ, donc on copie. Dans les points temps-et-pose du Target Dock, sautez le losange du haut, sélectionnez le reste, copiez et collez sous 2,0 s. S’il décale, resélectionnez le bloc et déplacez-le.

Copie des clés, jugée aux marques de timeline à prendre. Montre de sauter le losange du haut et de sélectionner le reste pour coller à 2,0 s. Skip this one et Range-select these sont marqués.
Sautez le losange du haut, sélectionnez le reste, collez à 2,0 s

Juste après le collage, le bras peut rester tendu. Comparez avec la pose de départ et repliez les os.

La durée du clip est ProjectMax frames. Cet exemple utilise 120. Sur la timeline, le salut est 0 s, 1 s et 2 s.

Nombre maximal d’images, jugé à Project puis Max frames. Montre de régler le clip à 120 images. Une flèche rouge va du menu à un dialogue avec Max frame count 120.
Project → Max frames… à 120

Activez Loop en bas à droite, puis Play. Si ça cloche, corrigez les clés ou le pli de l’os.

Commandes de lecture, jugées à Play et Loop. Montre d’activer la boucle avant de juger le mouvement. Play et Loop sont en rouge à côté des boutons de la barre de transport.
Activez Loop, puis Play
L’aperçu en boucle, jugé au même mouvement que le GIF d’ouverture. Montre de vérifier le salut une fois les clés posées. La silhouette bleue salue en boucle sur le canevas.
Lecture en boucle. Le même mouvement que le GIF du début

Exporter un GIF

File → Export AsGIF Animation, puis choisissez l’emplacement. Le dialogue d’export s’ouvre ensuite. Cochez-y Optimize palette sur On.

Export GIF, jugé à File, Export As et GIF Animation. Montre d’activer Optimize palette. Largeur et hauteur valent 512 ; les images vont de 0 à 120 ; Optimize palette est coché.
File → Export As → GIF Animation. Cochez Optimize palette

Cet exemple utilise largeur et hauteur 512, image de début 0, image de fin 120.

⚠️ Piège courant

Cochez Optimize palette. Sans ça, le bord bleu–blanc peut faire du bruit. Les aplats à bord franc le montrent plus.

OK lance l’encodage. Si le GIF reprend le mouvement du début, c’est fini. Si seul l’export échoue, la section suivante est pour ça.

Si l’export GIF échoue

Si le FFmpeg fourni n’arrive pas à écrire le fichier, prenez un binaire sur le site officiel et placez-le à côté de AnimeEffects.exe. La page a encore cette forme.

Ouvrez FFmpeg – Download et suivez les captures.

Page de téléchargement FFmpeg, jugée aux liens vers l’exécutable Windows. Montre de prendre un zip précompilé, pas le code source. Windows est encadré, puis Windows builds by BtbN, avec notes Hover et Click.
ffmpeg.org. Hover sur Windows, puis Click sur Windows builds by BtbN

Faites Hover sur Windows, puis Click sur Windows builds by BtbN. Prenez un zip adapté à votre PC. Ici, c’est la ligne soulignée en rouge (le zip sans shared). Le nom et la date sont ceux de ce build ; vous n’avez pas besoin du même.

Zips Windows de BtbN, jugés à la ligne Assets à prendre. Montre de prendre un zip gpl sans shared dans le nom. Une ligne rouge souligne win64-gpl.zip ; la date est celle de ce build.
Le win64-gpl.zip sans « shared » (la ligne rouge)

Dézippez l’archive dont le nom commence par ffmpeg. Dedans, un dossier bin. Copiez son contenu dans un dossier tools à côté de AnimeEffects.exe. Créez-le s’il manque.

Où placer FFmpeg, jugé au dossier tools à côté de AnimeEffects.exe. Montre la copie de secours si le FFmpeg fourni échoue. tools contient ffmpeg.exe, ffplay.exe et ffprobe.exe, marqués Added.
Copiez bin dans tools, à côté de AnimeEffects.exe

ffmpeg.exe suffit. Copier aussi ffplay.exe et ffprobe.exe est possible.

AnimeEffects est un logiciel publié par AnimeEffectsDevs. Microsoft PowerPoint® est une marque de Microsoft Corporation. FFmpeg est un nom du projet FFmpeg. Les captures servent à expliquer l’usage des produits. Ce site n’est ni affilié ni cautionné par ces titulaires.

Comments

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *