Flujo de trabajo de proyectos de diseño de movimiento: desde guion a animación final

1. INTRODUCCIÓN: Hola a todos. Soy Tamer. Soy diseñador de movimiento y actor comercial con sede en el Reino Unido. Llevo cinco años trabajando como diseñador de movimiento. Me gradué con una licenciatura en animación informática y artes de la comunicación. Ser actor comercial desde hace seis años, y trabajar con diferentes directores y productores me han enseñado que la planificación, planificación y planeación es clave para un proyecto bien elaborado. Esto me ayudó a adquirir muchas técnicas y perspectivas creativas que puedo aplicar a mi trabajo como diseñador de movimiento. En esta clase, aprenderás a manejar explicar tu proyecto de video. Por corto se utilizan videos explicativos animados para mostrar cómo funciona un producto, servicio o negocio. Empezarás visualizando tu animación usando un guión visual David. Estarás aprendiendo a construir una base sólida para tu trabajo mediante storyboarding tu idea y creando un animado. Realmente creas tableros de diseño para mostrar al cliente cómo será la pieza final. Por último, agregarás la jugada de la animación. Te caminaré paso a paso desde el momento en que consigamos el guión del cliente a la animación final. Te recomiendo encarecidamente que tengas una buena base en animación y diseño y agente vamos a usar Illustrator, Photoshop, y After Effects. Al final de esta clase, tendrás una pieza animada bien elaborada lista para tu portafolio. Empecemos. 2. Proyecto de clase: En esta lección, voy a hablar del proyecto de clase. Para ser contratado para trabajar en proyecto de diseño de movimiento, necesitas un cliente en primer lugar, y eso es lo que creé para ti. Un cliente hipotético llamado HunterGoes. Es una app de entrega que puede entregar cualquier cosa que se te ocurra. El objetivo del cliente es impulsar a las personas a descargar su aplicación. Necesitan un video explicativo 22 para mostrar a la gente su servicio. El video se abultará por toda la web, y el proyecto y los recursos en los que podrás encontrar la pauta de marca del cliente junto con un guión en el que estaremos trabajando. En las próximas lecciones, te estaré mostrando cómo manejo el proceso de producción paso a paso hasta llegar a la animación final. De cómo convertimos el guión en un guión visual, dibujando storyboard, y haciendo animáticas, elaborando barcos de diseño, haciendo una secuencia temática de tablero, y por último, agregando una animación lúdica. También te estaré mostrando cómo usar plataformas para la inspiración, como Pinterest. En la descripción del proyecto, he hecho una hoja de ruta para que puedas seguir y publicar tu trabajo en curso mientras estás viendo las lecciones. Te estaré guiando a través cualquier reto que puedas enfrentar. No tienes que imitar todas las decisiones creativas que tomo. Puedes tener tus propias ideas, diseño y animación. Puedes usar mi obra de arte si no te interesa diseñar la tuya propia, puedes encontrar todos los activos en la sección de recursos. Al final de esta clase, tendrás una base sólida sobre cómo manejar un proyecto de diseño de movimiento desde cero. Puede aplicar este flujo de trabajo a cualquier escala de proyecto de diseño de movimiento. 3. Script visual: En esta lección, estaré dando el primer paso diseccionar el guión y la directriz de marca declinó siempre. De acuerdo, aquí tengo una Guía de la marca Huntergos-. Puedes descargarlo desde el panel de recursos. Abramos el expediente. Aquí tengo la guía de marca, el archivo de ilustración de logotipo, y la voz en off. Abramos el PDF. Vale, aquí tengo el logo principal de la marca. Consta de dos partes, la palabra marca y la marca de marca. No se pueden separar de ninguna manera. Ok. Aquí tengo las variaciones del logotipo. No puedo usar el logo sobre un fondo, diferente a estas tres opciones de color. Aquí tengo la paleta de colores, los colores primarios, y los colores secundarios, y la fuente Arial Redondeado. Aquí tengo este guión. Este script que vamos a estar trabajando en este proyecto, HunterGoes es la plataforma de entrega online más nueva y genial. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites, siempre que necesites, descarga la app ahora y disfruta ordenando. HunterGoes, te tenemos. De acuerdo, después de revisar la directriz de la marca y el guión, nuestro reto aquí es transformar este guión en un storyboard y después de eso, hacer la animación. Pero antes de eso, debemos dar unos pasos para construir una base sólida para nuestro trabajo. Empezaremos haciendo un script visual rápido. guión visual nos ayuda a sacar las ideas de nuestra cabeza y cómo estamos visualizando cada frase en el guión. Vale, aquí tengo una mesa que he hecho en la app de páginas. A la izquierda tengo la voz en off y a la derecha tengo los visuales. Lo que voy a hacer ahora es copiar y pegar el guión bajo la sección de voz en off. Seleccionemos todo el script, comando C y comando V para pegar. Vale, aquí tengo el guión. Haré que el texto sea más pequeño. Vamos a tener cierta distancia entre estas dos oraciones. Nuevamente, lo que voy a hacer ahora es visualizar cada frase en este guión. No tengo que preocuparme por los detalles. Es sólo una forma de sacarme las ideas de la cabeza. Vale, empecemos. HunterGoes es la plataforma de entrega en línea más nueva y más cool. Lo que estoy visualizando aquí es una vista lateral, una escena callejera y un repartidor que pasa, luego un smartphone sube por detrás del vehículo. Digamos una vista lateral de un auto repartidor, pasando por la carretera. Entonces un teléfono inteligente sube por detrás del vehículo. Ok. Podemos recoger y dejar cualquier cosa por ti. Aquí puedo mostrar algunas cajas de entrega cayendo en la parte superior del auto. Digamos que las cajas comienzan a caer en la parte superior del auto con la cámara de cierre cerrada. Desde alimentos, electrónica, comestibles, libros, y muchos más. Vale, aquí puedo tener iconos que representan estos servicios apareciendo alrededor de las cajas. Los iconos aparecen alrededor de las cajas. Lo que necesites, siempre que lo necesites. Aquí puedo animar estas dos líneas de una manera lúdica. Vale, digamos texto animado de una manera lúdica. Descarga la app ahora y disfruta ordenando. Aquí puedo hacer la transición al smartphone, mostrando la app con la descarga, el texto de la aplicación en el lateral. Digamos que un smartphone que muestra la aplicación aparece en el lado izquierdo con el texto, “Descarga la aplicación a la derecha” Ok, HunterGoes. Te tenemos. Desliza la transición al logotipo de la marca con el eslabón debajo de él. Ya hemos terminado. Recuerda que puedes llegar a tus propios efectos visuales. Trata de no hacerlo complicado. Puedes enfocarte en el flujo de trabajo y disfrutar del proceso. Asegúrate de publicar tu trabajo en el panel del proyecto. Nos vemos en la siguiente lección. 4. Inspírate: En esta lección, te voy a mostrar cómo usar Pinterest con fines de diseño. Es una gran plataforma para reunir y organizar la inspiración. Si ya usas Pinterest y estás familiarizado con este tema, siéntete libre de omitir esta lección. Abrimos el sitio web de Pinterest y obtenemos este formulario de inscripción. Apuntémonos para una cuenta. Escribe dirección de correo electrónico, crea una contraseña, y tu edad. Presione “Continuar”. Ahora tenemos unos pasos que debemos dar a continuación. Aquí podemos escoger cinco temas que te interesen. Voy a escoger temas relacionados con el diseño y haga clic en “Listo”. Aquí puedes escanear el código desde tu teléfono para que puedas descargar la app. No lo necesito en este momento. Ahora, Pinterest está construyendo una página para todos los temas que escogí. Ahora digamos que me gusta este diseño y necesito guardarlo. Todo lo que tengo que hacer es repasarlo y hacer click en “Guardar”. Ahora lo tengo en mi perfil. Vamos a revisar. Esta es la imagen que guardé. Todas mis cosas salvadas irán aquí. Para hacer las cosas más organizadas, podemos crear tableros. Puedes hacer click en este signo más y hacer clic en “Tablero”. Nombraré las ilustraciones de la junta. Puedes consultar esta marca aquí si quieres que tu tablero sea secreto. Haga clic en “Crear”. Ahora consigo algunas sugerencias que puedo ahorrar. A mí me gusta este. Hecho. Volvamos a mi perfil. Ahora puedes ver mi tablero de ilustraciones. Veamos cómo podemos guardar más imágenes en este tablero. Presiona este ícono de Pinterest para ir a la página de inicio. Buscaré auto estilizado ilustración. A mí me gusta este. Voy a hacer clic en esta flecha y seguro al tablero de ilustración. Ahora tenemos la imagen guardada a mi tablero de ilustración. Ahora, y si quiero guardar una imagen fuera del ecosistema de Pinterest. Te mostraré cómo si estás usando Chrome, abre una nueva pestaña, ve a apps Web Store, y buscaré Pinterest. Haga clic en el botón Guardar de Pinterest, añadir a Chrome agregar extensión. Haga clic en este icono de extensión y encienda el botón pin. Ahora digamos que me gusta esta imagen en Shutterstock y necesito guardarla en mi tablero de ilustración. El que creé en Pinterest, todo lo que necesito hacer es repasar la imagen y guardar en tablero de ilustración. Si vuelvo aquí, podemos encontrar el auto guardado en mi tablero de ilustración. Básicamente, eso es todo lo que necesitas saber sobre Pinterest. Es una gran herramienta para reunir y organizar la inspiración. Nos vemos en la siguiente lección. 5. Panel de inspiración y tratamiento: Ahora que he reunido mis pensamientos para este spot usando guión visual, en esta lección, voy a reunir algo de inspiración para mi pieza. Los clientes no nos mostraron nada más que el guión, así que ahora es nuestro trabajo visualizar sus pensamientos y los nuestros. Ahí es cuando el moodboard viene muy bien. Al pasar algún tiempo reuniendo referencias e inspiración, podrás ver tus objetivos y, en última instancia, tu diseño final. Aquí están mis alfileres reunidos para el moodboard. Es un diseño basado en ilustración. Me gusta aquí la vista lateral del bus con el fondo mínimo en términos de diseño y valor de color. Mira qué ordenada es la fuente aquí y el bonito contraste en colores. Veamos. Creo que este es un auto reparto estilizado fresco. Así es como estoy visualizando los iconos aquí que van a aparecer alrededor del autobús. Esta es en general mis referencias para esta pieza. Te estaré mostrando ahora cómo voy a crear mi moodboard usando estos pines en Photoshop. Ahora estoy en Photoshop. Como puedes ver aquí creé un montón de cajas para hacerme la vida más fácil cuando empiezo a desconcertar mis referencias. Te mostraré cómo en un poco. Puedes ajustarlo como quieras o crear tu propio diseño de moodboard. He subido esta plantilla de moodboard para ti. Lo puedes encontrar en el panel Recursos. Aquí está la paleta de colores de la marca. Creo que podría usar algunos de ellos en este moodboard. Empezaré a conseguir algunas de estas imágenes de Pinterest. Tengo todas las imágenes, ahora. Voy a empezar a reordenarlos y ver cómo encajarán juntos. Primero, voy a convertir cada imagen en objeto inteligente para que puedas cambiar el tamaño de la imagen tanto como quieras sin causar ninguna degradación o pérdida de calidad. Voy a usar la máscara de recorte para posicionar estas imágenes dentro de las cajas. Esta es la Capa 02. Arrastraré esta imagen y la pondré por encima de la Capa 02. Puedo presionar “Comando” y hacer clic para hacer máscara de recorte o hacer clic derecho, máscara de recorte. Lo que hace la máscara de recorte aquí es que el cuadro define o controla los límites visibles de la imagen. Voy a aplicar el mismo método al resto de las imágenes. Voy a insertar algunos colores de marca al moodboard para que se sienta más relacionado con el tipo de HunterGo. Voy a añadir una capa de forma por encima de todas las imágenes. Yo multiplicaré y haré la opacidad 15 por ciento. Esta es solo una forma de hacer que el tablero se reúna y hace más relacionado con la identidad de la marca. Ahora que terminamos con la elaboración del moodboard, pasemos al siguiente paso y escribimos el tratamiento. El tratamiento es el tipo de documento que proporciona un esquema básico de una idea. Por lo general es corto y permite al cliente o al lector entender de qué va a tratarse el video. Empezaré a escribir el tratamiento ahora. El lugar comienza con un auto repartidor que pasa por la carretera. un teléfono inteligente que muestra la aplicación Apareceun teléfono inteligente que muestra la aplicacióndesde detrás del vehículo. El smartphone baja y la cámara se acerca a la parte superior del auto, y luego las cajas de entrega comienzan a caer en él. Los iconos aparecen alrededor de las cajas en forma semicircular. El auto sale del marco, y luego aparece texto animado, lo que sea que necesites, siempre que lo necesites, una manera lúdica. El texto baja y sale del marco. El smartphone aparece y el texto, descarga la aplicación, entra en el marco desde el lado derecho. Deslice la transición al logotipo de un HunterGo con el eslabón que te tenemos debajo de él. Tengo mi moodboard y escribí mi tratamiento. Ahora podemos pasar a la siguiente lección. 6. Boceto de un storyboard: Ya he terminado con mi concepto. En esta lección me moveré por la escalera donde mostraré a mi cliente lo que estoy pensando visualmente para esta pieza usando animatic. Lo que es animático Animatic es un storyboard animado, o en otras palabras, es una presentación de diapositivas de imágenes que retratan movimientos. Para crear un animático, primero necesitamos hacer un storyboard. Esas imágenes de storyboard luego se cortan juntas para hacer una animación de borrador áspero. Este método le da al creador una idea de cómo se verá la animación final. No necesito que estés aquí para preocuparte por tus habilidades de dibujo. Yo personalmente no soy un dibujante, es sólo una forma de ver cómo fluirá la historia. Tengo aquí mi plantilla de guion gráfico. Puedes descargarlo desde el panel Recursos si te gusta. Puedes escanearlo y utilizarlo para hacer bocetos. Ya he terminado de esbozar el guion gráfico. Lo que necesito hacer ahora es escanear mis papeles del storyboard e importarlos a Photoshop, para que pueda cortar las imágenes por separado. Puedes usar la aplicación CamScanner. Esta app te permite escanear documentos y compartir las imágenes como JPEG o PDF. O puedes usar tu smartphone para capturar tus papeles de storyboard, lo que sea que funcione para ti. Ahora tengo las imágenes escaneadas en Photoshop. Necesito empezar a recortar y separar cada caja en sus propios marcos. Empezaré a recortar la primera imagen. Haga clic con el botón derecho, Rasterizar, para convertirlo en píxeles para que pueda empezar a recortar. Escogeré herramienta poligonal o presionaré L en el teclado. Hacer selección. Comando C para copiar y Shift comando V para pegarlo en la misma ubicación. También puede utilizar la herramienta rectangular o M en el teclado para hacer su selección. Voy a avanzar rápidamente este proceso ya que es un trabajo sencillo. Ya he terminado de recortar cada fotograma del storyboard, ahora necesito encajar cada imagen a la composición. Pero antes de eso, necesito convertir, nuevo las imágenes a Objeto Inteligente para mantener su calidad al agrandarlas. Puedes volver a rastrear tus imágenes escaneadas si crees que no están claras y necesitas algún retoque para lucir más limpio. Yo volvería a rastrear algunas de las imágenes ahora. Asegúrate de rasterizar tus imágenes para poder dibujar sobre ellas. Puede utilizar la herramienta Rotar vista o Agregar en el teclado. Para rotar la vista para que puedas estar más cómodo trazando tus imágenes. Utilizaré la herramienta Pincel o presionaré B en el teclado. Asegúrate de que una vez termines cada imagen para convertirla de nuevo en Objeto Inteligente. No creo que me gusten las nubes aquí, así que las eliminaré de la escena. Una cosa más que hacer, necesito cambiar el texto y hacerlo más legible y ordenado. Voy a usar la herramienta Tipo o presionar T en el teclado para crear un texto. Yo también cambiaré el logotipo. Se trata de algunos retoques que estoy haciendo para que lo animático sea más decente a la hora de enviarlo al cliente. Ya he terminado con los marcos, en la siguiente lección voy a hacer lo animático. 7. Corte Animatic 01: Cuando se trata de edición de video, Adobe Premiere Pro es la mejor herramienta que podemos utilizar. Es un software fácil, especialmente para principiantes así que no te preocupes si no lo has usado antes. En esta lección, te voy a mostrar cómo cortar un animático y ver el V0 proporcionado con los visuales usando este software de edición. Aquí tengo los marcos separados. Ahora necesito exportarlos para poder usarlos para editarlos. Exportación. Elegimos la ubicación y aquí están. Abrimos Adobe Premiere Pro. Haga clic en “Nuevo proyecto”. Nombra el proyecto, va animático. Elige ubicación y pulsa “Ok”. Una vez que abras Premiere Pro, deberías ver este espacio de trabajo de edición. Si no, puedes ir a Windows, Workspace, editando. Aquí está el panel del proyecto donde tendremos todos nuestros activos en los que estaremos trabajando. Haz doble clic para importar mis imágenes. Arrastre y pulse “Importar”. Ahora tengo todas las imágenes en mi panel de proyecto. Voy a crear una nueva carpeta para que pueda tener todos los marcos en una sola carpeta. Ahora voy a seleccionar todos mis fotogramas y arrastrarlos a la línea de tiempo. Ahora tengo todos mis marcos en orden. Voy a revisar la velocidad de fotogramas. Voy a dejarlo en 25 fotogramas por segundo. Al usar la herramienta de selección o V en el teclado, puedo hacer clic y arrastrar los marcos. Al activar la herramienta Snap, luego la línea de tiempo o S en el teclado, puede hacer que dos fotogramas se ajusten. Puede acercar y alejar la línea de tiempo arrastrando esta barra de diapositivas o pulsando la tecla menos o más en el teclado. Puedo arrastrar esto hacia arriba y hacia abajo para agrandar la línea de tiempo del video para poder ver las miniaturas. Aquí tenemos la pista de audio y la pista de video. Los archivos de audio solo pueden ir a la pista de audio y los archivos de video van a las pistas de video. Ahora voy a importar los activos de audio, la voz en off y la pista musical. Haga doble clic en el archivo para poder ver la fuente en el panel anterior. Haga doble clic en los enlaces cerrar toda mi plataforma de entrega. Podemos recoger y dejar cualquier cosa para ti desde comida, electrónica, comestibles, libros, y muchos más, lo que necesites, siempre que necesites. Descarga la app ahora y disfruta ordenando. País Gross, te tenemos. Voy a recortar las zonas que no necesito de la voz en off. Voy a arrastrar este cursor a la línea de tiempo por aquí y haga clic en “Marcar en” o yo teclado y voy por aquí y haga clic en “Marcar” u O en el teclado. Ahora presiono este ícono, Sobrescribir, y tengo la voz en off en la pista de audio. Voy a arrastrar y soltar la música también. Como dije antes, se puede arrastrar y mover los activos utilizando la herramienta de selección. A veces me resulta más eficiente usar la herramienta Edición rodante. Esta herramienta te permite agarrar los puntos de edición entre dos clips para que puedas hacer clic y arrastrar donde quieras. Ahora voy a empezar a sincronizar mi voz en off con las imágenes que tengo. En primer lugar, voy a silenciar la pista musical presionando esta letra M. Creo que tengo algunos problemas en los primeros tres marcos. Yo los voy a barajar. [ inaudible] Es la plataforma de entrega online más nueva y genial. Podemos recoger y dejar cualquier cosa por ti. Desde plataforma de alimentos, podemos recoger. Una cosa que olvidé hacer al principio es seleccionar todos mis fotogramas cuando importé la secuencia y escalarlos al tamaño del marco. Para que pueda seleccionar todos mis fotogramas, hacer clic derecho, escalar al tamaño del marco. Pero creo que tengo algunos problemas con mis marcos. Si se puede ver este trazo negro alrededor de los marcos, creo que esto es de lo recorte en Photoshop. Pero eso no es un problema, puedo arreglarlo luego manualmente. 8. Corte Animatic 02: Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros y muchos más. Lo que necesites siempre que necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. Ahora, que he terminado de sincronizar mis visuales o mis fotogramas con la voz en off, ahora voy a hacer algo de mezcla entre la voz en off y la pista musical que tenemos. En primer lugar, voy a dejar de silenciar la pista musical. Voy a ir al audio y usar este mezclador, creo. Cada capa tiene el volumen específico, digamos, en este mezclador. Digamos que mi voz en off está en A2, por lo que podemos jugar con A2 en el mezclador. Ahora es cosa de prueba y error. Voy a probar y repetir varias veces para obtener el mejor resultado para mi audio. Hunter Goes es la plataforma de entrega en línea más nueva y más fresca. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites, siempre que lo necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. [ MÚSICA] [RUIDO] Creo que debería bajar un poco el volumen para la música. Hunter Goes es la plataforma de entrega en línea más nueva y más fresca. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites siempre que necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. Mi principal objetivo aquí es que quiero que la voz en off sea lo suficientemente clara. Hunter Goes es la plataforma de entrega en línea más nueva y más fresca. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites siempre que necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. [ MÚSICA] Aquí quiero extender un poco este marco. Te tenemos. Hunter Goes es la plataforma de entrega en línea más nueva y más fresca. Podemos recoger y soltar [inaudible]. Aquí puedo seleccionar herramienta de afeitar o C en el teclado para cortar mi pista musical. Ahora lo que voy a hacer es hacer que mi pista musical se desvanezca al final. Voy a hacer esto más grande, presione esta tecla y vaya al volumen Track Frames. Yo creo esta clave y otra al final. Ahora mi pista musical se desvanece mucho más suave. Hunter Goes es la plataforma de entrega en línea más nueva y más fresca. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites siempre que necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. [ RUIDO] Ahora voy a arreglar el escalado de los marcos. Puedo arreglarlo haciendo clic en el marco o en las imágenes que quiero escalarlo para que se ajuste al tamaño de la composición e ir a editar controles de efectos. Puedo jugar con la báscula para que se ajuste a la composición. Voy a aplicar el mismo método al resto de los fotogramas. Ya he terminado con la edición de mi animatic. Ahora, voy a exportar. Vamos a File Export Media. Voy a elegir el formato H264 con alta tasa de bits y elegir la ubicación y haga clic en Exportar. Hunter Goes es la más nueva y más fresca en línea mi plataforma de entrega. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites siempre que necesites. Descarga la app ahora y disfruta ordenando. Hunter Goes, te tenemos. Esta es mi áspera representación de los visuales animados. Se pretende dar una sensación de sincronización y ritmo del video para que el cliente pueda tener una visión clara de hacia dónde va esta pieza antes de empezar a diseñar y animar. 9. Tableros de diseño 01: En esta lección, voy a saltar a Illustrator y empezar a diseñar los marcos que hice en las lecciones anteriores y muestra la dirección con la que quiero ir. Ahora estoy en Illustrator, voy a saltar a la directriz de marcas y sacar algunos activos de ahí. Voy a conseguir la paleta de colores porque la voy a usar cuando estoy diseñando. Voy a conseguir el logo de la marca. Voy a conseguir las pocas variaciones, así que tengo las tres opciones. Copiar y pegar. Esta es una obra de arte que obtuve de Shutterstock. Voy a usar algunos otros diseños dentro de ellos en mis tableros de diseño. Voy a abrir éste, y voy a usar el fondo, este edificio, así que lo voy a usar en mis tableros de diseño. Voy a copiar y pegar, escalarlo y cambiar su color a amarillo quizá. Voy a cambiar la opacidad al 50 por ciento. Creo que el 50 por ciento es bueno. Ahora voy a crear un fondo usando la herramienta rectangular. Vamos a cambiarlo a este color y hacer clic derecho organizar y enviarlo a la espalda. Creo que voy a hacer que los edificios sean mucho más bajos, así que voy a usar la herramienta directa, o podemos presionar A en el teclado y seleccionar todos los vértices de esta obra. Creo que primero debería bloquear el fondo. Voy a hacer clic en el fondo y voy a la selección de bloqueo de objetos. Ahora tengo el fondo bloqueado, ahora puedo usar la herramienta directa y seleccionar todos los vértices para esta obra de arte y lo haré más bajo. Ahora voy a crear este sencillo pavimento mediante el uso de la herramienta rectangular o puedes presionar M en el teclado. Voy a cambiar el color a esto. Ahora voy a cambiar también la opacidad, 80 por ciento. Ahora voy a crear un carril líneas en la carretera mediante el uso también de la herramienta rectangular. Voy a cambiar el color como gris. Voy a cambiar la opacidad a digamos 80 por ciento. Creo que lo voy a dejar un 100 por ciento por la opacidad y lo haré un poco más oscuro. Creo que voy a bajar un poco la opacidad. cincuenta por ciento va bien. Tal vez. Creo que es bueno. Voy a usar la herramienta directa, hacerla un poco más corta. Ahora, voy a duplicar presionando, “Opción” y sosteniendo. Voy a sacar el árbol de la obra que obtuve del Shutterstock. Voy a bloquear todas las capas para poder trabajar en el árbol sin ninguna interrupción o haciendo clic en nada desde el fondo. Pero creo que voy a eliminar esto, no lo necesito. Creo que esto es mucho mejor porque necesito que el árbol luzca plano como toda mi obra de arte, así que cambiaré el color a verde. Voy a cambiar el color del tronco, tal vez usando el color naranja y hacerlo más marrón. Ahora voy a agrupar todo el árbol seleccionando tanto el tronco como la parte anterior y pulse, “Control G.” Ahora voy a duplicar también el árbol y hacer algunas variaciones en la escala. Voy a desbloquear todos los objetos esta mesa de trabajo y voy a duplicar toda la mesa de trabajo usando la herramienta de tablero de arte o pulsando “Shift O” en el teclado. Presiono “Opción” y sostengo y arrastra la mesa de trabajo. Ahora, estoy creando unas nuevas mesas para el resto de las escenas. 10. Tableros de diseño 02: Ahora voy a cerrar todas las selecciones y voy a sumar el auto ahora. Voy a abrir, no este auto. Voy a abrir otra obra de Shutterstock. Abre éste. Voy a desagrupar toda la obra pulsando , “Command Control G”. Voy a seleccionar todo el auto, copiar y pegar. Lo posicionaría dentro de mi escena. Voy a eliminar el diseño. No lo necesito. Voy a eliminar esta cosa detrás de las ruedas también. Voy a cambiar el color del cuerpo. Ahora voy a crear un portaequipajes en la parte superior del auto usando la herramienta rectangular. Ahora voy a marcarlo agregando el logo en él. Ahora, voy a saltar al 13 agregando el smartphone por encima del vehículo. Voy a seleccionar los objetos y bloquear la selección, o pulsando “Comando D” en el teclado. Ahora voy a abrir la obra de arte telefónica que obtuve de Shutterstock y ajustarla para que se ajuste a mi, digamos dirección de diseño. Ahora voy a aplicar algunos cambios a los colores y formas. Siempre estoy usando la paleta de colores para colorear mi obra de arte. Ahora voy a agregar texto usando la Herramienta Texto, mantenga pulsado el botón. Alinearlo. Voy a usar la fuente de los clientes, Arial a tierra. Voy a alinearlo de nuevo. Creo que quiero cambiar el color del texto a un poco más claro. Sí. Déjame probar este. Creo que ya terminé con el teléfono. Una cosa aquí, quiero cambiarlo es el fondo o el color del cielo y el camino. Creo que se ven igual. Quiero hacer que el color de la carretera sea diferente al color del cielo. Tengo el camino separado del cielo. Que sea más tenue. Ahora hay una diferencia entre la carretera y el color del cielo. Creo que esto está bien. Voy a aplicar lo mismo para el resto de los tableros de arte. 11. Tableros de diseño 03: Antes de continuar, voy a volver a colocar la baca de techo. Simplemente muévelo un poco más abajo y hacia la izquierda. Ahora, moviéndome a la 4ta escena, duplicaré el auto. En esta escena, solo necesito la parte superior del auto, lo que lo recortaré creando un rectángulo por encima del vehículo. Selecciónalos ambos. Entonces ve a objeto, máscara de recorte. Máscara. Duplicemos este sólido fondo. Duplicemos esta mesa de trabajo. Ahora voy a crear las cajas de entrega usando formas básicas. Copiar para crear otro tiro. Ahora vamos a crear los iconos. Aplica colores usando el cuentagotas o presiona I en el teclado para seleccionar colores de la paleta de arriba. Yo los agruparé. Control G. Ahora voy a conseguir las acciones de íconos que obtuve de Shutterstock. Cambias los colores a blanco. Genial. Ahora voy a duplicar para tener los cuatro tiros consecutivos. Agregar texto utilizando la herramienta de texto. Cambia la fuente a Arial-Rodeado. Voy a duplicar la fuente para poder usarla en este marco. Añadir texto. Ahora el final. Voy a conseguir el logotipo. Céntrela. Añadir el eslabón. Ya he terminado. Ahora es el momento de exportar mis tableros de diseño. Iré a Archivo, Exportar, Exportar As, elegir la ubicación. Asegúrate de que el formato sea PNG. Consulta las mesas de trabajo y revisa todo. Ahora haga clic en “Exportar”. Todos los ajustes están bien. Presione “Ok”. Aquí tengo mis tableros de diseño. Así que he terminado con diseñar toda la secuencia para esta pieza. En la siguiente lección, voy a hacer lo biodinámico. 12. Boardimatic: Boardimatic no es mostrar al cliente los marcos de diseño final, el cronometraje, y el ritmo del video, sino que además nos ahorra un montón de trabajo si el cliente pasa a tener alguna edición en el diseño. Una vez que miramos la fase de diseño, entonces podremos saltar a hacer la animación. Ve a Archivo, Guardar como, y lo nombraré tablero HunterGoes en lugar de animatic. Haga clic en “Guardar”. Ahora voy a importar mis tableros de diseño. Arrastre a la secuencia y seleccione todos los fotogramas y derecha “Escala al tamaño del marco”. Al usar la herramienta de edición rodante, empezaré a alinear mis tableros de diseño con la voz en off. Como se puede ver aquí, estoy usando estos tableros de bocetos a continuación como referencia. [ MÚSICA] HunterGoes es la plataforma de entrega online más nueva y genial. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites, siempre que lo necesites. Descarga la app ahora y disfruta ordenando. HunterGoes, te tenemos. [ MÚSICA] Ahora necesito exportar archivo. Exportación, Medios. Elige la ubicación y guarda. [ MÚSICA] HunterGoes es la plataforma de entrega online más nueva y genial. Podemos recoger y dejar cualquier cosa para usted desde comida, electrónica, comestibles, libros, y muchos más. Lo que necesites, siempre que lo necesites. Descarga la app ahora y disfruta ordenando. HunterGoes, te tenemos. [ MÚSICA] Terminé con el boardimatic y listo para pasar a la siguiente lección. Asegúrate de seguir la hoja de ruta que he puesto en la descripción del proyecto y publica tu trabajo en curso para que puedas obtener retroalimentación e inspirar a otros estudiantes. 13. Organizar: Estoy a unos pasos de abrir After Effects y empezar a animar. Pero antes de hacer eso, tengo que hacer alguna estructuración de carpetas para organizar todas las cosas que he hecho hasta ahora. Es un buen hábito organizar cada proyecto en el que estás trabajando para que tengas todos tus activos nombrados y archivados en un lugar específico para que no te pierdas nada que puedas usar más tarde o sobre todo si entregar el proyecto a otro animador o editor de video. Normalmente utilizaré ambas herramientas de gusto para organizar mis proyectos. Es una herramienta gratuita de gestión de proyectos que te permite configurar plantillas de carpeta para tu proyecto. Vamos a comprobarlo. Aquí tengo ambos herramienta de manejo del gusto. Empezaré a nombrar mi plantilla de proyecto. Proyecto número 1. Cliente HunterGoes, nombre del proyecto, video explicador. Ponga la fecha y el nombre del creador. Ahora puedo ir a plantillas para crear mi propia plantilla. Voy a elegir plantilla de gráficos en movimiento. Voy a eliminar todos estos y lo voy a crear desde cero. Voy a hacer una nueva carpeta, le pondré el nombre de activos. Voy a crear una nueva subcarpeta dentro de los activos y nombrarla, Animatic. Una nueva subcarpeta. Más temático y uno nuevo audio y otro para imágenes de stock. Permítanme crear una nueva subcarpeta dentro de Animatic y llamarlo Metraje. Otro, PSD. Otro Frames. Ahora dentro del audio, voy a crear VoiceOver y Música. Ahora, dentro del tablero, voy a crear una subcarpeta llamada archivo de ilustración o IA. Subcarpeta de marco de diseño. Ahora voy a crear una nueva carpeta llamada la Marca. Dentro de Marca, nombre esta directriz y subcarpeta script. Una nueva carpeta se llama Concepto. Dentro de Concepto, tengo Moodboard&treatment. Otra subcarpeta para script visual. Para los cuatro expedientes del proyecto. Dentro de ella, voy a poner los archivos de After Effects y subcarpeta para los archivos de estreno. Ahora tengo todas las carpetas que necesito. Ahora puedo crear un proyecto. Elige una ubicación para guardarlo. Aquí vamos. Eso es todo básicamente para la estructuración y organización de carpetas . Nos vemos en la siguiente lección. 14. Prepara tu material gráfico: Tengo mis activos organizados, ahora saltaré a Illustrator y procuraré la obra de arte que voy a usar dentro de After Effects. Ahora lo que voy a hacer es poner toda la obra que voy a usar dentro de After Effects en una mesa poder importarlas a After Effects. En Artboard 3, tengo el auto, el teléfono, y los activos de fondo. Voy a importar esa mesa de trabajo. En Artboard 11, tengo las cajas y los cuatro iconos. Yo también voy a importar esa mesa de trabajo. No tengo que preocuparme por el texto ya que puedo crearlo dentro de After Effects. Voy a Archivo, Guardar Como nuestro límite 03 ya que es Artboard 3, vamos a revisar. Guarda cada archivo separado de mesa de trabajo y elige Rango 3. Ahora voy a Save As, nombra este 11, así que es Artboard 11. Guarde cada mesa de trabajo en un archivo separado y Rango 11. Ahora tengo las dos mesas de trabajo. Empezaré creando una nueva capa y tendré el smartphone en capa separada. Nueva capa para el auto. Greg y soltar. Ahora quiero ampliar la mesa de trabajo de la calle para poder tener suficiente espacio para mover el fondo mientras lo anima dentro de After Effects. Si te está confundiendo ahora, sabrás a qué me refiero cuando entremos After Effects. Voy a reorganizar los elementos en consecuencia. Voy a nombrar esta calle capa. Ahora vamos a abrir la segunda mesa de trabajo. Empezaré a poner cada elemento por separado. Eliminar el auto No lo necesito en esta mesa de trabajo. Genial. Ahora tengo todos mis elementos en capas separadas. Voy a cambiar el nombre de las IA. Si has usado tu propio guion gráfico, puedes usar el mismo proceso que yo. En la siguiente lección, voy a importar la obra de arte a After Effects y empezar a animar. 15. Animar primera escena: Por último, hemos llegado a la fase en la que saltaremos a After Effects y comenzaremos a enmarcar y animar. Empecemos. Estoy en After Effects, finalmente. Justo antes de proceder, como puedes ver ahora me cambié a Windows ya que tuve algunos problemas con mi Mac mientras grababa la clase. Empezaré importando mi obra de arte. Asegúrese de que el tipo de importación sea composición y que la dimensión del material sea el tamaño de capa no el tamaño del documento. Voy a importar también la paleta de colores y el amplio metraje temático para referencia. Ahora voy a hacer alguna organización, hacer AI nueva carpeta para poner todas las AIs que tengo dentro de ella. Otro para comps y otro para los footages. Ahora voy a la composición, nuevas dimensiones de comp 1920 1080 y velocidad de fotogramas 30. Voy a nombrar a la comp main. Arrastraré y soltaré la junta temática a la línea de tiempo y recortaré comp al área de trabajo. Ahora, vamos a arrastrar y soltar estos antecedentes callejeros. Apague la capa temática fronteriza. Ahora pulsando sobre fondo de calle y presionando P, conseguí la posición. Al arrastrar la posición X, puedo mover la calle izquierda y derecha. Ahora conseguiré la IA del automóvil y aseguraré de encender la transformación del colapso. En resumen, la transformación de colapso conserva la calidad de la obra de arte de IA una escalándola hacia arriba. Empezaré agregando un movimiento sutil al auto, como un poco rebotando como si realmente se estuviera moviendo por la carretera. Precomp la capa del auto y lo nombraré auto. Vamos a expandir un poco la dimensión. Ahora voy a dividir el auto en dos partes, la parte superior de la carrocería y la parte de las ruedas enmascarándolo usando la herramienta pluma. Yo lo nombraré cuerpo. Duplicar la capa e invertir la máscara y lo nombraré ruedas. Ahora vamos a añadir un poco de rebote a la parte superior del cuerpo. Crea una llave, mueve la línea y arrastra el cuerpo un poco hacia abajo. Mantén la tecla inicial y arrastra la línea de tiempo y pega y offline para facilitar la facilidad. Hagámoslo un poco rápido. Al seleccionar todas las teclas, vamos a Option y sostenga y arrastre las teclas más cerca juntas. Ahora voy a recorrer este movimiento. Pasar el reloj aquí, mantenga presionado la tecla Opción y haga clic y voy a escribir esta simple expresión loop out. Ahora vamos a conseguir que el fondo se mueva. Hacer una llave al principio. Mueve la línea de tiempo y arrastra la capa hacia la izquierda. Ahora sacaré el auto del marco, haré una llave y lo moveré a la derecha. Arrastra el auto fuera del marco y la nueva clave se ha creado automáticamente. Haré que la fácil-out sea más suave yendo al editor de gráficos y usar el gráfico de velocidad. Vamos a encender el tablero temático para ver cuándo aparecerá el teléfono. Aquí agregaré una marca. Arrastraré y soltaré el teléfono dentro de la comp del auto. Vamos a ampliar un poco la altura de la dimensión. Crea una clave de posición y muévala a la derecha. Arrastra el teléfono hacia abajo detrás del auto y fácil facilidad. Haré que la facilidad fuera más suave. Ahora voy a ocultar el teléfono usando máscara. Vamos a crear una capa de forma. Nombrarlo máscara y aplicar Alpha invertida mate a la capa predeterminada. Tengo un tema aquí. Es del enmascaramiento, creo. Vamos a revisar nuestra próxima transición. Agregaré aquí otro marcador. El teléfono baja aquí, crea una llave y arrastra la línea de tiempo y mueve el teléfono hacia abajo. Ahora, voy a hacer lo fácil en más suave. La animación vial no debería parar aquí, así que voy a extenderla un poco. Haré que caiga antes. 16. Animar cajas caer: Ahora voy a hacer lo del zoom-in en la parte superior del auto. Vamos a Capa, Nuevo, Objeto Null y haré el padre nulo a estas dos capas, el auto y la carretera, mediante el uso del ancho de pick parent. Hagamos dos llaves, una en la escala y la otra en posición. Mueva la línea de tiempo hacia la derecha y escalarla hacia arriba y ajustar la posición del automóvil al centro. Hagámoslo más lento. Ahora voy a deshacerme de los edificios, voy a ir a la posición, haga clic derecho en “Separar Dimensiones”, así que tengo más control sobre la posición X e Y. De acuerdo, voy a hacer y llave de posición aquí. Mueve la línea de tiempo y arrastra hacia abajo los edificios y hazlo alineado con las teclas anteriores. Ahora puedo dividir la capa, ya no la necesito y voy a hacer una nueva capa sólida y elegiré el mismo color de esta capa usando la gota de ojos. [ RUIDO] Podría haber hecho los edificios en capa separada en Illustrator, pero eso está bien por ahora. Veamos el siguiente movimiento. Agregaré un marcador. Vamos dentro de la comp de autos, y voy a importar las cajas. Vamos a reposicionarlos. Creo que el tamaño es bueno ahora. Ahora necesito cambiar el punto de anclaje y ponerlo en la parte inferior para cada caja ya que necesito aplicar el movimiento de squash y estirar. Ahora selecciono las tres capas y las ato a la capa del cuerpo para que las cajas puedan seguir el movimiento de rebote del auto. Vamos a crear una posición clave, moverlas hacia la derecha y arrastrar el cuadro hacia arriba. Apliquemos ahora algún efecto de calabaza y estiramiento. Ahora copia y pega las teclas de escala al resto de las capas, puedes presionar “U” para revelar todas las teclas que tienes en la capa. [ RUIDO] Tengo una brecha rara entre estas dos cajas, vamos a arreglarlo. 17. Animación de íconos: Veamos cuándo comenzarán a aparecer los iconos. Agregaré aquí un nuevo marcador. Voy a conseguir ahora las monedas del panel del proyecto. Vamos a reposicionarlos. Selecciónalos todos y haz clic con el botón derecho pre-comp y lo nombraré iconos. Selecciona todas las capas y presiona “S”. Crea una llave y muévalas a la derecha y ahora alejamos el zoom. Ahora, vamos a mover la línea de tiempo hacia la derecha y hacer otra clave. Ahora selecciono estas claves y las escalo para hacer rebasamiento. Overshoot es ir más allá de la escala. Está destinado a pasar y luego se tira hacia atrás. Selecciona todas las capas y ys, ys. Ahora vamos a crear una animación secundaria para los iconos. Ve a la herramienta Pluma y hazla trazo y arrastra su punto de anclaje hasta la parte inferior. Ahora voy al punto de anclaje bajo Transformar y arrastrar la posición y hacia arriba. Ahora agreguemos un trazado de recorte. Animar la línea usando las teclas final e inicio. Ahora duplica la capa y cambia la rotación a 90 y duplica con rotación 180, otra con rotación 270. Genial. Vamos a seleccionar todas las capas y hacer pre-comp y nombrarlo efecto. Ahora voy a posicionar el efecto en el centro de cada icono y cambiar su color según el color del icono. Ve a Efecto y elige “Relleno”. Usa cuentagotas para seleccionar el color del icono. Voy a aplicar esta misma cosa al resto de los iconos. Ahora voy a hacer que los iconos aparezcan consecutivamente. Vamos a revisar el bodymatic para referencia y añadir algunos marcadores. 18. Animación de texto: Ahora, pasando a la siguiente escena, veamos. Aquí debe aparecer el texto. Ahora, saquemos los iconos y la parte superior del auto fuera del marco. Haré que los iconos comp un niño a lo nulo. Haz una composición y arrastra el nulo hacia la izquierda. Haré que sea más fácil luego más suave. Ahora voy a crear un texto usando la herramienta Tipo, lo que necesites. Me aseguraré de que la fuente sea Arial Rodeado. Duplicar, “Siempre que lo necesites”. Vamos a conseguir la paleta de colores y cambiar el color de la segunda. Ahora precomp el primer tipo. Ahora tengo dos enfoques que puedo tomar para animar estas tres palabras. Puedo usar el texto descomponer, es un plugin de pago que obtuve de AE Script y es súper eficiente. Puede descomponer el texto por palabras de carácter o líneas con un solo clic. Al seleccionar mi capa de tipo, puedo elegir caracteres y hacer clic en “Descomponer”. Ahora las tres palabras se descomponen en caracteres separados. Ahora, tengo control sobre cada carta. Te mostraré el otro enfoque cuando trabajes con el siguiente color. Es un poco de forma alternativa que consume mucho tiempo si no adquieres el plugin de texto descompuesto. Ok. Vamos a seleccionar todas las letras y crear una posición clave y moverlas hacia la derecha, arrastre un poco la posición Y. Voy a crear claves entre los dos para el rebasamiento. Vamos a seleccionar todo y fácil es. Muy bien, genial. Ahora vamos a ser pre-comp el siguiente tipo y ahora voy a descomponerlo manualmente. En primer lugar, cuento cuántas letras tengo en esta frase. Tengo 15. Duplicaré la capa 15 veces. Tomo cada letra de cada capa, así que eventualmente tengo cada letra encendida por separado. Es un poco agitado, pero es el camino si no tienes el plugin de texto descompuesto. Muy bien. Vamos a deshacer y usar el plugin que tengo e imitar los pasos que hice para la diapositiva anterior. Muy bien, genial. Seleccionemos tanto los precomps de texto separemos sus dimensiones de posición. Voy a hacer una tecla de posición Y, mover la línea de tiempo hacia la derecha y hacer una anticipación antes de caer. 19. Transición después del texto: Tomemos el teléfono ahora, y apliquemos una animación de escalado, está fuera usando el gráfico de velocidad. Ahora voy a añadir el texto, “descarga la app”. Aplicar animación de posición en él, y algunos alivian un tercio. 20. Logotipo y eslogan: Entrémonos en la escena final. Crea una nueva capa sólida, cuentagotas para elegir el color que quiero de la paleta. Pre comp la capa, y voy a conseguir el logo y dejarlo caer sobre la capa sólida. Ajustar la escala. Ahora voy a la comp principal y hago una llave de posición y la muevo a la derecha. Luego arrastra la capa fuera del marco. Vamos a añadir el eslabón que te tenemos. Muy bien, genial. 21. Agrega algunas especias: Ya terminé con mi animación. Ahora quiero añadir algunos caminos extra o pulir que puedan unir toda la pieza. Empezaré agregando una viñeta. viñeta es una forma sencilla de darle a la pieza una sensación de profundidad y enfocar la atención del espectador. Voy a crear una nueva capa de ajuste. Nombre viñeta. Vaya a Efectos y ajustes preestablecidos y busque Exposición. Ahora puedo jugar con el nivel de intensidad de exposición. Ahora agrego máscara. Consulta invertida, e incrementa el número de pluma de máscara hasta que tengamos un borde liso. Ahora voy a añadir algo de ruido y grano. Agreguemos efecto de ruido a la capa de ajuste y hagamos que la cantidad de ruido sea tal vez como cinco. El efecto de ruido es una forma de hacer que el render se vea menos perfecto y digital. Un poco de grano puede agregar un buen toque a toda la pieza. Ahora tengo toda la pieza totalmente animada. Voy a exportar e importar el video a Premier Pro para poder agregar la música y la voz en off. Ahora estoy en Premier Pro, ya importó la secuencia de animación. Puedo tener la voz en off y la sincronización de música a mi animación. 22. Es un cierre: Bueno, y eso es todo para esta clase. Asegúrate de terminar tu proyecto y publicarlo en la galería del proyecto. Estaré disponible para cualquier comentario que pueda tener. Espero que esta clase fuera valiosa, y de ella hayas aprendido cosas nuevas. Quiero decir muchas gracias por tomarse el tiempo para caminar este viaje. Puedes seguirme en Skillshare para obtener actualizaciones para mis futuras clases. Buena suerte.