La técnica scanimation es la razón por la que el libro ¡Al Galope! es todo un best-seller. Su autor es Rufus Butler Seder, amante de las ilusiones ópticas. Esta la patentó en 1998 y la llamó Kineticard
En 2007 se publicó un libro que traía la rejilla impresa en acetato «Magic Moving Images» de Colin Ord
https://www.youtube.com/watch?v=S5W5JJXtqhw
Pero ha sido Rufus quien popularizó la técnica conocida como «scanimation» con tres libros, uno dedicado a los animales Gallop!, otro a los deportes Swing! (¡GOOOl!) y un tercero más reciente titulado Waddle! que añade color a las animaciones.
En sus libros no hay que recortar la rejilla, con el simple movimiento de abrir y cerrar las páginas se produce la ilusión.
El primero se lo regalé a mi hija de 4 años y claro era de esperar me preguntó cómo se hacía, cómo conseguir esta ilusión de movimiento, y aquí están mis deberes.
Tutorial Scanimation
Básicamente necesitamos dos imágenes, una rejilla y otra con 6 o 7 fotogramas cortados por dicha rejilla, luego pasamos por encima la rejilla para mostrar sólo 1 fotograma cada vez.
Aquí podéis ver una demo online.
Vamos por partes, para crear las imágenes de este tutorial he utilizado Illustrator.
La rejilla
La rejilla se compone de rectángulos paralelos, lo importante es la medida de estos rectángulos. La medida corresponderá al nº de fotogramas que vayamos a utilizar, si vamos a utilizar 7 fotogramas, el ancho de cada barra será 6 veces el de su espaciado.
La distancia que separe cada barra será 1/6 del ancho de la barra. Es decir que si van a separarse por 1 px cada barra medirá 6 px.
Una vez creada la primera barra vertical, tenemos que copiarla x número de veces dejando la distancia de separación apropiada:
Luego tan solo tendremos que pulsar CTRL + D y dejarlo pulsado hasta llenar el espacio horizontal.
Agrupamos la rejilla.
Los fotogramas
Para crear la animación tenemos que pensar en un sketch de 7 fotogramas. Uno de ellos lo dejaremos en blanco para pausar la animación.
Las hay más complejas y más simples pero la técnica es la misma.
Creamos los 6 fotogramas, en este ejemplo vamos a crear una estrella y hacerla girar.
Creamos la estrella
Creamos 5 copias rotando la estrella, escalándola, moviéndola, cambiando el color, la opacidad, lo que queramos que sea nuestra animación.
Por último tenemos que cortar estos fotogramas, hay muchas formas de hacerlo, un ejemplo:
Selecciona la rejilla y uno de los fotogramas y en el panel Buscatrazos pincha en «Cortar»
Como resultado tendrás los «trocitos» de la estrella como parte del grupo de la rejilla, así que desagrupamos (May + CTRL + G), seleccionamos las barras, volvemos a agruparlas y si queremos seleccionamos los trozos cortados de la estrella y los agrupamos.
Y así continuamos hasta tener las 6 estrellas cortadas por la rejilla.
Ahora todas las estrellas, todos los fotogramas son visibles por la rejilla, lo que tenemos hacer es mover cada estrella 1 píxel para que se vea sólo 1 estrella cada vez que movamos la rejilla 1 píxel, el resto quedarán enmascaradas por las barras.
Lo podemos hacer de varias formas, la más segura es ir moviendo la rejilla 1 píxel y en cada paso dejar visible un solo fotograma.
De esta forma antes de volverse a iniciar la animación habrá un fotograma en blanco, recuerda que si quieres que sea una animación continuada simplemente añade un fotograma más.
Animando
Ya está, ahora sólo nos quedaría probar la animación, pasar la rejilla por encima de los fotogramas y crear la ilusión óptica de que se mueve
Selecciona la rejilla y muévela desde el panel control o si lo prefieres, usa After Effects o copia a Flash tu trabajo y crea una interpolación de movimiento.
En el siguiente vídeo tienes unos ejemplos mucho mejores que la estrella:
Y en este vídeo un juego de color y sombras.
Cuando tengas tus creaciones imprímelas. Un buen regalo para tu hijo/a ¿no?
Aprende a diseñar con los Cursos v2b
Cursos de Illustrator CS4 (Avanzado | Básico) <«”Muy pronto los de CS5
Actualización: Curso de Adobe Illustrator CS5
Para aprender a tu ritmo y desde tu equipo. Cursos en formato videotutorial con la garantía de video2brain.
Puedes ver en esta demo más de 12 horas de vídeotutoriales completamente gratis.
La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartita para que estos cursos resulten gratuitos para trabajadores residentes en España.
Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:
- Suscripción Anual Online: sólo 189€
- Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.
Cualquier duda ponte en contacto, estaremos encantados de atenderte.
Es demasiado buena la ilusión óptica que causa admiro muchísimo este trabajo de verdad que te hace alucinar te felicito sigue cosechando éxitos.
Hola buenas tardes, me gustaría saber como puedo agregarle a una imagen un texto y que solo se vea a travez de la rejilla? y que poniendo la rejilla en otra posición se vea otro texto.
Hola Daniel,
El sistema para texto o imagen es exactamente el mismo.
Es el mismo proceso.
Saludos
MUCHAS GRACIAS !!!
ES MARAVILLOSO EL MOVIMIENTO, A TODOS NOS ENCANTA Y ESTE RECURSO ES PARA SIEMPRE WOOOOOOOOOAAO GRACIAS POR TU TIEMPO Y CREATIVIDAD Y PERSEVERANCIA EN LOS PROYECTOS PARA ABRIR NOS LOS OJOS A POSIBILIDADES EN TODOS LADOS, MUCHO GUSTO
Hola!! estoy fascinado con esta ilusion….. es increible…. el movimiento es perfecto…. y muchas gracias por compartirnos este maravilloso tutorial…. y tengo una pregunta….
como es posible hacerlo sin la rejilla? y que el movimiento lo de la persona al mover la ilustracion completa… es decir con solo pasar la hoja del libro? o con moverse de un lado a otro?
Gracias!!
@Patricia de la Mora: muchas gracias
@Andrés Rodríguez: Gracias. La rejilla es parte necesaria de la ilusión, en el libro del vídeo la ilustración está dentro de la rejilla que es en sí la página, la ilustración tiene un pliegue que hace que se mueva con el movimiento de la página provocando la ilusión.
Buenas noches.
No sé nada de photoshop. ¿Qué versión usaste para la ilusií²n? Me podrías enciar un tutorial paso a paso, aún más explicado que http://ceslava.com/blog/scanimation-tutorial-creando-ilusiones-pticas/.
Gracias.
Hola Adrián,
Lee bien el tutorial, hablamos de Illustrator no de Photoshop, si quieres aprender a utilizarlo puedes adquirir este curso:
Curso de Adobe Illustrator CS5
Saludos
Hi
This is great piece of work, How can one get the software to create animated optical illusion picture. I am interested in creating some.
Regards
Bon
Saludos talvez saben donde podria bajar figuras y la rejilla en .ai es decir para illustraitor? o alguien me podría mandar unas gracias.
muchas gracias por el tutorial está genial. tengo un duda. hay un numero de fotogramas máximo?
Hola Laura,
No hay máximo, sólo debes tener en cuenta el espaciado.
Saludos
Hola mil gracias el tutorial es excelente, tengo una duda, hice una prueba y al separarlos un pixel se me encima con otro que estoy haciendo mal?,
Mola, y yo también puedo crear mis propias animaciones y venderlas con este mismo sistema? o hay que pagar por la patente?
Hola Julio,
No creo que tengas que pagar por la patente a no ser que te hagas multimillonario y alguien busque repartirse el pastel. Esto es como los libros pop-ups no creo que esté patentado, de todas formas intenta contactar con alguna editorial que te informe.
Saludos
Gracias Ceslava, sos grande!
i wish you wrote it in english
Hola!!! Me gustaría saber si ésta ilusión se puede hacer en curva, es decir, aplicarlo en un cilindro o solo se puede hacer en plano.
Muchas gracias por el tutorial!! Saludos
Hola Eduardo, entiendo que sí se puede. Cuéntanos si llegas a hacerlo.
Saludos y gracias a ti por la visita.
No acabo de entender exactamente el tema del ancho de las barras y el espacio que hay que dejar entre ellas. O sea, entiendo que el espacio entre las barras es 1/6 del ancho de la barra, ¿pero cuánto debe ser el ancho de la barra? Es que la barra debe medir tantos píxeles como fotogramas hay en la animación?
¡Muchas gracias y un saludo!
Hola Lucía,
Hay que tener en cuenta el nº de fotogramas, si vamos a utilizar 7 fotogramas, el ancho de cada barra será 6 veces el de su espaciado. Si dicho espaciado es de 1px cada barra medirá 6 px. Si dejamos 2px serán 12 y así.
Un saludo
Hola como estas? me encanta este sistema de movimeinto son disenadora grafica y estoy elaborando una tarjeta de presentación para un cliente con este sistema de movimiento nunca había hecho así que estoy un poco complicada. me ha salido todo menos el corte :( no me sale por favor si puedes ayudarme te lo agradecería
Gracias
Hola, ayudenme por favor… quiero hacer una animacion del tamaño de una A4 y con 6 frames … pero mis medidas no funcionan segun el tutorial .. que deberia tener en cuenta si lo quiero realizar a una escala mas grande ?