Paramètres de couleur de Photoshop pour la conception Web

9

Quels paramètres de profil de couleur doivent être utilisés dans Photoshop pour la conception Web? L'effet d'étalonnage du moniteur enregistre-t-il les images Web?

Je garde mon moniteur calibré avec un colorimètre et je veux m'assurer que mes couleurs seront cohérentes entre tous les principaux navigateurs.

J'utilise mon profil de moniteur calibré pour mon espace de travail, la gestion des couleurs est désactivée et je n'intègre pas de profil à enregistrer pour le Web et j'essaie d'utiliser .png 24 chaque fois que possible. Est-ce la meilleure pratique?

Paramètres de couleur

entrez la description de l'image ici

Enregistrer pour le Web

entrez la description de l'image ici

Chris_O
la source
1
Question supplémentaire possible - bien que vous ayez expliqué que le Web est votre cas d'utilisation, les paramètres ci-dessus sont-ils «sûrs» si vous avez besoin de modifier de temps en temps l'art CMJN de quelqu'un d'autre?
e100
Bon point. Je n'ai pas beaucoup d'expérience en impression ou CMJN, donc je ne sais pas.
Chris_O

Réponses:

5

«Gestion des couleurs» et «développement Web» ne doivent jamais être utilisés dans la même phrase, sauf s'ils sont qualifiés de «ne vous embêtez pas», de «perte de temps» ou de «fuggedaboudit». Les raisons évoquées par lawndartcatcher sont correctes. Je n'ai pas encore vu de bureau (autre qu'un studio de graphisme) où deux moniteurs affichent les mêmes couleurs. Les ordinateurs personnels sont au moins aussi mauvais.

Si vous travaillez principalement sur le Web, alors sRGB doit être votre valeur par défaut, car c'est la norme pour Internet et c'est ce que tous les agents utilisateurs (navigateurs) sont conçus pour afficher.

NE PAS intégrer un profil de couleur dans les images des sites Web. Ils ajoutent de la taille à l'image, mais n'ajoutent aucune information utile, donc tout ce que vous faites est d'alourdir vos pages. Lorsque vous enregistrez pour le Web et les appareils à partir de Photoshop, assurez-vous de décocher "Intégrer le profil de couleur". Par mesure de sécurité, cochez la case "Convertir en sRGB" (au cas où vous auriez affaire à une image qui se trouve dans un autre espace colorimétrique et que vous oubliez de la convertir).

Pour répondre à vos autres questions: L'étalonnage du moniteur n'affecte pas les images SfW, sauf lorsque vous utilisez votre profil de moniteur comme profil de couleur pour l'image (ce que vous ne devriez jamais, jamais faire pour une raison ou pour une autre fin que le papier peint personnel du bureau).

PNG-24 est utile pour les images transparentes. S'il n'y a pas de transparence, jpeg donne généralement un fichier plus petit pour la même qualité d'image et pour des images simples avec peu de couleurs, et surtout si elles ont des bords durs (les logos étant l'exemple classique) .gif est souvent le meilleur choix.

Alan Gilbertson
la source
7

Eh bien, le gros problème est que vous allez consacrer beaucoup de temps et de soin à l'étalonnage et au choix des couleurs (bon pour vous!) Et ils seront très probablement vus par des gens qui ne peuvent même pas travailler Boutons "Luminosité" sur leur moniteur. Mes collègues (non-design) ont tous deux écrans, et aucun d'entre eux ne se correspond même. Donc, si vous demandez "Y a-t-il un moyen que ce rouge particulier que mon client a demandé soit toujours correct en fonction de l'étalonnage minutieux que j'ai effectué?" la réponse va malheureusement être:

Non.

Mais (et c'est assez gros mais) tous les soins que vous prenez sont importants. En gardant un profil cohérent, toutes vos pages / couleurs seront identiques sur le même moniteur. N'oubliez pas que tout le monde n'utilise pas le même moniteur que vous, il ne sera donc pas toujours le même.

En n'intégrant pas un profil, il peut laisser la porte grande ouverte pour qu'un navigateur remplace le profil actuel. Si vous parvenez à ce que les principaux navigateurs s'entendent sur la gestion des couleurs, il y a probablement une sorte de prix Nobel pour vous.

Pour faire court, oui - tout le soin que vous apportez est important et les paramètres que vous utilisez sont bons (même si je chercherais personnellement un profil RVB un peu plus générique). Mais vous n'aurez que peu de contrôle une fois que votre conception quittera votre machine et ira dans le vaste monde des utilisateurs Web inconscients.

lawndartcatcher
la source
Merci très utile! Je suppose que ma plus grande préoccupation est que si j'utilise un graphique que j'ai créé en tant que couleur # 172550 dans Photoshop, que mon # 172550 en CSS correspond au graphique sur n'importe quel moniteur.
Chris_O
vous pouvez également travailler avec des couleurs sécurisées pour le Web
Jack
2
Les couleurs sécurisées pour le Web sont un bon moyen de "limiter les dommages", mais malheureusement, la couleur # 172550 ne sera pas différente dans tous les cas uniquement parce que la grande majorité des gens ne calibrent jamais leurs moniteurs. Si vous travailliez dans l'impression, ce serait plus facile car les imprimantes professionnelles fonctionnent hors des normes Pantone afin qu'elles sachent à quoi ressemble le # 172550.
lawndartcatcher
2
Les navigateurs utilisent sRGB. C'est la norme W3C. L'utilisation de tout autre profil de couleur pour une image garantit qu'elle sera différente lorsqu'elle sera affichée dans un navigateur.
Alan Gilbertson,
2
Les couleurs Web sécurisées ne sont pas pertinentes ici (et partout ailleurs: graphicdesign.stackexchange.com/questions/40/… )
e100
3

+1 Chris c'est vraiment une bonne question, exactement je ne sais pas si profondément mais quand j'ai été intéressé par cette question j'ai trouvé quelques articles sur le même, peut-être qu'ils vous aident car j'ai changé mon réglage en fonction d'eux, veuillez prendre un coup d'oeil, ça pourrait aussi résoudre votre curiosité.

  1. gestion des couleurs par ivan
  2. Conseils pour gérer les couleurs dans Photoshop pour le Web
  3. Gestion des couleurs pour faire correspondre les couleurs sur plusieurs appareils
  4. ces paramètres que personne ne devrait utiliser pour Photoshop

J'espère que cela pourrait aider un peu .......

Jack
la source
Je me souviens de l'article et du débat de Smashing Magazine qui ont suivi. Le dernier article a le plus de sens. Merci!
Chris_O
toujours les bienvenus ...
Jack
1

Mon sentiment honnête sur la gestion des couleurs Web reflète ceux exprimés ci-dessus, mais avec quelques mises en garde.

D'une manière générale, il est logique de maintenir un flux de travail à gestion des couleurs de votre côté afin que vous puissiez au moins avoir un bon point de départ - si vous concevez en dehors d'un flux de travail à gestion des couleurs et que votre combinaison moniteur / logiciel est bien à l'heure du déjeuner (dominantes de couleurs involontaires, problèmes de gamut et de gamma, etc.), vous augmentez le risque qu'un autre équipement de l'utilisateur final non calibré soit hors de contrôle d'une quantité équivalente dans la direction opposée et finisse par voir quelque chose deux fois plus mal affiché que s'il était conçu dans un flux de travail géré par les couleurs en premier lieu, en fonction des décisions biaisées en matière de couleurs que vous avez prises.

De plus, bien que je ne tague jamais d'images graphiques (en-têtes, navigation, arrière-plans, etc.) pour les sites Web et les modèles de sites Web (car cela peut entraîner de mauvaises correspondances entre les couleurs spécifiées en hexadécimal et les images gérées par les couleurs qui finissent par être gérées par les couleurs dans les quelques navigateurs qui respectent réellement les profils couleur), je fais souvent des photos de tag. Images de résolution particulièrement élevée. Dans les rares occasions où l'utilisateur final visualise le contenu dans un navigateur à gestion des couleurs, les profils garantissent que l'utilisateur voit la photo telle qu'elle a été prise et que les tons de peau humaine, le ciel, l'eau, etc. sont correctement représentés.

Timichango
la source