La imagen digital

Escuela de Diseño EDINBA / Taller de Rediseño 1 / Entornos Virtuales / Laura Angeles Solano

La imagen digital

;)

00. Intro

Elementos visuales estáticos.fotografías y gráficos: Bitmap y vectores

Al diseñar, se debe tomar en cuenta las técnicas diferentes para crear, almacenar y procesar imágenes digitales: la imagen de mapa de bits y la imagen vectorial. Al trabajar con archivos de imágenes en Internet, la mayoría suelen tener un formato JPEG, GIF o PNG, los cuales pertenecen a la imagen de mapa de bits, u otros formatos como el SVG o PDF, que corresponden a la imagen vectorial.

MAPA DE BITS / bITMAP

IMÁGENES RASTERIZADAS

01

Adobe Photoshop

mapa de Bits o Bitmap

A la imagen de mapa de bits se le conoce también como imagen rasterizada o bitmap, y está compuesta por una cuadrícula de píxeles, organizados en una rejilla. Cada uno de los píxeles que conforma el mapa de bits tiene un color definido que presenta un valor. Si hacemos zoom sobre la imagen podemos ver claramente cada uno de esos píxeles. Cuanto mayor sea el número de píxeles por imagen, mayor será su calidad.

Se utiliza para la creación y edición de imágenes basadas en un plano cuadriculado que se llena de pixeles, así funciona el sistema bitmap.

bit

Es la unidad mínima de información de una imagen. Describe la cantidad de bits y posibles cambios de tonalidad o de color de un pixel.

pixel

Es la unidad mínima para representar una imagen. Describe brillo y color de un punto de una imagen cuando se visualiza.

Bits y la cantidad de información

La profundidad de color o profundidad del bit por pixel (bpp) se refiere a la cantidad de bits de información necesarios para representar el color de un pixel en una imagen digital. Debido al sistema binario de numeración, una profundidad de bits implica que cada pixel de la imagen puede tener 2n posibilidades de cambio y por lo tanto, representar 2n de colores distintos.

Resolución yespacio de color

profundidad del pixel y modos de color

06

8 Bits de luz roja8 Bits de luz verde8 Bits de luz azul24 Bits = 224 (2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2) = 16,777,216 Millones de colores

Colores RGB, aditivoso Colores luz

El modo de color RGB está basado en la suma de los colores lumínicos primarios. A esto se le conoce como síntesis aditiva, donde los colores deben sumarse para conseguir uno nuevo. Esos colores son: Rojo (Red) Verde (Green) Azul (Blue)Y con las diferentes combinaciones y en diferentes niveles de intensidad, podemos simular toda la gama de colores en la naturaleza

Bits con color RGB

RGB red/green/blue ó RVA rojo/verde/azulY si a 28 (8 Bits) (2x2x2x2x2x2x2x2) = que nos da 256 tonos de grisesle agregamos haces de luz RGB (canales de color)podemos obtener 24 bits o millones de colores:

resolución de imagen

RESOLUCIÓN DE IMAGEN mapa de Bits o Bitmap

• La resolución de una imagen indica la cantidad de detalle que puede observarse en esta
• La resolución indica la cantidad de información contenida en pixeles en una imagen
• La resolución determina en dimensiones de pixelo número de pixeles existentes a lo largo de la anchura y la altura de la imagen
• A mayor resolución, mayor nitidez en la imagen

La resolución de una imagen es la cantidad de pixeles por unidad de longitud, es decir, es la relación entre el tamaño en pixeles de una imagen y sus dimensiones físicas, que se manifiesta en un dispositivo de salida como una pantalla o una impresora.

IMAGEN VECTORIAL

Ilustraciones digitales

02

Adobe iLLUSTRATOR

vECTORES

Las imágenes vectoriales se basan de un plano de coordenadas (X,Y) que definen su posición, forma, color y otros atributos.Las imágenes se componen de vectores (figuras geométricas: puntos, líneas, polígonos o segmentos). La imagen vectorial representa únicamente formas simples o ilustraciones complejas, pero no dejan de tener un mediano grado de representación de la realidad. Las imágenes vectoriales al estar compuestas por entidades matemáticas, se le pueden aplicar transformaciones geométricas: ampliar, expandir o reducir, sin que pierdan calidad (resolución), ya que continuaremos viendo las diferentes líneas y manchas de colores perfectamente definidas. Los vectores permiten definir una imagen con muy poca información, lo que hace que los archivos tengan un tamaño bastante reducido.

Se utiliza para la creación y edición de imágenes basadas en el sistema de coordenadas X,Y.

diferencias

entre imágenes mapa de bits y vectoriales

03

Diferencias

DIFERENCIAS ENTRE BITMAP Y vECTORES

Las imágenes de mapa de bits cuentan con una retícula perfectamente definida y, por tanto su calidad se mantiene fija. Si se amplía o disminuye la imagen, vemos como los píxeles que la forman se multiplican o dividen, lo que provoca una pérdida de calidad. Por otro lado las imágenes vectoriales al estar basadas en fórmulas matemáticas, tienen una resolución infinita y por tanto se pueden ampliar o reducir sin riesgo de que su calidad baje.

Las dos formas de representación de las imágenes digitales tienen sus propias virtudes. Es importante conocer exactamente para qué requerimos un formato u otro.

USOS

DE imágenes bitMAP y vectoriales

04

usos de formatos

Principales usosdel mapa de bits e imagen vectorial

Las imágenes con formato vectorial, se utilizan especialmente para logotipos, iconos, ilustraciones, infografías, tipografías o elementos para webs, que necesitan mantener su calidad al máximo en todo momento sin tener gran peso de archivos.Las imágenes con formato bitmap, se utiliza más para fotografías o imágenes que tienen una buena resolución, pero no resulta tan importante mantener la calidad al hacer zoom.

En el caso de entornos virtuales, los materiales deben tener un peso óptimo para salidas a pantalla, esto repercutirá en la velocidad de descarga de los mismos.

FORMATOS

DE imágenes bitMAP y vectoriales

05

Más información: Tipos de archivos y cómo utilizarlos

Formatos de imagen para salida a pantalla

Formatos o extensiones. Indican qué aplicación ha creado el archivo o puede abrirlo y qué icono se debe utilizar para el archivo.Antialias. Es un tratamiento para la tipografía y para evitar el segueteado de pixeles en las letras.Lossy. Es un tipo de compresión de data que resulta en archivos mas chicos en tamaño pero con pérdida de calidad.Lossless. La compresión sin pérdida es una forma de compresión que conserva todos los datos originales.

imagen de mapa de bits

• JPG ó JPEG Fotografías con compresión
• PNG Logos, íconos, fondo transparente
• GIF Íconos y animaciones simples
• BMP imágenes con dos colores en alto contraste o blanco y negro

imagen vectorial

• EPS Iogos, ilustraciones

• PDF Documentos, ilustraciones
• SVG Ilustraciones, gráficos

Datos y almacenamiento

bit / byte / megabyte / gigabyte / terabyte

06

Medidas de almacenamiento de información

términos más usados

Bit: Es la unidad mínima de información empleada en informática.Byte (B): Equivale a 8 bits. Kilobyte (kB): 1024 bytes forman un Kilobyte.Megabyte (MB): Equivale a 1024 Kilobytes.Gigabyte (GB): Es igual a 1024 Megabytes. Terabyte (TB): Lo componen 1024 Gigabytes.

Así como usamos medidas para saber cuánto pesan o miden las cosas, también hay unidades de medida que permiten calcular la capacidad de almacenamiento de información o procesamiento de datos. Las unidades de medida más usadas son:Bit, Byte, Kilobyte, Megabyte, Gigabyte y Terabyte.

Medidas de almacenamiento de información

definición de tamaños de archivos

A la hora de maquetar, los materiales visuales deben estar bien optimizados, pero también es importante el peso de los mismos. Los archivos deben tener el peso correcto para su visualización en pantalla.

En la actualidad existen distintos dispositivos de almacenamiento para resguardar la información, transportarla o subir a la nube. Cada vez se requiere de mayor capacidad de almacenamiento.

BIBLIOGRAFÍA

07

06. bibliografía

guía completa de imagen digital

Conceptos básicosMejorar la imagenImágenes creativasLacey, JoëlEditorial BlumeBarcelona