Les images
Une image vectorielle, comme celle du goéland, contenant des objets avec des plages de couleurs identiques (sans dégradé) est un bon exemple d'utilisation d'image GIF.
Les logiciels de bonne facture permettent de gérer le vectoriel, mais d'en donner une représentation bitmapée, conforme à la représentation qui en sera faite sur un écran, une fois convertie en fichier GIF. C'est le cas de l'aile à gauche où il est possible de voir les vecteurs (points et tracés rouge) mais également le dégradé de couleur (antialiasing) entre les zones d'aplats, pour permettre l'aspect lissé de l'image de gauche.
Avec les outils de dessins il est possible de corriger, de modifier et de créer des images.
Gestion des couleurs
Avec une image GIF, vous avez au maximum 256 couleurs. D'une façon générale, plus le nombre de couleurs diminue, plus le poids de l'image s'allège.
Si le logiciel essaye d'optimiser le poids des fichiers, il aura tendance à gérer des plages de couleurs identiques. Cela produit des bandes de Mach sur des photos, comme l'image ci-contre en GIF 12 couleurs (poids 6,63 Ko).
Pour améliorer la qualité, il est possible d'utiliser le tramage. Ce procédé consiste à prendre une couleur, par exemple un orange qui était retranscrit par un aplat de rouge ou un jaune, de la palette de couleurs dans la version avec bandes de mach et essayer de reconstruire le orange par l'utilisation d'une trame alternée de couleurs jaune et rouge
En utilisant un tramage sur la même image, le poids augmente de façon substantielle (10,62 Ko), mais la qualité aussi (voir la photo ci-contre) surtout dans les teintes proches (ciel).
Pour plus de détails, voir le cours sur les couleurs.
Textes et anti-crénelage
En créant un texte dans les logiciels de dessin il est possible de demander à ce que le texte soit anti-aliasé (ou anticrénelé).
C'est le cas du texte " Le goéland ", mais pas de " des Glénan ".
Sans antialiasing, le texte apparaît avec un effet d'escalier. Dans le cas contraire, un dégradé entre le texte et le fond (sur peu de pixels) permet d'avoir un effet lissé, présentant néanmoins un léger flou.
Photoshop gère en standard l'antialiasing.
Dans la fenêtre de texte de Fireworks, vérifier que l'une des 3 possibilités d'anticrénelage est activée. Ne pas confondre avec le crénage (approche entre certaines combinaisons de lettres comme le cou-ple AV)
Dans la fenêtre de texte de Paint Shop Pro, vérifier que la case à cocher " anti-alias " est bien cochée. Elle n'est effective que si l'image est en couleur 24 bits.
Si vous utilisez des textes dans un logiciel de dessin vectoriel, pensez à vectoriser le texte pour éviter les problèmes de police lors du passage à une autre plateforme. Le lissage reste identique.
Comme pour le texte, il ne faut pas trop être pointilleux sur les dessins de base car une fois bitmapés de nombreux détails disparaissent. C'est le cas de la tête d'un goéland, qui en vectoriel recèle des détails alors que la version GIF pour internet n'en présente plus de façon visible.
La transparence
Les fichiers GIF ne permettent de gérer la transparence que sur un seul niveau, ce qui n'est pas le cas des logiciels de création d'images qui, en principe, gèrent la transparence sur 256 niveaux.
Le résultat est souvent décevant, il existe plusieurs techniques pour améliorer cette transparence.
On peut citer :
Utilisation d'un fond uni de couleur proche de celui utilisé en remplacement de la transpa-rence(arrière plan...).
Création de formes n'utilisant pas l'anticrénelage pour obtenir un passage franc au transparent, malgré un crénelage possible des formes arrondies ou perpendiculaires. C'est le cas du texte ci-dessus.
Paramètrage des fihciers GIF
Avec Fireworks, la palette « Optimiser » permet de gérer l'export vers des fichiers GIF. Avec la palette Web 216 (voir le cours sur la couleur pour plus de détails), les couleurs de l'image sont modifiées et seules 40 couleurs sur les 216 sont utilisées. Poids de l'image : 3,42 Ko
Pour se rapprocher des couleurs de base, il est possible de demander à « Tramer » l'image jusqu'à 100%. Cela permet l'obtention de couleurs plus proches de l'image originale avec une augmentation du nombre de couleurs de la palette, mais provoquant une pixellisation de l'image. Poids de l'image : 7,58 Ko
Le poids augmentant sensiblement, il suffit d'augmenter la perte jusqu'à 100% pour obtenir une image de 3,20 Ko. Ce-pendant la qualité se dégrade fortement sur tous les types d'images.
L'utilisation d'une palette adaptative permet de choisir une palette ne contenant que des couleurs utilisées dans l'image. Poids de l'image : 4,95 Ko
Pour diminuer le poids à 3,23 Ko, diminuer le nombre de couleurs à 16. Le jaune du texte (palette web) reste et les principales perturbations ont lieu au niveau du bec.
Sélectionner une transparence alpha (pour une image contenant déjà une partie transparente) ou d'index (pour laquelle l'utilisation de la pipette permet de sélectionner précisément les couleurs transparentes) et demander un matage avec une couleur proche du fond. Sur les objets anti-aliasés il provoque un pourtour de la couleur de fond, qui ne sera plus visible quand il sera inséré dans la page web.
Si les réglages utilisés doivent être ap-pliqués souvent, il est intéressant d'enregistrer les paramètres qui permettent un accès rapide au paramétrage par la liste déroulante « paramètres ».
Dans le menu, vous pouvez sélectionner d'autres options, comme « Entrelacer »...
L'animation
Pour créer une animation, il faut :
soit disposer de toutes les étapes intermédiaires de l'animation,
soit disposer d'un logiciel d'interpolation qui calcule les images intermédiaires entre 2 positions prédéfinies en fonction du nombre d'images à générer.
Parfois, il est possible de traiter tous les cas dans un logiciel de dessin vectoriel, ce qui permet de considérer toutes les couches du logiciel.
Séparer tous les calques pour obtenir les différentes étapes de l'animation. Elles peuvent être les une sur les autres pour valider le positionnement des différentes parties les unes par rapport aux autres (cas du goéland) ou légèrement espacées dans l'espace (temps) pour montrer le mouvement (cas du dauphin)
Pour l'animation, il faut importer les objets vectoriels. Pensez à regrouper sur un même calque les objets qui appartiendront à une même image. Les logiciels qui permettent la gestion des Gif animés peuvent récupérer les calques et les convertir en images.
La première image est celle qui sera présente en tant que visualisation dans l'explorateur ou autre... Dans le cas du dauphin la première image est une image vide. Il serait préférable de prendre le dauphin dont les points sont visibles sur l'image ci-contre. Dans le cas d'animation circulaire cette technique n'est pas gênante, mais peut le devenir pour des animations se répétant peu de fois.
Dans le cas du dauphin, la première image est l'image ci-dessous. Il est possible de voir le timming des différentes images qui composent l'animation (plus il y a d'images, plus le poids du Gif sera lourd). L'image 11 dure plus longtemps (1 seconde) car c'est une image vide, sans dauphin, et la lecture de l'animation est en boucle continue.
Pour améliorer la sortie et l'entrée du dauphin dans l'eau, il est possible d'ajouter un calque supplémentaire qui sera sur toutes les images et dans lequel il faut mettre une forme de même couleur que le fond pour montrer la pénétration dans l'eau.
Au final, un Gif animé de moins de 9 Ko.
Pour voir le résultat du dauphin et du goéland, regarder la version en ligne du cours car, sur une version imprimée (imprimable), c'est moins flagrant ;-)
Il est possible de créer des animations simples directement dans les logiciels de traitement d'images. Comme exemple la carte de Bretagne servant à localiser l'archipel des Glénan.
Sur la carte de Bretagne (au format Gif), il faut ajouter un texte sur les Glénan ainsi qu'un rond (sans remplissage et avec un bord antialiasé ou adouci de 3 pixels) pour permettre la localisation (si possi-ble un objet par calque).
Activer le menu « Fenêtre – Images », Cliquer sur le menu déroulant de image et choisir « Dupliquer l'image... », car la deuxième image sera proche de la première. Dupliquer l'image 1 fois après l'image active.
Faire les modifications sur l'image 2 en changeant la couleur du cercle et du texte des Glénan.
Dans la fenêtre « Images », mettre 100 sur l'image 1 et 50 sur l'image 2 (temps exprimé en centième de seconde). Ne pas oublier de mettre « En continu » pour que l'image boucle indéfiniment.
Dans la fenêtre « Optimiser », demander du GIF animé avec 16 couleurs adaptatives et exporter l'animation.
Pour voir le résultat, regarder la version en ligne du site.