Pixel Art to CSS: Animación en píxeles.
Os quiero compartir una web que me parece genial para trabajar la animación fotograma a fotograma mediante pixelart. Es muy sencilla, intuitiva y totalmente gratuita. La web es Pixel Art to CSS. Nos permite crear un GIF del número de píxeles que queramos y colorearlos uno a uno o con el clásico bote de pintura. Cuando queramos animar, podemos duplicar fotogramas ya trabajados e incluso desplazarlos. Podemos ir visualizando el resultado de nuestra animación y exportarlo como GIF o CSS cuando esté finalizado. Os comparto una explicación , para que podáis ver mejor como funciona (aunque se me pasaron algunas características).
Tened en cuenta lo siguiente:
A mi me guarda todo lo que hago, supongo que gracias a la IP, pero no os confiéis y descargar lo que tengáis hecho siempre que podáis.
Lo que dejéis en el color gris que sale al principio en el dibujo será transparente cuando exportéis el resultado.
Cuando uso el desplazamiento de dibujo se desplaza todo lo dibujado. Si dibujáis un fondo e intentáis mover un muñeco, también se moverá el fondo. Si queréis dibujar un fondo, una solución sería dibujar el fondo al final, cuando ya hayas animado el objeto.
Propuesta de Actividad: Creación de GIF animado
ACTIVIDAD: Creación de GIF animado con temática libre. La idea es entender y practicar con los principios básicos de la animación fotograma a fotograma.
Se puede trabajar desde PC, tablet o móvil.
Según tu destreza o grado de implicación, puedes asumir distintos grados de complejidad. La actividad puede resultar más complicada en función del grado de detalle de la representación, del tamaño de la imagen en píxeles o el tipo de animación.
Recuerda que cuando hayas finalizado tu animación puedes exportarla a GIF con el botón rojo de la esquina inferior izquierda.
OBSERVACIÓN: No he tenido problemas a la hora de guardar y retomar trabajos pese a que la web no pide registro. Los trabajos se conservan, no tengo claro si por cookies o por Ip. No obstante, si quieres tomar precauciones extra, tenemos la opción de exportar nuestro trabajo a modo de código de texto. No confundas esta exportación con la de guardar el GIF final. Esta exportación es para conservar trabajos en curso a modo de código. En el botón «LOAD» accederás a dos botones que permiten importar o exportar trabajos en curso. Para almacenar una copia de seguridad de tu trabajo copia el código de texto que aparece y pégalo en un archivo de texto. Para importar deberás hacer la acción inversa: usando la opción importar, copia el código que guardaste y pégalo. Estos son algunos resultados de otros alumnos.
Comments