GUÍA 10 Tema: Creación de Gif animado.

Transcripción

1 1 Edición Fotográfica. Guía 10 Facultad: Ciencias y Humanidades Escuela: Comunicaciones Asignatura: Edición Fotográfica. GUÍA 10 Tema: Creación de Gif animado. Contenidos Uso de otras acciones semiautomáticas con la ayuda de Bridge: Galerías Web y PDF así como también para la elaboración de gif animados. Objetivo Específico Que el alumno realice una recopilación de todos sus trabajos utilizando las herramientas de Photoshop para crear animaciones. Materiales y Equipo Guía 10 Número Traer imágenes en formato jpg, de cada uno de los trabajos realizados durante el ciclo tanto para el laboratorio de Edición fotográfica, como para la clase teórica. Introducción Teórica GIF ANIMADO Photoshop nos permite crear animaciones en imágenes, vídeo y flash. Nos vamos a centrar en las animaciones gif. Si lo piensas, una animación es una secuencia de imágenes estáticas, en la que cada una se muestra un tiempo concreto. Si los cambios entre imágenes son suaves, dará una sensación de fluidez y movimiento.

2 Edición Fotográfica. Guía 10 2 En Photoshop jugaremos principalmente con la posición, visibilidad y efectos de los elementos. Por ejemplo, podríamos crear el siguiente banner: Al hacerlo, en la parte inferior de la ventana de Photoshop se abrirá la barra de animación: De momento veremos esta barra, llamada Animación (cuadros). Para crear las animaciones, vamos creando cuadros. En cada cuadro variamos la opacidad, los efectos o la ubicación de los elementos. En este primer marco, colocamos los elementos como queremos que se vean al principio. Por ejemplo, si queremos que un elemento no sea visible ahora, pero los sea más adelante, reducimos su opacidad al 0%. O si queremos que se mueva de la posición A a la posición B, en este primer marco lo colocamos en la posición A. En la imagen anterior, tenemos solo un elemento. Cuando lo tengamos, creamos otro fotograma. Para ello, usamos el botón Duplicar los cuadros seleccionados. El cuadro será idéntico al anterior. Con el nuevo cuadro seleccionado, realizamos lo cambios que queramos en la imagen. Por ejemplo, queremos hacer desaparecer un elemento de la imagen. Así que vamos al panel Capas, y reducimos su opacidad a 0%. En este momento tendríamos dos cuadros. En uno los elementos están de una forma, y en otros de otra. Para crear una transición más suave, necesitamos fotogramas intermedios. Por ejemplo, para hacer desaparecer un elemento, podemos intercalar cuatro cuadros más, y que en cada uno se reduzca la opacidad un 20%. Esto no tenemos que hacerlo a mano, Photoshop lo hará automáticamente. Para hacerlo seleccionamos los dos cuadros entre los que queramos intercalar una animación, y pulsamos el icono Intercalar cuadros de animación.

3 3 Edición Fotográfica. Guía 10 Aparecerá un diálogo como el siguiente: En Cuadros para añadir, indicamos el número de cuadros intermedios que se generarán. Cuantos más cuadros, más suave será la animación, pero de mayor tamaño será el gif final. En Capas, marcamos si queremos que se muestren Todas las capas, o solo las seleccionadas. Y por último, marcamos los Parámetros que cambiarán, entre Posición, Opacidad y Efectos. En nuestro ejemplo, queremos cambiar solo la opacidad de la capa, y añadimos únicamente 4 cuadros. Además, para que la animación sea fluida, el tiempo de los cuadros ha de ser breve. debajo de cada uno se muestra el tiempo que el cuadro será visible. Si hacemos clic sobre el tiempo, podremos cambiarlo. Observe que en la parte inferior, encontramos también controles de reproducción que nos permitirán ver la animación. En la esquina inferior izquierda encontramos el control de bucle. Podemos hacer que toda la animación se repita una vez, un número determinado de veces, o de forma infinita. Tenga en cuenta que si lo hace infinito, del último cuadro volverá al primero. Si no quiere que el cambio sea brusco, haz que el último cuadro sea igual al primero. Una vez que lo haya creado, es hora de guardarlo. Para ello vamos al menú Archivo y elegimos Guardar para web y dispositivos. En el diálogo Guardar para web y dispositivos nos aseguramos de elegir el formato GIF, ya que es el único que nos permite guardar animaciones.

4 Otras consideraciones Edición Fotográfica. Guía 10 4 Animación sencilla, con varios cuadros. Note que cada cuadro tiene una posición y visualización diferente de los elementos o las capas. Flujo de trabajo de la animación 1.Una capa de fondo no puede tener animación por lo tanto es importante que la convierta en capa regular antes de proceder a animar. 2. El siguiente paso es crear las capas necesarias con los elementos que desee animar. Si la animación incluye varios objetos animados de forma independiente o si desea cambiar el color de un objeto o cambiar totalmente el contenido de un cuadro, cree objetos en capas separadas. 3. Añada uno o varios cuadros al panel de animación. 4. Seleccione el primer cuadro y realice alguna de las siguientes acciones para configurar su animación: Activar o desactivar la visibilidad para capas distintas. Cambiar la posición de los objetos o las capas para que el contenido de la capa se mueva. Cambiar la opacidad de la capa para provocar la transición del contenido. Cambiar el modo de fusión de las capas. Añadir un estilo a las capas.

5 5 Edición Fotográfica. Guía Luego añada más cuadros y edite cada uno según sea necesario. Puede generar nuevos cuadros con cambios intermedios entre dos cuadros existentes en el panel utilizando el comando Intercalar (desde el menú contextual). Éste constituye un método rápido para hacer que un objeto se mueva por la pantalla o para hacerlo aparecer o desaparecer gradualmente 6. Defina las opciones de retardo de cuadro y de repetición. Puede asignar un tiempo de retardo para cada cuadro (haciendo clic en la flecha que aparece a la par de los segundos) y especificar repeticiones de manera que la animación se ejecute una vez, un número determina- do de veces, o de forma continua (haciendo en el menú de opciones de repetición a la iquierda del panel de animación. 7. Previsualice la animación haciendo clic en el botón reproducir. 8. Optimice la animación haciendo clic en esta opción desde el menú contextual. 9. Finalmente puede guardar la animación en forma de GIF animado con el comando Guardar para Web y dispositivos. También puede guardar la información en formado Photoshop (PSD) para poder trabajar más tarde en la animación o guardarlo como una secuencia de imágenes película QuickTime o como archivos independientes por medio del menú Archivo>Exportar>Interpretar video. Si lo guarda para Web y dispositivos, asegúrese de seleccionar el formato GIF y ajuste las opciones según lo necesite. Escoja en las opciones de animación si desea que la animación se repita una sola vez o se repita de manera continua. Puede seleccionar el botón previsualizar para verlo su animación en acción, y luego oprima el botón Guardar, seleccione una ubicación y guarde. Procedimiento GIF ANIMADO La primera semana realizarán un gif animado con material proporcionado por el docnete y la segunda semana realizarán un gif animado con sus propias imágenes para lo cual deben traer un story board según las indicaciones que les de el docente. 1. Abra una imagen que desea animar 2. Haga copias de esa capa, y en cada una de ellas realice el cambio que desea generar en la animación del gif, cada capa debe tener un cambio, tantos como lo crea conveniente. 3. Cuando tenga las capas listas, abra la ventana de animación desde el menu ventana>animación 4. En el panel de capas, hag alas copias que necesita recuerde que debe tener la misma cantidad de capas en el panel de animación como en el panel de capas.

6 Edición Fotográfica. Guía Cuando ya los tenga debe de crear la secuencia de esta manera: 6. En la primera capa del panel de animación debe estar activa (con el ojo activo), la primera capa del panel de capas y solamente esa. 7. En la segunda capa del panel de animación, debe estar active la segunda capa del panel de capas (recuerde el orden de la secuencia que desea generar), y así sucesivamente hasta terminar con todas las capas que tiene. 8. Modifique la parte de la visualización y reporducción del gif, lo usual es 0.10 fracciones de Segundo pero esto dependerá de la imagen que se trabajará y el movimiento que se desea obtener. Al mismo tiempo, puede modificar la forma de preoducción que puede ser, una vez, tres veces o una reproducción continua. 9. Guardar el gif animado de esta manera: menu archivo>guardar para web y dispositivos>gif>256colores>guardar. 10. Recuerde guardar en su carpeta personal de la guía 10 el gif animado junto con la captura de pantalla en donde se vea el panel de capas y de animación visible. Referencias Bibliográficas Adobe Photoshop CS 5, Guía del Usuario. Adobe Photoshop CS 4, Guía de Usuario. La Biblia de Photoshop CS3, Laurie Ulrich Fuller, Robert C. Fuller; Ediciones Anaya Multimedia, España 2008.