¿Dónde está Naruto? (Linea de tiempo en Photoshop) Buenas a todos. Os traigo un tutorial para aquellos que les interese la edición con animación. Este es un curso avanzado, explicaré lo básico del movimiento pero deberías controlar antes las herramientas básicas del programa. Empecemos por el principio. Voy a enseñar a usar los Keyframes y la línea de tiempo de Photoshop. Pero antes, ¿Qué es un Keyframe? Bien, los Keyframes son una especie de ancla en el mundo audiovisual, se representan como unos rombos amarillos (luego depende el efecto, cambian de forma, pero no de color) y sirven para fijar el comienzo, el final o el cambio de una acción o efecto. *La línea de tiempo de Photoshop se ha ido actualizando durante las diferentes versiones. Yo tengo la CC 2015, y explicaré según esa versión. Para el resto, no sé cómo se aplica, pero la explicación de los Keyframes se aplica por igual, ya que es una base implementada en la edición de video. Por tanto, si quieres desplazar un objeto, cambiarle la opacidad, que aparezca y desaparezca… Se puede realizar fácilmente con Keyframes nada más indicando el punto de inicio y el punto de final. Los propios Keyframes crearán todo el proceso intermedio. Con esta explicación básica y breve, vamos a hacer una simple imagen aplicando Keyframes. Solo comentar, que la imaginación queda de vuestra cuenta, depende que sepáis hacer en Photoshop podréis aplicar diferentes efectos. Lo malo es que Photoshop tiene sus límites. Esta característica es propia de programas de edición de videos, en los que se puede hacer todo lo imaginable. En cambio, Photoshop tiene sus límites. Aviso que tampoco soy un experto. Tal vez haya maneras que no sepa, pero eso será cuestión de investigar más. Si alguien encuentra aspectos no mencionados en este tutorial, puede comentarlos al acabar y actualizaré la información para que podamos beneficiarnos todos. Por ejemplo, una capa normal no puedes girarla, pero si colocas un elemento, este puedes rotarlo. Misterios de Photoshop. Comienza el tutorial. ¿Dónde se mete Naruto? 1.- Claramente, abrimos el Photoshop, y abrimos la imagen con la que vamos a trabajar. En este caso he elegido un bosque, para poder exprimir las aplicaciones que vamos a llevar a cabo. Contenido oculto 2.- En el panel ventana, seleccionamos la opción Línea de tiempo. Posteriormente le damos a crear línea de tiempo. Contenido oculto 3.- Bienvenidos a la pantalla que solemos ver en una edición de video. Haré una breve introducción a los diferentes aspectos del panel. Contenido oculto 1. El Play: De igual manera, sirve con darle a La barra espaciadora. Esta opción es para ver lo que vamos haciendo del video en movimiento. Un aviso, Photoshop no es perfecto, y depende lo que pese (casi siempre) la reproducción no es ni de lejos lo que se verá después. Va más lento que el resultado final, y veréis una barra verde como de proceso. La mejor manera de controlarlo es la práctica y sacar el resultado final, y si va demasiado rápido volver a editar el Photoshop, simplemente aumentando el tamaño. 2. Hablando de la barra verde de proceso. Aquí podréis seleccionar en que punto del video os queréis colocar. La pestaña azul con la barra roja indica en el tiempo del video que estáis, y se verá en la imagen de arriba. A su vez, veis dos pestañas grises a los extremos. Eso es la duración del video. Si queréis que dure más, solo tenéis que coger el extremo de la derecha y arrastrarlo por la línea para alargarlo. **Puede que no podáis alejaros más, eso lo explico ahora** 3. Esto es la duración visual de la capa. Se ve de color morado. Como he explicado con las pestañas grises, ésta la podéis arrastrar a la derecha para alargar la duración. ** A la vez, se alargan la pestaña gris de arriba. Entonces, ahora podéis mover la pestaña a la izquierda para acortar el video. Por mucho que haya color morado fuera del límite de la pestaña gris, eso no se verá. Para acabar, la pestaña morada se puede mover por la línea horizontal. Hay que pensar que el principio y el final de ésta es cuando aparece y desaparece. Mi consejo, da igual donde se coloque, yo llevaría la barra morada hasta el principio siempre. Y la alargaría hasta el final. 4. Aquí está el menú de cada capa. A más capas, se añaden aquí por ellas solas. I le damos a la flecha blanca, aparecen las características que podemos cambiar de la capa. Luego las vemos. 5. Este menú es de visualización. El primer icono significa que cambias de línea de tiempo a animación de cuadros, las que conozcan la mayoría de animadores. Yo no tocaría esta opción hasta tener el video seguro. De aquí pasamos a las montañas con una barra. Esto es para ver la línea de tiempo en escala. No tiene mucho misterio. Y como no, la barra gris para movernos por la línea de tiempo visualmente. El resto de botones no hace falta tocarlos. Yo no los uso, pero puede haber algo interesante. Todo es probar. Claro, podéis hacer la línea de tiempo más pequeña o grande verticalmente, buscando el botón de dos flechas y arrastrando arriba y abajo, según os convenga. 4.- Empecemos a añadir a Naruto. Lo colocamos en el archivo (O copiamos, aquí cada uno su modo). Si abrimos la pestaña de la capa, vemos lo que tiene para editar. Transformar, Opacidad, Estilo. Transformar se refiere al movimiento, y Opacidad a ella misma. Primero haremos algo sencillo, para entender el concepto de Keyframes. Colocamos a Naruto en un punto que queramos empezar (En la imagen). Colocamos la situación de visualización del video al comienzo (Pestaña azul y línea roja). ¿Veis los relojes al lado de las opciones de la capa? Esos son los inicios del Keyframe. Le damos al botón de Transformar. Contenido oculto 5.- Ahora nos ha aparecido el reloj con una manecilla, indica que está activo. Si le damos otra vez, desactivamos los Keyframes y se borran todos los que haya. A su lado, vemos un rombo amarillo con dos flechas. El rombo en amarillo indica que estamos seleccionando un Keyframe, y las flechas son para pasar de un Keyframe que tenemos a otro. A su lado, en la capa morada, vemos que tenemos un rombo amarillo y estamos encima de él con nuestra línea roja. Eso es el famoso Keyframe. ¿Qué está haciendo? Pues ha fijado el aspecto (En este caso la transformación “rotación, tamaño, posición”) de la capa en cuestión. Contenido oculto 6.- Vamos a probar a desplazarnos con la línea roja. No pasa nada, no se mueve nada. Eso es porque no hay nada que haga que se mueva. Pero probemos una cosa. Dadle al rombo “amarillo” al lado del reloj… ¡Pero si es gris! Eso es porque donde nos hemos colocado ahora en el tiempo, no hay ningún Keyframe. Por tanto, coloquemos uno. Dadle al rombo gris. ¡Tachán! Hemos colocado nuestro segundo Keyframe. Si veis en la línea morada, estamos en el Keyframe amarillo, y el anterior está gris. Pero si nos desplazamos por el tiempo, no se mueve nada. Eso es porque hemos puesto un ancla, pero no hemos movido nada. Es como poner una cuerda con una chincheta y ponerle en el otro extremo otra chincheta pero sin moverla del sitio. Se queda igual. Ahora vamos a mover a Naruto. Colocados en el Keyframe amarillo (Si te colocas en otro sitio que no sea ahí, crearas un Keyframe nuevo al mover a Naruto). Seleccionando la herramienta mover, teniendo la capa de Naruto seleccionada, lo desplazamos hasta el otro lado de la foto. Contenido oculto 7.- Vamos a ver que hemos conseguido. Vamos al comienzo del video (Con la línea roja, a partir de aquí lo daré por hecho que lo sabéis). A ver qué cara se os ha quedado cuando, al desplazaros, habéis visto a Naruto irse hacia atrás. Pues básicamente, habéis aprendido a poner Keyframes. Los más adelantados ya podrían continuar por su cuenta, hasta llegar a la exportación del video (En nuestro caso GIF). Contenido oculto 8.- Ahora, vamos a hacer que Naruto se esconda detrás del árbol. Para eso, vamos a hacer una máscara de capa a Naruto (Supongo que sabréis hacerla) Con la pluma vamos recorriendo el árbol, lo convertimos en selección e invertimos los colores para que sea transparente la capa en ese punto. Por último, para que nos funcione, tenemos que desenlazar la máscara de capa de Naruto, para que no se mueva junto con él. Contenido oculto 9.- ¡Ups! Al probar la velocidad, he visto que me duraba una eternidad. Para ello simplemente desplazas el ancla hacia la izquierda, para que la distancia de tiempo entre ambos sea menor. Pensad que son dos puntos, el inicio y el fin. Si los pones a 2 minutos de distancia temporal, Naruto tarda 2 minutos en desplazarse de A a B. Si recortas la distancia temporal, Naruto seguirá yendo de A a B, solo que en menos plazo de tiempo. A su vez he acortado la línea morada, para que Naruto deje de verse una vez pasa el árbol. Esto quiere decir que mientras sigue el tiempo, esa capa es como si no existiera más. Vamos a añadir nuestro segundo Naruto. Aviso, cuando colocáis una nueva capa, esta empezará desde donde tenéis colocado el marcador. Para que aparezca donde queráis en el tiempo, simplemente moved la línea morada en horizontal. Contenido oculto 10.- en este Naruto hacemos máscaras de capa para el árbol anterior y el de la derecha. Ahora a ver si conseguimos que Naruto nos pase desde un árbol a otro, moviéndose un poco. Colocáis a Naruto en la zona oculta de la capa, para que se mueva desde la invisibilidad. Los Keyframes siguen como siempre por mucho que no veáis a Naruto. Es cosa de las capas, no del tiempo. Entonces, como ya hemos aprendido, colocamos a Naruto detrás del árbol, activamos el Keyframe Transformar de la capa y colocados en el tiempo justo después del final del Naruto anterior. Después, nos movemos en el tiempo, y colocamos un segundo Keyframe. Podéis poner un Keyframe y después mover a Naruto, o sin poner el Keyframe, como ya tenéis el anterior, al mover a Naruto en otro punto del tiempo se coloca automáticamente el Keyframe. Para darle un poco de movimiento, he girado a Naruto en el primer punto hacia la izquierda y en el último a la derecha. Así hace una pequeña rotación. **Mi Naruto es un elemento incrustado, por eso puedo girarlo. Pero es algo complicado, puede dar problemas. A mi Naruto se me ponía boca abajo, ni idea porque. Eso luego tendréis que resolverlo como profesionales de edición** Contenido oculto 11.- Otro efecto de las capas. La opacidad. Es igual de sencilla que el movimiento, incluso más. He puesto a otro Naruto, y desde el principio de su tiempo lo dejamos en 0% de Opacidad y activamos el Keyframe. Contenido oculto 12.- Simplemente nos movemos en el tiempo y aumentamos la opacidad a 100%. Ahora un Ninja Naruto nos va a atacar con su Rasengan. Para hacerlo mucho más épico, si tenéis el archivo colocado, podéis probar lo siguiente. Colocáis un Keyframe de transformar al principio, y os váis en el tiempo al último Keyframe donde esta opacidad. Allí le dais a transformar la capa, y bajáis a Naruto y lo escaláis desde el centro. Así, al moverse, Naruto aparecerá ganando opacidad, y encima aumentando de tamaño. :D Contenido oculto *Tip: si queréis que un efecto se quede parado, y que no haya todo el rato actividad de un Keyframe a otro, poned uno entre medias. Si lo ponéis, el efecto se mantiene en ese tramo, por lo que se os quedará quieto en donde esté. Repito, pensad en una cuerda que se estira, se mueve, va arriba y abajo… Y los Keyframes son chinchetas que pones. Poniendo dos sin tocar nada, la línea queda recta y sin movimiento. 13.- Esto es algo que se me ocurrió. Por eso comentaba que cada uno puede sacar cosas chulas de estas herramientas. Creamos una capa de texto y escribimos algo sencillo. Naruto. Que original :p. Pues lo que vamos a hacer es que el nombre aparezca y desaparezca. Para ello, moveremos esta vez la máscara de capa. Creamos una máscara de capa en el texto, y le vamos a dar… ¡Un degradado! Volvemos a desenlazar la capa de la máscara, y el degradado que no sea de extremo a extremo. Porque vamos a moverlo y necesitamos zona blanca y negra. (Ver el degradado en la imagen del siguiente punto). Contenido oculto 14.- Por el momento, movemos la máscara hacia arriba para que se quede en la zona blanca y veamos el nombre. Entonces le vamos a dar al texto unos Keyframes de Opacidad para que aparezca. Una vez los tengamos, le vamos a dar al Keyframe Posición de máscara de capa. Lo siguiente es fácil. Es lo mismo que hemos hecho pero seleccionando la máscara en el panel Capas. Nos adelantamos en el tiempo hasta donde queramos que se mueva, y bajamos el degradado. Si la parte de arriba de la máscara se queda sin colorear, coloreadla de negro. Contenido oculto 15.- Y ya tenemos el tiempo creado. Ahora no nos queda más que volver a las pestañas grises que había arriba, y acortar la de la derecha hasta donde queramos que acabe la edición. Jugad con la vista de escala si no veis las pestañas. No importa que quede la barra morada fuera, lo que se verá es lo de las pestañas grises. Contenido oculto 16.- Importante. ¡Guardad! Si os tiráis mucho tiempo haciendo, y se os bloquea Photoshop, os va a dar mucha rabia. Por otra parte, yo no he encontrado otra manera para el siguiente paso. Por ello, guardamos el archivo ahora, y no lo volveremos a guardar. Esto es el trabajo final. Una vez hecho, vamos a darle al botón que hemos comentado antes, el de fotogramas. Genial, esa es nuestra animación convertida al que gente reconozca, el menú de cuadros de fotograma. (Mirad la imagen anterior). 17.- ¡No guardéis! Si la animación hay que cambiarla, debéis hacerlo en el anterior guardado, esto es para sacarlo, pero si volvemos a la línea de tiempo anterior desde este punto, te hace un cristo de Keyframes que no entendería ni Stephen Hawking. Y ya el resto como puede que sepáis. Le dais a repetir infinito, para que no pare, y guardáis como archivo Web. Aquí ya le dais a previsualizar, os abrirá el Internet y veréis como queda. Contenido oculto *Vale, al exportar me doy cuenta de que las ediciones de rotación y escala no se han aplicado. Pero no voy a editar el tutorial, quiero que sepáis que se puede en el archivo. El problema es al exportar, por lo que si alguien descubre cómo se arregla, nos beneficiamos todos. Sorry n_nU En realidad, el paso de los cuadros de Frames es para poner que se repita hasta el infinito, no por nada más Por el resto, si exportas desde la propia línea de tiempo, se ven los efectos de rotación y escala. Se me había ocurrido que podéis guardar el GIF molón pero que solo se reproduce una vez, y luego volver a abrirlo con Photoshop y hacerlo como fotogramas. Pero va a trompicones y los colores salen con ruido. La línea de tiempo lo bueno que tiene es la fluidez que usa. Podéis probar a exportarlo como video y luego convertir el video a GIF, aunque no tendrá la fluidez que conseguimos con el primero. SOLUCIONADO El paso de convertir a cuadros de fotogramas ya no es necesario. Simplemente, teniendo la linea de tiempo intacta,le dais a exportar para Web. Allí escondido, abajo hay una opción que pone Una vez. Solo había que poner Infinito, y tenemos nuestro querido GIF con giros y escalas. ToT Contenido oculto 18.- Finalizado. Ya tenemos nuestro GIF. Algún dato curioso de las acciones: Los Keyframes se pueden seleccionar en grupo. Seleccionas un rombo, y apretando SHIFT le das a otro. Los dos se pondrán en amarillos, y arrastrándolos los mueves. Cuidado al tocar un Keyframe, fijaros que con el Click no se os mueve, sino dadle a CMD + Z para deshacer el movimiento que nos ha surgido sin querer. Y ya está. Tenemos nuestro GIF, y hemos aprendido a usar la línea de tiempo. Espero que os haya gustado el tutorial y que os haya sido útil. Ahora lo que queda es que practiquéis, y si queréis subid vuestros GIF aquí, así veremos de lo que sois capaces. Al fin y al cabo, si no prácticas la lección no se te quedan los conceptos, los olvidas a los días. Un saludo, y hasta el próximo tutorial. :D
