Journalisme : comment créer des GIFs pour illustrer vos articles - Méta-media

Par Kevin Beaty, journaliste visuel et designer chez Denverite

Voici un tutoriel qui vous permettra de réaliser des boucles GIFs fluides, aussi appelées cinémagraphes. Il s’agit d’une méthode en deux temps qui mobilise deux savoirs-faire distincts : la réalisation de la boucle et sa transformation en GIF.

Il est important de garder cela à l’esprit tout au long du processus. Ces deux étapes sont ici accomplies à l’aide de logiciels appartenant à la suite Adobe Creative, mais n’importe quel logiciel de montage pour utilisateur averti devrait faire l’affaire pour réaliser une boucle avec cette méthode. J’utilise Photoshop pour faire le GIF car c’est l’outil le plus simple que je connaisse. Les autres logiciels d’édition de GIFs n’offrent pas autant d’options paramétrables, mais même si vous ne disposez pas de ce logiciel vous apprendrez des choses en consultant cette partie du tuto.

Avant toute chose, quelques éléments de contexte. L’idée derrière l’utilisation de boucles vidéos est de capter l’attention du visiteur, avec un peu de magie, en lui présentant une action dont la répétition est infinie. J’ai pu constater que ce medium se prête particulièrement bien au traitement de certains sujets.

Il y a certaines choses à savoir avant de se lancer. Les GIFs ne constituent pas le format le plus "propre" pour afficher des vidéos en boucle sur le web. Pour être chargée à une vitesse acceptable par les navigateurs, la boucle doit faire moins d’un mégaoctet, ce qui signifie que l’animation est en général limitée à une vingtaine d’images, et que ces images ne doivent pas faire plus de 600 pixels au risque d’être compressées.

Mais alors pourquoi s’intéresser à ce format ? C’est avant tout une question d’accessibilité. Le GIF bénéficie d’un autoplay à travers la totalité des navigateurs web. Les vidéos HTML5 permettent de réaliser des boucles plus longues et de meilleure qualité, mais ne sont pas toujours lancées automatiquement. Cela signifie que certains de vos lecteurs risquent de manquer cet ajout subtil qui offrait du mouvement à votre récit.

Cependant, n’oubliez pas que le GIF ne représente que la moitié du travail - il s’agit uniquement de la méthode d’export de la boucle.

Faire une boucle fluide

1. Tout part de l’appareil

Le plus important, c’est la brièveté et la stabilité. Quand vous sortez filmer, essayez de repérer des mouvements récurrents. Il peut s’agir du vent qui fait bouger les arbres, d’une fumée qui s’échappe de quelque part, de quelqu’un qui cligne des yeux ou de voitures qui passent par là. Ne bougez pas. Le mieux reste d’utiliser un tripod, mais le plus souvent une tenue en main assurée, couplée à un stabilisateur d’image fait l’affaire. Souvent, on peut obtenir des boucles décentes de façon naturelle alors que l’on tourne en continu, au cours d’une interview par exemple, pendant un temps mort, entre deux questions.

2. Importez vos vidéos dans un logiciel de montage non-linéaire (Premiere, Photoshop...)

3. Visionnez-les à la recherche de la boucle la plus intéressante

Cela dépend du sujet. Quoi qu’il en soit vous devez traquer deux types de mouvement:

les mouvements cycliques : essayez de repérer des actions qui se répètent de sorte que le début et la fin de l’action se ressemblent.
les mouvements oscillatoires : cherchez des actions dont le mouvement pourrait permettre de masquer une inversion soudaine du sens de l’action. Les portraits peuvent souvent être réalisés avec cette méthode.

Les mouvements oscillatoires sont aussi connus sous le nom de "boomerang" ; la plupart du temps, ils ne sont pas des plus efficaces pour réaliser des boucles subtiles et ils rallongent la durée de votre vidéo ce qui affecte la taille du GIF final. Les cycliques sont bien plus propices à la création de boucles efficaces.

4. Construire une boucle

Cyclique

Faites un copier-coller du clip vidéo pour pouvoir le superposer à lui-même
Ajoutez un effet de transition. « Dissolves » fait le plus souvent l’affaire.
Coupez la fin du clip qui est au premier plan, puis retirez la même longueur au clip en arrière-plan. Cela permet de faire en sorte que la fin de la boucle corresponde avec le début.
Retravaillez le tout. Si vous constatez un à-coup, essayez de modifier votre choix de timing jusqu’à obtenir suffisamment de fluidité.

https://www.youtube.com/watch?v=B4qZ_Xwy3zs

Oscillatoire

Faites un copier-coller du clip vidéo en les faisant se suivre.
Inversez le second clip

Retirez une image de la fin de chaque clip de sorte que le début et la fin de chaque clip correspondent à une seule et même image. Cette image sera lue deux fois d’affilée et introduira une pause dans l’animation.

5. Tester

Dès lors, vous devriez être en mesure de copier-coller votre séquence pour créer votre boucle. Si cela fonctionne, le mouvement se répète sans aucune interruption. Il peut arriver que vous vous retrouviez avec des mouvements qui gâchent l’effet, il vous faudra alors figer ces mouvements par la suite.

6. Exporter

Je préfère toujours exporter en full HD, même si, par la suite, le format GIF va dégrader la qualité de la vidéo. Avantage, vous pourrez utiliser votre boucle hors ligne en attendant que l'autoplay soit la norme.

Exporter en tant que GIF

J’utilise Photoshop CC 2016, mais n’importe quelle version fera l’affaire.

1. Fichier > Importation > Images vidéo dans des calques

2. Sélectionnez votre fichier vidéo. Retenez bien sa durée.

3. Sélectionnez la séquence

Personnellement je choisis l’option « Limiter à toutes les (x) images » avec un nombre d’images dérivé de la durée du clip. La plupart du temps, j’ajoute 1 à la durée du clip, à moins que celui-ci ne soit vraiment court. Dans le cas présent, une seconde, c’est suffisamment court pour l’importer du début à la fin. N’oubliez pas que cette étape a pour but de limiter la taille de notre fichier. La durée du clip est le facteur qui a le plus d’impact sur le poids de notre fichier, c’est la raison pour laquelle nous devons limiter le nombre d’images qu’il comporte.

4. Modifier le clip pour diminuer la taille du fichier

À ce stade, il nous reste quelques options pour diminuer la taille de notre fichier de manière préventive (qui, pour rappel, doit être inférieur à 1Mo)

Figer le mouvement : sélectionnez les parties fixes de l’image pour en faire un masque qui laissera uniquement apparaître les zones en mouvement. Il suffit de copier-coller ces zones fixes par-dessus les autres calques. Assurez-vous d’avoir bien positionné les calques collés au-dessus des autres.
Réduire le nombre d’images en supprimant certaines d’entre-elles. Enlever quinze images reste raisonnable. Je ne suis jamais allé au-dessus de 20 sans faire face à de vrais problèmes de compression par la suite.

5. Déterminer le timing

Le timing de votre GIF peut s’avérer compliqué à déterminer car les différents navigateurs vont le lire à des vitesses différentes. Cela dit, il faut globalement vous attendre à ce qu’ils le lisent un poil plus rapidement que ce que vous pouvez voir dans Photoshop. Le ralentir légèrement ne fera donc pas de mal.

https://www.youtube.com/watch?v=yy9giClSTN4

6. Calque > Nouveau calque de réglage

Je vous conseille de consolider les noirs et les blancs de votre boucle avec un calque « niveaux », car la compression qui vient par la suite limite le champ des couleurs.

7. Fichier > Exportation > Enregistrer pour le web

Il s’agit de la dernière étape, et sans doute de la plus compliquée. Ces options qui apparaissent dans une fenêtre menaçante contrôlent différentes caractéristiques de votre nouveau GIF :

Le bon calcul est approximativement celui-ci :

Taille du fichier = durée de la boucle x taille de l’image x couleurs x tramage x perte

La première étape sera de modifier la taille de l’image. Pour ma part, j'opte pour une taille de 600px.

Pour les trois valeurs suivantes, voici des exemples de GIFs exportés avec chaque option au plus bas pour que vous puissiez voir ce que ça rend.

La perte : il s'agit surtout de la compression. Zéro (0) signifie qu’il n’y a aucune compression et chaque augmentation de cette valeur produira une image plus floue, plus confuse. Pour ce qui est de la taille du fichier, passer de 0 à 5 peut changer la donne sans pour autant compromettre votre image. Voici un exemple de « perte » fixée à 60 juste pour vous montrer à quel point cela peut-être flou.

Le tramage détermine la fidélité des couleurs. 100 % équivaut à une précision maximale. En dessous, vous verrez apparaître une rustine de couleur là où devrait normalement se trouver un dégradé.

Les couleurs : vous serez surpris de voir que vous n’avez pas besoin de tant de couleurs que ça. L’exemple ci-dessous correspond à 100% en tramage, 0 en perte et de 40 couleurs.

Étant donné que j’ai choisi un clip très court, ce GIF pourrait être exporté sans faire de tels compromis. En voici une version avec une perte à 0, et 100% de tramage en 256 couleur. Il pèse 882 ko.

Cliquez sur « Enregistrer » et ça y est, c’est prêt !

Si vous voulez voir plus de GIFs, cliquez ici.

L’ensemble des cinemagraphes présent sur cette page ont était produit pour Denverite.com.

A lire aussi