Crear minibanner de afiliados
Crear minibanner de afiliados
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:
<div style="text-align: center;">
</div>
Tomamos la herramienta Pluma y creamos un trazado ondulado a lo largo de el lienzo:
<div style="text-align: center;">
</div>
Ni el color ni que nos salgamos del lienzo importa, ahora cerramos la figura
<div style="text-align: center;">
</div>
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).
<div style="text-align: center;">
</div>
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:
<div style="text-align: center;">
</div>
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:
<div style="text-align: center;">
</div>
Deseleccionamos (Ctrl+D) y ahora vamos a la capa de abajo y volvemos a aplicar un degrado que rellene todo el lienzo:
<div style="text-align: center;">
</div>
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:
<div style="text-align: center;">
</div>
La rasterizamos y cambiamos el modo de la capa a “Luz suave”, entonces vamos a tener algo asi:
<div style="text-align: center;">
</div>
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í:
<div style="text-align: center;">
</div>
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:
<div style="text-align: center;">
</div>
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.
Fuente: http://www.cristalab.com
Diseño