Uninstallme

Desarrollo frontend, estándares web, accesibilidad y más

Hace una temporada que estoy usando Mac después de mi paso fugaz por Ubuntu, que murió repentinamente por causas desconocidas, y de “toda la vida” usando Windows. No voy a hablar de los pros de uno u otro, que sería tema para otro post, sino de algo que hasta ahora me había pasado desapercibido en PC: las diferencias de color entre los diseños (psd’s) y lo que se acaba viendo en el navegador.

Diferencia de color entre Photoshop y el navegador

Diferencia de color entre Photoshop y el navegador

Además de estas diferencias de color entre el navegador y el PSD, tenía otro problema bastante desesperante: en los degradados en Photoshop se apreciaban cambios bruscos de color similares a los que se pueden ver si guardamos un degradado como GIF de 8 colores :S

Estos problemas estaban causados por mis ajustes de color en Photoshop, que permanecían en su configuración por defecto (mal, muy mal hecho)

Después de rebuscar un poco en Internet y algún libro olvidado, he encontrado la combinación que mejor parece funcionar. Hay quien recomienda una de las configuraciones que trae Photoshop (Web/Internet en Europa) y quien recomienda crearse una nueva configuración personalizada. Yo me he quedado con esta última opción.

Podemos encontrar los ajustes de color en el menú Edición de Photoshop > Ajustes de Color.

En la ventana Ajustes de color, elegimos en el grupo Espacios de Trabajo las siguientes opciones:

  • RGB: sRGB iEC61966-2.1
  • Gris: Gray Gamma 2.2

Dentro del grupo Normas de gestión de color:

  • RGB: Convertir a RGB de trabajo
  • CMYK: Desactivar
  • Gris: Desactivar
  • Diferencias de perfil: Preguntar al abrir
Ajustes de color personalizados en Photoshop

Ajustes de color personalizados en Photoshop

Sin ningún documento abierto, en el menú Vista > Ajuste de prueba seleccionamos Monitor RGB. Al abrir un documento marcamos en el menú Vista la opción Colores de prueba para asegurarnos de que los colores que estamos viendo en Photoshop coinciden con los que se verán en un navegador.

Aquí no acaba todo. A la hora de guardar para Web tendremos que desmarcar las opciones Incrustar perfil de color y Convertir en sRGB.

Opciones al guardar para Web

Opciones al guardar para Web

En este punto hay opiniones contrarias. Yo me he decantado por esta opción porque no todos los navegadores soportan perfiles de color en imágenes, lo que puede dar lugar a diferencias entre unos y otros.

Más información

Un comentario

  1. Por javitte, el 21 de Noviembre de 2009

    Había notado este indeseado efecto anteriormente en algún diseño pero no le di mucha importancia pues eran sólo de un par de detalles. En cambio, últimamente es algo que veo constantemente (supongo que por las actualizaciones de los navegadores modernos) y empezaba a estar mosca…

    Gracias por la información, y el blog a Netvibes!

Deja tu comentario

Campos obligatorios marcados con asterisco *