Comment créer un gif en deux deux

Dans cet article hyper court, je vais te montrer comment créer un gif de manière simple et rapide. Tu vas découvrir plusieurs techniques et outils pour créer des gifs animés en un rien de temps !

comme d’habitude, un peu de musique pour travailler dans la bonne humeur, j’aime pas trop l’illustration mais la musique est vraiment superbe

Pour continuer mon article sur le bruit de Perlin, voici quelques techniques pour créer des gifs.

1. Créer des gifs en programmant

Avec des outils tels que Processing, p5.js ou du simple JavaScript, tu peux enregistrer les images produites par tes animations (recherche la fonction saveFrame() dans la doc) pour ensuite les transformer en gifs animés. Certaines bibliothèques comme p5.capture ou ccapture te permettent même de le faire directement dans ta page web !

2. Création d’images à la main

Si tu préfères une approche plus manuelle, tu peux créer tes propres images avec des logiciels comme GIMP, Photoshop ou Procreate. Ensuite, il te suffit d’assembler tes images pour former ton gif animé. Je sais que GIMP et Blender permettent de créer des gif directement dans le logiciel. Sinon, tu peux utiliser les techniques données après.

Exemple de création de gif avec GIMP

1. tu as une liste d’images 0001.png, 0002.png, etc,
2. tu ouvres ces images en tant que calques avec : Ficher > Ouvrir en tant que calques ou via le raccourci Ctrl + Alt + O, tu peux recommencer l’opération et/ou créer/intercaler tes propres calques
3. teste l’animation avec : Filtre > Animations > Rejouer l’animation
4. optimise avec : Filtre > Animations > Optimiser (pour gif)
5. ajuste les temps : change le temps dans les noms de calque
6. créer le gif : Fichier > Exporter sous > ou raccourci Ctrl + Maj + E puis donner une extension .gif, enfin cocher « En tant qu’animation »

Exemple d’effet easing à utiliser pour ajuster le temps de chaque image :

A toi de jouer ! Là c’est de la customisation à la main !

3. Les outils en ligne de commande

Il existe aussi des outils en ligne de commande pour créer des gifs, tels que gifsicle ou ffmpeg. Ils peuvent être très pratiques pour automatiser la création de gifs à partir de vidéos ou d’autres sources.

Ce que j’ai fait pour mon article sur le bruit de Perlin

Télécharger gifsicle

Dézipper puis mettre le répertoire à un endroit où tu as l’habitude de mettre tes outils sans installateur windows. Pour moi c’est dans C:/Dev/Tools

Voila ce que j’ai fait sur windows : copier coller le répertoire dans C:/Dev/Tools, puis j’ai ajouté C:/Dev/Tools/gifsicle-1.92 dans mon Path

en ligne de commande :

PATH=%PATH%C:/Dev/Tools;

Ou en passant par l’outil graphique : appuyer sur la touche windows > taper « env » > sélectionner « Modifier les variables d’environnement système > taper sur entrée > cliquer sur bouton « variables d’environnement » (en bas de la fenêtre Propriétés système) > sélectionner la ligne Path > cliquer sur Modifier > cliquer sur Nouveau > coller le chemin

Cela ajoute le répertoire où se trouve l’outil gifsicle dans les chemins windows, de cette façon la commande (le fichier .exe contenu dans le répertoire) pourra être appelé dans les consoles sans avoir à taper tout son chemin (je ferai un article sur l’utilisation d’une console bientôt).

Commande gifsicle pour convertir en gif

gifsicle --delay=2 --loop --optimize *.gif > perlin-1.gif

On peut aussi faire le gif avec ffmpeg, (je n’ai pas réussi à gérer les gif avec ffmpeg donc il faut lui donner des png)

ffmpeg -f image2 -framerate 25 -i fr%03d.png -loop 0 perlin-4.gif

Comme j’avais des pb de couleur j’ai demandé à ChatGPT de me trouver une solution et voici sa réponse :

ffmpeg -f image2 -framerate 25 -i ./simplex-21-2/%07d.png -vf "fps=25,palettegen" -y palette.png
ffmpeg -f image2 -framerate 25 -i ./simplex-21-2/%07d.png -i palette.png -filter_complex "fps=25,paletteuse" -loop 0 perlin-21-2.gif

Et pour l’explication : le format gif n’a qu’une palette de 256 couleurs, on crée donc une palette à partir des images dans la première commande puis on l’utilise dans la deuxième. Le résultat a été vraiment très bien, au début je n’avais quasiment pas de couleur.

4. Des outils en ligne

Si tu cherches une solution rapide et sans installation, il existe de nombreux outils en ligne pour créer des gifs. Tu en trouveras facilement en faisant une recherche sur Google. Sinon tu peux essayer Giphy, un vétéran en matière de présentation de gif qui propose un studio. Canva permet aussi de faire des gifs.

5. Remix : extraction -> traitement -> recomposition

On peut aussi extraire les images d’un film => ffmpeg ..=> on fait un cut, puis on extrait les images.

Faire des traitement dessus => ex: lancer mon script de minoristation, puis reconstruire le film en gif

Tu peux également extraire des images d’une vidéo à l’aide d’outils comme ffmpeg, puis les traiter (par exemple, en les redimensionnant, en appliquant un traitement par lot sur l’ensemble des images, …) et les recomposer en un gif animé. C’est ce que je fais pour fabriquer mes films de minorisation : à partir d’une video j’extrais les images

ffmpeg -i input_video.mp4 output_image_%04d.png

ffmpeg -i input_video.mp4 -vf "fps=1" output_image_%04d.png

ou en précisant la fréquence, ici une image par seconde de film

ffmpeg -i input_video.mp4 -vf "fps=1" output_image_%04d.png

Faire le traitement, et recomposer en un gif avec la commande vue avant dans le point 3.

Exemple de découpe / recomposition d’un épisode de série en séquences de 90 frames

Comme dans cet exemple insta d’un mec qui refait tout un film en une grande image => on recompose tout un film en une big image => plus facile à faire en programmant => todo ? pour rigoler, pour avoir un aperçu rapide => extraction des scènes, décomposition, en images, toutes les images 0001.png vont composer compo_0001.png puis toutes les 0002.png composeront compo_0002.png, etc. à la fin on recompose tout le film => on peut voir un grand film en 1min, exemple un film de 1h30 => 90min donc 90 cases dans un gif ou plus simple, un épisode de 20min => décomposé en scènes de 30s ou 1min => 20 à 40 scènes => 5 lignes de 4 images / scènes, ou 8 x 5 ou 10 x 4 => ce qui peut être beau, trouver des carrés => faire des racines carrées, et pourquoi pas faire des racine cubique => et afficher un film sur un cube 🙂 ?

7. Des systèmes utlra custom

Il existe des méthodes plus avancées pour créer des gifs, comme les solutions basées sur l’intelligence artificielle et les réseaux de neurones. Par exemple, tu peux utiliser des IA pour dessiner ou interpréter des images dans un style particulier et créer un gif animé unique.

En conclusion : Le monde des gifs à portée de main

Voilà, maintenant tu connais plusieurs techniques et outils pour créer des gifs en un clin d’œil. Que tu sois plutôt programmation, création manuelle ou utilisation d’outils en ligne, il y a forcément une méthode qui te correspond. Alors, à toi de jouer et d’exprimer ta créativité à travers des gifs animés !

Et moi je retourne à mes gifs

🙂