► Cómo CREAR y ANIMAR un PERSONAJE divertido 🤪 Tutorial PASO a PASO de Illustrator y After Effects

qué pasó muchachos en este tutorial les voy a enseñar paso a paso cómo hago yo para crear y animar de forma simple un personaje o changuito como decimos en canarias venga abajo adentro bueno a ver muchachos para animar un personaje lo primero que necesitamos que un personaje no comió pues entonces tenemos varias opciones una sería que un amigo diseñador e ilustrador nos de un personaje ya hecho y nosotros lo animamos otra opción sería descargarlo gratis de una página de estas tipo free peak y la última en la que les voy a enseñar yo será crearlo nosotros mismos con un par de huevos para no tener que depender de nadie cada vez que queramos animar algo sé que muchos dirán cha cha cha cha cha chá cómo voy a crear un personaje si no sé ni dibujar no se preocupen porque yo tampoco tengo ni idea de dibujar pero aún así he conseguido hacer mis propios más changuitos no son la gran cosa los pobres pero eso sí son muy fáciles de hacer y son perfectos para animar al principio seguramente no saldrán más de forma es que el de los goonies [Música] y ahora les cogeremos cariño igualmente porque serán nuestras creaciones con el tiempo iremos mejorando los y dándoles nuestro toque personal yo les aconsejo echarle una hoja a este libro que me pille hace poco que se llama create instaléis & carácter ya que con sólo leer estas páginas de aquí entenderemos mucho mejor cómo empezar a crear nuestros personajes esto de empezar a ilustrar uno mismo sus cositas para animar se lo pueden tomar como un chacho reto que yo les pongo si no sabemos qué personaje inventar podemos hacer una versión de algunos famosos que ya exista y que nos guste como por ejemplo de algún videojuego como hice yo con esto del league of legends que tenía un vicio que madre mía también podemos hacerlo de alguna película como estos que hizo de key motion de batman y superman [Música] otra idea buena sería hacerlo de alguna serie como hizo eran mendel con las de juego de tronos el tío un par de días después de que se publicara un episodio subía una animación sobre una escena clave que había sucedido en ese capítulo y los tenía todo enganchado esperando a la animación de la siguiente semana un genio otra idea la podemos de la realidad misma como hecho james curran con esta serie de clips o animados por diferentes lugares del mundo el tío se inspiraban fotos que había sacado en sus viajes como en este de japón y creaba un look gracioso con él mismo como personaje un crack la idea aquí como ven son infinitas si aún no tenemos claro el diseño de nuestro personaje lo primero que podemos hacer es buscar algunas referencias por google o pinter es para ir cogiendo ideas de aquí y de allá hasta dar con una combinación que nos guste ahora podemos empezar a dibujar la mano alzada en un papel ya que es más fácil crear varios bocetos rápidamente y dar con uno que nos guste que intentar ilustrarlo directamente en el ordenador como si fuera la versión final y darnos cuenta de que lo tenemos que rehacer porque hay algo que no queda bien también para hacernos una idea mejor podemos dibujar una pose extra para ver cómo quedaría realizando la acción bueno cuando lo tengamos ya hemos estado más o menos le sacamos una fotito y nos lo pasamos al ordenador si tienen una tableta gráfica lo pueden hacer en el photoshop directamente ahora metemos las referencias en el programa y es cuando nos ponemos a ilustrarlo de forma vectorial yo lo suelo hacer en el illustrator porque me gustan un par de herramientas que tienen pero si quieren lo pueden hacer directamente en el after effects también si ustedes son más de photoshop lo pueden ilustrar ahí pero si luego quieren que sea vectorial o modificar los trazados alguna capa como veremos luego tendrán que redibujando en el after effects cualquier opción es totalmente válida así que la que ustedes prefieran si se fijan el 90% del tiempo estoy usando la herramienta de esta para crear formas geométricas básicamente uso el rectángulo y la elipse ya que mi cerebro no da para más como pueden ver combinando este tipo de formas y usando la herramienta del busca tras o para fusionarlas o dividirlas entre sí podemos conseguir casi cualquier cosa también con esta herramienta de aquí la de creador de formas podemos sumar o restar formas que estén intersección ando o como se diga si hacemos clic y mantenemos pulsado mientras arrastramos unimos las formas y si hacemos lo mismo pero mantenemos la tecla alt pulsada las restamos así conseguimos casi cualquier forma que nos haga falta si hay alguna forma que no sabemos muy bien cómo hacerla o simplemente le queremos dar un toque más orgánico o irregular como en el caso del pelo o los delitos por ejemplo pues lo hacemos directamente con la pluma y así nos quitamos del lío seguramente necesitemos ocultar alguna capa dentro de otras por ejemplo como pasaría con la lengua o los dientes entonces lo que hacemos es duplicar las capas donde queremos que se vean en este caso la boca la ponemos por encima del resto pulsando la tecla comando + 0 y ahora seleccionando todo le damos al botón derecho y clicamos en crear máscara de recorte esto al principio es un poco de lío pero luego le cogen el truco fácilmente no se me preocupe combinando este par de técnicas tan fáciles podemos conseguir ilustraciones bastante simples pero que al final se entiende muy bien y son perfectas para animar qué es lo importante hay que se me olvida um chacho consejito que les doy es que ilustran al personaje en escala de grises sin pensar en el color todavía así se concentra más en el dibujo en sí y cuando lo tengan listo lo duplican un par de veces y prueban con varias combinaciones de colores si quieren saber cómo elegir colores que queden bien pueden hacer clic aquí arriba a la derecha que se los explico rápidamente [Música] usando este método es como me dice yo todos estos personajes del higo plate [Música] en verdad mi plan era hacerme los todos pero claro eran como ciento y pico y cada dos por tres se acabar uno nuevo entre eso sí que soy un procrastinador profesional pues me hice solo unos pocos también me sirvió para ilustrar estos manguitos del vídeo que me hice hace poco sobre los principios de animación que si no solo han visto el espejo por aquí arriba el enlace para que vayan a verlo ya que son clave para darle vida a nuestro personaje [Música] una vez tenemos ya nuestro personaje como nos gusta es hora de prepararlo para pasarlo al after effects siempre me gusta mantener una copia de todo el proceso que seguido hasta llegar al resultado final así que nos podemos crear un nuevo documento y meter ahí una copia de la ilustración final aquí si quieren les doy otro chacho consejito y es que deben un tamaño más grande del que usaremos para exportar ya que no cuesta nada y nos vendrá bien para trabajar con más precisión en el after efe aquí lo que tenemos que hacer que es adelantarnos un poco y pensar en cómo vamos a animarlo para saber qué capas necesitamos tener separadas y cuáles no en este caso vamos a hacer que nuestro match anguita con baile tonto haciendo una especie de edward kim por lo que vamos a ver prácticamente todas las partes del cuerpo así que directamente seleccionamos todas las capas y las des agrupamos pulsando shift más comando más que esto lo hacemos varias veces si hiciera falta alguno aseguró que está pensando pues espérate espérate muchacho que yo te aviso cuando lo haremos ahora tenemos todas las capas separadas pero si llevamos esta la ftc er sólo nos va a aparecer una capa porque si se fijan son trazados y formas que están dentro de una capa que contiene todo lo que necesitamos es que cada parte del cuerpo sea una capa independiente para poderla animar fácilmente por separado en el after así que para ello hacemos lo siguiente seleccionamos la capa que contiene todos estos trazados clicamos aquí en estas tres rayitas y le damos a soltar a capas de secuencia sí sí pero espérate tranquilito muchachos y yo te aviso ahora ya son capas sueltas pero aún están dentro de la capa esta de aquí arriba así que las seleccionamos todas y las sacamos para afuera y por fin ya son libres eliminamos esta capa que ya no tiene nada y era la culpable de tenerlas esclavizadas a la pobre ahora sí que sí muchachos ya tendríamos a nuestro personaje listo para meter en el after effects relájate mi niño no tiene 13 lo primero que hacemos es importar el archivo de illustrator que hemos guardado pero lo queremos hacer de forma que nos respete todas las capas por separado entonces lo tenemos que hacer seleccionando esta opción de importar como conservar tamaños de capas esto nos crea una composición del tamaño que teníamos en el illustrator y dentro están todas las capas separadas ahora antes de nada vamos a hacer un paso muy importante que dice el papa frita te dije que yo te avisaban todo el 'caso a papi lo que hacemos ahora es convertir todas las capas y capas de forma esto lo hacemos seleccionando todas las capas clicamos con botón derecho vamos a crear y clicamos en crear formas a partir de la capa vectorial esto hace que ahora las capas se restricción de forma automática para que no pierdan resolución al modificar les el tamaño y lo que es más importante para mí nos da la opción de poder animar los trazados de la propia capa ahora veremos lo bueno que es esto a la hora de animar y así vale vale de los nombres ponerle nombres a las capas nos ayuda mucho a no liarnos a la hora de animar así que ahora por fin es cuando lo hacemos y estos se los aconsejo así porque si se fijaron cada vez que hacíamos un proceso cómo convertir de trazados a capas en illustrator o convertir de capas y capas de forma aquí en el after nos cambiaba el nombre de las capas así que muchachos ahora es el momento lo siguiente que podemos hacer antes de empezar a hacer el reading es ponerle colores a las capas para encontrarlas más fácilmente de un vistazo yo por ejemplo suelo destacar el cuerpo del resto ya que para mí es como la parte más importante y siempre quiero tenerla bien visible antes de empezar a unir las partes del cuerpo a lo loco como si fuera mister potato vamos a pensar un poco cuando emparenta mos una capa con otra ésta sigue su posición rotación o escalado hasta ahí bien pero qué pasa si modificamos la forma en sí con los trazados pues como ven no hace nada no lo sigue esto era un problema ya que habría que estar animando el frame a frame para simular que el bracito está en el mismo sitio todo el rato y digo que era un problema porque hace un par de años lo solucionaron dentro del after effects con un script que está un poco escondido ya se lo he enseñado en otros vídeos pero por si acaso se llama create tools rompan y lo pueden activar yendo a ventana y clicando aquí abajo este script lo que hace básicamente es que nos permite unir capas a los puntos de los trazados les costó el hallelujah esto ya verán que nos permite hacer cosas de manera mucho más fácil entonces si nosotros queremos deformar el cuerpo y que el bracito siga esta deformación lo primero que tenemos que hacer unos puntos en el trazado del cuerpo donde van a ir más o menos enganchado también podemos aprovechar y ponerles puntos para la cara para el pelo y para las piernas abra con el trazado seleccionado hacemos clic aquí y tacha se nos crean unos nulos en cada punto del trazado estos nulos en verdad no hacen nada simplemente siguen los puntitos los podemos ajustar de tamaño y borrar los que no necesiten ahora podemos emparentar el brazo al nulo este por ejemplo y es como si siguiera al punto del trazado la bomba si se acuerdan en el illustrator hicimos algunas máscaras de recorte para la lengua y los dientes a mí me gusta re hacer esto en el after para tener más control y verlo todo más simplificado ahora necesitamos meter los dientes y la lengua dentro de la boca y seguramente muchos pensemos que arrolló ahora tengo que duplicar varias veces la capa de la boca y ponerlas por encima de los dientes de la lengua y hacer que éstos actúen como más de alfa y claro que se animó la boca tendría que animarla por igual en todas las capas que estén haciendo de mate chiquito pastel pues sabes no se preocupen muchachos que para eso estoy yo aquí no para darles soluciones que no simplifique en la vida esto tiene un par de formas de solucionarse yo les voy a decir una que me parece la mejor para este caso y la otra la vamos a aplicar más adelante con los ojos así que atentase la solución para quitarnos del igv es simplemente meterle el efecto de definir mate a los dientes y a la lengua y en este efecto le decimos que nos coja el mate de la boca bueno que esto no se ve todos los viajes si les ha gustado esta técnica pueden dejarme un like y decirme en los comentarios qué les ha parecido y ya de paso pues aprovecho para decirles que hace poco me he creado una página de petri y para los que no sepan de qué va es como una plataforma de mecenazgo en la que pueden apoyar mensualmente a sus artistas favoritos a cambio a los artistas pues pueden compartir contenido exclusivo en mi caso yo les comparto mis proyectos de after effects así que este proyecto estará subido para cuando lo estén viendo y podrán practicar con este machine guiteau todo lo que quieran y si se animan unos cuantos y llegamos a 10 que creo que llamamos por ciento por 8 empezaré a hacer directos animando para que vean de primera mano cómo lo hago yo bueno venga más no me lío más les dejo el link aquí abajo en la descripción y cuando terminen de ver este vídeo van directos a la página a ver qué les parece a ver por dónde íbamos que ya se me fue el baifo así estábamos con la boca del match anguita como seguramente hagamos que la abra y la cierre como hacemos para que los dientes y la lengua sigan la forma de la boca muy bien con el script de antes seleccionamos el trazado de la boca exponemos un par de puntitos extras una arriba y otra bajo vamos al script y le decimos los números siguen los puntos y ya estaría borramos los nulos que no nos hagan falta re nombramos estos dos y emparenta mos los dientes de arriba al nulo de arriba y los dientes de abajo al nulo de abajo la lengua también al nulo de abajo ahora como ven si abrimos a cerramos la boca todo lo sigue perfectamente y así no tenemos que andar animando mil cosas ya chino ya podemos ajustar los puntos de anclaje y terminar de emparentar el resto de capas hasta tenerlo todo unido las pupilas que sigan los ojos y la nariz que siga la boca ahora podemos crear un nulo y emparentar le la boca y los ojos por si queremos mover toda la cara entera lo podemos hacer así [Música] este no lo puede seguir el cuerpo o el mismo nulo de la cabeza por ejemplo ahora vamos a meternos con los ojos ya que le da mucha expresividad a los personajes y no los podemos ignorar lo primero que hacemos es usar otra vez el efecto de definir mate en las pupilas para que tome la capa de los ojos como mate así si llegamos al borde no se nos salen por fuera y ahora les voy a enseñar un truquito para que se ahorren mucho tiempo cada vez que quieran animar unos ojos y si se fijan en la vida real a no ser que tengamos un ojo a la virulé siempre movemos los ojos y los párpados a la vez entonces la idea aquí es que con animar un solo ojo se nos anime el otro automáticamente esto lo conseguimos emparentando el trazado del ojo derecho con el trazado del ojo izquierdo [Aplausos] y los trazados de la pupila derecha con el trazado de la pupila izquierda por esto nos ahorramos duplicar key frames y cada vez que queramos hacer cambios pues sólo lo tenemos que hacer en un ojo la única excepción sería si quisiéramos ponerlo visto entonces tendríamos que animar la posición de la otra pupila huayno bueno bueno doy por hecho que en este punto se ha suscrito todo pero le han dado a la campanita saben cómo hacerlo o tengo que llamar al quasimodo para que les enseñe cómo queda estabas suscritos qué quieres que llama su primo el de los uni mira que te tiene el ojo echado de bien abajo vamos con el ultimo chacho consejito antes de ponernos animales como el pobre tiene de los bracitos cortitos si lo ponemos medio de lado el brazo izquierdo lo perdemos de vista una solución sería cambiarle un poco el color pero no quedaba muy allá entonces lo que vamos a hacer es ponerle un trazo pero queremos que ese trazo solo se vea cuando el brazo pase por delante del cuerpo porque si no quedaría raro que todo el cuerpo esté sin trazados y los brazos tengan un trazo para eso lo que vamos a hacer es combinar estas técnicas que hemos visto hasta ahora vamos a duplicar el brazo lo emparenta vamos con el original y el trazado también lo emparenta vamos con el del original ahora le ponemos un trazo de un color un poco más oscuro que el del cuerpo y ya casi lo tendríamos a mí me gusta que no se vea al comienzo del brazo así que le hago una mascarita en modo arrestar para quitarse [Música] lo que nos queda por hacer es ponerle el efecto de definir mates cogiendo el mate del cuerpo para que solo se nos vea cuando está por encima del cuerpo y ahora sí ya lo tendríamos listo para el otro brazo como está por detrás hacemos lo mismo pero esta vez con el cuerpo lo duplicamos le ponemos un trazo lo emparenta vamos al cuerpo original le ponemos el definir mate y cogiendo el mate del brazo y ya estaría también podríamos haber puesto el brazo de un color un poco más oscuro y ya hubiera quedado bien si es que parece que me gusta leer bueno espero que les haya gustado el vídeo y nos vemos en el siguiente que nada que es broma si ahora viene lo mejor muchachos vamos a darle vida a nuestro mar changuito antes de empezar un chacho consejito que les voy es que cuando tengan al personaje listo para animar dupliquen la composición y animen en está duplicada así siempre tendrán una copia del personaje con el rhic hecho por si lo quieren animar de otra forma más adelante lo primero que hacemos es empezar por la parte más importante en nuestro caso aquí sería el cuerpo habíamos quedado en que el manguito iba a ser un baile tonto como si estuviera haciendo un working entonces antes que nada vamos a hacerle un buen culo por esto también viene genial trabajar con capas de forma porque nos permite dibujar lo que nos haga falta cuando queramos [Música] ahora empezamos creando las poses claves en este caso vamos a hacerle dos una agachado con el culo en pompa y otra estirado ah esto lo hacemos colocándonos donde queramos creamos unos kits frames en la posición y en el trazado y ajustamos la primera pose [Música] luego vamos un poquito más hacia adelante y creamos la segunda pose [Música] por último otra vez agachado para que la animación sea el loop estos que frames en los convertimos a hold y frames o mantenidos así no nos liamos con lo que pasa entre medias si le damos play podemos ver más o menos cómo quedaría y si hiciera falta ajustamos abajo el tiempo sin problemas si se fijan estamos aplicando el principio de estirar y aplastar en el cuerpo cuando baja se aplasta un poco y le sale a la laborcilla por aquí y cuando a su vez se estira éste puede que sea el principio de animación más importante para darle vida a cualquier cosa y lo estaremos aplicando a casi todo así que les aconsejo que lo usen y si quieren saber más sobre los principios de animación les dejo por aquí arriba este tutorial épico donde les explico cada uno detalladamente y con ejemplo conocerlos y usarlos es un antes y un después al animar y hacer ahora que ya tenemos el cuerpo con estas dos poses bien definidas vamos a añadirle poco a poco el resto de partes con el mismo tipo de frames y en el mismo momento de las poses clave las tres propiedades que usó todo el rato son la posición la rotación y el trazado ya verán que combinando estas tres se puede hacer de todo aplicamos el principio de estirar y aplastar a las facciones de la cara tanto en la boca como en los ojos hay que tener en cuenta que para que quede realista no tenemos que modificar el volumen es decir si estiramos hacia arriba tendremos que contraer por los lados de igual manera los bracitos de momento con la rotación y los trazados para doblarlos un poquito tsja vale seguramente después tengamos que ajustar les la posición pero no pasa nada las piernitas simplemente la flexión amos un poco con los trazados ya las botitas las aplastamos un poco cuando se agacha el pelo también se lo podemos animar aplicando el principio de la inercia combinado con el de estirar y aplastar cuando está agachado se le aplasta hacia abajo y cuando está estirado se le levanta por los lados hacia arriba de la inercia esto es totalmente subjetivo y seguramente acabe desplazando los en el tiempo pero por ahora así vamos bien ahora que ya tenemos las poses claves bien definidas vamos a duplicar esta composición para tenerla como de copia de seguridad y vamos a terminar de animar en la nueva que hemos creado lo que hacemos ahora es crear unas cuantas poses intermedias para definir un poco más lo que pasa entre las poses clave y lo hacemos igual que antes haciendo uso de la posición rotación y trazado aquí no hay una ley escrita de cómo hacerlo simplemente ir probando y como más les guste hay veces que llegamos a animar frame a frame pero no pasa nada piensen que cuantos más que frames más personalizadas nuestra animación y más única será no hay mal que por bien no venga [Música] una vez que lo tenemos podríamos dejarlo así para que parezca una animación tradicional animada cada dos frames o podríamos convertir los kid frames a lineales para que se vea todo un poco más fluido esto ya como más le gusta a cada uno ahora para terminar podemos crear una composición en 1080 x 1080 metemos nuestra animación ahí la ajustamos al tamaño [Música] le metemos una expresión loop out para que se repita en el tiempo [Música] le ponemos un fondito con un degradado así como granulado y unas texturas animadas por encima y listo aquí arriba a la derecha les dejo un enlace al tutorial donde les enseñó cómo usar las texturas para conseguir este tipo de look o acabado final más orgánico [Música] con este método que les he enseñado con un poco de paciencia pueden animar cualquier personaje que se inventen haciendo cualquier acción que se les ocurra la verdad es que estas animaciones funcionan muy bien en loops infinitos para redes sociales como instagram por ejemplo tanto para usarlas como un post como para usarlas de stickers animados en su stories y que la gente también los puede usar [Música] que por cierto si quieren usar esto mas changuitos animados de aquí que nos dice para el anterior tutorial sobre los principios de animación ya lo pueden hacer escribiendo a chacho motion o más changuitos en el buscador este de aquí [Música] bueno muchachos qué tal les ha gustado quieren que les enseñe rápidamente cómo exportar para redes sociales venga va así empiezan a subir sus animaciones al instagram y me pueden etiquetar a chacho pasión para verdad los que llevamos un tiempo usando after effects cada vez que nos hablan de exportar para redes sociales nos hierve la sangre porque nos quitaron el bendito codec h 264 por la cara así que ahora para exportar así tenemos que hacerlo a través del media encoder que no muy rápido abriéndose que digamos o por medio del adobe premiere con lo que tenemos que exportar en alta calidad primero y luego volver a exportar de nuevo en este caso vamos a ver cómo hacerlo con el adobe media encoder vamos a composición añadir a la cola de adobe median códec esperamos que se abra y una vez lo tenemos nos aparecerá aquí entonces vamos a estar flechita elegimos h264 clicamos aquí donde pone coincidir con origen y se nos abre esta ventanita como la del premiere aquí elegimos el nombre y donde lo queremos guardar podemos desactivar la casilla de exportar audio si no hemos puesto ninguno como en nuestro caso los fotogramas los dejamos tal cual están el orden de campos en progresivo el aspecto en píxeles cuadrados el estándar tve lo dejamos como este y marcamos la casilla de procesar con la máxima profundidad en ajustes de codificación dejamos el rendimiento en codificación de software el perfil lo ponemos en alto y el nivel en 4 con 2 hacemos es claro hacia abajo y en ajustes de velocidad de bits donde pone codificación velocidad elegimos cmr y lo ponemos a 20 aquí abajo seleccionamos usar calidad de procesamiento máximo y listo dejamos aceptar [Música] ahora tendríamos nuestra animación con un peso abajo pero que se va a ver perfecto yo uso esta settings desde hace mucho tiempo y nunca me han dado problemas de esta forma exportó todo a instagram a facebook ya youtube bueno muchachos creo que no me he dejado nada hemos aprendido cómo crear nuestros personajes cómo hacerles un ritmo y básico sin usar ningún plugin y como animarlos usando sólo la posición rotación y trazados se me quejara ni un gol a esos fútbol de ballet muy pronto veremos cómo ser worksite kings o ciclos de caminado con y sin twin si quieren que lo haga con un personaje en concreto como de alguna peli o serie o algún videojuego dejármelo en los comentarios y les haré el tutorial con el personaje que más me haya gustado de todos venga muchachos un par de tutoriales más y acabamos todos contratados en disney [Música] estaba viendo todo el tutorial editado y me dije no está mal pero creo que le hace falta un toque extra para que se haya un vídeo épico del todo así que me puse a animar el mismo machaquito haciendo un par de bailes nuevos para enseñarles lo que podemos conseguir usando este método tan simple el primero es un working pero en condiciones con un par de nalgas bien puestas y el perreo incorporado la referencia la saque creo que de un anuncio de skeeter pero ahora no estoy muy seguro el segundo baile que hice fue el mítico muy walking y la referencia para hacerlo lo saqué del gran michael jackson en directo me tuve que ver hasta un tutorial y aprender a hacerlo yo mismo porque no lo entendía y por último para los que les guste más la música clásica le hice hacer el típico giro sobre la punta del pie que hacen las bailarinas de ballet éste ya fue algo más complicado y tuve que tirar de esta referencia a la vez que hacerme una guía rápida en 3-d para ver más o menos cómo se deformaba el cuerpo de enroscarse luego le puse unas líneas por encima para marcarle bien los pliegues del cuerpo y ese culo que tienen esta animación sí que fue totalmente frame a frame y me llevó algo más de tiempo pero creo que valió la pena no bueno ahora sí que sí muchachos ya me puedo despedir tranquilo nos vemos en el siguiente así [Música]