Un problema frecuente en el proceso de maquetado de una web, es decir, el proceso por el que se pasa de un diseño gráfico en forma de imagen a una página web, es el de los perfiles de color.
El clásico error consiste en usar perfiles de color en las imágenes de forma incorrecta. El problema viene causado por los navegadores, varios de los cuales ignoran completamente los perfiles de color en las imágenes.
Para las fotografías y las imágenes de calidad, se debe mantener un perfil de color, ya que ello no afectará al resultado aparente (se verá ligeramente diferente, los navegadores que procesen los perfiles mostrarán mejor las imágenes), y de este modo no perderemos esa información.
Sin embargo para los elementos propios de la maquetación, tales como botones, iconos de listas o fondos de celda, se plantea un problema. Esas imágenes normalmente se funden con elementos de la página que tienen un color plano, establecido en el fichero CSS mediante su valor hexadecimal.
Supongamos un caso práctico: los elementos de lista tienen una flecha de color rojo al principio de cada uno. El fondo de esa zona es verde. Supongamos que la flecha la hacemos con una imagen PNG o JPG. No podemos usar transparencias porque algunos navegadores no las interpretan bien, así que lo que hacemos es que mantenemos el mismo fondo verde en la imagen de la flecha.
Si la imagen de la que partimos tiene un perfil de color, al obtener el color verde en valor hexadecimal con la herramienta cuentagotas, estamos obteniendo el color con el perfil aplicado. También guardamos la imagen de la flecha con el mismo perfil. En un navegador, como Firefox, que maneje los perfiles de color, el fondo de la imagen se verá del mismo color que el fondo de esa zona.
Por desgracia si vemos la página en un navegador que no respete los perfiles de color, como Chrome, la imagen no tendrá aplicado su perfil de color (cosa que sí está aplicada en el fondo de la imagen, ya que al usar la herramienta cuentagotas con un programa de procesamiento de imágenes, éste sí estaba aplicando el perfil de color). Esto supondrá que el color verde del fondo de la flecha será distinto del verde del fondo de la página, y se verá mal.
La solución previa pasa por configurar el programa para que no utilice perfiles de color ni en el espacio de trabajo (es decir, el perfil que afecta al cuentagotas) ni al almacenar la imagen de la flecha.
Sin embargo otra opción es corregir las imágenes que están mal una vez terminado el proceso de maquetado. Para ello podemos abrirlas con un programa gráfico, cambiar las propiedades del perfil de color y volver a almacenarlas. Este es un proceso tedioso.
Usando la opción "profile" y "strip" del clásico programa convert (imagemagick), se puede conseguir el mismo efecto. El comando sería
El fichero del perfil de origen suele localizarse en un directorio similar a /usr/share/ImageMagick-6.3.7/config/sRGB.icm, y en general el perfil sRGB es suficientemente similar a cualquiera que use nuestro programa como para que no se aprecie la diferencia si hemos trabajado con otro perfil distinto.
Podemos hacer este comando recursivo, para que se aplique a todas las imágenes PNG de un directorio de forma recursiva, y guarde las modificaciones en el mismo fichero que el origen. El resultado sería similar a éste:
Por último, si por algún motivo, quisiésemos aplicar un perfil de salida en lugar de eliminar el perfil, podríamos especificarlo con una segunda opción "profile" en lugar de strip, algo similar a
El clásico error consiste en usar perfiles de color en las imágenes de forma incorrecta. El problema viene causado por los navegadores, varios de los cuales ignoran completamente los perfiles de color en las imágenes.
Para las fotografías y las imágenes de calidad, se debe mantener un perfil de color, ya que ello no afectará al resultado aparente (se verá ligeramente diferente, los navegadores que procesen los perfiles mostrarán mejor las imágenes), y de este modo no perderemos esa información.
Sin embargo para los elementos propios de la maquetación, tales como botones, iconos de listas o fondos de celda, se plantea un problema. Esas imágenes normalmente se funden con elementos de la página que tienen un color plano, establecido en el fichero CSS mediante su valor hexadecimal.
Supongamos un caso práctico: los elementos de lista tienen una flecha de color rojo al principio de cada uno. El fondo de esa zona es verde. Supongamos que la flecha la hacemos con una imagen PNG o JPG. No podemos usar transparencias porque algunos navegadores no las interpretan bien, así que lo que hacemos es que mantenemos el mismo fondo verde en la imagen de la flecha.
Si la imagen de la que partimos tiene un perfil de color, al obtener el color verde en valor hexadecimal con la herramienta cuentagotas, estamos obteniendo el color con el perfil aplicado. También guardamos la imagen de la flecha con el mismo perfil. En un navegador, como Firefox, que maneje los perfiles de color, el fondo de la imagen se verá del mismo color que el fondo de esa zona.
Por desgracia si vemos la página en un navegador que no respete los perfiles de color, como Chrome, la imagen no tendrá aplicado su perfil de color (cosa que sí está aplicada en el fondo de la imagen, ya que al usar la herramienta cuentagotas con un programa de procesamiento de imágenes, éste sí estaba aplicando el perfil de color). Esto supondrá que el color verde del fondo de la flecha será distinto del verde del fondo de la página, y se verá mal.
La solución previa pasa por configurar el programa para que no utilice perfiles de color ni en el espacio de trabajo (es decir, el perfil que afecta al cuentagotas) ni al almacenar la imagen de la flecha.
Sin embargo otra opción es corregir las imágenes que están mal una vez terminado el proceso de maquetado. Para ello podemos abrirlas con un programa gráfico, cambiar las propiedades del perfil de color y volver a almacenarlas. Este es un proceso tedioso.
Usando la opción "profile" y "strip" del clásico programa convert (imagemagick), se puede conseguir el mismo efecto. El comando sería
convert IMAGEN_ORIGINAL -profile FICHERO_PERFIL_ORIGEN -strip IMAGEN_RESULTADO
El fichero del perfil de origen suele localizarse en un directorio similar a /usr/share/ImageMagick-6.3.7/config/sRGB.icm, y en general el perfil sRGB es suficientemente similar a cualquiera que use nuestro programa como para que no se aprecie la diferencia si hemos trabajado con otro perfil distinto.
Podemos hacer este comando recursivo, para que se aplique a todas las imágenes PNG de un directorio de forma recursiva, y guarde las modificaciones en el mismo fichero que el origen. El resultado sería similar a éste:
find * -name "*png" -exec convert "{}" -profile /usr/share/ImageMagick-6.3.7/config/sRGB.icm -strip "{}" \;
Por último, si por algún motivo, quisiésemos aplicar un perfil de salida en lugar de eliminar el perfil, podríamos especificarlo con una segunda opción "profile" en lugar de strip, algo similar a
convert IMAGEN_ORIGINAL -profile FICHERO_PERFIL_ORIGEN -profile FICHERO_PERFIL_RESULTADO IMAGEN_RESULTADO
Un detalle que creo que no es correcto, o mejor dicho, que habría que concretar, es que todos los navegadores actuales (al menos, los más usados: Firefox, Chrome, IE7/8, Opera, etc.) soportan transparencias en PNGs (no, IE6 no es actual :D)
ResponderEliminarBueno, eso es cierto... aunque también hay un problema: partiendo de un diseño gráfico, maquetar recortando es mucho más sencillo que hacerlo haciendo transparencias........ :D
ResponderEliminar