Ecrivez à l'auteur

Création et édition d'animations avec GIMP

Résumé: Dans notre série relative à GIMP, voici de simples techniques de création et d'édition d'animations avec Gimp.

Bonjour et bienvenue pour cette troisième partie de l'initiation à GIMP de Linux Focus . Cette fois, je ne me baserai pas sur les travaux de Manuel, mais j'utiliserai GIMP en solo. J'aimerais vous montrer quelques unes des possibilités qu'offre GIMP en matière d'animation. Elles ne sont pas trop complexes, mais elles sont quand même assez bonnes pour être utiles.

Tout d'abord, qu'est-ce qu'une animation? Animation vient du latin anima, qui signifie vie ou âme. Une animation, contrairement à une image fixe, semble jouir d'une vie propre. Puisqu'une des caractéristiques communes de la plupart des êtres vivants est le mouvement, quel meilleur moyen de donner l'impression de vie à une image que de la faire bouger?

Pour ceux qui ne sont pas au fait de la chose, la méthode traditionnelle utilisée par les artistes pour faire bouger leurs images est de créer plusieurs images. Chacune d'entre elles représente un instantané de la scène, appelé frame, et ces frames sont classés en ordre chronologique du plus ancien au plus récent. L'animation est simplement une projection successive de ces frames. Elle peut sembler très réelle si la vitesse utilisée est correcte. Cette vitesse est appelée "frame rate" et est mesurée en frames par seconde. Voyons donc ce que GIMP nous propose en matière d'animation.

Je crois que dans les deux premières parties de l'initiation à GIMP de Linux Focus, nous avons parlé des fonctions "Layers" de GIMP. Nous pouvons faire bien des choses avec des layers et, que vous le croyiez ou non, c'est cette fonction "Layers" qui va jouer un rôle primordial dans la création de notre animation. En bref, chaque layer jouera le rôle de frame distinct et ceux-ci seront affichés de bas en haut grâce à l'option "Animation Playback" du menu Filter. Alors, allons-y et créons un petit exemple d'animation.

Il se fait que ce soir, je suis d'humeur à casser un peu de sucre sur le dos de Microsoft. Si cela vous dérange, veuillez accepter mes excuses... mais cette animation n'est pas un simple amusement de gamin, elle doit vous permettre de voir ce qu'on peut faire. Quoi qu'il en soit, je désire faire une petite animation sur Microsoft. La première chose à faire est donc de créer un logo Microsoft en noir sur fond blanc. La police la plus approchante de celle utilisée par Microsoft est "Eras". Il n'y a pas moyen de l'incliner, mais si on y arrivait, je parie qu'on serait très proche du logo de Microsoft. Mais c'est assez bon pour notre exemple. Nous ne cherchons pas la perfection à ce point-là.

Maintenant, je vais faire en sorte que le logo de Microsoft tombe vers le bas de l'image. J'ouvre la boîte de dialogue Layers & Channels et je clique sur le bouton Duplicate Layer, qui est le bouton ayant pour icône deux feuilles de papier l'une sur l'autre. Ceci a pour effet de créer une copie du Layer et je vais modifier légèrement cette copie, qui est le layer supérieur. Je clique sur ce layer pour être certain qu'il est actif puis je choisis l'outil Rectangular Selection dans la boîte à outils. Je vais maintenant créer une boîte de sélection autour de la dernière lettre du logo, qui est un "t". Après l'avoir sélectionné et obtenu la bordure de sélection animée (qui ressemble à des fourmis en train de marcher), si l'on place le pointeur dans la région sélectionnée, il se transforme en croix quadri-directionnelle. Ceci signifie que l'on peut cliquer sur cette région et la tirer pour la déplacer. Je veux la faire descendre d'environ 5 pixels. Je tape ensuite Ctrl+H pour ancrer la sélection à l'endroit où elle se trouve maintenant.

Je retourne ensuite à la boîte de dialogue Layers et je duplique le layer supérieur pour en obtenir un troisième. Je clique sur ce nouveau layer pour l'activer. Je m'assure que l'outil Rectangular Selection est bien sélectionné et je retourne dans l'image. Je sélectionne maintenant les deux dernières lettres du logo, soit "f" et "t" et je déplace cette nouvelle sélection d'environ 5 pixels.

C'est peut-être difficile à voir sur cet exemple, mais les lettres commencent à descendre doucement et régulièrement. Je vais continuer à dupliquer chaque layer supérieur, à activer le nouveau layer, à sélectionner une lettre supplémentaire à chaque fois et à déplacer la sélection d'environ 5 pixels vers le bas. Je veux répéter cela jusqu'à ce que le logo ait disparu.

Faites attention à certains problèmes que vous pourriez rencontrer. Il m'a semblé plus facile de rendre invisibles les layers inférieurs que j'avais terminés pendant mon travail sur les layers supérieurs. Pour cela, il faut cliquer sur l'icône représentant un oeil dans la boîte de dialogue Layer, ce qui a pour effet de "fermer" cet oeil pour ce layer. Il faut également tenir compte du fait que lorsqu'on déplace une sélection, la région qu'elle laisse derrière elle n'est plus couverte et peut devenir transparente. Dans ce cas, il faut sélectionner le crayon ou le pinceau pour peindre cette zone laissée libre.

Après tout cela, je me suis retrouvé avec 15 frames au total. Je les ai renommés et je leur ai attribué un numéro en double-cliquant sur le texte de chaque layer. Voici une autre astuce. On peut indiquer, dans le titre de chaque layer, le temps d'affichage en millisecondes entre parenthèses et le filtre Animation Playback montrera le frame pendant le temps indiqué. C'est ainsi que l'on peut contrôler le déroulement de l'animation frame par frame. L'intervalle entre les frames ne doit pas être constant, mais il peut changer à chaque fois. Dans mon exemple, j'ai utilisé un délai de 50 millisecondes pour chaque frame.

On a donc maintenant une belle petite animation représentant la chute de Microsoft et on désire l'enregistrer pour l'afficher sur une page Web. GIMP permet de sauver cette animation au format GIF animé, ce qui permettra aux browsers web d'éprouver autant de satifaction en la regardant qu'on en a eue en la créant. Avant de l'enregistrer au format GIF, il faut penser à vérifer que l'image utilise des couleurs indexées et non des couleurs RGB. Le titre de la fenêtre d'image donne cette information entre parenthèses. S'il indique RGB et non Indexed, il faut cliquer à droite sur l'image pour obtenir le menu et choisir Image->Indexed. GIMP signale alors que le nombre de couleurs optimal doit être de 255 ou moins si l'on crée des GIFs à fond transparent ou des GIFs animés. On obtient alors une boîte de dialogue Indexed Color Conversion qui permet de faire le choix adéquat. La barre de titre montre maintenant que l'image a été convertie en couleurs indexées.

Il est temps maintenant de sauver cette image. Il faut cliquer à droite sur l'image pour obtenir le menu et choisir File->Save pour obtenir la boîte de dialogue Save Image. Il suffit de choisir l'endroit où l'on veut sauver l'image et de lui donner un nom. J'ai appelé mon animation DownfallOfMicrosoft.gif et GIMP a automatiquement déterminé qu'il fallait la sauver au format GIF. J'ai ensuite cliqué sur OK. La boîte de dialogue Save As GIF apparaît alors et l'on peut sélectionner les options de format du fichier. On peut choisir entre le format interlacé et le format non interlacé. On peut accompagner l'image d'un commentaire. On peut également opter pour une boucle infinie. On peut définir le temps devant séparer chaque frame si ce n'a déjà été fait et on peut déterminer l'interaction entre les frames durant l'animation. Toutes ces options sont une question de préférences personnelles, donc expérimentez et voyez ce qui donne le meilleur résultat.

Voici donc ci-dessous mon animation. Elle est très simple, mais pouvez faire beaucoup mieux si vous avez assez d'imagination. J'aurais pu inclure inclure un logo Linux qui serait venu écraser Microsoft, mais avec la chance qui me caractérise, j'aurais immédiatement été contacté par les avocats de Microsoft.