Examinamos ahora una moda que, según nuestras estimaciones, volverá pronto: las imágenes con movimiento, también llamadas cinemagraphs o cinemagrafías. Estas fotos te dejan con la boca abierta. Con las maniobras correctas también tú puedes dar vida a las fotos sin tener que pagar demasiado. Aquí te explicamos cómo puedes otorgar movimiento a tus fotos y en qué canales publicitarios puedes emplearlas de forma óptima.
¿Ha pasado ya de moda el clásico GIF? Una cosa está clara: algunas modas vuelven una y otra vez. Por ello, volvemos la vista hacia un tipo diferente y muy prometedor de imágenes con movimiento. Este irrumpió en escena hace ya algunos años y parece que va a volver dentro de muy poco, nos referimos a los cinemagraphs o cinemagrafías. Este tipo de imágenes se mueven en bucle, al igual que los GIF, pero aparte de eso no tienen mucho en común con los triunfadores en las redes sociales. Los cinemagraphs son fotos de gran calidad que te dejan con la boca abierta tras mirarlas un instante. Es por ello que los cinemagraphs tienen tanto potencial para tu publicidad.
Contenido:
- Para tu marketing: publicitar de manera profesional con imágenes con movimiento
- Crea por tu cuenta tus imágenes con movimiento: comprobación de herramientas
Cinemagraph vs. GIF
En los cinemagraphs se mueve solo una parte de la foto, mientras que el resto permanece fijo. Por ello, estas imágenes tienen aspecto de verdaderas «imágenes con movimiento», y no de vídeos. Contrariamente a los GIF, los cinemagraphs contienen muchos más colores, por lo que dan una impresión de mucha más calidad.
Lo más impresionante en las imágenes con movimiento: uno está, por ejemplo, mirando a una mujer que toma el sol en la piscina, y de repente pasó algo en la foto.
Las imágenes con movimiento como cinemagraphs no son algo nuevo. Ya se empezaron a producir en 2011 de forma profesional para la publicidad de conocidas marcas. Por ejemplo los creadores Jamie Beck and Kevin Burg las utilizaron en la Semana de la Moda de Nueva York de ese año. Y es que los cinemagraphs tienen un verdadero potencial para diseñar campañas publicitarias interesantes en la red sin necesidad de producir costosos vídeos.
Usar profesionalmente imágenes con movimiento
A continuación te explicamos cómo producir imágenes con movimiento y la tecnología que se esconde tras ellas. Pero hay algo que ya podemos desvelarte: la producción de imágenes con movimiento es mucho menos costosa que los laboriosos vídeos publicitarios grabados. Pero también en los cinemagraphs se mueve algo en la imagen que atrae y atrapa la atención del espectador. El tamaño del fichero con las imágenes en movimiento es mucho menor que el de un vídeo publicitario, lo que hace que se puedan reproducir de forma más rápida en muchos sitios web o blogs. Esto es algo muy importante, ya que los cinemagraphs funcionan mejor cuando se reproducen inmediatamente en bucle continuo.
Importante: aunque se hable de imágenes con movimiento, en realidad se suele tratar de ficheros de vídeo. Para reproducir las imágenes con movimiento en bucle continuo es mejor cambiar el formato de vídeo al guardarlo a archivo GIF, ya que este formato reproduce el vídeo automáticamente una y otra vez.
¡Pero cuidado! Un archivo MP4 puede reproducir innumerables colores, un GIF solo 256. Esta pérdida de calidad suele percibirse claramente. Por ello, al integrarlas en tu sitio web, blog o similares; procura no convertir el archivo en un GIF e integrar la función loop (bucle) a través del código de incrustación.
Sitios web y blogs
Las imágenes con movimiento en el encabezado de un sitio web son una estupenda posibilidad para atraer la atención del visitante sin sobreestimularlo. También las presentaciones de productos se pueden diseñar de forma mucho más atractiva con cinemagraphs, dependiendo naturalmente del producto y el sector. Esta ventaja también se puede aprovechar en blogs, aunque hay algo que hay que tener siempre en cuenta: menos es más. Si hay movimiento en toda la página y aparece publicidad en cada barra de la misma se pierde el efecto sorpresa.
Ejemplos de presentación de productos:
Fuente: flixel.com/cinemagraphs/advertising – CinePix
Fuente: flixel.com/cinemagraphs/advertising – CinePix
Integración técnica: la imagen con movimiento se puede integrar a través del elemento de vídeo HTML. Las cualidades para «Autoplay» y «Loop» deben estar en el código y se debe comprobar la compatibilidad con diferentes navegadores. También WordPress permite integrar imágenes con movimiento sin ningún problema. Lo más fácil es cargar la imagen con movimiento en YouTube o en otra plataforma como flixel.com (una página especializada en la producción y difusión de cinemagraphs) para posteriormente integrarla en tu página. Y es que esta última página te ofrece, por ejemplo, códigos de incrustación ya listos para copiar y pegar que son reproducidos en Autoplay y Loop.
Código de ejemplo para incrustar una imagen con movimiento como elemento HTML:
<video width="320" height="240" autoplay loop> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Código de ejemplo para incrustar una imagen con movimiento de la galería de medios de WordPress:
[ video width="1200" height="800" mp4="https://www.onlineprinters.co.uk/magazine/wp-content/uploads/2018/09/Test_Wasser -1200px-25fps-2.mp4" loop="on" autoplay="on" ] [ /video ]
(Note: Please delete the blanks before and after the parentheses before using this code.)
Código de ejemplo para incrustar una imagen con movimiento en YouTube:
<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/DWamwL9e3EY?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=DWamwL9e3EY" frameborder="0" allowfullscreen></iframe>
Código de ejemplo para incrustar una imagen con movimiento en Flixel:
<div class="flx-embed"><div style="position:relative; height:0; padding-bottom:56.25%; width:100%"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="https://media.flixel.com/cinemagraph/tpaqkloxud1mvjq08bfh?hd=false" frameborder="0" allowfullscreen allow='autoplay'></iframe></div></div>
Publicidad en redes sociales, en pantalla o Canvas
Lo que tiene movimiento es interesante Esto se aplica a lo que se publica en las redes sociales. Las imágenes con movimiento pueden usarse tanto en publicidad en pantallas y canvas en Facebook o Instagram, como en interesantes contenidos en su estrategia La ventaja de este tipo de imágenes frente a los vídeos: los cinemagraphs son considerados un poco más sencillos que los vídeos, ya que la vista recibe menos movimientos simultáneos. Por una parte esto es más agradable para la vista y, por otra parte, es algo muy interesante de ver. Además, los contenidos en las redes sociales deben ser entretenidos y suponemos que, si no te parecieran emocionantes estas imágenes con movimiento, no habrías leído hasta aquí.
View this post on Instagram
Integración técnica: con la función Autoplay de Facebook, Instagram y compañía, los vídeos o las imágenes con movimiento se ponen en marcha sin tener que hacer clic en la foto. Hoy en día también es posible configurar fotos de perfil y publicidad en Facebook con imágenes con movimiento. Los nuevos dispositivos móviles pueden también reproducir cinemagraphs sin problemas. Pero asegúrate de que tu imagen se reproduzca en Loop para que el efecto del movimiento del motivo se vea claramente. Si la imagen con movimiento dura solo tres segundos, es posible que el espectador no se dé cuenta del efecto.
Boletín electrónico
También en este ámbito son muy gratificantes las imágenes con movimiento. El gigante de las series Netflix, por ejemplo, ha utilizado imágenes con movimiento en el boletín electrónico para el comienzo de la tercera temporada de «House of Cards» De esta forma hay más probabilidades de que el lector recuerde que la temporada va a comenzar y muchos hagan clic en el trailer.
Fuente: blog.flixel.com
Integración técnica: si la imagen con movimiento debe ser integrada en un boletín electrónico, en casos excepcionales puede ser útil convertirla en un formato GIF (aunque normalmente hay que evitarlo) para que siga teniendo un tamaño pequeño. El archivo GIF puede integrarse normalmente con el código de incrustación de imágenes y el tamaño del archivo evitaría que los contenidos del boletín tardaran demasiado en cargarse. Sin embargo, hay que tener cuidado de que no se pierda mucha calidad y de que, a pesar de todo, la imagen con movimiento siga teniendo una gran calidad.
Código de ejemplo para incrustar una imagen con movimiento en el boletín (guardado como GIF):
<img src=“XXXXX.gif“ width=“600“ height=“340“ alt=“xx“ border=“0“ hspace=“0“ vspace=“0“>
Si la imagen con movimiento se incrusta como vídeo con muchos más colores y, con ello, el tamaño del archivo aumenta, es imprescindible comprobar previamente si la imagen con movimiento afecta al rendimiento de los contenidos al abrir el boletín, tanto en la variante para el escritorio como para la de dispositivos móviles.
Crea por tu cuenta tus imágenes con movimiento: comprobación de herramientas
Para dar vida a una imagen se necesita un buen ojo y, dependiendo de la herramienta, una conexión constante a Internet. Algunas herramientas ofrecen incluso una edición en línea. Dependiendo de la herramienta se necesita como material de partida una imagen o un vídeo.
Plotagraph
Contrariamente a otras herramientas, con este proveedor se puede crear una imagen con movimiento a partir de un archivo de imagen. Aquí también se pueden editar en línea las imágenes. En Plotagraph (más bien en «Plotaverse») te puedes registrar gratuitamente para tener una primera impresión de la herramienta. La edición es muy rápida, al menos no hay mucho que producir previamente para ello. Solo hay que tomar o buscar una imagen adecuada y cargarla en la herramienta. Con ayuda de un pincel se puede determinar en el editor qué partes de la imagen deben quedar sin movimiento.
Con las flechas (naranjas y azules) puedes determinar en qué dirección se deben mover los píxeles de la imagen. Los llamados «estabilizadores» ayudan a definir con exactitud la animación en la imagen. En este ejemplo se han colocado intencionadamente estabilizadores en las nubes para conseguir que estas se muevan de forma diferenciada.
La herramienta calcula automáticamente el movimiento de los píxeles de la imagen. Sin embargo, también puedes influir en la duración del movimiento automáticamente calculado. Cuanto más corta sea la duración de la imagen con movimiento, más rápidamente se moverán los puntos de la imagen definidos. A continuación se puede exportar el proyecto. Si no has pagado por la versión profesional, recibirás un archivo MP4 con una marca de agua. En la versión de pago puedes elegir entre los formatos MOV, JPEG seg, PNG seq, animated PNG y GIF.
Una de las ventajas de esta herramienta es que puedes comprobar en cualquier momento la edición con el botón de Play en la parte inferior central, ya que con este botón puedes reproducir la imagen en bucle continuo. De esta forma puedes notar rápidamente si hay inconsistencias y movimientos poco naturales.
Resumen: el rendimiento de la aplicación en línea es muy bueno también en el smartphone. Si decides comprar la versión profesional, es muy útil descargar la versión para escritorio de la aplicación. Sin embargo, esta herramienta no puede dar vida de forma natural a todas las imágenes, ya que no se puede influir de forma exacta en los movimientos de cada uno de los puntos de la imagen.
La herramienta alcanza sus límites, como muy tarde, cuando se deben mover en primer plano elementos como los rayos del sol, mientras que en el fondo se deben quedar quietos elementos como unas montañas. Sin embargo, si se pueden dividir de forma clara los movimientos en el primer plano y en el fondo de la imagen (como por ejemplo el mar y el cielo), se pueden crear rápidamente imágenes con movimiento con Plotagraph. Y todo ello partiendo de una sola foto. Los motivos que fluyen, como las nubes o el mar, o simples gráficos, son muy adecuados para esta herramienta.
Flixel
El programa Cinemapraph Pro by Flixel está especialmente concebido para crear cinemagraphs. Aquí también tienes la oportunidad de probar primero la herramienta de forma gratuita. La mayor y más importante diferencia con Plotagraph es que aquí se trabaja con material de vídeo. Eso significa que los movimientos en la imagen tienen un aspecto mucho más natural, ya que son movimientos reales. Sin embargo, el vídeo debe ser previamente grabado cumpliendo determinadas condiciones.
Para la imagen con movimiento se debe grabar un vídeo con un trípode. Los márgenes de los vídeos no deben cambiar, sino solo los modelos o el motivo en la imagen. Puedes decidir libremente qué se va a mover en la imagen. Antes de grabar el vídeo debes tener claro qué quieres realizar en tu cinemagraph. Así sabrás qué instrucciones debes darles a los modelos o dónde colocar la cámara.
En el tutorial para principiantes de Flixel se quiere dar vida a una escena en la que el hombre de la izquierda sorbe de la taza y la mujer de la derecha sirve el té.
Una vez que el vídeo está cargado en Cinemagraph Pro, debes elegir primero un fragmento del vídeo y determinar en él una imagen fija. Esta imagen fija es el material de partida para el cinemagraph.
El siguiente paso es crear la máscara. Esto significa marcar con un pincel en la imagen fija elegida las zonas que más tarde deberán tener movimiento.
Mediante la recientemente creada máscara, ahora relucen todos los lugares del fragmento de vídeo sobre los que has pasado el pincel. El resto de la imagen corresponde a la imagen fija elegida.
Para que el movimiento en la imagen sea fluido, se debe elegir cuidadosamente el fragmento de vídeo. Con las configuraciones «Bounce» o «Repeat» puedes reproducir el vídeo tras la imagen fija hacia adelante, hacia atrás y luego de nuevo hacia adelante o una y otra vez desde el principio. También se puede determinar la duración de la repetición.
Resumen: lo más importante aquí es la coordinación entre el material de vídeo, el fragmento de vídeo elegido y la imagen fija del mismo. Este programa está diseñado de forma muy clara y está dotado de todas las herramientas necesarias para la edición. Especialmente las opciones de exportación permiten preparar de forma óptima el cinemagraph para las redes sociales o incluso para publicidad en Facebook. Con Cinemagraphs Pro se pueden crear imágenes con movimiento verdaderamente realistas sin verse agobiado con demasiadas funciones para la edición. Si quieres usar profesionalmente imágenes con movimiento, creemos que esta herramienta es una opción rentable.
Adobe Photoshop
Si ya dispones de Creative Suite, no necesitas adquirir un programa aparte para imágenes con movimientos. Puedes también crearlas con Photoshop C6 o una versión posterior. Simplemente hay que utilizar algún pequeño «truco» ya que, en realidad, Photoshop no está concebido para editar vídeos.
Pero a partir de Photoshop C6 también se pueden abrir vídeos y, en la parte inferior del programa, aparece una barra de tiempo. El infografista alemán DomQuichotte, famoso por sus tutoriales en fx-ray.com, muestra de forma muy clara en un tutorial para Adobe cómo crear rápidamente una imagen con movimiento en Photoshop. Desgraciadamente este tutorial no está disponible en español. En resumen se trata (al igual que con el programa Cinemagraph Pro de Flixel) de grabar un vídeo adecuado y de determinar un fragmento apropiado del mismo. Una vez que hayas elegido este fragmento, puedes extraer de él una imagen fija. Las palabras mágicas son «máscaras de capa». Con las máscaras de capa puedes determinar en esta imagen fija en qué zonas se verá el vídeo. Y es que la superposición de capas con archivos de vídeo en Photoshop funciona exactamente igual que con las capas de imagen. Por ello, lo más importante es poder ver siempre la imagen y ver el vídeo solo en los lugares elegidos.
La ventaja de editar en Photoshop: si transformas la imagen fija elegida en un objeto inteligente, sigues teniendo todas las posibilidades para editar la imagen. Puedes editar tu imagen con movimiento de la misma forma en la que editarías tus otras imágenes de productos o de sesiones fotográficas, ya sea con filtro RAW o con otras aplicaciones.
Interesante: en Photoshop no solo puedes transformar vídeos en imágenes con movimiento. También puedes editar, con ayuda de la barra de tiempo, una simple foto para que se mueva. Sin embargo, con este método tendrás menos flexibilidad, ya que se intenta simular un movimiento con máscaras y transformaciones (por ejemplo, aumentando el tamaño). Al igual que ocurre en Plotagraph, aquí se obtienen los mejores resultados con motivos que fluyen, como nubes o agua.
Resumen: esta variante de edición te resultará muy sencilla si ya estás familiarizado con Photoshop y más aún si ya has trabajado con la barra de tiempo en el programa. Y es que, además de crear la imagen con movimiento, puedes utilizar en la imagen todos los filtros y herramientas de retoque. Así que no necesitas comprar ningún nuevo programa y no pierdes flexibilidad.
