Si vous vous êtes toujours demandé comment ces fabuleuses bannières
de publicité qui parsèment le web étaient animées,
cette astuce est faite pour vous.
Vous devez disposer de Photoshop et de son logiciel annexe, Image Ready.
1. Préparation des calques
Réfléchissez au mouvement que vous souhaitez créer. Décomposez
ce mouvement en plusieurs étapes.
Au besoin, faites sur papier un croquis de chacune des étapes.
![]() |
|
Ici, on souhaite créer un mouvement de rotation dans le sens des aiguilles d'une montre, pour un rectangle blanc. On a nommé les claque "1", "2", "3"... et "fond". |
2. Lancement d'Image Ready
Si, à l'installation de Photoshop, vous avez demandé une installation
complète, alors, vous devez disposer d'un logiciel annexe, Image Ready,
qui vous permettra de créer des gif animés.
Si ce n'est pas le cas, reprenez votre CD d'installation et suivez les étapes
proposées.
Lancez le logiciel, via Photoshop, en cliquant sur le bouton le plus en bas de la barre d'outils ou avec le raccourci "ctrl + shift + M".

3. Animation
Ouvrez la palette flottante "Animation", si elle n'est pas déjà ouverte, par le menu Fenêtre > Animation.
![]() |
|
![]() |
Dans l'image 2, remplacez-les par le calque "2" et le fond, et ainsi de suite pour les autres images... |
Pour une animation de type dessin animé et un mouvement fluide, on choisira 0.1 secondes. Faites-le pour chaque image. |
|
![]() |
4. Optimisez et exportez
![]() |
Vous avez l'original à gauche, et la version optimisée à droite. |
Moins votre gif comporte de couleurs, plus léger il sera. Ici, on choisit 4 couleurs, en palette Sélective. |
|
Nommez-le, et il est prêt à être intégré dans votre page HTML. |
| Vous pouvez ainsi créer des smileys animés personalisés, des bannières animées à échanger, etc... | ![]() |
