2013
8
may

Diferencia de colores de Photoshop al navegador web

Por:

En ciertas ocasiones, los colores de las imágenes que exportamos de Photoshop no se corresponden con los que renderizan los navegadores web. Este es un problema muy común, que genera muchos quebraderos de cabeza a la hora de buscar colores que se asemejen a lo que buscamos en realidad.

En este post vamos a tratar explicar el motivo de esta variación de colores y posibles soluciones.

¿ Por qué se produce ?

Este problema es provocado por los perfiles de colores,  que nacen con el fin de que los dispositivos de entrada o salida de color  interpreten las imágenes de la misma forma. Pero los navegadores no los implementan de serie,  alguno, como Firefox 3.0, lo incorpora, pero lo trae desactivado por defecto y otros, como Internet Explorer ni los tiene en cuenta.

Por tanto, hasta que los desarrolladores de los navegadores se pongan manos a la obra con este tema, me temo que de momento tendremos que buscar  soluciones alternativas para evitar la esos molestos cambios de color.

Cabecera de una de nuestras webs a la izquierda el color corporativo y a la derecha como interpretaría ese mismo color los navegadores.

Solución

Para ello tenemos que cambiar el espacio de trabajo en Photoshop a sRGB que nos permitirá trabajar con colores que el navegador interpretará de la misma forma.

Nos vamos a Edición -> Ajustes de color (Mayús. + Ctrl + K) y cambiamos en espacios de trabajo a la opción sRGB, luego más abajo en el apartado de normas de gestión del color seleccionamos convertir a RGB de trabajo y marcamos la casilla preguntar al abrir para que el programa nos avise cuando abramos un archivo con un perfil de color diferente.

Ahora que ya tenemos el espacio de trabajo en RGB , necesitamos activar una opción de Photoshop que permite una visualización que se corresponde con el resultado de exportar como web, lo que hará que podamos ver directamente el aspecto final de nuestras creaciones mientras trabajamos.

Vamos a Vista -> Colores de prueba (Ctrl + Y), lamentablemente esta opción no se queda marcada cuando volvemos a iniciar el editor de imágenes por lo que tendremos que activarlo manualmente cada vez que queremos editar imágenes para web.

Después de esto ya visualizaremos nuestras imágenes en Photoshop tal y como las interpretaría un navegador, a la hora de guardarlas deberíamos guardarlas con la opción guardar para web.

Con estos sencillos pasos se acabaron los cambios de color al exportar imágenes para web, con lo que ahorraremos tiempo y problemas. Ya podemos centrarnos en modificar o crear imágenes para web con los colores que queramos y trabajarlos en tiempo real.

GD Star Rating
loading...
Diferencia de colores de Photoshop al navegador web, 5.0 de 5 basado en 5 calificaciones.

Tags: , , , , , ,


2 Respuestas a “Diferencia de colores de Photoshop al navegador web”

  1. Eva Pazos García dice:

    Hola mktfan, entiendo por lo que me dices que le has presentado al cliente una imagen con los colores no adaptados a navegador (‘colores más vivos’) y en la web finalizada esos colores quedan como lavados, descoloridos.
    La solución entonces es pasar de los colores reales e ir probando en el navegador colores que interpreta este que sea similares a la imagen.
    Sería cuestión de ir probando hasta dar con uno similar. (Generalmente es el mismo color que tienes pero con más brillo y saturación).

  2. mktfan.com dice:

    Diferencia de colores de Photoshop al navegador web…

    Cómo conseguir que los diseños de una web presentadas al cliente en en imagen y la web finalizada tengan los mismos colores….