1. Tutorial: Dándole más vida a nuestras “Userbars”.
2. Tutorial: Diseña tus propias “userbars” con Photoshop.
3. Tutorial: Crear iconos profesionales con Photoshop

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.

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

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.

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:

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:

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

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.

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!

1. Tutorial: Diseña tus propias “userbars” con Photoshop.
2. Descargar Userbars.
3. Tutorial: Instalar un servidor con Apache 2, PHP 5, MySQL y PHPMyadmin en Ubuntu sobre máquina virtual.

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.

1. Tutorial: Dándole más vida a nuestras “Userbars”.
2. Descargar Userbars.
3. Tutorial: Crear iconos profesionales con Photoshop