[:es]Durante este 2017, estoy haciendo resúmenes semanales de las publicaciones en la sección DesingGIF. Esta semana, me gustaría explicar el proceso que llevo a cabo, además de los pequeños descubrimientos que hago cuando realizo estas animaciones de resumen.
Me voy a centrar en el DesignGIF de la semana pasada, uno de los más complicados puesto que está animado y creado desde cero. La animación se realizó con After Effects y las ilustraciones se realizaron a mano y se vectorizaron con Illustrator.
Paso 1: La idea.
Como la mayoría de las ideas, ésta empezó sobre papel. Aboceté los dibujos que quería tener en formato vectorial, elegí las gamas de color, y preparé el storyboard todo en la misma hoja de papel como podéis ver aquí:
Probablemente sea un «deje» que empiece a tener por dibujar y diseñarlo todo en la tablet, con una superficie bastante pequeña pero manejable… la verdad es que no me hace falta usar más papel en esta fase.
Lo que se ve en la primera línea, son los iconos de cada una de las entradas, en la segunda línea, de forma muy esquemática están dibujadas las transiciones que van a llevar.
Paso 2: Las vectorizaciones.
Una vez escaneado el dibujo, paso a vectorizarlo con Ilustrator, calcando los dibujos y corrigiendo las líneas.
El vectorizado ha quedado así:
Paso 3: La animación.
Ahora que tengo mi archivo vectorial, separado por capas, voy a animarlo con After Effects. Para ello, creo un nuevo proyecto e importo el archivo vectorial de Illustrator como una nueva composición, con lo que voy a conseguir animar cada capa individualmente.
Toda la animación va a ser de 900×900 píxeles, puesto que la voy a usar aquí en la web, por lo tanto, esa es la dimensión que tienen tanto el archivo de Illustrator como la composición en After Effects.
También importo cada una de las transiciones dibujada independientemente. Aunque más adelante haré un tutorial más específico sobre cómo hago las animaciones, hoy voy a explicar a muy grandes rasgos, cómo hice cada animación:
Cada animación es una precomposición de un conjunto de animaciones,
-En la primera, animé las formas primero mediante escalado y utilicé un efecto de barrido radial para que diera paso al dibujo del mando que hay en la capa inferior, que partí en varias partes y escalé para darle dinamismo.
-En la segunda, animé las formas mediante el efecto «trazo» y el Google Home aparece y desaparece sin ningún efecto. Las formas del final de esta animación están realizadas simplemente con rotación y transparencia.
-En la tercera, de nuevo, solamente utilicé efectos de movimiento, escala y transparencia.
-En la cuarta, corté los clips e hice que aparecieran sin ningún efecto ni transición, por orden de capa.
Paso 4: la renderización y optimización.
Cuando finalicé toda la composición, la rendericé como archivo de vídeo, sin audio. Después de eso, convertí el archivo de video en un GIF.
Aunque se puede hacer de muchas maneras, sin necesidad de recurrir a la web, hace poco he descubierto esta web: http://ezgif.com/ que permite tanto optimizar GIFs de un modo muy rápido, como convertir los archivos de vídeo a GIF.
Primero convertí el archivo a formato GIF, y siguiendo las recomendaciones de la propia web, luego pasé a optimizarlo hasta tener un archivo de formato manejable y que fuera relativamente rápido a la hora de cargarlo los navegadores.
Y el resultado, ya lo pudisteis ver la semana pasada:
[:]