PS CS4: Optimiser des compositions transparent pour fonds unis

Quand on a une composition avec des arrondi flous ou encore différentes valeurs d'opacité il est souvent difficile de créer une image peu lourde. 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 à fais transparent soit tout à fais 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 compositions 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 transparent. 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 clair, 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éroulant "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 a 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 cliquez 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 cliquez sur "Aperçu" une dernière foi.