Cómo crear y agregar Cinemagraphs en WordPress

¿Desea aprender cómo crear y agregar Cinemagraphs en sus publicaciones de WordPress? Los Cinemagraphs son imágenes con una parte o área moviéndose mientras el resto de la imagen permanece quieto. Estas imágenes son muy atractivas y añaden un elemento narrativo a sus artículos. En este artículo, le mostraremos cómo crear y agregar fácilmente cinemagraphs en WordPress.

Creando cinemagraphs para tu sitio de 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.

Vista previa de Cinemagraph

Agregan un elemento de narración de historias a las imágenes, lo que las hace verse más atractivas. Son particularmente útiles cuando se acompaña contenido de larga duración, episodio de podcast o una historia de audio.

Crear cinemagraphs es un poco diferente que los GIF regulares. Sin embargo, si tienes las herramientas adecuadas, entonces con un poco de esfuerzo y algo de práctica podrás crear impresionantes cinegrafías de tus propios videos.

Dicho esto, echemos un vistazo a cómo crear y agregar fácilmente cinemagraphs en WordPress.

Creando Cinemagraphs desde Videos

Para comenzar, necesitará los siguientes elementos:

  1. Un pequeño video clip que desea convertir en cinemagraph
  2. Adobe Photoshop
  3. Su tiempo, paciencia y creatividad

Empecemos.

Primero necesitas tener tu video listo. Puede utilizar una herramienta de edición de video como iMovie para recortar el video a solo el clip mínimo que necesita para el cinemagraph.

A continuación, debe abrir Photoshop e importar su video en capas haciendo clic en Archivo »Importar» Marcos de video a capas menú.

Importa tu video en capas

Seleccione su video y luego haga clic en el botón Aceptar para continuar. Dependiendo del tamaño de su video, puede tomar un poco de tiempo para ser importado por completo.

Video a las capas de importación

Una vez que se haya importado su video, verá los cuadros de video como capas debajo del panel de capas.

Capas importadas de video

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

Ir Layer »New» Group From Layers menú o presione Comando + G (CTRL + G en Windows) para agregar capas a un grupo.

Capas agrupadas

A continuación, debe seleccionar el grupo e ir a Layer »Layer Mask» Reveal All para agregar una máscara al grupo.

Revelar todo

Después de agregar la máscara, presione 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. Debe usar la herramienta Pincel para resaltar el área que desea mostrar en el ciclo.

Cepille las partes móviles para resaltarlas

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

Notará que todos los marcos aparecen transparentes en la línea de tiempo, excepto en el primer cuadro.

Cronología

Para cambiar eso, seleccione la primera capa (Capa 1) en el panel de capas y haga clic en el icono Desvincular Visibilidad de Capa y luego presione el botón Coincidir.

Unificar la visibilidad

A continuación, haga clic en el icono de alternancia de la línea de tiempo y seleccione todos los marcos. Luego, haga clic nuevamente en el botón de alternar para elegir Copiar marcos.

Copiar fotogramas

Después de copiar los marcos, haga clic en el botón de alternar y seleccione la opción ‘Pegar fotogramas’.

Se le pedirá que elija un método de pegado. Seleccione ‘Pegar después de la selección’ y presione el botón OK.

Pegar después de la selección

A continuación, debe hacer clic en el icono Alternar línea de tiempo una vez más y seleccionar la opción ‘Invertir fotogramas’.

Marcos inversos

Su animación cinemagraph está casi lista.

Para guardarlo en su computadora, vaya a Archivo »Guardar para Web opción. Aparecerá una ventana emergente en la que deberá seleccionar el formato GIF y hacer clic en el botón Guardar.

Guardar como GIF

Eso es todo tu cinematógrafo está listo.

Puede agregarlo a su sitio como si agregara otros GIF en WordPress. Simplemente edite la publicación o página en la que desea agregar cinemagraph y haga clic en el botón agregar medios.

Cargue su Cinemagraph GIF en WordPress

Aparecerá la ventana emergente de carga multimedia, haga clic en el botón Seleccionar archivos para cargar el archivo GIF desde su computadora.

Una vez cargado, haga clic en el botón “Insertar en la publicación” para continuar.

Ahora verá la imagen en su editor de publicaciones de WordPress.

No olvides guardar o actualizar la publicación. Ahora puede 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.

Ejemplo de Cinemagraph