Canva

Un clásico de internet, y sobre todo, una apuesta segura si estamos iniciándonos y

si queremos centrarnos, sobre todo, en nuestros banners para redes sociales.
Canva te da acceso a plantillas con diseños preconfigurados, destinados
especialmente para las redes sociales, así como Etsy, eBay o emailings. Lo mejor
de la plataforma es su sencillez, ya que lo único que necesitas es elegir imágenes,
tipografías y colores que te gusten, y ya se encarga ella de hacer todo lo demás.

Los banners se adaptan automáticamente a las dimensiones correctas de cada

plataforma. Con la mejor selección de diseños para banners de toda la Web a tu
disposición, Canva te lo pone muy fácil si quieres mantener actualizados tus
perfiles digitales.

Google Web Designer

La apuesta del gigante Google para ofrecernos una herramienta de diseño web
que nos permita crear banners muy chulos, especialmente orientados a los
tamaños aceptados en Google Adwords (aunque nos permite personalizar al
tamaño que queramos). Es gratis y es tremendamente poderosa, sobre todo a
nivel de animaciones y diseños más complejos. Un acierto por su parte ha sido
diseñarlo con una interfaz similar a las que ofrecen los programas para hacer
banners habituales de diseño y animación, por lo que su manejo es bastante
intuitivo y predecible. Sin embargo, por sacarle un pero, aún está en sus primeras
versiones y, especialmente en sistemas IOS, su funcionamiento es un poco
inestable después de un rato de trabajo continuado.
HTML5 Maker
Un potentísimo editor de banners, con infinidad de plantillas y temas
personalizados ya hechos, en los que solo tendremos que subir imágenes y
cambiar textos para obtener nuestro banner. Si bien es una plataforma de pago,
cuenta con una completa sección de plantillas gratuitas. Es perfecto si estás
iniciándote en esto del diseño y necesitas realizar una composición rápida y
funcional.

My Banner Maker
De nuevo, un editor de banners orientado, especialmente, para composiciones
que se van a compartir a través de redes sociales. También es de pago, pero su
versión gratuita nos ofrece un buen abanico de opciones, muy completas, que nos
permiten realizar una composición completa. De hecho, la versión de pago solo
nos ofrece más opciones de plantillas, más acceso al banco de imágenes
y soporte técnico más completo, por lo que podemos funcionar bastante bien sin
tener que recurrir a ella.

Fotor
Si bien este editor es un poco más limitado que los anteriores, lo incluyo en la lista
porque no se puede hacer algo más sencillo e intuitivo que esto. Básicamente se
nos presenta una home en la que se ven, a tamaño real, los tipos de banners que
nos ofrece para diseñar, pulsamos sobre el que queremos, y automáticamente se
nos carga un editor, muy similar a la interfaz de programas de presentaciones tipo
keynote o Microsoft powerpoint, en la que seleccionamos el tema/plantilla de
nuestra selección y ya modificamos los textos o las imágenes. Muy recomendable
si tus conocimientos en diseño son limitados, ya que apenas hay que hacer nada.

La optimización de banners
Por mucho que vivamos en la era de la banda ancha, la fibra óptica y el internet de
alta velocidad, no podemos subir imágenes que pesen varios megas a nuestro
ecommerce, porque nos destrozaría el tiempo de carga del mismo. Y entonces de
nada servirán estos banners tan bien pensados, ya que la gente se marcharía
antes de que se pudiesen cargar correctamente. Debemos optimizar los banners,
y en general, todas las imágenes de la web, por las siguientes razones:

 La navegación móvil
La navegación móvil supone casi el 50% de la navegación total, y la tendencia es
a aumentar. Desgraciadamente la velocidad de las redes 3G o incluso 4G no
puede equipararse con la banda ancha que tenemos en casa, nuestros usuarios
móviles nos agradecerán que nuestra web no tarde demasiado en cargar.

 No perder usuarios
Una web lenta y pesada es sinónimo de un porcentaje de rebote muy alto, y por
supuesto tú no quieres eso. Nos empotramos contra el muro de la velocidad de
carga y la impaciencia de los usuarios. Es imprescindible optimizar al máximo el
peso de tu web para ganar todo el tiempo de carga posible.

 Posicionamiento SEO
Google da una prioridad e importancia muy grande al tiempo de carga de una web
que indexe. Principalmente es debido a que dispone de un tiempo limitado para
rastrear tu web, por lo que cuanto menos pese, más páginas podrá rastrear,
aumentando así tus posibilidades de posicionar mejor.

¿Y cómo optimizo mis banners?

Bien, lo primero es saber elegir el formato de imagen adecuado a tus necesidades.
Seguro que alguna vez te has preguntado cuál es la diferencia entre un jpg, un
png o un gif. No te aburriré con tecnicismos, tan solo te diré cuándo es mejor
utilizar un formato u otro:

.GIF
Un formato obsoleto en imágenes estáticas, pero ampliamente utilizado en las
imágenes animadas. Por tanto solo debes emplearlo en caso de que tu banner
sea dinámico y en movimiento, si no es el caso, no lo emplees, pues perderás
mucha calidad sin que haya una compensación en cuanto al tamaño de la imagen.
Su único aspecto positivo es que permite las imágenes con fondo transparente.
.PNG
El sustituto de Gif, porque también permite transparencia. Es ideal para imágenes
planas o con grandes espacios blancos, como capturas de pantalla, logotipos, etc.
PNG es un formato de imagen sin pérdidas, por lo que, aunque no reduce tanto el
tamaño como el JPG, la calidad siempre será mayor y su nitidez más definida.

.JPG
Ideal para fotografías con detalles y muchos colores. Es un formato de compresión
con pérdidas, es decir, que pierde calidad para reducir el tamaño, y con ello pierde
nitidez, por lo que pueden aparecer aberraciones cromáticas en determinadas
zonas.
En general usaremos PNG para todas las imágenes que componen nuestra tienda
online (logotipos, iconos, botones…) y JPG solo para las fotografías (sobre todo
las más numerosas, como puedan ser las del catálogo de productos y
especialmente, las grandes).

Por si fuera poco con estos tres, cada vez es más habitual utilizar formatos
vectoriales (.SVG) para logotipos e iconos, ya que son totalmente escalables a
todas las resoluciones y no ocupan peso, ya que son código.

No vamos a entrar en qué tipo de programa/plataforma has empleado para hacer

tus banners, pero debes tener en cuenta estos aspectos a la hora de exportarlos.

Si exportas en JPG, ten en cuenta:

1. La barra de calidad, de 0 a 100, siendo 0 compresión máxima y 100

compresión nula, es decir calidad alta.
2. La opción “progresivo”. Si la pulsas, el jpg guardará diferentes capas a
diferentes calidades de manera que a la hora de cargarse en el servidor la
imagen se vera en baja calidad e irá mejorando su definición a medida que
vaya cargando. Si no, la imagen aparecerá directamente en alta, a
trompicones.
Si exportas en PNG, ten en cuenta:

1. Puedes exportar en PNG-8 o en PNG-24. La principal diferencia es que

PNG-8 comprime un máximo de 256 colores, como un GIF, mientras que
PNG-24 alcanza los 16 millones de colores. Normalmente usarás este último,
salvo que hayas hecho un banner que solo tenga imágenes vectoriales con
colores planos y textos.
2. Transparencia. Bastante obvio, pero si lo activas el fondo de la imagen será
transparente (siempre que no exista una capa sólida en el fondo).
Si exportas en GIF, ten en cuenta:
1. Recuerda que sólo debes usarlo si el banner es animado, si no, es
mejor que lo hagas en PNG.
2. Los GIF solo exportan a un máximo de 256 colores, y eso reduce
considerablemente tanto la calidad como el resultado final, ya que se
empobrece mucho el color en fotografías, degradados y similares. Es un
formato más adaptado para imágenes vectoriales, colores planos y textos en
fuente tipográfica. Cuanto menos peso, mejor.
3. El peso se incrementa mucho si jugamos con los colores, sobre todo
si no optimizamos bien la animación (esto consiste en eliminar frames que se
repitan y no aporten nada a la animación).