El documento explica los diferentes métodos para representar imágenes digitales, incluyendo imágenes vectoriales, de mapa de bits, y los formatos y sistemas de color RGB, CMYK, HSV. También cubre temas como la compresión, transparencia y resolución de imágenes.

1. Imagen Digital

2. ¿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?

3. 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

4. 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…

5. 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.

6. 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

7. Usos Vectoriales Logotipos Infografías Animaciones Estampados Tampografía Bordados Vinilos Mapa de bits Fotografías El resto

8. 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?

9. 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%

10. 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%

11. 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 2 X 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

12. 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

13. 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

14. 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

15. 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

16. 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 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. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. El sistema píxeles-tamaño-resolución Tamaño (Pulgadas) Resolución (PPP) Píxeles Bomba