Como hacer banners para mi página Web

¿Quiéres saber como hacer banners en tu página web o tu tienda oline? ¿Harto de pensar como hacer banners publicitarios y no saber hacerlos?. Queremos explicarte con este manual de sencillos pasos como adentrarte al mundo del diseño de imágenes para tu página Web o tienda online. A partir de ahora no tendrás escusa para tener una Web actualizada y con una imagen impecable.

Herramientas a usar en este manual de como crear banners

• Explorador web: Google Chrome
• Programa de edición de imágenes:
  1. Picmonkey (recomendado para principiantes para la edición de imágenes)
  2. PhotoShop
  3. PhotoScape
  4. Gimp
  5. bannersnack (Creador de banners disponible online y Web)
  6. Photo Grid (Aplicación para móviles)
• Banco de imágenes: Imágenes propias.

Como hacer banners. Manual

1. Averiguar tamaños

Para averiguar cuales son los tamaños de las imágenes a cambiar hay que pulsar al botón F12 (usando Google Chrome). Una vez mostrado el “inspector de elementos” hay que pulsar en “la lupa” siguiente:

Y seleccionar la imagen que nos interesa, véase el ejemplo siguiente:

 Aquí nos sale el ancho y alto (en este orden) de la imagen a realizar.

2. Selección del estilo, tono, filtro y modelo de imágenes

¿Qué colores tiene nuestra Web? ¿qué tipo de fotos de productos tiene? ¿qué tipo de letra? Definimos el estilo de las imágenes a crear: juveniles, elegantes, vanguardistas…

Una vez elegida el tipo de fuente y vistos los colores secundarios o complementarios de la nuestra página web, procedemos a hacer todas las imágenes del mismo estilo y modelo.

3. Ejemplos de imágenes realizadas

3.1. Imagen de fondo con título. Si no sabes qué hacer ni cómo hacer una imagen, lo más básico es poner una imagen profesional de fondo y encima marcarle un título. ¡Básico pero eficiente!

3.2. Imágenes tipo banner publicitario. Es un ejemplo como el anterior, pero si quieres poner más componentes en la imagen o textos largos que ocupen bastante de la imagen de fondo, aplicales una opacidad y será más atractiva. No pises la imagen, adapta los elementos.

 

 3.3. Imagen destacando las letras “en el aire”. Es un ejemplo como los anteriores, pero si dispones de un fondo nítido y equilibrado, pon el texto como si de un “grafiti” se tratase. Se adapta bien a la imagen, ¿no?.

 

3. 4. Expositorio de productos tipo “collage” o catálogo de productos. Si tienes una tienda online o quieres comparar dos elementos, lo mejor es hacer un collage con recuadros marcados en cada elemento. Ver estos dos ejemplos:

3.5. Destacando la tipografía. Si no dispones de una buena fotografía no te preocupes, actualmente se juega mucho con los diferentes tipos de fuente. Para ello deberás elegir tipografías de fuentes muy llamativas y singurales para adarptarlas a un contrastado y nítido fondo.

4. Utilización de filtros y efectos

Cada programa utilizado tendrá su posibilidad de aplicar filtros y efectos. En particular recomendamos especialmente la aplicación de Instagram que tiene bastantes efectos y son muy fáciles de utilizar.

Trucos básicos para PhotoShop

• Preparación de la imagen y uso de guías >> https://www.youtube.com/watch?v=–JQQ3l2tME
• Recortar imágenes >> https://www.youtube.com/watch?v=1d5EYVbadVk
• Elección de tipografía y efectos de la fuente:

• Bordear imagen. Rectángulos como fondos:

• Usar marcas >> ver videotutorial

• Usar transparencias >> ver videotutorial

• Uso de filtros y efectos >> – Ver ejemplo1.   – Ver ejemplo2.   – Ver ejemplo3

Este es el manual de como hacer banners. Si quieres que desarrollemos más este post con algún detalle, por favor coméntanoslo y ampliaremos el manual. ¿Te ha servido para saber como hacer banners? ¿Tienes alguna duda? ¿Quieres que te ayudemos? ¡Coméntanos y te respondemos!