Imágenes digitales

La imagen se define como toda forma percibida generalmente por el sentido de la vista. La idea de imagen dentro del diseño está asociada al concepto gráfico. Las imágenes utilizadas en computadora suelen ser creadas en programas o bien tomadas de la realidad a través de diversos medios (como cámaras digitales) y son procesadas bajo el código binario. Estas imágenes se clasifican en dos tipos: imagen de mapa de bits e imagen vectorial; sin embargo, no es una división tajante, ya que las imágenes vectoriales suelen admitir la incrustación de imágenes de mapa de bits en su interior y los programas especializados en dibujo vectorial (Illustrator, FreeHand y CorelDRAW) cada vez tienen más cualidades de los programas de tratamiento de imágenes de mapa de bits (Photoshop, o Corel Photo-Paint) y viceversa.

Imagen de mapa de bits o bitmap

Es una estructura de datos que representa una rejilla rectangular de pixeles o puntos de color conocida como raster, la cual puede visualizarse en un monitor de computadora, papel u otros dispositivos de representación¹. Este tipo de imágenes se obtiene de medios como el escáner o las cámaras digitales; su representación en pantalla es a través de la unidad mínima denominada pixel, que proviene del inglés picture element.

Pixel es la menor unidad en que se descompone una imagen digital, ya sea una fotografía, fotograma de video o gráfico. A pesar de ser una unidad de medida, un pixel es un concepto inmaterial que no tiene una medida concreta.

Sólo cuando se le asigna una resolución a la imagen de la que se habla, se le está dando un tamaño concreto al pixel. Es como tener una gran cantidad de estos pixeles organizados uno tras otro en forma horizontal y vertical hasta formar una matriz. De esta manera, al ver la matriz, el ojo humano percibe una imagen, aunque sólo esté conformada por pequeños puntos. Entre más grande sea el número de puntos por unidad de superficie, mejor será la calidad o resolución de una imagen. Es decir, a mayor resolución, mayor nitidez del dibujo y mejor reflejo de los detalles. La resolución de las imágenes parte del número de puntos de largo por el número de puntos de alto que la definen, y queda definida como dot per inch (DPI) o puntos por pulgada (PPP).

Ejemplo de una estructura que representa una rejilla rectangular de pixeles o puntos de color

(s. a.) (2007). Raster vector [ilustración]. Tomada de https://es.wikipedia.org/wiki/Archivo:Raster_vector_gis.png

Imagen donde se muestran pixeles que la conforman

(s. a.) (2010). Detalle de una imagen en mapa de bits [ilustración]. Tomada de https://es.wikipedia.org/wiki/Imagen_de_mapa_de_bits#/media/File:Rgb-raster-image-es.png

Fotografía de una flor descompuesta en pixeles

Durham, J. (2009). Pixel [fotografía]. Tomada de http://mrg.bz/95f235

Acercamiento a la pantalla de computadora en la que se aprecian los pixeles que conforman la imagen

(s. a.) (2007). Pixeles vistos desde una pantalla [fotografía]. Tomada de http://mrg.bz/5e8a96

Imagen vectorial

Este tipo de imágenes se crea mediante cálculos matemáticos y coordenadas sobre los ejes “X” y “Y” en la pantalla que describen posiciones de puntos trazados sobre la pantalla de la computadora. En las imágenes vectoriales los trazados (líneas curvas o rectas) se modifican fácilmente, ya que se generan como objetos independientes y, a su vez, se constituyen por otros objetos que también lo son. Esta independencia se debe a que, al definir cada uno de ellos e integrarlo en la imagen, no pierde sus características de objeto, ya que se puede editar y manipular en su momento, sin que por ello los demás componentes del dibujo se vean modificados. Esto no ocurre con los mapas de bits ya que, al incluir un elemento en la imagen (al dibujar un cuadrado, por ejemplo), éste queda automáticamente incrustado en la imagen y no puede volver a editarse independientemente.

Ejemplo de un vector donde se observa detalladamente (columna izquierda) que éste no pierde sus características de objeto

(s. a.) (2007). Ejemplo donde se pueden comparar los gráficos vectoriales (columna de la izquierda) con los gráficos rasterizados (columna de la derecha) [ilustración].
Tomada de https://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial#/media/File:PixelZoom.png

Las vectoriales se almacenan en muy poco espacio; además, son independientes de la resolución, ya que no dependen de una retícula determinada. Se pueden editar por medio de curvas Bézier, con el inconveniente de tener dificultades al tratar algunas cosas de forma “natural” (sombras, luces, etcétera). Cuando los archivos son grandes o complejos, se vuelven difíciles de manejar. Para las artes gráficas, el formato de archivo para las imágenes vectoriales es EPS o AI. Esta forma de dibujar simplifica enormemente el diseño y las modificaciones de los dibujos, ya que se parte de objetos muy sencillos para ir formando otros más complejos, aunque también presenta diversos problemas como la lentitud a la hora de redibujar una imagen ya definida, ya que se deben hacer los cálculos de cada objeto para dibujarlo posteriormente. Esta lentitud aumenta según la complejidad del dibujo, ya que una imagen puede estar formada por miles de objetos.

Se denomina curva de Bézier a un sistema para el trazado de dibujos. En este ejemplo, se muestra una curva cúbica de Bézier donde se aprecian los puntos o nodos de anclaje P1 y P2.

(s. a.) (2005). Construcción de una curva de Bézier [ilustración].
Tomada de https://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier#/media/File:Bezier.png

Además del formato y la resolución, un factor imprescindible en la imagen es el color. En términos técnicos, se habla de profundidad de color en la imagen, es decir, la cantidad de bits de información necesarios para representar el color de un pixel en una imagen digital. Matemáticamente se resuelven a través del sistema binario lo cual, para los fines de este tema, podría ser complejo e innecesario. Sólo se tratará a continuación el concepto de modelo de color en la imagen. Los modelos de color describen los colores que pueden verse en las imágenes digitales e impresas y el trabajo con ellos, lo cual representa un método diferente (y por lo general, numérico) de descripción de los colores. Básicamente se necesitan diferenciar tres modelos de color para trabajar en multimedia: modelo RGB, modelo CMYK y modelo HSB.

Modelo RGB

RGB es el modelo de síntesis aditiva del color o color luz. Es un modelo de definición de colores utilizado en trabajos digitales donde cada punto de la pantalla es un pixel y cada pixel es, en realidad, un conjunto de tres subpixeles: rojo, verde y azul. Cada uno brilla con una determinada intensidad. Para indicar con qué proporción se mezcla cada color en pantalla, se asigna un valor a cada color primario; de esta manera, por ejemplo, el valor 0 (cero) significa que no interviene en la mezcla y, en la medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. De esta forma, un color cualquiera vendrá representado en el sistema RGB mediante la sintaxis decimal (R, G, B) o mediante la sintaxis hexadecimal (#RRGGBB).

Modelo aditivo de colores rojo, verde, azul (RGB, sigla en inglés de red, green, blue)

(s. a.) (2006). Modelo aditivo de colores rojo, verde, azul [ilustración].
Tomada de https://es.wikipedia.org/wiki/RGB#/media/File:Synthese%2B.svg

Modelo CMYK

CMYK corresponde a la síntesis sustractiva o color pigmento. Este modelo se aplica a medios impresos en cuatricromía. En el modo CMYK, a cada pixel se le asigna un valor de porcentaje para las tintas de cuatricromía (azul cian o cyan, rojo magenta, amarillo o yellow y negro o black).

(s. a.) (2012). Modelo sustractivo cian, magenta y amarillo [ilustración].
Tomada de https://commons.wikimedia.org/wiki/File:CMY%E6%B7%B7%E8%89%B2%E6%A8%A1%E5%BC%8F.png

Modelo HSB

Otro modelo de definición del color es el HSV o HSB, basado en la percepción humana del color. Toma como base el trabajo de Albert Munsell y sus estudios de la percepción humana del color, al definir los colores en función de las tres propiedades del color (matiz, luminosidad y saturación). El matiz o tonalidad se representa como un grado de ángulo cuyos valores posibles van de 0 a 359° (aunque para algunas aplicaciones se normalizan del 0 al 100 %). Cada valor corresponde a un color. Ejemplos: 0° es rojo, 60° es amarillo y 120° es verde (Calvo, 2011).

Se trata de una transformación no lineal del espacio de color RGB.

(s. a.) (2006). Espacio de color HSV como una rueda de color [ilustración].
Tomada de https://es.wikipedia.org/wiki/Modelo_de_color_HSV#/media/File:Triangulo_HSV.png /

Imagen en multimedia

Usar imágenes le da un carácter al multimedia, sobre todo cuando la serie de imágenes reciben el mismo tratamiento formal o por lo menos existe una familiaridad entre ellas, ya sea por el tamaño, enmarcado, posición, etcétera. Esto puede llevar a definir un estilo en la imagen que le dará una característica visual o un sello específico. El estilo puede definirse como la propuesta del manejo de los elementos para crear una personalidad. Además, marcar un estilo en la propuesta gráfica es relevante porque puede darle forma al contenido y, con ello, atraer al usuario. Al momento de trabajar para multimedia, se deben tener claros los objetivos y el público a quien se dirige ya que, a partir de ello, se puede determinar el estilo conveniente. Los elementos que acompañan a la imagen son un factor importante: son parte de la composición en la pantalla. El tratamiento que se dé a una imagen puede hacerla resaltar entre todos los elementos de esa pantalla o verse supeditada a otros contenidos. Esto mismo puede ocurrir con cualquier medio que es acompañado por otros.

Fundamentos del diseño

El lenguaje visual es la base de la creación del diseño; para ello, es indispensable conocer o manejar los principios, reglas o conceptos que aumentarán la capacidad del diseñador para lograr una buena organización visual. Se deja en claro que el diseño tiene como función principal resolver problemas comunicativos mediante la creación de significados. A través de los fundamentos del diseño se obtiene conocimiento en la conjugación estética, semántica y formal de los elementos que intervienen en la composición. Esta conjugación debe mantener la atención y despertar cierta curiosidad en el usuario; de esa manera, logrará ser atrayente para que el usuario se muestre receptivo y se pase a la creación de significados. Esta creación depende de la forma en que se muestre la información al usuario, en que se hayan trabajado los contenidos y en que se encuentren estructurados para su presentación. Esta forma de presentación hace que el usuario receptivo asocie lo que ve con lo que conoce; de esta manera, se familiariza con las cosas y le resulta más sencillo aprender.

Los elementos formales del diseño mostrados a continuación tienen como finalidad plantear categorías de los contenidos para tenerlos identificados por la función que se espera cumplan en la composición de la pantalla². Se puede definir a la composición como la ordenación adecuada de los elementos del diseño dentro de un espacio o formato, ya sean texto o ilustraciones, destinados a lograr los objetivos propuestos, es decir, impactar visualmente al público receptor del mensaje.

Elementos conceptuales: No son visibles, sino que parecen estar presentes. Son cuatro elementos: punto, línea, plano y volumen.

Elementos visuales: Son los que realmente se ven; tienen forma, medida, color y textura. Tienen una carga importante en la interpretación para la creación de significados. Son cuatro elementos: forma, medida, color y textura.

Elementos de relación: Permiten percibir la ubicación e interrelación de las formas en la composición. Son cuatro elementos: dirección, posición, espacio y gravedad.

Elementos prácticos: Relacionan el contenido con la interpretación. Son tres: representación, significado y función.

Ésta no es la única forma en que se pueden clasificar; el tiempo y la experiencia son recursos que ayudan a una posible modificación y replanteamiento. Estos elementos están relacionados entre sí y no se pueden separar en la apreciación de un diseño porque conforman por sí mismos la composición. Si se trata de iniciar el trabajo con el diseño de la interfaz, lo primero a determinar es el área de diseño (forma, tamaño y dimensión que se asignará al espacio del que se dispone en la composición gráfica) y, posteriormente, la posición en que se colocarán los elementos y su tamaño. Esto se logra con la ayuda de trazos de redes o retículas. En este punto, se evidencia la jerarquía de los elementos, lo cual se entiende como la atracción visual que ejerce uno o más de los elementos como consecuencia de su diseño, color, posición o tamaño en relación con el contexto donde se encuentre. Dicho de otra forma, el protagonismo de un medio o recurso comunicacional se da en relación con el todo. La importancia que tome cada uno en pantalla depende de la intencionalidad del autor en relación con los objetivos de la pantalla y el producto. En el diseño como disciplina, existen innumerables conceptos y recursos que por sí mismos son importantes. Ya se han mencionado algunos; otros más son la tipografía, color, trazo, estilo, textura, tamaño, contraste, proporción, espacio, posición, dirección, etcétera. Todos ellos se conjugan y resuelven la composición gráfica. Al tener conocimiento de estos elementos cada uno se manipula para conseguir el propósito buscado. El proceso de diseño de la interfaz debe ser una actividad objetiva para convertirse en una experiencia subjetiva por parte del usuario. Sin embargo, lo que puede ayudar para proponer diseños eficientes de pantallas que faciliten el uso del programa son las siguientes pautas: simplicidad, consistencia y claridad.

Simplicidad

Es un recurso difícil de conseguir ya que, por un lado, requiere el conocimiento y manejo de los fundamentos del diseño y, por otro, el conocimiento de los contenidos y objetivos del programa. Se debe tener cuidado al tratar de cumplir con esta pauta, ya que se puede desviar la intención y caer en diseño con simpleza, sin atractivo. A través de la simplicidad, se transmite el contenido de forma clara y concisa para lograr una comunicación efectiva. Se trata de hacer un diseño sencillo que dé importancia a la relación del todo para proyectarse.

Consistencia

Se relaciona con la coherencia y unidad en la propuesta. Cada elemento debe mantener sus principios de diseño, ubicación espacial y acciones dentro de la aplicación multimedia, lo cual garantiza al usuario la automatización en ciertos procesos y comprensión en la navegación del sistema. De esta forma, la atención del usuario se orienta a los contenidos e interrelaciones de los medios para la formación de conceptos.

Claridad

Se trata de hacer evidente al usuario lo que debe esperar de las acciones que realice en pantalla, o bien, que entienda las relaciones y diferencias existentes entre los elementos. La claridad tiene mucho que ver con lo que se denomina diseño intuitivo, donde cada acción es entendida de forma inmediata. En el diseño de una interfaz existen dos puntos de mayor relevancia para una correcta interacción: aspecto visual y organización. Es muy importante realizar un diseño de interfaz ergonómico ya que, según el agrado y comodidad causado, el usuario lo aceptará o rechazará.

Algunos puntos a aplicar en un diseño de interfaz ergonómico son los siguientes:

Conocer su objetivo y funcionalidad.
Buscar siempre el equilibrio óptimo entre la sensación visual y la información textual o gráfica.
Seleccionar colores que sean posibles de combinar y, al mismo tiempo, resulten agradables para la vista.
Uniformidad de colores; evitar combinaciones altamente contrastantes y desagradables.
Rotulados adecuados para indicar la presencia de zonas sensibles, botones o elementos de interés para el usuario.
Consistencia entre los diferentes medios que se utilizarán.
Mantener una misma tipografía; variar solamente el tamaño y estilo según el uso.
Correcta organización de los medios en pantalla; procurar mantener la misma posición.
Evitar la saturación de medios.
Calidad de los medios por presentar.
Sencilla estructura de navegación.
Consistencia en los enlaces.

Diseñar una interfaz gráfica es resolver un problema para un caso específico. No hay que obstinarse e imponer diseños que podrían no ser útiles. Es preciso entender que muchas buenas soluciones se pierden debido a la fijación del diseñador en una idea favorita. Hay que tomar en cuenta cuál de ellas es funcional y cumple con los objetivos del proyecto.

Formatos gráficos

Son las características asignadas a los archivos gráficos o de dibujo procesados en un medio electrónico. Dichas características o propiedades especifican la cantidad de colores, calidad del archivo, si es una imagen fija o en movimiento, programas que permiten su edición o presentación y uso que se le dará.

Formatos de archivos gráficos

Con base en lo expuesto hasta ahora, se entiende que no todas las imágenes que se ven en la pantalla de un monitor son iguales; cada una presenta ciertos atributos determinados y se muestran de manera diferente. Otra característica de las imágenes por computadora es la extensión con que se han almacenado. A través de esa extensión, se conocen datos específicos en la técnica con que fueron hechas. La primera información que provee la extensión es respecto al tipo de información del archivo, lo cual permite distinguir entre un archivo de texto, de video, de animación, de audio o de imagen. Esas características que da la extensión del archivo gráfico se conocen como formatos gráficos, dependientes también de una serie de circunstancias especiales que permiten manipularlas y visualizarlas. Cada aplicación para el manejo de información gráfica como la imagen determina un formato o extensión particular, aunque esto también depende de lo que se desee hacer con dicha imagen.

Existe una gran variedad de formatos en que se puede almacenar una información gráfica; si se desconoce su uso, se puede complicar el trabajo al requerir compartir entre diferentes aplicaciones. Este problema se ha solventado al incluir en los programas que utilizan imágenes un abanico de formatos en lugar de uno solo, lo cual facilita enormemente la comunicación entre programas.

TIFF

El formato TIFF (tagged interchange file format o formato de archivo de imágenes con etiquetas) fue diseñado para ser un formato universal de imagen. Contiene etiquetas o tags que guardan datos de la geometría de la imagen, como su tamaño, o determinan la forma en que han sido organizados y comprimidos los datos. Esta opción permite tener cualquier tipo de formato de imagen en el archivo. Fue desarrollada por Aldus, compañía perteneciente actualmente a Adobe. Debido a su nivel de estandarización (tanto para PC como para Macintosh), el formato TIFF es el más popular entre los usuarios de computadoras, sobre todo en el mundo del diseño publicitario y la autoedición. Se utiliza en las artes gráficas y en fotografía para evitar pérdidas en la calidad de la imagen, ya sea para imprimirla o interpolarla y aumentar su resolución. El formato TIFF está compuesto por varias especificaciones diferentes; se guarda con 48 bits de color, incluyendo capas y canales alfa. El canal alfa almacena información de transparencia de una imagen; los formatos de archivo que maneja el canal alfa son: Adobe Photoshop, TGA, TIFF, EPS, PDF, Adobe Illustrator, QuickTime, entre otros. Actualmente existen otros formatos más populares para el manejo de imágenes en la computadora que el formato TIFF.

BMP

Es un tipo de archivo propiedad de Microsoft; generalmente se utiliza únicamente en el sistema operativo Windows. La imagen que se almacena en este formato contiene una profundidad de color de 32 bits (4 294 967 296 colores), 24 bits (16 777 216 colores), 8 bits (256 colores) y menos.

GlF

El formato GIF fue creado por CompuServe; es un formato indicado para guardar imágenes de logotipos, imágenes de colores planos, dibujos y, en general, imágenes sencillas. No se recomienda su uso con imágenes fotográficas que requieren resoluciones de mayor calidad por la restricción de colores: cuenta con una paleta de 256 colores que puede reducirse. Es un formato que tiene compresión LZW, sin pérdidas y entrelazado.

EPS

Los archivos EPS son un subconjunto del lenguaje PostScript creado por Adobe Systems Inc., llamado PostScript encapsulado. En este formato, se pueden guardar imágenes de mapa de bits como vectoriales. Otra ventaja importante de este tipo de archivos es su capacidad para especificar tonos de grises mediante el uso de patrones de puntos, lo cual resulta muy benéfico a la hora de imprimir imágenes en escala de grises o de colores si se está utilizando una impresora que sólo pueda imprimir en blanco y negro. Las imágenes en formato EPS pueden ser incluidas como tales en procesadores de textos y programas de imagen, siempre que dispongan de EPS vinculados.

JPEG

El formato JPEG fue diseñado por la corporación Joint Photographics Experts Group para realizar sus trabajos de fotografía digital; las siglas de este grupo son las que dan el nombre al formato JPEG o JPG. Su soporte de color verdadero (24 bits) ofrece imágenes con una profundidad de 16 777 216 colores. La compresión del archivo se puede graduar, lo cual permite decidir si se guarda la información de la imagen en baja calidad (esto implica un menor tamaño en el archivo) o en imagen con alta calidad (esto representa mayor peso). Si la imagen va a sufrir algún cambio en su edición, es recomendable hacerlo con otro tipo de formatos como TIFF o BMP para conservar su calidad; de otra manera, cada vez que se guarde la imagen en formato JPG se provocará una pérdida de calidad por la compresión constante que recibe al momento de guardarse. Se puede decir que todas las cámaras almacenan la información fotográfica en formato JPG con opciones de modificar la calidad del archivo.

PNG

Las siglas provienen del nombre portable network graphics; entre sus características, utiliza el algoritmo de compresión LZW (Lempel-Ziv-Welch). Al parecer, las empresas Compuserve, Netscape, Spyglass, así como el consorcio Consorcio WWW (W3C) son los interesados en producir un formato de esta naturaleza. El formato despliega millones de colores con una profundidad mayor a la del común de los archivos gráficos al soportar los modelos básicos de color comúnmente utilizados. No acepta la animación de imágenes, aunque da la opción de manejar archivos transparentes gracias a que el formato incluye un canal alfa. Su formato de compresión es de alta calidad y la imagen puede tener una mejor visualización, pero su peso puede ser un poco mayor de lo normal. Cada creador debe considerar esa característica para su manejo.

RAW

El formato RAW es utilizado habitualmente para imágenes que pueden ser de 8 y 24 bits. Su característica principal estriba en que no guardan ninguna información sobre la paleta o la resolución de la imagen. Otra característica peculiar de este formato consiste en que, al almacenar una imagen en color real, cada color primario se almacena en un archivo separado. Las imágenes en escala de grises o 256 colores se almacenan en un solo archivo. El formato RAW resulta útil para expertos que deseen manipular directamente las imágenes y tener un control total de cada color.

Profundidad de color

En las imágenes, otra característica importante por considerar es la profundidad de color en la imagen, es decir, la cantidad de colores diferentes que puede tener un pixel. Para mejor referencia, se muestra a continuación una tabla de consulta:

Profundidad de color (Número de datos o bits por pixel)	Tonos (colores) posibles	Usos
1 bit por pixel	2 tonos (21)	Arte lineal (B&N) (Modo mapa de bits)
4 bits por pixel	16 tonos (24)	Modo escala de grises
8 bits por pixel	256 tonos (28)	Modo escala de grises (-8 x 1 = 8) Modo color indexado Cantidad estándar de colores que admiten los formatos GIF y PNG-8, así como muchas aplicaciones multimedia
16 bits por pixel	65.536 tonos (216)	High color
24 bits por pixel	16 777 216 tonos (224)	TrueColor (relacionado con que el ojo humano puede distinguir un máximo de 16 millones de colores) Modo RGB (8 bits por canal) (8 x 3 = 24) ModoLab (8 bits por canal) (8 x 3 = 24)
32 bits por pixel	4 294 967 296 tonos (232)	4 294 967 296 tonos (232)

Creación de un archivo de imagen

La creación de una imagen responde a los factores conceptual y técnico. Lo conceptual determina las características semióticas de la misma, como el sentido-significación que se desea transmitir, la función que se espera realice, si acompaña a otros medios o tiene un rol principal, si es ilustrativa o descriptiva, etcétera. Asimismo, es deseable determinar el estilo que se desea manejar y se relaciona con el realismo o la figuración, entre otros aspectos. Respecto al factor técnico se debe conocer la función que cumplirá, es decir, si será un fondo de pantalla, medio para alguna interacción, si aparece en alguna área específica (como una ventana flotante), si requiere transparencia o no, si la imagen cambiará sus proporciones mediante la programación, entre otros aspectos determinados por el diseño de la interfaz del proyecto y la programación. Una vez determinadas esas características, la creación de una imagen de mapa de bits se realiza de la siguiente manera:

Swipe left or right

Crear una imagen de tipo vectorial