PS CS4: Optimiser des compositions transparent pour fonds unis
Posté par Nico le 14 juin 2009 dans Adobe Photoshop • 2 commentairesQuand on a une composition avec des arrondis flous ou encore différentes valeurs d'opacité il est souvent difficile de créer une image peu lourde sous Photoshop. Le seul format capable de garder la transparence est le png-24, qui est plutôt lourd comme format. Le format GIF ne supporte pas les différentes valeurs de transparence, uniquement soit tout à fait transparent soit tout à fait remplit. Le truc est de pouvoir camoufler les bords pour imiter la transparence.
Pour l'exemple, prenons cette image [Fichier source]:
Nous y voyons clairement des ronds avec un flou gaussien. Supposons que la composition est terminée et que nous voulons la sauvegarder. Allez dans "Enregistrer pour le web et les périphériques". Par défaut Photoshop va choisir png-24, car il reconnaît qu'il y a des zones transparentes, regardez bien la taille du fichier actuel: 39,02 Ko. Choisissez maintenant dans la liste à droite GIF.
Comme vous voyez l'image n'est pas de bonne qualité, les bords ne sont pas transparents. En choisissant 64 couleurs l'image reste correct sans perdre trop de qualité, le poids est à présent 14ko, une sacré différence. Notre but donc, est de simuler la transparence pour un fond uni (détail important). Cliquez maintenant sur la couleur de la pipette (caré noir à gauche) et choisissez-y une couleur claire, pour l'exemple je vous propose #82eff9. Il faut maintenant dire à Photoshop que nous allons utiliser cette couleur comme fond de notre page web.
Changer le fond dans Photoshop
Pour changer le fond, cliquez sur la petite flèche à droite de la première liste déroulante et sélectionner ensuite "Modifier les paramètres de sortie...".
Une fois sur la fenêtre de dialogue des paramètres de sortie, choisissez dans la deuxième liste déroulante "Arrière-plan". Dans la zone "Afficher le document sous" sélectionner "Image" et non "Arrière-plan" vu que nous souhaitons avoir un arrière-plan uni. Pour choisir la couleur d'arrière-plan cliquez sur les deux petites flèches à droite de "Couleur:" et sélectionner-y "Couleur de la pipette", ce qui est donc notre bleu clair. Confirmez en cliquant sur "OK".
Voyons voir ce que ça donne en cliquant sur "Aperçu" dans le bas de la fenêtre de sauvegarde pour le web & périphériques. Comme vous voyez les bords ne sont pas comme nous les souhaitons, transparent mais avec du blanc.
Ce qu'il nous reste à faire est de cliquer sur "Cache" dans la partie droite de la fenêtre dans les options du GIF et d'y sélectionner "Couleur de la pipette".
Les bords blancs sont maintenant notre couleur bleue clair. Ca peut sembler étrange à première vue mais vous comprendrez pourquoi lorsque vous aurez cliqué sur "Aperçu" une dernière fois.
Le titre du post aurait pu être optimisation des images gif avec transparence dans photoshop pour des fonds unis (si le fond est unis il n’y a pas forcément besoin de transparence). J’avoue que je n’étais pas allé voir cette fonctionalité.
Sinon en mettant les images au format png24 on a une réelle transparence avec des fonds pas forcement unis. Mais dans ce cas il faut ajouter un javascript dans votre page à cause des transparences png qui ne sont pas prises en compte par internet explorer 6.
Il est tout à fais possible d’utiliser le format png24, mais la taille de l’image grossit énormément, ce qui est donc l’avantage de cette technique, avoir une transparence tout en ayant une petite taille d’image.