[Tutorial] User-bars

La versión que voy a usar para explicarles como hacer esto es Photoshop CS2. La versión anterior y la nueva (CS3) son casi idénticas, asi que no se les va a complicar demasiado...

IMPORTANTE: Tienen que descargar esta fuente desde RapidShare que acabo de subir:
http://rapidshare.com/files/90810986/visitor.zip.html

Una vez descargada, la descomprimen, y la pegan en C:\WINDOWS\Fonts .

Empecemos!

Ahora, abrimos el Photoshop, jeje, sino no vamos a poder trabajar xD

Luego, abrimos un nuevo documento (Archivo>Nuevo...), con las siguientes medidas:


Una vez que tenemos el archivo abierto, 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 barrita 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 esta explicación

Cuando ya tenemos en mente de que queremos hacer la userbar, ya podemos comenzar. Para este ejemplo voy a hacer una Userbar de Taringa!

Voy a usar el siguiente Render que acabo de armar


Si quieren hacer el mismo ejemplo, les dejo este Render subido a RapidShare, donde lo van a poder descargar. Es un archivo .zip donde estaran comprimidos la imagen de Taringa! que hice en formato .PNG y en formado .PSD (formato Photoshop) . Una vez abierto la imagen de formato .PSD, pueden ver las capas que tiene, y de la segunda capa (donde esta el render) pueden extraer la palabra Taringa! y la utilizan ustedes.

Archivo en RapidShare:
http://rapidshare.com/files/90802459/taringa_render.zip.html

Sigamos...
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 usa el photoshop, pero tranquilos, es muy fácil y ademas tienen que animarse y jugar con esta potente herramienta. Pueden descubrir de todo

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.

Por si las dudas, para crear una nueva capa, solo deben de darle clic al siguente botón en la parte inferior derecha de photoshop:


Una vez que tenemos el Render ubicado en alguna región de la "userbar", podemos de elegir un fondo. Puede ser un fondo de color plano o un degradado. Lo mejor es un degradado

La herramienta Degradado se encuentra por aquí:


Yo use un Degradado de colores Azul claro y un Celeste fuerte...
Y ya me va quedando algo asi:


Una vez que ya nos gusta la ubicación de nuestro Render y nos gusta el color de fondo, procedemos a crear las lineas diagonales de una Userbar.

Para crear estas lineas y poder usarlas siempre que hagamos una userbar, debemos de abrir un nuevo archivo con las siguiente medidas:


Parece alocado, pero tenemos que hacer un documento de este pequeñisimo tamaño para realizar con éxito esto




Bueno, no se asusten, van a ver el nuevo archivo muy pequeño Solo tienen que hacer Zoom (Ctrl + Barra Espaciadora) hasta que no de más.



Una vez que tenemos el archivo más ampliado, procedemos a usar la Herramienta Lapiz.



Ahora, con el lapiz en Color Negro, Diametro 1, Modo Normal y Opacidad 100%, procedemos a realizar una línea en diagonal hacia abajo, así:



Cuando la terminemos quedará algo así:



Una vez que tenemos esta línea, con el archivo seleccionado, vamos a Edición>Definir Motivo... (en ingles, Edition>Define Pattern...)



Luego se nos presenta la siguiente ventana, en donde solo tendremos que colocar un nombre para el motivo y listo !



Una vez que tenemos el nuevo motivo, cerramos el archivo de la linea, sin guardarlo, y seguimos trabajando con la Userbar. Ahora para poder colocarle a la Userbar las diagonales, solo debemos de utilizar la Herramienta "Tampón de Motivo"


Una vez seleccionada, procedemos a elegir el motivo que acabamos de crear (aquí) :


Una vez seleccionado el motivo correcto, en una nueva capa que crearemos entre medio de la capa del Render y el Fondo (Es más organizado si le ponemos nombre a las capas, haciendole doble clic en el nombre ) comenzamos a utilizar el tampón para crear el motivo.



La rellenamos toda sin miedo y ya le va faltando menos...Vieron como va tomando forma?



Bien, ya tenemos nuestro fondo, un render y las diagonales. Ahora que viene? Las cosas más importantes . Hacer el Texto y Contornearla.

Primero vamos a realizar el Contorneo. Para ello, Creamos una nueva Capa, la ponemos encima de todas las demas (como la primera capa contando de arriba hacia abajo) y vamos a Selección>Todo .



Nos quedara marcado algo asi como la imagen anterior. Ahora, elegimos la herramienta "Marco Rectangular" (Marcooos xDD) y hacemos clic derecho sobre nuestra Userbar y elegimos Contornear (o en ingles, Stroke).





Bien, y ahora nos aparece otra cuadro, con las opciones del contorneo. Ponganlas como muestra la siguiente imagen:


Una vez realizado el contorneo, vamos a Selección>Deseleccionar . Podremos observar que la userbar queda con un bordesito negro un poco grueso y se ve medio feo . No se hagan problema, que en realidad ese contorno no es asi de grueso y no se ve asi cuando la Userbar este exportada como Imagen

Bien, ahora, lo último. Realizar el texto de la Userbar, que la identificará



Elegimos la herramienta Texto (en cualquier capa, no hace falta crear una nueva, se crea sola cuando creamos el texto), ponemos la fuente Visitor en tamaño 12 px, 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, "Taringa User" .

NOTA: La fuente Visitor puede aparecer con otros nombres, como Visitor TT2 BRK, Visitor TT1 BRK, etc.



Nos quedara algo así:



Vamos a notar que el texto no se nota muy bien y se ve bastante aburrido, asi que aca es donde le damos ese toque final y le damos vida a la Userbar

Ahora vamos a hacer clic derecho en la capa del texto, y elegimos Rasterize Type.




Nuevamente hacemos clic derecho en la capa que era texto y elegimos Opciones de Fusión... (o en ingles, Blending Options...)




Esta es la parte más divertida. Más tarde cuando terminen con esta Userbar podrán volver a hacer esto parecido con un texto y jugar con estas opciones, que modifican el texto o cualquier capa de una forma genial. Solo tienen que probarlos !

Pero ahora...vamos a usar el efecto Trazo. Elegimos el Trazo y colocamos las opciones como se muestra en la siguiente imagen:



Finalizamos dandole clic a OK y ahora si, como podremos ver, nuestra Userbar se ve más bonita



Ahora para que se note un poco más el texto, solo debemos de bajarle la Opacidad a la Capa Diagonales, haciendo clic en Opacidad y eligiendo un 50%.




Y ya esta! Ya tenemos la Userbar finalizada! La pueden guardar como un archivo .psd para modificarla despues, o solo como imagen para usarla enseguida .

Asi quedó la mía:



Una vez que hagan más userbars ya pueden ir agregandole capas con pinceles, otros Renders, etc. para que queden más copadas...
Esto fue todo por ahora. Tal vez despues postee como hacer algunos efectos que le dan más elegancia a la Userbar.

vientos buen aporte, justo lo que necesitaba saber
gracias

olle no maaa!!! esta buenisimo esto!! pero no tngo el Photoshop porq recientement formatee mi chompu y se fue, y no tngo el disco d instalacion y ni se si lo pueda bajar, pero si esta buenisimo,ahi si puedes dcirme dond conseguirlo t lo agradeceria... porq la neta si me gustaria hacerlo...

algo mas,tu firma asi la hiciste?? con ese mismo procedimiento??

NO, ese es otro procedimiento luego pondre el tuto para hacer firmas.

pero el programa dond lo consigo??

oye ESCASTO podiras decirme como hacerlos animados o poner un tutorial

M45T3R HYR3NK escribió:oye ESCASTO podiras decirme como hacerlos animados o poner un tutorial

Trabajando..................