Créer un fondu enchaîné entre 2 images, sous la forme d'une image .gif animée, avec Adobe ImageReady.
Pour rappel : ImageReady est intégré à Photoshop, on y accède par le bouton tout en bas de la palette Outils (ou par Ctrl + Maj + M).
Nous allons voir comment faire un fondu enchaîné entre 2 images : le fichier final sera au format .gif, c'est le seul format permettant de contenir une image animée.
Nous obtiendrons 2 images qui apparaissent progressivement, l'une remplaçant l'autre.
L'image finale étant destinée à être affichée sur le web, on recherchera à ce quelle soit la plus légère possible.
Dans ce tuto j'utiliserai 2 images ayant les mêmes dimensions.
Bien que le principe soit pratiquement le même, la réalisation d'une animation avec 2 images de dimensions différentes est un peu plus complexe.
Voici les images de départ :
1 - Redimensionnement, éventuel, d'une image au format de l'autre :
Dans ce tuto, il faut que les 2 images aient les mêmes dimensions.
A titre d'exemple nous allons redimensionner la 2ème image au format de la 1ère.
Bien sûr vous pouvez également utiliser la commande .
Je nomme 1ère image celle qui débute l'animation, ici c'est le bateau de gauche.
- ouvrir les 2 images dans Photoshop.
- prendre l'outil Recadrage C
- cliquer sur la 1ère image
- en haut dans la barre d'options, cliquer sur le bouton "Image 1er plan" : cela mémorise les dimensions de l'image.
- cliquer sur la 2ème image et la redimensionner avec l'outil Recadrage.
Pour ce faire : vous passez en mode plein écran F, puis avec l'outil Recadrage en partant en haut à gauche à l'extérieur de l'image, vous cliquez puis en maintenant la souris, vous vous déplacez en bas à droite, à l'extérieur de l'image.
Le cadre avec les poignées de l'outil Recadrage est visible, faites un double clic et l'image prend automatiquement les dimensions choisies (dans la barre d'options).
2 - Déplacement de la 2ème image dans la 1ère :
- sélectionner l'outil Déplacement V
- sélectionner la 2ème image
- maintenir la touche Maj (ou Shift) enfoncée
- faire un glisser/lâcher de la 2ème image dans la 1ère : vous obtenez un second calque contenant la 2ème image
Le maintien de la touche Maj permet de centrer automatiquement l'image importée.
- fermer maintenant la 2ème image, elle ne nous servira plus
- cliquer en bas de la palette des outils sur l'icône (ou Maj + Ctrl + M)
3 - Dans ImageReady :
Nous allons créer une seconde vignette de l'image puis une trajectoire (de fondu) entre ces 2 images.
- faire apparaître la palette Animations
La vignette de l'image étant sélectionnée,
- cliquer sur l'icône Reproduire l'image sélectionnée, en bas de la palette Animation.
Vous obtenez 2 vignettes de l'image.
Maintenant il faut supprimer un calque sur chaque vignette afin d'alléger le fichier final.
- faire apparaître la palette des Calques
- dans la palette Animation : cliquer sur la 1ère vignette
- dans la palette Calques : décocher une des images (en cliquant sur le petit oeil en début de calque).
Donc la 1ere image de départ du fondu sera l'image visible.
- dans la palette Animation : cliquer maintenant sur la seconde vignette
- dans la palette Calques décocher l'autre image
Les choix 1ère image et 2ème image dépendent du sens de l'animation que vous voulez faire.
Vous avez donc maintenant une seule image par vignette, uniquement :
la vignette 1 de la palette Animation contient 1 image et la vignette 2 de la palette Animation contient l'autre image.
4 - Création de la trajectoire en fondu :
- dans la palette Animation : sélectionner la 1ère vignette
- cliquer sur l'icône Trajectoire...
Dans le menu qui s'ouvre :
il faut choisir le nombre d'images intermédiaires à ajouter, elles serviront à faire un fondu.
Plus il y a d'images plus le fondu est fluide (visuellement) mais aussi plus le fichier final sera volumineux (fichier.gif).
Donc ici j'ai choisis 6 images.
Si votre image est petite vous pouvez en choisir plus : max 10,
mais si la taille du fichier final est trop grosse, c'est en réduisant ce nombre d'images, que vous diminuerez la taille finale du fichier.gif
Vous obtenez un fondu de 6 images (+ l'image de départ et l'image de fin).
Maintenant nous allons visionnez l'animation :
- cliquer sur l'icône Exécute/arrête l'animation (icône en forme de triangle vers la droite).
L'animation se déroule en temps réel , c'est à dire avec un intervalle de 0 seconde.
On arrête l'animation avec le même bouton.
5 - Modifier la durée de l'animation :
On peut changer ce paramètre (durée d'apparition de chaque vignette) :
- cliquer sur la 1ère vignette
- maintenir la touche Maj
- cliquer sur la dernière vignette : cela sélectionne toutes les vignettes.
- cliquer maintenant sur la zone où est écrit "0 sec." pour Définir le délai des images.
Dans la liste qui s'ouvre vous pouvez sélectionner une durée pré-renseignée ou choisir une durée précise, en cliquant sur "Autre".
Ici j'ai choisis : 0,2 (ce qui fait 0,2 seconde).
Lancer l'animation pour voir si le délai convient, sinon le modifier.
On peut également donner un délai différent pour certaines images, il suffit de les sélectionner individuellement.
Par exemple 0,5 seconde pour la 1ère et la dernière et toutes les intermédiaires (fondu) à 0,2 seconde.
Maintenant nous allons enregistrer l'image.
Il faut d'abord Configurer les paramètres d'enregistrement de l'image
6 - Enregistrer l'image en gif (optimisation pour le web) :
- afficher la palette Optimisation
Dans cette palette on dispose de paramètres prédéfinis.
Une image gif est limitée à 256 couleurs.
Si l'image comporte beaucoup de couleurs (genre photo) choisir : Paramètres prédéfinis GIF 128 tramé.
Si l'image à moins de couleur choisir : GIF 64 tramé.
On peut bien sur descendre le nombre de couleurs, moins il y a de couleurs plus le fichier .gif sera petit
A vous de le déterminer.
Par exemple pour une petite image gif animé : choisir Gif 64 tramé ou GIF 32 tramé.
On peut ensuite diminuer le nombre de couleurs dans la rubrique Table des couleurs / couleurs : par exemple à 16 ou moins.
Il faut également décocher le choix Transparence, dans la rubrique du même nom, si l'image n'a pas de transparence.
Décocher également la case Options / Ajouter des métadonnées
Cela allège la taille du fichier final.
Enfin :
- faire et donner un nom.
Vous obtenez une image.gif
7 - Image finale :
Il faut ensuite visionner cette image dans l'explorateur de windows et regarder sa taille.
Si l'image est trop grosse pour un site web, il y a 3 solutions pour réduire sa taille :
- soit diminuer ses dimensions (vous pouvez le faire directement dans ImageReady : Image/Taille de l'image)
- soit diminuer le nombre d'image intermédiaire (fondus)
- soit diminuer le nombre de couleurs dans la palette Optimisation.
8 - Animation aller-retour :
Comme vous pouvez le constater avec la méthode précédente, lorsque l'animation est terminée elle revient à l'image de départ directement sans faire de fondu lors du trajet retour (entre l'image 2 et l'image 1).
Il est possible de créer un 2ème fondu sur le trajet retour de l'image 2 vers l'image de départ.
Il est très simple d'ajouter un fondu entre la dernière image et la 1ère, mais cela va augmenter la taille de l'image finale de 50% environ (image.gif).
Si l'image finale est trop volumineuse, vous avez dans ce cas, comme expliqué plus haut, la possibilité soit de diminuer le nombre d'images intermédiaires, ce qui fera un fondu moins fluide, soit de diminuer les dimensions de l'image.
A vous de faire ces choix.
9 - Ajout de fondu sur le trajet retour :
Le principe est le même que précédemment.
La seule différence c'est qu'il faut d'abord ajouter un double de l'image de départ, sur la ligne de l'animation,et placer ce double en fin d'animation
ensuite on fait la trajectoire, et enfin on supprime cette image en double (uniquement celle-là).
Dans la palette Animation :
- agrandissez la largeur de la palette vers la droite pour avoir une zone vide (en tirant le bord droit avec la souris).
- cliquer sur la 1 ère image
- cliquer sur l'icône Reproduit l'image sélectionnée
- avec le pointeur de la souris : déplacer cette nouvelle vignette à la fin de l'animation, à l'extrême droite.
Maintenant nous allons faire l'animation entre l'avant-dernière image et la dernière.
La manip est exactement la même que pour le 1er fondu de ce tuto
- cliquer sur l'avant-dernière image (celle de fin de l'animation précédente : vignette 8)
- cliquer sur l'icône Trajectoire...
- paramétrer le nombre d'images
Il est logique de mettre le même nombre d'images que pour le trajet "aller" : ici 6.
Vous obtenez une bande animée de 15 images
La dernière image est en double avec la 1ère (1), puisque l'animation tourne en boucle, elle n'a servie qu'à créer le fondu.
- cliquer sur la dernière image
- cliquer sur l'icône de la corbeille, pour la supprimer.
Maintenant il faut visionner l'animation : cliquer sur Exécute/arrête l'animation.
10 - Sauvegarde de l'animation en .gif :
Les paramètres de la palette Optimisation n'ont pas changés, mais comme on a augmenté le nombre d'image, vous devez peut être les modifier.
Rappel : soit vous refaite l'animation avec moins d'image de fondu, soit vous diminuez le nombre de couleurs soit vous diminuer les dimensions de l'image.
Puis :
Et admirez le résultat !
Notes :
J'ai baissé la qualité finale à 32 tramé pour affichage dans ce tuto (l'image ne fait que 364 ko).
J'ai modifié les délais d'apparition :
- 1ere vignette : 1 seconde (1ère image)
- vignette du milieu (la 8) : 1 seconde (2ème image)
- tous les fondus : 0,2 secondes
F I N
Tutoriel en .pdf : Fondu entre 2 images►Télécharger (512 ko)
Photoshoplus.info © 2004-2010
