Introducción al diseño digital interactivo

Introducción al diseño digital interactivo

• 1. Introducción al diseño digital interactivo 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,

• 2. Introducción al diseño digital interactivo 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. Imagen vectorial. Se trabajan con nodos y tensores Mapa de bits. Compuesta por pixeles Ejemplo de pixelado en una imagen de mapa de bits

• 3. Introducción al diseño digital interactivo El formato de imagen AI Como dijimos, el formato de imagen AI es propio de Adobe Illustrator y con las herramientas y 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. Vector / Mapa de bits 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

• 4. Introducción al diseño digital interactivo 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.

• 5. Introducción al diseño digital interactivo 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.

• 6. Introducción al diseño digital interactivo 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.

• 7. Introducción al diseño digital interactivo 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.

• 8. Introducción al diseño digital interactivo 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.