Créer un GIF animé transparent avec Photoshop CS6

Les fichiers GIF animés sont omniprésents sur le web, et maîtriser leur création est une compétence précieuse pour tout graphiste. Que vous souhaitiez transformer une vidéo en GIF ou créer une animation à partir d'images, Photoshop CS6 offre des outils puissants pour y parvenir. De plus, la création de GIFs avec un arrière-plan transparent permet une intégration harmonieuse sur diverses plateformes.

Comprendre les bases des fichiers GIF animés

Dans la plupart des cas, les fichiers GIF sont créés à partir de plusieurs images. La vitesse à laquelle ces images changent est appelée le taux de rafraîchissement du fichier. La transparence dans les fichiers GIF est également un élément clé pour une intégration professionnelle.

Si les photos participant à un GIF ont des couleurs d'arrière-plan, l'animation peut sembler incohérente ou non professionnelle lorsque le fichier est placé sur une page web ou sur toute autre plateforme où le GIF animé doit se fondre dans la scène ou la/les photo(s).

Partie 1 : Créer un GIF animé à partir d'images dans Photoshop CS6

Pour commencer à créer un GIF animé, vous devez d'abord importer les images que vous souhaitez utiliser dans votre GIF. Vous pouvez simplement les faire glisser dans la fenêtre de Photoshop.

Une fois vos images importées, un panneau apparaît en dessous de celles-ci avec un bouton central intitulé "Créer un montage vidéo". Vos différentes images apparaissent alors dans ce panneau de montage.

Après avoir importé vos images, il est crucial de les organiser. Veillez à nommer chaque calque afin d'organiser votre flux de travail. Double-cliquez sur le nom des calques dans la palette des calques et renommez chacun d'entre eux.

Lorsque vous créez un GIF animé dans Photoshop, assurez-vous que chaque image possède son propre calque. Cela vous permet de modifier chaque image individuellement sans affecter les autres images de votre projet, ce qui est essentiel pour une animation propre.

Pour créer des cadres à partir de vos calques, sélectionnez l'option "Créer des cadres à partir de calques" dans le menu approprié. Vous pourrez ensuite sélectionner chaque cadre individuel dans votre Chronologie et modifier les éléments selon vos besoins.

La prochaine étape consiste à déterminer la durée de lecture de chaque image. Sélectionnez l'image que vous souhaitez modifier, cliquez sur la flèche et choisissez la durée dans la liste déroulante. Par défaut, chaque image est réglée sur 0 seconde, il est donc nécessaire de modifier cette valeur pour que votre animation fonctionne correctement. Essayez de sélectionner 0,2 ou 0,5 seconde pour commencer.

Pour définir les options de bouclage de votre GIF (par exemple, pour qu'il se répète plusieurs fois), sous la ligne de temps, vous trouverez plusieurs options. Vous pourrez choisir parmi des options préétablies ou personnaliser vos propres spécifications.

Avant d'enregistrer votre GIF, il est temps de le prévisualiser pour vous assurer qu'il s'anime comme vous le souhaitez. Photoshop vous permet de le visualiser directement dans le programme sans avoir à l'enregistrer au préalable.

Pour enregistrer votre GIF dans Photoshop, rendez-vous dans le menu Fichier > Exporter > Enregistrer pour le Web (ancien). Suivez les instructions, donnez un nom à votre fichier et le tour est joué ! Une fois l'exportation terminée, n'oubliez pas de l'afficher en dehors de Photoshop pour obtenir un retour d'information.

Interface de Photoshop CS6 avec le panneau Montage vidéo ouvert, montrant des calques d'images pour la création d'un GIF animé.

Partie 2 : Créer un GIF animé transparent

La plupart des GIF ont déjà un arrière-plan transparent par défaut. Cependant, si votre GIF source n'est pas transparent ou si vous souhaitez rendre une partie spécifique de votre GIF transparente, plusieurs outils en ligne peuvent vous aider.

Utilisation d'outils en ligne pour la transparence des GIF

Il existe plusieurs plateformes en ligne qui permettent de créer des GIFs transparents ou de supprimer l'arrière-plan d'un GIF existant.

Media.io Online GIF Maker

Media.io est un fabricant de transparents d'images basé sur l'IA. Cet outil permet de supprimer en un clic la couleur de fond d'une image et de créer un GIF transparent avec une vitesse personnalisée.

  • Étape 1 : Importez votre image ou vidéo.
  • Étape 2 : L'outil alimenté par l'IA supprime automatiquement le fond.
  • Étape 3 : Attendez une seconde.
  • Étape 4 : Vous pouvez rééditer les images traitées si nécessaire.

EZGIF

EZGIF est un atelier en ligne complet pour presque toutes les tâches liées aux GIF, y compris la suppression d'arrière-plan. Malgré la présence de publicités, c'est un outil puissant.

  • Étape 1 : Lancez votre navigateur, allez sur EZGIF, cliquez sur "Parcourir" dans la section "Télécharger des images", et sélectionnez votre fichier GIF.
  • Étape 2 : Faites défiler vers le bas et cliquez sur "Appliquer la sélection !" pour prévisualiser le résultat.

OnlineGifTools

OnlineGifTools se présente comme un créateur de GIF en ligne qui crée des animations GIF transparentes en un seul clic. Vous pouvez spécifier la couleur d'arrière-plan à effacer.

  • Étape 1 : Lancez OnlineGifTools et glissez-déposez votre fichier GIF.
  • Étape 2 : Entrez la couleur d'arrière-plan que vous souhaitez effacer dans la section "Régions transparentes". Vous pouvez également modifier le taux de couleur.
  • Étape 3 : Cliquez sur le bouton "Télécharger" dans l'écran de prévisualisation pour exporter votre nouveau fichier GIF.

OIE (Online Image Editor)

OIE est une solution en ligne gratuite qui permet de modifier des images, y compris la suppression d'arrière-plan.

  • Étape 1 : Accédez à OIE et téléchargez votre fichier GIF.
  • Étape 2 : Utilisez les outils de modification pour supprimer l'arrière-plan.
  • Étape 3 : Enregistrez votre GIF transparent.

LunaPic

LunaPic est un éditeur d'images en ligne simple avec une boîte à outils complète.

  • Étape 1 : Ouvrez votre GIF dans LunaPic.
  • Étape 2 : Sélectionnez l'outil de suppression d'arrière-plan.
  • Étape 3 : Appliquez les modifications et enregistrez votre GIF transparent.

Animizer

Animizer est un outil qui effectue diverses tâches d'édition de GIF, y compris la suppression de la couleur d'arrière-plan.

  • Étape 1 : Téléchargez votre GIF sur Animizer.
  • Étape 2 : Choisissez l'option de suppression de couleur d'arrière-plan.
  • Étape 3 : Enregistrez le GIF résultant.

Gifmake

Gifmake est un autre outil de création de GIF en ligne qui permet de modifier les GIF existants.

  • Étape 1 : Téléchargez votre GIF sur Gifmake.
  • Étape 2 : Modifiez les images individuellement ou utilisez les outils de transparence.
  • Étape 3 : Enregistrez le GIF modifié.

GIFmagic

GIFmagic est exclusivement dédié aux GIFs animés et permet de manipuler les fichiers pour répondre à vos besoins, y compris l'ajout de transparence.

  • Étape 1 : Allez sur le site Web de GIFmagic, cliquez sur le premier bouton, puis sur "Parcourir" et sélectionnez votre GIF source.
  • Étape 2 : Dans le menu "Édition", allez dans "Transparence" et cliquez sur "Ajouter".
  • Étape 3 : Enregistrez votre GIF transparent.
Capture d'écran d'un des outils en ligne montrant l'option pour rendre un GIF transparent.

Partie 3 : Créer un GIF animé à partir d'une vidéo dans Photoshop CS6

Vous avez tourné une superbe vidéo que vous souhaiteriez transformer en GIF ? Photoshop CS6 peut vous aider.

Pour commencer, ouvrez votre vidéo dans Photoshop en cliquant sur Fichier > Ouvrir.

Une fois la vidéo ouverte, vous devrez limiter le nombre total d'images, surtout si la vidéo dure plus de quelques secondes. Vous pouvez utiliser la boîte de dialogue existante pour couper une section spécifique de la vidéo (via le bouton "Plage sélectionnée uniquement") ou sélectionner le bouton radio "Limiter à chaque N image" et choisir le nombre total d'images à importer. Par exemple, si vous cliquez sur cette case et entrez "4", le programme n'importera que toutes les quatre images de la vidéo dans Photoshop.

Le panneau Montage vidéo est spécialement conçu pour gérer l'animation des GIFs animés dans Photoshop. Chaque vignette représente une image clé de l'animation.

Il est important de noter que pour un fichier .gif, plus il y a de couleurs, plus le poids du fichier augmente. Vous pouvez choisir de réduire le nombre de couleurs, par exemple à 32 ou moins, par le menu déroulant "Paramètres prédéfinis" ou manuellement par le menu "Couleurs".

Une fois votre animation terminée, enregistrez l'image en GIF animé en allant dans le menu Fichier > Enregistrer pour le Web (ou utilisez le raccourci clavier Alt+Ctrl+Maj+S).

Tuto Photoshop : Créer un GIF animé avec des images

Conseils supplémentaires pour la création de GIF

N'oubliez pas que vous pouvez également utiliser Photoshop pour éditer un GIF animé existant. Il suffit de l'ouvrir comme n'importe quelle image dans Photoshop. Si vous utilisez une version ancienne de Photoshop qui affiche un message d'erreur indiquant "Ceci est une image GIF animée. Vous ne pouvez afficher qu'une seule image.", vous pouvez utiliser ImageReady pour modifier le GIF si vous utilisez Photoshop CS2 (ImageReady n'est plus maintenu dans les versions suivantes).

Le panneau Montage dans Photoshop est spécialement conçu pour gérer l'animation des GIFs animés. Chaque vignette représente une image clé de l'animation. La première étape consiste à créer des images clés en sélectionnant la dernière image clé (fin de l'animation) et en cliquant sur l'icône trajectoire en bas du panneau montage.

Il est possible de mettre un délai sur certaines vignettes de façon à faire une pause ou à faire varier la vitesse de l'animation en cliquant sur "Autre...".

Une fois votre animation terminée, il ne reste plus qu'à enregistrer l'image en GIF animé. Pour cela, allez dans le menu Fichier > Enregistrer pour le Web (ou utilisez le raccourci clavier Alt+Ctrl+Maj+S).

Les GIF animés sont une forme de média puissante et très demandée. Une fois que vous aurez appris à créer un GIF dans Photoshop, n'hésitez pas à mettre vos meilleures créations sur votre site Web.

tags: #gif #anime #transparent #photoshop #cs6

Articles populaires: