Guardar para Web Photoshop usa colores incorrectos

En Tutoriales y Guías, Webmasters por

Muchas veces cuando usamos la opción de Photoshop “Guardar para Web y dispositivos…” la imagen guardada tiene los colores incorrectos o al menos no tiene los mismos colores que se nos mostraban en pantalla.

Este problema viene por los perfiles y como gestiona el color Adobe Photoshop, lo cual nos puede traer problemas o algún disgusto.

Antes de hablar sobre cómo solucionar el problema, tenemos que tener presente que cuando guardamos una imagen, esta puede llevar incrustado un perfil de color, si la imagen la abre un programa con soporte para ese perfil de color, se mostrará con colores correctos pero el problema está en que algunos navegadores no soportan los perfiles y las imágenes se mostrarán con los colores incorrectos. En la actualidad Safari y FireFox soportan perfiles de color, pero si queremos usar un perfil de color en nuestras imágenes el recomendado es el perfil sRGB ya que es compatible con la mayoría de navegadores y usado por defecto.

La mejor solución para guardar imágenes con Photoshop y que los colores se mantengan en todos navegadores de forma correcta, es evitar el uso de perfiles incrustados pero al mismo tiempo hay que tener el espacio de trabajo correctamente configurado en Photoshop antes de empezar el trabajo.

Pasos para configurar Photoshop para que gestione el color correctamente con la opción Guardar para Web:

  1. Vamos al menú Edición > Ajustes de color (Mayus + Ctrl + K) y cambiamos el perfil de los espacios de trabajo de tal forma que seleccionamos Monitor RGB (ver la siguiente imagen para ver como quedarían los ajustes).
    Perfil colores Photoshop
  2. El segundo paso es configurar los colores de prueba en el menú Vista > Ajustes de Prueba y seleccionando Monitor RGB (ver la imagen adjunta).
    AJustes de prueba Photoshop
  3. Una vez seleccionado los ajustes de prueba hay que configurar Photoshop para que los use en pantalla y nos muestre los colores con esos ajustes de prueba. Para esto vamos al menú Vista y seleccionamos Colores de prueba (Ctrl + Y) para que se muestren en pantalla (ver la imagen adjunta).
    Colores de prueba en Photoshop

Con los pasos anteriores ya estamos trabajando con colores seguros a la hora de guardarlos, pero cuando se use la opción “Guardar para Web y dispositivos…” hay que desactivar la opción “Convertir sRGB” si estuviese activa.

Comentarios (3)

Pues anda que no me ha traído problemas el maldito “Guardar para Web y dispositivos…” en Photoshop. Así que esta era la solución.

Yo lo que venia haciendo era seleccionar el perfil sRGB a la hora de guardar la imagen aunque seguía sin ser 100% fiel a los colores originales.

Ahora me surge el problema en mis diseños anteriores que al usar esas opciones se cambian todos los colores y tengo que corregirlos, a ver si encuentro una forma rápida de cambiarlos que no sea cambiar uno a uno.

Buen artículo, ahora a acordarse de seleccionar estas opciones antes de empezar el trabajo jeje

Forma rápida no se si habrá, imagino que depende de la imagen. Si es de capa única puedes tratar de jugar con la saturación de los colores. Si son imagenes con varias capas, la cosa se complica, creo que lo mejor es ir cambiando los colores con calma.

Hola perdonen que me meta pero en mi caso uso cs6 y es super rápido simplemente al darle guardar para web (opción que se encuentra en la pestaña archivos) en la parte derecha desactivan la palomita donde esta sRGB y de ahí abajito sale Previsualizar seleccionar la opcion usar perfil de documento y listo espero les ayude

Deja un comentario: