Foro de elhacker.net

Las famosas Barritas k se pueden ver en casi todos los foros en la firmas d los users !! ak un tuto como hacerlas.

En este tutorial voy a enseñar como hacer una userbar como esta:
(http://img102.imageshack.us/img102/5815/resultado7ps.jpg)

1- Abrimos un nuevo documento de 350*19, con fondo blanco
(http://img506.imageshack.us/img506/3425/13pt1.png)

2- Creamos un degradado que será el fondo de la userbar

(http://img155.imageshack.us/img155/192/25dp.png)

3- Ahora vamos a crear los scalines [lines diagonales que atraviesan nuestra userbar]

(http://img512.imageshack.us/img512/7048/34bv.png)

4- Una vez que estamos en el nuevo documento, le damos zoom al 1600%; y con el lapiz, [con un grosor de 1 pixel], trazamos una linea diagonal como ésta:

(http://img514.imageshack.us/img514/1512/44wt.png)

5- Ahora tenemos que definir el scaline, vamos a Edición->Definir Motivo.

6- Creamos una nueva capa:
(http://img107.imageshack.us/img107/5465/52ub.png)

7- Rellenamos la capa con los scalines, Edición->Rellenar.

8- Una vez aplicados los scalines, vamos a cambiarle la opacidad entre 30% y 70%; depende de la claridad/oscuridad que le quieran dar a la userbar.

Con una opacidad del 30% quedaría así:
(http://img107.imageshack.us/img107/3783/62om.png)

Opcional: Este es un detalle que va por gusto propio.
Con la herramienta degradado en ésta forma:(http://img107.imageshack.us/img107/8085/75qi.png)
Voy a hacer un degradado de la izquierda a la derecha, ahora quedaría así:
(http://img107.imageshack.us/img107/5117/85ua.png)
9- Vamos a agregar una imagen relacionada con el tema de la userbar
(http://img527.imageshack.us/img527/2252/98xu.png)

10- Agregamos el texto, preferiblemente usen fuentes bitmap [pueden descargarlas de http://www.dafont.com/bitmap ] Yo usé "VISITOR TT1 BRK" con un tamaño de 10 y color blanco.
Luego hacemos click derecho en la capa del texto, y vamos a:
Opciones de Fusion-> Trazo-> Tamaño: 1; Posición: Fuera; Opacidad: 100%
(http://img115.imageshack.us/img115/3151/101oj.png)
11- En una nueva capa vamos a hacer un degradado con el color frontal blanco y nuevamente en esta forma:
De arriba hacia abajo, si piensan que les quedó muy claro pueden bajarle la opacidad, yo la dejé al 100%, nuestra userbar luce así:
(http://img128.imageshack.us/img128/6559/128xd.png)
Nota: Sin querer, cuando estaba explicando esta parte del tutorial desactivé la vision de la capa del texto y de la del paso Nº 11, ustedes no las desactiven

12- Ahora viene una parte complicada de explicar, pero no de poner en practica.
Agarramos la pluma
Y con el color frontal en blanco trazamos 1 punto a cada lado del ancho de la userbar, y uno al medio, así:

(http://img123.imageshack.us/img123/8900/149su.png)

Ahora movemos el punto del medio hacia abajo, ésto se hace manteniendo presionado el CTRL.
(http://img519.imageshack.us/img519/4472/151im.png)

Ahora trazamos 2 puntos fuera de la userbar, así:
(http://img519.imageshack.us/img519/7522/163nd.png)

Vamos a Capa-> Rasterizar-> Capa. Y ponemos la opacidad de ésta capa en 20% (Si quieren darle mas opacidad pueden, personalmente lo prefiero así)
(http://img519.imageshack.us/img519/466/175we.png)
13- Para finalizar vamos a crear el borde.

Creamos una nueva capa - La seleccionamos presionando CTRL+A - Vamos a Edicion->Contornear.

Tamaño: 1 PX; Color: Negro; Posición: Dentro
(http://img102.imageshack.us/img102/5815/resultado7ps.jpg)

Tuto echo Por: Liam

Esta weno el tuto si, yo me hice uno :P Hace tiempo que no utilizo Photoshop xD

(http://img145.imageshack.us/img145/674/elhackernetuserbar9qn.gif)

Saludos Jeferi

me alegra k te alla servido =), y t kedo bien la firma !! si me das persimo me la pongo yo tmb :D

Si quieres te la pones xD me da igual, mejor :P

Saludos Jeferi

Ahi ta !! jajaja kedo buena :P, Estaria bueno hacer Varios modelos, dps cuando tenga tiempo me voy a poner hacer unas, hasta ocn animaciones... tipo.. como esta d quicksilver
(http://img304.imageshack.us/img304/1959/quiksilveruserbar9wq.gif)

o asi (http://img504.imageshack.us/img504/3812/psimagready1rr3qg.gif)

hice una sin borde y quedo bonita ;D

(http://img212.imageshack.us/img212/2984/userbarforoelhackernet3oy.gif)

esta bueno el tuto ;D

ja ta muy buena !! me copa k lo pongan en practica y les alla ayudado =)!

un borde negro clarito o Azul como el color del fondo pero mas notable kedaria buena tmb tu bar azielito

ya quedo, definitivamente se ve mejor ;D
(http://img358.imageshack.us/img358/2455/userbarforoelhackernet2zl.gif)

Perfecta, me encanta !
ahora solo falta ir editandola o hacer otra con efectos :P, pero la verdad que keda buena asi.

Edited:
Jugando con el photoshop edite tu bar xDD no kedo muy buena, pero safa :P

](http://img148.imageshack.us/img148/8149/16yq.gif)

waaaaaaaaaaaaaaa!!! que le has hecho a mi bebe?! =S :o
XD

un poco exajerado el efecto ;D

con algo de tiempo que tenga disponible hacemos algo chulo ;)

me edi cuenta k era algo exagerado xD

Si alguien tiene otra "UserBar" de elhacker.net que lo diga para añadirla a la lista:

http://www.elhacker.net/banners.htm#userbar

Aquí hice unas cuantas para cada rango:

User:

(http://img138.imageshack.us/img138/6531/ehnetuser6dp.gif)

Moderador:

(http://img234.imageshack.us/img234/400/ehnetmod2ut.gif)

Colaborador:

(http://img138.imageshack.us/img138/7636/ehnetcol9wq.gif)

Administrador:

(http://img138.imageshack.us/img138/5577/ehnetadmin6nu.gif)

Estan buenas, me voy a poner la de administrador xDDDD. (es broma Alex).

Saludos

Yo tengo esta:
(http://img296.imageshack.us/img296/9021/hacker20ui.jpg)

Ya hice otro, a ver si gusta tanto como el primero
este es en formato GIF
(http://img424.imageshack.us/img424/3721/userbaraquaforoelhacker4oa.gif)

y este es en png
(http://img400.imageshack.us/img400/169/userbaraquaforoelhacker4jv.png)

:)

Tio, el logo de elhacker sobrepasa la barra! Lo has echo asi o es un fallo? vamos por arriba no pasa..

asi lo hice ._.
pense que se veia bonito ;D

con imageReady en conjunto con Photoshop,
Photoshop = efectos
ImageReady = animación

con el photoshop lo diseñas y con el imagen ready le das animacion

tienes bastantes animaciones solo k las tieens k hacer

como la d quicksilver
(http://img304.imageshack.us/img304/1959/quiksilveruserbar9wq.gif)

o esta k es efecto lluvia.. solo k esta fea xDD pero se puede dar un efecto lluvia sin k cambie el color
(http://img148.imageshack.us/img148/8149/16yq.gif)

sin k cambie el color kedaria algo asi, como esta firma (no es mia)

(http://img29.echo.cx/img29/3251/rainvenenom1pr.gif)



(http://img29.echo.cx/img29/6941/raintutorial7px.gif)


El tuto es lo mismo para Las Barritas =) Dps busco mas !! =)

Yo tambien tengo que hacer una pregunta con respecto al tutorial ese de la lluvia, la user bar ya la hice, las capas para la lluvia con todos los requisitos tambien, quiero guardarlas desde Archivo--> Cuardar como... Y se me guarda una sola imagen... Y despues ahi me quedo, ya que se tiene que importar los frames para el image Ready. Y yo no puedo, tambien intenté guardarlas como un grupo de capas e igual me las sigue tomando como una sola. Que hago?

Saludos

Aquí tienes la respuesta, Jeros:

(http://img295.imageshack.us/img295/9853/pstoir8kx.th.jpg) (http://img295.imageshack.us/my.php?image=pstoir8kx.jpg)

Por cierto, me preguntaste por cómo se hacian las scanlines diagonales. Te mandé un MP y no sé si habrás visto el videotutorial que hice. Aquí te lo dejo:

http://usuarios.lycos.es/tommyangelo/tutorial%20patterns.htm

Si ya lo leí muchas gracias por ésta respuesta y la del MP.

Saludos

Bueno, resulta que esa respuesta la última no soluciona mi problema, ya que, se sigue pasando todo al imageReady como una sola capa! Y cuando lo paso a la nueva carpeta tambien qqueda como 1!

Que hago?

Saludos!!

Solo se me ocurre que en realidad estés trabajando con 1 sola capa.....

Pásame una captura de lo que estás haciendo para tratar de ayudarte

Salu2

tambien puedes guardarla en el PSD, y luego abrirla con el imageready , ahi no hay pierde, a menos que estes trabajando con una sola capa como dice WVB

No creo, porque en el visor de capas me aparecen las 5.

Solamente cuando lo guardo se me guarda como .psd, pero cuando lo abro en IR o en PS me lo abre como una sola, pero en el PS con las 5 que tengo!

Saludos

A mi me pasaba algo igual, Lo que hacia era abrir mi documento en photoshop, La capa de la lluvia cortarla, Crear una nueva en imageready y pegarla, Y así, Parece tedioso pero pues ni modo.

ya que estan de moda las barritas aca pongo la mia :P ;D

(http://i17.photobucket.com/albums/b66/deviantoxic/Untitled-1.png)

saludos!

Es muy sencillo: solo hay que hacer cada capa con el brillo cambiado de sitio. Sería (de hecho es) como hacer una animación fotograma por fotograma.

Aquí teneis un pequeño ejemplo de difuminado:

(http://img130.imageshack.us/img130/1162/ejemplo6dp.gif)

Os aconsejo guardarla y examinarla con el ImageReady.

Salu2

Lo que yo hago es guardar TODOS los fotogramas en una carpeta, cada una con el efecto que quieras, por ejemplo, el ejemplo de aqui arriba lo habra hecho difuminando con algun blur ( gaussian blur o radian blur ) y cada vez va disminuyendo el efecto, entiendes?

Saludos Jeferi

Yo nunca de momento he aplicado ningún efecto en movimiento porque no sé como se hace algo así como esto:


(http://img304.imageshack.us/img304/1959/quiksilveruserbar9wq.gif)

Algún tutorial o video de como aplicar efectos en movimiento?
sé hacerlo de sobra con flash, pero no quiero hacerlo con flash..

Gracias

Pues no he hecho ese efecto, y ahorita estoy fuera del pais, y no tengo instalado IR aqui, asi que no pudo dar bien los detalles, comandos y eso pero no se ve dificil.

Creo que lo que yo haria, seria:

Tomar la capa en la que esta el texto rojo original. Despues ducplicarla y a la nueva, agregarle un degrado gris (el cual sera el brillo que vemos desplazandose) entrando a las propiedades de la capa y a "superposicion de degrado (gradient overlay)". El degrado, debera ser de "tres colores". El primero seria el mismo color que tiene la fuente roja, el segundo seria el gris bajito del brillo, y el tercero seria nuevamente el mismo rojo de la fuente. Asegurandonos de hacer el gris delgado, moviendo hacia el centro las flechitas que indican donde empiezan los degrados rojos.
Al degrado se le puede dar una orientacion, habria que inclinarlo un poco.

Despues, duplicar esa capa tantas veces como sea necesaria, modificando en cada capa la posicion del degrado, unos cuantos pixeles adelante, y asi con cada capa.

Despues, en la ventana "animacion" del Image Ready, se crea un frame para cada capa que crearon. Y en cada frame ocultan todas las capas menos la que corresponde a la posicion en la que el brillo debera estar en ese momento.

Al reproducirlo todo, cada frame correra detras del otro y dara ese efecto de movimiento.

Mas o menos asi seria, o almenos asi lo haria yo.

Salu2

Bueno, yo procederé a ser más gráfico (por algo estamos en el foro de diseño gráfico no?  ;D) y te hice un videotutorial que puedes hallar aquí:

http://usuarios.lycos.es/tommyangelo/tutorial%20brillo%20en%20movimiento.htm

La explicación que ha dado anexos me parece correcta excepto en el degradado: yo no me complicaría haciendo un degradado tricolor. Simplemente un degradado blanco-transparente el cual hacemos que solo se vea en el texto, como si el texto fuera una máscara.

Espero que te sirva.

PD: aquí tengo el PSD de ejemplo para el que quiera experimentar con él:
http://rapidshare.de/files/18010954/taner.psd.html

Salu2

Muy bueno, WVB.

Y claro, es mas sencillo con el degrado como dices xDD.

Ya agrego este tutorial a la lista ;)

Salu2

 Voi a empollarmelo ya mismo.

Muchas gracias  por el video WVB y ati tmb ozange.

Un saludo

Sigo esforzándome..  :rolleyes:

algo voy consiguiendo.

le he llamado "efecto desconocido" (http://videotutoriales.publiempresas.net/html/uploads/smil4301565ee6cd5.gif)

(http://videotutoriales.publiempresas.net/xdlogobola.gif)
salu2

Ehm.. perdón, pero quisiera preguntar un par de cosas

1.- Como se supone q se hace un degradado?
2.- Hay alguna forma de borrar el fondo de una imagen (cuando solo quiero el cuerpo) sin necesidad de tener q usar el borrador?

Gracias de antemano y disculpen las molestias

1.- con la herramienta degradado o gradient en ingles

2.- si esa tecnica se llama renderizar, pero de todas maneras vas a tener que utilizar el borrador o tambien puedes hacerlo con el lazo tool y tener buen pulso mientras borras el fondo de la imagen

Gracias.

EL Photoshop se demora muchisimo en mi pc :S, cual es el requerimiento minimo para q el photoshop no ande lento en el ordenador?

Mi Ram es d 128

Me parece que tu RAM es un poco pobre. Amplíala a 512 o más. De todas formas, intenta mejorar el rendimiento de tu PC mantiéndolo al dia: desfragmenta, límpialo de archivos temporales, etc.

Si quieres puedes usar el Photoshop 7 que me parece que consume menos recursos que el CS o CS2.

Salu2

con el cambio que hize de Ptohoshop CS2 a Photoshop 7 mejoro bastante el tiempo de trabajo

Naah.. Soy muy orgulloso para cambiarme a una version pasada del photoshop XD

Esperare a conseguirme Ram de una GB. :P

Hagan una del tamaño de las imágenes de mi firma (como 96x96), aunque no sean userbars.  ::)

Aquí mis aportes:

(http://www.ceibsa.com.mx/userbars/azul/1-.jpg)

(http://www.ceibsa.com.mx/userbars/rojo/1-.jpg)

(http://www.ceibsa.com.mx/userbars/verde/1-.jpg)

(http://www.ceibsa.com.mx/userbars/amarilla/1-.jpg)

(http://www.ceibsa.com.mx/userbars/azul-verde/1-.jpg)

(http://www.ceibsa.com.mx/userbars/cafe/1-.jpg)

(http://www.ceibsa.com.mx/userbars/morado-azul/1-.jpg)

Saludetes

man como se llmas la font de las userbars?

yo usualmente uso o

Silkscreen

visitor -BRK-

Pero cualquier pixel font te va a funcionar ;)

Saludaton!

WOWWWWWWWWWWWWWWW Estoy re feliz xDDDD acabo de hacer mi user bar xDDDD Me baje solo el photoshop para hacerme una y quedo guapo bueno a mi me gusta por ser la unica cosa que hice en photoshop xDDD

(http://img146.imageshack.us/img146/3884/userbarpsd6ig.png)

La letra no me gusta pero despues lo arreglo eso es que no encontre el font ese que decia en el Tuto..

GRACIAS =DDDDDDD

Suerte y Adios

Linda UserBar :-*
Con cualquiera de estas fuentes se vera bien.
http://www.dafont.com/bitmap.php

Grax man, ahora si me anda el link xDDD en el tuto no tiene el .php y por eso no me andaba xDDDD Grax man

@Demon: Las fonts que puedes utilizar es cualquier pixel font. Yo normalmente utilizo:

Silkscreen

visitor -BRK-

¿Quedó bien?

(http://img60.imageshack.us/img60/7655/elhacker4ce.png)

:huh:

Grax por la aclaracion =D


A  mi me gusta xDDD

@Todos: Silkscreen y visitor -BRK- solo se ven bien en tamaño 9 y con aa none, o nada!.

Saludaton!

tan buenas ;)

aki me hize una y la coloke en la firma xD

Si esta bien, Solo veo que te falto el patron... :rolleyes:

@Error_404: El patrron esta pero con muy baja opacidad.

Saludaton!

Bajisima diria yo...xD
Que ciego estoy  ::)

me pierdo en el paso 7, no se como hacerlo  :huh:

Te vas al menú "Edición"->Rellenar: En la ventana que se abre, pones en "contenido": "Usar Motivo" y ahí abajo en "motivo personalizado" seleccionas el motivo que definiste en el paso 5 y ler das la opacidad deseada ;)

Salu2

Si haciendo eso bien  ;D .
Perdonen mi incultura pero jamas use el photoshop ni ningun programa de diseño.
 Como añado la imagen y el texto?

La imagen la añades arrastrandola, el texto seleccionando la herramienta "texto" de la barra de herramientas y dando clic en el documento que estás creando.

PD: Te recomiendo ver la a yuda que trae el photoshop para familiarizarte con sus funciones. ;)

Salu2

jeje, ya voy haciendo mas, de echo todo pero queda feisima.
La imagen se me ve mal porque queda muy grande y no entra, y tambien me pasa que la imagen queda como pegada por encima y no como insertada

Hola,es mi 1º postea en el foro del hacker.net, antes que nada quiero pedir diskulpas por revivir post viejos.
Soy novato en el photoshop  ;D ...tengo una duda:

Alguien podria decirme komo insertarle una imagen a mi userbar? se la agrego moviendola pero keda superpuesto al userbar..esel mismo problema que tiene jugg

gracias de antemano y perdon por revivir post viejos,pero estoy interezado en aprender

si queda superpuesta es porque está sobre todas las demás capas.

En la paleta "Capas" (layers), coloca la capa de la imagen que agregaste, que quede solo por encima de la capa del fondo.

Salu2

gracias por la explikacion aNexos

el trabajo que te tomaste con la pluma podrías haberlo hecho con Elipse Tool ;D


Atte. Nzer

Si les da flojera hacer las suyas, pueden usar las mias ( en serio no me molesta) clicando aqui (http://usuarios.lycos.es/netoloco/userbars) o en la user bar de mi firma... les llevara a una mini galeria...
Realizadas con El Gimp 2 (viva el OpenSource!)

Bueno eso es todo, disfruten

intente pero no pude,algo debo estar haciendo mal.lo uniko que pude lograr fue colocando la imagen seleccionandola con la varita magika,no es lo mismo y kreo que no es la mejor forma pero em kedo algo komo esto:

(http://i84.photobucket.com/albums/k1/SisaR_666/avatares/userbar/ADCTON-CS.jpg)

si ya se,no es muy bonito que digamos pero es lo que pude lograr :-(

Para hacer userbars hay una web donde pones la foto el fondo y el texto y te hacer una userbar es una passada !!!

La web es esta: http://userbarmaker.com/

Y si no quereis hacer la teneis esta web donde hay muchas userbars: http://www.userbars.com

xD a ver si me esfuerzo y hago una... ^^

lo prometido es deuda, mi UserBar:

(http://img49.imageshack.us/img49/4528/userbaroznsd8.jpg)

Saludos.

bueno hace rato tenia echas unas cuantas aqui las pongo...  ;)

(http://subetuimg.com/img/7918angelinauserbar.jpg) (http://subetuimg.com)
(http://subetuimg.com/img/4026braziluserbar.jpg) (http://subetuimg.com)
(http://subetuimg.com/img/940cubanouserbar.jpg) (http://subetuimg.com)
(http://subetuimg.com/img/7084delphiuser.jpg) (http://subetuimg.com)
(http://subetuimg.com/img/331googleuser.jpg) (http://subetuimg.com)
(http://subetuimg.com/img/9460nikeuserbar.jpg) (http://subetuimg.com)
Esta es la de mi web
(http://subetuimg.com/img/1945sitehackingbar.jpg) (http://sitehacking.net)
(http://subetuimg.com/img/6619southparkuser.jpg) (http://subetuimg.com)

En esta userbar:

(http://subetuimg.com/img/4506angelinauserbar.jpg)

La actriz se llama Angelina Jolie, no Angelina Joe  :rolleyes:

Salu2

uff, disculpa mi falta, segunda vez que me pasa....  :-X

estupendo tuturila cacolo, rapido y efectivo, mi mas sincera enhorabuena. Yo me acabo de hacer mi userBar  ;D

(http://img223.imageshack.us/img223/7876/userbarelhackuj2.gif)