¿Cómo hacer una animación con imágenes?

Animar iconos

Una opción que a menudo se pasa por alto son las imágenes o vídeos animados. Son geniales porque pueden explicar un punto en cuestión de segundos. Además, captan la atención y ayudan a convertir a los espectadores en clientes potenciales y compradores.

Una imagen, un GIF o un vídeo animados pueden parecer difíciles de crear, pero en realidad no hace falta gastar mucho presupuesto para añadir este tipo de contenido visual a su estrategia de marketing. Echa un vistazo a las siguientes herramientas que te permiten crear fácilmente imágenes y vídeos animados.

Esta herramienta es en realidad la que ha inspirado todo el artículo. WhatFix te permite crear flujos rápidos que muestran los pasos que deben seguir los usuarios. Puedes incrustar el widget en tu página web o enviar a tus usuarios a la versión “en vivo” del enlace que reproducirá todos los pasos en tu página web real.

WhatFix ofrece sus funciones básicas de forma gratuita: Puedes ir y probar a crear esos flujos ahora mismo. Tiene una versión para empresas que tiene la opción de crear flujos privados, exportar flujos y más.

Los pasos son fáciles de seguir, y la interfaz bastante intuitiva. Puedes editar los GIFs

Crear una imagen

Un GIF, o “Graphics Interchange Format”, es un formato de archivo de imagen comprimido que permite la animación. Hay muchas maneras de crear un GIF, pero Photoshop es rápido y fácil, con herramientas incorporadas para la manipulación de imágenes y la animación.

Al igual que la animación clásica, un GIF animado se compone de una serie de imágenes fijas reproducidas secuencialmente para crear la ilusión de movimiento. Busca un GIF en Internet y arrástralo a Photoshop, y verás los distintos fotogramas que componen la animación. Estos fotogramas son los que vamos a construir en este tutorial para animar un GIF de anuncio publicitario.

Prepara tu documento con antelación. Incluso si tu única ambición es crear un GIF compartible para tus amigos en las redes sociales, dejar que el tamaño de tus fotos o vídeo dicte el tamaño de tu documento puede hacer que el archivo sea más grande de lo que necesitas, lo que se traduce en un GIF de baja calidad. En general, un tamaño de entre 600px y 800px está bien para una imagen cuadrada.

Vaya a Archivo > Scripts > Cargar archivos en la pila y seleccione el botón Examinar en la ventana Cargar capas que aparece. Esto hace que aparezca la ventana del Finder/Explorador donde puedes buscar tus archivos y seleccionar todos los que necesites. Cuando hayas terminado, haz clic en Abrir y luego en Aceptar en la siguiente ventana. Los archivos se importarán a un documento separado, desde el que podrás seleccionar todas las capas y arrastrarlas a tu documento de trabajo.

Aplicación para dar vida a las imágenes

Los diseños animados son bastante eficaces para captar nuestra atención, así que aprovecha esta herramienta para hacer que un diseño destaque entre los demás. Selecciona entre las opciones de animación de fotos, como el zoom, la panorámica, el desenfoque o el fundido, para presentar tu foto de forma cautivadora. Si te quedas sin ideas, explora la biblioteca de plantillas de Creative Cloud Express, cargada con miles de ejemplos diseñados por profesionales para dar un empujón a tu creatividad. Elige una plantilla, mézclala con tus propias fotos y tu toque personal, y publícala en cuestión de minutos.

Cargue su imagen: cargue la imagen que desee de su biblioteca de fotos o seleccione una imagen de archivo para incluirla en su diseño.Anime su foto: seleccione la herramienta de animación y elija entre un puñado de opciones de animación creativa. Cambia de una a otra para encontrar el efecto que mejor realce el ambiente de tu diseño.Realiza ediciones adicionales.Aprovecha las herramientas creativas a tu alcance. Añade iconos, coloca imágenes de stock gratuitas, escribe tu mensaje, personaliza tus estilos de fuente, aplica un filtro y, a continuación, añade colaboradores a tu proyecto para obtener comentarios sobre tu diseño.Guarda y descarga.Descarga al instante tu imagen animada para compartirla en tus canales digitales y plataformas de redes sociales. Creative Cloud Express guarda tus diseños, para que siempre puedas volver atrás y hacer cambios adicionales si lo necesitas en el futuro.

Animar una imagen en línea

Vamos a crear un banner web muy sencillo. Vamos a empezar con una nueva imagen de 468×60 px. Usar el blanco como color de fondo. Crear una nueva capa transparente. Selecciona toda la imagen con Ctrl+A y rellénala de negro (Ctrl+,). Reduce la selección en 1 px (Selección → reducir) y elimina la selección con Ctrl+K. Hemos creado un marco de 1 px alrededor de nuestro banner.

Ahora es el momento de poner nuestro logo o la imagen del tema principal en el banner. Yo he preparado una flor enmascarada que veis en la imagen de la izquierda. Acabo de pegar la flor debajo del marco del borde, he usado alfa para la selección, he creado una capa vacía debajo de ella y he rellenado la selección con negro usando Ctrl+,. Después desenfocé la sombra usando desenfoque gaussiano RLE y la desplacé 2px hacia abajo a la derecha. No pude resistirme a añadir el efecto de entrelazado usando Filtros → Renderizado → Rejilla y una máscara de capa. En esa máscara de capa apliqué un degradado en b/n, para que la izquierda de la flor no se entrelace.

Ahora estamos listos para el trabajo de animación propiamente dicho. Vamos a crear un banner que consiste en, digamos, tres líneas de texto que se anima. Cada fotograma consistirá en la imagen de la flor y acompañada de algún texto. No quiero que esto sea aburrido, así que vamos a hacer tres cuadros. El primer paso será, naturalmente, copiar nuestra imagen aplanada dos veces utilizando el botón de duplicar capa en la ventana de capas.