Introducción al diseño digital interactivo
Introducción al diseño digital interactivo
- Introduces the concept of visual communication through images.
- Explains the two main types of digital images: vector and raster (bitmap) images, and their differences.
- Discusses image formats such as JPEG, GIF, PNG, TIFF, BMP, PSD, EPS, PDF, and WebP, covering their properties, uses, and compression methods.
- Highlights the importance of image compression (lossy and lossless) and how reducing the number of colors can affect file size and quality.
- Mentions the color depth and color range in the digital images.
Introducción al diseño digital interactivo
@ProfGastonPerez2 weeks ago

Imágenes vectoriales y mapa de bits
Cuando nos referimos a la música, al canto o al habla, diremos que se emplean sonidos. Cuando nos expresamos con palabras la comunicación es verbal. Si son palabras habladas se trata de una comunicación oral, y si las escribimos será una comunicación escrita. Para comunicarnos utilizamos sonidos, gestos y palabras.
En la comunicación visual, entre otros elementos, utilizamos imágenes. Ãstas pueden reforzar o acompañar textos y, a veces, las utilizamos solas para comunicar o contar algo. Con una buena imagen podemos transmitir un mensaje de manera rápida y eficaz.
Las imágenes sirven para informar (por ejemplo: una señal de tránsito) y para reconocer y distinguir (por ejemplo: un escudo de un paÃs o una marca). Una imagen puede ayudarnos a aprender y conocer, como en el caso de una infografÃa. Con las imágenes nos entretenemos y nos divertirnos. Pensemos en cuando miramos una caricatura. También con imágenes nos expresamos, como sucede con las fotos y pinturas.
Las imágenes están por todas partes: en nuestra casa, en las calles, en periódicos y revistas, en las tiendas y en las pantallas. Si bien desde la Prehistoria se pinta y se dibuja, con el avance de las tecnologÃas las imágenes se multiplicaron y se viralizaron. Con los efectos de Internet y los nuevos dispositivos de conectividad, podemos decir que estamos invadidos por imágenes, y que éstas han alcanzado una gran importancia como medios de expresión y de comunicación. Por lo tanto, es importante estudiarlas y reconocerlas.
Tipos de imágenes
En diseño en comunicación visual encontramos dos grandes grupos de imágenes digitales:
- -Las vectoriales , que son aquellas originadas en programas como el Illustrator, donde se trabaja con formas geométricas, lÃneas y curvas que son editables mediante los tensores y nodos.
- -Los mapa de bits , que son imágenes compuestas por pÃxeles y habitualmente generadas por cámaras fotográficas y trabajadas en Photoshop.
Las imágenes vectoriales no están formadas por pÃxeles, por lo que no es válido aplicar a ellas el concepto de resolución que estudiamos en textos anteriores. Al no estar compuestas por pÃxeles, a las imágenes vectoriales se las puede agrandar o achicar sin que se produzca una pérdida de calidad o el tan molesto pixelado. Se trata de imágenes "dibujadas" digitalmente a partir de un editor de gráficos como puede ser el Adobe Illustrator o el más hogareño Corel Draw. Se utilizan habitualmente para crear Ãconos, formas, logotipos.
Las imágenes en mapa de bits están formadas por pÃxeles. A cada pÃxel se le asigna un color y, como ya vimos, el conjunto de pÃxeles con distintos valores cromáticos nos permite distinguir la imagen completa. Las imágenes de mapa de bits por excelencia son las fotografÃas capturadas con dispositivos digitales (teléfonos, cámaras, escaners) o con cámaras analógicas. Sin embargo,

también es posible crearlas de cero digitalmente con, por ejemplo, Adobe Photoshop o el más hogareño Photo Paint. El mayor problema de estas imágenes es el pixelado que se produce al agrandarlas, ya que al realizar ese proceso de redimensionamiento el editor de imágenes lo que hace es 'inventar' (crear) pÃxeles nuevos que se añaden entre los pÃxeles existentes tratando de parecerse lo más posible a los pÃxeles que quedan a su alrededor.

El formato de imagen AI
Como dijimos, el formato de imagen AI es propio de A dobe llustrator y con las herramientas y I funcionalidades que nos ofrece podemos crear gráficos vectoriales y editarlos. También podemos "calcar" o "redibujar" una imagen compuesta por pÃxeles para obtener un archivo que podamos manipular más fácilmente.
Este procedimiento es sumamente útil para trabajar imágenes que van a ser reproducidas a gran escala, como cartelerÃa en la vÃa pública, marquesinas, proyecciones en pantallas gigantes, mapeo, etc. Sin embargo, antes de poder utilizarlas y reproducirlas como imágenes propiamente dichas será necesario convertir esos vectores a mapa de bits. Claro que esa "conversión" o "exportado" lo vamos a realizar recién después de haber llevado nuestros diseño en vectores al tamaño real en que pensamos reproducirlo; de esta manera evitamos agrandarlo una vez que ya la hayamos convertido a pÃxeles.
Si nuestro diseño va a imprenta, podremos exportarlo como archivo pdf o eps. Sin embargo, Illustrator también nos permite exportar a formatos de imagen rasterizada como png o jpg, que son algunos de los formatos estándar para trabajar en diseño web, por ejemplo.
A la izquierda vemos el escudo del Club Atlético Boca Juniors dibujado con vectores. Apreciamos los nodos que conforman cada elemento de la figura. Esa imagen podremos agrandarla sin problemas hasta obtener el tamaño en el que la vayamos a aplicar: imaginemos un estadio de fútbol o un cartel en vÃa pública de grandes dimensiones.
A la derecha vemos esa misma imagen convertida (rasterizada) a mapa de bits. Esta imagen ya está compuesta por pÃxeles, no podemos editar individualmente los nodos de ninguno de sus elementos y deberemos utilizarla al mismo tamaño o más chica del tamaño al que la hayamos rasterizado. Si va a cartelerÃa la exportaremos del tamaño en metros que tenga el cartel (entren en juego aquà otras variables que no vienen al caso ahora), si va a estampado sobre tela la

exportaremos del tamaño en el que aplica en la prenda de vestir y si va a la web la exportaremos al tamaño que nos indique nuestra grilla o retÃcula.
Clasificación de las imágenes de acuerdo a su composición de color
Imágenes monocromáticas: están formadas por pÃxeles blancos y negros puros. No se incluyen tonalidades intermedias (grises) ni colores.

Imágenes escala de grises: tienen tonos blancos, negros y grises de hasta 256 tonos. No hay color.


Imágenes duotono: como su nombre indica, se refiere a imágenes que emplean dos colores tinta.

Imágenes color: contienen varios colores, pueden ser RGB o CMYK.

La compresión de las imágenes
La mayorÃa de los formatos de imagen realizan cierta compresión para ahorrar espacio. Ãsta puede ser de dos tipos: LOSSY (con pérdidas) y LOSSLESS (sin pérdidas).
Las imágenes con una compresión sin pérdidas (LOSSLESS) son capaces de reconstruir la imagen a su estado original. No se producen pérdidas. Por el contrario, las imágenes con una compresión con pérdidas (LOSSY) se aproximan a la imagen original, aunque no es exactamente igual (en muchas ocasiones esta pérdida no es apreciable). Obviamente, las imágenes con este tipo de compresión ocupan menos espacio.

Pero, ¿cómo nos conviene guardar nuestras imágenes para optimizar nuestro trabajo? Existen diferentes maneras de compresión y cada una de ellas será apropiada para diferentes situaciones. Los formatos más conocidos son .jpg, .gif, .png, .tif, .bmp, .psd, .webp
Formato de imagen .jpeg / .jpg
La extensión de imagen .jpg o .jpeg es de las más usadas, sobre todo en internet, en fotografÃas o en gráficos web. Es un formato de imagen con pérdidas y pesa poco. Aunque en resoluciones pequeñas puede aumentar notablemente su pixelación, nos ofrece un excelente equilibrio entre peso/calidad. Al guardar una imagen como jpg, podremos elegir el grado de compresión: alto., medio, bajo. Cuanto más compresión, más pérdida. Se recomienda usar el formato de imagen .jpeg o .jpg para imprimir archivos en alta resolución (pero con una baja compresión para evitar demasiadas pérdidas).
Formato de imagen .gif
El formato de imagen .gif es sin pérdidas y se usa casi exclusivamente para web ya que permite crear pequeñas animaciones. Ãltimamente ha adquirido gran popularidad gracias a los memes. A pesar de que .gif es un formato de imagen sin pérdidas, se puede guardar en un formato reducido para menguar su tamaño. Se recomienda usar el formato de imagen .gif para animaciones web como banners, memes o Ãconos. Este formato, además, permite guardar imágenes con un fondo transparente.
Formato de imagen .png
El formato de imagen .png es sin pérdidas y se puede añadir una transparencia con degradado al fondo (.gif solo permite una transparencia pura). Es muy común actualmente y es ideal para gráficos web como Ãconos. Funciona muy bien con una paleta de color reducida. Con .png también se puede guardar fotografÃas con una calidad alta, no obstante se recomienda usar .jpeg en estos casos porque con .png el tamaño será mucho mayor.
Formato de imagen .tiff / .tif
El archivo de imagen .tif o .tiff es sin pérdidas y ofrece mucha calidad a las fotografÃas, aunque suele ser bastante pesado. También se usa para escanear en alta calidad. Sin embargo, no se recomienda en gráficos web, ya que está optimizada para imprimir.
Formato de imagen .bmp
El formato de imagen .bmp es un archivo de mapa de bits sin pérdidas y fue desarrollado para Windows. Es por ello que guarda una gran cantidad de información y eso lo convierte en un archivo bastante pesado. Sin embargo, debido al auge de internet, este tipo de formato de imagen ha ido perdiendo popularidad durante los últimos años en favor de .jpeg.
Formato de imagen .psd
La extensión de archivo de imagen .psd es creada por Adobe Photoshop y puede ser abierta por este programa. Los archivos .psd son editables con capas y ajustes de imagen. Es usado mayoritariamente para imágenes en mapas de bits, aunque también tiene opciones para crear vectores. Con Photoshop podemos exportar a muchos otros formatos de imagen una vez hayamos terminado de editar o de crear.

Formato de imagen .eps
La extensión de imagen .eps puede incluir tanto vectores como imágenes rasterizadas o mapa de bits. Se recomienda usar este archivo de imagen únicamente para enviar el proyecto a la imprenta o para enviárselo al cliente. Lo generamos cuando trabajamos archivos en Illustrator.
El formato PDF
Es un formato de almacenamiento para documentos digitales independiente de plataformas de software o hardware. Este formato es de tipo compuesto (imagen vectorial, mapa de bits y texto). Es un formato universal y se suele pedir en imprentas como archivo final. Es por ello que se recomienda guardar en .pdf antes de llevar a imprimir o para subir archivos o documentos "cerrados" a un correo o una web.
Formato de imagen .webp
Desarrollado por Google desde 2010, el .webp tiene por objetivo reducir al máximo el tamaño de las imágenes en la web. Según Google, las imágenes y los gráficos en formato WebP son, más o menos, un 30 por ciento más pequeñas que los archivos PNG o JPEG y tienen la misma calidad de imagen. Mientras que estos formatos se basan en métodos de compresión distintos -PNG, sin pérdida, y JPG, con pérdida-, WebP permite ambas posibilidades. Gracias a esta flexibilidad, el formato es adecuado tanto para fotografÃas como para imágenes y gráficos pequeños. Por sus caracterÃsticas de compresión (con y sin pérdida) y por otras propiedades centrales que ofrece el formato WebP (transparencia, animaciones) se ha ido posicionando en los últimos años.
MIllones de colores
Cada uno de las componentes RGB disponen de 8 bits asociados, dando 256 valores de cada color (256 valores para el Red, 256 para el Green y 256 para el Blue). Esto permite 16.777.216 (16.7 millones) posibles colores para cada pÃxel. Esto es información, y la información ocupa espacio.
Un ejemplo de compresión con pérdida de calidad es reducir la cantidad de colores de una fotografÃa para que el archivo pese menos. Se emplea en determinados casos para que las imágenes pesen poco y su descarga sea fácil y rápida.


A la izquierda vemos la imagen original. Está compuesta por "millones de colores " y pesa 23 Mb. Luego le sigue una imagen que será guardada con 256 colores, según vemos justo debajo de la imagen y apreciamos en la "tabla de colores" que aparece en el margen derecho. Esta imagen tiene, como vemos, una pérdida apreciable de calidad pero pesará diez veces menos que la original. Las imágenes que le siguen están a 128 colores (1.2 Mb) y a 64 colores (850 Kb). La pérdida de calidad es sustancial y muy evidente. Este recurso deberá ser usado solamente en aquellas imágenes que ya de por sà estén compuestas por una gama reducida de colores.








Related Jaunts
