Imagen digital

826 views

Published on

Fundamentos de la imagen digital

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
826
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Imagen digital

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

×