Tutorial: Como hacer un cinemagraph con Photoshop

mayo 14, 2011 en Tutoriales

cinemagraph planta en barcelona

 Hace unos días encontré este espectacular Tumblr centrado en los Cinemagraphs, imágenes estáticas que incluyen uno o varios elementos animados. Los gifs del futuro dicen algunos flipaos. Lo cierto es que se trata de un efecto visual bastante chulo si se le sabe sacar partido más allá de “chica mona de mirada sugerente a la que se le mueve el pelo”. O “chica mona de mirada sugerente a la que se le mueve la falda”. O “chica mona de mirada sugerente pestañea”. No tengo nada en contra de las chicas monas, de hecho me encantan, pero esto da para mucho, mucho más.

Hay varias formas de hacer un cinemagraph, todas mucho más sencillas de lo que parece. La que os voy a explicar yo, Photoshop mediante, quizás no sea la más correcta (estoy seguro de que con After Effects, Fireworks o Premiere hay una solución mucho más correcta) pero el resultado es más o menos el mismo.

Básicamente se trata de combinar un video con una imagen estática (que será un fotograma de dicho video) y aplicar una máscara en la zona que queremos animar. Para obtener un resultado espectacular necesitaréis…

  • Una buena idea. Se trata de encontrarle sentido, así que lo ideal es plantearlo como algo más que un recurso estético. Tan sencillo como intentar contar algo.
  • Una camara de video, fotos, webcam, movil o lo que sea, con capacidad para grabar piezas de video en buena calidad. Obviamente una cámara de video “de verdad” o una reflex digital de gama alta ofrecerá unos resultados aplastantemente mejores.
  • Adobe Photoshop CS3 Extended o superior.

El ejercicio que utilizaré como referencia para el tutorial no cumple con los dos primeros puntos. Ni hay una idea, ni el sentido del efecto está aprovechado, ni cuento con una cámara de gran calidad (es una muy anticuada Panasonic Lumix DMC-FX35, que puede grabar video con resolución 720p a 30fps). Pero para comprender la parte técnica es suficiente, así que empezamos:

0. Si bien no forma parte del proceso técnico propiamente dicho, encontrar un lugar donde se combinen tanto elementos estáticos como objetos en movimiento y tener una idea creativa e interesante es el paso más importante si queremos hacer un Cinemagraph que lo pete. Una vez la tengamos clara, inmovilizamos la cámara -preferiblemente con un trípode- y a grabar. Basta con unos pocos segundos.

video barcelona captura cinemagraph sin retocar

1. Cuando esté grabado el video necesitaremos retocarlo en busca de una colorimetría más expresiva. Yo utilicé After Effects, pero con los ajustes de imagen de Photoshop es suficiente. Hay que tener en cuenta que buen retoque implica un contraste realista que mantenga el detalle tanto en las zonas oscuras como en las claras: con “Curvas”  (Imagen>Ajustes>Curvas) se puede controlar perfectamente todo el equilibro de negros y blancos y con “Corrección Selectiva” (Imagen>Ajustes>Corrección selectiva…) manipular la tonalidad dominante. Debido a que mi cámara genera grano y ruido de mosquito, he tenido que aplicar un filtro de suavizado para disimularlo (Fitro>Ruido>Destramar).

video barcelona captura cinemagraph retocado

2. Con retoque o sin el, lo primero de todo es abrir el archivo en Photoshop. Así que nos dirigimos a Ventana>Animación. Aparecerá la linea de tiempo en la parte de abajo. En la ventana de capas tenemos el video con el nombre “Capa 1″, lo arrastramos al icono de “Crear una nueva capa” para duplicarla.  La de encima será la imagen estática, así que toca rasterizarla (click secundario, “Rasterizar Capa”) y convertirla en una máscara (icono de la ventana de capas “Añadir máscara vectorial”). Ahora, en la máscara “pintamos” con color blanco sobre el elemento que queremos en movimiento y sobre el espacio que ocupará en los siguientes fotogramas.

mascara cinemagraph photoshop

3. Ahora llega lo importante: crear la animación. Para hacerlo seleccionamos la capa del video, vamos al menú de la ventana Animación (icono de la esquina superior derecha) y hacemos click en “Convertir fotogramas en capas”. Tras el proceso se habrán generado un montón de capas. Tras revisarlas yo me quedé con unas 15 (necesitaréis más o menos en función de lo que grabasteis y de la complejidad del bucle que vais a crear). A continuación hacemos click sobre el  icono de abajo a la derecha “Convertir en animación de cuadros” para activar la vista por fotogramas y volvemos al menú de la ventana (icono de la esquina superior derecha), pero esta vez hacemos click en “Crear fotogramas desde las capas”. Se generarán tantos frames como capas. Como el vídeo lo grabé a 30fps, la duración de cada fotograma no debería ser en ningún caso superior a 4 centésimas de segundo (0,04) para alcanzar la cifra de 24fps (el mínimo para una fluidez cinematográfica).

4. Ya tenemos la mitad del cinemagraph hecho… ahora solo queda “cerrar el círculo”. Tenemos que hacer un bucle de forma que el último fotograma enlace perfectamente con el primero. Para ello en el panel de capas vamos desativando la visualización de cada capa una por una (click sobre el icono del ojo que aparece a la izquierda de cada capa) y por cada una que desactivemos creamos un frame nuevo (en “Animación” el sexto icono empezando por la izquierda “Duplica los cuadros seleccionados”).

5. Antes de crear el archivo final, seleccioné el primer frame y agregué una capa nueva con una textura (en modo “Subexposición lineal”) encima de todas las demas, marcando la casilla “Propagar Cuadro 1″ para aplicar la textura a todos los fotogramas. Con esto consigo dos cosas: darle al gif un toque vintage y disimular la mala calidad de la imagen. Y ahora sí, creamos el Gif (Archivo>Guardar para web), en el cuadro de diálogo hay una pestaña gris para determinar el formato de salida (Gif, obviamente), aumentamos el númwero de colores al máximo (256) y en la sección de animación de abajo a la derecha, hacemos click sobre la pestaña opciones de repetición y marcamos “Infinito”. Le damos a “Guardar” ¡Y listo!

cinemagraph ultimo paso photoshop

Actualización 16-03-2012. He simplificado el proceso. Si este tutorial te ha servido de algo, no olvides compartirlo en las redes sociales.

Etiquetas: , , , , , , , , , , ,

56 Comentarios »