32
Créer une image transparente pour le Web
Comment créer une image avec un fond transparent compatible pour l’affichage sur une page Internet standard ? Imaginons que je dois créer un rond et celui-ci doit être apposé sur une photo. La seule solution (en fait non, mais c’est celle-ci qui nous intéresse*) est de créer une image avec le rond tout en gardant l’arrière plan transparent.
Pour créer un arrière plan transparent sous Photoshop il y a deux méthodes :
- Sur une composition existante, je me rends sur le premier calque (souvent appelé arrière plan) et je le supprime, l’arrière plan devient transparent.
- Dés la création de mon document, je sélectionne dans le menu déroulant couleur d’arrière plan transparent
Le problème va se poser à l’enregistrement de mon document, en effet si j’enregistre mon image en .JPG, Photoshop va applatir mon image et supprimer ma transparence, il la remplacera par un blanc standard.
Il faut savoir qu’il existe trois supports capables de tolérer** la transparence :
Le gif est intéressant car il gère la transparence, cependant il est destructeur, dans le sens où il n’accepte qu’un certain nombre de couleurs Le png qui est parfait mais n’est pas compatible sous IE6 Et le psd, natif Photoshop mais il n’est pas du tout adapté pour le web
Donc, pour créer un fichier transparent pour le Web, j’utiliserai le png en me disant qu’IE6 est une tare de l’Internet et qu’il ne mérite plus d’exister.
Plus sérieusement, selon votre fichier vous utiliserez soit gif, soit png.
Pour enregistrer un fichier en png sous Photoshop : fichier > enregistrer sous > choisir l’extension png, ou fichier > enregistrer pour le web > et je choisis l’extension png.
Pour enregistrer un fichier en gif je fais fichier > enregistrer pour le web > et je choisis l’extension gif.
Jouez avec les options pour obtenir une optimisation acceptable et exploitable.
(*il est également possible de donner un effet de transparence, mais cette technique est un leurre adapté pour le Web, il n’est pas question de transparence. De plus ce n’est pas le sujet de cet article 
**toléré car la transparence est plus ou moins gérée selon le format.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 9 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
27 juin 2008 22:46
Il aurait été interessant de faire état de la limitation d’internet explorer pour afficher la transparence des png !
Répondre-
-
27 juillet 2008 21:51, par tksd
Euhhh pour infos il m’ai déjà arrivé d’avoir des problèmes avec le PNG en suivant la manière que tu preconise Wonka ! Il est plutôt conseillé d’utiliser la fonction « save for web & devices » dispo dans le menu fichier de toshop
Répondre
-
-
-
-
22 février 2010 11:51, par aucun
la critique est toujours plus facile que l’art. Ce qui est « naze », ou plutôt, qui n’apporte rien, c’est de dénigrer sans même apporter un soupçon de critique constructive (aucun développement de commentaire)... on pourrait ainsi croire facilement que la personne tenant ce genre de propos réducteurs (et surement vexante pour qui essaye de faire quelque chose) est le « champion du monde » des gros nazes en plus d’être nul en communication. Bon courage à toi. PS : ya pas qu’IE6 qui fonctionne mal... tout ce qui est à base de microsoft est un peu abusif (a mon sens, bien trop cher pour ce que c’est)... limite escroquerie ; quand on sait qu’il suffit d’installer OSX (qui n’est en fait qu’un BSD propriétaire re-masterisé) qui coute moins cher que windaube et qui est bien mieux et plus stable... ou une distri linux si on a beaucoup de temps et qu’on est pas une faigniasse ...
Répondre -
11 août 2011 13:40, par Pastedo
Merci pr le tuto. très pratique, pragmatique, tangible, concret, concis.
A l’auteur de ce commentaire C... je dis juste ceci « Quand le sage pointe la lune, l’idiot regarde son doigt »
Répondre
-
-
6 mars 2011 13:54, par Lolipop
Bonjour, je vousrais vous remercier pour ce tuto, soft mais UTILE ! ... beaucoup de gens en savent un peu plus maintenant sur la transparence et l’enregistrement.. le naze qui a ecris à 3 messages plus haut, celui la j’aimerais le voir a ses debut sur photoshop... a moins qu’a l’heure d’aujourd’hui il soit encore ilcapable d’enregistrer une image .. a t’il au moins déjà ouvert son Toshop ?? ... Merci pour ce tuto, continuez...
Répondre -
5 octobre 2011 15:20, par eisen
Bonjours, j’ai un gros soucis avec le png, je l’enregistre en png24, l’image et bien transparente, mais BAM quand je l’héberge sur un site (compatible en PNG) surprise ! le fond apparaît o-O ou c’est mal gérer Que faire ?
Répondre
