¿Qué debo hacer con respecto al perfil de color al diseñar para la web?


15

Leí este artículo de Doug Avery donde explica cómo deshabilitar la gestión de color en Adobe Photoshop y el artículo de seguimiento en respuesta al alboroto de los comentaristas que argumentan en contra y apoyan sRGB, aunque todavía no estoy convencido de qué técnica debería aplicarse en mi flujo de trabajo personal.
Por lo que he recopilado mientras leía el artículo (corríjame si me equivoco), la forma correcta de lidiar con esto sería hacer que Photoshop administre los colores como sRGB y haga uso de Proof Colors cuando necesite más Vista previa "fiel" de su trabajo.

Por el momento tengo un proyecto de sitio web completo que ha sido diseñado con perfiles de color desactivados. Empecé de esa manera porque hace unos meses me di cuenta de que los colores que Photoshop representaba, aunque se informaban correctamente por la herramienta Cuentagotas de Photoshop , no correspondían cuando se midieron desde una captura de pantalla a lo que estaba viendo en Google Chrome al abrir la imagen exportada como PNG.
Después de una búsqueda rápida, me encontré con la publicación que cité antes y apliqué sus sugerencias a ciegas (sin siquiera notar el seguimiento ni leer sobre los problemas con ella). Desde entonces, no he tenido problemas: tomo capturas de pantalla de mi trabajo en Photoshop y las subo para que el desarrollador las utilice. Él puede ver los mismos colores que veo y uso cuando desarrollo el diseño, y no tengo que saltar por los aros para ver lo que realmente estoy haciendo.

Mis preguntas:

  • ¿Es realmente necesario usar sRGB en un diseño web (entiendo las implicaciones de no usarlo en algo como fotografía o impresión) cuando solo agrega más trabajo al obligarlo a usar Proof Colors ? (Así es como lo veo, corrígeme si me equivoco)

  • Dado que guardar con un perfil ICC llevará a algunos navegadores a aplicar correctamente el perfil mientras que otros lo ignoran, el artículo también dice que probablemente sea la mejor idea simplemente diseñar con sRGB y luego guardar sin el perfil ICC . ¿No vence eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?


1
No creo que la respuesta de Marc Edwards sea correcta. Si configura su perfil de color como "monitor", su color se verá genial solo para una persona: ¡usted! sRGB permite que una gama más amplia de personas vea de manera más consistente. Lee este enlace. Ofrece la mejor información que he encontrado hasta ahora sobre el tema. gballard.net/psd/saveforwebshift.html

Respuestas:


5

Mi opinión (a veces controvertida): las personas que recomiendan usar sRGB para la interfaz de usuario y el diseño web están locos. Este es el por qué.

Para que la gestión del color funcione para el diseño de pantalla, hay tres cosas importantes que deben suceder.

  1. La imagen debe crearse utilizando el flujo de trabajo correcto.
  2. La imagen debe guardarse con el perfil de color ICC correcto.
  3. La imagen debe mostrarse correctamente, respetando el perfil de la imagen y el entorno en el que se muestra (el navegador y el sistema operativo, etc.).

Si no tiene los tres, la gestión del color no funciona en absoluto. Tener una o dos de esas cosas significa que toda la cadena está rota.

Y aquí está el problema: todos los PNG y GIF guardados desde Photoshop no pueden tener perfiles ICC, por lo que el número 2 no es posible en la mayoría de los casos (aunque los JPEG pueden tener perfiles). Y muchos navegadores no se comportan correctamente, por lo que el número 3 también está fuera en muchos casos.

Si está mostrando una foto en la web, su mejor opción es convertir destructivamente a sRGB e incrustar un perfil sRGB ICC y solo usar JPEG. Si está creando elementos de interfaz de usuario web, entonces su mejor opción es configurar Photoshop para apuntar al "dispositivo RGB" (colores nativos sin perfil o administración de color).

El consejo de Doug Avery es bueno. La parte importante de su publicación es la cuadrícula que usa para comparar todos los resultados. Lo que está buscando es combinar HTML, CSS y colores en las imágenes, que es lo correcto para apuntar. Eso solo es posible si los valores de color en las imágenes y los valores de color utilizados en HTML / CSS se tratan de la misma manera.

He escrito mucho más sobre el tema aquí:

Gestión del color y diseño de IU

Y discutió ad nausium con un ingeniero de Adobe aquí:

Guardar para Web, Convertir a sRGB debe estar desactivado de forma predeterminada para PNG y GIF

¿Es realmente necesario usar sRGB en un diseño web (entiendo las implicaciones de no usarlo en algo como fotografía o impresión) cuando solo agrega más trabajo al obligarlo a usar Proof Colors? (Así es como lo veo, corrígeme si me equivoco)

No, no es necesario. De hecho, asumir que sRGB está ayudando demuestra una falta de comprensión del tema. Hay situaciones en las que definitivamente debería usar sRGB, pero pertenece como parte de un flujo de trabajo fotográfico completo: debe usar imágenes JPEG, usar sRGB e incrustar un perfil sRGB. No puede hacer parte de eso sin hacer todo y esperar cualquier beneficio de la gestión del color.

Si está guardando GIF o PNG desde Photoshop, nunca tendrá un perfil ICC en sus imágenes, por lo que debe asegurarse de que su flujo de trabajo esté configurado para eso y cómo los navegadores tratarán las imágenes.

Dado que guardar con un perfil ICC llevará a algunos navegadores a aplicar correctamente el perfil mientras que otros lo ignoran, el artículo también dice que probablemente sea la mejor idea simplemente diseñar con sRGB y luego guardar sin el perfil ICC. ¿No vence eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?

Manten eso en mente:

  • Los GIF no pueden tener perfiles ICC.
  • Los PNG guardados por Photoshop no pueden tener perfiles ICC.
  • Los PNG pueden tener perfiles, pero es raro que se guarden con ellos.
  • Los archivos JPEG pueden tener perfiles.
  • La representación del navegador de imágenes con perfiles difiere entre navegadores.
  • A menudo se supone que los colores en HTML y CSS son dispositivos RGB o sRGB, y usted no tiene control sobre eso.

44
Tengo 6 computadoras en casa y dos monitores calibrados en el trabajo. Un monitor calibrado simplemente no tiene una gama decente, por lo que incluso con la calibración, no es confiable. Los seis en casa tienen existencias disponibles y todos muestran los colores de manera diferente. Esta es una lección sobre el uso en el mundo real. Así es como aprendí a dejar de preocuparme y amarlo.
Horacio

3
Si. El objetivo es la coherencia dentro de la página para los elementos de la interfaz de usuario, en lugar de la coherencia en diferentes pantallas (que es imposible en la mayoría de las circunstancias).
Marc Edwards el

3

Definitivamente se necesitan perfiles si se desarrolla / diseña en Mac.

Si trabajo en mis imágenes en Photoshop como Adobe RGB o ProPhoto RGB (los 2 perfiles que usa una buena cámara), los colores cambian MUCHO cuando la PSD se guarda para la web y se ve en una PC con Windows.

Para un usuario de Mac, es necesario usar el perfil sRGB en archivos WORKING para mantener los colores en todas las plataformas.

El archivo publicado final (guardar para la web) no tiene perfil, pero el uso de sRGB durante su creación es necesario en Mac, al menos está en el nuestro si desea que los colores se vean similares en Mac y Windows.


2

Me gustaría confirmar las declaraciones de estos párrafos:

Por lo que he recopilado mientras leía el artículo (corríjame si me equivoco), la forma correcta de lidiar con esto sería hacer que Photoshop administre los colores como sRGB y haga uso de Proof Colors cuando necesite más Vista previa "fiel" de su trabajo.

y

Dado que guardar con un perfil ICC llevará a algunos navegadores a aplicar correctamente el perfil mientras que otros lo ignoran, el artículo también dice que probablemente sea la mejor idea simplemente diseñar con sRGB y luego guardar sin el perfil ICC. ¿No vence eso el propósito de usar el perfil de color en primer lugar? ¿O estoy malinterpretando lo que dice el artículo?

Distingo entre el entorno de producción (conocido y autocontrolado) y el dispositivo de salida, y organizo el flujo de trabajo de acuerdo con lo que es mejor para las fotos. Dejame explicar:

Cuando abro fotos desde mi cámara digital, tengo la opción de abrirlas con el perfil sRGB contenido. Si los abro sin el perfil, perdería información importante (los colores se ven de manera diferente). Así que también mantengo el perfil para su posterior procesamiento. Con el perfil contenido, Photoshop puede adaptar los colores al perfil de mi monitor, a los perfiles a los que accedo para obtener colores de prueba, al perfil de mi impresora y a todos los perfiles con los que trabaja mi colega.

Si usa fotos en sus archivos de diseño, debe crear el lienzo en blanco con un perfil adjunto. Y si entrega el archivo de diseño y no los gráficos finales a un desarrollador, es bueno que aún tenga el perfil adjunto ...

Guardo los archivos finales sin perfil y se ven como se esperaba. ¿Por qué es así? Creo que porque los gráficos sin perfil se interpretan como si tuvieran un perfil sRGB adjunto (tal vez alguien conoce una referencia para esto).

Y también supongo que cuando toma una captura de pantalla, su sistema convierte los colores de su perfil de monitor a sRGB (o tiene un monitor muy bueno cerca del espacio de color sRGB).


1

La respuesta a su primera pregunta: si no usa sRGB en el flujo de trabajo, todas las imágenes usadas de otros espacios de color eventualmente no tendrán colores precisos o incluso recortados en la web. La mayoría de las imágenes sin perfil que importe o use funcionarán bien porque ya están en el espacio de color correcto (por ejemplo, el espacio estándar en la cámara).

Segunda pregunta, sí, el propósito se ha vencido porque el uso de perfiles de color aún no se implementa en la web de tal manera que pueda usarlos. Los navegadores 'esperan' sRGB, por lo que no es necesario adjuntarlos, esto solo aumenta el tamaño del archivo. Debido a que muchos navegadores no entienden los perfiles, no es una buena idea ofrecer imágenes con perfil, digamos Adobe rgb 1998, porque los colores se recortarán.


"Los navegadores 'esperan' sRGB" - más o menos. Hay un comportamiento mixto en todos los navegadores. La mayoría representa imágenes sin etiquetar como dispositivo RGB (sin conversión). Safari 6 en OS X supone (erróneamente) que las imágenes sin etiquetar son sRGB y se convierten.
Marc Edwards

0

Actualización para Adobe Photoshop CC (2017):

  1. Deje su espacio de trabajo predeterminado (propósito general norteamericano 2)

  2. No cambies nada más

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.