Miércoles, febrero 10, 2010 22:29
Download PDF

El otro día escribía un post sobre las userbars y un pequeño tutorial explicando como hacer una muy sencilla con Photoshop. Hoy os dejo otro tutorial explicando como darle un toque más “profesional” con un par de sencillos pasos. Vamos a jugar con el relleno con patrones para darles más vivacidad; para ello explicaré como crear y guardar un patrón y como rellenar una capa con el posteriormente.

Yo para las userbars suelo usar tres patrones básicos, uno rayado y dos con cuadrados. Cada uno le da un estilo distinto. Comencemos por establecer el patrón. Abrimos el Photoshop y creamos un nuevo documento de 4×4 píxeles con fondo transparente.

Patrón

En la barra de herramientas, seleccionamos el lápiz, con tamaño de punta 1 y pintamos lo siguiente:

patron rayas

Ahora tenemos que guardarlo como patrón. Nos vamos al menú “Edición” (edit) y hacemos click en “Definir Patrón” (Define pattern). Ponemos el nombre que queramos y aceptar.

Nos vamos a nuestra userbar que ya tenemos hecha con fondo, logo, texto y brillo, y creamos una nueva capa. La posición de esta nueva capa depende de la userbar y del gusto de cada uno, esta vez vamos a ponerla por encima de todas las anteriores menos la de brillo. Hacemos click en rellenar: en la ventana que nos sale cambiamos color por patrón (pattern) y lo seccionamos de la lista que nos aparece.

Relleno patron

Como veréis queda una cosa horrorosa. De nuevo tendremos que jugar con la opacidad de la capa (un 25% más o menos) para que el resultado sea este:

Facebook User

Seguro que tras leer esto se os ocurren muchas otras cosas que hacer para que nuestra userbar quede mejor. Yo os propongo un par de patrones más que a mi me gustan mucho.

El de cuadrados:

Patron 2

Resultado(en este caso el relleno lo hice por detrás del logo y el texto:

Facebook User 2

El de puntos: sería como el primero de rallas pero en vez de crear un documento de 4×4, haríamos lo mismo con uno de 2×2, generando un efecto de puntos.

Facebook User 2

Espero que os guste y os sirva de ayuda este “revival” de barras . En una tercera entrega subiré una colección de userbars/fanbars con productos y webs conocidas.

Saludos a todos los que me leen, pulsad F5!

Un Comentario a “Tutorial: Dándole más vida a nuestras “Userbars”.”

  1. Descargar Userbars. dice:

    febrero 15th, 2010 a las 17:49 pm

    […] añadiré algunas más. Si queréis alguna en concreto avisad y la hago. Recordad que tenéis el tutorial para diseñar fanbars con Photoshop en unos sencillos pasos. […]

Deja un comentario