Subsecciones
Una herramienta gráfica se ve a menudo en las páginas Web es, GIF animado en todas partes. Este es un formato de archivo de imagen que puede contener una secuencia de cuadros que combinan texto, imágenes e información de calendario para crear una película flip-book-like. Como se verá en este capítulo GIFs animados son fáciles de crear, editar y ver en el GIMP.
El GIMP puede guardar animaciones a varios formatos de archivo diferentes, pero al hacer animaciones para la Web, la elección se limita a GIFs. GIF significa Formato de intercambio de gráficos y archivos de formato GIF soporta una serie de características que son particularmente útiles para gráficos web.
En primer lugar, GIF es un formato de ocho bits por píxel, lo que significa que con una planificación cuidadosa de un GIF puede casi siempre se muestra correctamente en sistemas que proporcionan sólo ocho bits de color (ver sección 9.5 ). En segundo lugar, GIF permiten una transparencia, una característica no compatible con JPEG (Joint Photographic Experts Group), el otro formato de archivo principal para imágenes en la web. En tercer lugar, GIF entrelazado soporte que puede ser de interés para la transmisión de imágenes a través de redes de bajo ancho de banda. Por último, el formato GIF soporta capas y capas de información calendario adjunto. Esta última característica es la explotación de animaciones GIF.
Las animaciones son secuencias de imágenes que se pueden jugar de acuerdo a la información de tiempo asociado a cada fotograma. The GIMP ha incorporado soporte para animaciones porque cada capa de una imagen puede ser tratada como un cuadro de animación por el GIMP. The GIMP soporta esta equivalencia, al permitir la información de tiempo que debe atribuirse a las capas, proporcionando una herramienta para la reproducción de imágenes en capas como animaciones, y el apoyo a la conversión de imágenes en capas en formato indexado y salida en archivos GIF.
Figura 9.1
Figura 9.1: Ejemplo de algunas características de animación de GIMP
ilustra algunos de los GIMP de características integradas de animación. Figura 9.1 (a) muestra una imagen que se compone de cinco capas. La organización de las capas se ve en el diálogo de capas se muestra en la Figura 9.1 (b). Esta imagen se construye mediante la creación de una imagen con un fondo blanco, y después añadiendo cuatro nuevas capas, cada una contiene, en secuencia, una de las cuatro letras G, I, M, y P. fueron coloreadas Las letras usando el llenado del cucharón de herramienta . La secuencia de animación se muestra aquí:
(Nota: La animación se puede desactivar haciendo clic en el botón Detener del navegador.) Tenga en cuenta que cada capa se llama y que los nombres contienen información de tiempo utilizado para la animación de cuadro. La información de temporización se indica mediante el texto en el formato ( XXXX ms), donde XXXX es un número de 1 a 4 dígitos, y ms indica que las unidades de la serie son en milisegundos. Los paréntesis son una parte necesaria del formato. Por lo tanto, para este ejemplo, la capa de fondo aparece vacío durante 1 segundo (1000 ms) seguido por las cuatro letras que aparecen en intervalos de 100 ms, 400ms, 600ms, y 800 ms. Nombre y sincronización de información se añade a cada capa haciendo doble clic en el área de título de la capa a la derecha de la imagen, como se describe en la Sección 2.1.1 .
La animación en la Figura 9.1 (a) se puede ver en el GIMP utilizando el Playback Animación herramienta que se encuentra en la imagen: Filtros / Animación del menú. Como se puede ver en la Figura 9.1 (c), la herramienta consta de un botón Play / Stop, un botón Step, que permite la animación que se dio un paso a lo largo de un cuadro a la vez, y un botón de rebobinado, que puede utilizarse para establecer la animación de nuevo al primer cuadro. Este último botón es particularmente útil si la animación se compone de un número muy grande de marcos. La reproducción Animación herramienta juega la animación asociada a la imagen mediante la información de tiempo según lo especificado en el nombre de cada capa. Tenga en cuenta que también hay una barra de progreso que muestra el número de cuadro actual de la animación.
Por defecto, GIMP animaciones marcos secuencialmente presentes utilizando el modo Combinar. Esto significa que a medida que se visualiza cada nuevo cuadro, se apila sobre la anterior. Por lo tanto, si un nuevo marco es parcialmente transparente la trama anterior se puede ver a través de sus partes transparentes. Este no es el paradigma tradicional de película para la animación, el cual, en lugar de la combinación de marcos, reemplaza cada marco con una nueva. Por consiguiente, aunque los marcos en la Figura 9.1 todos consisten de letras individuales en un campo transparente, la animación explica la palabra GIMP una letra a la vez sobre el fondo blanco de la primera capa.
Figura 9.2
Figura 9.2: Ejemplo de modo de reemplazo
ilustra el mismo ejemplo que en la Figura 9.1 , excepto que ahora cada capa utiliza Reemplazar en lugar de combinar el modo de la secuencia de animación. El diálogo de capas en la Figura 9.2 (b) muestra que el modo de sustitución se especifica escribiendo el texto (reemplazar) en el campo de título de cada capa. La reproducción Animación herramienta que se muestra en la Figura 9.2 (c) muestra la animación en el mismo punto en la secuencia como antes. Sin embargo, ahora, debido a la modalidad de sustitución se utiliza, el fondo blanco y el rojo de la letra G no son visibles. No es sólo la letra verde I en un fondo transparente. Este es el paradigma tradicional de película para la animación. La nueva secuencia de animación se muestra aquí:
(Nota: La animación se puede desactivar haciendo clic en el botón Detener del navegador.) El uso explícito de modo Combinar se puede hacer escribiendo el texto (cosechadora) en lugar de(reemplazar) en un título de la capa. Los dos modos pueden ser utilizados juntos en una animación con algunos marcos de sustitución y la combinación de otros.
El GIMP permite animaciones a realizar en RGB y en escala de grises formatos, pero la animación se debe convertir a formato indexado antes de que se puede guardar como un archivo GIF. Tratando de salvar a GIF sin ser en formato indexado genera un archivo de exportación mensaje de diálogo que proporciona al usuario información y opciones para guardar correctamente la imagen.
Correctamente convertir una imagen a formato indexado se realiza con la función de indexado encontrado en la imagen: Imagen / Modo de menú. Esto nos lleva a la conversión de color indexado de diálogo se muestra en la Figura 9.3 (b).
Figura 9.3: Convertir a indexada
Este diálogo tiene dos áreas principales de opciones. La primera se refiere a las opciones de la paleta y el segundo abarca las opciones de difusión. Las opciones por defecto normalmente funciona bien, pero si un particular conversión a formato indexado tiene problemas, consulte la Sección 9.5 , que trata de paletas de colores compatibles con Web y cubre las opciones de diálogo en detalle.
Después de que una imagen ha sido convertida a un índice, se pueden guardar en formato GIF. Esto se logra mediante la elección de imagen: Archivo / Guardar como , que nos lleva a la Imagen Guardar de diálogo se muestra en la Figura 9.4 (a).
Figura 9.4: Guardar una animación como un archivo GIF
The GIMP guarda automáticamente el archivo en formato GIF si el nombre introducido en el cuadro de entrada en la parte inferior del cuadro de diálogo termina con el gif. extensión. Alternativamente, GIF se puede seleccionar en el menú Opciones de guardado. Esto concede automáticamente el gif. extensión a cualquier nombre que se ha escrito en el cuadro de entrada.
Al hacer clic en el botón Aceptar en el Guardar imagen diálogo nos lleva a las Guardar como GIF de diálogo Opciones se muestra en la Figura 9.4 (b). Debido a que la imagen que desea guardar es de varias capas, los GIF animados son opciones disponibles. Estos no están habilitados para las imágenes de una sola capa. La primera opción especifica si la animación se repetirá o no continuamente. Looping es el valor predeterminado. La siguiente opción es un cuadro de entrada que especifica el tiempo por trama para tramas que no han sido especificados de manera explícita. El valor predeterminado es 100 ms.Para los ejemplos de las figuras 9.1 y 9.2 , la información de temporización se da para cada capa, por lo que esta opción es irrelevante para estas capas. Por último, el modo de animación, sustituir o combinar, se puede seleccionar para todos los marcos que no han sido especificados explícitamente. El no cuido opciones predeterminadas en el modo Combinar.
Las técnicas de composición presentados en el Capítulo 7 le ofrecen muchas herramientas para crear GIFs animados. En esta sección, un ejemplo de la creación de una animación que muestra cómo se pueden utilizar algunas técnicas simples para generar animaciones sofisticadas.
El escenario de animación tiene el transbordador espacial volando de una órbita terrestre a una distancia de aterrizaje en la superficie del planeta. La animación es creado por composición las cuatro imágenes separadas muestran en la Figura 9.5
Figura 9.5: Las agujas del reloj desde la parte superior izquierda, Cuatro vistas de la lanzadera de espacio: (a) posterior, (b) 2/3 del perfil, (c) 1/3 Perfil, y (d) el perfil completo
en la imagen de fondo se muestra en la Figura 9.6 .
Figura 9.6: Imagen para utilizar como fondo de aterrizaje de la lanzadera
El primer paso es preparar las imágenes en las figuras 9.5 y 9.6 . La imagen en la Figura 9.6 se recorta al tamaño deseado, y cada una de las imágenes de transporte en la figura 9.5 se seleccionan de sus antecedentes y se coloca en capas individuales de una sola imagen, como se muestra en la Figura 9.7 .
Figura 9.7: Preparación de las primas de traslado en imágenes y creación de la imagen de traslado Clip Libro
La colocación de las imágenes de transporte en un solo libro del clip es una técnica también se utiliza en la Sección 7.1 , y es una herramienta útil para la organización, uso y re-uso de una colección de imágenes que van a ser compuesta juntos.
El siguiente paso composites las imágenes de traslado de la Figura 9.7 en la imagen de fondo recortada de la figura 9.6 . La meta es hacer esto de una manera que hace que el servicio de transporte como si se está volando en una trayectoria de su órbita en el espacio a un punto de aterrizar en la superficie de la tierra. El enfoque es mostrar el transbordador en varios aspectos, mientras se aleja del espectador.
Las principales herramientas utilizadas para lograr el resultado deseado son la transformación de la herramienta y el movimiento de la herramienta. Figura 9.8
Figura 9.8: Secuencia de capas de traslado utilizada para hacer la secuencia de animación
muestra cómo las imágenes de transporte de la figura 9.7 se combinará con la imagen de fondo. Cada una de las imágenes lanzadera siete se obtiene copiando y pegando desde la imagen del libro del clip de transporte. Cada imagen de traslado se escala con el tamaño apropiado usando la transformada de herramienta y posicionado con el movimiento de la herramienta. En algunos casos, la Transformada de herramienta también se utiliza para girar la lanzadera. Estas operaciones se repiten hasta que se consigue la composición deseada. Debido a que cada imagen Lanzadera está en una capa separada, tuve la oportunidad de poner a punto las operaciones de posicionamiento y escalado a mi satisfacción.
Para dar el aterrizaje transbordador un efecto especial final, se crea una capa adicional que muestra un destello de luz reflejado. Con ello se pretende representar el transbordador entra en la atmósfera de la Tierra. El efecto se crea mediante la duplicación de la capa de fondo de la tierra y de ejecutar el SuperNova filtro que se encuentra en la imagen: Filtros / Efectos Luz menú. El cuadro de diálogo para este filtro se muestra en la figura 9.9 (b).
Figura 9.9: Añadiendo el SuperNova Efecto de luz
El diálogo permite la elección del color para el efecto de SuperNova, que se establece mediante la introducción de valores numéricos para el rojo, verde y azul componentes. Los valores que se muestran en la Figura 9.9 (b) producen un destello blanco con un radio de 5 píxeles y 20 radios o rayos. El filtro permite que la posición del efecto elegido para ser interactiva, que se realiza haciendo clic y arrastrando el punto de mira en la miniatura de la imagen en la ubicación deseada. Alternativamente, se puede introducir la posición numérica en los cuadros X e Y de entrada. El resultado de utilizar el filtro se muestra en la Figura 9.9 (a).
La animación está a punto de concluirse. Un paso más es necesario antes de que pueda ser guardado como un archivo GIF. El estado actual de la animación consiste en el fondo, un fondo duplicado con el efecto de SuperNova y siete capas transparentes con varias imágenes de traslado. Esto se muestra en la Figura 9.10 (a).
Figura 9.10: La fusión de cada fotograma de traslado con un fondo
El problema con la figura 9.10 (a) es que ni el Reemplazar ni modos Combinar va a crear la animación deseada con las tramas de capa como se muestra. En el modo de sustitución, la animación se mostrará un cuadro de la tierra, y luego un cuadro con la tierra que muestra el efecto de SuperNova, y siete cuadros, cada vacío, excepto por el servicio de transporte. Alternativamente, la animación obtenido utilizando el modo Combinar mostraría la tierra, entonces un efecto de SuperNova en la tierra, seguido por una secuencia de lanzaderas que aparecen uno a la vez, sino que sólo desaparecen al final de la secuencia de animación. Ninguno de ellos es lo que queremos.
Para producir una animación que se ejecuta correctamente, es necesario dar a cada trama de la capa una copia de la capa de la Tierra. Esto se hace mediante la duplicación de la capa de la Tierra siete veces y luego la fusión de cada copia con un marco de servicio de transporte. Sección 2.7.1 se describe cómo hacer esto utilizando la combinación de Down función. El resultado de la fusión de las siete capas de fondo con los siete tramas de transporte se muestra en el diálogo de capas se ilustra en la figura 9.10 (b). También se muestra, la capa con el efecto de SuperNova ha sido movido a la parte superior de la pila de capas (el fotograma final de animación), y la información de temporización de la capa en la parte inferior de la pila (el primer fotograma de la animación) se ha establecido en 2000 ms . Por lo tanto, la secuencia final de animación permanece en la capa inferior durante 2 segundos, seguido por una secuencia de ocho tramas que muestran la trayectoria de la lanzadera a la atmósfera, y, por último, que muestra la parte superior del marco, que muestra la ráfaga de luz de la SuperNova efecto.
La siguiente figura ilustra la secuencia de animación:
(Nota: La animación se puede desactivar haciendo clic en el botón Detener del navegador.)
Guardar una animación en formato GIF puede crear archivos de gran tamaño, sobre todo si la animación tiene muchos cuadros. Por ejemplo, el transbordador espacial animación discutido en la sección anterior consiste en una imagen cuyas dimensiones son
pixeles y tiene 9 cuadros. Esta es una imagen que consiste de 780 miles de píxeles. Debido a la compresión incorporada en el formato de imagen GIF, lo que ahorra a un archivo de 389 kilobytes. Sin embargo, el tamaño del archivo todavía se puede reducir significativamente mediante el aprovechamiento de la alto grado de redundancia en la imagen.
La redundancia es debido a esta animación cambiando muy poco de cuadro a cuadro. De hecho, el fondo es siempre la misma, y sólo la posición y forma de la lanzadera está cambiando. La función deanimación Optimizar la imagen: Filtros / Animación menú se aprovecha de esto y puede reducir considerablemente el tamaño del archivo resultante. Para ello, los marcos de diferenciación y sólo guardar los valores distintos de cero. La animación original se reconstruye mediante la adición de los marcos diferenciados de nuevo en el fondo.
Para el transbordador espacial animación, el archivo se reduce 389-163 kilobytes si el Optimize Animación opción se aplica después de la conversión a formato indexado. Si se aplica a la imagen en el modo RGB, antes de la conversión a formato indexado, un ahorro adicional se realiza y el archivo resultante sólo ocupa 106 kilobytes en el disco. Esta mejora puede no ser general, y para proyectos donde el tamaño de archivo es importante (como lo es para las conexiones de red de bajo ancho de banda), es recomendable experimentar con los dos métodos.
El iWARP filtro, que se encuentra en la imagen: Filtros / distorsiona menú, puede deformar interactivamente partes de una imagen y luego generar automáticamente una animación que se transforma a partir de la imagen original a la deformado uno. Esto puede ser útil para la creación de ciertos tipos de animaciones.
Figura 9.11 (a)
Figura 9.11: El iWARP Filtrar
ilustra una imagen de gansos canadienses, y la Figura 9.11 (b) muestra el cuadro de diálogo para el iWARP filtro. El cuadro de diálogo se abre en la ficha Configuración, que ofrece una serie de opciones. La Radio Deformar y deslizadores Cantidad Deformación controlan el tamaño y la intensidad del efecto de deformación, y el tipo de deformación se selecciona mediante uno de los mover, eliminar, crecer, encoger, Remolino CCW o CW remolino botones de radio. La deformación se aplica haciendo clic y arrastrando en la miniatura de la imagen. El modo de deformación seleccionado se aplica en la región alrededor del cursor del ratón, el tamaño de la región de aplicación se especifica por el regulador Radio. En este ejemplo, se aplica la función warping Move y el ratón se hace clic en el medio de la cabeza de la gallina central. Arrastrando el ratón verticalmente hacia arriba crea la distorsión se muestra en la miniatura del diálogo de la Figura 9.11 (b).
Para convertir automáticamente la distorsión en una animación, haga clic en la ficha Animación en el diálogo. El cuadro de diálogo correspondiente a esta pestaña se muestra en la Figura 9.12 .
Figura 9.12: Uso de la iWARP Feature Animation automatizado
La animación se crea haciendo clic en la casilla Animar y utilizando el control deslizante para seleccionar el número de imágenes para su uso. Esto crea una secuencia que se transforma a partir de la imagen original a la distorsionada. Si se hace clic en el botón de opción inversa, la animación va desde la imagen distorsionada de la original. Si se selecciona el botón de radio de ping-pong, la animación se inicia con la imagen original, anima a la distorsionada, y luego vuelve a la original. Esta última opción genera dos veces el número de fotogramas seleccionados por el Número de Marcos de control deslizante. La elección de la opción de animación Ping Pong para el ejemplo con el ganso canadiense produce una animación donde la gallina se extiende su cuello hacia arriba, tal vez para tener una mejor vista alrededor, antes de regresar a su estado original. El resultado se muestra aquí:
(Nota: La animación se puede desactivar haciendo clic en el botón Detener del navegador.)