Réaliser un Gif animé sous forme de bannière
Etape 1 :Télécharger le fichier psd
Pour réaliser l'exemple ci-dessous et appliquer les explications directement
dessus, vous pouvez télécharger le fichier photoshop
GifAnime.psd
Etape 2 : Ouvrir le fichier GifAnime.psd et cacher certains calques
Pour faire les animations nous devons travailler sur ImageReady, vous pouvez
ouvrir directement ce programme.
Dans la fenêtre des calques nous pouvons voir 8
calques au départ tous visibles et superposés:
4 resteront toujours affichés
- Fond blanc
- Calque1(fond multicolore)
- Logo 1 et Logo 2
les 4 autres (de texte) seront affichés à tour de rôle
- Service
- Ecole
- Media
- 410
Pour que les calques de texte ne se superposent pas les uns aux autres, il faut
désactiver leur affichage (sauf Service):
Fenêtre des calques > calque bulle : cliquer sur l'oeil (à gauche du calque)
pour ne plus les faire apparaître.
Etape 3 : La fenêtre animation
C'est dans la fenêtre "Animation" que nous allons réaliser notre bannière. Si
cette fenêtre n'apparaît pas allez sur le menu "Fenêtre" tout en haut de
ImageReady puis cliquez sur "Animation".
Fenêtre animation > une vignette apparaît, elle est numérotée (1) en haut à
gauche et elle est sélectionnée (contour bleu).
Etape 4 : Dupliquer une image dans l'animation
Nous allons créer une seconde image identique à la première pour pouvoir la
modifier :
Fenêtre animation > cliquer sur l'icône "Reproduit l'image sélectionnée".
une deuxième vignette identique à la première apparaît, elle est numérotée (2)
en haut à gauche et elle est sélectionnée.
Nous avons actuellement deux vignettes identiques, pour que la seconde fasse
apparaître une autre image nous allons tout simplement cacher le calque inutile
pour notre animation et faire apparaître celle désirée :
Fenêtre des calques > calque Service > cliquer sur l'oeil pour ne plus le faire
apparaître.
Fenêtre des calques > calque Ecole > cliquer à l'emplacement de l'oeil pour le
faire apparaître.
Fenêtre animation > dans la deuxième vignette nous pouvons voir que l'image a
changé et que c'est maintenant le calque Ecole qui apparaît.
Procédez de la même manière pour faire apparaître le calque Media dans une 3e
vignette de l'animation
Etape 5 : Effet de déplacement
Pour faire l'effet de l'image qui arrive par transparence et apparaît
totalement venant de la droite, nous avons besoin de deux images clés la
première servira pour faire le départ de l'animation, la seconde l'arrivée.
La première image clé étant la vignette n° 4 nous allons donc tout simplement
dupliquer 2x cette image
Fenêtre animation > une quatrième vignette identique à la troisième apparaît,
elle est numérotée (4) en haut à gauche et elle est sélectionnée. On affiche le
calque 410 et on cache les autres calques de textes puis on duplique l'image (ce
qui donne la 5e vignette qui correspondra à l'arrivée de l'animation)
Préparer la première image clé pour l'effet du
déplacement: pour faire l'effet du déplacement de la droite vers la gauche :
prendre l'outil déplacement cliquer sur le texte 410 appuyer simultanément sur
la touche SHIFT de votre clavier (le déplacement sera précis), et sans relâcher
déplacer vers la droite comme sur l'exemple.
Etape 6 : Préparer la première image clé pour l'effet de la transparence
Nous allons maintenant créer la transparence de la première image clé :
Fenêtre animation > cliquer sur la vignette n°4.
Fenêtre des calques > calque 410 > cliquer une fois sur le calque pour le
sélectionner.
Pour faire l'effet de la transparence :
Fenêtre des calques > calque 410 > rentrer la valeur 20% dans l'opacité en haut
à droite : votre image devient presque transparente.
Etape 7 : Création de nouvelles images entre les deux images clés
L'image clé n°1 qui est dans la vignette n°4 :
L'image clé n°2 qui est dans la vignette n°5 :
Nous allons demander à ImageReady de créer des images entre les deux images clés
pour rendre l'animation fluide, on peut dire qu'il interprète les déplacements
entre deux images clés :
Fenêtre animation > sélectionner la vignette n°5.
Fenêtre animation > cliquer sur l'icône "Trajectoire des images animées" > une
nouvelle fenêtre "trajectoire" s'ouvre.
Fenêtre Trajectoire > images à ajouter > saisir 3.
Fenêtre animation: l'image n°5 est maintenant n°8 (une série de 3 images se sont
intégrées entre la vignette n°4 et l'ancienne n°5 ).
Etape 8 : Lire l'animation
Nous avons maintenant finit notre animation, vous pouvez la voir en cliquant sur
l'icône "lecture", et l'arrêter par l'icône stop
il faut alors définir le temps en seconde pour une image
Pour l'instant nous avons une animation qui défile à 0 seconde, c'est à dire que
lors de l'exportation l'animation sera si rapide que nous pourrons pas bien la
voir. Nous allons donc régler le temps de pose entre chaque image pendant son
défilement, c'est à dire qu'elle paraîtra pendant tant de secondes avant l'image
suivante.
Nous voulons que nos vignettes n° 1, 2 et 3 apparaissent chacune pendant
1secondes :
Fenêtre animation > sélectionner les 3 vignettes n°1-2-3 (touche SHIFT de votre
clavier enfoncée )> cliquer dessous sur 1 sec
Fenêtre animation > vignettes n°4, 5,6 et 7 > cliquer dessous, sous n'importe
quelle des fenêtres ainsi sélectionnées, sur 0 sec > un menu apparaît avec une
série de temps en seconde > cliquer sur 0.1 seconde > les images apparaîtront
pendant 0.1 seconde dans l'animation.
Laisser la dernière image (8) s'afficher un peu
plus longtemps (5 sec)
Etape 9 : Définir le nombre de lecture en boucle
Il est également possible de définir le nombre de fois que nous désirons voir
l'animation défiler. Effectivement pour une bannière il est plus judicieux
qu'elle soit en boucle, mais pour d'autres utilisations nous pouvons aussi
décider de ne faire la lecture qu'une seule fois, ou plus...
Fenêtre animation > cliquer sous la vignette n°1 et sélectionner le nombre de
boucles désiré
Etape 10 : Enregistrer l'image
Nous allons maintenant enregistrer l'animation optimisée pour qu'elle soit la
plus légère possible. Pour l'instant nous avons une animation qui ne peut être
lu que sur ImageReady. En effet le format de ce fichier est en psd, il faut donc
absolument le convertir en gif pour qu'il soit lu automatiquement par tous les
logiciels de photo.
Pour la sauvegarde en gif : Menu Fichier > "Enregistrer une copie optimisée
sous".
Dans fenêtre "Enregistrer une copie optimisée sous"- choisissez votre répertoire
de sauvegarde.
Attention, nous avons seulement enregistré l'animation au format gif, pour
garder le fichier psd et retravailler dessus, il est important de faire la
sauvegarde --> Fichier (menu tout en haut à gauche)> Enregistrer.
Pour voir votre bannière : aller sur l'explorateur, ouvrez le répertoire de
votre fichier, cliquer deux fois sur le fichier.
Vous pourrez ensuite insérer et mettre en page la bannière dans une
page html