Cinemagraph
Muy buenos días, hoy podéis encontrar en mi nueva subida una cinemagrafía o cinemagraph, y os preguntareis qué es, pero seguro que en páginas webs de fotografía habéis visto muchos de ellos y habéis querido saber como se hacen.
¿Qué es un cinemagrah?
Se produce tomando una serie de fotografías o grabaciones de vídeo y utilizando un software de edición de imágenes (photoshop) componiendo las fotografías o fotogramas de vídeo en un archivo GIF animado de tal manera que el movimiento en una parte específica de la imagen se percibe como un movimiento repetitivo o continuo.
¿Cómo se puede hacer un cinemagraph?
En mi caso el procedimiento es más sencillo, pero hay mil maneras de realizarlo.
El primer paso es buscar un video no muy largo (aunque luego se pueda recortar), en el que haya más de un sujeto en movimiento, sin que la cámara se mueva, para que nos sea más fácil a la hora de trabajar con ello en Photoshop.
Hay que descargarlo (opción guardar).
![]() |
| ↣Aquí he encontrado mi vídeo, de forma gratuita y sin derechos de autor que es lo importante.↢ |
Podemos recortarlo en programas como QuickTime o Adobe Media Encoder.
En el tercer paso, si el vídeo es recortado se guarda y se lleva a Photoshop, si no lo está directamente se lleva a dicho programa (archivo, abrir, ir al documento). Podemos verificar, el modo de color, las dimensiones del documento, el tamaño del archivo etc.
Al ser un vídeo, sacaremos la línea del tiempo, pero en este caso es de vídeo no de cuadros.
Como cuarto paso en la pestaña capas, duplicaremos la capa que tenemos del la secuencia, y lo haremos arrastrando la capa hacía un botón en la parte inferior de la pestaña.

En la línea del tiempo nos aparecerán las dos capas una seguida de la otra, lo que hay que hacer es subir la copia para que ambas se encuentren en paralelo una de la otra.
Para ello lo podemos hacer subiendo la capa copia (en pestaña capas) encima de la original arrastrando hacia arriba.

Ahora vamos a rasterizar (es el proceso por el cual una imagen en formato vectorial se convierte en un conjunto de píxeles) la capa que vamos a enmascarar para poder dejar las zonas que queremos reproducir en el vídeo final. Lo que tendríamos que hacer es seleccionar la capa copia e ir a capa en el menú superior, rastrear, capa o vídeo.
Lo que sucede es que la capa en la línea del tiempo cambia de color, así sabes cual es la que está rasterizada.
El quinto paso es enmascarar la capa copia: primero en dicha capa tenemos que añadir una máscara, que tendremos que seleccionar la capa y después seleccionar el botón añadir capa, que se encuentra en la parte inferior derecha de la pestaña capas.
Cuando añades la máscara, aparecerá en miniatura al lado de la capa.
En ella trabajaremos para ocultar o descubrir elementos que queramos que estén o no en nuestro trabajo.
¿Cómo lo hacemos?: nos posicionamos en la máscara y con ayuda de la herramienta pincel (se encuentra generalmente en la parte izquierda de la pantalla) de un tamaño y dureza no muy grande para que no se vea el contraste de una capa a otra, descubriremos lo que queremos que se mueva. En este caso se tiene que pintar de color negro para descubrir la capa de abajo.
Desplazaremos el pincel por las zonas a descubrir en la imagen y veremos como en la la máscara aparece lo que hemos "pintado".
Ya tendríamos nuestro Cinemagraph, a la hora de guardarlo y subirlo a nuestra página web, tendríamos que ir Archivo/ Exportar/ Guardar para web. Nos va aparecer un panel donde hay diferentes opciones, solo vamos a tocar que el formato sea GIF y el porcentaje lo podemos dejar a la mitad, para que no ocupe mucho espacio, se pueda subir cargar bien en la web.
Lo previsualizaremos y lo guardaremos.
Podemos guardarlo también interpretando el vídeo: hacer click en la pestaña que está justo en la línea del tiempo a la derecha del todo
,donde daremos a interpretar vídeo y se abrirá otra pestaña, donde solo cambiaremos el formato y la predefinición en Adobe Media Encoder, finalmente daremos a interpretar.
,donde daremos a interpretar vídeo y se abrirá otra pestaña, donde solo cambiaremos el formato y la predefinición en Adobe Media Encoder, finalmente daremos a interpretar.
Parecen unos pasos muy complejos, pero a la hora de hacerlo varias veces es bastante fácil y más cuando veas los resultados tan creativos.
A la hora de subirlo a tu página web es igual que si cargas una imagen o un vídeo en el caso de que sea GIF, ten en cuenta las dimensiones del documento y su peso.
En el caso de que no se pueda cargar prueba introduciendo el código HTML.
¡Nos vemos pronto! 📭



















