Comunidad de diseño web y desarrollo en internet

Cómo diseñar un banner de afiliados con Photoshop

En este pequeño tip veremos como crear un microbanner de afiliados como este:



Pero, ¿qué es y para que sirve un microbanner de afiliados? Los microbanner son pequeñas imágenes estáticas, gif o swf. Su medida oficial es de 88x31 px, son comunes de ver en la sección de afiliados de una web, estos se colocan como consecuencia de una afiliación entre 2 paginas, a esto se le denomina intercambio de banners y hay hostings como Mi@rroba que tienen una sección especial en el CPanel para intercambiar estos pequeños banners; también existen paginas como Sticktacular en las que puedes solicitar promocionen tu sitio web, entonces te diriges a la sección de solicitud de afiliación en la cual se te pedirán entre varios requisitos una imagen de 88x31 píxeles que será tu microbanner para que puedas solicitar un espacio en su sección de afilados; también hay webs como FlashDeck que dejan a disposición de los usuarios un código para insertar su microbanner en tu pagina web, para promocionarla.

Conclusión: Los microbanner son imágenes de 88x31 px que anuncian una web, y sirven para promocionarte.

Ahora abriremos Photoshop y crearemos nuestro microbanner, que en este ejemplo será de CristaLab.

Empezamos creando un documento de esta forma:



Tomamos la herramienta Pluma y creamos un trazado ondulado a lo largo de el lienzo:



Ni el color ni que nos salgamos del lienzo importa, ahora cerramos la figura



Y la rasterizamos(Capa>Rasterizar>Forma)
Con la herramienta Varita mágica seleccionamos nuestra forma y...si presionamos DEL o SUPR según el lenguaje del teclado.

Tomamos la herramienta Degrado y un degrado desde el color azul claro (casi blanco) hasta uno azul CrsitaLab (009bde) coloreamos la selección (obviamente los colores los cambaras de acuerdo a el diseño de tu web).



Ahora creamos una nueva capa e invertimos la selección (Ctrl+Shift+I) y ahora vamos a Selección>Perfeccionar borde, y vamos a difuminar un poco la selección:



No se preocupen si no se abarca toda la parte restante (pero tampoco deformen toda la selección)

Ahora vamos nuevamente a usar la herramienta Degrado y de un azul claro un blanco total rellenamos la selección:



Deseleccionamos (Ctrl+D) y ahora vamos a la capa de abajo y volvemos a aplicar un degrado que rellene todo el lienzo:



A continuación crearemos una nueva capa entre el efecto de brillo y el relleno total, dibujaremos una lineas a nuestro gusto para darle mas estilo al banner, con la Pluma o cualquier otra herramienta:



La rasterizamos y cambiamos el modo de la capa a "Luz suave", entonces vamos a tener algo asi:



Vamos a la capa mas alta (la del brillo) y bajamos la opacidad al 50% para dejar ver lo que hay debajo.

Entonces, si lo deseas puedes meter estas capas a una grupo llamado "fondo" o "bg" o como gusten. Lo siguiente es colocar el logo, para lo que crearemos una nueva capa y vamos a Archivo>Colocar...

Lo acomodamos según el tamaño hasta lograr algo así:



Una vez hecho esto procederemos a escribir el nombre de nuestra web, que en el ejemplo será la de Clab.

Creamos una nueva capa, y con la herramienta Texto vamos a escribir el nombre de la web, cambiamos la tipografía y el tamaño al gusto y podemos agregar efectos al texto.

Como producto final tendremos este pequeño microbanner con el que podemos promocionar nuestro sitio:



Pueden jugar con el orden de las capas para obtener distintos resultados y efectos, si se fijan en el ejemplo agregue un Resplandor interior azul claro para difuminar un poco los bordes.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate