Profundidad del Color en Diseño Grafico

PROFUNDIDAD DEL COLOR

La calidad del color de una imagen de mapa de bits la determina la cantidad de información utilizada para representar cada píxel. Nos referimos a la información que se guarda para cada píxel como profundidad de color del píxel o también profundidad del píxel.

Las posibilidades de codificar información de color dependen del número de bits que dediquemos para cada píxel. Así, a una imagen que disponga de mayor número de bits tendrá mayores posibilidades cromáticas pero también ello incidirá en que ocupará más memoria de almacenamiento en el ordenador, será un archivo con mayor información y mayor peso. Se dice que una imagen tiene una profundidad de color de 1 bit o de 8 bits, en función de los bits asignados a la codificación del color para cada píxel. De esta manera podemos determinar la siguiente escala:

En función del contexto de trabajo tendremos que llegar a un compromiso entre la calidad que deseamos para la imagen y la cantidad de memoria que va a necesitar el archivo. Esto es especialmente importante en la creación de gráficos para Internet donde, debido al ancho de banda, reducir la memoria que ocupan los gráficos puede ser importante.

Curso de Diseño Gráfico

Gráficos vectoriales

En los gráficos vectoriales la información de la imagen no se almacena sobre la base de una matriz de píxeles, como en los gráficos de mapa de bits. Lo que codifica el gráfico es la información numérica de la geometría del mismo. Por lo tanto, tenemos objetos gráficos independientes entre sí que se definen por puntos de coordenadas y vectores que unen dichos puntos.

Ejemplo de un triángulo en un gráfico de mapa de bits (a una resolución baja). Tenemos información del color de cada punto de la imagen (representados aquí por las casillas). No tenemos información del triángulo en sí, éste se muestra a partir de la información de los puntos. El gráfico está guardado en un fichero GIF.

Ejemplo de un triángulo en un gráfico vectorial. El triángulo se define a partir de las coordenadas de sus vértices y de la unión de éstos a partir de líneas rectas. Tenemos pues la información geométrica del objeto. El gráfico está guardado en un fichero SWF.

Hay varias formas de codificar una imagen a partir de vectores. La más extendida entre los programas y los formatos de fichero de gráficos vectoriales es la que se basa en las llamadas curvas de Bézier o por extensión objetos Bézier.

Objetos Bézier

Los objetos Bézier son segmentos de línea conectados entre sí por nodos. Cada segmento lo entendemos como un vector con un punto inicial y un punto final que definen la línea. A estos se añaden dos puntos de control que definen la curvatura de la misma. Los puntos de control parten de las tangentes de cada uno de los puntos extremos o nodos. Cuando los cuatro puntos están alineados tenemos una recta. Cuando los puntos de control se separan tenemos algún tipo de línea curva. Esta curva está siempre contenida dentro de un polígono cuadrilátero cuyos vértices son dichos cuatro puntos. La curva se calcula a partir de una interpolación creada por una secuencia de funciones que se basa en las coordenadas de los puntos. Esto hace que sea escalable y se vea bien a cualquier nivel de ampliación.
El software de gráficos vectoriales encuentra en las curvas de Bézier una metodología fácil de usar y de computar. La forma de trabajar se parece pero no es exactamente la misma que se ha visto en nuestra demostración anterior. La práctica del dibujo vectorial ha permitido depurar una interfaz más eficaz y «amable».

Curvas de Bézier en gráficos 3D

Aquí estamos viendo el uso de curvas de Bézier en software de gráficos de dos dimensiones. Pero Pierre Bézier quería las curvas para diseñar carrocerías de coche. Por lo tanto, quería curvar superficies, no sólo líneas. El procedimiento es el mismo. Para entenderlo podemos empezar describiendo una superficie curva dentro de un cubo y luego deformar este cubo (cambiando las posiciones de sus vértices) modificando así la curva inscrita en él.

Un conjunto de curvas de este tipo conectadas entre sí nos permitirían definir cualquier superficie.
El software de gráficos 3D (que escapa de los objetivos de este material) usa también las curvas de Bézier para definir la forma de las superficies.

Uso de las curvas de Bézier en la geometría de las fuentes tipográficas

En tipografía digital es necesario un sistema de codificación de la información geométrica que permita que los tipos se impriman perfectamente a cualquier tamaño. Para ello también se usa el sistema de Bézier que fue adoptado como sistema estándar de codificación de curvas para el lenguaje Postscript. Es pues el sistema usado en las fuentes True Type (con curvas de segundo orden) y Postscript Tipo 1 (con curvas de tercer orden).

Para crear una línea se van creando los nodos, conectados entre sí por líneas rectas. Si se quiere curvar uno de éstos segmentos se extrae de «dentro» de uno de los nodos un manejador, que en realidad es un punto de control o vértice del polígono. Regulando el manejador correspondiente a cada nodo se define la forma de la curva.
En los programas de gráficos es habitual llamar pluma a la herramienta que permite crear curvas de Bézier de esta forma. También se suele representar por el icono de una pluma estilográfica.

Aunque al formularlas como «normas» usamos un tono categórico, no hay que perder de vista que el diseño gráfico tiene un carácter experimental y cualquier norma puede ser cuestionada y subvertida. Estas normas son el resultado de la experiencia práctica y ahí reside su valor.
Otro aspecto importante a tener en cuenta es la diferencia entre puntos de vértice y puntos de curva. Cuando conectamos dos segmentos curvos, si queremos que la curva tenga una buena continuidad, las dos tangentes del nodo que comparten los segmentos deberán estar alineadas. En cambio si el nodo hace la función de vértice las dos tangentes no estarán alineadas.

a) Aquí tenemos dos segmentos curvos bien conectados entre sí. Observad que las tangentes del nodo central están alineadas. El resultado es una curva que fluye sin «roturas». b) En esta línea las tangentes del nodo central no están alineadas y la curva no tiene buena continuidad. c) Aquí el nodo central es un vértice, deliberadamente los dos segmentos no forman una línea continua. Las tangentes no están alineadas y forman un ángulo.

El software de gráficos nos facilita aquí la tarea permitiendo que los dos manejadores se muevan conjuntamente o sean independientes entre sí. La mayor parte de programas de dibujo vectorial permiten que un punto sea de tipo vértice o de tipo curva y pasar de un tipo a otro cambiando las propiedades del punto.

Vea nuestro Máster en Diseño Gráfico

Conceptos clave sobre la profundidad del color

1. ¿Qué es la profundidad del color?

• Definición: Es el número de bits asignados para representar el color de cada píxel en una imagen.
• Bit: En términos simples, un bit es una unidad de información que puede tener uno de dos valores posibles, generalmente 0 o 1.
• Bits por canal de color: La profundidad de color se mide en bits por canal, y cada canal (rojo, verde y azul en el modelo RGB) puede tener diferentes profundidades.

2. Tipos de profundidad de color comúnmente utilizados

8 bits por canal (24 bits)

• Total de bits por píxel: 24 bits (8 bits por cada uno de los tres canales de color: rojo, verde y azul).
• Colores posibles: 16.7 millones de colores (256 niveles de color por canal: 256 x 256 x 256).
• Uso común:
  • Imágenes digitales estándar (fotografías, gráficos web).
  • Es el formato más común para imágenes en la web y la mayoría de los dispositivos.
• Ventajas:
  • Buen equilibrio entre calidad y tamaño de archivo.
  • Suficiente para la mayoría de las aplicaciones digitales.

16 bits por canal (48 bits)

• Total de bits por píxel: 48 bits (16 bits por canal: rojo, verde y azul).
• Colores posibles: Más de 281 billones de colores.
• Uso común:
  • Edición de imágenes de alta calidad en aplicaciones profesionales como Adobe Photoshop.
  • Producción de imágenes para impresión de alta gama.
• Ventajas:
  • Permite una mayor precisión en la representación de colores y gradientes.
  • Menos riesgo de bandas de color o pérdida de detalle en las sombras y luces.
  • Ideal para trabajo en imágenes RAW de cámaras profesionales.

32 bits por píxel (32-bit color o color HDR)

• Total de bits por píxel: 32 bits (generalmente 8 bits por canal, con un canal alfa adicional de 8 bits para transparencia).
• Colores posibles: Similar a los 24 bits, pero incluye un canal alfa que permite la transparencia.
• Uso común:
  • Gráficos web y de interfaz de usuario que requieren transparencia.
  • Imágenes con efectos especiales o composiciones digitales.
• Ventajas:
  • Soporta la transparencia y es útil en diseño gráfico web y multimedia.
  • Adecuado para gráficos que combinan imágenes y texto, o que requieren efectos de superposición.

32 bits por canal (128 bits)

• Total de bits por píxel: 128 bits (32 bits por cada canal de color).
• Colores posibles: Miles de millones de colores (utilizado para imágenes de alto rango dinámico, HDR).
• Uso común:
  • Producción cinematográfica y efectos visuales.
  • Imágenes de altísima calidad donde la precisión en el color es crucial, como en la fotografía digital profesional y la edición de video.
• Ventajas:
  • La mayor profundidad de color ofrece una gama más amplia de colores y mayor precisión.
  • Ideal para imágenes HDR (alto rango dinámico), que requieren gran detalle en las sombras y luces.

Importancia de la profundidad del color en diseño gráfico

1. Calidad de imagen

• Cuanto mayor sea la profundidad de color, más suave y rica será la transición entre colores y tonos. Esto se traduce en imágenes más detalladas, sin banding (líneas visibles en las transiciones de color) y con más detalles en las sombras y luces.

2. Realismo

• La profundidad de color más alta ayuda a representar una gama más amplia de colores, lo que permite un diseño más realista, especialmente en trabajos fotográficos o de ilustración digital.

3. Edición de imágenes

• Para los diseñadores gráficos que necesitan realizar ajustes detallados (como cambiar el color de una imagen o corregir la exposición), trabajar con una mayor profundidad de color es crucial, ya que permite cambios más suaves sin degradar la imagen.
• Los gráficos con más bits por canal ofrecen más flexibilidad en la edición, lo que es fundamental para trabajos profesionales como la creación de contenido para impresión o proyectos fotográficos de alta calidad.

4. Impresión

• Colores más precisos: Al trabajar con alta profundidad de color, los colores pueden ser más precisos, lo que es crucial cuando se preparan imágenes para impresión de alta calidad.
• Espacios de color: Las imágenes con alta profundidad de color permiten un rango más amplio de colores que se puede reproducir en impresoras, especialmente cuando se trabaja con espacios de color como CMYK (cian, magenta, amarillo, negro).

5. Producción de video y efectos visuales

• En la producción de video, especialmente en efectos visuales y composición, trabajar con 16 bits o 32 bits por canal permite obtener transiciones de color más suaves, así como una mejor representación de los detalles en áreas de luces y sombras.

Relación entre la profundidad del color y el tamaño del archivo

• Mayor profundidad = mayor tamaño de archivo: A medida que aumentamos la profundidad de color, el tamaño de la imagen o archivo aumenta. Esto se debe a que se requiere más información para representar cada píxel en la imagen.
  • Ejemplo: Una imagen de 8 bits por canal ocupará mucho menos espacio que una de 16 bits por canal.
• Consideración para la web: Para imágenes que se utilizarán en la web, la profundidad de color de 8 bits por canal (24 bits) es generalmente suficiente. Para impresión o trabajos profesionales, se opta por mayores profundidades de color.

Elección de la profundidad de color adecuada

• Para la web:
  • 8 bits por canal (24 bits) es generalmente adecuado. Proporciona una amplia gama de colores mientras mantiene el tamaño del archivo manejable.
• Para impresión profesional:
  • 16 bits por canal (48 bits) es ideal, ya que ofrece una mayor precisión en la reproducción de colores, lo que es fundamental para impresiones de alta calidad.
• Para fotografía o retoque de imágenes:
  • Usar 16 bits por canal proporciona una flexibilidad adicional para corregir colores y realizar ajustes detallados sin perder calidad.