Animation d images («GIF») Atelier n 1

Transcription

1 Animation d images («GIF») Atelier n 1 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 légèrement décalé latéralement 5.- on ajoute un nouveau calque noir 6.- on répète ces 2 dernières opérations autant de fois que nécessaire (= jusqu à obtenir la rotation complète du texte) 7.- et enfin on fait un export du résultat avec le format gif qui convient 0.- Préparation du poste de travail Lancement de GIMP Maximiser la fenêtre (si ce n est déjà le cas) : icône «Agrandir» en haut à droite Ouverture de la boîte à outils Menu «Fenêtres / Boîte à outils» (si ce n est déjà fait) Ouverture la fenêtre des calques Menu «Fenêtres / Fenêtres ancrables / Calques» (si ce n est déjà fait) Initialisation des couleurs Choix des couleurs : dans la fenêtre «Boîte à outils», choisir la couleur de Premier Plan désirée : dans notre cas blanc valider : bouton «Valider» choisir la couleur d arrière Plan désirée : dans notre cas noir Page 1

2 1.- Création du texte Création du fond d image 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 400 pixels), tant pour des raisons de temps de transmission que pour des raisons de comptabilité avec l ensemble des logiciels de navigation Internet) Création du texte 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 (icône sous le mot «Texte») pour notre usage ici, une police grasse et sans sérif conviendrait bien, par exemple Action Force la Taille : adaptée à la longueur du texte, par exemple ici 46 cliquer dans l image en haut à gauche de l endroit désiré pour le texte taper le texte désiré, par exemple ici...joyeux NOEL...JOYEUX NOEL... (2 fois la même chose, pour pouvoir obtenir la continuité de l effet «tournant») ; il est donc parfaitement normal (et même désiré!) que le texte déborde d une longueur égale au calque de base. si on doit modifier un quelconque des paramètres : 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 Ajustement du canevas Le texte débordant du canevas initial, il faut ajuster celui-ci pour pouvoir voir la totalité du texte : «Menu Image», sélectionner «Image/ajuster le canevas aux calques» Sauvegarde de l espace de travail Menu «Fichier / Enregistrer» Nom: par exemple «Texte clignotant.xcf» bouton «Enregistrer» Page 2

3 2.- Confection de l effet «Néon» Initialisation de l effet 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 Simplification des calques 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» Renommage du calque Dans la fenêtre «Calques», double clic sur le nom «Arrière-plan» taper un nom pertinent, par exemple «Néon bleu 1» Ajustement du canevas La confection de l effet Néon a modifié la taille du calque ; pour prendre ce changement en compte, dans le «Menu Image», sélectionner «Image/ajuster le canevas aux calques» Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») 3.- Confection du premier calque noir Création du calque noir 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 : les mêmes qu au départ, à savoir o Largeur : 400 pixels o Hauteur : 100 pixels Type de remplissage : Couleur d arrière plan bouton «Valider» Visualisation de l animation 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 Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») Page 3

4 4.- Confection d un premier calque «néon» décalé Duplication du calque initial Dans la fenêtre «Calques», activer le calque «Néon bleu 1» (clic gauche sur la ligne correspondante) double clic sur le nom «Copie de Néon bleu 1» taper un nom pertinent, par exemple «Néon bleu 2» Mettre ce calque en tête de liste (clic gauche maintenu, puis glisser, puis lâcher) Déplacement du nouveau calque Dans la fenêtre «Boîte à outils» sélectionner l outil «Déplacement» cliquer maintenu n importe où dans la partie gauche du texte noter sur la règle supérieure la position du curseur déplacer la souris (donc l image!) d une valeur que l on mémorisera, par exemple ici 4 graduations Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») 5.- Ajout d un second calque noir Duplication du premier calque noir Dans la fenêtre «Calques», activer le calque «Noir total 1» (clic gauche sur la ligne correspondante) mettre ce calque en tête de pile (clic gauche maintenu, puis glisser, puis lâcher) double clic sur le nom «Copie de Noir total 1» taper un nom pertinent, par exemple «Noir total 2» Visualisation de l animation 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 Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») Page 4

5 6.- Confection d un second calque «néon» décalé Duplication du calque «néon» précédent Dans la fenêtre «Calques», activer le calque «Néon bleu 2» (clic gauche sur la ligne correspondante) double clic sur le nom «Copie de Néon bleu 2» taper un nom pertinent, par exemple «Néon bleu 3» Mettre ce calque en tête de liste (clic gauche maintenu, puis glisser, puis lâcher) Déplacement du nouveau calque Dans la fenêtre «Boîte à outils» sélectionner l outil «Déplacement» cliquer maintenu n importe où dans la partie gauche du texte noter sur la règle supérieure la position du curseur déplacer la souris (donc l image!) de la même valeur qu au 4.2. ( 4 graduations) Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») 7.- Ajout du calque noir suivant Duplication du premier calque noir Dans la fenêtre «Calques», activer le calque «Noir total 2» (clic gauche sur la ligne correspondante) mettre ce calque en tête de pile (clic gauche maintenu, puis glisser, puis lâcher) double clic sur le nom «Copie de Noir total 2» taper un nom pertinent, par exemple «Noir total 3» Visualisation de l animation 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 Sauvegarder l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») Page 5

6 8.- Confection des calques suivants (4 à 11) Duplication du calque «néon» précédent Duplication du calque «noir total» précédent 9.- «Rognage» final Répéter les opérations du 6 en incrémentant à chaque fois les numéros des calques Répéter les opérations du 7 en incrémentant à chaque fois les numéros des calques Cadrage final Dans la fenêtre «Boîte à outils», sélectionner l outil «Découpage» (cutter), options : «Découpage» o cocher «Fixé» o taper les proportions, par exemple 400:100 faire un premier clic gauche maintenu dans le coin en haut à gauche du cadrage désiré sans relâcher le clic, étirer la zone en descendant en bas à droite du cadrage désiré relâcher alors le clic on peut alors ajuster le cadre en «tirant» sur les différentes «poignées» lorsqu on est satisfait du résultat, valider en faisant un double clic n importe où dans le cadre Page 6

7 10.- Finalisation du fichier de type «gif» Enregistrement du fichier 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 Visualisation du fichier 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» Sauvegarder et fermer l espace de travail CTRL S (ou bien Menu «Fichier / Enregistrer») Fermer l espace de travail : Menu «Fichier / Close View» FIN DE CE PREMIER ATELIER SUR CE SUJET! Libre à vous maintenant de rajouter d autres couleurs etc. Page 7