Blork & size.fac > Articles de Chann > Le Temple du Blam! > [Tuto] Comment faire un gif animé

Message laissé le 09/12/13 à 23:57

Shadowamaterasu souhaitait savoir comment s'y prendre pour faire un gif animé, et peut-être que d'autres ont, comme elle, envie de suivre les traces de sf qui a posté une animation où il danse.


Il existe des façons plus ou moins différentes et une multitude de logiciels pour créer un gif animé à partir de photos ou de vidéos.
Dans ce tuto, seules des méthodes gratuites seront utilisées, sans aucun machin bidule s'installant à votre insu.
J'ai choisi d'expliquer les choses dans l'optique où vous ne connaissez pas forcément les logiciels mentionnés.

Selon le résultat souhaité, certaines étapes seront optionnelles. Pour naviguer d'une séquence à une autre dans la partie consécrée à Gimp, vous pouvez utiliser la fonction de recherche de votre navigateur (Ctrl+F) et en entrant le code qui est en italique et entre crochets.


Ce premier post montre la marche à suivre à partir de photos.
Le post suivant explique comment faire à partir d'une vidéo.






Sommaire :

Créer un gif animé sur le web

Créer un gif animé avec Gimp
1/ Import de la première image [Seq 1]
2/ Insertion de la seconde image [Seq 2]
3/ Avancée des modifications [Seq 3]
4/ Insertion des images suivantes + Agencement [Seq 4]
5/ Redimensionnement [Seq 5]
6/ Optimisation [Seq 6]
7/ Timing [Seq 7]



Créer un gif animé sur le web :

Vous pouvez faire comme sf en allant sur le site http://gifmaker.me
Il (le site, pas sf) redimensionnera votre animation selon vos choix en quelques clics, et est suffisamment intuitif pour que vous n'ayiez pas besoin d'explications sur son utilisation, même pour ceux qui ne sont pas anglophones (mais si quelqu'un souhaite quand même un tuto dessus, pas de souci).
Veillez cependant à ce que la vitesse de défilement des images ne pique pas les yeux, en faisant les réglages sur la partie "Animation speed".



Créer un gif animé avec Gimp :

Vous pouvez créer votre .gif de A à Z avec Gimp .

Avant de commencer, quelques recommendations :

N'oubliez pas que vous pouvez annuler l'action que vous venez d'effectuer et la rétablir comme lorsque vous rédigez un texte.
Pour plus de sécurité, il vaut mieux travailler sur une copie des photos.
Il est conseillé de renommer et/ou numéroter chaque photo de façon à pouvoir vous y retrouver facilement lorsque vous les insérerez dans votre animation.

N'hésitez pas à faire des sauvegardes de votre animation de temps en temps au format .xcf, qui est le plus adapté sous Gimp.
C'est un format natif au programme qui vous permet de sauvegarder toutes les couches de calque indépendemment dans un seul et unique fichier. C'est pratique si vous voulez apporter des modifications sur un calque particulier plus tard sans avoir à enregistrer chaque calque dans des fichiers séparés. Hormis le gif, les formats usuels (jpg, png et bmp) fusionnent tous les calques lors de l'enregistrement.

Il est recommandé de n'enregistrer l'animation en gif qu'une fois que vous avez placé toutes les images dedans et qu'il ne vous reste que le timing à régler, cela vous évitera de désagréables surprises au niveau des couleurs, dont le nombre sera automatiquement réduit à 256 maximum.

Nous pouvons à présent débuter la création du gif animé.



1/ Import de la première image : [Seq 1]

En ouvrant Gimp, vérifiez qu'une fenêtre de calques est bien présente, elle nous sera utile par la suite. Elle peut se présenter de multiples façons :



La version groupe d'onglets diffère selon les réglages de l'utilisateur


Il faut importer la première image de votre future animation en choisissant "ouvrir" ou en faisant un glisser-déposer de la photo choisie dans la fenêtre principale de Gimp. Elle vous servira de base. Vous pouvez régler le zoom à votre convenance en cliquant sur le triangle puis la valeur en bas de la fenêtre :




Si vous n'avez aucune modification à apporter à la photo, passez à [Seq 2]


Si vous souhaitez ne garder qu'une partie de cette photo, la méthode la plus pratique est de cliquer sur l'outil de sélection sur la fenêtre de la Boîte à outils :



et de choisir sur la fenêtre d'image la portion que vous souhaitez garder (il vaut mieux sélectionner un peu plus large que prévu, vous pourrez rectifier plus précisément après).
Il suffit ensuite de masquer la partie non désirée ainsi :




puis d'ajuster la taille de l'image avec celle la sélection pour enlever le superflu :




Vous remarquerez que sur la barre de titre de la fenêtre d'image, les dimensions de l'image sont indiquées juste avant " - GIMP".
Si vous voulez donner un chiffre "rond" aux dimensions en ajustant la taille du cadre, il faut passer par :




Une nouvelle fenêtre s'ouvre. Il faut cliquer sur les maillons de chaîne s'ils sont liés pour que vous ayiez la possibilité de choisir la longueur et la largeur que vous souhaitez (sinon votre cadre sera redimensionné automatiquement et proportionnellement aux dimensions de l'image de départ dès que vous aurez entré une valeur)




Vous n'avez plus qu'à renseigner les champs de longueur et de largeur (à noter que pour que chaque entrée prenne effet, il faut cliquer dans n'importe quelle autre case). Un rectangle aux contours gris s'affiche et vous pouvez déplacer votre image pour commencer à la cadrer si vous le souhaitez, puis cliquer sur "Redimensionner" :




Il vous faut maintenant sélectionner l'outil de déplacement dans la fenêtre de Boîte à outils :



et l'utiliser dans la fenêtre principale de l'image pour bouger le contenu du calque jusqu'à ce que la partie qui vous intéresse apparaisse dans le cadre comme vous le désirez.


Optionnel : Vous pouvez de nouveau ajuster la taille du calque pour coller à celle du cadre et pour vous débarrasser du superflu de l'image si vous le souhaitez en allant sur "Calque" et "Calque aux dimensions de l'image".



2/ Insertion de la seconde image : [Seq 2]

Il est temps d'insérer la seconde image de votre animation en tant que calque. Procédez comme ceci (ou sinon en faisant un glisser-déposer de votre photo vers la fenêtre principale de l'animation) :




Vous pouvez constater que, dans la fenêtre de calques, le calque a pris le nom de l'image que vous venez d'importer (d'où l'utilité d'avoir renommé toutes les photos). Pour renommer un calque, il suffit de faire un clic droit dessus dans la fenêtre de calques.

Pour positionner cette seconde image par rapport à la première, il suffit de jouer avec l'opacité du calque en déplaçant le curseur vers la gauche :




Vous pouvez ensuite sélectionner l'outil de déplacement dans la Boîte à outils et bouger l'image de la fenêtre principale jusqu'à obtention du résultat voulu.
N'oubliez pas de remettre l'opacité à 100 une fois que votre image est bien cadrée.



3/ Avancée des modifications : [Seq 3]

Vous pouvez à tout moment vérifier l'avancement de votre animation en allant sur




Une fenêtre s'ouvrira et vous pouvez cliquer sur "Pas" plusieurs fois pour voir ce que cela donne image après image. Si vous cliquez sur "lire", le défilement d'images sera automatique, cela nous sera utile une fois que nous aurons entré des valeurs de timing (ce sera abordé un peu plus bas).





4/ Insertion des images suivantes + Agencement : [Seq 4]

Répétez les opérations d'insertion d'image comme pour la seconde photo autant de fois que nécessaire.

Votre fenêtre de calque devrait ressembler à quelque chose comme ça :




Les images étant empilées les unes sur les autres, c'est celle dans la fenêtre de calques dont l'icône d'oeil est la plus au-dessus des autres qui est visible dans la fenêtre principale.
Lorsque vous souhaitez effectuer des opérations sur un calque particulier, il vous suffit de cliquer sur l'icône d'oeil associée aux calques au-dessus de celui dont vous avez besoin (ça la fera disparaître et si vous cliquez à nouveau dans la même zone, l'oeil réapparaîtra), puis de sélectionner le calque, comme ça vous pourrez voir ce que vous faites dessus. Sur cet exemple, j'ai voulu afficher le calque n°5 :





5/ Redimensionnement : [Seq 5]

Une fois que toutes vos images sont placées, il faut vérifier que les dimensions de votre animations sont convenables pour un affichage sur le forum.

Pour information, un avatar sur le forum est redimensionné à 150 pixels pour le côté le plus long s'il dépasse les 150 pixels. Le mieux serait de ne pas dépasser les 400x400 pixels. Si votre animation est trop grande, vous pouvez la redimensionner. Ce sera suffisamment grand des fois que vous voudriez afficher l'animation dans un de vos posts un jour.
Voici comment procéder :




Il vous suffit de choisir la valeur de la longueur puis de cliquer dans la case de la largeur pour que sa valeur soit entrée automatiquement et proportionnellement à l'image (ne vous souciez pas de la résolution).




Au niveau de l'interpolation, j'ai pour habitude de choisir "Sinc (Lanczos3)" qui donne un meilleur rendu par rapport aux autres, mais la Cubique n'est pas mal non plus.
Comparatif des méthodes d'interpolation sous Gimp :




Dans la suite de mon exemple, je vais continuer avec l'image en 220x160 pixels.



6/ Optimisation : [Seq 6]

Une fois que vous avez ajouté toutes les images, il y a une petite option sympathique qui peut vous aider à alléger plus ou moins son poids et qui, par la même occasion rajoute un timing de 100ms par défaut aux images qui n'ont pas reçu de valeur de temps (ce sera expliqué un peu plus bas) :



Une nouvelle fenêtre principale s'ouvrira. Elle contient l'animation en version optimisée. N'oubliez pas de l'enregister quelque part en xcf car c'est elle que vous utiliserez à présent.

En gros, les pixels qui ne bougent pas d'un calque au suivant ne seront apparents que sur la première image (sur le calque au-dessus, il y aura un pixel transparent), ce qui permettra d'alléger plus ou moins l'animation finale. C'est surtout très utile quand votre animation est composée de beaucoup d'images dont seule une petite partie change comme pour mon exemple.

Vous pouvez constater la différence au niveau de la fenêtre des calques (la fenêtre des calques s'ajuste selon la fenêtre principale de l'animation en cours d'utilisation). Le damier gris est la zone transparente :





Timing :

Maintenant que tous vos calques sont placés et que votre animation est optimisée, il est temps à présent de nous occuper du timing des images.
Chaque durée d'affichage d'une image de l'animation est mesurée en millisecondes.
Pour éviter de piquer les yeux des gens ou de provoquer des crises d'épilepsie, il est de bon sens de ne pas faire défiler les images à la vitesse de l'éclair (le mieux serait de ne pas aller en-dessous de 100ms).


Si vous souhaitez que chaque image ait la même durée d'affichage, sachez que vous pouvez attribuer une valeur d'office pour tous les calques lorsque vous passerez à son enregistrement

Il suffit d'enregistrer le fichier au format .gif, en veillant à choisir ces options :








Il ne vous reste plus qu'à fermer l'image puis à l'ouvrir pour constater les changements. Vous pouvez tester le filtre pour rejouer l'animation afin de voir si la valeur de timing choisie vous convient ou pas.


Pour attribuer manuellement une durée d'affichage à une image, il vous suffit de faire un clic droit sur le calque contenant l'image et de le renommer en y ajoutant une parenthèse qui contient ladite durée (sans espace entre les chiffres et ms) comme ceci :




N'hésitez pas à utiliser le filtre pour rejouer l'animation et à modifier les valeurs si besoin est, puis à sauvegarder votre animation en gif, cette fois-ci en ne cochant pas la case "Utiliser le délai indiqué ci-dessus pour toutes les images de l'animation", sinon tout votre travail d'attribution manuelle de valeurs différentes va partir en fumée :




Le dernier point à vérifier est de vous assurer que votre gif ne fait pas plus de 1Mo (la limite de poids que nous demandons aux membres), sinon il faudra recharger votre fichier .xcf optimisé pour enlever plusieurs calques (clic droit sur le calque dans la fenêtre de calques, puis "Supprimer le calque") ou rétrécir les dimensions de l'animation.

Et le résultat obtenu :




Notes :
Les diverses fenêtres de Gimp sont redimensionnables et repositionnables. Dans le tuto, elles sont réglées de façon à apparaître correctement sur le forum.
J'utilise une version archaïque de Gimp (la 2.6.11). Il existe une version bien plus récente et avec plus de fonctionnalités. Si vous l'avez installée, vous devriez pouvoir retrouver les mêmes options. En cas de doute, n'hésitez pas à consulter la documentation sur le site officiel de Gimp.



Si vous constatez des erreurs, des oublis ou si vous avez des questions ou des remarques, n'hésitez pas à poster.
Si c'est la catastrophe et que vous peinez à obtenir un résultat satisfaisant ou que vous êtes bloqués dans la création de votre gif, n'hésitez pas à demander un coup de main.

Message édité 1 fois. Dernière édition par Chann le 10/12/13 à 00:19.



- - - - - - - - - -
Club des Mamies et des Papys !

Message laissé le 10/12/13 à 00:03

Vous pouvez utiliser les services d'un site web si vous avez un lien vers une vidéo sur youTube, mais je n'ai pas testé (j'ai vu que gifsoup a l'air simple à utiliser, mais qu'en contrepartie il laisse une marque sur le gif). Peut-être qu'un membre ayant essayé un site du genre pourra apporter son expérience.
Pour avoir de meilleurs résultats sans utiliser 36 logiciels, le mieux serait de passer par un payant, mais on peut s'en sortir avec quelque chose de correct avec des logiciels gratuits. Il suffit de faire les bons réglages et d'avoir un peu de patience.



Créer un gif avec Free Video to Gif Converter

C'est la méthode la plus rapide : vous avez juste à régler quelques paramètres avec ce logiciel .
Les avantages sont que vous pouvez charger divers types de vidéos à partir de votre ordinateur sans passer par un convertisseur et qu'il est simple d'utilisation.
Les inconvénients sont qu'il n'y a pas de prévisualisation possible pour choisir un extrait de vidéo, et que la qualité du gif est moyenne (euphémisme) s'il est enregistré en qualité normale pour que le poids ne soit pas trop lourd.

Avant de commencer, soit vous repérez les durées correspondant au début et à la fin du passage qui vous intéresse grâce à votre lecteur habituel de vidéos, soit vous passez par un éditeur de vidéos et coupez le morceau désiré (essayez quand même de ne pas charger une vidéo trop longue).

Sous Free Video to Gif Converter, ouvrez votre vidéo en appuyant sur le bouton "Browse".
Vous devriez obtenir un écran de ce style (les champs ont été remplis) :




Entrez la durée (au format heure:minutes:secondes) relevée lors de la précédente étape si vous avez importé la vidéo en entier.
Si vous avez importé un extrait que vous avez coupé, remplissez juste la case marquant la fin de l'extrait avec la durée de la vidéo importée.
Inscrivez la longueur (width) ou la largeur (height) de l'animation dans la case correspondante (si la case "Keep aspect ratio" est cochée, entrez juste une des deux valeurs, l'autre se remplira automatiquement).
J'ai choisi de garder les dimensions originales de la vidéo.

Parlons de la case "Extract".
Selon l'encodage, une vidéo comprend entre 25 et 29 frames (images) par seconde. Pour faire un gif, il faut extraire une certaine quantité d'images, mais il est inutile de toutes les prendre (sauf si vous voulez avoir la possibilité de choisir une image à garder parmi beaucoup). La fonction extract nous aide à prendre un certain nombre d'images pour une seconde de vidéo.
Plus le chiffre que vous sélectionnez est grand, plus il y aura d'images dans l'animation, et plus elle sera lourde. Mais si vous choisissez un chiffre trop bas, il y a des risques que vous loupiez une image importante. Je pense que 5 ou 8 est un bon compromis, tout dépend de la vidéo que vous traitez. L'animation sera suffisamment fluide.

Cliquez ensuite sur "Next" et vous obtiendrez ceci :




En cliquant sur "Frame#xx", vous aurez une prévisualisation à gauche. Si vous voulez retirer cette image, cliquez sur "Remove". Répétez cette action pour toutes les images indésirables.
Vous pouvez choisir de naviguer parmi les images en cliquant sur les boutons < et >
Parmi les images restantes, vous pouvez encore en enlever si elles sont légèrement différentes à quelques millimètres près, tout dépend du rendu que vous voudrez. Cela allègera le poids de l'animation.

Si vous vous trompez, cliquez sur "Reload". Il faudra recommencer les suppressions d'images depuis le début, mais au moins l'image supprimée par mégarde sera à nouveau disponible.
Et vous pouvez même cliquer sur "Back" si vous souhaitez changer certains paramètres.

Pour avoir un gif à peu près correct, mieux vaut choisir "Excellent quality" et passer par Gimp pour redimensionner/cadrer votre gif et l'alléger. Mais "Normal quality" peut suffire, votre gif sera juste moins beau.
Cliquez sur "Make GIF", et si le résultat vous convient, vous pouvez cliquer sur "Quit".

Si vous voulez savoir comment redimensionner un gif, allez voir la séquence Redimensionnement [Seq 5] et pour alléger votre gif, allez regarder la séquence Optimisation [Seq 6] dans le premier post.


Comparatif entre les deux types de qualité de sauvegarde :





Créer un gif avec VirtualDub

Cette partie sera postée ici un peu plus tard, il faut que je refasse quelque captures d'écran aux bonnes dimensions.

Message édité 1 fois. Dernière édition par Chann le 10/12/13 à 00:23.



- - - - - - - - - -
Club des Mamies et des Papys !

Message laissé le 10/12/13 à 14:04

Punaise ! Il existe un moyen de faire une animation automatiquement depuis un fichier vidéo !?!

Moi, je faisais de la capture manuelle pour chaque frame... Merci pour ce tutoriel très complet et incroyablement accessible !

- - - - - - - - - -
Guide d'utilisation du forum
Comment créer son blog ?
Comment poster une image ?
Comment utiliser la balise "quote" ?

Mémo : Faire un nouveau gif pour faire rire Moussaka
Faire une chanson pour Freytaw

Message laissé le 10/12/13 à 14:47

Très bon tuto pour la création de GIFs avec GIMP (c'est pas forcément évident, surtout le coup du délai en ms dans le nom du calque). Je m'étais penché dessus pour créer ma gif animée de Rika, j'aurai gagné du temps à l'époque .

Pour la conversion d'une vidéo, on peut encore (et toujours) utiliser ffmpeg.


Code :

Ou bien encore convert :
Code :

Je suis d'ailleurs presque sûr que le petit logiciel que présente Chann est aussi basé sur ffmpeg et/ou convert

- - - - - - - - - -

"With kindness comes naïveté. Courage becomes foolhardiness. And dedication has no reward. If you can't accept any of that, you are not fit to be a Magical Girl."
でも!でも!かわいいからOK!

Message laissé le 11/12/13 à 14:51

Ouah, super tuto, un tout grand merci Chann, je vais m'y mettre.

- - - - - - - - - -

Message laissé le 12/12/13 à 10:46

sf => De rien. Oui, il y a plusieurs méthodes possibles, ça fait gagner un temps fou. J'utilise VirtualDub (on peut choisir entre autre d'enregistrer en gif ou en tant que batch d'images).


Jonath => C'est très probable (je crois même que la majorité des logiciels du même style ont pioché dedans, en ajoutant leur propre watermark).
ffmpeg est pratique (même s'il peut en rebuter certains à cause des "codes" à taper)


shadow => De rien

- - - - - - - - - -
Club des Mamies et des Papys !

Message laissé le 12/12/13 à 12:10

Ouah un tuto vraiment bien foutu! Bon, étrangement, je pense que je n'aurai pas besoin de m'en servir de suite, mais merci Chann

- - - - - - - - - -


Robin Rangers Fire Up!