Todo lo que tu página web necesita

Como diseñar un banner HTML – Online y gratis

Diseñar banner online
El mejor creador web

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.

Aprenderas a diseñar de manera intituiva un anuncio grafico que podras poner por ejemplo en tu página web o implementar en plataformas publicitarias… No sin antes mostrarte banners hechos con la aplicación.

Primer ejemplo sencillo de banner:

 

¿Como hacer en HTML un banner publicitario?

En 2 artículos pasados hablamos sobre el mismo tema. Mostré 2 herramientas fáciles, pero muy limitadas para crear uno. Debido a esto me tome la tarea de encontrar otra aplicación mas potente, con mas posibilidades, pero igual de intuitiva.

En mi busqueda fue inevitable toparme con el siguiente pez gordo:

bannersnackEsta herramienta proporciona un increíble y completo editor HTML para crear diseños publicitarios.

Algunos de sus clientes son ni mas ni menos que Vadafone, Jimdo y Lego. Al igual que muchas otras pymes y y un enorme número de particulares.

Segundo ejemplo:

¿Como usar este creador de banners?

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

Veras algo como esto:

Constructor de anuncios graficos

2. Despues, al hacer clic en “Haz un banner” tendras que registrarte ya sea con tu email o con una cuenta de Facebook o Google.

Creando cuenta

Si, se que esta es la parte mas dificil 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).

Aqui viene lo bueno, toca elegir si quieres crear un banner unico o un set completo de un solo golpe (en tiempo real).

MIra:  Como Crear y Poner Botones en Tu Web

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).

Tamaño del anuncio

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.

Bannersnack tutorail

Un anuncio estatico contara con un unico slide, el cual contiene todo el contenido, el texto, el fondo, etc en forma de presentación.

Solo seran 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.

Editar y/o mover elementos

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.

Añadir más contenido

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”.

configuración de elementos - bannersnack

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

MIra:  Crear formularios en HTML - Para poner en tu web

Ajustes generales - Stage

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 tendras que utilizar ningun servicio o banco externo para añadirle cosas de calidad a tu banner.

Imágenes stock para anuncios

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, ire 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.

Tener anuncios para Facebook Ads y Google Adwords

Bien, ya sabes casi todo. Pero de hecho tambien puedes entrar en su acedemia oficialde creación de anuncios graficos 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.

Jimdo

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *