Consejos y herramientas gratis para crear banners profesionales en tu tienda online

por Noemí Casas, 15.12.16



Los banners en una tienda online son imprescindibles para comunicar promociones o novedades en una tienda online, ya sea para la campaña navideña, la de rebajas o simplemente anunciar nuevos productos. Pero ¿cómo hacer banners profesionales y sencillos? No hace falta ser un pro de Photoshop, lee nuestra guía para crear banners impresionantes sin pasar horas en ello.

 Básicos para crear un banner eficaz

Antes de lanzarse con el diseño, es importante asegurarse de que tienes todos los ingredientes para crear un banner de éxito:

  • Objetivo claro: El banner debe mostrar un mensaje simple y un solo objetivo, como por ejemplo anunciar una promoción especial o presentar un nuevo producto o colecció
  • Poco texto: Un banner es principalmente visual, así que deberás acortar lo máximo posible el mensaje con una frase que no contenga más de 5 o 6 palabras.
  • Coherencia visual con tu identidad de marca: color, tipo de letra, logotipo… todo debe ir en consonancia con tu empresa y/o tienda online.
  • No más de tres colores: También con el fin de resaltar el mensaje clave, escoge un color brillante sólo para el elemento más importante (por ejemplo el botón de llamada a la acción “Comprar”). El resto de elementos no deben distraer a tus visitantes.
  • Formato correcto de imagen: para que el banner se ajuste correctamente en tu web debes crearlo directamente con las dimensiones correctas. Recuerda que en tu tienda online ePages las dimensiones para el rotador de banners son 1050 x 350 pixeles.
  • Un botón de llamada al acción: El objetivo final del banner es que el visitante clique sobre él, así que asegúrate que tanto el mensaje como el botón animen al cliente a clicar y visitar la siguiente página (y comprar).

Consejo: ¡Pon a prueba tus banners!  Te recomendamos crear varios banners con diseños y mensajes diferentes (aunque sean de la misma campaña) para ver qué funciona mejor o qué prefieren tus visitantes. Puedes probar una versión del mismo banner durante 15 días y otra un poco diferente los siguientes 15 días, y luego comprobar cual obtuvo más clics/resultados (¡no te olvides de tener Google Analytics activado para esto!).

 

Herramientas para crear banners

No hace falta dominar Photoshop para hacer un buen banner. Aquí te dejamos algunas herramientas útiles (y gratis) para crear banners fácilmente y con buen gusto:

Programas online (sin descargar)

Canva

Un software muy sencillo e intuitivo para crear todo tipo de gráficos, muy de moda últimamente. Puedes crear banners con dimensiones y diseños preparados para Redes sociales u otras plataformas o bien hacer uno personalizable.

Fotor

Una herramienta sencilla y divertida con un interfaz muy fácil de utilizar. Además de crear gráficos y banners como Canva, también es útil para hacer retoques de fotos y collages.

Pixlr

Se trata de la versión reducida y online del Photoshop, pero más fácil de usar. Aunque está en inglés puedes hacer retoques de fotos y banners desde cero si conoces cómo funciona Photoshop.

Para escoger tu paleta de colores:

Color Hexa

Esta herramienta te ayuda a combinar colores y ofrece grupos de colores alternativos, complementarios, monocromáticos, etc.

Paletton 

A partir de un color de base, Paletton ofrece una gama de colores a juego o incluso propone una combinación de colores según los utilizados en un sitio web en concreto.

Colorzilla

Se trata de un plugin para Firefox o Chrome con el que se puede detectar el color concreto que se utiliza en una web o diseño (basta con pasar el cursor por encima para grabar el color en concreto). La misma empresa también posee un editor avanzado de CSS (Ultimate Gradient Generator).

Bancos de imágenes

Fotolia: Banco de imágenes de pago, pero con muy buena calidad.

Unsplash: Imágenes gratis sin atribución.

Pexels: Imágenes gratis pero con atribución.

Stocksnap: Imágenes gratis sin atribución.

 

Para editar fotos:

Pixelz:

Esta app está disponible en el App Store de ePages y permite postproducir fotos y eliminar el fondo de ellas, por ejemplo para fotos de producto propias.

 

Cómo crear un banner en 10 minutos con Canva

A continuación te explicamos cómo utilizar Canva para crear un banner rápido pero eficaz, con las dimensiones concretas de tu tienda online ePages:

1. Dirígete a https://www.canva.com/ y regístrate (lo puedes hacer con Facebook o Google para ir más rápido).

2. Haz clic en el botón Crear un diseño y en Usar dimensiones personalizadas (arriba a la derecha). Este paso es el más importante ya que para tu tienda online ePages deberás crear un banner con un tamaño específico.

3. Introduce las dimensiones (1050 x 350 pixeles) y haz clic en Crear.

4. Escoge la plantilla en que quieres basar tu diseño (un solo bloque, dividido, etc). Para nuestro ejemplo escogemos un solo bloque.

4. Escoge o carga una imagen para crear el fondo del banner. Canva te propone varias opciones:

  • Elementos de fondo (fotos, marcos, gráficos, etc. de Canva)
  • Color de fondo
  • Subir una imagen de fondo

5. Si tienes una imagen de fondo, haz clic en la pestaña Subir. Recuerda que cualquier imagen que utilices debe estar libre de derechos o bien debes comprarla en alguno de los bancos que te hemos sugerido. Por su puesto mejor si puedes, utiliza tus propias imágenes.

6. Una vez cargada la imagen, selecciónala y aparecerá en tu banner. Haz doble clic para recortarla si es necesario y ajustar las dimensiones. Un truco para que no se desproporcione es pulsar la tecla Mayúsculas mientras haces la foto más grande.

7. Una vez la imagen está en la posición correcta puedes mejorarla con filtros y opciones para mejorar el contraste, brillo etc.

8. En la pestaña texto puedes utilizar diseños predefinidos que puedes personalizar. Escoge y añade el texto y en el menú superior cambia el color, tipo de letra, tamaño etc.

9. Añade el botón de “llamada a la acción” también con un elemento de texto con forma y personalízalo.

10. Una vez hayas acabado, guarda el diseño en Archivo > Guardar y descarga el diseño final en el botón Descargar, arriba a la derecha (PNG o JPG son los formatos más recomendados).

Una vez ya tienes tu diseño puedes utilizarlo en el rotador de banners de tu tienda online. Para hacerlo dirígete al menú Contenido/Categorías > Vista previa de contenido. En el lugar donde quieras insertar el banner haz clic en el icono Aplicación > Rotador de Banners. Cuando cargues los banners, acuérdate de utilizar el vínculo para dirigir al visitante a la página de la promoción, producto, etc.

Sigue más información de cómo utilizar el rotador de banners mira este videotutorial o lee nuestro artículo sobre Aplicaciones para tu tienda online.

Encuentra el diseño que te inspire

Aunque no tengas la creatividad de un diseñador, puedes inspirarte de como lo hacen otros e internar hacer algo parecido. Recuerda que como te comentábamos, la sencillez es lo más importante ante todo.

¿Cómo inspirarse?

La misma herramienta que utilices para diseñar te puede ofrecer plantillas de diseños, como por ejemplo con Canva. En este caso tan sólo debes buscar un diseño que sea parecido a lo que quieres transmitir y sólo cambiar la imagen y contenido de los textos.

La segunda opción sería inspirarse de tus webs favoritas y sitios web de la competencia (puedes encontrar y analizar a tus competidores con la herramienta Similarweb). Mira que tipo de banners hacen y que elementos utilizan.

Aquí te damos algunos ejemplos de banners efectivos pero sencillos, creados por marcas conocidas:

Mediamarkt

Aunque para nuestro gusto tiene demasiados elementos, se trata de un banner enfocado a la venta de un producto solo. Aquí vemos aspectos a resaltar como el mensaje corto y destacado (Otra genialidad de Epson), la imagen grande de calidad y el precio resaltado (ya que es lo atractivo de su banner). También han incorporado el botón de “Comprar” aunque aparece un poco desapercibido.

FNAC

Aún más sencillo es el banner de FNAC: un solo color de fondo, una foto representativa y que vende casi por sí sola, un eslogan y el botón de llamada a la acción “Ver selección”.

El armario de la tele

Estos dos banners del Armario de la tele siguen la misma estructura simple de un mensaje corto y vendedor, con imágenes atractivas y el botón de llamada a la acción muy resaltado.

Zalando

Otro banner de moda, bastante fácil de replicar es este de Zalando, con una foto de los productos y el mensaje destacado en la columna de la derecha con toda la información. Lo único que echaríamos de menos sería un botón de llamada a la acción. ¿Os habéis fijado además que también utilizan el color rojo para destacar el mensaje en su banner?

 

¡Esperamos que este artículo te resulte útil y que te ayude a crear banners! Puedes dejarnos tus preguntas y sugerencias en los comentarios.

 

Otros artículos interesantes:

Sobre este autor


es periodista de formación y online marketer de vocación. Trabaja en el departamento de Marketing de ePages desde hace más de 4 años, desarrollando estrategias de marketing con los proveedores y clientes españoles. Es una apasionada del e-commerce, con una amplia experiencia en la solución de ePages, y trabaja cada día ayudando a los vendedores a hacer su proyecto online una realidad.

Artículos relacionados


Comentarios


  1. 04.01.2017

    Genial post!! muchas gracias.

Comparte tu opinión con nosotros


*Campo obligatorio

Deja un comentario

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