Creating Cinemagraphs For Your Wordpress Site

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 un área en movimiento mientras que el resto de la imagen permanece inmóvil. Estas imágenes son muy atractivas y agregan un elemento de narración a sus artículos. En este artículo, le mostraremos cómo crear y agregar fácilmente cinemagraphs en WordPress.

¿Qué son los cinemagraphs?

Los cinemagraphs suelen ser imágenes GIF en las que una pequeña parte de la imagen se mueve mientras el resto permanece quieto. Se ven muy cinematográficos, de ahí el nombre de cinemagraphs.

Vista Previa De Cinemagraph
Añaden un elemento de narración a las imágenes, lo que las hace más atractivas. Son especialmente útiles cuando se acompañan de contenido extenso, un episodio de podcast o una historia de audio. Crear cinemagraphs es un poco diferente de los GIF normales. Sin embargo, si tiene las herramientas adecuadas, con poco esfuerzo y un poco de práctica, podrá crear impresionantes cinemagrafías a partir de sus propios videos. Dicho esto, echemos un vistazo a cómo crear y agregar fácilmente cinemagraphs en WordPress.

Crea cinemagraphs a partir de videos

Para comenzar, necesitará lo siguiente:

  • Un pequeño videoclip que desea convertir a cinemagraph
  • Adobe Photoshop
  • Tu tiempo, tu paciencia y tu creatividad
  • Empecemos. Primero necesitas preparar tu video. Puede usar una herramienta de edición de video como iMovie para recortar el video en un clip mínimo que necesita para cinemagraph. Luego, debe abrir Photoshop e importar su video en capas haciendo clic en el Archivo »Importar» Fotogramas de vídeo en 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 llevar un tiempo importarlo por completo.
    Importar Video A Capas
    Una vez que se importe su video, verá los fotogramas de video como capas debajo del panel Capas.
    Capas Importadas De Video
    Ahora debe seleccionar todas las capas excepto la primera capa (capa 1). Ir a Capa »Nuevo» Grupo de capas o presione Comando + G (CTRL + G en Windows) para agregar capas a un grupo.
    Capas Agrupadas
    Luego debe seleccionar el grupo e ir a Capa »Máscara de capa» Mostrar todo para agregar una máscara al grupo.
    Revela Todo
    Después de agregar la máscara, presione Comando + I (Ctrl + I en Windows) para invertir el color de la máscara. Ahora establezca el color de primer plano en blanco y haga clic en la herramienta Pincel. Debe utilizar la herramienta Pincel para resaltar el área que desea mostrar en el bucle.
    Cepille Las Partes Móviles Para Resaltarlas
    Después de eso, ve a Ventana »Línea de tiempo para abrir todas sus capas en un formato de animación. Notará que todas las imágenes aparecen transparentes en la línea de tiempo, excepto la primera imagen.
    Cronología
    Para cambiar esto, seleccione la primera capa (Capa 1) en el panel de capas y haga clic en el icono Mostrar visibilidad de capa, luego presione el botón Coincidir.
    Unifica La Visibilidad
    Luego haga clic en el ícono de alternancia de la línea de tiempo y seleccione todas las imágenes. Después de eso, haga clic en el botón de alternancia nuevamente para elegir Copiar imágenes.
    Copiar Marcos
    Después de copiar los marcos, haga clic en el botón de alternancia y seleccione la opción «Pegar marcos». Se le pedirá que elija un método de unión. 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 de alternancia de la línea de tiempo una vez más y seleccionar la opción «Invertir imágenes».
    Marcos Inversos
    Tu animación de cinemagraph está casi lista. Para guardarlo en su computadora, vaya a Archivo »Guardar para Web opción. Aparecerá una ventana emergente en la que debe seleccionar el formato GIF y hacer clic en el botón Guardar.
    Guardar Como Gif
    Eso es todo para lo que está preparado su cinematógrafo. Puede agregarlo a su sitio como lo haría con cualquier otro GIF en WordPress. Simplemente edite la publicación o la página donde desea agregar el cinemagraph y haga clic en el botón Agregar medios.
    Sube Tu Gif De Cinemagraph En Wordpress
    Esto abrirá la ventana emergente de descarga de medios, haga clic en el botón Seleccionar archivos para descargar el archivo GIF desde su computadora. Una vez descargado, haga clic en el botón «Insertar en publicación» para continuar. Ahora verá la imagen en su editor de publicaciones de WordPress. No olvide guardar o actualizar el mensaje. 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
    Esperamos que este artículo te haya ayudado a aprender a crear y agregar cinemagraphs en WordPress. También puede consultar nuestra lista de sitios web que ofrecen imágenes libres de derechos para los usuarios de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

    Leave a Reply