1. Marche à suivre pour réaliser des Gifs animés avec le

Séquence pédagogique proposée aux enseignants d’Art Visuel du CO,
utilisant les outils informatiques du labo multimédia :
Durée :
2 leçons pour le projet sur papier
2 leçons au labo informatique
Pré Requis :
Une séance d’introduction du logiciel Photoshop avant de démarrer sur les animations permet
aux élèves de mieux gérer les outils de dessin, ainsi que les calques.
Au labo informatique :
Présenter aux élèves différents Gifs animés en leur en expliquant le principe :
mouvement, durée, rythme.
En classe :
Les élèves travaillent leurs projets sur papier, en utilisant du papier-calque pour reporter les
figures dessinées de case en case.
Il est utile de leur fournir un papier où des cases sont déjà imprimées (dans l’exemple, 12
cases).
Cette première étape permet de se concentrer sur un mouvement, sur un éventuel zoom ou sur
une transformation d'objet.
Le travail de la couleur se fait ensuite directement dans Photoshop.
Retour au labo informatique :
Il faut maintenant scanner les planches de croquis en noir et blanc.
A l’aide du serveur de l’école, diffuser les projets numérisés sur chaque ordinateur.
Ensuite, chacun travaille ses images en couleurs, à l'aide des outils de peinture de Photoshop.
NB : Pour l’utilisation du serveur dans le labo multimédia, imprimer le document en annexe
intitulé « Gestion du serveur dans les ateliers multimédias ».
Conseil :
Si les Gifs animés sont destinés à une publication Internet, je conseille vivement d’utiliser la
fonction « optimiser pour le web », ceci dès le départ, une fois les planches de dessins mises
en couleurs.
En effet, en cherchant le meilleur rapport poids-qualité, on gagnera un affichage plus rapide
sur Internet.
NB : Le choix du format GIF implique des contraintes liées à sa nature, comme les aplats de
couleurs. Dans le cas d’un projet pour Internet, autant utiliser tout de suite la palette web
(216 couleurs au maximum).
Penser à diminuer également le nombre de couleurs lors de l’enregistrement, pour gagner
encore en légèreté.
______________________________________________________________________________________
Document réactualisé en février 2004
[email protected]
1
Propositions de marches à suivre pour la réalisation de Gifs animés avec le logiciel
Photoshop Elements :
1. Avec une planche de croquis numérisée.
-
-
Choisir l'outil de sélection rectangulaire pour sélectionner la première case de la
planche de dessins > Copier
Ouvrir un nouveau document (il récupère les dimensions du document en mémoire
dans le presse-papier et s’ouvre automatiquement au bon format) et l’enregistrer
sous : animation_dessin (par ex.)
Au passage, noter la taille du nouveau document animation_dessin (Largeur et
Hauteur en pixels)
> Coller (la première case).
On obtient ainsi la première image de notre future animation.
-
Aller dans la barre d'option de l'outil de sélection rectangulaire, et choisir dans le
menu déroulant Style : Taille fixe. Taper, dans les cases Largeur et Hauteur, les
dimensions en pixels de la première image.
Ainsi, toutes les images du Gif animé garderont la même taille tout au long de
l'animation.
La suite des opérations consiste à un aller-retour entre le document source (planche de dessins
numérisée) et le document cible (animation_dessin ).
-
En collant l'image 1 dans le nouveau document animation_dessin, on crée le premier
calque de la future animation ( = calque 1).
Retourner dans le document source (planche des 12 images), et sélectionner la case 2
avec l’outil de sélection rectangulaire (dont la taille, est maintenant fixe) > Copier.
Retourner dans le nouveau document animation_dessin et coller l'image 2, qui est en
mémoire. Celle-ci va alors recouvrir l’image 1, tout en créant un nouveau calque : le
calque 2.
Il ne reste alors plus qu'à aller copier dans le document source (planche des dessins) chaque
case l'une après l'autre, suivant la chronologie de l'animation, puis d'aller la coller dans le
nouveau document animation_dessin, jusqu’à obtenir finalement 12 images et donc 12
calques correspondants.
Une fois ce travail de transfert terminé, choisir la fonction Enregistrer pour le web :
-
Sélectionner le format GIF
Cocher la case Animation.
Dans la fenêtre d'animation, devenue accessible, en bas de la fenêtre de dialogue,
cocher l'option Boucle si l'on souhaite que l'animation se répète une fois jouée.
Sélectionner une Fréquence d'image en seconde dans le menu déroulant (de 0,0 à 10,0)
et Enregistrer.
Si le logiciel est bien paramétré, on peut avoir un Aperçu dans un Navigateur avant
d’enregistrer, et procéder alors à des ajustements de rythme.
______________________________________________________________________________________
Document réactualisé en février 2004
[email protected]
2
Regarder son animation enregistrée en la glissant sur l'icône d'un navigateur.
Faire plusieurs essais, avec des fréquences d'image différentes.
Il est aussi possible de répéter des images pour simuler un aller-retour, par exemple un effet
de zoom avant - zoom arrière, ou une marche avant - marche arrière, etc. ....
NB : Pour aller plus loin, utiliser Image Ready, qui permet de varier le tempo image par
image, mais a aussi d ‘autres fonctions comme l'interpolation d'images.
2. Animation réalisée entièrement dans Photoshop :
La réalisation de Gifs animés peut aussi se faire directement et intégralement dans
Photoshop, ceci sans passer par le dessin sur papier.
Néanmoins, pour un dessin de qualité, l'utilisation d'un logiciel de dessin est souhaitable.
Il est également relativement difficile de dessiner avec une souris.
La démarche du travail diffère principalement par le fait que l’on ne vient pas copier sur une
planche, des dessins qui se suivent ; il s’agit plutôt ici de dupliquer au fur et à mesure les
stades successifs de l’animation pour la compléter et la faire avancer :
Exemple de la balle :
-
-
Créer un nouveau document aux dimensions souhaitées (par ex. L 350 pixels
et H 250 pixels)
Dessiner, en haut du cadre, une balle (= Calque 1)
Dans le Menu Calque, choisir Dupliquer le calque, en ayant soin d’avoir
préalablement sélectionné le calque 1
> Nommer ce nouveau calque : Calque 2
À l’aide de l’outil de déplacement, déplacer légèrement la balle dans le cadre
À nouveau, sélectionner ce calque 2, puis Dupliquer ce calque
> Nommer ce nouveau calque : Calque 3
Procéder ainsi de suite en donnant la trajectoire souhaitée à la balle.
Jouer avec les déformations de l’objet (écrasement, étirement), ainsi qu’avec des
modifications de sa taille (diminutions ou grossissements), qui donnent une impression
de perspective, en se déplaçant du premier plan à l’arrière-plan.
Ensuite, enregistrer pour le web, comme expliqué précédemment.
Bon travail !
______________________________________________________________________________________
Document réactualisé en février 2004
[email protected]
3