como se forma una imagen€¦ · imagen digital, donde podemos encontrar más resolución en una u...
TRANSCRIPT
![Page 1: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/1.jpg)
COMO SE FORMA UNA
IMAGEN
Conceptos teóricos
![Page 2: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/2.jpg)
TIPOS DE IMÁGENES
• Existen dos grandes tipo des imágenes:
– Vectoriales: Utilizada principalmente para
representar dibujos que requieran gran nivel
de detalle. Sólo representa dibujos.
– Mapa de Bits: Utilizado en todo ámbito, pero
principalmente representa fotografías. Existen
varios formatos de compresión, algunos de
éstos son ampliamente utilizados en páginas
web.
![Page 3: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/3.jpg)
IMAGEN VECTORIAL
![Page 4: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/4.jpg)
IMÁGENES VECTORIALES
• Los vectores son líneas curvas o rectas, sencillas o
complejas, que vienen dadas por operaciones
matemáticas.
• Los programas de diseño vectorial se encarga de hacer
todos los cálculos geométricos y matemáticos, dejando al
usuario sólo la tarea de dibujar con figuras geométricas.
• El tipo de archivo genérico para guardar o compartir
imágenes vectoriales es el de extensión .eps. Otros
formatos: ai (Adobe Ilustrator), svg.
• Siempre que guardemos o enviemos a alguien un archivo
vectorial, sólo se podrá abrir con programas del tipo de
Illustrator, o similar.
![Page 5: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/5.jpg)
CARACTERÍSTICAS
• Resolución??:
– No tiene
– Son independientes de la resolución, ya que no dependen de
una cuadrícula de píxeles dada. Por lo tanto, tienen la máxima
dimensión que permite el formato en que se almacena.
Imagen vectorial tamaño 100% Imagen vectorial
tamaño 200%
![Page 6: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/6.jpg)
Tamaño imagen vectorial
Imagen vectorial tamaño
500%
Imagen vectorial tamaño
1000%
![Page 7: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/7.jpg)
CARACTERÍSTICAS
• Ventaja:
– Se puede ampliar el tamaño de una imagen a
voluntad sin sufrir la pérdida de calidad que
sufren los mapas de bits.
– Permiten mover, estirar y girar imágenes de
manera relativamente sencilla.
– Usado también en imágenes de tres
dimensiones tanto dinámicas como estáticas.
![Page 8: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/8.jpg)
IMAGEN MAPA DE BITS
![Page 9: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/9.jpg)
IMÁGENES MAPA DE BITS
• Están construidas mediante una gran cantidad de
cuadraditos, llamados pixel dispuestos en una
cuadrícula.
• Cada uno de estos cuadraditos está relleno de un único
color, pero la sensación obtenida es el resultado de
integrar visualmente, en la retina, las variaciones de
color y luminosidad entre píxeles vecinos.
• Las imágenes de mapa de bits, también llamadas
bitmap, son las más adecuadas para reproducir objetos
sutilmente iluminados y escenas con gran variación
tonal.
![Page 10: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/10.jpg)
IMÁGENES MAPA DE BITS
• Parte de una imagen ampliada en extremo,
donde se ven cada uno de sus pixeles
![Page 11: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/11.jpg)
IMÁGENES MAPA DE BITS
Bitmap tamaño
100%
Bitmap tamaño
200%Bitmap tamaño
4500%
Pixel
![Page 12: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/12.jpg)
IMÁGENES MAPA DE BITS
• Es el tipo de imagen utilizado para la fotografía y el cine.
• La calidad de la imagen dependerá de la cantidad de
píxeles utilizados para representarla (Mayor cantidad de
pixeles = mayor calidad)
693.600 pixeles 3.750 pixeles
![Page 13: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/13.jpg)
8 CARACTERÍSTICAS DE LA
IMAGEN DIGITAL
La construcción de una imagen digital,
depende de muchos factores los cuales es
importante conocer para comprender mejor
como se forman este tipo de imágenes.
Estos factores son a su vez características
de estas imágenes.
![Page 14: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/14.jpg)
PIXEL
• Un píxel es cada uno de los puntos o elementos
más pequeños que forman una imagen.
Pixel
![Page 15: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/15.jpg)
PIXEL
• El color que compone cada píxel se obtiene
mediante tres colores básicos: rojo - verde -
azul. Modelo RGB (Red/Green/Blue).
• Los tres colores combinados pueden reproducir
más de 16 millones de colores.
• El tamaño de una imagen digital suele
expresarse como el producto del número de
píxeles en horizontal y en vertical.
![Page 16: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/16.jpg)
Modelo de color
• El modelo de color es el color
de cada píxel dependiendo del
modelo empleado. Como
hemos comentado en el punto
número 1, el más habitual es el
RGB que, combinando
diferentes intensidades de los
tres colores (rojo, verde y azul),
obtiene toda la gama de
colores.
• En el ejemplo de la derecha
cada color tiene un valor entre 0
y 255 (256 valores distintos por
color). Esto significa que se
pueden formar 2563
colores distintos.La combinación de
estos 3 colores …
…forman este único
color
![Page 17: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/17.jpg)
RESOLUCIÓN
• Indica el nivel de detalle con el que puede observarse la
misma. Se utiliza para definir la nitidez de una imagen
digital.
• Mayor resolución = imagen digital con más detalle y
calidad visual.
• El tamaño de los píxeles varía en cada dispositivo,
creando así diferentes resoluciones de pantalla en una
imagen digital, donde podemos encontrar más
resolución en una u otra.
• La resolución se mide en ppp (pixeles por pulgada).
Cuanto más pixeles en una misma pulgada tiene una
imagen, decimos que cuenta con mayor resolución.
![Page 18: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/18.jpg)
RESOLUCIÓN
• La siguiente imagen tiene una resolución de 5 ppp
![Page 19: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/19.jpg)
TAMAÑO
• El tamaño de la imagen digital va
completamente relacionado con los píxeles de
la misma y su resolución.
• Cuanto más píxeles tenga una imagen digital,
más grande la podremos hacer sin notar pérdida
de calidad.
• El tamaño de la imagen digital se define con las
dimensiones en píxeles.
• Observación: El tamaño de una imagen puede
ser irrelevante en el diseño digital, pero se torna
importante en el diseño impreso
![Page 20: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/20.jpg)
CALCULAR TAMAÑO
En la ilustración se ve como GIMP muestra
el tamaño de una imagen: 640 x 320 píxeles.
Calcular el tamaño de imagen en pixeles:
dividir dimensiones en pixeles, entre la
resolución:
Ancho: 640 / 96 = 6,67 pulgadas
Alto: 320 / 96 = 3,33 pulgadas
Dimensión en centímetros: realizar la
conversión, teniendo en cuenta la siguiente
relación: 1 pulgada = 2,54 cm.
Por lo tanto, si convertimos de pulgadas a
cm:
Ancho: 6,67 x 2,54 = 16,94 cm
Alto: 3,33 x 2,54 = 8,46 cm
![Page 21: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/21.jpg)
PIXELADO
• Se refiere a cuando ampliamos una imagen lo suficiente
como para que sus pixeles sean visibles, generando a la
vista una perdida de calidad.
![Page 22: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/22.jpg)
COMPRESIÓN
• Esta característica nos permitirá poder
comprimir nuestra imagen digital para poderla
guardar, enviar y compartir de manera más
rápida, ya que la descarga de la misma será
más rápida debido a que el archivo que
enviemos será menos pesado.
• Dependiendo del formato, en la compresión
puede haber pérdidas, ya que disminuye el
tamaño de la imagen en detrimiento de su
calidad.
![Page 23: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/23.jpg)
Formato BMP
• Fue desarrollado por Microsoft e IBM en
forma conjunta, lo que explica su uso
particularmente amplio en plataformas
Windows.
• Un archivo BMP guarda el 100% de sus
pixeles, por lo tanto no se puede
comprimir y por lo tanto no sufre pérdidas
de calidad. Resulta adecuado para guardar imágenes
que se desean manipular posteriormente. Admite
cualquier tipo de resolución y una profundidad de color
máxima de 24 bits (Mas de 16 millones de colores).
![Page 24: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/24.jpg)
Formato BMP
• Ventajas: Guarda gran cantidad de información
de la imagen. Siempre se mantiene la versión
original de la imagen.
• Desventajas: Al no utilizar ningún método de
compresión, el archivo tiene un tamaño
extremadamente grande.
• Usos: Es usado en diseño gráfico para guardar
imágenes que luego se quieren volver a
manipular.
![Page 25: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/25.jpg)
Formato JPG - JPEG
• Joint Photographic Experts Group
• Es un formato de compresión con pérdidas, ya
que desecha aquellos pixeles que son imperceptibles
para el ojo humano, por lo que las pérdidas apenas
se notan.
• El método jpg está basado en el hecho de que el ojo
humano percibe peor los cambios de color que las
variaciones de luminosidad. jpg divide la información de la imagen
en dos partes: color y luminosidad y las comprime por separado.
• Es un formato de buena calidad ya que admite modos en escala de
grises con una profundidad de 8 bits y en color hasta 24 bits.
Permite la carga progresiva en un navegador, lo que lo ha
convertido en el formato estándar en la web.
![Page 26: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/26.jpg)
Formato JPG - JPEG
• Se debe tener en cuenta que la compresión se produce
automáticamente cada vez que se guarda el archivo, por lo que es
aconsejable guardar en este formato una única vez, osea, cuando la
imagen esté ya terminada.
• Ventajas: Admite una amplia combinación de colores (más de 16
millones). Es ideal para publicar fotografías en la web. Representa
muy adecuadamente los colores reales.
• Desventajas: Cada vez que se guarda una imagen luego de editar,
se pierde información en la compresión. Por esto no es aconsejable
modificar la imagen una y otra vez; siempre se debe de realizar las
modificaciones desde un mismo original.
• Usos: Cámaras digitales, páginas web que deseen mostrar
imágenes de buena calidad.
![Page 27: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/27.jpg)
GIF
• Graphics Interchange Format
• Si bien es de baja calidad y ofrece una
escasa profundidad de colores,
permite unir varios cuadros para
formar una animación. Cosa
que lo hizo bastante popular.
Cada cuadro puede tener una paleta de hasta 256
colores, lo que los hace livianos y el archivo animado
resultante se reproduce sin problemas gracias a ese
mismo bajo peso.
• Si bien no se utiliza de forma estática por su baja calidad,
las animaciones en GIF son muy populares y,
actualmente, son una verdadera moda en la web.
![Page 28: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/28.jpg)
GIF
• Ventajas: Es un formato idóneo para publicar dibujos en
la web. Soporta animaciones.
• Desventaja: No es recomendable para fotografías de
cierta calidad ni originales ya que solo soporta hasta
256 colores (y el color real o verdadero utiliza una
paleta de más de 256 colores).
• Usos: Imágenes animadas (gif animados). Banners en
páginas web. Fotografías de baja calidad también para
web.
![Page 29: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/29.jpg)
PNG
• Portable Network Graphic
• Se trata de un formato de compresión
sin pérdidas (o muy pocas), con una
profundidad de color de hasta 16 bits
para blanco y negro y 48 bits en color
real. Además, soporta la transparencia de canal alfa, es
decir, la posibilidad de definir 256 niveles de
transparencia, mientras que el formato GIF permite que
se defina como transparente sólo un color de la paleta.
También posee una función de entrelazado que permite
mostrar la imagen de forma gradual.
![Page 30: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/30.jpg)
PNG
• Ventajas: La compresión que ofrece este formato es
(compresión sin pérdida) de 5 a 25% mejor que la
compresión GIF. Puede representar una muy amplia
variedad de colores (más de 200 billones)
• Desventaja: el tamaño de los archivos png, debido a la
capa de transparencia, siempre es mayor que el de los
archivos jpg. También puede generar tamaños mayores si
se trata de una fotografía con muchas variedad de color.
• Usos: Fotos de muy buena calidad para páginas web.
Banners en páginas web. Debido a la capacidad de
generar fondo transparente, es muy utilizado en iconos de
buena calidad para web o programas.
![Page 31: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/31.jpg)
Imágenes y la web
• De los formatos antes vistos, una página
web soporta los siguientes:
– JPG
– GIF
– PNG
![Page 32: COMO SE FORMA UNA IMAGEN€¦ · imagen digital, donde podemos encontrar más resolución en una u otra. • La resolución se mide en ppp (pixeles por pulgada). Cuanto más pixeles](https://reader034.vdocuments.net/reader034/viewer/2022051322/6013d706ea03a8756c56a78c/html5/thumbnails/32.jpg)
FUENTES
• Ampliar información:
– https://www.deustoformacion.com/blog/diseno
-produccion-audiovisual/caracteristicas-
imagen-digital-vectorial
– https://www.deustoformacion.com/blog/diseno
-produccion-audiovisual/8-caracteristicas-
imagen-digital-que-debes-conocer