Tutorial: Diseña tus propias “userbars” con Photoshop.

Las fanbars, aka userbars, fueron un éxito hace unos cuatro años, cuando todo forero poseía en su firma una o varias de estas pequeñas barras.

Consiste en una imagen de 350 x 19 píxeles (este es el tamaño estandar) en la que de forma minimalista se expresa un gusto o afinidad por personas, webs o productos. Se distinguen dos grandes  tipos, las userbars propiamente dichas, es decir barras de usuario, (Windows XP User, Linux User, Mac User, Intel Core2Duo User…) y las fanbars, o barras de fan (RHCP Fan, masual Fan… ).

En su día todo el mundo las usaba pero hoy son pocos los que la usan y menos los que se acuerdan de ellas. Haciendo limpieza en mi disco duro encontré una plantilla de Photoshop que había hecho, y me decidí a crear un pequeño tutorial para que todo el mundo pueda crearse la suya. Así mismo en este mismo post, podéis pedirlas, proponiendo un tema o proporcionando una imágen, y estaré encantado de haceros una. Explicaré como hacer tres modelos, uno sencillo y dos un poco más adornados que parten del mismo. Mis conocimientos de Photoshop son reducidos, no esperéis una obra de arte.

User Bar simple

Empezamos abriendo Photoshop y creando un nuevo documento, con fondo transparente de 300 x 19 píxeles:

Lo primero que vamos a hacer es una máscara para generar el brillo característico de las userbars. Para ello, seleccionamos la máscara elíptica y hacemos una selección como muestro a continuación:

Creamos una nueva capa a la que llamamos “brillo” (para tenerla localizada) y la rellenamos de blanco:

Ahora solo tenemos que ir al menú de capas, seleccionamos la que está de fondo y la rellenamos del color que deseemos; luego seleccionamos la que hemos rellenado de blanco y le bajamos la opacidad a un 25%. El porcentaje variará dependiendo del color de fondo, 25% es un buen valor para empezar.

Como podéis ver estamos usando Photoshop de una forma muy básica, es un tutorial muy sencillo que cualquiera puede realizar.Solo nos falta añadir el logo y el texto. Buscamos una imagen que tenga una buena calidad, la recortamos y la pegamos en la barra. Pulsando “Ctrl+T” la adaptamos al tamaño. Ahora hacemos click en el cuadro de texto. A mi me gusta usar una fuente que se llama “Zelda” para las userbars, ya que tiene un aspecto pixelizado que le da un toque curioso. Si alguien la quiere que la pida y la subo sin problema.

Una vez tenemos el texto puesto, nuestra user bar simple está terminada:

Queda un poco sosa pero nos servirá de plantilla para las otras versiones, que espero poder tener listas mañana, así como una pequeña recopilación de varias userbars y fanbars para descargar.