Animation d`images (« GIF - accueil pays de vie accueille

Animation d’images (« GIF »)
Le principe de l’exercice:
L’objectif est d’apprendre à animer (un peu !) des images destinées à être ouvertes sur le web : textes, objets, ou personnages, aboutissant à la confection de fichiers
à extension «.gif » (si on veut avoir l’être d’être « dans le coup » du jargon Internet, on parlera de « blinkies » !), fichiers pouvant être intégrés dans des courriers
électroniques ou des sites Internet.
Ceci s’obtient essentiellement par l’enchaînement d’une série de calques.
Un premier exercice permet d’apprendre à fabriquer un texte (et donc à nous familiariser avec l’outil correspondant), texte auquel nous allons affecter un effet
« néon clignotant » (pour ce premier exercice, on n’utilise pas de photo en entrée) :






1.- on va rédiger et mettre en page le texte
2.- on va lui donner un effet « néon »
3.- on va ensuite créer un second calque tout noir, correspondant à l’extinction de ce « néon »
4.- on confectionne ensuite un second calque à effet « néon », mais d’une couleur différente
5.- on ajoute un nouveau calque noir
6.- et enfin on fait un export du résultat avec le format qui convient
0.- Préparation du poste de travail
Lancer GIMP et maximiser la fenêtre
(si ce n’est déjà fait)
Ouvrir la boîte à outils
(si ce n’est déjà fait)
Ouvrir la fenêtre des calques
(si ce n’est déjà fait)
Menu « Fenêtres / Nouvelle Boîte à outils »
Menu « Fenêtres / Fenêtres ancrables / Calques »
Page 1
1.- Création du texte
1.1.- Création du fond d’image
1.2.- Création du texte
1.3.- Ajustement de la taille du calque
1.4.- Sauvegarde de l’espace de travail
Menu « Fichier / Nouvelle image »
 Taille de l’image : entrer les valeurs souhaitées pour le résultat final, par exemple ici, pour un petit
texte,
 Largeur : 400 pixels
 Hauteur : 100 pixels
 bouton « Valider »
Note : d’une façon générale, les dimensions des images des fichiers animés sont petites (si possible au maximum
650 x 800 pixels), tant pour des raisons de temps de transmission que pour des raisons de comptabilité avec
l’ensemble des logiciels de navigation Internet).
Dans la fenêtre « Boîte à outils »
 sélectionner l’outil « Texte »
Note : cet outil est d’un maniement assez piégeux et désagréable, car, dès qu’on clique malencontreusement en
dehors de la zone du texte en cours, il se met en position de créer un nouveau texte. Une des rares faiblesses de
GIMP…
 dans la fenêtre « Option des outils », choisir la police puis
 cliquer dans l’image en haut à gauche de l’endroit désiré pour le texte
 taper le texte désiré
 sélectionner la totalité du texte (clic gauche maintenu à une des extrémités du texte, tout en
déplaçant le curseur vers l’autre extrémité) – comme évoqué plus haut, ne surtout pas cliquer en
dehors de la zone du texte !
 régler la taille de la police dans la mini-fenêtre de dialogue au-dessus
 ajuster la position du texte en utilisant les « poignées »
 sortir de l’outil en appuyant sur Echap
Menu « Calques »
 sélectionner l’outil « Calque aux dimensions de l’image »
Menu « Fichier / Enregistrer »
 Nom: par exemple « Texte clignotant.xcf »
 bouton « Enregistrer »
Page 2
2.- Confection de l’effet « Néon »
2.1.- Initialisation de l’effet
2.2.- Simplification des calques
2.3.- Renommage du calque
2.4.- Sauvegarder l’espace de travail
Menu « Filtres / Alpha vers logo / Néon »
 dans la boîte de dialogue qui s’ouvre, tester les différentes options, par exemple
 Taille de l’effet : 10 pixels
 Couleur d’arrière-plan : noir (ou toute autre, au goût de chacun !)
 Couleur de la lueur : bleu pâle (ou toute autre, au goût de chacun !)
 valider : bouton « Valider »
Note : suivant la configuration des PC, il est possible que le script se lance en arrière plan et on a l’impression
que rien ne se passe ; pour accéder au script, il suffit alors de changer de fenêtre par un avec ALT Tabulation
Clic droit dans la fenêtre « Calques » sur le calque en cours
 sélectionner « Fusionner les calques visibles »
 dans la fenêtre qui s’ouvre, sélectionner (si ce n’est déjà le cas) « Etendu autant que
nécessaire»)
 valider : bouton « Fusion »
Dans la fenêtre « Calques »,
 double clic sur le nom « Arrière-plan »
 taper un nom pertinent, par exemple « Néon bleu »
 et valider en appuyant sur ENTREE !!!
CTRL S (ou bien Menu « Fichier / Enregistrer »)
3.- Confection du calque noir
3.1.- Préparation des couleurs
3.2.- Création du calque noir
3.3.- Visualisation de l’animation
3.4.- Sauvegarder l’espace de travail
Dans la fenêtre « Boîte à outils », permuter (clic gauche sur la flèche incurvée) les couleurs de premier plan et
d’arrière plan :
 choisir la Couleur de premier Plan : blanche, et Couleur d’arrière Plan : noire
Menu « Calques / Nouveau Calque »
 dans la boîte de dialogue qui s’ouvre,
 Nom du calque : donner un nom pertinent au calque, par exemple « Noir total »
 Hauteur et Largeur : inchangées
 Type de remplissage : Couleur d’arrière plan
 valider : bouton « Valider »
Menu « Filtres / Animation / Rejouer l’animation »
 dans la boîte de dialogue qui s’ouvre, appuyer sur le bouton « Lire »
 après examen, fermer cette fenêtre
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Page 3
4.- Confection d’un second calque « néon » d’une autre couleur
4.1.- Duplication du calque initial
4.2.- Modification de la couleur du néon
4.3.- Sauvegarder l’espace de travail
Dans la fenêtre « Calques », activer le calque « Néon bleu » (clic gauche sur la ligne correspondante)
Puis clic droit dans la même fenêtre « Calques »,
 sélectionner « Dupliquer le calque »
 donner un nom adéquat au calque de copie qui vient d’être créé :
 double clic sur le nom « Copie de … etc. »
 taper un nom pertinent, par exemple « Néon jaune »
 et valider en appuyant sur ENTREE !!!
Mettre ce calque en tête de liste (clic gauche maintenu, puis glisser, puis lâcher)
Menu « Couleur / Teinte-Saturation »
 dans la boîte de dialogue qui s’ouvre, jouer avec les curseurs jusqu’à obtenir la nouvelle teinte et la
luminosité souhaitées
CTRL S (ou bien Menu « Fichier / Enregistrer »)
5.- Ajout d’un second calque noir
5.1.- Duplication du premier calque noir
5.2.- Visualisation de l’animation
5.3.- Sauvegarder l’espace de travail
Dans la fenêtre « Calques », activer le calque « Noir total » (clic gauche sur la ligne correspondante)
Puis clic droit dans la même fenêtre « Calques »,
 sélectionner « Dupliquer le calque »
 Mettre ce calque en tête de liste (clic gauche maintenu, puis glisser, puis lâcher)
Menu « Filtres / Animation / Rejouer l’animation »
 dans la boîte de dialogue qui s’ouvre, appuyer sur le bouton « Lire »
 après examen, fermer cette fenêtre
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Page 4
6.- Finalisation du fichier de type « gif »
6.1.- Enregistrement du fichier
6.2.- Visualisation du fichier
6.3.- Sauvegarder et fermer l’espace de
travail
FIN DE CE PREMIER
EXERCICE !
Menu « Fichier / Exporter »
 Nom: par exemple « Texte clignotant.gif » - Attention à bien mettre l’extension .gif
 valider : bouton Exporter
 dans la boîte de dialogue qui s’ouvre :
 cocher « As animation » puis « Loop forever » (GIMP anglais) ou « Boucle infinie » (GIMP fr.)
 choisir le délai de passage d’un calque à l’autre, par exemple 200 millisecondes
 cocher « use delay entered etc…. » (GIMP anglais) ou « utiliser le délai indiqué etc. » (GIMP fr.)
 valider : bouton Exporter
A l’aide de l’explorateur Windows, ouvrir le fichier ainsi exporté.
Normalement, il va s’ouvrir dans une page Internet.
Si ce n’est pas le cas, il faut corriger le programme par défaut d’ouverture du fichier :
 bouton « Démarrer » puis
 Programmes par défaut / Associer un type de fichier ou un protocole à un programme
 cliquer sur la ligne .gif
 appuyer sur le bouton « Changer le programme… »
 Sélectionner l’explorateur Internet utilisé sur le PC
 terminer : bouton « Fermer »
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Fermer l’espace de travail : Menu « Fichier / Close View »
Libre à vous maintenant de rajouter d’autres couleurs etc.
Page 5
Le second exercice regarde anime une photo à l’aide de filtres d’effets artistiques (photo de travail : « Cygne.jpg »)




1.- on va charger puis détourer très soigneusement la photo pour séparer les parties destinées à être animées de celles destinées à rester fixes
2.- on va ensuite animer l’extérieur de l’image
3.- on va corriger quelques effets indésirables générés par le Filtres de mise en mouvement
4.- et enfin on fait un export du résultat avec le format qui convient.
1.- Détourage de l’image
1.1.- Chargement de l’image
1.2.- Détourage de l’image
1.3- Inversion de la sélection
1.4.- Sauvegarde de l’espace de travail
Menu « Fichier / Ouvrir »
 rechercher l’image « Cygne.jpg »)
 valider : bouton « Ouvrir »
Dans la fenêtre « Boîte à outils »
 sélectionner l’outil « de sélection à main levée » (outil d’usage fastidieux, mais permettant un
détourage de grande précision !)
 cocher (si ce n’est déjà fait) l’option « Lissage »
 cocher l’option « Adoucir les bords »
 choisir un rayon d’adoucissement petit, par exemple 5 pixels
 cliquer successivement tous les points du pourtour, pour revenir au point d’origine (ne pas hésiter à
zoomer fortement (CTRL molette ou bien outil « Zoom » ou bien touche « + »)
On vient ci-dessus de sélectionner l’intérieur de l’image, mais en fait, c’est l’extérieur que l’on veut animer :
 Menu « Sélection / Inverser »
Menu « Fichier / Enregistrer »
 Nom: par exemple « Cygne.xcf »
 bouton « Enregistrer »
Page 6
2.- Animation de l’extérieur de l’image
2.1.- Initialisation de l’effet
2.2.- Visualisation de l’animation
2.3.- Sauvegarder l’espace de travail
Menu « Filtres / Animation / Vagues »
 dans la boîte de dialogue qui s’ouvre, tester les différentes options, par exemple
 Amplitude : 10 pixels
 Longueur d’ondes : 20 pixels
 Nombre d’images : 6
 valider : bouton « Valider »
Afficher le fenêtre de résultat qui vient d’être crée automatiquement par GIMP (normalement, GIMP ouvre une
nouvelle fenêtre pour afficher le résultat de la transformation ; il y a alors lieu de la maximiser ; si cette nouvelle
fenêtre n’apparaît pas d’office, il faut l’afficher en allant dans le menu « Fenêtre », ligne « [Sans titre-etc.] », ou
bien en jouant avec ALT Tabulation)
Menu « Filtres / Animation / Rejouer l’animation »
 dans la boîte de dialogue qui s’ouvre, appuyer sur le bouton « Lire »
 après examen, fermer cette fenêtre
Si on est globalement satisfait, sauvegarder (CTRL S ou bien Menu « Fichier / Enregistrer »), sinon fermer cette
fenêtre sans la sauvegarder, et reprendre en 2.1
Page 7
3.- Correction des « effets de bord »
Le Filtres a créé des vagues sur l’ensemble du pourtour de l’image centrale, hors, dans la réalité, il est impossible que les bords supérieurs se reflètent dans
l’eau. Il y a donc lieu de corriger cela manuellement sur chacune des images qui ont été générées (cf. par exemple les bords du cou du cygne…)!
3.1.- Sélection de la première image
3.2.- Correction de la première image
3.3.- Sélection de la seconde image
3.4.- Correction de la seconde image
3.5.- Visualisation de contrôle de l’animation
3.6.- Sauvegarder l’espace de travail
Dans la fenêtre « Calques »,
 désactiver les pictogrammes « œil » dans la totalité des calques sauf le plus bas
 activer ce premier calque (clic gauche sur la ligne correspondante)
Dans la fenêtre « Boîte à outils »
 sélectionner l’outil « de clonage »
 Taille : assez petite, par exemple 20 pixels
 Alignement : « Aligné »
Corriger successivement toutes les aberrations sur le pourtour de l’image centrale, en choisissant à chaque fois
des points « Source » pertinents et adaptés au contexte
Dans la fenêtre « Calques »,
 activer le pictogramme « œil » du second calque (en partant par le bas)
 activer ce calque (clic gauche sur la ligne correspondante)
Idem 3.2 : sélectionner l’outil « de clonage », puis corriger successivement toutes les aberrations sur le
pourtour de l’image centrale
Répéter les opérations 3.3 et 3.4 successivement pour chacun des calques supérieurs
Menu « Filtres / Animation / Rejouer l’animation »
 dans la boîte de dialogue qui s’ouvre, appuyer sur le bouton « Lire »
 Vérifier qu’il n’y a plus d’aberrations
 après examen, fermer cette fenêtre
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Page 8
4.- Finalisation du fichier de type « gif »
4.1.- Enregistrement du fichier
4.2.- Visualisation du fichier
4.3.- Sauvegarder et fermer l’espace de
travail
Menu « Fichier / Exporter »
 Nom: par exemple « Cygne animé.gif » - Attention à bien mettre l’extension .gif
 valider : bouton Exporter
 dans la boîte de dialogue qui s’ouvre :
 cocher « As animation » puis « Loop forever » (GIMP anglais) ou « Boucle infinie » (GIMP fr.)
 choisir le délai de passage d’un calque à l’autre, par exemple 500 millisecondes
 cocher « use delay entered etc…. » (GIMP anglais) ou « utiliser le délai indiqué etc. » (GIMP fr.)
 valider : bouton Exporter
A l’aide de l’explorateur Windows, ouvrir le fichier ainsi exporté
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Fermer l’espace de travail : Menu « Fichier / Close View »
FIN DE CE SECOND
EXERCICE !
Page 9
Enfin le troisième exercice combine les possibilités de placage d’une photo sur une surface et d’animation de l’image résultante (photo de travail : « Cygne.jpg »)
 1.- on va préparer puis charger la (ou les) image(s) à coller
 2, 3, et 4.- on va fabriquer une série de calques des vues successives de l’objet pendant sa pseudo-rotation
 5 et 6.- et enfin on fait un export du résultat avec le format qui convient
1.- Préparation de la (ou les) image(s) à plaquer sur l’objet
1.1.- Choix de la couleur des faces sans
image
1.2.- Création et chargement de l’image
1.3.- Sauvegarde de l’espace de travail
Dans la fenêtre « Boîte à outils » clic gauche sur le pavé de couleur d’Arrière Plan ; dans la fenêtre qui s’ouvre :
 sélectionner la couleur désirée pour les faces du cube qui ne comporteront pas d’image (en
général, le dessus et le dessous…)
 quand on est satisfait, bouton « Valider »
Création de l’espace :
 Menu « Fichier / Nouvelle Image » ; dans la boîte de dialogue qui s’ouvre :
 Largeur = 500 pixels
 Hauteur = 500 pixels
 valider : bouton « Valider »
Chargement de l’image :
 Menu « Fichier / Ouvrir en tant que calques »
 rechercher l’image « Cygne.jpg »)
 valider : bouton « Ouvrir »
Ajustement de la taille du calque :
 Menu « Calques / Calque aux dimensions de l’image »
Renommage des calques :
 dans la fenêtre « Calques », double clic gauche sur le nom du calque « Arrière-plan »
 donner un nom adéquat, par exemple « Dessus et dessous »
 et valider en appuyant sur ENTREE !!!
 idem pour le calque « Cygne », donner un nom adéquat, par exemple « Faces »
 et valider en appuyant sur ENTREE !!!
Menu « Fichier / Enregistrer »
 Nom: par exemple « Cube.xcf »
 bouton « Enregistrer »
Page 10
2.- Création du premier calque de mouvement
2.1.- Choix de la couleur d’arrière-plan du
cube
2.2.- Initialisation de l’effet
2.3.- Ajustement du calque
2.4.- Sauvegarder l’espace de travail
Dans la fenêtre « Boîte à outils » clic gauche sur le pavé de couleur d’Arrière Plan ; dans la fenêtre qui s’ouvre :
 sélectionner la couleur désirée
 quand on est satisfait, bouton « Valider »
Menu « Filtres / Mappage / Plaquer sur un objet »
 dans la boîte de dialogue qui s’ouvre, régler les différentes options :
 si nécessaire, décocher la case « Afficher la grille »
 si nécessaire, cocher la case « Mise à jour en direct de l’aperçu » ; ensuite :
 dans l’onglet « Options » de cette fenêtre,
o renseigner le champ « Plaquer sur » : « Parallélépipède rectangle (boîte) »
o cocher la case « Arrière-plan transparent »
 dans l’onglet « Orientation », par exemple
o Position : X = 0.50000 ; Y = 0.50000 ; Z = 0.00000
o Rotation : X = 15.0 ; Y = 10.0 ; Z = 0. 0
 dans l’onglet « Boîte »,
o sélectionner pour les champs « Avant », « Arrière », « Gauche », et « Droite » le nom du
calque « …/Faces… »
o sélectionner pour les champs « Dessus » et « Bas » le nom du calque « …/Dessus et
Dessous… »
 valider : bouton « Valider »
Clic droit dans la fenêtre « Calques » sur le calque qui vient d’être créé
 sélectionner « Supprimer le canal alpha »
CTRL S ou bien Menu « Fichier / Enregistrer »
3.- Création du second calque de mouvement
3.1.- Application de l’effet
3.2.- Ajustement du calque
3.3.- Sauvegarder l’espace de travail
Menu « Filtres / Mappage / Plaquer sur un objet »
 dans la boîte de dialogue qui s’ouvre, régler les différentes options :
 dans l’onglet « Orientation », incrémenter la valeur de la rotation Y :
o Rotation : X = 15.0; Y = 20.0 ; Z = 0. 0
 valider : bouton « Valider »
Clic droit dans la fenêtre « Calques » sur le calque qui vient d’être créé
 sélectionner « Supprimer le canal alpha »
CTRL S ou bien Menu « Fichier / Enregistrer »
Page 11
4.- Création des calques de mouvement suivants
4.1.- Application de l’effet
4.2.- Sauvegarder l’espace de travail
Répéter les opérations 3.12 et 3.2 en augmentant à chaque fois de 10 ° la valeur de la Rotation Y dans l’onglet
« Orientation » :
o Rotation : Y = 30.0 puis 40, 50, 60, 70, 80, et enfin 90
CTRL S ou bien Menu « Fichier / Enregistrer »
5.- Finalisation et visualisation
5.1.- Suppression des calques de travail
5.2.- Visualisation de contrôle de l’animation
5.3.- Sauvegarder l’espace de travail
Clic droit dans la fenêtre « Calques » sur le calque « Faces »
 sélectionner « Supprimer le calque »
Idem pour le calque « Dessus et Dessous »
Menu « Filtres / Animation / Rejouer l’animation »
 dans la boîte de dialogue qui s’ouvre, appuyer sur le bouton « Lire »
 après examen, fermer cette fenêtre
CTRL S (ou bien Menu « Fichier / Enregistrer »)
6.- Finalisation du fichier de type « GIF »
6.1.- Enregistrement du fichier
6.2.- Visualisation du fichier
6.3.- Sauvegarder et fermer l’espace de
travail
Menu « Fichier / Exporter »
 Nom: par exemple « Cube animé.gif » - Attention à bien mettre l’extension .gif
 valider : bouton Enregistrer
 dans la boîte de dialogue qui s’ouvre :
 cocher « As animation » puis « Loop forever » (GIMP anglais) ou « Boucle infinie » (GIMP fr.)
 choisir le délai de passage d’un calque à l’autre, par exemple 100 millisecondes
 cocher « use delay entered etc…. » (GIMP anglais) ou « utiliser le délai indiqué etc. » (GIMP fr.)
 valider : bouton Exporter
A l’aide de l’explorateur Windows, ouvrir le fichier ainsi exporté
CTRL S (ou bien Menu « Fichier / Enregistrer »)
Fermer l’espace de travail : Menu « Fichier / Close View »
FIN DE CE TROISIEME
EXERCICE !
Libre à vous maintenant de refaire cela avec des photos différentes sur chacune de faces, ou bien de fluidiser
ou ralentir le mouvement en incrémentant la rotation avec des angles plus faibles, ou bien de compliquer le
mouvement en faisant tourner selon plusieurs axes etc. etc.
Page 12