Comment créer des GIFs animés sous Photoshop, voici un petit tutoriel qui va vous expliquer pas à pas comment faire.

Vous pouvez vous servir du fichier .psd pour reproduire chez vous ce tutoriel, puis enfin passer à la vitesse supérieure.

Ce tutoriel est fait à partir de copie d’écran de Photoshop CS4, il reste valable pour Photoshop CS3.

Entre CS3 et CS4, il y a sans doute quelques améliorations mais pour l’heure, je ne saurais pas dire lesquelles.

Joindre un GIF animé personnalisé qui portera en quelque sorte votre signature, fera du meilleur effet dans vos échanges de courriers électroniques.

Cette animation simple a été réalisée à partir de  deux techniques :

  1. L’activation et désactivation successives des calques
  2. La commande « Trajectoire… » pour animer un objet dans une direction donnée

Etape 1: Configuration de vos calques.

La première étape dans la création d’un GIF animé dans Photoshop est de superposer des calques avec tous les éléments visuels que vous prévoyez d’intégrer dans l’animation. Mon exemple est constitué de 7 calques dont 4 contenant le texte de rebours, et 2 calques pour la fusée et la flamme.

Ouvrez le « template » PSD avec Photoshop.  Je l’ai trouvé sur le net et un peu adapté pour les besoins du tutoriel. Vous pouvez le télécharger ici.

Vous devriez obtenir ceci sous Photoshop CS3 ou CS4.

Étape 2: Création de l’animation en ajoutant des calques visibles

Choisissez Fenêtre> et sélectionnez Animation pour montrer la « palette animation ». (si elle n’est pas activée)

Commencez le TP par supprimer toutes les images dans la palette animation, pour cela sélectionnez d’abord toutes les images puis supprimez les images via le menu de la palette animation.

Sur la première image de la séquence, désactivez la visibilité de toutes les couches (ou calques) que vous ne voulez pas voir au début de votre animation. Dans l’exemple ci-dessous, seuls les calques « fond blanc » et « fusée » sont visibles.

Puis ajouter une image à la fois à l’aide du bouton « duplication des images », activez ou désavtivez la visibilité des calques en fonction de ce que voulez voir apparaître sur l’image (oeil visible ou non).

Ainsi à la 2ième image de la séquence, le calque de la fusée immobile et le calque du chiffre 3 sont visibles, à la 3ième image, les calques des chiffres 3, 2 et  le calque de la fusée sont visibles, le calque avec le chiffre 1 étant toujours désactivé, à la 3e image les chiffres 1,2,3 et la fusée sont visibles, ainsi de suite…

Jusqu’au décompte final : décollage ! avec l’apparition des flammes….(ci-dessous)

Étape 3: Création de l’animation en utilisant la commande « Trajectoire… »

Maintenant que le compte à rebours est terminé, nous avons besoin, pour créer l’illusion, que notre fusée décolle du bas vers le haut. Pour donner cette illusion et gagner du temps énorme, procédez comme suit :

Ajoutez une nouvelle image à l’aide du petit bouton « duplication des images sélectionnées« , puis sélectionnez le groupe appelé « Fusée » et déplacez votre fusée vers le haut du cadre avec l’outil déplacement (V). Cette image de la flamme qui disparait du cadre sera la dernière de votre séquence.

Ensuite, choisissez « Trajectoire … » dans le menu de la palette ou par le bouton « trajectoire des images » disponible dans la barre des actions (petits cercles)
Sélectionnez le nombre d’image à ajouter entre le début du décollage et la fin de la séquence, dans mon cas j’ai choisi 10 images.  Photoshop ajoutera des images intermédiaires. Plus le nombre d’images intermédiaires sera élevé, plus le gif vous semblera fluide.

On obtient ceci :

Etape 4 : Réglage du temps entre chaque image.

Si vous souhaitez que le retard de chaque image soit le même tout au long de votre animation, sélectionnez toutes les images et choisissez le retard voulu.

Dans notre cas, le retard pour le décompte est réglé à 1 seconde :1..2..3, puis à partir du décollage, le retard passe à 0,1 seconde pour créer l’illusion de la fluidité. Le temps d’affichage est bien entendu paramétrable image par image, cela dépend de votre animation.

Étape 5: Export du GIF animé.

Assurez-vous que le type d’image est GIF, n’hésitez pas à expérimenter avec d’autres options, et enregistrer votre fichier.

Pour tester votre résultat , faites glisser le GIF vers votre navigateur Web.

Rappel : Dans Photoshop CS3 ou CS4 : Fichier> Enregistrer pour le Web et les périphériques…

Si cet article vous a plu, partagez le !
  • Facebook
  • Twitter
  • Google Bookmarks
  • Technorati
  • Netvibes
  • del.icio.us
  • Digg
  • Live
  • StumbleUpon
  • Wikio FR
  • MySpace
  • blogmarks
  • Add to favorites
  • Yahoo! Bookmarks
  • MSN Reporter
  • Fleck
  • MisterWong
  • Blogosphere News
  • viadeo FR
  • Scoopeo
  • Print
  • email
  • PDF
  • RSS