Au niveau du vocabulaire la transparence est souvent nommée "Alpha" ou "Opacité" dans les logiciels.

La transparence est une propriété spéciale qui ne sera conservée que dans certains formats d'images, pour le web on emploie surtout le .png et le .gif (les images au format JPEG n'ont pas cette propriété).

Ajouter la propriété Alpha :

Bien que la transparence s'obtienne par un retrait (suppression d'une sélection ou gomme) il faut en premier lieu ajouter la propriété de transparence (Alpha) à votre image.

Pour Gimp, il faut aller dans le menu CALQUES / TRANSPARENCE / AJOUTER UN CANAL ALPHA

Pour Photoshop, il faut aller dans la fenêtre CALQUES, double cliquer sur votre calque "Arrière-plan", une fenêtre s'ouvre et vous propose de convertir votre calque en lui ajoutant un paramétrage d'opacité.

Gommer :

Vous pouvez à présent utiliser votre gomme qui va créer un trou dans votre dessin et laisser voir ce qu'il y a en dessous. Gimp et Photoshop matérialisent le vide par un damier gris.

En zoomant avec la loupe sur la découpe créée par la gomme, on peut voir que les pixels passent de manière graduée du plein au vide.

Flou gradué

 Supprimer une sélection :

La seconde manière de retirer une zone dans votre image consiste à créer une sélection avec le menu SÉLECTION ou l'outil SÉLECTION. La zone sélectionnée se matérialise par un trait pointillé animé. En appuyant sur le bouton de suppression vous supprimez la zone ou un pixel.

L'outil "baguette magique" ou "sélection contiguë" permet de détourer plus rapidement un objet complexe surtout si celui-ci est sur un fond uni.

Zone de transition transparente :

Le bord de l'outil gomme comme celui d'une sélection peuvent comporter une zone de transition entre les pixels opaques et ceux qui sont transparents. Cette zone est plus moins étendue en fonction des paramétrages de votre outil.

Dans le meilleur des cas, cette frontière passe du plein au vide sans intermédiaire (dans le cas d'un bloc carré c'est suffisant).

Si vous avez un visuel ou un texte qui comporte des arrondis, il y aura une transition avec des dégradés. Lors de l'enregistrement ces dégradés vont être aplatis sur du blanc. Si le fond de votre site Internet est également blanc, le trucage ne se verra pas.

Si votre site dispose d'un fond foncé, votre visuel transparent va laisser apparaître des petits pixels blancs disgracieux au niveau de la zone de transition.

Il est toujours possible de revenir à votre visuel, sélectionner les pixels de cette zone et les supprimer. cette solution va créer des bords en forme d'escalier sur votre visuel, ce n'est pas toujours du meilleur effet...

Il est préférable dans ce cas d'accorder la couleur de transparence à celle de votre site.

La couleur de transparence :

Si le fond de votre site est noir par exemple, vous pouvez déterminer la couleur de transparence dans Photoshop au moment de l'enregistrement en choisissant la "Couleur de cache" et en sélectionnant le même noir. Ainsi les dégradés de transparence seront aplatis sur du noir, le trucage sera invisible.

Dans Gimp il faut en premier choisir la couleur d'arrière plan dans la boîte à outils et ensuite aller dans CALQUES / TRANSPARENCE / APLATIR A MOITIÉ.

L'enregistrement du fichier :

Sous Photoshop "Enregistrer pour le web" vous permet de cocher l'option de transparence pour les formats .gif et .png (PNG-8 et PNG-24).

Avec Gimp il faut choisir "Export AS" pour exporter votre image et choisir le bon format.

On notera qu'un nouveau format permettant de réaliser des images transparentes a été présenté par Google le "WebP". Pour le moment il faut brancher des plugins sur Photoshop et Gimp afin de pouvoir le tester sur certains navigateurs (Chrome, Opéra, Android...).

Pour en savoir plus :

Participez à notre atelier du Jeudi 6 novembre "Les logiciels libres dédiés au multimédia pour l'entreprise" une démonstration de Gimp, Scribus et Inkscape vous sera présentée.