Oh My Blog!

La situación es clásica, terminas de diseñar el fabuloso nuevo tema para tu sitio y te dispones a exportarlo. Todo bien hasta que empiezas a maquetar, abres Firefox para ver tu obra y te dás cuenta que los colores de las imagenes se ven diferentes, parece que fueron lavadas con un mal detergente que les quitó la vida. Para intentar comprender que pasó, ábres la imagen con cualquier otro programa y oh sorpresa, se ven perfectas. ¿obra del demonio? no exactamente.

Este es uno de esos problemas que cuando te dás cuenta que existen y no encuentras una solución, logran frustrarte al nivel de querer tomar el objeto más pesado que tengas a la mano y lanzarlo furiosamente contra el monitor. Desafortunadamente eso no arreglará nada así que habrá que buscar otra forma de solucionarlo.

Entendiendo el problema

En algún momento a alguien se le ocurrió que sería buena idea inventar una cosa llamada “perfiles de colores”. La idea es que las aplicaciones serían capaces de leer cierta información dentro de las imagenes que les permitiría saber como desplegar los colores en el monitor y de este modo lograr que se vean igual bajo diferentes monitores u otras condiciones variables. Esto es muy útil para fotógrafos o ilustradores que quieren que sus creaciones se vean como ellos las planearon, pero es un dolor de cabeza cuando llegamos a 2009 y nos damos cuenta que los navegadores, como de costumbre, no se ponen de acuerdo en como manejarlos. Safari los soporta, IE no tiene idea de que existen y Firefox los incluye desde 3.0 pero viene con la opción desactivada por defecto. Esto es un problema por que queremos que nuestros sitios se vean igual en cualquiera de los tres, y que esto será cercano a lo que vemos cuando lo estamos diseñando en Photoshop.

Cambiando el espacio de trabajo

Aunque los navegadores no soportan diversos perfiles de color, si vienen con uno estandarizado por defecto y asumen que todas las imagenes deben ser manejadas usándolo; esta es la constante que aprovechar para resolver el problema. El perfil que buscamos es sRGB en alguno de sus múltiples sabores así que vamos a cambiar nuestra area de trabajo para que funcione con el.

Vamos a Edit -> Color Settings (Shift + Cmd + K en OSX). En Working Spaces cambiamos la opción a sRGB si aún no está seleccionada. En la sección Color Management Policies seleccionamos Convert to Working RGB y activamos la casilla para que Photoshop nos avise cuando encuentre otros perfiles al abrir archivos. Esto último es opcionl y probablemente terminarás desactivandolo en el futuro, pero si es la primera vez que haces uso de estas opciones, es recomendable que Photoshop te recuerde que está cambiando los perfiles.

Probando los colores

Basicamente el paso anterior, es todo lo que se tiene que hacer, sin embargo, si exportamos ahora las imagenes, veremos que los colores siguen siendo diferentes a lo que vemos en Photoshop por que la conversión no sucede hasta que se generan los archivos finales. Lo que tenemos que hacer ahora, es lograr que nos muestre esta versión final mientras estamos trabajando con el archivo.

Para esto vamos a View -> Proof Setup y seleccionamos Monitor RGB. Si no se activa automaticamente, presionamos también View -> Proof Colors (Cmd+Y).

Ahora nuestra area de trabajo se ve completamente como un preview de como se verán las imagenes después de ser “guardadas para web” y podemos ajustar los colores con la seguridad de que se verán exactamente igual tanto en Photoshop como en el navegador.

Desafortunadamente Photoshop no incluye una opción para dejar activada la prueba de colores por defecto, así que este último paso tenemos que hacerlo manualmente cada que arranquemos el programa.

Extra: Diferencias de color entre Windows y Mac

Notarán que justo arriba de la opción Monitor RGB que seleccionamos, se muestran 2 opciones que dicen Macintosh RGB y Windows RGB. Como sus nombres lo indican, irven para probar como se verán las imagenes en una PC si estamos trabajando en una Mac y viceversa. La diferencia es culpa de la configuración en la gama de colores con la que vienen cada una, en Win es de 2.2 mientras que en OS X es de 1.8, lo que provoca que los colores sean un poco más claros en este último. Algunos diseñadores cambian la configuración del monitor para ajustarla a 2.2 y adecuarse a como lo verán la mayoría de los usuarios, pero a mi en particular no me gusta por que los colores pierden un poco de vida, prefiero usar esta opción de Photoshop para darme una idea de como se verá. El resultado no es 100% exacto pero es lo suficientemente cercano para saber si quiero hacer alguna modificación.