Ir al contenido

publicidad

Foto

..:: Tutorial : Userbars ::.. @@ Actualizado @@


Este tema ha sido archivado. Esto significa que no puedes responder en este tema.
79 respuestas en este tema

  • Desmodius

  • Lord Boros

  • vida restante: 100%
  • Registrado: 19 dic 2005
  • Mensajes: 7.252
#1

Escrito 17 diciembre 2007 - 07:17

Cómo crear Userbars


Antes que todo, el forero ignaF1 ofrece hacer userbars en este post.

Desde hace algún tiempo me planteé hacer un tutorial sobre esta opción secundaria de firma, que bien usada, puede ser muy provechosa para promocionar o difundir cualquier dato que uno quiera (un claro ejemplo: melyza).

He basado este pequeño tutorial en el programa Userbar Generator 2.2 (descarga gratuita); la información está enfocada a saber el manejo básico del programa y conocer la forma de explotar sus posibilidades.

Índice

[*:8b589b2964]Texto y colores
[*:8b589b2964]Efectos
[*:8b589b2964]Imagen de revestimiento
[*:8b589b2964]Guardar y abrir
[*:8b589b2964]Programas adicionales de utilidad
[*:8b589b2964]Animación de Userbars
[*:8b589b2964]Galería de Userbars
Texto y colores

Imagen Enviada

En esta sección se trata el texto de la userbar y su posición absoluta, así como el diseño de los colores primarios del fondo. Veamos, para empezar a elaborar una userbar se necesita definir cuál será el texto, por ejemplo:

Imagen Enviada

Se pueden usar usar las flechas para decidir dónde irá el texto exactamente, o bien, escribir los respectivos valores en los ejes X y Y (generalmente, el eje Y no se modifica). Igualmente se puede desaparecer el texto usando las flechas (por si alguien desea innovar con userbars sin texto :-P )

Después, deben definirse los colores que llevará de fondo:

Imagen Enviada

Imagen Enviada

La opción "Swap" sirve para intercambiar los colores, de esta forma:

Imagen Enviada
---
Imagen Enviada

La opción "Horizontal" al ser desactiva (irónicamente) hace que lo colores luzcan de dicha forma, que luce bastante de acorde con el sentido del efecto de cristal:

Imagen Enviada
---
Imagen Enviada

[Volver]

Efectos
Imagen Enviada

Aquí se trabajan los efectos distintivos, la apariencia básica de la userbar. Las dos opciones que aparecen en principio, "Pattern opacity" y "Glass opacity", son para definir el grado de solidez del color del patrón y el efecto de cristal, respectivamente.

Aquí ejemplos del patrón de diagonales a máxima y mínima opacidades, respectivamente:

Imagen Enviada
---
Imagen Enviada

Aquí algunas de las opciones de patrones de diagonales que pueden elegirse:

4x4 LR
Imagen Enviada

3x3 RL
Imagen Enviada

Diagonal cross
Imagen Enviada

Dots pattern (Patrón de puntos)
Imagen Enviada

Con respecto al efecto de cristal, así luce una userbar sin dicha propiedad:

Imagen Enviada

Aquí algunas de las opciones de efecto de cristal disponibles:

Wave top
Imagen Enviada

Wave right
Imagen Enviada

Existen otras dos opciones dentro de la pantalla llamadas "Add colored border" y "Add glow efect"; la primera agrega un borde del color seleccionado a la userbar. El segundo es el llamado "Efecto de botón"; así luce una userbar sin el efecto "glow":

Imagen Enviada

[Volver]

Imagen de revestimiento
Imagen Enviada

Aquí se llevan a cabo todos los procesos relacionados con la imagen de la userbar. No es necesario activar la casilla "Add image" para insertar una, basta con presionar "choose" y buscar la imagen deseada. En caso de no desear la imagen posteriormente a su inserción, la casilla debe ser desactivada.

La barra de "Opacity" sirve para definir el grado de opacidad (solidez) de la imagen. Así luce una imagen sin opacidad:

Imagen Enviada

Las flechas dentro de la parte de "Image position" sirven para ubicar el símbolo en el lugar deseado. Las flechas dentro del campo de "Image size" sirven para definir el tamaño total de la imagen (incluyendo ancho total de la userbar):

Imagen Enviada

Nota: Es preferente tratar la imagen previamente con algún editor para adaptar su diseño y tamaño dado que el programa sólo permite aumentar el tamaño de la imagen, no decrecerlo.

[Volver]

Guardar y abrir
Imagen Enviada

Éste es el paso final para crear la userbar. Aquí se tienen dos posibilidades principalmente: guardar el proyecto para terminarlo después o guardar el producto final en el formato deseado (la extensión gif es altamente recomendable):

Imagen Enviada

Se tienen otras dos opciones que son "New", para resetear todas las modificaciones que le hallamos hecho a la userbar y volver a la que en un principio muestra el programa, y "Open" para abir algún proyecto (extensión aup) inconcluso o de diseño estándar para varias userbars.

[Volver]

Programas adicionales de utilidad

Anteriormente recomendé crear userbars en formato gif porque de esa forma podrían hacerse animaciones con el programa Gif Animator, para ahorrar el espacio ocupado por la firma. Donde hay 4 userbars, puede haber sólo una:

Imagen Enviada

También es recomendado el programa Open Canvas 4.5, un programa similar a Photoshop, pero más sencillo y fácil de usar, claro con menor cantidad de opciones y posibilidades.

Otro programa que puede resultar de mucha utilidad a la hora de diseñar la imagen que llevará la userbar es el gimp, aconsejado por Daman_1985.

Tutorial sobre GIMP

[Volver]

Galería de Userbars
Gracias a Arsi_16 y Davius21 por su colaboración.

En esta sección he decidido exhibir algunas de mis creaciones para que cualquier forero las use, igualmente Arsi y Davius colaboraron con algunos de sus diseños. Si alguien desea crear una userbar y destinarla a "uso público" de los demás foreros, puede postearla en este hilo y expresarlo, yo las iré recopilando en esta pequeña galería.

Album general

Antes que todo, propongo usar esta userbar como emblema, firmeros dedicados especialmente al diseño de userbars:

Imagen Enviada

(Algo como "userbarseros" 8O )

Arsi

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada <- me encanta
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

Desmo (Yo :) )

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

Dxvid

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

Arckanoid

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

lombax

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

santimoralesgil

Imagen Enviada
Imagen Enviada

[Volver]

Espero que este pequeño tutorial les haya sido de utilidad, ya en alguna otra ocasión quizá me anime a elaborar otro.

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

  • Davius21

  • King

  • vida restante: 100%
  • Registrado: 25 sep 2006
  • Mensajes: 7.054
#2

Escrito 17 diciembre 2007 - 07:24

Este programa es bastante facil de usar, así que no creo que presente algun problema para cualquier meriforero, y mucho menos con este pedazo de tutorial

Te lo has currado Desmo, deberias hacerte una userbar tambien de eso X-D

Saludos, Y con tu permiso, me pillo unas 8D

Imagen Enviada
Imagen Enviada
Imagen Enviada

    zonaforo

  • EXPULSADO
  • vida restante: 0%
  • Registrado: 01 oct 2006
  • Mensajes: 4.563
#3

Escrito 17 diciembre 2007 - 07:24

Excelente post Desmo, ¿te puedo llamar así no? ;)
Se ve que está muy currado.

PD: Me han dado ganas de usar mis viejas Userbars otra vez, tendré que sacarles el polvo. X-D

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

    arsi_16

  • EXPULSADO
  • vida restante: 0%
  • Registrado: 12 jul 2005
  • Mensajes: 19.539
#4

Escrito 17 diciembre 2007 - 07:29

Excelente post Desmodius, buenísimo y les vendrá bien a los que no saben com hacer usarbars. Perdón por no haberte entregado más usarbars como ejemplo, pero no tuve tiempo...

Aún así el post está muy trabajado, felicidades ;)

Imagen Enviada

  • melyza

  • Héroe del Tiempo

  • vida restante: 100%
  • Registrado: 16 feb 2007
  • Mensajes: 6.322
#5

Escrito 17 diciembre 2007 - 07:39

Desmo hiciste que me sonrojara :oops: , me pusiste como ejemplo:llora:, me siento importante... snif...

Bueno bueno, iendo al tema, sabia que cuando dijiste... Offtopic, tutorial, y a eso le agregamos Desmo!, se venia algo muy, pero muy bueno!
yo mis userbars las hacia en fotoshop, pero con el programa que pusiste se me aliviana la vida!!

Realmente excelente post amigo desmo!
realmente eres el rey de los buenos temas y ademas de buenos, provechosos :)

Spoiler




Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Final Fantasy, perfecto por naturaleza
Userbars clickeables!

  • clementucho1

  • TERRESTRIS VERITAS

  • vida restante: 100%
  • Registrado: 23 jul 2003
  • Mensajes: 1.649
#6

Escrito 17 diciembre 2007 - 07:39

Wooow Muchisimas gracias X-D ya me ha servido para una que queria hacer desde hace algun tiempo jeje

salu2!

#7

Escrito 17 diciembre 2007 - 07:45

Te mamaste Desmo. Excelente tuto.

    kirom

  • EXPULSADO
  • vida restante: 0%
  • Registrado: 11 oct 2007
  • Mensajes: 3.373
#8

Escrito 17 diciembre 2007 - 08:38

Esta guapisimo el tutorial:)
Muy bien hecho!! :D

Imagen Enviada

#9

Escrito 17 diciembre 2007 - 08:41

Gracias desmodius,me va a venir de perlas... :D ;)

Saludos.

Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada
Imagen Enviada

  • Perkins

  • Lord Boros

  • vida restante: 100%
  • Registrado: 16 abr 2004
  • Mensajes: 1.901
#10

Escrito 17 diciembre 2007 - 10:48

Gracias Desmodius, esta noche si tengo un ratillo me pondré a "usebarear" XD.

Imagen Enviada

    Seroko

  • EXPULSADO
  • vida restante: 0%
  • Registrado: 09 abr 2006
  • Mensajes: 11.891
#11

Escrito 17 diciembre 2007 - 10:55

Las que he hecho yo:
Imagen Enviada
Esas dos, la de House con PhotoShop, y la de Heroes con ese programa (útil cuando no manejas PhotoShop o no lo tienes).
Imagen Enviada
La hice con PhotoShop, aunque no lo parezca por su sencillez...

Imagen Enviada



  • Daman_1985

  • Gran Lobo Sif

  • vida restante: 100%
  • Registrado: 08 mar 2007
  • Mensajes: 26.237
#12

Escrito 17 diciembre 2007 - 14:19

DESMO!!!

Tio, eres mi nuevo héroe!!! Vaya pedazo de tutorial, y los enlaces están genial, he aquí mi primer userbar:

Imagen Enviada

  • El_Peto

  • Aerondight

  • vida restante: 100%
  • Registrado: 22 jun 2006
  • Mensajes: 48.056
#13

Escrito 17 diciembre 2007 - 14:45

Buen tutorial Desmodius,muchas gracias :D

PD:Me gusta mucho tu usebar de Trespalabrero X-D
Imagen Enviada

#14

Escrito 17 diciembre 2007 - 14:52

Gracias Desmodius, me será util

PD. Te dejo mis userbars, aunque las mangué de una web y hice un gif con el Ulead Gif Animator

Imagen Enviada

    Pr0ZaK

  • EXPULSADO
  • vida restante: 0%
  • Registrado: 27 nov 2006
  • Mensajes: 2.297
#15

Escrito 17 diciembre 2007 - 14:56

Desmodius, te ofrezco el puesto de "mi nuevo héroe".


Este tema ha sido archivado. Esto significa que no puedes responder en este tema.
publicidad