Steve Frécinaux

Extraire une image sur fond uni

Parmi les sept merveilles de l’internet d’aujourd’hui figure certainement le PNG, qui permet de faire des images semi-transparentes qui sont du plus bel effet dans nos pages modernes nourries aux CSS. Un de ses avantages est de dissocier complètement l’image de l’arrière-plan, ce qui a pour conséquence qu’il n’est pas nécessaire de refaire les images quand on décide de changer la couleur d’arrière-plan de son site…

On trouve souvent des images, comme par exemple des logos, sur un fond blanc ou uni. Mais pour pouvoir les utiliser sur notre site, dont le fond n’est pas forcément le même, il serait agréable de pouvoir extraire l’image, si possible en récupérant aussi des détails comme les ombres portées, etc. Voici ce que nous allons faire ici, avec Gimp 2.0. Le résultat n’aura certes pas la qualité qu’il aurait eu s’il avait été créé directement sous la forme d’une image semi-transparente, mais il n’en reste pas moins plus qu’acceptable et utilisable…

[Image d'origine] Pour commencer, prenez votre image de départ, sur fond uni. Ici, j’ai pris l’icone de Gimp, que nous allons donc utiliser ici, sur fond blanc. Ouvrez-la et dupliquez le calque de fond, grâce à la palette des calques. Masquez ensuite l’original.

[Couche alpha] Sélectionnez la copie, et, avec la pipette, prenez la couleur de fond de l’image comme couleur d’avant-plan sur la palette des outils. Appliquez ensuite un filtre « Couleur vers alpha » (menu « Filtres », sous-menu « Couleurs »). Cliquez sur « Valider ».

[Opacification] Refaites une copie du calque original, et placez-la devant le calque précédent (que vous pouvez masquer). À l’aide de la gomme (vérifiez que l’option « Contour dur » est désactivée), effacez sur ce calque les parties de l’image qui ne doivent pas être opaques. Dans notre exemple, tout le blanc et l’ombre portée. Enlevez le plus gros, mais ne vous en faites pas s’il reste l’un ou l’autre pixel résiduel. Démasquez le premier calque.

[Polissage] Ajoutez un calque vide juste au-dessus du fond invisible, et remplissez-le d’une couleur très éloignée de la couleur de fond originale, ce qui vous aidera à distinguer les défauts. À l’aide de la gomme, corrigez la transparence là où c’est nécessaire (les pixels résiduels de l’étape précédente). Quand le résultat vous satisfait, masquez le calque de couleur et enregistrez l’image transparente au format PNG. Un truc utile est de spécifier une couleur d’arri ère-plan dans la palette avant l’enregistrement. De cette façon, les programmes ne gérant pas la couche alpha (comme Internet Explorer) afficheront cette couleur dans les zones transparentes.

Et voilà, nous avons une image sur fond transparent, avec une transparence bien plus élégante que celle des antiques GIFs. Cliquez sur l’un de ces liens pour tester le résultat sur le fond correspondant : transparent, rouge, vert, bleu, jaune, violet, turquoise, blanc, noir, hachures.

Voilà, cette extraction, pour laquelle j’ai embêté beaucoup de monde, n’a en fait vraiment rien de compliqué (et pour preuve, j’y arrive)…

PS : les « heureux utilisateurs » d’Internet Explorer n’auront certainement rien vu de bien consistant, et c’est normal, étant donné que leur navigateur ne gère pas la transparence des PNG et qu’il n’existe pas à ma connaissance de palliatif satisfaisant à l’heure actuelle… si ce n’est migrer vers un navigateur récent/décent