¿Cómo hacer un banner en Adobe Animate?

Contenido del Bootcamp Dirigido por: | Última modificación: 24 de septiembre de 2024 | Tiempo de Lectura: 2 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Adobe Animate es una de las herramientas básicas para diseñadores gráficos. Se enseña para poder hacer elementos interactivos y gifs animados para cualquier tipo de plataforma. Una de las ventajas de Adobe Animate es que nos permite crear banners animados directamente para la web. En este post te enseñamos cómo hacer un banner en Adobe Animate. 

Cómo hacer un banner en Adobe Animate

Antes de empezar te recomendamos tener todos los archivos de imágenes que vas a usar listos para que, en el momento de tener el flujo de trabajo en el software, todo sea más fluido.

Crea un archivo

Antes de empezar con cómo hacer un banner en Adobe Animate, debes crear un nuevo archivo en Animate. En el menú principal, haz clic en crear nuevo y te saldrá una ventana. Aquí te recomendamos ir directamente a los preestablecidos de anuncios, los cuales ya tendrán los ajustes que puedas necesitar para hacer el banner.

Importar contenido

Si has creado tus elementos en Adobe Illustrator o Photoshop, será mucho más fácil. Solo tendrás que arrastrar al área de trabajo los elementos con los que vas a trabajar.

Ya tenemos todos los elementos que necesitamos en el área de trabajo separado por capas.

Organizar los elementos

Antes de poder animar hay que organizar los elementos de manera que puedas animarlos, para esto debes convertirlos en símbolo haciendo clic izquierdo sobre ellos. Te saldrá un cuadro de texto y puedes ponerle nombre.

Una vez los convierten en símbolos, puedes empezar a organizarlos de la forma que quieres que se vea en el primer frame

En el primer frame solo podemos ver las nubes. Recuerda que para mover los objetos debes seleccionarlos con la primera flecha de la barra de herramientas

Empieza a animar

Haz clic en el timeline encima de los cuadrados y estima cuántos frames necesitas para mover el siguiente elemento y muévelo despacio. Para poder poner los keyframes, haz clic derecho y selecciona insertar fotograma clave.  

Crea una interpolación

🔴 ¿Quieres entrar de lleno al Marketing Digital? 🔴

Descubre el Bootcamp en Marketing Digital y Análisis de Datos de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Marketing Digital y Análisis de Datos por una semana

En el proceso de cómo hacer un banner en Adobe Animate, la interpolación es la forma de que tus keyframes se conviertan en animación. Una vez ya tienes los keyframes de todos tus elementos, arrastra el cursor por todos los keyframes y selecciónalos.

Después das clic derecho, crear interpolación clásica y se creará en morado en tu línea de tiempo.

Si quieres visualizar tu animación, puedes dar control+enter en tu teclado y se abrirá una pestaña en tu buscador. 

HTML5

El banner se exportará en un archivo de HTML canvas, para que puedas agregarlo a cualquier sitio web que necesites. Para hacer esto lo primero que debemos hacer es ir a archivo y configuración de publicación.

Una vez seleccionado saldrá un cuadro de texto, aquí puedes modificar lo que necesites dependiendo de tu banner. Le das a aceptar y puedes ir a publicar. Una vez publicado, en la carpeta en la que tengas guardado tu proyecto te saldrá el archivo .js, que podrás llevar al sitio web que necesites. 

¡Ya tienes un banner!

Ya que sabes cómo hacer un banner en Adobe Animate, puedes empezar a hacer otros contenidos para tus campañas publicitarias. En nuestro Bootcamp de Marketing Digital y Análisis de Datos te daremos las herramientas que necesitas para planificar un plan de marketing exitoso. ¡Inscríbete!

Guillermo Yuste

Consultor Data Analytics en Power Dashboard & Coordinador del Bootcamp en Marketing Digital y Análisis de Datos.

Posts más leídos