Les paroles s'envolent, les écrits restent, le design facilite la lecture.

dimanche 26 septembre 2010

Prove yourself! Les Formats d'Épreuve en Photoshop

Vous avez une vision. Vous savez exactement ce à quoi votre design de site web devrait ressembler. Vous réalisez votre maquette sur Photoshop et tout est exactement comme vous l'imaginiez. Vous la tranchez en différents fichiers image, vous commencez à construire votre HTML et votre CSS, vous le testez progressivement dans le navigateur de votre choix et tout semble bien aller. Tout, sauf un petit détail. Vous remarquez peu à peu que les couleurs de votre site dans un navigateur ne sont pas exactement les mêmes que sur votre maquête. Comble de malheur!

La gestion des couleurs sur Photoshop - voire sur un ordinateur en général - se trouve à être quelque chose de très technique que je ne maîtrise pas du tout. Mais je connais tout de même une petite fonction qui peut vous permettre de voir une image dans Photoshop exactement comme elle serait dans un navigateur. Il faut changer votre format d'épreuve.


Tout en haut de l'onglet Afficher, caché sous le fameux "montrer tous les menus", se trouve l'option Format d'Épreuve. Mettez-moi ça en RVB Moniteur! Vous verrez les couleurs de votre image changer légèrement, la montrant telle que destinée pour être vue dans un moniteur.

Mais ce n'est pas fini. Après la sauvegarde, il se peut que votre image soit comme elle était avant que vous ne faisiez les réglages si-dessus. Lorsque vous sauvegardez votre image, que ce soit en format natif .psd ou directement en .png ou .jpg, prenez garde de ne pas laisser cochée l'option Profil ICC. Elle est normalement cochée par défaut et elle l'est aussi en sauvegarde "pour le web et les périphériques". Laisser cette option cochée inscrit le profil sur l'image et tout navigateur capable d'interpréter les profils de couleurs (la majorité des navigateurs modernes) interprétera votre image avec ce profil, ce que vous ne voulez pas. Du moins, pas maintenant.

Réglez vos formats d'épreuve et prenez garde au profil ICC et tout devrais marcher comme sur des roulettes, les images étant exactement semblables de Photoshop au navigateur.

Sources:
http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/
http://www.viget.com/inspire/save-for-web-simply
Ainsi que quelques tests personnels.

Aucun commentaire:

Enregistrer un commentaire