[ Tutoriels DL | Sommaire ]
[ Jeux de masque | Digital Lab 1.20 | Tutoriel DL #3 | DL & Internet | Digital Lab et Diapo | Randonnée polaire | L'art du fake]
Testostèrone 6
Tutoriel DL #4 - Digital Lab et Internet
Ce quatrième épisode du bon usage de Digital Lab (DL) a pour sujet principal Internet.
Placer des images sur un site ne semble pas bien sorcier, et pourtant, si l'on n'observe pas quelques règles élémentaires, une idée magnifique risque de se transformer en horreur absolue (imaginez le bureau de Zindoze 98, pour avoir une idée).
Les Bases
Au risque de me faire insulter, je vais quand même rappeler quelques petites idées de base. Deux formats sont universellement autorisés sur Internet, le GIF et le JPEG. Et même si les navigateurs récents acceptent l'excellent format PNG, et que Exploder sait afficher du BMP, nous ne parlerons que des deux formats cités plus haut. En sachant que, de toute facon, DL sait aussi sauver en PNG, alors...
- Le GIF n'autorise que 256 couleurs, mais sait gérer la transparence et l'animation.
- Le JPG autorise des images en 16 millions de couleurs, compresse comme une brute (en endommageant l'image de façon presque invisible), mais ne sait gérer ni la transparence, ni l'animation.
Sauvons
Bref, la première question à se poser est donc d'adapter ses images et les formats de celles-ci en fonction de ce que l'on veut en faire.
Passons rapidement sur le cas du JPG. En effet, sauver une image dans ce format pose peu de problèmes. Bien sûr, il faut choisir avec soin son taux de compression (jamais plus de 95 sinon ça ne sert plus à rien, autour de 90 si l'image est très sensible ou plus vraissemblablement autour de 75/80 ce qui offre le meilleur compromis qualité/taille) car si l'image doit être assez petite pour ne pas se charger en 3 siècles, elle doit aussi ressembler à autre chose qu'à des pavés de couleurs informes.
Le cas du GIF est plus complexe. D'abord, comme nous l'avons vu plus haut, le GIF ne gère que 256 couleurs. En général, nous aurons donc à tramer l'image pour tenter de conserver les nuances de couleurs qui la rendent si sympathique. Bande de petits veinards, DL gère parfaitement le tramage, et pour des photos un petit Floyd-Steinberg des familles avec une palette "adaptative" donneront entière satisfaction. Si l'image est de type aplat (pour un titre, une BD, ...) l'option Tramage "aucun" (i.e. sans diffusion d'erreur) fera des merveilles associée avec le choix de Palette "Netscape" et vous garantira des couleurs nettes sur tous les browsers de la galaxie.
Maintenant, si l'on se sert du GIF, c'est que l'on veut avoir de la transparence. Là encore, le WIM se sort très bien d'affaire, puisqu'il vous suffit d'indiquer la ou les couleurs à "éliminer".
Mais voilà, ce n'est pas si simple.
La Technique
Imaginons que le fond de votre site soit noir. Vous avez recupéré votre magnifique sujet, le top modèle de vos rêves, qui est sur fond bleu. Vous sauvez l'image, en la tramant un coup, et vous enlevez le bleu afin que la dame soit mise en valeur sur votre site. Et là, horreur, si le bleu a bien disparu, il en reste tout de même un peu autour de votre chère amie. La méthode à employer, c'est copier le sujet en sélectionnant au plus juste. Un coup de baguette magique sur le fond, avec une tolérance relativement importante, devrait suffir. Ensuite, il faut inverser la sélection, et copier l'image. Enfin, il faut créer une nouvelle image, avec un fond noir (comme votre site), puis coller la jolie. Au besoin, un petit coup de goutte d'eau sur les bords finira de "fondre" la belle dans son nouveau fond.
On vous mets le feu
Un noêl au coin de la cheminée ça a toujours un certain cachet. Que dire alors
d'un superbe logo incandescent en deux temps trois mouvements.
- Tout d'abord il va nous falloir un logo blanc sur fond noir. Moyennant quelques
coups de l'outils "doigt" ou de l'outil "pinceau" on sauve ce résultat pour une
réutilisation future.
- On sélectionne la "Baguette" puis on Control-clique sur le logo pour obtenir un masque
de même forme.
- Dans le menu Image -> Effets masque on applique quatre fois le "Flou" pour augmenter
la taille du masque.
- On sélectionne du blanc (R=255, V=255, B=255) comme couleur de fond puis dans le menu Edition" on clique sur Effacer. On obtient un aplat blanc.
- Menu Image -> Effets N*N -> On applique un "Flou gaussien" avec les paramètres X=15 Y=15 pour lisser les contours.
- Menu Image -> Effets 1*1 -> On applique un "Contraste" avec le dosage -224 de facon à limiter le nombre de teintes dans notre image.
- Menu Image -> Effets 1*1 -> On applique "Fausse couleur" avec le paramètre 148 pour avoir des dégradés rouge-jaunes.
- On recharge l'image de départ.
- On resélectionne le logo en masque avec un Control-clic de la baguette.
- On copie (Control-C ou menu Edition -> Copier) puis on colle sur l'image obtenue (Control-V ou menu Edition -> Coller) suivi d'un clic a l'intérieur du masque.
- Un clic droit sur l'icône du masque, puis un clic sur Image Cacher permet d'admirer le résultat.
Conclusion
Voilà pour cette fois ci ...
Nous vous rapelons la disponibilité sur le site web d'Eric (www.eric.dacunha) de ces mêmes
tutoriels (avec un décalage d'un numéro par rapport à Testostèrone). L'avantage est la
présence de TOUTES les illustrations (NDLA: N'est-ce-pas monsieur le redac chef, ce n'est
pas comme dans TST 5 ;-) ) et en couleur en plus.
Vous pouvez vous jetter sur les offres couponning limitées dans le temps de nos produits
pour nourrir votre rapace préféré sans aucun risque de crise de foie pour les fêtes.
Les habitués peuvent nous joindre pour toutes remarques ou suggestions à nos adresses e-mails habituelles:
Da Cunha Eric (eric.dacunha @ free.fr) &
Frédéric Bayle (frederic.bayle @ free.fr)