Crea un GIF a mano en Adobe Photoshop

1. Introducción: ¿ Quieres darle vida a tu blog o página web con lindos GIF animados? ¿ Alguna vez necesitabas la reacción perfecta GIF para ese amor tan menial? Todos hemos estado ahí. Toma esta clase para aprender cómo puedes hacer uno tú mismo. Te llevaré a través de todo el proceso de animar personajes dibujados a mano y letras en Photoshop. Desde el boceto hasta la exportación. Es mucho más fácil de lo que se podría pensar. En breve estarás presumiendo tus GIFs en tu blog o Instagram. Entonces, empecemos y hagamos algunos GIFs. 2. Preparar tu GIF a mano: El proyecto para esta clase es crear un GIF dibujado a mano con al menos un aspecto animado. Puede ser tan simple como un guiño de personaje o letras mano-estilo doodle. Soy bastante aficionado a este efecto de texto rebotante que utilicé en mi video de introducción, y en realidad es realmente fácil de hacer. Entonces voy a seguir adelante y demostrar eso primero. Primero, dibuja tu palabra o frase, luego crea una nueva capa y suelta la opacidad de la primera capa para que sea más fácil trazar. No te preocupes por que el rastro sea perfecto. El punto es que cada trazado sea ligeramente diferente al anterior. Repita esto dos o tres veces más. Creo que es buena idea hacer de tres a cinco capas. También podrías hacer este paso tradicionalmente con lápiz y papel de calco y luego escanearlo si quieres. Una vez que hayas terminado con tus cinco trazados, asegúrate de reventar la opacidad de todas tus capas hasta el 100 por ciento. La forma más fácil de cambiar el color de tus letras en todas las capas es crear un mapa degradado. Ve a ajustes, mapa de gradiente y asegúrate de que la capa esté en la parte superior. Después haga clic en la barra de degradado, y con estos recolectores de color en los lados de escritura y izquierdo, puede hacer doble clic en ellos y elegir un color. Debido a que esta capa está en la parte superior, se aplicará a todas las capas debajo de ella. Cada capa representa un fotograma de la animación. Por lo que por el bien de la organización, asegúrate de mantenerlos numerados en el orden que quieres que jueguen. Ahora que he terminado mis capas, estoy listo para animar. 3. Animación de lettering: Por lo que querrás asegurarte de que tu línea de tiempo sea visible. Ir a Ventana > Línea de tiempo. En algunas versiones de Photoshop, se le ocurre el menú desplegable aquí en el centro, que tiene un par de diferentes opciones de visualización de la línea de tiempo. Simplemente querrás asegurarte de que elijas Crear animación de fotograma. Aquí es donde organizarás tus fotogramas clave y probarás tu animación. El primer fotograma muestra todas las capas que están configuradas en visibles. Quieres desactivar la visibilidad de todas las capas que no quieres que aparezcas. Porque solo queremos que la capa uno se muestre en el primer fotograma, asegúrate de que las capas de dos a cinco sean invisibles. Antes de pasar al cuadro dos, querrás cambiar el tiempo haciendo clic en esta flecha desplegable. Siempre puedes alterar la velocidad cambiando los tiempos de retardo de tus fotogramas más adelante si quieres, pero generalmente creo que 0.2 segundos por fotograma funciona bien para GIFs. Entonces cuando hagas un nuevo fotograma haciendo clic en este símbolo escuchar derecho en la línea de tiempo, ese nuevo fotograma replicará los ajustes desde el primer fotograma. Por eso te hice cambiar el tiempo de retardo porque entonces solo aplicará automáticamente ese tiempo de retardo a los próximos fotogramas que hagas. Entonces de todos modos, solo tienes que asegurarte de que la capa dos sea la única capa que es visible en el marco dos y la capa tres es la única capa que es visible en marco tres y así sucesivamente y así cuarta para los otros dos fotogramas. Aquí abajo hay un menú desplegable que tiene la opción de jugar Once, Three Times, o Forever, y querrás elegir Forever ya que queremos que haga bucle. Empuja el juego y ahí vas. Creo que se ve bastante bien. Bastante contento con eso. Les mostraré cómo exportarlo más adelante. 4. Animación de un personaje: Aquí es donde se pone un poco más complicado dependiendo la complejidad tanto de tu personaje como de la propia animación. El proceso real de animación fotograma por cuadro es más o menos el mismo que con el texto, pero querrás probar tu animación rugosa antes de limpiar tus dibujos. Entonces voy a hacer ondear a esta niñita. No necesariamente necesito hacer esto, pero por el bien de la demostración, voy a usar una técnica llamada Onion Skinning, donde dibujas tu primer fotograma y tu último fotograma donde quieres que termine la animación antes de todo de los cuadros en el medio. Ya que ya tengo mi primer marco dibujado, voy a bajar la opacidad, hacer una nueva capa, y dibujar mi último fotograma. Ahora que eso está hecho, es más fácil ver lo que tiene que pasar en el medio. Esta es una técnica especialmente útil para animaciones más complicadas como correr o bailar. Asegúrate de mantenerte bastante suelto con tus dibujos en esta etapa si estás haciendo algo más complicado así. No te cuelgues de limpiarlos, porque quieres asegurarte de que tu animación funcione sin problemas primero antes de pasar el tiempo para que se vean bonitas. Esta es una animación que hice hace un par de años. Es un moveset de prueba para un juego. Pero de todos modos, como puedes ver, es mucho más complicado. Tenía que usar referencia y realmente pasé algún tiempo en ello. Entonces sería algo así con lo que querrías usar el desollado de cebolla. Si solo estás haciendo que tu personaje haga algo sencillo como guiño u onda, no necesariamente necesitas hacer esto. Lo que sea que funcione para ti, de verdad. Entonces de todos modos, ahora que tengo mis capas, las estoy transfiriendo a mi línea de tiempo para poder probar mi animación. No me voy a molestar en limpiar esto porque me gusta cómo se ve, pero si limpias tus bocetos rugosos haciendo arte de línea limpio en capas separadas, todas tus nuevas capas destrozarán tu animación. Es más fácil simplemente recrear tu línea de tiempo con tu nuevo arte de línea. De lo contrario, tendrías que volver y meterte con todos los ajustes de visibilidad de cada capa en cada fotograma clave. 5. Exportación de GIF y videos: Aquí está mi GIF terminado. Exportar un GIF es bastante simple. Si tienes una versión de Photoshop desde, creo que 2015 y atrás, la opción Guardar para Web está en un lugar diferente. En mi versión, está justo aquí bajo Guardar como. Pero para versiones anteriores vas a necesitar ir a Archivo > Exportar > Guardar para Web. De todos modos, haga clic en Guardar para Web. Asegúrate de que todo se vea bien. El tamaño del archivo debe ser relativamente pequeño y la repetición debe establecerse en Forever. Cambié la mía a 600 por 600 píxeles y luego hice clic en Entrar porque parecía un poco grande. Eso se ve bien. Guárdalo en tu escritorio y ahí tienes. Si quieres publicar tu GIF en Instagram, vas a necesitar exportarlo como un video porque Instagram no es compatible con GIFs. El video tiene que tener al menos cinco segundos de duración, así que entonces necesitas alargar tu GIF. Porque mis fotogramas están configurados en 0.2 segundos, eso significa que necesitaré al menos 25 fotogramas. Pero ten en cuenta que es posible que necesites más o menos si has elegido una cantidad de tiempo diferente para que dure cada fotograma. De todos modos, solo tienes que copiar y pegar tus capas resaltando todas ellas, y luego manteniendo pulsada Opción (o Alt en PC) y arrastrándola. A continuación, resáltalos de nuevo, mantenga pulsada Opción y arrastre y suelte. Ahí vas. Ahora tengo 30 fotogramas, por lo que debería ser tiempo de sobra. Entonces todo lo que haces después de eso es ir a Archivo > Exportar > Render Video. Tardará un par de segundos en cargarse. Cambia el nombre si es necesario, y asegúrate de guardarlo en tu escritorio. Después presiona Render. Ahora puedes previsualizarlo. Puedes ponerlo en tu teléfono dejándolo caer en tu Dropbox, o si tienes un iPhone, ponerlo en una carpeta y luego hundirte esa carpeta en tu teléfono a través de iTunes. ¡ Eso es eso! Si publicas tu GIF en Instagram, por favor siéntete libre de etiquetarme @melissaleedesign. Me encantaría verlos allí o en la página del proyecto de la clase. Muchas gracias por tomar mi clase. Me encantaría que me dejaras una reseña, y por favor no dudes en hacerme cualquier pregunta que puedas tener en Discusiones. ¡Nos vemos la próxima vez!