Banners para web

Tutorial de cómo crear banners con Photoshop para nuestra web

Bienvenidos a un nuevo artículo en el que vamos a aprender a preparar los banners que van a ir luego en nuestra página web.

  • Tamaño de los Banners
  • Encuadre de la imagen y retoques
  • Exportación de los banners

Para empezar, abrimos Photoshop y creamos un documento nuevo. Voy a seleccionar un tamaño de 1920 píxeles de ancho por 600 píxeles de alto. Una resolución de 72 píxeles y un modo de trabajo RGB.

Abrimos con Photoshop la imagen que queramos usar para crear nuestro primer banner. Con Ctrl+A seleccionamos toda la imagen Ctr+C para copiarla y la pegamos en el documento que hemos creado para el banner de 1920x600px.

Ahora transformamos la imagen con Ctrl+T para encuadrarla dentro del banner. En este caso he colocado la imagen a la derecha y nos queda una línea en la que se ve el fondo blanco. Para arreglar esto y que sea un fondo uniforme vamos a seleccionar un color del fondo de mi foto y vamos a rellenar la capa de fondo de este color.

Ahora seleccionamos la herramienta goma de borrar y con un tamaño de unos 400 y una opacidad del 40% empezamos a borrar nuestra imagen hasta que se funda con la capa de fondo para hacer desaparecer la línea y que quede todo uniforme.

Para exportar la imagen vamos a Archivo>Exportar>Web y dispositivos, seleccionamos el modo JPG en alta resolución o media. Guardamos el archivo y listo ya tenemos nuestro primer banner creado a un tamaño de 1920×600 píxeles.

Puedes repetir el proceso para tantos banners como quieras añadir a tu sitio web. Puedes cambiar el tamaño del banner y encuadrar las imágenes a tu gusto.

Si tienes cualquier pregunta no dudes en consultarme en los comentarios. Te responderé en breve y será un placer poder ayudarte y compartir conocimientos.

Contacto

Inicia tu proyecto conmigo

Resolveré todas tus dudas y te ayudaré con la contratación del alojamiento web y el registro de tu dominio.