jueves, 10 de mayo de 2018

Cinemagraph

¡Hola! En esta entrada os voy a explicar cómo realizar un Cinemagraph y cómo realizarlos con Adobe Photoshop.

¿Qué es un CINEMAGRAPH?
Bien, pues estos son imágenes animadas. Pero son la combinación de fotografías y vídeos. Su mayor parte suelen ser estáticas, pero tienen una parte en la que se ve una animación normalmente infinita. Suelen guardarse en GIF.

Os dejo aquí una página para que veáis algunos cinemagraphs.


Ahora, ¡vamos a realizar nuestro propio Cinemagraph!

CÓMO REALIZAR UN CINEMAGRAPH (LÍNEA DE TIEMPO DE VÍDEO)

En esta ocasión, vamos a realizarlo con Photoshop. Y por supuesto, necesitamos sacar la Línea de Tiempo. Si no la tenéis, podéis sacarla dándole a Ventana > Línea de Tiempo.
Puede que os aparezca la Línea de Tiempo de Cuadros, en esta ocasión necesitaremos la de Vídeo.
Y como hice en la anterior entrada, voy a explicar las opciones de esta Línea de Tiempo, para que a la hora de usarla, se entienda todo mejor, y se entienda para qué sirve cada cosa.
Esta línea de tiempo funciona con Pistas, las hay de Audio y de Imagen. En ellas se colocan los elementos, y podemos moverlos y añadirles algún efecto, controlando totalmente la duración de cada elemento independientemente.

· Pista de Audio. Aquí podemos ver y manipular el sonido o efectos de sonido de nuestro vídeo.
· Pista de Imagen. En esta pista se colocan todos los elementos visibles, lo que tengamos en las capas, se visualizará aquí.
· Sonido. Con esto podemos silenciar el vídeo y viceversa.
· Cortar. Donde tengamos ubicado el reproductor, esta opción separará el vídeo en dos trozos. En el caso de Photoshop, también añadirá una nueva Pista para uno de los trozos separados.
· Transiciones. Esto nos permitirá añadir un efecto de desvanecimiento y similares a los elementos de nuestras pistas. Eso sí, se añade al principio y al final de los elementos. Son efectos que actúan en la entrada y salida (la aparición y desaparición) de los objetos de nuestra pista.
· Duración del Vídeo y FPS. Aquí podemos ver en qué momento del vídeo estamos ubicados, cuánto dura, y el número de imágenes que transcurren por segundo en nuestro vídeo. En este caso, son 29,97 fps, y se dice que va a 30 fps.
· Exportar. Nos permite exportar nuestro vídeo.
· Convertir en animación a Cuadros. Este es la Línea de Tiempo de Vídeo. Dando click ahí, cambiaremos a la Línea de Tiempo de Cuadros.
· Resolución e Indefinido. Nos permite cambiar la resolución y poner que sea un vídeo de duración indefinida.
Ala derecha tenemos muchas otras opciones. Pero las más primordiales, son estas que he mencionado.

CÓMO REALIZAR UN CINEMAGRAPH(PROCEDIMIENTO)

Primero necesitaremos un vídeo. No puede ser cualquiera. Preferiblemente debe ser uno donde la cámara esté quieta, en un sitio fijo y sin ningún tipo de movimiento. En mi caso, elegí la escena de una playa.
Llevaremos nuestro vídeo a Photoshop, y allí deberemos duplicarlo.


Necesitamos la imagen estática, para ello, Rasterizaremos la capa duplicada. Vamos a Capa > Rasterizar > Capa. Tendremos nuestra ''imagen''.


Es importante fijarnos en que ambas pistas de imagen estén bien sincronizadas. Sobre todo para los Cinemagraphs más complejos. A continuación, creamos una máscara de capa en nuestra capa anteriormente rasterizada. Y en mi caso, voy a hacer que el mar sea lo que no se mueva. Asi que sólo descubriré las palmeras.


Ahora nos dirigiremos a la Línea de Tiempo y seleccionaremos la opción de Infedinido.



Tendríamos nuestro Cinemagraph hecho, nos haría falta exportarlo. Vamos a hacerlo como GIF, que es un formato ideal para publicarlo en internet y evitar que pese mucho. Igualmente, al ser su base un vídeo, pesará, ya que son muchísimas imágenes consecutivas en cada segundo.
Nos vamos a Archivo > Exportar > Guardar para Web 
Puede que tarde un poco en cargar, depende de vuestro archivo, y de vuestro ordenador.



Os saldrá algo como lo de la derecha, y ''opciones'', en las cuales pone Original, Optimizado, 2 copias, 4 copias... Lo mejor sería en Original, toquetear las opciones a tu gusto. Sólo recuerda que no debe pesar mucho. Y no te preocupes, en Original y Optimizado salen las mismas opciones. Una vez configurado a tu gusto, seleccionamos Guardar...
 

Saldrá algo así, lo ideal es tener el HTML y las imágenes (GIF). Damos en Guardar y tendremos nuestros dos archivos. ¡Ya tienes todo listo para subir tu propio cinemagraph!


¡Puedes hacerlos muy curiosos y distintivos! Sólo has de buscar, o crear el vídeo.
Y con esto, nos veremos en otra entrada, ¡hasta otra! :D

No hay comentarios:

Publicar un comentario