Créer un gif animé avec Photoshop

Créer un gif animé avec Photoshop

Tutoriel publié en juillet 2013 par Galdon dans la catégorie Photoshop

Dans ce tutoriel, nous allons apprendre comment créer un GIF animé avec Photsohop. Un GIF animé est une image dans laquelle on peut placer une petite animation très courte qui dure généralement quelques secondes voir moins d'une seconde.

Nous allons partir d'un document Photoshop existant : ce smiley que vous pouvez télécharger en cliquant sur le bouton de téléchargement ci-dessous :

Smiley calque de forme Boby le smiley dessiné avec des calques de forme dans Photoshop CS6.
Télécharger

Smiley calque de forme

Et voici le résultat :

Smiley gif animé avec Photoshop

C'est parti :

Panneau montage

Le panneau montage est spécialement conçu pour gérer l'animation des gif animés dans Photoshop. Il est masqué par défaut, pour afficher le panneau montage, il faut aller dans le menu Fenêtre > Montage.

Ce panneau montage est en fait une timeline qui représente l'image à différents moments dans le temps, et c'est la succession de ces images qui créé l'animation, exactement comme dans une vidéo.

Voici à quoi ressemble ce panneau :

Panneau montage animation gif animé dans Photoshop CS6
Cliquez sur l'image pour agrandir

Chaque vignette représente une image clé de l'animation. On y trouve aussi un bouton "play" qui permet de prévisualiser l'animation.

En bas du panneau se trouvent 3 icônes très utiles :

  • Trajectoire des images animées : permet de générer automatiquement des images clé pour créer une transition entre 2 images clé
  • Duplication des images sélectionnées : elle permet de créer une nouvelle image clé
  • Suppression des images sélectionnées

Créer les images clé

La première étape va donc être de créer des images clés. Par défaut, vous avez une image clé, c'est l'état initial de l'animation.

Donc on va créer une image clé, puis déplacer les différents calques qui composent l'image (les yeux, les pupilles et la bouche du smiley) :

Créer une image clé gif animé montage

On peut voir que la nouvelle configuration des calques n'est visible que sur l'image clé courante, sur la première image le smiley n'a pas changé, les calques sont à leur position initiale.

Malheureusement on ne peut animer que la position, l'opacité et les styles de calque dans un GIF animé, il est impossible de faire une rotation par exemple, car l'animation n'est pas mémorisée par Photoshop, il la répercute automatiquement sur toutes les images clés du panneau montage.

Animer la trajectoire

Maintenant que nous avons 2 images clés, il reste à créer quelques images clé intermédiaires pour créer une transition en douceur (interpolation) entre les deux.

Pour cela, il suffit de sélectionner la dernière image clé (fin de l'animation) et de cliquer sur l'icône trajectoire en bas du panneau montage (cf image globale ci-dessus). Une fenêtre s'affiche alors :

Trajectoire montage

Après avoir cliqué sur OK, on peut voir de nouvelles images apparaître :

Images clé trajectoire

Animer le délai

Par défaut, chaque image clé est sans délai, c'est-à-dire qu'il n'y a pas de "pause" sur chaque images, elles défilent à un rythme d'environ 10 images par seconde.

Mais 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. Pour cela, il faut cliquer sur la petite liste déroulante présente sous chaque vignette (0s) :

Délai animation gif animé

En cliquant sur Autre... il est possible de définir un délai personnalisé, autre que les valeurs prédéfinies qui sont proposées dans le menu contextuel.

Exporter en GIF animé

Une fois votre animation terminée, il ne reste plus qu'à enregistrer l'image en GIF animé. On ne peut pas enregistrer au format gif animé via la boite de dialogue "Enregistrer sous", il faut passer par la fonction exporter pour le web.

Pour cela, allez dans le menu Fichier > Enregistrer pour le Web (ou utilisez le raccourci clavier Alt+Ctrl+Maj+S). Une fenêtre s'affiche alors, il faut choisir le format GIF dans la liste déroulante en haut à droite :

Exporter en GIF animé depuis Photoshop
Cliquez sur l'image pour agrandir

Modifier un GIF animé avec Photoshop

En plus de pouvoir créer des GIF animés, Photoshop permet aussi d'éditer un gif animé existant. Pour cela, il suffit de l'ouvrir comme n'importe quelle image dans Photoshop. On voit alors apparaître les images clés dans le panneau montage.

Certaines versions anciennes de Photoshop ne permettent pas de modifier un GIF animé, il affiche alors un message d'erreur indiquant : "Ceci est une image GIF animée. Vous ne pouvez afficher qu'une seule image. Si vous enregistrez sur ce fichier, vous perdrez des informations". Ce "bug" a été corrigé dans Photoshop CS6, donc si vous rencontrez ce problème, il faut mettre à jour vers la version CS6 minimum.

Vous pouvez aussi utiliser ImageReady pour modifier le GIF si vous utilisez Photoshop CS2 (ImageReady n'est plus maintenu à l'heure actuelle, il est absent des versions suivantes de Photoshop : CS3, CS4, CS5 et CS6).

Fini de lire cette page ? allez faire un tour ici : fille de la jungle, ça peut vous intéresser.

Tags
animation web GIF animé
Tutoriaux similaires
1229 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires