Cómo hacer un banner en Adobe Animate

Autor: | Última modificación: 23 de junio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

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: 

pantalla de inicio

En esta ventana 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.

importar elementos

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.

crear simbolos

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

organizar area de trabajo

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

🔴 ¿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

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.  

animar elementos

Crea una interpolación

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.

seleccionar linea de tiempo

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

crear interpolación
interpolación creada

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.

exportar html5

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!

Aprende con nosotros

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!

[email protected]