A continuación te enseñare como crear un banner online html5 o en formato de imagen totalmente gratis, usando una aplicación muy potente y fácil de entender.

Aprenderás a diseñar de manera intuitiva un anuncio gráfico que podrás poner por ejemplo en tu página web o implementar en plataformas publicitarias.

---

Anuncio:

¿Como hacer en HTML un banner publicitario?

1. Vamos, lo primero es acceder a la aplicación.

Veras algo como esto:

2. Después, al hacer clic en «Haz un banner» tendrás que registrarte ya sea con tu email o con una cuenta de Facebook o Google.

Si, se que esta es la parte mas difícil para el ser humano, no te preocupes tu banner valdra la pena.

4. Ahora no se porque pero hay que decir si somos diseñadores, marketers, entre otras opciones (conspiración sobre trata de datos ON).

Aquí viene lo bueno, toca elegir si quieres crear un banner único o un set completo de un solo golpe (en tiempo real).

En este caso se elegira crear uno solo (perdona si querias elegir la otra opción).

Lo siguiente es elegir el tamaño (hay que mencionar que tenemos configurados algunos para Facebook Ads).yo elegire uno de los estandares: 160×600 (skyscraper).

Ahora vamos a decidir entre una plantilla (trabajo presideñado) o crear un diseño desde 0.

En mi caso elegiré un prediseño para solo modificar un poco su contenido.

5. Bien, ya estaremos dentro del editor. Se ve complejo, pero la verdad no lo es.

Un anuncio estático contara con un único slide, el cual contiene todo el contenido, el texto, el fondo, etc en forma de presentación.

Solo serán mas slides al crear un diseño animado. Así se mantiene el modelo de presentación: Primero un fondo, luego aparece un texto y mas tarde un botón.

Nosotros podemos crear, borrar o editar los slides que queramos, si lo que escogimos en el paso anterior fue una plantilla esta ya tendrá algunos.

Si deseamos modificar algún elemento en el banner, solo basta con seleccionarlo y e ir a las opciones de la derecha. Si queremos cambiar su posición solo se arrastra al lugar que se quiere.

Igual, añadir nuevo contenido al banner es muy simple, pues las opciones están en la parte superior. Ya sea un texto, una imagen, un clipart, etc.

En las configuraciones (encontradas en la parte derecha) podemos:

• Cambiar colores e imágenes de elementos.
• Alineaciones y tipos de letra para los textos.
• Añadir/editar animaciones (antes y después).
• Poner/eliminar acciones de comportamiento.
• Un largisimo «etc».

En cuanto al fondo de base (o universal) del anuncio publicitario, este se puede modificar si nos vamos a la configuración del «stage». Allí también se puede crear la URL de salida que sera el enlace oficial (por decirlo asi) del banner.

Algo que hay que destacar es que bannersnack cuenta con una gran colección de contenido, cliparts, imágenes en stock, plantillas de botones, etc.

La verdad es que no tendrás que utilizar ningún servicio o banco externo para añadirle cosas de calidad a tu banner.

Hay que decir que solo basta un poco de exploración para poder «agarrarle la onda a esto «, pues el editor no es nada del otro mundo.

De todas maneras, bannersnack cuenta con un canal en YouTube donde puedes enriquecer aun mas estos conocimientos.

Igualmente como se vaya mejorando la aplicación, iré con tiempo actualizando el articulo. Para que sea su referencia de ayuda en español.

Publicación:

Si ya hemos concluido la edición de nuestro trabajo es hora de que salga del horno, para ello solo basta con hacer clic en «Save».

Al continuar estaremos en una página apreciando el resultado, junto con opciones de salida. Podemos descargar nuestro banner en formato de imagen (png, jpg o gif), o bien incrustarlo en una página web mediante un simple código, esta es la opción recomendada pues empleara las funciones HTML5.

Bien, ya sabes casi todo. Pero de hecho también puedes entrar en su academia oficial de creación de anuncios gráficos para aprender mas: www.bannersnack.com/banner-design-academy/

Espero te haya gustado este gran post, si sirve se que lo compartirás 🙂

Cualquier duda o problema que te pueda surgir deja un comentario.