hi dear Hivers!
today I'm bringing you the process of creating a new interactive art.
I'm creating the drawings using Adobe Illustrator for the vector art, and then I'm mounting all into a HTML with Javascript for the interactivity.
I will create a parallax scrolling effect! This means, that when you scroll in the drawing, it will move the layers at different speed, creating the effect of deepness, this technique was used a lot in the old 16 bit videogames in Sega genesis and Snes.
¡Hola queridos Hivers!
hoy les traigo el proceso de creación de un nuevo arte interactivo.
Estoy creando los dibujos usando Adobe Illustrator para el arte vectorial y luego estoy montando todo en un HTML con Javascript para la interactividad.
¡Crearé un efecto de desplazamiento de paralaje! esto quiere decir, que al mover el dibujo, moverá las capas a diferente velocidad, creando el efecto de profundidad, esta técnica se usaba mucho en los antiguos videojuegos de 16 bits en Sega genesis y superNintendo.
so now I drawing the layers! the first one will be for the faces.
asi que ahora dibujo las capas! el primero será para las caras.
the layer behind will be for the trees in the background, it has the double of size than the faces layer, so it will move slower.
la capa detrás será para los árboles en el fondo, tiene el doble de tamaño que la capa de las caras, por lo que se moverá más lento.
the concept of the drawing will be that this is a dark forest with evil creatures, maybe a coven with witches near devils, so I'm drawing a dark creature made of tree branches in the second layer.
el concepto del dibujo será que este es un bosque oscuro con criaturas malvadas, tal vez un aquelarre con brujas cerca de demonios, así que estoy dibujando una criatura oscura hecha de ramas de árboles en la segunda capa.
the third layer will have the moon in the background, and it will move very slowly.
la tercera capa tendrá la luna de fondo y se moverá muy lentamente.
so I have now all the drawing into just one PNG drawing, I will move through it using html and javascript. it is ready for animation!
así que ahora tengo todo el dibujo en un solo dibujo PNG, lo recorreré usando html y javascript. ¡Está listo para la animación!
and after adding some coding, this is the result!
you can be the owner of one nft or play with it here:
5 x 1 tez - teia: https://teia.art/objkt/768677
y después de agregar algo de código, ¡este es el resultado!
puedes ser el propietario de un nft o jugar con él aquí:
5 x 1 tez - teia: https://teia.art/objkt/768677
I hope you like it! / espero te guste!