Krypton Solid

Configuración de Photoshop para desarrollo web, de aplicaciones y de iPhone

Configuración de Photoshop para desarrollo web, de aplicaciones y de iPhone

La mayoría de las personas que han diseñado sitios web o aplicaciones en Photoshop, en un momento u otro, han tenido problemas al tratar de hacer coincidir los colores de las imágenes con los colores generados por HTML, CSS o código. Este artículo tiene como objetivo resolver esos problemas de una vez por todas. Entonces, ¿cómo podemos lograr una gestión del color que combine los colores en varios dispositivos? [Updated February/28/2017]
En el mundo de la impresión, la gestión del color normalmente implica calibrar todo el flujo de trabajo, desde el escáner o la cámara digital hasta la pantalla de la computadora, pasando por las pruebas impresas y la impresión final. Esto puede ser una tarea bastante difícil, especialmente cuando los dispositivos usan diferentes espacios de color; hacer coincidir los dispositivos RGB y CMYK es notoriamente difícil. Al diseñar o editar para televisor, la calibración de la pantalla de edición principal y el uso de un monitor de transmisión son comunes; estos muestran una prueba en tiempo real de cómo se verá la imagen en un televisor típico en la casa de un espectador. En tal escenario, la gestión del color ofrece muchos beneficios y es muy recomendable. Al construir Interfaces web y de aplicaciones, la situación es un poco diferente. La salida final es el mismo dispositivo que está utilizando para crear la obra de arte: una pantalla de computadora (dejando de lado, por ahora, las diferencias en gamma entre Windows, OS X antes de la 10.6 y el iPhone, que cubriremos más adelante).

La mayoría de las personas que han diseñado sitios web o aplicaciones en Photoshop, en un momento u otro, han tenido problemas al tratar de hacer coincidir los colores de las imágenes con los colores generados por HTML, CSS o código. Este artículo tiene como objetivo resolver esos problemas de una vez por todas. [Updated February/28/2017]

Otras lecturas en SmashingMag:

Gestión del color para igualar los colores en varios dispositivos

En el mundo de la impresión, la gestión del color normalmente implica calibrar todo el flujo de trabajo, desde el escáner o la cámara digital hasta la pantalla de la computadora, pasando por las pruebas impresas y la impresión final. Esto puede ser una tarea bastante difícil, especialmente cuando los dispositivos usan diferentes espacios de color; hacer coincidir los dispositivos RGB y CMYK es notoriamente difícil.

Al diseñar o editar para televisor, la calibración de la pantalla de edición principal y el uso de un monitor de transmisión son comunes; estos muestran una prueba en tiempo real de cómo se verá la imagen en un televisor típico en la casa de un espectador. En tal escenario, la gestión del color ofrece muchos beneficios y es muy recomendable.

Al construir Interfaces web y de aplicaciones, la situación es un poco diferente. El resultado final es el mismo dispositivo que está utilizando para crear la obra de arte: una pantalla de computadora (dejando de lado, por ahora, las diferencias en gamma entre Windows, OS X antes de 10.6 y el iPhone, que cubriremos más adelante).

Hay un captura, aunque. Aunque esté creando la interfaz web o de la aplicación en el mismo dispositivo en el que se mostrará el producto final, los colores tendrán varias fuentes: imágenes (generalmente PNG, GIF y JPEG), marcado de estilo (CSS) y código (JavaScript , HTML, Objective-C, etc.). Hacer que todos coincidan puede ser complicado.

La meta

Al diseñar sitios web o interfaces de aplicaciones, queremos hacer coincidir perfectamente los colores que se muestran en la pantalla en Photoshop y que se guardan en archivos con lo que se muestra en otras aplicaciones, incluidos Firefox, Safari y iPhone Simulator. No solo queremos que los colores se vean iguales, sino que queremos que los valores reales guardados en los archivos coincidan perfectamente con los colores que hemos definido en Photoshop. Los colores no deben cambiar o parecer que cambian de ninguna manera, bajo ninguna circunstancia.

¿Porque esto es tan difícil?

Photoshop aplica su gestión del color a las imágenes que se muestran dentro de sus ventanas y a los archivos que guarda. Esto es malo si trabaja exclusivamente con imágenes RGB para interfaces de usuario en pantalla o web. Con la configuración predeterminada de Photoshop, # FF0000 realmente se mostrará como # FB0018, y # BB95FF se mostrará como # BA98FD. Las diferencias son sutiles pero definitivamente existen.

¿En qué se diferencia Photoshop de OS X y Windows?

Captura de pantallaLa gestión del color de OS X se aplica a toda la pantalla al final de la cadena de procesamiento, después del búfer principal en la memoria ram de video. Esto significa que, aunque se aplica la gestión del color, las utilidades de software que miden el color en la pantalla (como / Utilidades / Medidor de color digital) reportará los mismos valores que ha guardado en el archivo o ingresado como su código. Creo que la gestión del color en Windows Vista y Windows 7 (Windows Color System) funciona de manera similar.

La gestión del color de Photoshop se aplica solo a la parte de la imagen de sus ventanas y a los archivos que guarda. Esta corrección de color ocurre cuando Photoshop dibuja la imagen en la pantalla, por lo que las utilidades de software que miden el color en la pantalla a menudo informan colores diferentes de los que ha especificado. Vale la pena señalar que la gestión del color de OS X se aplica sobre la de Photoshop.

La mejor solución que he encontrado es deshabilite la administración de color de Photoshop para documentos RGB tanto como sea posible. Hacerlo fuerza los colores RGB que están en la pantalla y guardados en el archivo para que coincidan con el valor de color real. Si necesita calibrar su monitor para el trabajo de diseño web y de aplicaciones, lo mejor es cambiarlo a nivel de sistema operativo.

Desactivar la gestión del color solía ser bastante fácil en Photoshop CS2 y todas las versiones anteriores, pero ahora requiere un poco más de habilidad.

Desactivación de la gestión de color RGB de Photoshop

Estas instrucciones son para Photoshop CC en Mac y Windows. Configurar otras versiones es muy similar.

Paso 1: ve a Editar → Configuración de color y configure el espacio de trabajo para RGB en Monitor RGB.

Captura de pantalla

Paso 2: abra un documento y vaya a Editar → Asignar perfil, luego configúrelo en No maneje el color de este documento. Esto debe hacerse para cada documento en el que trabaje.

Captura de pantalla

Paso 3: asegúrese Ver → Colores de prueba esta apagado.

Paso 4: al guardar archivos con Guardar para Web y dispositivos, asegurarse de que Convierta a sRGB esta apagado. Si está guardando un archivo JPEG, desactive también Incrustar perfil de color (es posible que desee activarlo para determinadas fotos, pero es probable que desee desactivarlo para los elementos e iconos de la interfaz).

Diferencia entre «Asignar perfil» y «Convertir en perfil»

Ahora sería un buen momento para mencionar la diferencia entre Asignar perfil y Convertir a perfil, para que sepa cuál usar cuando.

Cada documento de Photoshop contiene un perfil de color eso es independiente de los datos de color reales almacenados para cada píxel. Asignar perfil simplemente cambia el perfil en el documento, sin afectar ninguno de los datos de color. Es una acción no destructiva: puede asignar un nuevo perfil de color a sus documentos con la frecuencia que desee sin causar ningún daño. La asignación de un nuevo perfil puede cambiar la forma en que su documento aparece en la pantalla, pero los datos contenidos en el archivo permanecerán inalterados.

Convertir a perfil es bastante diferente. No solo asigna un perfil de color al documento, sino que también intenta que su imagen se vea igual en la pantalla. Lo hace procesando los datos de color contenidos en el archivo para cada píxel. Es más probable que la conversión a un nuevo perfil conserve el color de un documento en la pantalla, pero los datos contenidos en el archivo se alterarán permanentemente. Úselo con precaución.

Si está copiando capas de un documento de Photoshop a otro, querrá asegurarse de que a los documentos se les haya asignado el mismo perfil de color.

Illustrator es igual que Photoshop

Si desea que las imágenes guardadas en Illustrator o importadas de Illustrator a Photoshop también coincidan, siga los pasos a continuación. Estas instrucciones son para Illustrator CS4 en Mac y Windows. La configuración de Illustrator CS3 es muy similar.

Paso 1: ve a Editar → Configuración de colory configure el espacio de trabajo para RGB en Monitor RGB.

webappiphone4

Paso 2: abra el documento y vaya a Editar → Asignar perfil. Luego configúrelo en No administre el color de este documento. Esto debe hacerse para cada documento en el que trabaje.

webappiphone5

Paso 3: asegúrese de Ver → Colores de prueba esta apagado.

Paso 4: al guardar archivos con Guardar para Web y dispositivos, asegurarse de que Convierta a sRGB esta apagado. Si está guardando un archivo JPEG, desactive también Incrustar perfil de color (nuevamente, es posible que desee activarlo para ciertas fotos, pero es probable que lo desee para los elementos e íconos de la interfaz).

webappiphone6

Diferencias gamma

Windows ha utilizado un gama de 2,2 desde su introducción. OS X ha utilizado una gama de 1.8 para todas las versiones excepto Snow Leopard (la última versión), que usa 2.2. ¿Qué significa esto? Antes de Snow Leopard, las páginas web parecían más oscuras en Windows. Afortunadamente, ambos sistemas operativos ahora están sincronizados, por lo que una página web debería verse muy similar en una Mac y una PC que usan el mismo monitor.

La información sobre la gama del iPhone es un poco difícil de conseguir; No pude determinar si es 1.8 o 2.2. Esta es otra razón para probar su interfaz en un iPhone.

Verificación final para la interfaz de usuario del iPhone

Es probable que la pantalla y la calibración de su iPhone o iPod sean diferentes de la pantalla y la calibración de su Mac o PC. A menudo importo imágenes de pantalla completa de la interfaz de usuario a iPhoto y las sincronizo con un iPhone para ver exactamente cómo se verá la interfaz final en el dispositivo (en Windows, puede sincronizar fotos usando iTunes). Esto le da otra oportunidad de hacer ajustes antes de cortar imágenes o enviar algo al código.


webappiphone7b

Este artículo explica cómo manejar el problema de que, al probar algunas simulaciones de interfaz de aplicaciones de iPhone de paisaje, parecen más borrosas de lo que parecen en Photoshop.

En Mac, mover colores entre Photoshop y el código se puede facilitar con Selector de desarrolladores, Selector de color hexagonal y Colores (Todo gratis).

Conclusión

Ahora, puede mover imágenes vectoriales y de mapa de bits entre Photoshop e Illustrator sin ningún cambio de color y utilizando cualquier método. También puede tomar un color usando el selector de color en Photoshop y luego usar el mismo valor de color HEX en su código CSS, HTML, JavaScript, Flash o Objective-C, y coincidirá con sus imágenes perfectamente. Espero que este artículo te haya ayudado. Si tiene alguna pregunta, no dude en preguntar en los comentarios a continuación.

Puede que te interesen las siguientes publicaciones relacionadas:

Deja un comentario