Zona Arcade. Construye, Restaura y Decora tu Máquina Arcade y Pinball.

Tutorial Photoshop: Crea tus propias "Userbar" o firmas para el foro con Photoshop

« Older   Newer »
  Share  
view post Posted on 29/6/2008, 12:57     +1   -1
Avatar

Restless in Peace

Group:
Administrator
Posts:
42,634
Location:
Alcobendas (Madrid)

Status:


Tutorial Photoshop: Crea tus propias "Userbar" o firmas para el foro con Photoshop

- Introducción

Las "userbar" o barras de usuario son espacios decorativos muy populares en los foros, que aparecen en las zona destinada a la firma del usuario tras cada intervención.

El uso de este tipo de imágenes tiene la finalidad de informar al resto de los usuarios de un foro sobre los gustos, preferencias y aficiones de quién las exhibe.

Actualmente, las "userbar" han superado su naturaleza más discreta y los internautas compiten entre sí para crear firmas, que además ser bonitas o informativas, sean también originales y llamen la atención.

Parece existir un tamaño muy consensuado para la realización de las "userbar", este es de 350 píxeles de ancho por 19 de alto.

Respecto a su configuración, existe un fondo, que está compuesto por una o varias imágenes; un texto creado a partir de una fuente del tipo "pixel font", y un efecto decorativo sobre el resto de las capas que componen la firma decorativa, que suele darle una sencilla apariencia de cristal.


- Creando nuestras propias "userbar" con el programa de diseño gráfico "Photoshop"

En el presente tutorial aprenderemos a hacer estas "userbar" con la versión "Photoshop CS3", que apenas difiere en la disposición de sus menús de versiones anteriores.

Comenzamos creando nuestro espacio de diseño, para ello, una vez abierto el programa, acudiremos a la pestaña "File/New". Esto abrirá un cuadro de diálogo donde introduciremos los valores en pixels 350 para el ancho (Widh) y 19 para el alto (Height).

tutorial_userbar_1


Comenzaremos creando los adornos que le darán la apariencia de cristal a la barra de usuario. Existen muchas formas que podemos usar, os enseñaré dos métodos para crear este adorno.

- Método 1: Este primera forma de hacer el adorno es la más sencilla, usaremos la "herramienta de marco elíptica".

Para seleccionar la "herramienta de marco elíptica" pulsamos botón derecho del ratón sobre la "rectangule marquee tool" (herramienta de marco rectangular) en la barra de herramientas lateral, y se nos deplegarán el resto de las opciones.

Pulsamos más o menos donde indico en la siguiente imagen y arrastro hasta el punto 2 haciendo que el borde de la elípsis entre en la zona a decorar, y ya tenemos nuestro borde redondeado.

tutorial_userbar_2


Nota: Si el cuadro de selección elíptica no nos ha quedado muy centrado, podemos recolocar este elemento con la "herramienta de mover" (move tool), bien con el ratón bien con las flechas del teclado.

A continuación pinchamos en la pestaña "edit/copy" o CONTROL+C y pegamos con "edit/paste" o CONTROL+V, lo que dará lugar a una nueva capa que llamaremos "efecto cristal" y que será ese pequeño borde de la elipsis de color blanco que hemos tomado de la primera capa de este mismo color.


Para crear la ilusión de falso reflejo de cristal, seleccionaremos esta capa y le bajaremos la opacidad hasta aproximadamente la mitad.

En esta otra imagen podéis comprobar el efecto sobre un fondo que he cambiado de color.

tutorial_userbar_3


- Método 2: Este sistema es mucho más artesanal. Usaremos la "herramienta de pluma" para trazar un dibujo poligonal y, a continuación, la "herramienta de conversión de puntos" para hacer los suavizados de las aristas de esa figura.

Como véis en la imagen he optado por hacer una figura más compleja para crear ese efecto cristal. Deberéis bajarle también la opacidad a la capa.

tutorial_userbar_4


Otro tipo de adorno que suele aparecer en las "userbar" son las líneas de tipo "scanlines inclinadas", que suelen dar contraste al diseño de fondo.

Hacerlas es muy fácil, nos abriremos un nuevo documento de 3x3 pixels o 6x6 pixels, si es que queremos estas líneas más espaciadas, crearemos una capa nueva pulsando el icono correspondiente en el menú de capas o con SHIFT+CONTROL+N, ocultaremos la capa de fondo, seleccionaremos el lápiz con un grosor de 1 pixel y pintaremos sobre esa nueva capa una línea diagonal.

En esta imagen varios ejemplos de scanlines con los pasos que he dado para crearlas.

tutorial_userbar_5

Para guardas estos diferentes motivos, iremos a la pestaña "edit/deffine patter..." y los llamaremos como queramos, por ejemplo: scanlines inclinadas 1, 2, 3...

Para pintarlas en nuestra "userbar" crearemos una capa nueva entre la que hemos llamado "efecto cristal" y nuestro diseño de fondo (background), seleccionamos la "herramienta de reproducir motivo" y el "motivo" a pintar. Con el botón izquierdo del ratón y sobre la "userbar" pintaremos nuestras "scanlines inclinadas".

tutorial_userbar_6

tutorial_userbar_7

Nota: Os recomiendo que si las scanlines están muy juntas les quitéis opacidad, quedarán más bonitas y no taparán demasiado la decoración.


El último detalle es añadir el texto que queramos usar. Por ser fuentes que tienen la característica de ser muy legibles a pequeños tamaños, se usan las "pixel font", aunque podríamos usar cualquier fuente de texto evitando los efectos de suavizado de Photoshop sobre estas.

Podéis descargaros un montón de fuentes "pixel font" de esta página: www.dafont.com

La capa de texto se suele disponer sobre la de "scanlines" y bajo la correspondiente al efecto cristal. Las fuentes aparecen en color blanco y, normalmente, aparece un efecto de contorno de un pixel de grosor en color negro.

tutorial_userbar_8


Nota: Para crear el efecto de contorno negro sobre la fuente vais a "efectos de capa (blending options)/Contorno (stroke)", le dáis al tamaño de contorno 1 pixel y, en colores, escogéis el negro.


Podéis incorporar un pequeño detalle más opcional, y es el de crear un pequeño marco interior en la barra de 1 pixel de ancho en un color que sea oscuro, que ayudará a aislar el diseño de otros si es que usáis varias "userbar". Para hacerlo vais a las "opciones de capa (blending options)/inner glow (contorno interior)" y configuráis ahí el marco.

tutorial_userbar_9


- Notas finales

Las "userbar" son un espacio maravilloso para expresar nuestra creatividad y originalidad, y aunque su uso es muy extendido, aún no se ha inventado todo y son muchas las vueltas de rosca que podemos dar a su acabado, desde el uso de degradados y otros colores en las fuentes, pasando por la originalidad de textos y motivos, y acabando por las animaciones "gif" o "flash".

A pesar de que este tutorial presenta una manera más o menos artesanal de crear las "userbar", existen programas exclusivos para hacerlas, os presento un par de ellos: Userbarmaker y AmitySource Userbar Generator,


- Galería de "userbar" de "Zona Arcade"

Sabiendo que más tarde o más temprano acabaría haciendo un tutorial sobre este tema, me tomé mi tiempo para conocer qué es lo que se había hecho en cuanto a las vueltas dadas en diseño de las "userbar", y me propuse ir más allá de lo que había visto con algunas de las que veréis a continuación. Especialmente orgulloso estoy de la "Fright Night Fan - Userbar", donde he recreado un pequeño trailer de esta película, que me gustó tanto en su día, allá por 1985.

"Malhablado User" - Userbar
malhablado user
"Rosquilla User" - Userbar
Rosquilla user
"Thunder Force IV User" - Userbar
Thunder Force IV user
"Thunder Force III User" - Userbar
Thunder Force III
"Beautiful Asian Power" - Userbar
beautiful asian power
"Superman Fan" - Userbar
superman
"Batman Fan" - Userbar
Batman fan
"Ironman Fan" - Userbar
Ironman fan
"Wolverine Fan" - Userbar
wolverine fan
"Nightcrawler Fan" - Userbar
nightcrawler fan
"I love Bollywood" - Userbar
I love bollywwod
"I love Bollywood 2" - Userbar
I love bollywwod 2
"Frase Abraham Lincoln" - Userbar
Abraham Lincoln
"Vampire Stories Fan" - Userbar"
vampire stories fan
"Fright Night Fan" - Userbar
Fright Night



- Por Mikonos -

Edited by Mikonos - 5/6/2014, 10:57
 
Web  Top
view post Posted on 23/3/2011, 22:48     +1   -1
Avatar


Group:
Member
Posts:
3,171
Location:
Usa

Status:


OOOOOOh ahora lo entiendo todo!!! me gusta mucho mi firma pero tengo que añadir una barrita de estas de soy friki de... si o si!!!

Gracias Mikonos!!! Un brazo pa ti men!!!
 
Web Contacts  Top
Javier Spectrum
view post Posted on 21/5/2013, 09:55     +1   -1




Gracias por la Informacion y por el Tutorial. La userbar no se si da un aspecto de profesionalidad o mas bien un toque friki a los mensajes pero como ambos aspectos me parecen interesantes ahora mismo voy a intentar hacerme una (como no tengo el Photoshop lo intentare con el Gimp). Si no consigo un resultado decente ya que no soy muy habilidoso pues me conformare con que trasteando con estos programas siempre se coge un poco de habilidad y se aprende algo. Saludos!
 
Top
view post Posted on 5/6/2014, 09:59     +1   -1
Avatar

Restless in Peace

Group:
Administrator
Posts:
42,634
Location:
Alcobendas (Madrid)

Status:


He actualizado este tutorial!


Me he creado una firma más:

Maimi Vice Fan
Miami Vice fan


Todas las firmas son originales y creadas para este documento!


Os animo a decorar vuestro espacio de firma en el foro Zona Arcade! :lol: :wub:



Saludos

Edited by Mikonos - 5/6/2014, 11:55
 
Web  Top
3 replies since 29/6/2008, 12:57   5797 views
  Share