Les gifs animés sont au troisième millénaire ce que les enseignes furent au Moyen âge. Utilisées en tant que moyens signalétiques avancés dans un site web, leur but est de traduire en quelques images clés l'identité et la qualité du maître d'auberge :En l'occurrence, le Web-Master.

Leur poids ne doit cependant pas dépasser les quelques dizaines d'octets et le graphiste en charge doit sans arrêt faire la part des choses entre son ambition naturelle de produire des icônes de qualité et les contraintes actuelles de l'étroitesse de la bande passante inhérente à l'Internet.

Pour être tout à fait clair et en finir avec cette introduction en guise d'avertissement : Ici, on est pas chez Disney et le meilleur moyen de faire fuir l'internaute est de lui infliger une superproduction de 1minute en 25 images/secondes et en 256 couleurs sur la page d'accueil d'un site sûrement des plus intéressant mais dont personne n'aura la patience de laisser finir de charger la première page !

Donc, restons modestes dans un domaine où la science du rythme l'emporte sur la virtuosité graphique !

Voilà donc que vous avez décidé de faire swinguer les pixels sur votre beau site perso, mais vous aimeriez bien glaner quelques conseils avant de vous enduire plein d'erreur et de ridicule aux yeux et à la face du monde dont le compteur sur votre page d'accueil égrène les visites placées sous le signe d’un émerveillement sans cesse renouvelé !

Cependant, petit génie du World Wide Web, maintenant que des milliers de scénarios tous plus comiques et efficaces les uns que les autre se bousculent à l'intérieur de votre tête de "Nerd", une liste des ingrédients, logiciels et matériels, nécessaires vous sera de la plus grande utilité affin de faire fuser la magie des images :

A ce stade, soit vous êtes un graphiste accompli et vous dessinez chaque image à la main sur du papier layout fixé sur une table lumineuse (ou du calque pour les fauchés mais c'est moins propre et moins pratique ) et il ne vous faudra qu'un scanner (à défaut, s'envoyer du boulot un fax sur son P.C. est une solution que j'ai expérimenté avant d'avoir mon scanner !), soit vous achetez une tablette graphique (le format A5 est suffisant, on en trouve d'occaze à partir de 300 f, neuf à partir de 700 f en USB ou port série ).

Inutile de préciser que la combinaison des deux donne les meilleurs résultats.

Ceci dit, travailler avec la souris pour la conception de formes géométriques animées dispense de tout investissement matériel de départ (Je suppose que vous ne lisez pas ma prose, connecté d'un cyber-café et que vous avez au moins un pentium 100 pour jouer à tétris à la maison !).

Coté logiciel, il va vous falloir choisir un logiciel de retouche gérant les calques tels que Photoshop, Image Ready d'Adobe(Petit frère prodigue de Photoshop 5.0, vivement conseillé pour sa faculté à convertir les calques en vignettes d'un seul clic de souris alliée à son module d'optimisation visualisable), Painter 5 (Nettement plus compliqué) ou Paint shop Pro 5 (dont la réputation n'est plus à faire et qui bénéficie d'un module dédié à la réalisation des gifs animés avec applications d’effets de transition) et idéalement d'un deuxième logiciel pour optimiser le poids du fichier ou concevoir des effets de transitions (j'utilise pour ma part Gif Animator ).

Bon, ca y’est ! Vous avez couru chez votre revendeur préféré ou vous avez dégotté une démo d’Image Ready.

Installé confortablement devant votre écran vous décidez de programmer la tête à toto v 2.000 en gif animé affin de faire rire votre petite sœur (n’espérez pas avec ce tutoriel taper plus haut que l’épate pour le club des 5-10 ans, il vaux mieux commencer un peu coolos pour éviter de décourager les esprits zapeurs !).

Au regard de l'animation hautement sophistiquée dont nous allons entreprendre la réalisation, nous n'aurons pas besoin de dessiner plusieurs visages mais seulement de modifier les parties du visage en mouvement. Nous allons donc principalement abuser de l'utilisation du copier-coller et des calques.

Je commencerai donc par vous distiller quelques conseils de base quand à leur maniement :

LES CALQUES:

• 1 ) Que cela soit dans PHOTOSHOP ou IMAGE READY, un copier-coller ajoute automatiquement un nouveau calque qui vient se placer en haut de la liste. Il masque donc le premier calque nommé "fond" crée automatiquement lors de la création d'une image.

• 2 ) Ce premier calque (fond) à la propriété horripilante de ne pas pouvoir être déplacé dans la liste des calques. Il faudra donc le dupliquer et l'effacer pour pouvoir jouer avec son placement.

• 3 ) Chaque calque dispose d'options de recouvrement, le plus utilisé dans notre cas sera l'option PRODUIT qui mélangera le calque supérieur au calque placé en dessous. Exactement comme une feuille de papier calque !

• Je vous rappelle que l'option par défaut se contentera de recouvrir le calque précédent en le masquant complètement.

• 4 ) Pour travailler sur un calque il faut qu'il soit ACTIF, sa bande horizontale dans le menu calque doit donc être séléctionnée.Ca paraît évident mais avant de commencer à barbouiller comme un fou, il vaut mieux que cela soit sur le bon calque et c'est le genre d'erreur qui peut coûter pas mal de temps.
• Pour qu’il soit visible il faut que l’œil en face du calque soit ouvert, ca aussi ça peut aider !
• Pour finir, les réglages concernant les fenêtres des calques sont accessibles en cliquant sur la petite flèche noire en haut à droite de ces fenêtres (ne cherchez pas dans les menus déroulant généraux en haut de la fenêtre du logiciel).

1. Après avoir choisi un beau jaune citron dans la palette comme couleur de premier plan, faites la combinaison de touches ALT+SUPPR pour en tartiner d’un seul coup notre visage.
2. Bon, maintenant que nous avons un beau smilley, nous allons créer les détails sur des calques séparés ce qui nous permettra de les ajuster à notre convenance. Donc, création d'un nouveau calque pour les yeux
3. Répétez l'étape b pour créer le premier œil et dupliquez le.
4. A l'aide de la main de la barre d'outils flottant, placez le à coté du premier œil (pour les nuls en anatomie, je rappellerai que les yeux sont placés au milieu et au centre de la tête et séparés l'un de l'autre par la largeur d'un nez que vous imaginerez, s'il vous plaît, en triangle ! ) et associez les deux calques pour former une belle paire d’yeux ténébreux.
5. Pour le nez, c’est comme vous voulez, une patate, un grain de riz ou un triangle du moment qu’il se trouve sur un nouveau calque !
6. On finit par la bouche en forme de trait horizontal ( appuyez sur la touche SHIFT simultanément pour obtenir un trait droit), qui sera la clef de notre mini animation, que l’on dessinera une première fois sur un nouveau calque à l’aide de l’outil crayon et une deuxième fois en forme de sourire sur notre dernier calque.
7. Maintenant, Faites une copie fusionnée de tous les calques(dans le menu édition " copy merged") sauf celui du sourire et collez la copie dans un nouveau document (CONTROL+N ENTER et CONTROL+V).Vous avez donc le premier visage.
8. Renouvelez l’opération en décochant cette fois le calque de la bouche au repos et en cochant celui du sourire ce qui vous donne le deuxième calque de votre nouveau document.
9. Dans la fenêtre des calques, appuyez sur la touche magique "make frames from layers "
10. Il ne vous reste plus, après avoir cliqué dans le menu windows sur " show animation " qu’à régler le délai d’affichage des deux images sur 0,5 secondes ( dans le menu animation " set delay for all frames ") pour pouvoir admirer le sourire intermittent et béat de votre première création animée !
11. Bon. Cochez l’option " transparency "dans le menu optimize Sauvez le tout en Gif (" save optimized ") et évitez de faire le même sourire à votre copin(e) en allant vous coucher !