imagen digital
DESCRIPTION
Fundamentos de la imagen digitalTRANSCRIPT
![Page 1: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/1.jpg)
Imagen Digital
![Page 2: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/2.jpg)
¿Cómo representamos una imagen en un ordenador?
• Los ordenadores solo entienden de números– Los números se guardan en binario 0011101– Las letras se guardan como números
• H O L A• 72 79 76 65• 0100 1000 0100 1111 0100 1100 0100 0001
– ¿Cómo podemos representar una imagen en el ordenador?
![Page 3: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/3.jpg)
Imagen vectorial
• Podemos describir la imagen en base a las formas que aparecen en ella
• Mediante ecuaciones podemos describir cualquier línea que dibujemos (splines)
• Circulo 50,50,90 Negro
• Circulo 20,20,5 Blanco
• Circulo 20,60,5 Blanco
• Linea 20,60–60,60-1 Blanco
![Page 4: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/4.jpg)
Imagen de mapa de bits (bitmap)
• Consiste en dividir la imagen que queremos representar en trozos y asignar un color a cada trozo
• A cada trozo de la imagen se le llama píxel
• Cuantos más píxeles usemos mejor representada quedará la imagen
0 0 0 0 0 0 0 20 40 40 20 0 0 0 0 0 0 0 0 0 0 20 50 100 100 100…
![Page 5: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/5.jpg)
Ventajas
• Vectorial– La calidad se
mantiene independientemente del tamaño
– Los dibujos sencillos ocupan poco incluso a tamaños enormes
– Se pueden reproducir en plotters de corte, bordadoras, etc.
– Son más fáciles de editar
• Mapa de bits– Producen imágenes
más naturales– El proceso de dibujado
es más natural– Se pueden obtener a
partir de scanners, cámaras, etc.
![Page 6: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/6.jpg)
Desventajas
• Vectoriales– Es difícil que representen
bien escenas reales– El proceso de dibujado es
poco natural
• Mapa de bits– Los ficheros ocupan más– La calidad depende del
tamaño de visualización– Si necesitamos mucha
calidad a grandes tamaño necesitamos muchos píxeles y ficheros enormes
– No se pueden usar para plotters de corte y similares
– Son más difíciles de editar
![Page 7: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/7.jpg)
Usos
• Vectoriales– Logotipos– Infografías– Animaciones– Estampados– Tampografía– Bordados– Vinilos
• Mapa de bits– Fotografías– El resto
![Page 8: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/8.jpg)
El color
• La luz es una franja del espectro electromagnético que podemos percibir
• Cada longitud de onda dentro del espectro visible la percibimos como un color diferente
• ¿Cuántos colores hay?• Entonces ¿Cómo podemos reproducir los colores?
![Page 9: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/9.jpg)
El sistema aditivo de color• Si escuchamos a la vez un sonido
grave y uno agudo (un bombo y un platillo) no escuchamos un sonido medio sino que escuchamos los sonidos por separado. Entonces ¿Porqué cuando juntamos rojo y amarillo lo vemos verde?
• Los seres humanos vemos el color gracias a una células llamadas conos en nuestra retina
• Tenemos conos que reaccionan principalmente al rojo, conos para el verde y conos para el azul
• Gracias a esto podemos reproducir cualquier color como mezcla de rojo, verde y azul
• Es el mecanismo que se usa en los monitores para conseguir representar cualquier color
90%
40%
0%
![Page 10: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/10.jpg)
El color magenta (curiosidad)
• Si juntamos luz roja (255,0,0), y luz azul (0,0,255) obtenemos el color magenta (255,0,255)
• ¿Cuál es la longitud de onda del magenta?
• Resulta que no existe luz monocromática de color magenta.
• La luz magenta no existe en la naturaleza y es un invento de nuestro cerebro cuando percibe luz azul y roja a la vez
20%
0%
28%
![Page 11: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/11.jpg)
El modelo RGB• Para representar un píxel de un color en un ordenador podemos
almacenar su cantidad de rojo (R) verde (G) y azul (B) como un número
• Si por ejemplo destinamos 6bits por píxel (2 bits para cada canal del RGB) tendríamos– Rojo: 00 – 01 – 10 -- 11– Verde: 0, 1, 2, 3– Azul: 0, 1 ,2, 3– 4x4x4= 64 colores diferentes
• En general con Xbits tendremos 2X colores diferentes posibles• En RGB de 24bits (8bits por canal) el nivel de rojo, verde y azul se
representa por un número entre 0 y 255• ¿Cuánto ocuparía una imagen de 1000x1000 pixeles en RGB de
24bits?• 1.000x1.000 = 1.000.000 pixeles x 24 bits = 24.000.000 bits / 8 =
3.000.000 bytes / 1024 = 2.929 KBytes /1024 = 2,8 MBytes
![Page 12: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/12.jpg)
El modelo HSV
• Es otra manera de representar numéricamente el color
• Utiliza tres valores que son – H (hue ó tono)– S (saturación)– V (valor o brillo)
• Es equivalente en gamut al RGB por lo que solo se usa para seleccionar colores de trabajo
![Page 13: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/13.jpg)
El modelo CMYK• Los dispositivos de impresión funcionan mediante color
sustractivo– Parten de una base blanca– Oscurecen el blanco usando pigmentos
• Por ello se basan en un sistema de color diferente llamado CMYK
– Cyan (Cian)– Magenta– Yellow (Amarillo)– Key ó Black (Negro)
• Según la teoría de color no es necesario el negro, pero es más fácil y más económico conseguir negro usando tinta negra.
• El gamut de RGB y CMYK no coincide por lo que hay colores que solo están en uno de los espacios de color
• ¿QUÉ OCURRE AL PASAR DE RGB A CMYK?• ¿Y AL PASAR DE CMYK A RGB?
CMYK
RGB
![Page 14: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/14.jpg)
La transparencia
• En realidad no existe el “color transparente”• Sin embargo en diseño a veces es conveniente
tener zonas de una imagen transparentes• Existen varios métodos
– Por paleta. Se elige uno de los colores de la imagen como color transparente
– Por canal alfa. Para cada pixel se guarda un número que representa el nivel de transparencia de ese pixel
![Page 15: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/15.jpg)
La compresión• Existen métodos para comprimir imágenes de mapa
de bits y conseguir que ocupen menos espacio– Compresión sin pérdida
• Consigue ocupar menos espacio “resumiendo” los valores almacenados
– Ej. 0,0,0 0,0,0 0,0,0 0,0,0 -> 3 x 0,0,0• La calidad de la imagen resultante es la misma que la de
la imagen original• Funciona mejor con imágenes con zonas del mismo color
(dibujos, logos, etc) donde consigue mejor compresión– Compresión con perdida
• Simplifica los detalles de la imagen usando diferentes métodos
• La calidad de la imagen resultante es peor que la de la imagen original
• Funciona mejor en imágenes naturales sin zonas del mismo color ni contrastes acusados donde se nota menos la pérdida
![Page 16: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/16.jpg)
Color Indexado
• Es una técnica para reducir el tamaño de una imagen reduciendo el número de colores.
• Se almacena una tabla de colores llamada paleta en la que se asigna un número a unas cuantas combinaciones RGB
• Después a cada píxel se le asigna el número de su color en la paleta
• De esa manera se consiguen usar menos bits por pixel pero disponiendo de un conjunto de colores grande de los que solo algunos se pasan a la paleta
0255,0,0
1202,128,72
251,102,255
3153,204,0
0 12 30 1 2 301 3
![Page 17: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/17.jpg)
El formato de imagen BMP
• Aunque existen diferente versiones de BMP lo más normal es que se ajusten al formato original o DIB– Profundidad de color
• Color indexado– 1 bit – Dos colores– 4 bits – 16 Colores– 8 bits – 256 Colores
• RGB – 24 bits – 8 bits por canal – 16 Millones de colores
– Compresión• Normalmente los BMP son sin compresión
– Transparencia• BMP no admite transparencia
![Page 18: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/18.jpg)
El formato de imagen GIF
• GIF fue desarrollado por compuserve– Profundidad de color
• Color indexado de 8 bits (256 colores)
– Compresión• LZW sin pérdida
– Transparencia• Por paleta de un solo color
– Extras• Un GIF puede contener animaciones que en
realidad son varias imágenes en un solo fichero• Existe una paleta web, pero ya no tiene sentido
![Page 19: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/19.jpg)
El formato de imagen PNG
• Es un formato inspirado en GIF para evitar los problemas de patentes del formato de compuserve con Unisys– Profundidad de color
• Paletas. Hasta 256 colores de 24 bits.• RGB. 24 o 48 bits por pixel
– Transparencia• Por paleta – 1 o varios colores de la paleta• Por canal alfa
– Compresión• Sin pérdida con un método algo mejor que el de GIF
![Page 20: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/20.jpg)
El formato de imagen JPG
• Desarrollado por el Joint Photographic Experts Group
• Es el formato más común en imágenes para Internet y en cámaras digitales no profesionales– Profundidad de color
• Depende de la compresión. JPG no guarda en RGB.– Transparencia
• No soporta– Compresión
• Compresión con pérdida en 100 niveles diferentes• Se pueden alcanzar compresiones de hasta unos 100:1
• NUNCA HAY QUE USAR JPG COMO FORMATO DE EDICIÓN
• http://hadto.net/category/sketchbook/generation-loss
![Page 21: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/21.jpg)
El formato de imagen TIFF
• Desarrollado por una compañía integrada en Adobe
• Puede contener muchos tipos de datos y es muy extensible pero la mayoría de los programas solo soportan los siguientes:– Profundidad de color
• 32 bits en CMYK• 24 bits en RGB
– Transparencia• No soporta
– Compresión• Sin comprimir• Compresión sin pérdida usando LZW
![Page 22: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/22.jpg)
El formato de imagen PSD
• Es el formato nativo de Photoshop• Soporta todos los modos de color de PS
– RGB, CMYK, LaB…
• Soporta todas las características de PS como – canales, capas, trazados, texto…
• Soporta transparencia por cada capa basada en canales alfa
• Compresión sin pérdida• ES EL FORMATO EN EL QUE SE PREFIERE
HACER LA EDICIÓN
![Page 23: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/23.jpg)
La resolución
• La resolución de una imagen indica la densidad de los píxeles de la misma
• Se suele medir en puntos/píxeles por pulgada (ppp)
• La resolución depende– Del tamaño “digital” de la imagen. El número de
píxeles.– Del tamaño de impresión de la imagen. Las pulgadas
(o metros) a la que se reproduce la imagen.• Generalmente lo ideal es que la resolución sea
de al menos 120-150 ppp• A cambiar el tamaño en píxeles de una imagen
se le denomina interpolación
![Page 24: Imagen digital](https://reader036.vdocuments.site/reader036/viewer/2022062514/557b3ad1d8b42a16488b4f0e/html5/thumbnails/24.jpg)
El sistema píxeles-tamaño-resolución
Tamaño (Pulgadas)
Resolución (PPP)
Píxeles
Bomba