Comment créer un GIF dans PhotoShop à partir d'une vidéo

Si vous êtes arrivé ici en vous demandant comment faire un GIF avec Photoshop, c'est probablement parce que la vidéo que vous avez téléchargée sur votre site Web ralentissait le temps de chargement. Eh bien, vous êtes au bon endroit. Dans ce guide, nous allons vous montrer comment créer un GIF dans Photoshop à partir d'une séquence vidéo. Il aura fière allure sur votre site et sera beaucoup plus optimisé pour la vitesse qu'un fichier vidéo !

A l'aide d'un GIF, vous pouvez présenter tout type de vidéo sur un site web, en boucle. Il peut s'agir d'un extrait de matériel promotionnel, d'un enregistrement d'écran pour un didacticiel ou à peu près tout ce que vous voulez vraiment.

Pour ce didacticiel, vous aurez besoin de séquences vidéo et d'Adobe Photoshop. Si vous n'avez pas d'abonnement Photoshop, vous pouvez faire un essai gratuit. Par conséquent, vous constaterez peut-être qu'avoir Photoshop est d'une grande aide pour la conception de sites Web ! Si votre vidéo est très longue, vous pouvez d'abord la couper dans un éditeur vidéo comme iMovie ou Adobe Premiere. Photoshop propose également une option de rognage lors de l'importation, mais un éditeur vidéo est préférable si le métrage original est extrêmement long.

Commençons.

Aperçu du résultat final

C'est le résultat final du GIF que nous avons créé pour ce tutoriel, parfait pour un arrière-plan de section ou de module.

Pour commencer, importez la vidéo dans Photoshop

Pour importer le clip vidéo dans Photoshop, vous devez d'abord être dans l'éditeur Photoshop. De là, cliquez sur Fichier > Importer > Images vidéo vers calques. Sélectionnez la vidéo que vous souhaitez utiliser et cliquez sur Ouvrir.

Dans la boîte de dialogue contextuelle, vous avez deux choix ; 1. Du début à la fin - pour utiliser la vidéo dans son intégralité ou, 2. Plage sélectionnée uniquement - pour utiliser l'option de rognage et n'utiliser qu'une partie de la vidéo.

En dessous, se trouve un choix pour limiter l'importation à un nombre choisi d'images. Sélectionnez un petit nombre si la vidéo est plus courte et un plus grand nombre si la vidéo est plus longue. Cela peut prendre quelques essais et erreurs jusqu'à ce que vous ayez le bon flux. Par exemple, les séquences qui ont des changements petits ou lents auront beaucoup d'images qui se ressemblent presque exactement. D'un autre côté, si le métrage est rapide avec de nombreux changements visuels, si vous supprimez trop d'images, cela peut sembler nerveux.

Pour ce tutoriel, nous choisissons « Du début à la fin » et « Limiter à toutes les 3 images ». Assurez-vous que 'Make Frame Animation' est cliqué.

Faire des ajustements au métrage

C'est le moment idéal pour effectuer tout type de réglage que vous souhaitez sur votre séquence vidéo, du recadrage de la taille au réglage des niveaux de couleur. Par exemple, il peut y avoir un objet disgracieux dans le coin de la vidéo ou la hauteur totale de la vidéo est trop grande pour l'endroit où vous souhaitez la placer dans la conception de votre site Web. Alternativement, si le métrage vidéo est trop saturé, vous pouvez utiliser le panneau de réglages pour ajuster la saturation sur tous les calques à la fois.

Pour les créatifs, ajuster les différents calques créera toutes sortes d'effets différents sur votre GIF. Ce que vous ne pouvez pas faire, c'est supprimer les arrière-plans ou utiliser des outils qui ne fonctionnent que sur un calque à la fois.

Conseil de pro : assurez-vous que, quel que soit le réglage que vous effectuez, vous avez sélectionné tous les calques.

Comment recadrer tous les calques à la fois

Sélectionnez tous les calques en cliquant sur le calque 1 puis en appuyant sur maj, cliquez sur le calque le plus haut. Sélectionnez l'outil Rectangular Marquee et sélectionnez la zone de la vidéo que vous souhaitez conserver (pas ce que vous souhaitez retirer). Cliquez sur Image > Recadrer et les zones en dehors de la sélection disparaîtront. Dans notre vidéo, nous sélectionnons toute la zone vidéo en laissant un peu en haut non sélectionné. Nous voulons rendre toute la vidéo moins haute et supprimer le bord blanc de l'horizon.

Comment ajuster les couleurs dans le GIF

Avec toutes les couches sélectionnées, cliquez sur l'onglet ajustements dans le menu Panneaux. Vous pouvez utiliser n'importe lequel des outils de réglage et les appliquer aux calques de votre GIF. Par exemple, vous pouvez transformer les couleurs en noir et blanc ou lui donner un effet bicolore. Nous utilisons le réglage noir et blanc avec une teinte pour rendre la couleur de notre vidéo un peu plus artistique. C'est parfait pour un arrière-plan qui ne gênera pas le reste du contenu. Vous pouvez utiliser n'importe quelle teinte de couleur que vous aimez et ajuster les différents niveaux de couleur comme vous le souhaitez. Juste un conseil, si vous ajoutez des ajustements de couleur, votre fichier final sera plus volumineux que si vous ne le faites pas.

Ce GIF téléchargé à 211 Mo sans les filtres de couleur et à 312 Mo avec les ajustements de couleur. Si vous voulez vraiment les ajustements de couleur, vous devez réduire les images pour réduire la taille du fichier final. Plus à ce sujet dans la section suivante.

Utilisez la chronologie pour modifier les images

Avec la fenêtre de chronologie, vous pouvez modifier les images pour réduire la taille finale du fichier GIF. Par exemple, des images supplémentaires à la fin du clip qui semblent juste traîner ou créer une section statique. Plus vous pouvez sortir de cadres, mieux c'est ! Mais attention, vous retirez trop d'images et l'effet final devient nerveux, prenez votre temps pour vérifier à quoi ressemble la boucle après avoir supprimé certaines images.

Pour accéder à la fenêtre de chronologie et voir comment le GIF fonctionne en boucle, cliquez sur Fenêtre > Chronologie. Un long panneau horizontal s'ouvrira dans la partie inférieure de votre écran. Dans le coin inférieur gauche, il y a quelques contrôles. Choisissez l'option de boucle comme « Pour toujours » et appuyez sur le bouton de lecture pour voir à quoi ressemble le GIF. Dans notre cas, notre GIF a l'air plutôt bien mais est encore trop long. À plus de 200 images et avec un ajustement des couleurs, le fichier final fait un énorme 312 Mo. Vous pouvez vérifier la taille de votre fichier final en suivant les étapes de la section « Enregistrer en tant que GIF » ci-dessous. Après avoir jeté un coup d'œil, appuyez simplement sur annuler au lieu d'enregistrer. Vous pourrez également diminuer la taille du fichier avec les options Exporter pour le Web.

Comment supprimer des cadres pour réduire la taille du fichier GIF

Pour rendre notre GIF beaucoup plus petit, nous retirons les 200 dernières images. La vidéo complète a une section où la caméra du drone tourne et se déplace vers la gauche vers le parc derrière la plage. Nous n'en avions pas besoin. Maintenant, notre GIF pèse 160 Mo. Encore assez grand. Nous ne retirons plus de trames car cela deviendrait nerveux, nous la laissons donc tel quel pour l'optimiser plus tard avec les options 'Enregistrer pour le Web'.

Pour supprimer des images, vous pouvez en sélectionner une et appuyer sur l'icône de la corbeille qui se trouve sous les fonctions de lecture de la fenêtre de la chronologie. De même, vous pouvez sélectionner un groupe consécutif d'images en cliquant sur une, puis les images avant ou après en appuyant sur Maj+clic. Si vous ne souhaitez pas couper le métrage du début ou de la fin du GIF mais que vous souhaitez le raccourcir, supprimez d'autres images en appuyant sur l'une d'entre elles, puis sur commande + cliquez sur une autre image.

Nous adorons comment, lorsque vous créez un GIF sur Photoshop avec une vidéo, vous pouvez couper des sections du métrage à la fois lors de l'importation et par la suite ! Tellement pratique.

Comment changer la vitesse du GIF

La fenêtre de chronologie vous donne également la possibilité de ralentir ou d'accélérer le GIF. Chaque image de la chronologie a un contrôle de vitesse en dessous. La mesure par défaut est 'no delay' ou '0' mais il peut arriver que la vidéo que vous avez utilisée ait déjà un réglage de vitesse. C'est le cas de notre vidéo. Si vous regardez la capture d'écran ci-dessus où nous supprimons des cadres, vous pouvez voir que nos cadres ont un délai de 0,04 seconde. Lorsque nous prévisualisons le GIF, il semble qu'il soit accéléré. Nous ne voulons pas de cela.

Nous sélectionnons toutes les images de la chronologie en cliquant sur les trois lignes dans le coin supérieur gauche de la fenêtre de la chronologie et en cliquant sur "Sélectionner toutes les images". Sur n'importe laquelle des trames, nous cliquons sur la petite flèche vers le bas et choisissons 'pas de délai'. Cela fera couler notre GIF naturellement. Pour créer un GIF qui ressemble à un ralenti, choisissez n'importe quelle valeur supérieure à 1 seconde.

Enregistrer au format GIF et optimiser

Lorsque tout est terminé, il est temps d'enregistrer le projet au format GIF. Cliquez sur Fichier > Exporter > Enregistrer pour le Web (Héritage) et choisissez l'option GIF dans la boîte de dialogue contextuelle. Vérifiez la taille du fichier et considérez sa sortie. Il y a quelques choses que vous pouvez faire pour réduire la taille du fichier.

• Réduisez le nombre de couleurs.
• Réduisez ou supprimez le tramage.
• Réduisez la hauteur et la largeur.

Pour vérifier comment les ajustements changent votre GIF, cliquez sur le bouton Aperçu. Utilisez les onglets 2-Up et 4-Up pour voir différentes options. Vous devrez peut-être revenir en arrière et supprimer d'autres cadres s'il est encore trop grand. Visez une taille de fichier inférieure à 20 Mo. Si vous créiez un GIF pour une section pleine largeur, vous devrez vraiment réduire les cadres pour pouvoir l'obtenir à une bonne taille pour le Web.

Une bonne règle de base est de ne pas dépasser 20 Mo environ pour vos fichiers GIF. Plus que cela, c'est trop gros. Si vous parvenez à le réduire en dessous de 10 Mo sans perdre trop de qualité, alors vous avez un gagnant.

Nous avons fini par supprimer plus d'images de notre GIF pour le ramener à 18 Mo. Ensuite, nous l'avons fait passer par GIFCompressor et l'avons réduit de 55%. GIFCompressor est un outil en ligne gratuit qui réduit la taille des GIF sans perte de qualité. Vous pouvez télécharger un GIF d'une taille maximale de 50 Mo.

Conclusion

Comme vous le voyez, il est assez facile de créer un GIF dans Photoshop à partir de séquences vidéo. Le seul inconvénient est la longueur de la vidéo avec laquelle vous commencez et le nombre d'images que vous supprimez. Si vous n'en supprimez pas assez, le fichier final sera vraiment énorme, et cela ne sera d'aucune aide. Il faudra peut-être quelques essais pour enfin obtenir un GIF exactement comme vous le souhaitez. Si vous créez des GIF de captures d'écran pour des tutoriels, comme dans ce guide, vous vous y habituerez et ce sera plus simple à chaque fois.

Image en vedette via emojoez / shutterstock.com