|
|
 Réalisez
un bandeau animé |
|
|
|
 |
Avant-propos |
 |
Les images animées ne sont qu'une succession d'images fixes,
chacune placée dans un calque. L'animation se fait par l'affichage
successif des calques désirés selon une vitesse déterminée.
Pour chaque changement dans l'animation il suffira de rajouter
des calques manuellement ou automatiquement. |
|
|
Informations |
|
Logiciel : Photoshop & Image Ready
Niveau :  
Initié
Auteur : Jabric [Imerege]
|
|
Les étapes |
|
|
[Etape 1]
Commencez par créer un nouveau document d'une taille de 468px
de large et 60px de haut, en transparent et d'une résolution
de 72 px/inch.
Crééz le fond de votre bannière, soit en récupérant un fond
libre de droits (sur Freegaïa par
exemple), soit en le construisant vous-même.
Sur le même layer (calque), ajoutez un logo que vous aurez
réalisé avec vos petits doigts et votre imagination, si vous
souhaitez conserver un élément récurent.
[Etape 2]
Nous allons maintenant animer cette bannière. Notre première
animation consistera à afficher successivement différents
mots. Le texte n'est qu'un exemple, il peut bien évidemment
être remplacé par des images...
Créez un nouveau calque, et écrivez y un mot grâce à l'outils
texte ("imagination" dans mon exemple). Répétez l'opération
pour chaque mot désiré.
Une fois que tous vos calques sont prêts, envoyez votre document
sur Image Ready en cliquant sur le bouton "passer à image
ready" situé en bas de la palette outils (ou: Ctrl-Maj-M)
[Etape 3]
Vérifiez tout d'abord que la palette "animation" est bien
visible dans Image Ready. Si ce n'est pas le cas, allez dans
Fenêtre>Afficher Animation.
Le principe de l'animation est assez simple: chaque vignette
visible dans la palette d'animation représente une image constituant
la future animation. Pour le moment, il n'y en a qu'une.
En jouant avec la visibilité des différents calques (l'oeil
à côté de chaque calque), faites apparaitre les calques que
vous voulez garder. Dans mon exemple, j'ai décidé de ne garder
visible que le calque de fond, le logo et le calque texte
"imagination". Tous les autres calques ne sont pas visibles.
Je veux maintenant que le mot "imagination" cède la place
au mot "créativité". Dans la palette des calques, je vais
donc créer une nouvelle image:
Une seconde vignette apparait alors dans la palette d'animation,
totalement identique à l'image précédente. Il va alors suffire
de rendre invisible le calque texte "imagination" et visible
le calque "créativité".
|
|
[Etape 3 suite]
Continuez ces opérations autant de fois que nécessaire.
Une fois fini, il reste un dernier détails: le temps de séparation
entre chaque image. 2 solutions s'offrent à vous: opérer vignette
par vignette ou selectionner plusieurs vignettes à la fois
dans la palette animation (clic sur une vignette, puis clic
sur une autre vignette avec la touche contrôle enfoncé pour
selectionner l'autre vignette, ou la touche shift enfoncée
pour sélectionner également les vignettes intermédiaires).
Dans les 2 cas, le temps d'affichage des vignettes sélectionnées
se change juste en dessous de la vignette:
[Etape 4]
Un peu de mouvement !
Photoshop peut également générer des animations plus complexes
de façon automatique. C'est à dire qu'il crée les nouvelles
images automatiquement selon les besoins.
J'ai décidé ici de faire diminuer progressivement l'opacité
du texte final de ma bannière. Le principe aurait été le même
si je voulais créer un mouvement pour faire sortir ce texte
par la droite de ma bannière.
Je vais partir de ma dernière image créée, et dupliquer la
vignette dans la palette d'animation, comme nous l'avons vu
précedemment. Une image totalement identique est donc créée.
Dans la palette des calques, en étant positionné sur la vignette
que je viens de créer, je vais faire baisser l'opacité des
calques concernés à 0.
C'est à ce moment que la magie opère: il suffit de cliquer
sur le bouton "trajectoire des images animées" de la palette
d'animation.
Le plus dur est fait: il ne reste qu'à choisir le nombre d'image
souhaitées pour qu'Image Ready crée ces interpolations de
mouvement, ces images intermédiaires pour nous.
Très rapide et très puissant donc!
Attention cependant : mettre beaucoup d'images intermédiaires
rendra le mouvement fluide, mais alourdira considérablement
le poids de la bannière.
Dans mon exemple j'ai choisi 5 images intermédiaires à 0,1
seconde.
Voilà, votre bannière animée est terminée !
Il vous suffit maintenant de l'enregistrer en .gif et le tour
est joué. Utilisez la fonction "enregistrer une copie optimisée
sous" pour le faire.
A vous maintenant de peaufiner votre bannière personnelle.
Quelques conseils précieux sont disponibles ici : Dossier
bandeau
Freegaia vous offre plusieurs centaines de bandeaux vierges ici ! |
[ La bannière réalisée ]
|
|
| |
|
|
cliquez ici pour imprimer la page
