Módulo 1 - imagenes de mapa de bits PDF

Preview

Summary

Imágenes de mapa de bitsReferenciasDescarga en PDFImágenes de mapa de bitsIntroducciónAcerca de las imágenes de mapa de bits“Las imágenes de mapas de bits, denominadas técnicamente imágenes rasterizadas , utilizan una cuadrícula rectangular de elementos de imagen (píxeles) para representar imágenes....

Description

Imágenes de mapa de bits

Imágenes de mapa de bits

Referencias

Descarga en PDF

Lección 1 de 3

Imágenes de mapa de bits

Introducción

Solo hay dos tipos de archivos de imagen: pixel y vector.

Acerca de las imágenes de mapa de bits

“Las imágenes de mapas de bits, denominadas técnicamente imágenes rasterizadas, utilizan una cuadrícula rectangular de elementos de imagen (píxeles) para representar imágenes. A cada píxel se le asigna una ubicación y

un

valor

de

color

específicos”

(Adobe,

2017,

https://helpx.adobe.com/es/indesign/using/graphics-formats.html). Un píxel es la unidad más pequeña de una imagen digital y está presente en un incalculable número para crear una imagen final. Por ende, para editar o modificar una imagen de mapa de bits se necesitan manipular los pixeles, en cambio para las imágenes vectoriales, se trabaja sobre los nodos. Los bitmaps se utilizan para fotografías, imágenes con mucho detalle o imágenes escaneadas. Las imágenes de mapa de bits tienen una resolución

fija, determinada por la cantidad de pixeles que se hayan almacenado en el archivo al momento de generarlo. Cualquier operación de reducción o ampliación de la cantidad de pixeles, redunda en una pérdida y/o alteración de información.

Fuente:

Holiney,

V.

(2020).

Gráficos

rasterizados.

Recuperado

de

https://www.logaster.com.es/blog/vector-and-raster-graphics/.

Figura 1: Mapa de bits de una imagen o logo

La figura 1 nos muestra una imagen en mapa de bits de un logo. Si nos acercamos a la zona de los bordes de la esfera, se revela claramente la cuadrícula de píxeles que forman la imagen.

Las imágenes vectoriales están representadas por medio de líneas que corresponden a fórmulas matemáticas. Estas reciben el nombre de curvas de Bézier o curvas vectoriales y cada una de ellas está formada por dos nodos o puntos de anclaje y dos manejadores que definen su forma.

Los gráficos vectoriales

Las

imágenes

vectoriales

se

basan

en

coordenadas

matemáticas que definen su posición, su forma, su color y otros atributos. Están formadas por vectores, que son elementos geométricos como puntos, líneas, polígonos o segmentos.

(…)

Las imágenes vectoriales se utilizan para logotipos, iconos, ilustraciones, infografías, tipografías o elementos para web. (Plaza,

s.f.,

https://www.albaplazadesigner.com/diferencias-

entre-imagen-de-mapa-bits-e-imagen-vectorial/)

“Puede mover o modificar gráficos vectoriales con libertad sin perder detalle ni claridad porque son independientes de la resolución; mantienen los bordes nítidos cuando se les cambia el tamaño (…) Como resultado, los gráficos vectoriales

son

la

opción

para

ilustraciones”

(Adobe,

2017,

https://helpx.adobe.com/es/indesign/using/graphics-formats.html).

Las imágenes vectoriales se utilizan para imprimir objetos a gran escala debido a que están basadas en fórmulas matemáticas y tienen una resolución infinita. El término vector es un concepto extraído de la física y las

matemáticas, se lo define como un segmento orientado que tiene dirección, sentido y módulo.

La dirección está dada por la recta que lo contiene. El nombre curvas Bézier es en honor a Pierre Bézier, su creador, quien ideó un sistema para el trazado de dibujos técnicos en el año 1960. El sentido lo indica la flecha (del origen del vector hacia sus extremos). El módulo es su longitud. (Berman, 2007, p. 52).

Figura 2: Gráfico vectorial de una imagen o logo

Fuente:

Holiney,

V.

(2020).

Gráficos

vectoriales.

https://www.logaster.com.es/blog/vector-and-raster-graphics/.

Recuperado

de

La figura 2 representa la misma imagen que vimos en la figura 1, pero en formato vectorial. Si nos acercamos a la zona del borde de la esfera, se muestran las curvas de Bézier que forman la ilustración. También se puede apreciar cómo, a pesar de la ampliación, la imagen no perdió definición, a diferencia de lo que sucede con las imágenes en bitmaps. Esta es una de las principales características del formato vectorial.

La diferencia entre los gráficos basados en píxeles y vectores está en cómo se organiza y se construye la imagen.

Diferencia ejemplar entre la imagen de mapa de bits y el gráfico vectorial Podemos pensar que existen dos maneras de tener un vestido: comprarlo ya confeccionado y, si después no queda bien, llevarlo a una modista que lo achique o agrande; o recurrir a un diseñador de moda para que lo haga a medida. En esta última opción tendrás más elementos para personalizar el vestido: tamaño exacto, calidad de tela, tipo de corte, entre otros detalles. Del mismo modo, cuando usamos una imagen de mapa de bits lo que hacemos es comprar un vestido ya confeccionado y tenemos pocas opciones de edición. Por el contrario, un gráfico vectorizado nos da amplias posibilidades de personalizar el diseño de acuerdo a nuestro gusto.

Figura 3: Diferencia entre mapa de bits y gráfico vectorial

Fuente: Cobos, J. (s.f.). Qué son los Logotipos Vectorizados. https://www.jorgecobos.com/que-son-los-logotipos-vectorizados/.

Recuperado

de

Dimensiones en píxeles y la resolución de una imagen en mapa de bits La dimensión de píxel y resolución son dos elementos muy importantes que definen la calidad final de una imagen.

Las dimensiones en píxeles miden el número total de píxeles de altura y anchura de la imagen. La resolución es la precisión del detalle en las imágenes de mapa de bits, que se mide en píxeles por pulgada (ppp). Cuantos más píxeles por pulgada, mayor resolución.

(Adobe,

2020,

https://helpx.adobe.com/es/photoshop/using/image-sizeresolution.html)

En general, las imágenes con más resolución producen una calidad mucho mayor.

Figura 4: Imagen idéntica con 72 ppp y 300 ppp

Fuente:Adobe (2020). Imagen idéntica con 72 ppp y 300 ppp; obsérvese con el zoom al 200%. Recuperado de https://helpx.adobe.com/es/pdf/photoshop_reference.pdf.

Tabla 1: Las diferencias más significativas entre ambos tipos de imágenes

Mapa de bits Compuestas por píxeles.

Vectoriales Compuestas por vectores.

Mapa de bits

Adecuadas para representar imágenes reales, fotografías y obras de arte.

Es mejor para degradados, luces y sombras. Al ampliarlas, pierden calidad, ya que los píxeles aumentan de tamaño.

Los archivos suelen sergrandesy son proporcionales al tamaño de la imagen.

El software no es capaz de identificar las formas y objetos: hay que seleccionarlas manualmente.

Vectoriales Apropiadas

para

representar

figuras geométricas, gráficos, infografías, textos, logos, planos técnicos e interfaces de usuario.

Es mejor para colores planos.

No pierden calidad al escalar la imagen.

Los archivos son más chicos. El tamaño de estos es independiente del tamaño de la imagen. Las formas y objetos se pueden modificar fácilmente ya que el ordenador las identifica automáticamente con un clic.

Fuente:adaptado de Saramago, 2012.

La relación entre el tamaño de la imagen y la resolución

La relación entre el tamaño de la imagen y la resolución se ve en el cuadro de diálogo Tamaño de imagen (elija Imagen > Tamaño de imagen). Anule la selección de Remuestrear la imagen porque no desea alterar la cantidad de datos de imagen de la fotografía. [El remuestreo consiste en alterar la cantidad de datos de imagen al cambiar las dimensiones en píxeles o la resolución de la imagen].

(…)

Al disminuir la resolución (reducir el número de píxeles), se borra información de la imagen. Si aumenta la resolución, (aumenta la cantidad de píxeles), se añaden nuevos píxeles. (Adobe, 2020,https://helpx.adobe.com/es/photoshop/using/image-sizeresolution.html)

Fuente:

Adobe

(2020).

Remuestreo

de

píxeles.

Recuperado

de

https://helpx.adobe.com/es/photoshop/using/image-size-resolution.html.

Figura 5: Remuestreo de píxeles

Descripción:

las opciones que se observan en la figura corresponden a lo

siguiente: “A. Disminución de resolución B. Original C. Aumento de resolución (píxeles seleccionados mostrados para cada conjunto de imágenes)” (Adobe, 2020, resolution.html).

https://helpx.adobe.com/es/photoshop/using/image-size-

Al cambiar el tamaño de una imagen, hay tres posibles factores a editar: el ancho, el alto o la resolución.

Al modificar uno de los valores, los otros dos varían en consecuencia. Con la opción Volver a muestrear seleccionada, puede cambiar la resolución, la anchura y la altura de la imagen, de modo que se adapte a sus necesidades de impresión o visualización

en

pantalla.

(Adobe,

2020,https://helpx.adobe.com/es/photoshop/using/image-sizeresolution.html)

Fuente: captura de pantalla de Photoshop (Adobe Systems Incorporated, 2018) con adaptación propia.

Figura 6: Cuadro de tamaño de imagen (Dimensiones, resolución y remuestreo)

Descripción: A.

Dimensiones y resolución originales. B. Disminuir la resolución

sin modificar las dimensiones en píxeles (sin remuestreos) C. Disminuir la

resolución con el mismo tamaño de documento disminuye las dimensiones de los píxeles (remuestreo).

Tamaño de archivo

El tamaño de archivo de una imagen es el tamaño digital del archivo de imagen calculado en kilobytes (K), megabytes (MB) o gigabytes (GB). El tamaño del archivo es proporcional a las dimensiones en píxeles de la imagen. Las imágenes con más píxeles muestran mejor los detalles digitalmente como de manera impresa a un tamaño determinado, pero necesitan mayor espacio en disco para su almacenamiento y requieren más

tiempo

para

su

edición

e

impresión.

(Adobe,

2020,https://helpx.adobe.com/es/photoshop/using/image-sizeresolution.html)

La resolución de una imagen depende de dos factores: la calidad de la imagen (si logra capturar todos los datos necesarios) y el tamaño de archivo.

Otro factor que afecta al tamaño de los archivos es el formato de los mismos. [Al momento de guardar una imagen, es

obligatorio elegir un formato]. En función de los distintos métodos de compresión que se usan en los formatos de archivo GIF, JPEG, PNG y TIFF, los tamaños de los archivos pueden ser muy distintos aun teniendo las mismas dimensiones en píxeles. De igual manera, la profundidad de los bits de color y la cantidad de capas y canales de una imagen afectan al tamaño de archivo.

Photoshop admite unas dimensiones máximas en píxeles de 300.000 por 300.000 píxeles por imagen. Esta restricción limita el tamaño y la resolución de impresión disponibles para una imagen.

(Adobe,

2020,https://helpx.adobe.com/es/photoshop/using/image-sizeresolution.html)

Las imágenes en mapa de bits y los gráficos vectoriales utilizan formatos distintos a la hora de guardarlos. Los formatos no solamente influyen en el tamaño del archivo, además afectan el objetivo y producción final. Los más utilizado para las imágenes de mapa de bits son: JPEG (joint photographic experts group), PNG (gráficos de red portátiles), BMP (imagen en mapa de bits), PSD (Photoshop), TGA (truevision advanced raster graphics) y TIFF (tagged-image file format), y en el caso de las imágenes vectoriales EPS (lenguaje PostScript encapsulado), AI (Adobe Ilustrator) y SVG (scalable vector graphics). Los formatos de vectores dependen del tipo de software que se utiliza para crearlos o interpretarlos: AI (Adobe Illustrator), CDR

(CorelDRAW), DXF (AutoCAD). Los formatos de imágenes de píxeles, por su parte, no dependen tanto de la aplicación. Casi todas las aplicaciones que procesan imágenes pixeles pueden leer diversos formatos. Esto lo veremos en detalle en la lectura 4.

En la tabla siguiente puedes ver los tipos de archivos más comunes al momento de guardar el documento final

Tabla 2: Formatos de las imágenes digitales y tipos de compresiones

Formato

Descripción

BMP

Formato imagen estándar Windows.

Profundidad de color de en

24 bits (unos 16 millones de colores

Es el formato de imagen más usado en JPG o JPEG

la actualidad para fotografías. Facilidad de distribución a través de Internet.

Compresión

Formato comprimido sin pérdida de calidad.

Formato comprimido. El usuario puede 24 bits.

ajustar el nivel de compresión y la pérdida de calidad.

Formato

Descripción

Profundidad de color

Compresión

Muy utilizado en Internet. Permite unir

GIF

varias imágenes para crear sensación de

Formato 8 bits (unos 256 colores)

movimiento. Permite definir un color como transparente.

TIF o TIFF

PNG

Utilizado para imágenes de gran calidad. Las imágenes con este formato pesan mucho. Nació sustituir formato

para al GIF,

pero con mejor calidad.

64 bits (más de 18 trillones de colores).

32 bits (más de 4000 billones de colores).

comprimido sin pérdida de calidad.

Formato comprimido sin pérdida de calidad.

Formato comprimido sin pérdida de calidad.

Formato

XCF

Profundidad de color

Descripción

Formato de imagen propio del programa

32 bits

Compresión

Formato comprimido sin pérdida de calidad.

GIMP. Contiene información de

RAW

la imagen tal y como fue adquirida por el sensor. Genera

24 bits

Formato comprimido sin pérdida de calidad.

un archivo de gran tamaño.

Fuente:

Saramago,

2012,

http://www.educa.madrid.org/web/ies.josesaramago.arganda/Departamento/web_tecnologia/ficheros/4_inform atica/imagen_digital.pdf.

C O NT I N U A R

Lección 2 de 3

Referencias

Adobe (2017). Explicación de los formatos de gráficos. Recuperado dehttps://helpx.adobe.com/es/indesign/using/graphics-formats.html.

Adobe

(2020).

Tamaño

y

resolución

de

imágenes.

Recuperado

dehttps://helpx.adobe.com/es/photoshop/using/image-size-resolution.html.

Adobe Systems Incorporated (2018). Photoshop [software de edición de imágenes] (versión CC 2018). Mountain View, California, Estados Unidos.

Cobos, J. (s.f.). Qué son los Logotipos Vectorizados. Recuperado dehttps://www.jorgecobos.com/que-son-los-logotipos-vectorizados/.

Holiney, V. (2020). ¿Cuál es la diferencia entre gráficos vectoriales y rasterizados? Recuperado de https://www.logaster.com.es/blog/vector-andraster-graphics/.

Plaza, A. (s.f.). Diferencias entre imagen de mapa de bits e imagen vectorial. Recuperado

de

https://www.albaplazadesigner.com/diferencias-entre-

imagen-de-mapa-bits-e-imagen-vectorial/.

Saramago,

J.

(2012).

La

imagen

digital.

Recuperado

de http://www.educa.madrid.org/web/ies.josesaramago.arganda/Departam ento/web_tecnologia/ficheros/4_informatica/imagen_digital.pdf.

Lección 3 de 3

Descarga en PDF

Módulo 1 - Lectura 2.pdf 1.4 MB...