Tutorial: cómo hacer un Cinemagraph con Photoshop

Un cinemagraph es una imagen Gif pero más elaborada, ya que se trata de una imagen estática a la que se le han aplicado algunos elementos en movimiento como se puede apreciar en la imagen. Os explico como crear una con Photoshop.

Índice del artículo

Ultimos posts

¿Qué es un Cinemagraph?

 Un cinemagraph es una imagen Gif pero más elaborada, ya que se trata de una imagen estática a la que se le han aplicado algunos elementos en movimiento como se puede apreciar en la imagen. Los pasos de animación no difieren mucho de los de un gif convencional y aunque podemos usar varios programas de edición de vídeo para un resultado más profesional, se puede hacer todo con el mismo Photoshop CS3 o superiores. En resumen, un cinemagraph es un gif animado en el cual hay algún tipo de animación muy sutil. 

 ¿Cómo se crea un cinemagraph?

 La creación de un cinemagraph implica capturar un video corto o una serie de imágenes fijas y luego utilizar herramientas de edición para seleccionar y aislar la porción específica que se animará. Esta porción animada se integra de manera fluida con la imagen estática circundante, creando un efecto visual único y atractivo.

Crea un cinemagraph paso a paso con Photoshop

1. Obtén el vídeo que quieras utilizar como base.

Lo primero es disponer de un fragmento de vídeo que no sea demasiado extenso, lo podemos descargar de Internet o grabarlo con nuestro smartphone o cámara digital, obviamente cuanto mejor sea la cámara, mejor resolución tendrá el vídeo, pero con una normalita capaz de grabar a 1080p es suficiente (truco: si quieres que sea superfluido grábalo a 60fps).

2. Déjalo a tu gusto y crea una máscara vectorial.

Una vez que ya tengamos nuestro fragmento deberemos aplicar algunos retoques para ajustar los parámetros generales, como color, brillo, saturación etc. Una vez que lo tengamos como queremos, podremos ver la barra inferior de la línea de tiempo y nos desplazaremos hasta la ventana de capa duplicando la capa 1, para después rasterizarla y aplicarle máscara mediante la opción añadir máscara vectorial. Una vez hecho esto, coloreamos de color blanco las zonas a las que se desee aplicar el movimiento del tamaño que queramos.

3. Guarda los fotogramas en el directorio que consideres.

Ahora sólo tenemos que guardar los fotogramas del vídeo en el directorio que queramos mediante Exportar>Interpretar a vídeo>Secuencia de imágenes y los abrimos nuevamente en Photoshop como un sólo archivo mediante Archivo>Secuencias de comandos>Abrir archivos en pila.

4. Compila la animación

Ahora para compilar la animación, nos desplazamos nuevamente a la línea de tiempo para Convertir en animación de cuadros y le añadimos 4 centésimas de segundo (0,04) a cada uno y lo guardamos en formato Gif en Archivo>Guardar para web , marcando el número máximo de colores a 256 y seleccionando infinito en la secuencia de repetición.

PD: También puedes usar programas gratuitos como Gimp

¿Cuáles son las aplicaciones prácticas de los cinemagraphs?

 Los cinemagraphs son utilizados en diversos contextos, desde publicidad y marketing digital hasta arte visual. Se aplican en sitios web, redes sociales y presentaciones multimedia para captar la atención del espectador de una manera más llamativa y artística que una imagen estática o un video tradicional.

¿Qué diferencia a un cinemagraph de un video convencional o un GIF?

A diferencia de un video convencional, un cinemagraph presenta la mayoría de la imagen de manera estática, enfocando la atención en una porción específica que se anima. A diferencia de un GIF, los cinemagraphs suelen ser más sutiles y artísticos, con movimientos continuos y repetitivos que brindan una sensación de bucle infinito.

 ¿Cuáles son las ventajas de utilizar cinemagraphs en marketing digital?

Los cinemagraphs son efectivos en marketing digital porque capturan la atención del espectador de manera más impactante que una imagen estática. Su atractivo visual ayuda a destacar productos, servicios o mensajes de marca, generando una experiencia única que puede aumentar la retención y la interacción del usuario en comparación con otros formatos visuales.