J’ai remarqué dernièrement que certains concepteurs de sites Web ne semblent pas utiliser correctement les profils de couleurs dans Photoshop. Si vous avez déjà enregistré des images pour le web et découvert qu’elles sortent légèrement plus claires et plus désaturées que ce que vous avez vu lorsque vous avez travaillé dessus, ce guide est pour vous.

Il y a des articles de blog qui préconisent de désactiver les profils de couleur dans les images web pour « régler » ce problème. Ce n’est pas la bonne façon de procéder, car les navigateurs modernes comme Firefox 3 et Safari utilisent effectivement les profils de couleurs, et vous pouvez donc obtenir de bien meilleurs résultats en les utilisant correctement. Qui plus est, les profils de couleurs sont tout à fait simples à utiliser. Voici comment…

NOTE : Les instructions suivantes concernent Photoshop CS3 fonctionnant sous OS X, mais elles seront les mêmes pour Windows et similaires pour les anciennes versions de Photoshop.

D’abord, nous devons savoir quel profil utiliser pour vos images web – c’est le profil sRGB IEC61966-2.1. Il est standard sur de nombreux écrans de PC et est donc recommandé pour une utilisation sur le web. Pour définir votre espace de travail sur ce profil, ouvrez le menu « Édition » et cliquez sur « Paramètres de couleur… »

Vous aurez les options suivantes :

Regardez la section « Espaces de travail » et sélectionnez le profil sRGB IEC61966-2.1 dans la liste déroulante RVB. Les autres paramètres ne sont pas pertinents ici puisque nous ne travaillerons qu’avec RVB pour les images web.

Vous avez maintenant l’espace de travail configuré correctement, mais nous n’avons pas terminé. Ce que vous voyez maintenant n’est pas ce que vous verrez lorsque vous enregistrerez l’image pour le web, car ce que vous voyez n’est pas affecté par les paramètres de votre moniteur. Pour voir les « vraies » couleurs, nous devons utiliser l’épreuvage des couleurs.

Cliquez sur le menu « Affichage », puis sur « Configuration de l’épreuvage ». Vous devriez voir une autre sélection. Nous voulons voir l’image telle qu’elle apparaîtra sur notre moniteur, donc sélectionnez « Monitor RGB » en bas.

Enfin, nous devons activer l’épreuvage couleur car il est désactivé par défaut. Cliquez à nouveau sur le menu « View » et cliquez sur « Proof Colors » s’il n’y a pas déjà une coche à côté.

Une fois que vous aurez cliqué dessus, il sera coché indiquant que les couleurs sont maintenant vérifiées en utilisant les paramètres de votre moniteur. C’est tout, ce que vous voyez maintenant sur votre écran sera à peu près ce que vous obtiendrez lorsque vous enregistrerez l’image.

Les gens verront toujours les couleurs légèrement différentes sur de nombreux appareils et systèmes d’exploitation (par exemple, le gamma par défaut d’OS X diffère du gamma standard des PC Windows, de sorte que les images sont un peu plus claires – si vous travaillez sur un Mac, il est conseillé de définir votre niveau de gamma à 2,2), mais la sortie sera toujours cohérente avec votre espace de travail et sera prête pour les navigateurs modernes qui utilisent effectivement les profils de couleurs intégrés.