Transcripciones
1. ¡Hola!: La animación es una herramienta increíble para la autoexpresión. Armado con sólo unos principios básicos, puedes tramar para experimentar para descubrir tu propio estilo. Me llamo Gemma Yin y soy directora de animación y video con sede en Londres. Mi trabajo tiene un estilo multiplataforma, mezclando fotografía y película con elementos de diseño gráfico e ilustración. Es audaz, colorido, y un poco peculiar y ha demostrado ser un éxito para proyectos en las industrias de la moda, la
belleza y la música. En esta clase, quiero guiarte por uno de mis estilos de firma, dando vida a un retrato fotográfico agregando una divertida capa de ilustración animada en la parte superior. Este proyecto te ayudará a captar mejor los principios de las velocidades
de fotogramas para la imagen en movimiento, el arte del bucle infinito que es un mejor amigo animado, algunas habilidades técnicas en Photoshop y After Effects, y en última instancia, la lección más importante que quiero que les quiten de esto es que pueden ser mucho más libres de lo que podrían pensar e incluso cometer errores
flagrantes y el clip que creen todavía se verá realmente genial. Para el proyecto de clase, te
estaré caminando a través de hacer tu autorretrato animado con tus propios diseños. Abróchate y empecemos.
2. Prepárate: Bienvenidos a la clase. Para poder sacar el máximo partido a esta lección, necesitarás tener la configuración adecuada. Este proyecto funciona mejor si tienes a mano las siguientes herramientas. En primer lugar, un dispositivo para tomar tus fotos, un teléfono inteligente, tableta, incluso tu portátil puede hacerlo. Segundo, una forma de dibujar digitalmente. Esto podría hacerse directamente en Photoshop usando un lápiz óptico en una tableta gráfica, o directamente en la pantalla si tienes un dispositivo integrado. Puedes usar un iPad o tableta equivalente para el elemento de dibujo, aunque esta lección se centrará en trabajar directamente en Photoshop, por lo que tendrías que adaptar el flujo de trabajo para eso vosotros mismos. Por último, necesitarás una computadora con Adobe Photoshop y After Effects instalados y funcionando. Te guiaré por los pasos para hacer un archivo GIF usando solo Photoshop de principio a fin, y luego te mostraré cómo llevar los mismos activos a Adobe
After Effects en caso de que quieras exportar como archivo de video para usar en Instagram. Si estás totalmente seguro y te sientes creativo, debes seguir adelante y llegar a tu propio diseño. Para aquellos de ustedes que solo quieren hacerse pero están teniendo un poco de bloque creativo, pueden
usar una de las plantillas que he preparado. Estos se pueden descargar de la descripción del proyecto a continuación del video. Recuerda guardarlo dentro de tu carpeta de proyecto bajo un nombre como plantillas antes de usar. El diseño que le doy vida durante la clase es relativamente detallado, pero podrías ir muy rápido y ver qué sale de tu subconsciente. Hice estos ejemplos de 10 minutos para mostrarte lo rápido y fácil que podrías acercarte a esto. La espontaneidad combinada con un poco de presión puede producir resultados muy interesantes. A continuación, prepárate para decir queso ya que te doy algunos mejores consejos para tomarte tus fotos.
3. ¡Sonríe!: En primer lugar, necesitamos tomar una secuencia de fotografías de nosotros mismos. Entra en modo selfie y toma un montón de fotos o pide a un adorable asistente que las lleve por ti. No necesitas trípode esto, pero trata de mantenerlo bastante estable y chasquear rápidamente. Necesitas moverte un poco para darle algún interés a la pieza, así que ten un ir a una cara divertida o simplemente una gran sonrisa hará maravillas. Preste atención a la iluminación. Natural es favorecedor, así que ponte fuera o cerca de una ventana. El fondo puede ser cualquier cosa también, pero no demasiado ocupado suele ser un buen grito. A menudo disparo mis fotos en blanco y negro ya que da un aspecto estilizado favorecedor y ayuda a la animación y los colores destaquen más del fondo. Probablemente haya una manera fácil de configurar tu teléfono para tomar las fotos en blanco y negro sin que después tengas que juguetear con ellas. Si sabes que quieres que tu producto final sea cuadrado, podrías configurar esto ahora, de
lo contrario, el retrato te irá bien. No hay número fijo de fotos que necesitamos conseguir, pero me parece que entre seis y 10 son bastante dulces. Ten un desplazamiento rápido para ver cómo te sientes acerca de tu secuencia. Puedes retomar tantas veces como quieras, pero quizá encuentres que la espontaneidad de tu primer intento funcionó muy bien, para que uno pudiera ser guardián. Ahora necesitas importarlos a tu dispositivo. AirDrop es súper rápido y fácil entre dispositivos, o siempre puedes enviárselos un correo electrónico si no puedes descifrarlo. Ahora, deberías organizarte y hacer una carpeta de proyecto en la que almacenar las fotos. Voy a nombrar la mía Retrato Animado de Gemma. Dentro de la carpeta principal, estoy haciendo otra carpeta llamada Photo Sequence. Verás por qué esto es importante más adelante. Pon tu secuencia de fotos ahí dentro y ten otra vuelta rápida para ver si eres feliz. Esta es tu última oportunidad de eliminar cualquier indeseable. No importa si borras algo desde el medio. Una vez que estés contento con el conjunto, quieres cambiar el nombre de las fotos simplemente 01, 02, 03 ,
etc, teniendo cuidado de mantener el orden original igual para que cualquier movimiento se vea suave y no salte aleatoriamente. Deberías tener algo parecido a esto, y estamos listos para pasar a la siguiente etapa. En la siguiente lección, repasaré alguna teoría esencial sobre las tasas de fotogramas.
4. ¿Qué es la velocidad de fotogramas?: Si necesitas hacer cine, puede
que no estés familiarizado con lo que es una velocidad de fotogramas y cómo podemos usarlo para influir en el aspecto y la sensación de una pieza de imagen en movimiento. Una velocidad de fotogramas indica el número de imágenes fijas consecutivas, también
conocidas como fotogramas, que se muestra en la pantalla durante un clip de vídeo de un segundo. Por lo tanto, algo que es un fotograma por segundo se vería algo así. Existen varias tasas de fotogramas estándar de la industria que también varían entre regiones, pero la mayoría de las películas se proyectan a 24 fotogramas por segundo o a 25 fotogramas por segundo en Europa y Estados Unidos. hay nada que decir que no puedas ir más alto o más bajo, así que siéntete libre de experimentar, pero si terminas trabajando en proyectos de clientes, asegúrate de comprobar en qué velocidades de fotogramas necesitan los archivos finales para ser entregados antes empiezas a trabajar en algo. En contraste con los cineastas, yo y los compañeros animadores a menudo trabajamos con velocidades de fotogramas más bajas que en el cine tradicional. En cualquier lugar entre 6 y 12 cuadros por segundo son opciones populares dependiendo del proyecto. Hay dos buenas razones para usar una velocidad de fotogramas más baja. El primer motivo es que si estás trabajando en un estilo tradicional de animación stop motion donde necesitas dibujar o componer cada fotograma individualmente, estás reduciendo tu carga de trabajo a la mitad si eliges usar 12 en lugar de 24 o 25 cuadros por segundo. No será tan suave, pero tiene cierto encanto, lo que me lleva a la segunda razón. Una menor velocidad de fotogramas puede darle una estética única a tu video. El efecto es poco común, peculiar, y de muchas maneras, más indulgente que trabajar con video suave. Ahora que entendemos un poco más sobre las velocidades de fotogramas, sigamos adelante y pongamos una para nuestro propio proyecto.
5. Cómo configurar nuestro documento de Photoshop: Ya estamos listos para abrir Photoshop y empezar nuestro documento. Puedes ir directamente a este botón Abrir, o puedes subir al menú superior e ir Archivo,
Abrir, y luego encuentras tu carpeta de proyecto. retrato animado de Gemma está aquí, lo
he guardado en la barra lateral para poder acceder a él rápidamente. Después voy a Photo Sequence, presiono 01 que es la imagen superior entonces tienes que revelar esto porque no aparece automáticamente. Quieres hacer clic en el botón Opciones, que debe estar en la parte inferior izquierda o en algún lugar abajo en la parte inferior de tu menú y luego quieres hacer clic en el cuadro para la secuencia de imágenes. Esto va a automatizar acercando todas las imágenes, lo que va a hacer nuestra vida más fácil. Asegúrate de que se haga clic en ese botón y luego ve y pulsa Abrir. Aquí es donde fijamos nuestra velocidad de fotogramas, que hablamos antes. Seis cuadros por segundo, creo, es una gran tasa de fotogramas para este tipo de cosas. Sólo asegúrate de que sean seis y presiona Ok. Genial. Entonces aquí está nuestro documento. Simplemente lo voy a guardar ahora para que no lo olvide, Archivo Guardar como. Entonces entrando de nuevo a mi carpeta principal, solo lo
voy a guardar como retrato doc de Gemma, guardar. Si no puedes ver esta línea de tiempo aquí abajo, porque no es algo estándar que mucha gente use Photoshop para la imagen en movimiento por lo que necesitas subir
a la ventana y deberías poder llevarla aquí. Lo desmarcaré para mostrarte y luego volveré a tomarlo. Ahí está. Como puedes ver o no puedes ver todas las imágenes separadas porque Photoshop ya las ha automatizado en esta sola capa. Por lo que cada imagen que tuviste en tu secuencia ya está dentro de esta capa. Si agarras este triángulo azul con la línea roja bajando de él, esto se llama el cabezal de reproducción y esto es muy importante porque te
muestra lo que estás viendo en cualquier etapa del video. Para que puedas arrastrarlo y echar un vistazo. Ahora, quiero que vayas a este botón Cog por aquí justo a la izquierda de la línea de tiempo principal y si lo abres, presionas hacia abajo, puedes revelar estos ajustes. Deberías tener marcada la reproducción de bucle si no estaba marcada ya y luego volver aquí. Ahora si presionas la barra espaciadora, puedes ver exactamente cómo se ve esto cuando toca. Una vez que exportas esto como GIF, estos son los tiempos y todo va a quedar así. Creo que ya se ve genial. Yo estoy contento con ello. Presiona Barra espaciadora otra vez para parar y luego quieres volver a poner esto siempre en el principio. Esto es sólo una buena práctica porque si lo tienes en algún lugar del medio, cuando comienzas a importar más capas al documento, esto puede afectar dónde están las cosas en la línea de tiempo. Entonces esto siempre tiene que estar al frente, así que no lo olvides. Genial. Estamos listos para pasar a la siguiente lección, que será una introducción a la regla mágica de tres y cómo podemos usarla para crear un bucle de ebullición.
6. La regla mágica de 3: La regla mágica de tres es una técnica que he estado usando desde que empecé a aprender teoría de la animación. Es una forma súper fácil pero efectiva de obtener más de menos. La idea es muy sencilla. Si dibujas al menos tres versiones de la misma imagen o forma y las pones para que se reproduzcan en un bucle, la imagen aparecerá más viva. Dos es muy poco, pero tres es suficiente para engañar al ojo. Esto se conoce comúnmente como ebullición en lingo de animación. Ya que la imagen no está evolucionando ni cambiando, simplemente ebullición, no estática sino un poco viva. No hace falta que las imágenes sean idénticas. De hecho, cuanto más variación entre las tres imágenes, más caracter puede llegar a ser. Este es el principio que estaremos utilizando para nuestra propia obra de arte. Significa que sólo tenemos que diseñar una capa de dibujo antes repetir el mismo diseño dos veces más para crear el efecto de ebullición. A continuación, llegamos a trabajar en nuestra primera capa de dibujo en Photoshop.
7. Inicio de nuestra primera capa de dibujo en Photoshop: Ahora, estamos listos para dibujar nuestro diseño, que es la parte divertida. Voy a seguir adelante y usar la plantilla que preparé, que también puedes descargar de la descripción del proyecto. Si has decidido dibujar a mano alzada, solo ignora las referencias que hago a la plantilla, pero las herramientas y los métodos que vamos a aprender fundamentalmente siguen siendo los mismos sin ella. posible que incluso hayas esbozado un diseño o lo hayas preparado o prediseñado de alguna otra manera, y entonces siempre podrías usar ese diseño de una manera similar a como estoy usando la plantilla que he hecho. Antes de que hagamos algo, quiero que dupliquen, triple-chequeen nuevamente que esta cabeza de juego está en el principio mismo. También en la ventana de Capas, que no hemos mirado con mucho detalle, puedes ocultar esto si quieres, realmente no importa, pero quiero que te asegures de que no tengas nada seleccionado. Por ejemplo, no tienes seleccionado este grupo de videos. Para hacer eso, necesitas hacer clic en este espacio vacío, solo tienes que hacer clic una vez, y definitivamente has desseleccionado todo. Vamos a ver la plantilla. Tendrás que haber descargado estos y he guardado el mío en el Portrait Animado de Gemma, acabo de hacer otra carpeta llamada plantillas, solo
podrías descargar una plantilla si las estás usando. Echemos un vistazo. Tengo éste que probablemente es mi fav, pero no te preocupes demasiado por el aspecto ligeramente raro de esto. Sé que se ve transparente porque esta parte es transparente, y estos bits no lo son y estos son ordenados que no están realmente relacionados con el diseño principal, pero estos son muestras. Voy a usarlo y mostrarte en Photoshop cómo esto va a hacer tu vida un poco más fácil y rápido, así que no te preocupes por eso. Basta con mirar el diseño general principal y obtener una sensación al respecto. Entonces tenemos este que es bastante California pedir, y tiene unas gafas rojas redondas estilo Hockney aquí, que creo que es divertido. Entonces el tercero es como una galleta de moda punky y tienes un ojo y eso se sentaría sobre tu ojo derecho. Voy a usar este porque es mi favorito. Selecciónelo, arrástrelo, pase por encima de su cara y suéltelo en su lugar. Ahora, convenientemente, esto se ajusta exactamente sobre mi cara en bastante buena posición, pero estoy seguro que necesitas ajustarla. Puedes jalarlo, puedes moverlo, puedes redimensionarlo usando las flechas de las esquinas. Una vez que estés contento con él, solo tienes que presionar Enter en el teclado y debería bloquearlo en su lugar. Ahora bien, si hiciste lo que dije y te aseguraste de que no seleccionaste todas las capas, esto debería haber aparecido por encima de tu grupo de video sentado ahí agradable y bonito. Entonces deberías tener esto, pero estamos haciendo caso omiso de la línea de tiempo por un rato aquí. Centrándose en este panel Capas ahora. Este proceso es el mismo sin la plantilla. Si solo vas directo al dibujo, solo
apagaré esto con el propósito de tu comprensión. Lo siguiente que tenemos que hacer es bajar y hacer una nueva capa. Nuevamente, anular la selección de todas las capas, solo estar siempre haciendo clic, esto debería convertirse en segunda naturaleza, haciendo clic en esta área en blanco, no
tienes nada seleccionado. Baja, hay un pequeño botón y parece un trozo de papel con una esquina puesta hacia arriba, y lo presionas y una nueva capa aparecerá mágicamente encima de todo lo demás. Cambiaría el nombre de esto ahora, así que ve y haz doble clic en el nombre y luego simplemente nombra Dibujo 1. Genial, así que tienes tu capa de dibujo y ahora solo puedes empezar a jugar. Lo más importante para empezar a saber es el atajo de deshacer si no lo haces ya, así que aquí es Comando Z. Todo lo que hagas, no importa, no hay consecuencias, incluso
puedes simplemente volver atrás un escenario aquí en la historia. Consigue tu pincel, este pincel se encuentra en la barra de herramientas izquierda. Haga clic en eso, y los ajustes para esto están aquí arriba. Creo que solo necesitas tener una verdadera jugada con esto y ver lo que sientes, lo que te gusta, hay tantos tipos diferentes de pinceles. Puedes elegir el tipo de pincel, puedes cambiar el tamaño. Basta con dejar de dibujar, deshacer, y luego simplemente hacerlo de nuevo. Esta es otra de tus herramientas definitivas para esto. Te das clic en esta muestra de color y te revela tus colores, quieres elegir algo bonito, elección es amarillo lima-amarillo “Ok” Entonces quise hacer mi pincel un poco más grande porque es un poco pequeño, así que haz eso más grande, solo arrastra esto hacia arriba y luego solo ve cómo se ve eso. Se ve bastante bien. También está esta herramienta Suavizado, que puede ayudarte dependiendo de qué tan suave esté tu mano o del dispositivo que estés usando si no es tan bueno de usar. Esto simplemente suavizará un poco las líneas para ti. Ya luce bastante interesante. Ahora, puedes empezar a jugar, dibujando un bigote tonto, un poco de ceja. De verdad tómate tu tiempo, conoce las herramientas, encuentra los pinceles que te gustan, encuentra los colores que te gustan. Si estás usando la plantilla, voy a explicar exactamente qué está pasando aquí. El diseño principal es transparente. Esto te va a permitir trazar realmente sobre él y poder
ver lo que tienes y no has dibujado todavía porque los bits que sabes que no has dibujado en tu propia capa seguirán luciendo transparentes y un poco planas. Herramienta Cuentagotas te va a ayudar a encontrar el color exacto que he usado muy,
muy rápidamente u otro color de algún otro lugar que te guste. Se hace clic en él, se pasa el cursor sobre. Creo que voy a hacer el amarillo, así que hago clic en eso, y luego puedo ver que ahora mi muestra amarilla está actualizada para tener la misma forma. Cuando use el pincel, así que volveré al pincel, y necesito estar en mi capa de dibujo para poder hacerlo. Voy a acercarme a las secciones amarillas del dibujo y empezar a repasar. Sí, va a ser del mismo color amarillo que usé en el boceto original. Para el pétalo, realmente no importa si voy un poco en la línea aquí porque voy a dibujar el círculo blanco encima después. En realidad, eso ni siquiera era amarillo, eso era naranja. Pero este es un buen momento para que diga que, en realidad, si cometes errores de marco a marco, realmente no
importa, agrega un elemento extra, no
va a arruinar todo si has dibujado el color equivocado en algún lugar, va a parecer interesante, así que no te preocupes por eso en absoluto. Entonces ahora, si quieres empezar teniendo una sensación cómo se ve sin la plantilla, solo
puedes alejarte,
puedes hacer clic en el ojo junto a la plantilla para desverla, y puedes ver tus pequeños pétalos viniendo en, que se ve genial. Sigue alejando el zoom, obteniendo una sensación para el equilibrio de la imagen. Si estás usando una plantilla, no tienes que apegarte a mis colores en absoluto, solo
puedes volverte loco con ella. Úsalo como inspiración, usa cualquier parte, usa gafas de sol, usa las flores, lo que sea, y construye tus propias cosas. Eso también está bien. Porque muchos de los detalles en mis diseños pueden ser un
poco complicados para trabajar solo en una capa con, y quería mostrarte cómo puedes trabajar con una capa de elementos de fondo de tus dibujos y luego elementos de primer plano. Si quieres organizarte realmente con ella, puedes cambiar el nombre de tu capa de dibujo, Dibujo 1 fondo, y luego crear una nueva capa de la misma manera que lo hacíamos antes donde presionas el símbolo “Nueva capa” y puedes nombrar a este Dibujo 1 primer plano. Voy a seleccionar ahora el primer plano para mostrarte por qué he dibujado
estratégicamente esta sección blanca del ojo como un poco desordenado. Hago eso sabiendo que estaría detrás la línea de apagón y la blob púrpura en medio del ojo. Lo que necesito hacer ahora es que voy a apagar el fondo que ya dibujé, y voy a ir al primer plano. Ahora, voy a dibujar el contorno negro y la sección morada. Simplemente voy a muestrear mi negro, hacer este pincel un poco más grande. Lo estoy haciendo bastante rápido en realidad, así que es un poco de lío. Lo haré más o menos. Voy por encima de los pedacitos negros, y luego voy a bajar, agarrar mi muestra, y voy a dibujar la sección morada. Ahora, cuando llego a encender de nuevo mi capa de fondo, no
se ve muy ordenada, pero está llena. Es solo una forma más fácil para que algunos elementos dibujen el fondo más suelta y luego lo repasen más prolijamente con los detalles superiores. Una vez que estás en esta posición donde has terminado todos esos dibujos y has hecho los fondos y los primeros planos y crees que lo has cubierto todo, y te ha hecho la vida un poco más fácil en el camino, puedes entonces combinar estas capas de nuevo en una sola capa de dibujo porque todavía tendrán que ser una capa al final. Apagaré mi plantilla,
seleccionaré la capa superior, haga clic con el botón derecho, desplácese hacia abajo, debería ver una opción Fusionar hacia abajo en el menú contextual. Haga clic en “Fusionar hacia abajo” y eso se combina por sí mismo. Estas ya no son capas separadas, ya
no son dibujos de primer plano y de fondo, sino que son una capa, y puedes cambiar el nombre de esto a solo Dibujo 1, esto se haría al final cuando hayas terminado todo. Es así como puedes usar múltiples capas para que sea un poco más fácil abordar algunos de los elementos más detallados. Volvamos aquí una vez que termines tu primera capa y podamos llegar a trabajar en nuestros dibujos segundo y tercero.
8. Cómo dibujar la 2a y la 3a capa en Photoshop: De acuerdo, entonces estamos de vuelta aquí. He terminado toda esta capa de dibujo. Esta no es la plantilla, esta es solo mi capa de dibujo. Como se puede ver, la plantilla en realidad está apagada. En la siguiente etapa, necesitamos hacer el mismo diseño dos veces más. El primer paso es bajar de nuevo a tu nuevo símbolo de capa. Haga clic en él. Se va a decir Capa 2, la cambio solo para que sepas dónde estás, a Dibujo 2. Una vez que hayas hecho la nueva capa llamada Dibujo 2, si has usado la plantilla, lo que harás es simplemente apagar la capa Dibujo 1, así que haz clic en el ojo y luego vuelve a encender la plantilla, y estás en el misma etapa exacta que estabas antes. Puedes usar las muestras, puedes ver más o menos lo que estás haciendo aquí, puedes rastrearlo otra vez. Si dibujaste a mano alzada y no usaste una plantilla, tu capa Dibujo 1 ahora se convertirá en tu plantilla, por lo que solo tienes que seleccionar Dibujo 1, y tienes que ir a este ajuste de opacidad justo encima de las capas, y necesitas para bajar eso, y luego se puede ver que está empezando a volverse opaco. Ahora se parece un poco a la plantilla que tenía donde se puede ver a través de ella. Después volverías a tu capa de dibujo, la segunda capa, y volverías al pincel, y solo retomarías donde lo dejaste y empezarías a dibujar de nuevo. Si has usado muchos colores diferentes, y quieres que los colores sean exactamente los mismos, que no tienen que ser,
por cierto, tendrías que seguir refiriéndose nuevo a esto y podrías volver a subirlo a swatch. Si quisieras encontrar el color, utilizarías la muestra y volverías a encontrarlo. Alternativamente, podrías hacer dos, podrías duplicar esto. Si arrastras Dibujo 1 hacia abajo sobre el nuevo símbolo de capa, podrías llamar a esto
Muestres, entonces podrías desactivarlo. Haz que el Dibujo 1 sea la opacidad, y simplemente manténgalo así. Entonces, cada vez que necesitabas tomar una muestra, podías volver a encenderla, y recogerla y luego simplemente apagarla, cual es mucho más fácil que cambiar la opacidad todo el tiempo. Pero entonces solo tendrás que asegurarte de estar de vuelta en la nueva capa de dibujo correcta cada vez. Algo que sí quiero discutir ahora es cómo puedes hacer pequeños ajustes para hacer la animación un poco más dinámica. Por ejemplo, hacer todo un poco más grande o ligeramente más pequeño de lo que era en la primera capa. Esta lección no se trata de cómo hacer que la flor crezca en la pantalla ni nada por el estilo, o las nubes floten. Esta lección se trata de usar el efecto de ebullición, dándole un poco de estilo, pero no estamos haciendo una pieza animada completa, estamos haciendo un bucle. Por ejemplo, en este dibujo, lo que podría hacer es ajustar los tamaños de estas bengalas de gafas de sol. Podría simplemente hacer la línea la mitad del grosor para el siguiente dibujo. ambos lados, podría simplemente cambiar el blanco por lo que es un poco más delgado, lo cual va a quedar realmente bonito porque va a sentir un pequeño reflejo está golpeando la superficie de las gafas de sol. Lo que podría hacer en muchos lugares es simplemente hacer la forma un poco más pequeña y si decido hacerlo en un pétalo, lo
voy a hacer en todos ellos. Voy a tomarlo un poco desde el borde de donde he dibujado el pétalo, y sólo hacerlo una talla más pequeña, un poco, no loco. Simplemente lo haré un poco más pequeño. Vamos a ver un poco de pulso en el diseño de la flor. Voy a seguir adelante y hacer mi segunda y tercera capas de dibujo,
y rápidamente te mostraré lo que quiero decir con eso antes de que empieces la tuya. Acabo de salir y dibujar mi segunda y tercera capas de la misma manera, usando las mismas herramientas que te mostré antes para la primera capa. La única diferencia estaba en algunos de los detalles y los tamaños de las formas, así que si acercamos y echamos un vistazo a las flores, estas fueron las que dibujé primero, realidad
usé un pincel diferente en el primer dibujo al que uso, pero eso realmente no importa. Pequeños detalles como ese solo agregan más carácter e interés a la pieza cuando se está animando. Si nos fijamos en el tamaño de los pétalos, esta era nuestra plantilla original, y el primer dibujo coincide bastante de cerca con las formas. Pero para el segundo dibujo, en realidad
hice las formas un poco más pequeñas, solo un toque. Eso es un par de milímetros más pequeño. Hice las manchas blancas dentro de la nube un poco más pequeñas, y luego para el tercer dibujo hice lo contrario. Las hice un poco más grandes, así que ligeramente sobredimensionadas, que puedas ver desde la plantilla, si miras esta zona, por ejemplo, cuando hago clic en ella, puedes ver que es un poco más grande. Lo mismo con los pétalos. Todos ellos en las flores son un poco más grandes, y el pétalo aquí también. Es sólo un detalle extra que va a ayudar a que se vea un poco más interesante cuando se mueve. Si bajamos y también miramos las gafas de sol, éstas han cambiado bastante de entre los tres dibujos. El primer dibujo está muy cerca de la plantilla original. Para el segundo dibujo, adelgazé las líneas. Acabo de extender el azul un poco más ancho y hacer el blanco un poco más delgado, para que puedas ver eso cuando me muevo entre ellos. Para el tercer dibujo, hice las líneas blancas más gruesas en lugar de más delgadas como puedes ver cuando me muevo. En realidad le hice el azul el color equivocado porque tengo dos tonos de azul aquí arriba en mi muestra. Terminé solo agregando una pequeña línea de acento del azul más oscuro en la parte superior, porque creo que será interesante que veas cuando se mueve, cómo se ve si usas el color equivocado. También creo que usé el color equivocado aquí arriba para uno de estos pétalos, y podemos echarle un vistazo a eso, pero eso está completamente bien. Creo que eso es lo que quería que tomaras de esto. Se pueden cometer errores y sólo va a hacer que se vea más interesante en realidad. Yo hice las cartas de la misma manera. Yo sólo varié ligeramente el tamaño. En el segundo dibujo hay algunos de ellos están un poco infravalorados, y luego el tercer dibujo se vuelven a hacer más grandes. De acuerdo, así que sigamos adelante y veamos cómo se ve cuando todo se mueve a medida que reorganizamos la línea de tiempo para la animación.
9. Reorganización de la línea de tiempo para la animación en Photoshop: Bienvenido, atrás. Espero que te hayas divertido mucho experimentando con tus dibujos y haciendo que las tres versiones del dibujo ligeramente diferentes unas de otras y no muy diferentes. Sigamos adelante y veamos si podemos conseguir que se muevan en la línea de tiempo. Tenemos que subir a este panel Capas y hacer un poco de organización primero. Eliminemos esta plantilla porque ya no necesitamos eso. Podemos hacer clic derecho y presionar eliminar capa o simplemente podemos arrastrarla. Simplemente agarra, presiona hacia abajo, arrastra sobre el basurero y suelta, y eso se ha ido. De lo que nos queda es, Dibujo 1, Dibujo 2, Dibujo 3, y nuestra capa de retrato, que está dentro de este desplegable aquí. Tenemos que encender las tres capas de dibujo. Asegúrate de que todo esté encendido, todos los ojos estén puestos. Después bajamos aquí de nuevo a la línea de tiempo. Ya vamos a volver a esta sección, sólo
voy a extenderla para que puedas ver mejor. Tenemos que tomar esta cabeza de juego y tirar de ella para que se sienta sobre el marco 1. Es posible que tengas que solo comprobar que es el marco 1. Debe encaja en su lugar ahí. Pero si tienes esta vista en bastante ancha, reduce la cantidad de marcos que puedes ver en la parte superior de esta caja. Sólo asegúrate de que definitivamente estás más allá del marco 01 aquí, lo
puedes ver ahí, así 01. Ahora es necesario seleccionar las tres capas de dibujo al mismo tiempo. Hay un par de formas de hacer esto y también depende de tus atajos de teclado, pero voy a usar presionando la primera, manteniendo pulsada la tecla Mayús y luego presionando la última. Alternativamente, puedo presionar en la primera, que es dibujar 1, mantener pulsada la tecla Comando y luego presionar la segunda y la tercera. Todos estos deben resaltarse con este borde gris indicando que los has seleccionado. Una vez que estés seguro de que tienes a los seleccionados así, debes cruzar aquí hasta el botón de tijera justo a la izquierda de donde estabas y presionar esto. Ahora todo está cambiado. No entres en pánico. Tenemos que eliminar estas largas secciones. Cada uno de estos dibujos se han rebanado ahora en dos. Una de las piezas es un marco largo, y la otra es mucho, mucho más larga. Tenemos que eliminar esta pieza larga, que puedes hacer seleccionándola, simplemente presionándola, y luego presionando Retroceso o Eliminar. Entonces hazlo de nuevo con las capas Dibujo 2 y Dibujo 1 o en el orden en el que trabajaste. Una vez que he borrado todas las capas largas, me quedan tres dibujos, y son un marco de longitud cada uno. Ahora solo necesito agarrar esto. Acabo de hacer clic en él y luego voy a mantener pulsado el ratón seleccionándolo. Voy a tirarlo hacia abajo, así que se sienta junto a la primera capa. Yo voy a hacer lo mismo con el marco superior, que es Dibujo 3 y voy a tirar de él,
sólo sosténgalo hacia abajo, y tire de él hacia otro lado, y hacia abajo para sentarme junto a los otros dos dibujos. Ahora si volvemos a subir al menú de capas, esto ha categorizado estos tres dibujos en un grupo de videos. Contamos con nuestro Grupo de Video 2, donde están viviendo todos los dibujos. Si volvemos a la línea de tiempo y echamos un vistazo, nuestra secuencia de retratos indica la longitud de lo que queremos que sea el regalo de principio a fin. Ese es cada marco de nuestro retrato. Necesitamos los dibujos para cubrir el retrato. Por el momento, hay una gran brecha. Entonces hay tres marcos con dibujos, entonces el resto no tiene nada si solo tomamos un desplazamiento rápido. Hay una manera equivocada de hacer esto y una manera correcta. El camino equivocado es seleccionarlos aquí. Esta parece la forma más fácil, más lógica. Aquí los seleccionaría, presionaría copiar, y presionaría pegar. Parecen que se han puesto en su lugar, pero no estarán en la posición correcta. Como puedes ver, se han movido. Simplemente deshacer eso. Eso fue sólo una demostración de lo que no se debe hacer. Lo que tenemos que hacer para que estos se dupliquen y todo en la posición correcta y la proporción correcta es, volver a nuestra pestaña de capas aquí arriba. En realidad necesitamos seleccionar grupo de video, que es la carpeta titular, buena rima, el titular de los marcos. Si lo cierras por ahora, se ve un poco más ordenado, y solo podemos enfocarnos en esto como grupo. Tenemos que hacer clic y sostener lo que ahora se llama Video Group 2, que contiene nuestros tres marcos de dibujo. Tenemos que arrastrarlo hacia abajo sobre el nuevo símbolo de capa que usamos unas cuantas veces antes, y simplemente colocar encima de ese símbolo. Eso ha creado una copia. Necesitamos otro porque mirando rápidamente hacia atrás a la línea de tiempo, puedo decir que tres fotogramas no van a llegar al final de mi brecha aquí. Voy a necesitar más. Voy a tomar la parte superior, lo que ahora es la capa superior, que es la copia de Video Group 2, y voy a hacer lo mismo. Voy a arrastrarlo hacia abajo sobre el nuevo símbolo de capa y soltarlo. Ahora, tengo seis nuevas capas de dibujo, que son un marco cada una. Estas capas están en el lugar equivocado por el momento. Están sentados encima de las capas de dibujo originales, que hace que parezca que no hay nada nuevo. Lo que tenemos que hacer es seleccionar estos tres cuadros, que es el siguiente en línea de la secuencia. Simplemente selecciónalos como ya hablábamos antes. Haga clic en el primero, presione Mayús, haga clic en el segundo, tercero, y en este punto desea hacer clic y mantenerlo presionado, arrástrelos a través y abajo, y soltarlo. Ahora están sentados ordenadamente además de los tres primeros. No quieres estar cambiando el orden. No quieres estar simplemente arrastrando aleatoriamente cada uno de manera individual así. Se desea mantener el orden original 1, 2, 3, 1, 2, 3. Voy a seleccionar este tercer grupo y arrastrarlos a través y abajo y esto simplemente pasa a encajar perfectamente como un múltiplo de tres porque hay nueve fotogramas en mi secuencia de fotos original y hay tres veces tres. Podría haber terminado con una situación en la que tenía unos fotogramas extra cayendo del final de la secuencia por aquí. Estarían sentados en algún lugar aquí. Eso significaría que la secuencia de fotos se había
agotado y no habría nada detrás de las capas de dibujo. Lo que tenemos que hacer es, tenemos que conseguir que todo acabe exactamente en el mismo punto. Si tienes algún rezagado habiéndose duplicado y
tienes digamos dos marcos extra colgando del borde aquí. Solo tienes que seleccionarlos, presionar el retroceso y eliminarlos. Terminarías con algo parecido a esto. Todo termina en el mismo punto exacto. Volvamos atrás y echemos un vistazo. Ya no necesitamos estas capas vacías, las que viven muy temporalmente nuestros marcos duplicados, por lo que necesitamos simplemente eliminarlas, así que volvamos aquí a la ventana de capas y seleccionemos los dos primeros, que ahora están completamente vacíos de todos modos, y simplemente arrástrelos y colóquelos sobre el basurero y soltarlos. Ahora tienes dos grupos. Un grupo tiene todas las fotos dentro él y el grupo superior tiene las capas como marcos individuales. Una vez que estés contento de que tu versión se vea así, vamos a jugar en realidad esto y a ver cómo se ve. Ahora que estoy jugando usando la barra espaciadora, puedo ver que mi posición está bastante apagada con los dibujos. Cuando trabajé en el primer fotograma de la secuencia, éste, parece como si las gafas de sol estuvieran bastante bien colocadas sobre mis ojos. Pero ahora podemos ver desde previsualizarlo que mis ojos se vuelven visibles por encima de las gafas de sol y ese no es realmente el efecto que quiero. He seleccionado el grupo de video superior, que contiene todos mis marcos de dibujo individuales. Si tengo el encabezado de grupo seleccionado, cualquier cosa que le haga afectará a todos los fotogramas al mismo tiempo. Simplemente selecciona eso si es más fácil, como lo he hecho, sólo cierra eso y selecciona. Dice lo único que posiblemente puedes seleccionar de ese grupo. Una vez que estés seguro de que eso está seleccionado, y estás usando esta herramienta, que es la herramienta predeterminada para mover cosas y es tu herramienta neutral. Puedes moverlo manualmente haciendo clic y moviendo el lápiz óptico o el ratón alrededor de esta manera. Simplemente intenta ponerlo en posición o puedes usar el teclado y las flechas arriba-abajo, izquierda-derecha en el teclado. Necesito estar previsualizando un marco, donde los ojos estén más fuera de posición, que probablemente sería éste. Es una imagen bastante aterradora. Voy a usar esto para poder asegurarme de que mis gafas estén sobre estos ojos y ojalá quepan con todo lo demás una vez que estos coincidan. Voy a arrastrar. Voy a arrastrar primero y luego voy a usar las flechas del teclado solo para perfeccionarlo y conseguirlo un poco más preciso. Veamos ahora cómo se ve eso. Creo, es un poco todavía un poco a la izquierda y tal vez un poco alto. Voy a parar de nuevo. Voy a probar un poquito más bajo y un poco más a la derecha. Enfriar. Creo que esa es una buena posición. Realmente no se pueden ver los ojos en ningún momento, que es lo que yo quiero y se puede ver la ceja, lo cual es bonito. Creo que esa es la mejor posición media en relación a todos los fotogramas. Doble, triple cheque, todo se ve así, todos tus marcos están ahí. Cuando juegas, todo parece que está en una buena posición. Una vez que hayas terminado de jugar, pones tu cabeza de juego justo en el frente. Desseleccionas todo aquí dentro. Tan solo asegúrate de que nada ahí esté realmente seleccionado. En el siguiente video, vamos a ver exportar esto como GIF.
10. Exportar nuestra obra de arte como un archivo GIF en bucle desde Photoshop: Este es el momento que todos han estado esperando. Estamos a punto de exportar a este bebé como GIF en looping. Sube a Archivo, Exportar, y luego ve a Guardar para Web, dice legado entre paréntesis. Nunca supe lo que significaba eso. Presione “Guardar para Web”. Puede tardar un poco en cargarse porque este es realidad un archivo realmente grande en su tamaño actual. Aquí vamos. El primero que tenemos que hacer es convertir
esto en un tamaño de archivo GIF más realista. Ahora, esto en realidad es enorme, son 2,300 píxeles por 3,000, lo cual es una locura. Un tamaño GIF normal no es muy grande, podría ser 400, creo que es un tamaño bastante bueno para el ancho, 400. Yo sólo voy a escribir 400 en este cuadro aquí que dice tamaño de imagen en el ancho, que es W, y luego va a cambiar automáticamente el tamaño de la altura para que coincida con la relación. Eso parece más realista. Creo que se siente pequeño mirándolo ahora por la ventana, pero una vez que está fuera creo que va a quedar bien. Pero esto es algo que puedes volver y simplemente rehacerlo y toma dos segundos. Cambia el tamaño de la imagen. Otras cosas a tener en cuenta: asegúrate de que esto diga GIF, quieres que esto sea selectivo es un buen grito. Es decir, esto es otra cosa con la que puedes jugar y probar las cosas, pero selectivo es una buena. Colores: Quiero que esto sea a todo color, así que voy a poner 256, que es el máximo. Será un poco más grande como tamaño de archivo con más colores, pero debido a que todo se trata del color, no
podemos no hacerlo. Siempre voy por patrón aquí. De nuevo, puedes jugar un poco con estos ajustes, pero estos son mis go-to, así que lo tengo en GIF, selectivo, patrón. No necesito transparencia porque no hay transparencia en mi imagen, pero eso podría ser algo a lo que vuelvas en el futuro
si comienzas a experimentar más con GIFs. GIF, selectivo, patrón, tamaño 400 por 532. Opciones de Looping. O sea, quieres que solo se vaya para siempre, ese es el look GIF, así que siempre necesita ser marcado. Puedes previsualizarlo aquí, por lo que puedes presionar play si tienes curiosidad por verlo. Se ve bien. Consulta si todo está funcionando y cómo quieres que se vea. Si quieres una idea del tamaño de archivo, si estás trabajando con algunas limitaciones, de las cuales es bastante común con los GIF porque la gente quiere usarlos en páginas
web y necesitan que sea un tamaño de archivo bastante pequeño, puedes consultar aquí abajo, este es el tamaño que va a ser una vez que lo hayas exportado, Van a ser 749 kilobytes, lo cual no está tan mal, está bien. Presiona “Guardar” y luego ve a tu carpeta. Yo sólo lo voy a guardar como Gemmas-Retrato Final. En cuanto presiones “Final”, puedes garantizar que algo va a salir mal y vas a necesitar cambiarlo, pero estoy probando el destino aquí. Presiona “Guardar”. Ahora que lo hemos guardado, vamos a ir a buscar el GIF en la carpeta y ver cómo se ve. Wow, ya lo puedes ver en solo el modo de vista previa. Si presiono la barra espaciadora, veo un poco más grande. Se ve bien. Enhorabuena, ahí está tu GIF para siempre. Puedes incrustar estos GIF en el cuerpo de correos electrónicos, enviar mensajes de WhatsApp, puedes agregarlos a páginas web y generalmente pasar un rato agradable viéndolo dar vueltas y vueltas. Ahora bien, si te encanta el GIF y la animación, pero realmente lo necesitas para ser un archivo de video como un MP4 o un MOV, que es compatible con plataformas como Instagram, mira el capítulo final sobre cómo adaptar los archivos que te ya han creado para After Effects.
11. Exportar nuestra obra de arte como imágenes separadas desde Photoshop: Antes de pasar a After Effects, solo
necesitamos terminar un par de cosas en Photoshop para permitir que ese proceso sea lo más suave posible. Lo mejor es simplemente desplazarse hacia abajo hasta la parte inferior, y lo primero que hay que hacer es desver, clic en el ojo para apagar la secuencia de retrato. Ya no podemos ver eso. Tenemos esta cuadrícula gris familiar, lo que significa que esta zona es transparente. Si bien se cierne sobre el primer fotograma aquí abajo lo que voy a hacer es ir a Archivo,
Guardar como, ya sabes también usar el atajo para eso. Guardar como. Entonces aquí dentro, lo que me ha llevado directamente a mi carpeta porque he estado trabajando tanto en ella, necesito hacer una carpeta nueva. Voy a presionar “Nueva carpeta” aquí abajo, y voy a llamarla Secuencia de dibujo y presionar “Crear”. Tenemos que nombrar esto, dibujo-01. Baja a la parte inferior, por lo que para seleccionar el formato de archivo, que será PNG, lo que significa que va a mantener la transparencia. Debería llamarse drawing-01.png, y esto debe seleccionarse como PNG, y solo presiona “Guardar”. Hago medio para esto, que es más seguro, así que presiona “OK”. Ahora necesitamos exportar el segundo dibujo, que es el segundo fotograma de nuestra línea de tiempo. Mueve el cabezal de reproducción ahora a donde dice 01F, y vuelve a hacer exactamente lo mismo. Vas a Archivo, Guardar como, y luego entras a tu carpeta de Secuencia de Dibujo donde acabas de guardar la primera, es un poco más rápido si solo haces clic en dibujo-01 y luego cambias el nombre a dos. Pero siempre hay que recordar, si lo haces, cambiar el tipo de archivo aquí abajo también;
así PNG, así que eso es dibujo-02 PNG y luego Guardar. Después vas a donde dice O2F, que es el segundo fotograma a lo largo, que ahora debería estar mostrando tu tercer dibujo. Puedes ir a Archivo, Guardar como, y hacer exactamente lo que acabamos de hacer con los primeros dibujos, así que haces click en “dibujo-02", renombrarlo a tres, cambiarlo a PNG. Muy importante, y luego pulsa “Guardar”. Entonces hemos terminado aquí. Es posible que quieras simplemente volver a encender la capa que apagaste, el retrato, volver a poner esto al principio, pulsa “Guardar”. Siempre puedes volver a esto, editar cualquier cosa, exportar diferentes versiones del GIF, lo que quieras, pero simplemente cerrarlo. Voy a dejar de Photoshop. A continuación, te mostraré cómo importar
tus archivos de secuencia de fotos y ilustraciones a After Effects.
12. Importar nuestros recursos a After Effects y ajustar su configuración: Voy a abrir After Effects. Si no ves esto en segundo plano, entonces necesitas crear un nuevo proyecto. Pero sólo voy a cerrar esta ventana porque ya tengo una ahí. Aquí está el proyecto, aún no se guarda. De hecho, sólo lo guardaré ahora. Entonces voy a ir a “Archivo”, “Guardar como”, y lo voy a guardar en mi carpeta de proyecto y
llamarlo Gemmas versión Portrait-video. “ Guardar”. Normalmente, yo crearía una composición primero. Incluso te ha dado este botón de ordenación, creo que esto está en una versión más reciente. De lo contrario irías a “Composición”, “Nueva composición”. Pero para esto, no vamos a hacer eso, vamos a hacerlo un poco al revés. Lo que tenemos que hacer es simplemente ir a “Archivo”, “Importar Archivo”. Acude a tu carpeta. Necesitas ir a Secuencia Fotográfica. Esto es similar a lo que hicimos en Photoshop. Se da click en el primero, 01. De nuevo, miras aquí abajo, si este menú de Opciones no está abierto, necesitas presionar para revelar. Ahora bien, esto es tan útil
, uso esto todo el tiempo. Es necesario importar secuencia JPEG y asegurarse de que esto esté marcado. No necesito marcar esta vez, pero es súper útil. Digamos si tenías una enorme carpeta de imágenes, como si hubieras hecho una sesión de fotos y tal vez hubieras borrado algunas de ellas así que había algunos vacíos en la numeración. Si no quisieras pasar y nombrar 100 imágenes 01-100, seleccionarías la primera imagen de la carpeta y marcarías el orden alfabético. Se llenaría los vacíos para que no hubiera vacíos. Abierto. Ahora tenemos nuestra secuencia de fotos aquí. En realidad, creo que les mostraré lo que quiero decir acerca de por qué el orden alfabético de la fuerza es realmente bastante útil. Si solo elimino esto, solo lo voy a arrastrar al bin. Voy a volver a importar el archivo otra vez. Voy a seleccionar el primero. Esta vez voy a hacer clic en forzar orden alfabético porque sólo quiero
mostrarles la ligera ventaja de hacer eso. Cuando presionas “Abrir” esta vez, en lugar de este dicho como lo hacía antes, solo decía 1-8. Ahora ha nombrado el nombre de la carpeta en la que estaba contenida, en lugar de simplemente ser una secuencia numerada. Eso es algo realmente bonito. Por eso suelo marcar fuerza orden alfabético aunque mis números estén en orden. Ahí vamos. Eso ahora se llama secuencia de fotos, así que no necesito cambiarle el nombre. Pude haberlo renombrado, pero quería mostrarte de todos modos. Ahora tenemos nuestra secuencia de fotos, y también quiero importar la secuencia de dibujo que acabamos de exportar desde Photoshop. Voy a ir a “Archivo”, “Importar Archivo”. Selecciono “dibujo-01", y luego vuelvo a bajar. Voy a marcar fuerza orden alfabético solo para que pueda tenerlo nombre correctamente cuando entre. También se marca la secuencia PNG. Después presiono “Abrir”. Ahora que tengo ambas secuencias en la ventana del proyecto dentro de After Effects, quiero cambiar algunos de los ajustes fundamentales antes de empezar a trabajar con ellos. Si vas a Secuencia de fotos, y si haces clic con el botón derecho y presionas “Interpretar material de archivo” y vas a “Principal”, haz clic en eso, esto va a abrir una ventana de más configuraciones. Por lo que velocidad de cuadro. After Effects, a diferencia de Photoshop, no nos dio la opción de establecer la velocidad de fotogramas ya que trajimos el metraje. Se le da una velocidad de fotogramas automática de 30, que es demasiado alta. Nuestro video sería demasiado rápido y no tendría el mismo efecto que tuvimos en el GIF. Tenemos que volver a cambiar esto a seis para que coincida con lo que estábamos trabajando antes en Photoshop. Asume esta velocidad de fotogramas, seis fotogramas por segundo, luego vaya hacia abajo, hacia abajo, hacia abajo. Esta es otra de mis configuraciones favoritas en After Effects. Tan simple. Aquí podemos establecer la secuencia a bucle. Ahora, sé que no hicimos bucle en Photoshop la secuencia de fotos. El motivo por el que lo estamos haciendo ahora es porque si exportas un video que quieres subir a Instagram, no te dejará subir un video de menos de tres segundos de duración. Nuestro GIF no fue de tres segundos, probablemente
fue de 1.5 segundos. Yo quiero hacer bucle esto. Voy a darle un bucle tres veces porque creo que eso nos va a conseguir más de tres segundos de marca. Siempre podemos volver y ajustar esto. Ve a Loop y entra tres y pulsa “Ok”. Tenemos que hacer lo mismo con la secuencia de dibujo. Haga clic derecho, “Interpretar material de archivo”, “Principal”. Nuevamente, seis cuadros por segundo. Tenemos que cambiar eso de 30 a seis. No hay forma de hacer múltiples capas y automatizarlas todas, lo cual es una lástima, por lo que hay que pasar de forma individual y cambiar la velocidad de fotogramas en cada uno de ellos. Pero sólo hay dos, así que eso está bien. Cambie la velocidad de fotogramas a seis, baje y bucle. Ahora necesitamos recorrer esto bastantes veces más de lo que hicimos con la secuencia de fotos porque la secuencia de fotos es aproximadamente tres veces más larga, tiene nueve fotogramas de largo. Esto son sólo tres porque sólo hay tres dibujos. Yo sólo voy a poner 10 y siempre podemos recortarlo. Pon 10 en la caja de bucle y pulsa “Ok”. A continuación, te mostraré cómo trabajar con estos archivos en la línea de tiempo del video.
13. Trabajar con las capas en la línea de tiempo del video en After Effects: Lo siguiente que tenemos que hacer es hacer la composición. Entonces ahora que la secuencia de fotos es la velocidad de fotogramas correcta y ojalá una buena longitud para conseguirnos más de tres segundos, sosténgalo abajo y voy a bajar a esto. Ahí hay un símbolo de tipo con unas cuantas formas geométricas, lo que nos va a hacer una nueva composición. Entonces voy a soltarme y ahí está. Está hecha la composición, está coincidiendo con los ajustes de la imagen. Voy a alejarme. Quiero ver los ajustes de composición que se le da esto automáticamente. Necesito ser seleccionado en esta secuencia de fotos y luego subes a “Composición” y vas a “Ajustes de composición” para abrir la ventana. Se le llama “Secuencia de fotos”. Se acaba de tomar el nombre del archivo fuente. El tamaño es grande. Es del mismo tamaño que miramos en Photo-shop, ese es el tamaño de imagen original desde el teléfono. Entonces, probablemente deberíamos hacer esto un poco más pequeño porque Instagram no va a tomar demasiado bien ese tamaño. Tenemos que marcar “Bloquear
relación de aspecto ” para que eso sólo va a mantener todo en proporción. Entonces, sólo entonces necesitamos cambiar el ancho a 1,080, que es un ancho de video bastante estándar, y es un buen ancho de Instagram para empezar. Haz eso y luego la velocidad de cuadro es de seis, eso es lo que queríamos. El tiempo de duración es de cuatro segundos, por lo que todos estamos en claro para el límite de tres segundos. Eso me queda bien. Voy a presionar “Ok”. Ahora que hemos redimensionado el marco, la imagen no se ha redimensionado para que coincida. Entonces, antes de hacer eso, en realidad
voy a arrastrar la “Secuencia de dibujo” y
encima porque ese debería ser del mismo tamaño de la imagen. Podemos redimensionar esos al mismo tiempo. Agarra tu secuencia de dibujo, tira de ella hacia abajo. Hay un pequeño hueco, pero hay que tratar de meterlo en la parte superior de la capa de fotos. Entonces, esta línea azul de aquí, si puedes ver cuando me muevo, indica dónde va a caer y necesito estar exactamente en ese hueco entre la parte superior del menú y la capa. Yo lo suelto y está ahí. Si no lo es, aún puedes arrastrar estas capas por ahí. Se puede tirar hacia arriba. Realmente no podemos ver mucho por el momento. Entonces, solo voy a ir a cambiar el tamaño de estas capas. El atajo para hacer esto es volver a seleccionar ambas capas, mantenga presionada la tecla Mayús y luego seleccione la segunda. Puedo presionar “S”, que significa escala, que va a subir sólo el parámetro de escala de la capa. Si vuelvo a presionar “S”, desaparecerá. El largo camino, que es bueno saberlo también, es que solo tienes que hacer clic en la flecha pequeña aquí, que está justo a la izquierda del nombre de la capa y luego revela un menú “Transformar”, que nuevamente presionas la flecha para desplegable. Estos son todos los ajustes centrales de la capa. Por lo que tienes punto de anclaje,
la posición, la escala que está al 100% en este momento con la rotación que está en cero porque no está girada y la opacidad es de 100. Lo que tenemos que hacer es reducirlo para que se ajuste al nuevo tamaño de ventana que acabamos de cambiar. Puedes simplemente pasar el cursor sobre el número 100, mantenerlo presionado y arrastrar el cursor hacia la izquierda. A la izquierda lo hará más pequeño, a la derecha lo hará más grande porque vamos en este número. Si hago eso, arrastre lentamente, se
puede ver el número bajando y se puede ver el tamaño de la imagen bajando. Yo diría 47, se ve del tamaño correcto. Entonces voy a soltarme. Eso es 47, esa es la capa de fotos. La capa de dibujo sigue siendo de tamaño completo, por lo que es demasiado grande. O bien puedo presionar “S”, lo que me lleva sólo a la báscula y redimensionarla. Puedo teclear 47 porque sé que necesita que coincida con la otra capa. El camino más largo habría sido abrir la capa. La ventana de transformación ya está abierta y luego arrastra esto hacia abajo. Ahí vamos. Son 48, voy a simplemente teclearlo, 47. Acerquemos y veamos qué tenemos. Este es nuestro redimensionamiento, ahora un video, y está bastante compactado en tan solo dos capas aquí, y como arrastramos primero en la secuencia de fotos, la longitud de
la composición ya coincidió con eso. Entonces, son poco más de cuatro segundos, lo cual es bueno. El nivel de secuencia de dibujo, porque la arrastramos en segundo lugar, es más largo que la secuencia de fotos, pero en realidad sólo está saliendo del final. Realmente no necesitamos recortarlo. Simplemente podemos dejarlo tal como está porque está llenando toda la longitud de nuestro clip. Antes de exportar esto, vamos a previsualizarlo para asegurarnos de que todo se vea bien y esté jugando como queremos. Es la barra espaciadora para jugar. Si quieres un poco más de control sobre la configuración de previsualización, hay un menú a la derecha. Está cerrada por el momento, pero si presiono la palabra “Vista previa”, se extenderá. Estos son los ajustes completos de reproducción. Si pulsas el botón “Play”, se va a jugar. Las secuelas se renderizarán. Por lo tanto, la velocidad no siempre será a toda velocidad de
inmediato y también depende de la potencia de su procesador. Es decir, ahora parece que está atrapado que la velocidad está jugando se ve bien. Otras configuraciones que puedes ver aquí, velocidad de
cuadro seis, eso es lo que queremos. El resolución es el tercero, si necesitas por cualquier razón para reproducirlo en una resolución más alta, puedes cambiar eso. No es pantalla completa, no
hay sonido, pero estaría reproduciendo sonido si lo hubiera. Está buceando por el momento. Este es el ajuste para que no sea bucle pero por supuesto cuando lo exportemos, no será bucle solo será un video que termina después cuatro segundos pero para la vista previa puede bucle. Genial, así que creo que se ve bien. Por lo tanto, puedes pulsar “Detener” o pulsar la “Barra espaciadora”. A continuación, vamos a conseguir que esto se exporte como un archivo de video.
14. Exportar nuestra animación como archivo de video desde After Effects: Estamos todos listos para exportar esto como archivo de película. Acabo de descubrir en los últimos 20 segundos, que after-effects ya no soporta la exportación de la compresión de archivos H.264, que es la configuración habitual de compresión web. Desafortunadamente, vamos a tener que sumar una etapa extra a esto. Lo que vamos a hacer es exportar el video como un video QuickTime, que es un formato muy común. Se reproducirá como un video, y será de muy buena calidad, pero va a ser un tamaño de archivo demasiado grande, una calidad
demasiado superior para lo que necesitamos para web para que los programas como Instagram lo usen. Vamos a exportarlo de todos modos, y es bueno tener una copia de la misma en alta resolución. Deberíamos ser seleccionados aquí en nuestra composición. Asegúrate de estar aquí y esta línea azul está alrededor del borde de esta caja. Después ve Composición, Agregar a la cola de renderizado. Ahora necesitamos simplemente ir y dar click en Lossless”. Aquí es donde solías tener la opción para H.264, pero ya no está ahí. Simplemente necesitamos que sea QuickTime, lo cual es bueno. Esta Opción de Formato, click. La animación es muy, muy pesada y no es muy versátil. Se quiere bajar a Apple ProRes 422 LT es bueno porque no es super alta resolución en algún lugar del medio. Da click en ese y pulsa “Ok”. Salida de audio, sólo voy a apagar eso. De todos modos no hay audio, pero es bueno apagarlo. Presiona “Ok”, así que ve a donde dice Salida a No especificado aún, haz clic en eso, y luego entra en tu carpeta principal. Yo haría una carpeta llamada exportaciones. Entonces guardar como retrato animado QuickTime. Bueno, ProRes, lo siento, pon ProRes, que es el tipo de compresión, y pulsa “Guardar”. Estableces el nombre de archivo y el tipo de archivo, y ahora vas a presionar este botón en el lado derecho que dice Render. En la línea azul se indicará el avance de su exportación. Simplemente puedes ver cuadro por cuadro donde está. Alrededor de la mitad de camino de vez en cuando casi al final. Ese es el ruido de tu render, vamos a guardar esto primero, comando guardar, luego iremos a revisar lo que has exportado. Aquí está tu carpeta se está llenando bastante ahora. Exportaciones, este es tu archivo de película el cual puedes previsualizar haciendo clic en la barra espaciadora. Se ve realmente bien. Se detiene después de cuatro segundos porque no es un GIF. Ahora que tenemos esta película de ProRes y necesitamos meterla en un formato H.264 para web, hay varias formas de hacerlo. Mi forma preferida es a través de Adobe Premiere. Premiere tiene otro software en la suite de Adobe. Realmente espero que si estás usando Photoshop y After Effects, tengas acceso a Premiere así como parte de la colección. Es realmente esencial para cualquier trabajo relacionado con el video o la animación. Entonces intenta apoderarte de eso. Te daré una opción sin pero con es mejor. Premiere apenas se abre y voy a seleccionar “Nuevo Proyecto”. Te hace guardar un proyecto antes de que incluso lo inicies, lo cual de alguna manera es algo bueno, pero a veces es un poco molesto para este tipo de cosas porque realmente todo lo que queremos hacer es correr nuestro video directamente a través de él y salir el otro lado y no tener que salvarlo. Pero aquí vamos de todos modos. Tienes que guardarlo primero antes de que te deje entrar. Ir a Navegar. Es decir, puedes ponerlo en la carpeta de exportaciones que acabamos de hacer. En tu carpeta principal de proyecto, exporta, elige y luego solo pon compresión porque para eso la vas a usar. Compresión, Ok. Esto es súper simple ahora, solo
necesitas volver al buscador,
necesitas ir a tus exportaciones, necesitas ir a tus exportaciones, encontrar los ProRes que acabamos de exportar de After Effects. necesario hacer clic, mantenerlo presionado, arrastrarlo hacia abajo, cursor sobre esta ventana del proyecto en Premier, y luego soltarlo. Entonces lo siguiente que hay que hacer es simplemente agarrar este video ProRes que has importado. Simplemente arrástralo directamente a través de esta sección más grande, que es la línea de tiempo, y suéltala. Ahora tu proyecto está en esta línea de tiempo. De verdad no necesitas hacer nada más. Tan solo necesitas ir a Archivo, Exportar, Medios. Ahora, estos ya están establecidos. No quieres hacer clic en esto, solo
quieres que el formato diga H.264, que es el formato mágico. Es necesario que diga Match Source, High bitrate, que es la primera opción. No necesitas tocar nada más. Nombre Just Output, haga clic en eso. Ahora lo está nombrando igual, pero se llamaría MP4 en su lugar. Pero lo que quieres hacer es escribir H.264 solo para que lo sepas, esa siempre es la versión comprimida. Lo deletreé mal otra vez, no puedo creerlo. Está bien, deletreado correctamente ahora. Primero, Guardar y luego presionar “Exportar” hacia abajo en la parte inferior. Eso es todo lo que necesitas hacer en Premier. Ni siquiera realmente necesitas guardar esto. Antes de salir por ahí, vamos a comprobar si está ahí. Vuelve al buscador, Aquí está. Ese es el MP4. El H264 MP4 versión es de cinco megabytes, que es bastante pequeño para un video. El ProRes versión es 10. En realidad solo es la mitad del tamaño, en este caso, puede variar mucho más si se trata de un video
largo, largo y ahorras mucho tamaño de archivo. Pero es el formato que mejor funciona para las redes sociales. Ahí está. H.264, voy a destacar que en verde sólo para decirme, ese es el video héroe, ese es el que puedo publicar. Basta con echar un vistazo. Se ve realmente bien. Realmente complacido con eso. Voy a cerrar mi premier. No, no quiero ahorrar. Podría simplemente borrar eso de todos modos. Esta es tu carpeta de exportaciones. Tienes tu versión de muy alta resolución,
tienes tu versión de menos alta resolución. Esa es la versión a usar. Ahora si tienes Premier como opción, recomiendo encarecidamente que uses eso como tu convertidor para conseguir esos videos en formato MP4. Si no, voy a ir a hacer un poco más de investigación sobre la última,
más confiable, preferentemente opción gratuita para convertir tus archivos de video a MP4. Voy a poner un enlace a lo mejor que encuentre en la descripción del proyecto para que puedas comprobarlo y usarlo. Además, has dado un salto increíble en GIF. Esté atento a algunos pensamientos finales de mi parte.
15. ¡Gracias y hasta pronto!: Enhorabuena por llegar al final de la clase. Al completar tu proyecto de retrato, has aprendido alguna teoría esencial de
la animación, los principios de las velocidades de fotogramas y los bucles de ebullición, así
como algunos conocimientos técnicos en dos potentes piezas de software. Espero que puedas construir sobre lo que has aprendido hoy en tu futuro viaje por el mundo de la animación. Tristemente, ese es el fin y tenemos que despedirnos. Muchas gracias por tomar mi clase. De verdad espero que lo hayas disfrutado y que vuelvas a descubrir de mí técnicas de animación más divertidas en el futuro. Me encantaría ver tus retratos, así que no seas tímido, por favor comparte tus resultados a la página del proyecto de la clase. Si estás subiendo a redes sociales y quieres darme una etiqueta, es @geema .yin. Cualquier duda que tengas, puedes ponerte en contacto conmigo en la página de la comunidad. Por favor sígueme en Skillshare, deja una reseña si tienes tiempo, y por último, pero lo más importante, ten un día encantador.
Gemma Yin, Animation & Video Director
