Killtrojan te invita a participar como usuario en nuestra comunidad. Registrate y podrás participar en todos nuestros subforos y ayudarás a crecer nuestra comunidad.

Si te gusta la informática,la seguridad, el análisis de malware o tienes problemas con virus o troyanos,no te lo pienses.


Registrarte en el foro no te llevará mas de un minuto.

Userbars fáciles con Photoshop

Ver el tema anterior Ver el tema siguiente Ir abajo

Userbars fáciles con Photoshop

Mensaje  Fitoschido el Miér Nov 25, 2009 9:47 pm

Bueno, he decidido postear de nuevo este tutorial (el original está en el foro de AlvarSoft xD) pero para facilitar su acceso decidí traerlo... Bueno aquí les va:




Gente...

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í: 4shared.com/file/125502458/5de2111a/Instalar_Visitor.html

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 siguente 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 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 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 jeje; y con el lápiz, (con un grosor de 1 pixel, modo normal, opacidad 100), trazamos una linea 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.



Así 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***
Saludos


Última edición por Fitoschido el Dom Dic 13, 2009 3:11 am, editado 1 vez
avatar
Fitoschido
Colaborador
Colaborador

Posts : 258
KCoins : 373
Reputación : 1
Fecha de inscripción : 18/10/2009

Premios :
Staff


Ver perfil de usuario http://flavors.me/fitoschido

Volver arriba Ir abajo

Re: Userbars fáciles con Photoshop

Mensaje  Axus el Jue Nov 26, 2009 4:41 pm

Sencillo y bueno el aporte... Wink

_________________
avatar
Axus
Colaborador
Colaborador

Posts : 44
KCoins : 63
Reputación : 0
Fecha de inscripción : 15/01/2009

Staff


Ver perfil de usuario

Volver arriba Ir abajo

Re: Userbars fáciles con Photoshop

Mensaje  Fitoschido el Jue Nov 26, 2009 5:58 pm

Gracias, aunque hice spam innecesario... xD

voy a cambiar las imagenes por las de Infomalware... Saludos
avatar
Fitoschido
Colaborador
Colaborador

Posts : 258
KCoins : 373
Reputación : 1
Fecha de inscripción : 18/10/2009

Premios :
Staff


Ver perfil de usuario http://flavors.me/fitoschido

Volver arriba Ir abajo

Re: Userbars fáciles con Photoshop

Mensaje  Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.