Cómo crear y agregar cinemagraphs en WordPress

¿Quieres aprender a crear y agregar cinemagraphs en tus publicaciones de WordPress? Los cinemagraphs son imágenes con una parte o área en movimiento mientras el resto de la imagen permanece quieta. Estas imágenes son muy atractivas y agregan un elemento narrativo a tus artículos. En este artículo, te mostraremos cómo crear y agregar cinemagraphs fácilmente en WordPress.

¿Qué son los cinemagraphs?

Los cinemagraphs son típicamente imágenes GIF donde una pequeña parte de la imagen se mueve mientras el resto permanece quieto. Se ven muy cinematográficos, de ahí el nombre cinemagraphs.

Agregan un elemento narrativo a las imágenes, lo que las hace más atractivas. Son particularmente útiles cuando acompañan contenido extenso, un episodio de podcast o una historia de audio.

Crear cinemagraphs es un poco diferente a los GIFs normales. Sin embargo, si tienes las herramientas adecuadas, con un poco de esfuerzo y práctica podrás crear cinemagraphs impresionantes a partir de tus propios videos.

Dicho esto, veamos cómo crear y agregar cinemagraphs fácilmente en WordPress.

Creación de cinemagraphs a partir de videos

Para empezar, necesitarás los siguientes elementos:

Un pequeño clip de video que deseas convertir en un cinemagraph
Adobe Photoshop
Tu tiempo, paciencia y creatividad

Empecemos.

Primero necesitas preparar tu video. Puedes usar una herramienta de edición de video como iMovie para recortar el video al clip mínimo que necesitas para el cinemagraph.

A continuación, necesitas abrir Photoshop e importar tu video en capas haciendo clic en el menú Archivo » Importar » Escenas de video a capas.

Selecciona tu video y luego haz clic en el botón Aceptar para continuar. Dependiendo del tamaño de tu video, puede tardar un poco en importarse por completo.

Una vez que tu video se importe, verás las escenas del video como capas debajo del panel de capas.

Ahora necesitas seleccionar todas las capas excepto la primera capa (Capa 1).

Ve al menú Capa » Nueva » Grupo a partir de capas o presiona Comando + G (CTRL+G en Windows) para agregar las capas a un grupo.

A continuación, necesitas seleccionar el grupo y ir a Capa » Máscara de capa » Mostrar todo para agregar una máscara al grupo.

Después de agregar la máscara, presiona las teclas Comando + I (Ctrl + I en Windows) para invertir el color de la máscara.

Ahora establece el color de primer plano en blanco y luego haz clic en la herramienta pincel. Necesitas usar la herramienta pincel para resaltar el área que deseas mostrar en el bucle.

Después de eso, ve a Ventana » Línea de tiempo para abrir todas tus capas en formato de animación.

Notarás que todas las escenas aparecen transparentes en la línea de tiempo, excepto la primera escena.

Para cambiar eso, selecciona la primera capa (Capa 1) en el panel de capas y haz clic en el ícono Unificar visibilidad de capa y luego presiona el botón Coincidir.

A continuación, haz clic en el ícono de alternancia de la Línea de tiempo y selecciona todas las escenas. Después de eso, haz clic nuevamente en el ícono de alternancia para elegir Copiar escenas.

Después de copiar las escenas, haz clic en el ícono de alternancia y selecciona la opción 'Pegar escenas'.

Se te pedirá que elijas un método de pegado. Selecciona 'Pegar después de la selección' y presiona el botón Aceptar.

A continuación, necesitas hacer clic en el ícono de alternancia de la Línea de tiempo una vez más y seleccionar la opción 'Invertir escenas'.

Tu animación cinemagraph está casi lista.

Para guardarla en tu computadora, ve a la opción Archivo » Guardar para Web. Esto abrirá una ventana emergente donde deberás seleccionar el formato GIF y hacer clic en el botón guardar.

Eso es todo, tu Cinematógrafo está listo.

Puedes agregarlo a tu sitio como agregarías cualquier otro GIF en WordPress. Simplemente edita la publicación o página donde deseas agregar el cinemagraph y haz clic en el botón de agregar medios.

Esto abrirá la ventana emergente del cargador de medios, haz clic en el botón seleccionar archivos para cargar el archivo GIF desde tu computadora.

Una vez cargado, haz clic en el botón 'Insertar en la publicación' para continuar.

Ahora verás la imagen en el editor de tu publicación de WordPress.

No olvides guardar o actualizar la publicación. Ahora puedes hacer clic en el botón de vista previa para ver el cinemagraph en acción. Aquí está el cinemagraph que creamos durante este tutorial.

Esperamos que este artículo te haya ayudado a aprender cómo crear y agregar cinemagraphs en WordPress. También te puede interesar nuestra lista de sitios web que ofrecen imágenes gratuitas libres de derechos para usuarios de WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para tutoriales de video de WordPress. También puedes encontrarnos en Twitter y Facebook.