Hoy les traigo un tutorial hecho por mi para que puedan crear fácilmente userbars con Photoshop.
Para este tuto usé el Photoshop CS3, aunque si tienen una versión diferente no hay mucho problema, son casi iguales.
IMPORTANTE!: Si no tienen la fuente Visitor, descarguen el instalador aquí:
==Descargar desde 4Shared
Una vez descargado el programa, copiará la fuente Visitor a su carpeta Fuentes.
Hecho esto empecemos con el tuto.
Abrimos el Photoshop y nos vamos a [Archivo>Nuevo] y en el diálogo que sale ponemos de anchura 350 y de altura 19 pixeles.
Una vez que tenemos la nueva imagen abierta, ya podemos comenzar a pensar que vamos a usar. O puros pinceles, o un render, o tal vez una imagen que tengamos por ahí.
Por las dudas, para los que no saben, una Userbar es una pequeña barra en la cual se expresa alguna afición o gusto por algo o alguna cosa/persona, etc.
Les doy un ejemplo:
Las encuentras en todos lados por internet, blogs, foros, páginas web, etc. mayormente en foros.
Bueno, sigamos con el tuto xD
Cuando ya tenemos en mente de qué queremos hacer la userbar, podemos comenzar a trabajar. Para este ejemplo haré una userbar de Alvarsoft.
Una vez que tengamos el archivo nuevo con las medidas, tendremos un área de trabajo parecida a esta:
Tal vez mucha gente se asusta cuando abre el Photoshop, pero tranquilos, anímense a jugar con esta potente herramienta, pues pueden descubrir muchas cosas.
Una recomendación que les hago es que vayan trabajando en capas diferentes, se les hará más facil el trabajo y es más organizado, o aún mejor, ponerles nombre a las capas para que no se pierdan xD (por ejemplo Contorno, Fondo, Scalines, etc… )
Por si las dudas, para crear una nueva capa, solo deben hacer clic al siguiente botón en la parte inferior derecha de Photoshop:
Ahora podemos elegir un fondo. Puede ser un fondo de color plano o un degradado, aunque lo más vistoso es un degradado. Para hacer uno, vayan a la capa que esté más abajo (el fondo) y hagan clic secundario en este botón y luego en “Degradado”. Seleccionen el color frontal y trasero y luego hagan el degradado.
Ahora colocamos el render o imagen en una nueva capa y lo movemos a donde más nos guste.
Y me va quedando algo así:
Una vez que nos gusta la ubicación de nuestro render y nos gusta el color de fondo, procedemos a crear las scalines (las líneas diagonales) de una userbar.
Para crear estas líneas y poder usarlas siempre que hagamos una userbar, debemos de abrir un nuevo archivo con las siguientes medidas: 4 x 4 pixeles (sí, una imagen así de pequeña se necesita para lograr esto xD)
Una vez que estamos en el nuevo documento, le damos zoom al 1600% para alcanzar a ver je je ; y con el lápiz, (con un grosor de 1 pixel, modo normal, opacidad 100), trazamos una línea diagonal como ésta: 
Ahora tenemos que definir el motivo de scaline, vamos a [Edición>Definir Motivo]. Coloca un nombre para el motivo y listo.
Ahora cerramos la imagen de 4 x 4 sin guardarla (el motivo se queda guardado). Luego de esto creamos una nueva capa abajo de la que tiene el render para que nuestras scalines no se encimen a la imagen del render (si la capa se hizo encima de la del render, sólo la arrastramos hacia abajo en la lista de capas).
Seleccionamos ahora la herramienta “Tampón de motivo” y el motivo que acabamos de crear, como se ve en la siguiente imagen:
Rellenamos toda la userbar sin miedo. Luego a la capa de las scalines le bajamos la opacidad con el porcentaje que quieran, ésta en lo personal le puse 20%, pero pongan el nivel que más les agrade.
Hasta ahora nos va quedando así:
Ahora tenemos que contornear la userbar. Para esto creamos otra capa encima de todas, y con la herramienta “Marco rectangular” seleccionamos toda la imagen. Así seleccionada le damos clic secundario y seleccionamos “Contornear”.
Ponemos las opciones como en la imagen
y luego clic en [OK]. Veremos que queda un marco muy grueso, pero no se preocupen, cuando se guarde no se verá así.
Ahora haremos el texto que identificará nuestra userbar.
Elegimos la herramienta Texto (en cualquier capa, no hace falta crear una nueva, se crea sola cuando escribimos el texto), ponemos la fuente Visitor en tamaño 13 puntos, Personalizado de Fuente elegimos Ninguno, color blanco y hacemos clic en alguna parte de la Userbar. Ahora escribiremos lo que identificará a la userbar, en este caso, “Alvarsoft user” .
Como el texto casi no se distingue xD, vamos a trazar el texto, para esto hacemos clic secundario en la capa del texto y elegimos “Opciones de fusión”, hacemos clic en “Trazo” y dejamos las opciones como en la imagen, aunque si se les hace que el texto muy cargado, pueden bajarle la opacidad al trazo, sólo juguen con las opciones y elijan las que más les gusten.
Quedó: 
Por último haremos el efecto de vidrio o cápsula como me gusta decirle xDDD.
Seleccionamos la herramienta “Pluma” (al lado de la de “Texto”) y con el color frontal en blanco trazamos 1 punto a cada lado del ancho de la userbar, y uno al medio, así:
Ahora movemos el punto de en medio hacia abajo, ésto se hace manteniendo presionado el CTRL. Nos queda así:
Ahora hacemos clic secundario en la capa y seleccionamos “Rasterizar capa”. Luego le bajamos la opacidad como hicimos con las scalines.
Listo, el resultado final es:
Podemos guardar directamente en PSD (formato de Photoshop) para modificarla después, o en PNG para usarla inmediatamente, para esto hacemos clic secundario en la capa de hasta abajo y luego en “Acoplar imagen”. Ahora si nos vamos a “Guardar como”, ponemos un nombre, formato PNG y listo, ya tenemos nuestra userbar.
Gracias por leer este tuto y llegar hasta el final jejeje
Si lo quieres poner en tu web, no olvides mencionarme jeje
Tutorial by ***Fitoschido***
Me gusta:
Me gusta Cargando...
” 
Sólo puedo decir: XD!! Es cierto!!
.
–, los plugins, la interfaz… Lo único que sugeriría serían las pestañas, para poder editar varios artículos a la vez y en una sola ventana.
.
