U7 - Imágenes - PDF

U 7. Imágenes y software de gestión de recursos gráficos. Las imágenes y la ley de gestión intelectual 1 Glosario...............................................................................................................................2 2 Imágenes....................

U 7. Imágenes y software de gestión de recursos gráficos. Las imágenes y la ley de gestión intelectual 1 Glosario...............................................................................................................................2 2 Imágenes............................................................................................................................. 2 3 Formato de imagen..............................................................................................................4 4 Resolución y profundidad del color.................................................................................... 8 4.1 Resolución....................................................................................................................9 4.2 Profundidad del color...................................................................................................9 Francisco Eduardo Martín Martín 1/15 1Glosario Compresión de la imagen. Forma de reducir el tamaño de bits mediante algoritmo matemático. Dos tipos de algoritmos: con pérdidas y sin pérdidas. Imagen digital. Representación bidimensional de una imagen usando bits. Dos tipos: gráfico rasteurizado o gráfico vectorial, según la resolución de la imagen es estática o dinámica. Imagen vectorizada. Representa, a través de fórmular matemáticas, entidades geométricas y sus parámetros principales: grosor, posición inicial, final… El procesador es el encargado de traducir esta información matemática a la tarjeta gráfica. Liencias de creative commons. Licencias que proporcionan derechos de uso (intelectual y moral)bajo determinadas condiciones. A través de estas condiciones de uso y de reconocimiento de autoría es posible usar uno u otro contenido. Mapa de bits o imágenes rasteurizadas. Imágenes formadas por un conjunto de puntos, llamados píxeles. Cada píxel contiene tiene un conjunto de valores que define un color uniforme. Profundidad del color. Número de bits usados para describir el color de cada píxel de una imagen de bitmap. Propiedad intelectual. Conjunto de derechos (intelectuales y morales) sobre un contenido original que tienen sus autores. Resolución. Grado de detalle o calidad de una imagen digital. Se expresa en ppp (píxeles) o en dpi (dots per inch). Cuantos más píxeles contenga una imagen por puldaga lineal, mayor será la calidad. Software de virtualización, edición y creación. Conjunto de programas y rutinas que permiten al ordenador realizar determinadas tareas, en este caso, la correcta visualización, edición y creación de imágenes, logos e iconos, entre otros elementos. 2Imágenes Nota que el contraste de los colores y la nitidez de las montañas es mayor cuanto más cerca están. Autor: Francisco Eduardo Martín Martín 2/15 Imagen: contribuye favorablemente en la web calidad y formato adecuado peso adecuado adecuada al contenido de la web respetar autoría, derechos de autor… atributos adecuados a la web digital Imagen digital. Definición: representación bidimensional de una imagen usando bits (unos y ceros) almacena toda la información relativa a los colores y luminosidad de una imagen. Ventaja: las imágenes digitales es que no se degradan con el tiempo. La fotografía es objetiva y realista porque recoge instantáneas del mundo real. La pintura, sin embargo, es subjetiva y puede ser del todo irreal porque depende de la idea concebida por un artista que es totalmente libre a la hora de plasmar en un lienzo su propia realidad. Una imagen digital es, por tanto, el resultado visual final de una imagen capturada inicialmente por un dispositivo que almacena la información digitalmente y que puede ser transformada, posteriormente, usando los medios informáticos. dos tipos: DE MAPAS DE BITS VECTORIALES Se construyen a partir de funciones matemáticas Se construyen con píxeles. que representan objetos geométricos (polígonos, segmentos, arcos, etcétera). Pierden calidad al hacer un zoom sobre la No pierden calidad cuando se hace un zoom para imagen para aumentar su tamaño porque el aumentar mucho el tamaño. número de píxeles sigue siendo el mismo. Autor: Francisco Eduardo Martín Martín 3/15  DE MAPAS DE BITS VECTORIALES El tamaño de la imagen es independiente del El tamaño o peso del archivo es proporcional al tamaño del archivo. Normalmente ocupará menos tamaño de la imagen. que los mapas de bits. Se usa para representar imágenes realistas o Se usa para representar dibujos, esquemas, planos. complejas: fotografías, ilustraciones. ◦ Gráfico rasteurizado o mapa de bits o bits maps o raster o imágenes matriciales: ▪ Resolución de la imagen estática. ▪ Formada por un conjunto de píxeles. ▪ Cada píxel, contiene un conjunto de valores, color uniforme ▪ Indicadas para imágenes con muy amplia gama de colores y con variaciones precisas de color y luminosidad ▪ Calidad de imagen, depende de la cantidad de píxeles usados en la representación. Mayor cantidad → mayor calidad → mayor peso. Y, viceversa. ▪ Desventaja: EFECTO PIXELADO, ante un cambio de escala significativo (no responsive) ▪ Programas: Gimp. Software libre. Multiplataforma. Photoshop. De adobe. Propietaria. Para windows y MAC. Photopaint o corel. Propietaria. Para windows.... ◦ Gráfico o imagen vectorial: ▪ Resolución de la imagen dinámica ▪ Representada con fórmulas matemáticas de entidades geométricas (puntos, segmentos, rectángulos, círculos…) ▪ Es el procesador el encargado de traducir a la tarjeta gráfica. ▪ Parámetros principales: grosor, posición inicial, final… ▪ Casi cualquier tipo de imagen puede obtenerse con la combinación de estas entidades geométricas ▪ Ventaja: el cambio de escala no supone pérdida de calidad (responsive) ▪ Programas: Sodipodi. Solo linux Corel Draw. Propietaria Adove Illustrator. Inscape.... 3Formato de imagen Formato en el que se almacenan para su posterior reproducción. Reflejado en el nombre de fichero por la extensión (3 caracteres). Autor: Francisco Eduardo Martín Martín 4/15 Los sistemas operativos usan la extensión para relacionar la imagen con un programa informático. DECISION IMPORTANTE EN LA WEB. Hay que elegir el formato en función de: 1 El contenido de la imagen: foto, dibujo, logotipo... 2 Calidad a obtener, según el sitio y fin de la publicación (en web, impresión...) 3 Tamaño del archivo resultante. CORRECTA ELECCIÓN DEL FORMATO → calidad visual y tamaño → PESO Existen multitud de formatos de almacenamiento de imágenes digitales, pero los FORMATOS MÁS COMUNES: bmp, gif, jpeg, png… Además: Algunos exclusivos de un determinado programa como ocurre con el CDR o el PSD. Aunque nosotros podamos trabajar en cualquiera de los formatos vistos en el apartado anterior, a la hora de incorporar una imagen a una web, tendremos que utilizar uno de los tres formatos siguientes: GIF, JPG o PNG (este, más moderna, requiere versiones de navegador más avanzada). Motivo de estos formatos y no otros: el espacio que ocupan las imágenes y el tiempo que tardan en descargarse (cuando visitamos por primera vez una Web se descarga el código fuente de la página y todas las imágenes que figuran en su página inicial). Autor: Francisco Eduardo Martín Martín 5/15 RECOMENDACIÓN: guarda siempre una copia de la imagen digital en su versión original ( por si la vuelves a necesitar). Siglas del Significado de las siglas (en Programas que lo usan Tipo formato inglés) AI Adobe Illustrator Artwork. Adobe Illustrator. Vectorial BMP Bit Map Microsoft Windows. Mapa de bits CDR CorelDraw. CorelDraw Vectorial CPT Corel Photo-paint Corel Photo-paint Mapa de bits Drawing eXchange (or DXF Autodesk. Vectorial interchange) Format. EPS Encapsulated PostScript. Adobe Photoshop. Ambos FH* Macromedia Freehand Document. Macromedia Freehand. Vectoriales FLA Macromedia Flash Adobe Flash. Vectorial GIF Graphics Interchange Format. Mapa de bits Paint Shop Pro, Photoshop, JPG, JPEG Joint Photographic Experts Group. Mapa de bits GIMP, … ODG Open Document Graphic. OpenOffice.org Draw. Vectorial PCX Picture eXchange. Paintbrush Mapa de bits PIC, PCT Picture. PC Paint. Ambos PNG Portable Network Graphics. Navegadores web. Mapa de bits PSD PhotoShop Document. Adobe Photoshop. Mapa de bits PSP PaintShop Pro. PaintShop Pro. Mapa de bits SVG Scalable Vector Graphics. Vectorial TIF, TIFF Tagged Image File Format. Gráficos de imprenta y escáner. Mapa de bits WMF Windows Metafile. Aplicaciones Microsoft. Vectorial 3.1 Formato GIF El primero en aparecer en Internet Creado por CompuServe en 1987. Objetivo: conseguir ficheros de tamaño reducido, de colores máximo 256. Características: ◦ Número de colores: entre 2 y 256 colores. ◦ Formato de compresión sin pérdida basada en el algoritmo LZW. ◦ Principal uso: mostrar imágenes animadas en las páginas web o en la creación de los iconos que acompañan a los enlaces y los logotipos. ◦ En general, apto para todas las imágenes con grandes áreas de color sólido. ◦ Carga progresiva en el navegador. Autor: Francisco Eduardo Martín Martín 6/15  ◦ Formato adecuado para imágenes sencillas, de formas simples y sin un elevado número de colores. Inconveniente: no apto para imágenes fotográficas. 3.2 Formato JPG El más empleado en fotografía digital, pues amplio abanico de colores. Para imágenes con más de 256 colores, logra almacenar imágenes fotográficas y de escáner de gran tamaño en poco espacio. No es conveniente utilizar este formato en las imágenes con colores sólidos, siendo muy recomendable cuando la imagen tiene gran variedad de colores distintos o de colores monocromáticos. Características: ◦ Número de colores: 24 bits color u 8 bits en blanco y negro. ◦ Formato de compresión con alta capacidad de empaquetado con pérdida de calidad, aunque reduce en tamaño. ◦ No permite la animación. ◦ Es el más indicado para imágenes que son fotografías. Inconveniente: la apertura y manipulación de una imagen JPG sufre pérdidas a causa de la compresión/descompresión. Así, conviene mejor guardar la original en TIFF o BMP para editarlas y modificarlas. 3.3 Formato PNG Es la alternativa del formato GIF, permitiendo el uso de más de 256 colores. Características: ◦ Publicada por Wrold Wide Web Consortium, al igual que el mismo es de especificación de uso libre y no requiere pagar licencia de ningún tipo en aplicaciones que usen, creen y editen este tipo de imágenes. ◦ Color indexado con profundidad de color hasta 16,7 millones de colores. ◦ Permite fondos transparentes con buena integración de imagen en web. ◦ No son óptimas para impresión de alto nivel, pero si para diseño web o condiciones no profesionales, ya que su peso es moderado y tiene buena administración del color. ◦ Alto nivel de compresión y casi no presenta pérdidas de calidad. Ventajas: ◦ Dos modos de compresión: estándar y progresivo. El segundo facilita el reconocimiento de la imagen en los primeros instantes de la descarga de Internet, pues va mostrando líneas de la misma distribuidas por toda la superficie. Interesante para imágenes muy grandes o para conexiones lentas. ◦ La inclusión de 'metadatos' en el archivo PNG permite en teoría que los motores de búsqueda puedan indexar estos archivos gráficos en función de la descripción incluida, en lugar de únicamente por el nombre. Desventajas: Autor: Francisco Eduardo Martín Martín 7/15  ◦ No permite crear pequeñas animaciones como el formato GIF ◦ La compresión sin pérdidas produce archivos excesivamente grandes para la reproducción de fotografías o cuadros comparados con los equivalentes archivos JPG. 3.4 Formato BMP Formato introducido por Microsoft. Usado por windows para guardar sus imágenes. 3.5 Formato TIFF o Tagged Image File Format Formato usado para el escaneado, la edición e impresión de imágenes fotográficas. Es compatible con casi todos los sistemas operativos y editores de imágenes. 3.6 Formato PSD Formato por defecto del editor de imágenes Adobe Photoshop. Adecuado para editar imágenes con este programa y otros compatibles. 3.7 Formato RAW Formato que ofrece la mayor calidad fotográfica. En él, los píxeles no se procesan, es decir, se mantienen tal y como se han tomado. Pueden ser procesados posteriormente por un software específico como revelador RAW. 4Resolución y profundidad del color Imágenes → 2 parámetros primordiales: Resolución o grado de detalle de la imagen. Profundidad de color o número de bits empleado en cada píxel para cada color. Autor: Francisco Eduardo Martín Martín 8/15 4.1Resolución Grado de detalle o calidad de la imagen. Se expresa en píxeles por pulgadas o ppp (píxeles por pulgadas) o dpi (dots per inch) A mayor n.º píxeles por pulgadas → mayor calidad. En monitor es el n.º que es capaz de mostrar en una pulgada y en papel es el n.º puntos por pulgada al que puede imprimir. Si cada píxel es un cuadrado de la imagen → el número de cuadrados determina el tamaño de la misma. Así, una imagen con 60 cuadrados o píxeles de ancho y 60 cuadrados o píxeles de alto tendrá un tamaño de 360 píxeles. Ejercicios: ¿Cuánto ocupará una imagen en nuestro espacio de almacenamiento? Depende de la “profundidad de color” ¿Cuánto espacio ocupará una imagen en nuestro papel al imprimirla? Depende de la “resolución” 4.2Profundidad del color Cada píxel tiene un color. Profundidad: n.º de bits usados para un color de un píxel Ejemplo: 1 bits para blanco y negro, 8 bits 2⁸ =256 colores ideal para escala de grises o =256 colores ideal para escala de grises o indexado; y, a partir de 8 bits, incluso 256 colores, se suele usar para designar colores. Tamaño imagen=(alto*ancho*profundidad)/8 (/8 para expreso resultado en bytes) Siguiendo con el ejemplo anterior: una imagen con 360 píxeles. ¿Cómo se calcula el peso en MB o GB? Caso A. Imagen con 256 colores/píxel (2⁸ =256 colores ideal para escala de grises o) → 60*60*8/8=3600 bytes Caso B. Imagen con 24 bits para expresar colores (2²⁴) → 60*60*24/8=10800 bytes) → 60*60*24/8=10800 bytes (16777216=2^24, 24 bits) Sin embargo, si queremos saber el espacio que ocupará la imagen en el papel sabiendo su ancho y su alto en píxeles, tendremos que tener en cuenta otra característica de las imágenes: la resolución con la que se va imprimir. Este dato es también necesario para averiguar el tamaño en píxeles que tendrá una imagen escaneada, ya que lo que tenemos en este caso es un tamaño en centímetros. Autor: Francisco Eduardo Martín Martín 9/15 La resolución es el número de puntos o píxeles por pulgada (ppp) con la que se imprime o escanea una imagen o que hace una fotografía hecha con la cámara de fotos digital (por ejemplo: 12 megapíxeles o 12 millones de píxeles). Ejercicio. Calcula el tamaño en MB que ocupará en disco una imagen de la que se conoce: Ancho 15cm. Alto 10cm. Resolución 150ppp píxeles. Ancho en pulgadas=(ancho en píxeles)/resolución Alto en pulgadas=(alto en píxeles)/resolución Nota: Si redondeamos el cálculo será más fácil, pero aproximado. 1 pulgada=2,54 cm Sabiendo las pulgadas vertical y horizontal, y resolución con las que se escanea la imagen, podemos calcular el tamaño total de la imagen. Tamaño de la imagen en pulgadas: 15/2,54=5,91pulgadas 10/2,54=3,93pulgadas Ancho= 5,91*150=885,83 píxeles Alto= 3,93*150=590,55 píxeles Para saber el número de píxeles en total de una imagen, basta multiplicar ambas cifras: 885,83*590,55=523127píxeles Tamañoenbyte=(píxeleshorizontal*píxelesvertical*profundidadcolor)/ 8=523127*24/8=1569378,14bytes TamañoenMB=1569378,14/1024/1024=1,497MB Ejercicio. Calcula del tamaño(ancho y alto) en centímetro que ocupará en el papel una imagen de la que se conoce su tamaño en píxeles y su resolución. Resolución 72 ppp(píxelespp). Ocupa Ancho: 60 píxeles. Alto: 60 píxeles Ancho en pulgadas=(ancho en píxeles)/resolución Alto en pulgadas=(alto en píxeles)/resolución Si redondeamos el cálculo será más fácil, pero aproximado. 1 pulgada=2,54 cm Ancho=60/72*2,54=2,12 (cm) Alto=60/72*2,54=2,12 (cm) 2,12cm*2,12cm Conclusión: Cuanto mayor sea la resolución de una imagen: OCUPARÁ MÁS ESPACIO EN EL DISCO Y OCUPARÁ MENOS ESPACIO EN E PAPEL Autor: Francisco Eduardo Martín Martín 10/15 5TÉCNICAS DE COMPRESIÓN DE UNA IMAGEN La compresión consiste en eliminar la información redundante. Existen varios métodos de compresión empleados por los diferentes formatos de almacenamiento de imágenes, pero se clasifican en dos tipos: Métodos de compresión sin pérdida de información (lossless): estos métodos se basan en eliminar la redundancia de datos. Uno de ellos es el método de compresión LZW usado por el formato GIF, muy eficaz comprimiendo secuencias de píxeles del mismo color. Su funcionamiento es sencillo: si una imagen de 600 píxeles de ancho tiene en su primera fila 40 píxeles negros este método de compresión crea un código que ocupa poco, que significa "40 píxeles negros". La próxima vez que se encuentre con la misma secuencia lo sustituirá por ese mismo código. Es por esta razón que es un método ideal para el formato GIF cuyas imágenes están formadas en su mayor parte por colores uniformes. Métodos de compresión con pérdida de información (lossy) entre los que podemos destacar el algoritmo JPEG utilizado por el formato de imagen que lleva el mismo nombre. La tasa de compresión es mayor pero a costa de perder calidad, aunque esta pérdida no es perceptible para el ojo humano ya que este sistema se basa en la eliminación de la información visual redundante. 6Logos, iconos, banners e imágenes 7Software para la gestión de recursos gráficos er la imagen, hacer un zoom para ampliar la imagen para ver con más detalle una zona de la misma, girarla en el sentido de las agujas del reloj o en sentido contrario, ajustar el brillo o el contraste. Operaciones de clasificación… 7.1Software de visualización de imágenes La siguiente tabla muestra algunos programas que son algo más que simples visores, ya que permiten realizar alguna modificación en las imágenes que visualizan. Windows Linux Macintosh IrfanView, XnView, STDU Viewer GwenView, Eye of GNOME, Feh FFView, Xee, Photon Autor: Francisco Eduardo Martín Martín 11/15 7.2Software para la creación de recursos gráficos Software de creación de recursos gráficos Programa Recurso Plataforma Características Multilenguaje. Admite transparencias. IcoFx Iconos Windows Dispone de más de 40 efectos y filtros. Permite exportar e importar imágenes. Genera iconos a partir de imágenes JPG, GIF o BMP. IconArt Iconos Windows Genera iconos dibujando píxel a píxel. Genera iconos para la barra de direcciones del navegador. Crear banners de publicidad. Bannershop GIF Crear gráficos animados para la web. Banners Windows Animator Dispone de variedad de filtros y efectos especiales. Crea GIFs animados y banners de publicidad para web. Programa de ilustración y animación vectorial. iDraw X Banners Macintosh Permite importar imágenes en formatos JPEG, GIF, TIFF, PNG, PDF y EPS. Permite exportar a GIF. Dibujo e ilustración vectorial. EazyDraw Logotipos Macintosh Diseñar el logotipo de la empresa, crear ilustraciones, dibujos técnicos o diagramas. Creación de logotipos profesionales para The Logo páginas web, así como también cabeceras, e Logotipos Windows Creator imágenes animadas. Compatibilidad con imágenes GIF y JPG Programa de ilustración y animación vectorial. Logotipos y Windows y Adobe Illustrator Compatible con archivos.JPEG, Banners Mac OS X PNG,.TIFF,.BMP,.GIF, etc. 7.3Software de edición de imágenes La número 1 corresponde a la fotografía original, mientras que la número 2 corresponde a la fotografía retocada. Si has elegido la número 2 necesitas el software de edición de imágenes. En la número 2 se ven mejor los dibujos de las alas de la mariposa, destaca más el color anaranjado cercano al lunar. En la foto número 1 los colores de las alas están muy apagados. El efecto aplicado se llama Sobreexposición que consiste en dar más luz a un área seleccionada en una imagen. Autor: Francisco Eduardo Martín Martín 12/15 El programa GIMP, no mencionado antes, (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits. Es un programa libre, gratuito y multiplataforma. Forma parte del proyecto GNU. GIMP tiene herramientas que se utilizan para el retoque y edición de imágenes, dibujo de formas libres, cambiar el tamaño, recortar, hacer fotomontajes, convertir a diferentes formatos de imagen, y las tareas más especializadas. En los siguientes enlaces tenemos tutoriales, zonas de descarga, foros de debate sobre la utilización del programa, que te resultarán útiles en el retoque de imágenes. No es preciso un conocimiento profundo del programa para hacer algunos retoques. Primeros pasos con GIMP: http://docs.gimp.org/2.8/es/getting-started.html Convertirse en un mago de GIMP: http://docs.gimp.org/2.8/es/become-a-gimp- wizard.html GIMP-ES: http://www.gimp.org.es/ 7.4Software de conversión de formatos de imágenes Autor: Francisco Eduardo Martín Martín 13/15  Programa Formatos Entrada Formatos Salida Características Sólo convierte los formatos. JPG, BMP, GIF a No dispone de opciones para 36-image PNG,TIFF, ICON, JPG, BMP, GIF, PNG el ajuste del tamaño o la converter PSD, PCX, PSP, entre resolución de las imágenes. otros No comprime la imagen. Soporta conversión por lotes. BMP, WMF, EMF, ICO, ABC Amber Soporta conversiones JPG, GIF, PNG, TIFF, PCX, Image Cualquiera programadas. PCC, DCX, PBM, PGM, Converter Soporta línea de comandos. PPM, TGA, VST y AFI Incluye un visor integrado. Respeta los efectos de transparencia siempre que sea BMP, ICO, JPEG, GIF, BMP, ICO, JPEG, posible. PixRev PNG, IFF, PNM, PCX, PNG, PNM, PCX, Bajo consumo de recursos. XPM, CUR, ANI XPM, CUR Excelente calidad de salida. Interfaz clara y de fácil uso. 8Optimización de imágenes para la Web Casi todos los programas que hemos mencionado hasta ahora permiten hacer exportaciones a formatos de imágenes empleados en la web. Pero si lo que nos interesa es trabajar con imágenes de alta calidad y que pesen poco, esta última condición necesaria en la web, sería conveniente emplear nuestro tiempo en aprender a manejar alguna herramienta que tenga una función de optimización de imágenes para su uso en la web. GIMP dispone de un excelente plugin que sirve para optimizar imágenes denominado save for web (guardar para la web), que nos permite reducir el peso de las imágenes sin perder la máxima calidad posible. La finalidad de la optimización es reducir el tamaño de las imágenes con la menor pérdida de calidad posible. La finalidad de la optimización es reducir el tiempo de descarga de las imágenes. Para finalizar este apartado, daremos una serie de consejos que están relacionados con la optimización: Si escaneas imágenes para la web, hazlo a 72ppp. La web no necesita mayor resolución. Si escaneas imágenes para retocar y usar en la web, almacénalas en formato TIFF. El formato JPEG sufre pérdidas inicialmente. Recuerda guardar siempre la imagen original. Ten en cuenta el tamaño en píxeles de las imágenes a la hora de maquetar tu página. Si no necesitas tantos píxeles redimensiónala con un programa editor y Autor: Francisco Eduardo Martín Martín 14/15 optimízala de nuevo para la web. Esta operación la tendrás que realizar, siempre, partiendo de la imagen original. Si son imágenes que deben verse con un grado de detalle muy grande, crea una miniatura de la imagen para tu página principal con un enlace a la imagen original. De esta forma, la página principal no pesará demasiado y los usuarios interesados en ver la imagen con detalle podrán hacerlo igualmente con sólo pulsar el enlace. Si realizas tus propios diseños, dale prioridad a las líneas de color horizontales sobre las verticales ya que las primeras se comprimen mejor. Trata de reducir la calidad al máximo sin que se perciba la pérdida. No todas las imágenes resultan afectadas de la misma manera cuando se reduce la calidad. Autor: Francisco Eduardo Martín Martín 15/15