Cómo crear un cinemagraph que haga brillar tu página web

Quizás hayas oído hablar de estas criaturas híbridas y hasta es posible que hayas visto alguna sin saber lo que era. No, no estamos hablando de fantasmas sino de cinemagraphs o cinemagrafías, un formato visual que combina la magia de las imágenes fijas y en movimiento para crear un llamativo efecto que no es ni vídeo ni foto. Se trata de una mezcla novedosa que luce muy atractivo en cualquier porfolio online, haciendo que los visitantes naveguen más tiempo por tu página.

Así que si buscas llamar la atención de los visitantes de tu página web u ofrecer a tus clientes un valor agregado, no pierdas el tiempo y aprende cómo crear un cinemagraph con esta práctica guía que hemos creado sólo para ti:

¿Qué es un cinemagraph?

“Un cinemagraph (o cinemagrafía en español) es una fotografía en la que ocurre una acción de movimiento menor y repetida. es un momento de vida en una fotografía que de otro modo permanecería inmóvil. Citando a sus creadores, Kevin Burg y Jamie Beck, “es un formato que anda entre la fotografía y el vídeo para dar vida a una imagen y hacer que dure para siempre”. Básicamente, un cinemagraph es una imagen donde sólo uno o muy pocos elementos se mueven mientras que el resto permanece quieto.

En términos de formato, un cinemagraph es una animación que se repite hasta el infinito. Algo que popularmente se conoce  como GIF. Pero mientras este último formato se asocia con gestos expresivos y gráficos de baja calidad, los cinemagraphs son todo lo contrario. En primer lugar, el movimiento es mínimo y, por lo tanto, muy intrigante y llamativo. Además, es el mejor aliado para mostrar una atmósfera diferente en tu página web. Finalmente, pero no menos importante, son muy estéticos y generan una sensación poética.

¿Qué ventajas tiene para ti el cinemagraph?

En primer lugar, un cinemagraph es una original forma de llamar la atención que no deberías menospreciar, sobre todo si tienes una página web de fotografía. Existen muchos modos creativos de utilizarlos en tu página web:

• Añádelos a tu porfolio online. Cuantas más imágenes fijas hayan cerca de él en tu galería, más se destacará. Afortunadamente, con Wix Pro Gallery, puedes combinar fácilmente archivos de video y GIF junto con a imágenes tradicionales, y todo con la mejor calidad de imagen.

• Utiliza un cinemagraph como fondo de video en tu página de inicio. De hecho, tienes una gran colección de cinemagraphs disponibles en el Editor de Wix. Se encuentran en nuestro banco de videos gratuitos. No dudes en probarlos y usarlos porque están exactamente para eso. ¡Y gratis!

• ¿Quieres destacarte de verdad? Crea un cinemagraph para tu página “Quiénes Somos“. ¡Esa es una elegante forma de romper el cliché de una foto tuya mirando a la cámara!

¿Cómo hacer un cinemagraph?

Paso 1: piensa bien qué buscas

Un buen cinemagraph comienza con la selección de increíbles (y bien pensadas) imágenes. Imagina una escena o ambiente con el que te gustaría cautivar a la audiencia y planea, a partir de eso, todos los detalles necesarios. Determina cuál sería él o los elementos  en movimiento en tu cinemagraph: una vela encendida, el pelo de una modelo, un chorro de vino cayendo en una copa, vapor que sube desde una taza de café, etc. Las opciones son infinitas, pero debes encontrar el efecto que te “toque la fibra sensible” (y, posiblemente, también la de tus visitante).

Por último, planea el tipo de movimiento que te gustaría destacar. Deberá ser más o menos repetitivo, para que la secuencia en bucle no tenga errores ni saltos cuando un bucle termine y comience el siguiente.

Paso 2: filma

No se necesitan equipos especiales. Hoy es posible filmar (en buena calidad) con casi cualquier dispositivos de grabación. Sí, incluidos los smartphones (si es de última generación, mejor). Es sumamente necesario utilizar un trípode porque el video debe estar lo más quieto posible. El único movimiento que querrás grabar es el que has elegido de antemano.

Mientras grabas, asegúrate de que el fondo del elemento móvil esté completamente quieto. Por ejemplo, si estás filmando agua vertiendose en un vaso, checa que no haya movimiento detrás del agua que fluye. De lo contrario, será muy difícil aislar un movimiento de otro y el cinemagraph final tendrá problemas técnicos.

Paso 3: Edita

¡Acción! La parte más emocionante comienza con la edición de todo el material filmado. Básicamente estamos creando un archivo GIF, por lo que la mejor herramienta para estos formatos es el Photoshop. Si los términos “capa” y “máscara” te son familiares, te pasamos aquí todas las instrucciones sobre cómo hacer un cinemagraph en Photoshop:

• Importa todo el material grabado a Photoshop.

• Elige una secuencia de entre 3 y 10 segundos que te guste y desecha el resto.

• Crea una transición suave de auto-loop (el bucle se reproduce de forma automática).

– Este paso es opcional pero muy recomendable. Tu video final se reproducirá de forma infinita. Esto significa que al último cuadro de la secuencia le seguirá el primero, lo que puede crear un problema de           continuidad si no se define de forma adecuada. Puedes probar tu clip reproduciendo el video en modo ‘bucle’ (haz clic en el icono de engranaje en el “Panel de línea de tiempo” y selecciona “Reproducción de bucle”). Si ves alguna falla en la continuidad, usa el siguiente truco de opacidad para suavizar la transición:

– Duplica la capa del clip. Ahora tenemos el clip 1 y el clip 2.

– Ubica el clip 2 para que comience donde termina el clip 1.

– Extiende el comienzo del clip 2 a aproximadamente la mitad del clip 1 (fíjate en la imagen a continuación).

– Establece la opacidad del clip 1 para que pase del 100% al 0% de principio a fin.

En esta instancia, el clip 1 desaparecerá de forma lenta y se fundirá con el clip 2. Es por ello que enfatizamos en que el modo de transición entre ellos sea lo más suave posible. Fíjate el impacto del truco de Opacidad en el siguiente ejemplo:

• Ahora vamos al grano. Elige un segmento del video que quieras que sea la parte fija de tu cinemagraph. Créalo como una capa superior estática con un atajo Ctrl-Alt-Shift-E (o Command-Option-Shift-E en una Mac)

• Crea una máscara en la parte superior del área en la que deseas mantener el movimiento. Para ello usa un pincel negro. Consejo: para facilitar las cosas, puedes presionar “\” para ver en rojo el área enmascarada.

• Veamos nuestro ejemplo: la capa superior es estática. Hemos ocultado el agua “inmóvil” de ella, por lo que el movimiento que vemos ahora pertenece a la capa de video que sigue. Si has aplicado el truco de opacidad de forma correcta, la secuencia de bucle debería ser suave. Aunque no lo creas, el cinemagraph ya está listo para ser exportado.

– 256 colores

– Formato selectivo

– Difusión 100%

– En las opciones de bucle, elige “Siempre”.

Presiona (el botón) e impresiona

Ahora que tu cinemagraph está listo, puedes importarlo de forma muy sencilla a tu página web. Wix te permite agregar a tu galería tantos cinemagrafías como quieras y ¡gratis! Todo lo que tienes que hacer es seguir este simple procedimiento:

01. Crea tu cuenta de Wix si aún no tienes una. Sólo tarda un segundo.

02. Escoge las plantillas que desees de entre las cientos de ellas diseñadas especialmente para fotógrafos.

03. Haz clic en “Mis cargas” (icono de una nube) en el lado izquierdo del Editor.

04. Haz clic en “Imágenes”.

05. Haz clic en “Subir imágenes”.

06. Selecciona el archivo de tu cinemagraph (máximo de 15MB).

07. Presiona el botón “Agregar a la página” para insertar el cinemagraph e impresionar a tus visitantes.

¡Eso es todo amigos! … ¡Tu cinemagraph está listo para sorprender a tus clientes!

¿Listo para asombrar al mundo con tu trabajo? ¡Crea tu porfolio online con Wix!