Antes de empezar con el tutorial sobre como hacer un banner para nuestro e-commerce, deberemos tener en cuenta una serie de aspectos fundamentales que nos ayudarán a orientar nuestro trabajo. Primero de todo y lo más importante, la información y como vamos a mostrarla para sacar el máximo jugo y para que se entienda fácilmente sin generar dudas. A continuación, el formato que tenemos para el trabajo y su disposición en el conjunto de la web. A partir de estos datos, podremos elaborar un esbozo (tanto mental como físico) de los elementos que vamos a usar y su cohesión para mantener un trabajo harmónico.
Para el tutorial vamos a usar Photoshop pero existen otras herramientas (quizás no tan profesionales) pero suficientes para realizar un banner. Si no disponemos de una licencia para trabajar con Photoshop, siempre tendremos como último recurso el uso de herramientas web como Fotor – Banner Maker para crear banners con la medida que queramos aunque con muchas más limitaciones gráficas.
Paso 1: Creación del documento
Empezaremos creando un nuevo documento con las medidas del banner. En nuestro caso usaremos unas medidas de 9800px de anchura por 300px de altura para usar el banner como cabecera del contenido principal de la home. La resolución debe ser de 72 puntos por pulgada y el modo de color en RGB, tal y como se muestra en la imagen, ya que es la resolución para pantalla web.
Paso 2: El fondo
A continuación trataremos el fondo teniendo en cuenta que no debe ser el elemento principal del banner pero que nos ayudará a darle juego compositivo al arte. En nuestro caso, como vamos a hacer un banner anunciando ofertas especiales para el verano, hemos elegido un fondo con colores vivos, con flores y cielo azul típico de la estación en la que nos encontramos y que sobretodo, se adecua al producto que anunciamos, las gafas de sol. Relacionar los colores e imágenes usadas con el producto anunciado o acorde con el mensaje de la campaña difundida, facilitará trasmitir nuestro mensaje al usuario desde un primer vistazo.
Para empezar la composición de nuestro banner arrastraremos la imagen al documento y lo moveremos en la posición que queramos. Con la ayuda de la herramienta “Edición > Transformar” podremos escalar la imagen para ajustarla al tamaño que necesitamos y que hemos definido previamente. Como la imagen tiene mucho color, le bajamos la saturación para que los colores no sean tan vivos creando una capa de ajuste de intensidad. Para ello, seleccionamos la capa donde tenemos la imagen y seleccionamos en el icono inferior “crear nueva capa de relleno o ajuste” y seleccionamos “intensidad”. Se nos creará una capa justo por encima de la capa a modificar y podremos modificar los valores para ajustar gráficamente el fondo. Más tarde podremos volver a jugar con estas capas de ajuste para acabar de cohesionar el fondo con el resto de elementos.
Paso 3: El texto
Con la herramienta de texto añadiremos el mensaje que queramos. Debemos tener siempre presente la jerarquía de la información para hacer los tratamientos adecuados y destacar la información más importante.
Debemos crear tantas capas de texto como tratamientos distintos vayamos a hacer con el texto para poder trabajar con cada uno de ellos independientemente. En el ejemplo hemos usado tres tipos distintos de información; el primero, un titular grande para darle nombre a la promoción, el segundo, la oferta bien destacada ya que va a ser el punto de atracción y por último, la duración de la oferta con un cuerpo de letra más pequeño para no dar protagonismo.
Un consejo con las tipografías, no uséis fuentes demasiado comunes o vulgares; intentad alejaros de las típicas familias Arial, Verdana, Times New Roman y por supuesto, no uséis bajo ningún concepto la Comic Sans si no queréis perder credibilidad con vuestra oferta. Disponéis de un surtido muy amplio de familias tipográficas en Google Fonts que van más allá de estas clásicas ‘tipos’.
Si lo que queréis es dar un poco de vida y movimiento al banner, podéis probar de inclinar un poco el texto para darle más dinamismo con la herramienta Transformar vía “Edición > Transformación Libre”. Jugad también con el tamaño y el color.
Ya por último, como tenemos un fondo con bastante colorido y nos cuesta leer un poco el texto, podemos mejorar la lectura añadiendo sombras a los textos. Para ello, añadiremos efectos de capa en las capas de texto haciendo simplemente doble clic en cada una de las capas. Se nos abrirá una ventana para editar estilos y elegiremos la opción “sombra paralela” y tocaremos las variables “opacidad”, “distancia”, extensión”, “tamaño” y el “color” para ajustar al tipo de sombra que queramos.
Paso 4: Ejemplos con productos
No está de más añadir al banner unos cuantos ejemplos de la oferta con productos que tengamos a la venta. Nosotros hemos añadido dos productos mostrando el precio antiguo y el nuevo, con el descuento aplicado más destacado, para llamar la atención del usuario. Los precios rebajados son el principal reclamo para que el usuario desvíe la vista hacia nuestra publicidad.
Para añadir los productos, debemos tener una buena imagen del producto con un fondo transparente para poder añadirlo en el espacio de trabajo del banner. Para ello abriremos la imagen del producto en otro documento y lo editaremos. Seleccionamos la varita mágica que nos ayudará a hacer una selección de un mismo color y una vez seleccionado todo el fondo lo borramos con la tecla suprimir, así conseguimos borrar el fondo (normalmente blanco y a veces negro) y dejar el producto solo. También podemos usar la herramienta de borrar aunque precisaremos de un buen pulso y paciencia. Una vez borrado el fondo, seleccionando el producto, lo arrastramos a la mesa de trabajo del banner junto con los otros elementos y tendremos el producto listo para ajustar su tamaño y posición dentro del banner.
Creamos unas cuantas capas de texto para añadir el nombre del producto, el precio antiguo y el precio nuevo y ajustamos los colores, tamaños y tipografías necesarias. Para mantener una uniformidad con todos estos elementos, hemos añadido un “badge”, o distintivo, colocado en el fondo para que agrupe todos estos elementos de producto. Recordad que podemos añadir más efectos de capa para añadir sombras o relieves por ejemplo.
Paso 5: Botón o CTA
Es recomendable aunque no obligado el uso de botones o elementos “call to action” que ayuden al usuario a hacer una acción, simplemente hacer “clic” en el botón para ir al enlace del banner en nuestro caso. Conseguir una acción por parte del usuario significa el primer paso para que el usuario se convierta en nuestro cliente.
Para ello, crearemos un botón simplemente creando un rectángulo con la herramienta “Rectángulo” (redondeado o no según el estilo que queramos) y añadiremos una capa de texto con un texto simple y corto como “pincha aquí”, “ver ofertas”, “saber más”… Para darle un estilo de botón un poco más tridimensional, podemos añadir un efecto de capa al rectángulo y asignarle el estilo “bisel y relieve” y jugar con sus variables. ¡Verás que efectos más chulos puedes conseguir!
Podemos buscar imágenes de botones en cualquier buscador y copiar el diseño de los que más nos gusten.
Paso 6: Exportación
Ya por último, lo que debemos hacer es crear un archivo compatible para ser visualizado en los navegadores. Para ello, iremos a “Archivo > Exportar para web” y guardaremos el archivo en formato JPG por defecto aunque si queremos transparencias en el banner deberemos escoger entre GIF o PNG (este último no hace compresión y el archivo final pesará más). Si elegimos JPG tendremos la opción de comprimir más o menos el fichero final, viendo a momento real la pérdida de calidad sobre el archivo original, y poder elegir la compresión justa sin una pérdida notoria de calidad. Así conseguiremos un archivo con un peso óptimo para ser descargado por los usuarios cuando naveguen por la página sin tener unos tiempos de carga grandes.
Espero que siguiendo estos pasos os ayude un poco más a realizar unos banners chulos o destacados para conseguir aquellas ventas que estabais deseando.
