Creación de una UserBar Personalizada #2 UserBar con movimiento

 

Tal y como veiamos en la anterior entrada de éste estilo: Creación de una UserBar Personalizada y como adelantábamos en ésta, con la misma aplicación podíamos crear UserBar con movimiento, como estas que poníamos de ejemplo:

 

Vamos a ver cómo, con prácticamente los mismos pasos que ya realizabamos, podremos construir una de éstas UserBars con movimiento.

Para ello acudimos a la página en cuestión: «Designer User Bars»

Seguiremos prácticamente los mismos pasos que seguiamos en la anterior entrada, exceptuando uno de ellos:

Ya no deberemos importar la imagen como haciamos en el paso 1 con la opción de «Selected Logo Layer Editor» sino que ahora cargaremos la imagen a través de la sección «Scroller Layer» y seleccionando «Add/Edit«.

Vemos que con «Scroller Layer» la ventana es prácticamente idéntica a cuando usabamos la otra opción:

Sólo que ahora disponemos de 2 barras en lugar de una, tendremos una barra de comienzo y otra barra de fin. La imagen por lo tanto partirá desde la barra de comienzo y recorrerá la imagen hasta llegar a la barra de fin. Modificamos dichas barras, así como la imagen para que se ajusten a lo que queremos mostrar y una vez esté realizado, pulsamos sobre el botón «Update Scroll Layer» o «Ponga al día la capa de Scrollbar» según el idioma en el que nos encontremos.
Una vez importado, podremos obtener una previsualización de nuestra barra con «Generate Preview» y modificar en el apartado «Scroller Layer» la velocidad de barrido de la imagen por ejemplo, con «Delay Between Frames (seconds/100)»

Por ejemplo, yo tras realizar ésta acción obtengo los códigos de mi nueva barra:

Y eso es todo, podremos claro está, profundizar en el manejo de éste programa importando capas para que el movimiento dentro de ésta no se limite a este barrido; pero eso ya lo dejo en sus manos para que vayan experimentando.
Además y una vez manejada la aplicación, veremos que su manejo es sencillísimo y que tardaremos cosa de segundos en crear multitud de barras:

Creación de una UserBar Personalizada

En éste post vamos a ver cómo crear una Userbar de manera sencilla y fácil y sin tener que usar ninguna aplicación que tengamos que instalar o bajar a nuestro ordenador.

¿Qué es una Userbar?
Según el término en wikipedia: Las Userbars son imágenes usadas frecuentemente en las firmas de los foros de discusión con las que los usuarios muestran sus gustos y aficiones.
Por ejemplo, ésta de la propia wikipedia:

Podemos encontrar páginas donde buscar éstas userbars y así no tener que crearlas.Por ejemplo http://www.userbars.be/ en la que podemos encontrar algunas de las que fácilmente yo usaría, como éstas:

Incluso existen userbars en formato gif mostrando movimiento dentro de ellas:

Y en la mayoría de los casos éstas imagenes además poseerán un enlace que nos podrá llevar al sitio que eligamos, por ejemplo:

Google en Español

Hay veces que no encontramos la userBar que necesitamos o simplemente no nos gusta y queremos realizar una por nosotros mismos. Pues bie, vamos a aprender a Crear una UserBar.

Vamos a usar un servicio que he encontrado ésta misma tarde y es la razón para crear éste post.
La página en cuestión se llama: «Designer User Bars» y antes de ver la aplicación en sí nos aconsejan ver éste vídeo sobre su uso:

Observamos la vista de ésta aplicación:

Bien, vamos a comenzar a usarlo, yo para éste ejemplo realizaré una userBar para ésta misma página:

1 -Vamos a «Selected Logo Layer Editor» y hacemos click en el botón «Import Image from Url«, éste:

Aparecerá una ventana como ésta:

2 – En el campo «Logo Image URL» introduciremos la URL de la imagen sobre la que nos basaremos para hacer nuestra UserBar. Yo usaré ésta (la imagen de fondo de mi blog)

3 – Hacemos click en el botón «Import/Refresh» y la imagen pasará al apartado «Selection«.

4 – Podemos distinguir en éste apartado lo que será nuestra UserBar, y podremos modificar el tamaño y proporciones de la imagen desplazando la esquina inferior derecha de la imagen (un punto azul). Una vez que lo tengamos donde queremos (yo lo he dejado como en la imagen anterior) haremos click en el botón de abajo del todo llamado «Commit Selection To Current Userbar Logo layer»

5 – Podemos ver entonces, que la imagen que preseleccionamos como Userbar ya se encuentra en el apartado «Selected Logo Layer Editor«.

6 – Si queremos añadir un texto a ésta Userbar iremos al apartado «Userbar Text» y en el campo Text introduciremos el texto en cuestión. Disponemos aquí de otras opciones, como la alineación del texto, color y sombra.

7 – En el apartado «Userbar Shine» podremos modificar o quitar el brillo que se le aplicará a la barra.

8 – En el apartado «Logo Layers» podremos ver las distintas capas aplicadas a la barra, modficar, crear y borra éstas. Tambien disponemos de un par de flechas con las que podremos mover la capa hacia izquierda y derecha, muy útil cuando el texto no se ve o cabe adecuadamente debido a la imagen.

9 – La sección «Scroller Layer» no la veremos en ésta parte. Os adelanto que es para realizar barras con movimiento, tal y como veiamos al principio de ésta entrada.

10 – El apartado «Gradient» sirve para colorear la barra en función de los colores que le indiquemos, sabiendo y manejando además los botones que podemos encontrar en «Selected Logo Layer Editor» y con los que podremos borrar el fondo y hacerlo transparente, dibujar y pintar de determinados colores.

11 – En el apartado «Userbar Preview» y tras dar al botón «Generate Preview» podemos ir viendo nuestra barra en función de los cambios aplicados.

12 – Existe tambien una opción «Premium Options» donde si somos Premium tendremos alguna que otra opción más.

Tras éstos pasos mi barra se ve así:

13 – Una vez tengamos la barra tal y como queramos, haremos click en «Done, Upload to Image Host«, se abrirá una ventana indicando que se va a subir nuestra imagen y a generar código para poder insertar ésta barra allá donde queramos. Tras subirse ésta imagen nos mostrará una ventana parecida a ésta:

Aquí nos indica tres tipos de código, la URL de la imagen, en mi caso ésta:

Y dos tipos de código: BBCode y HTML Code.Son dos tipos de lenguaje que aceptarán unos sitios u otros, dependiendo de dónde queramos subir dicha barra. Para Blogger por ejemplo, nos basta con el HTML. No cerramos ésta ventana todavía ya que aunque ésto pensaba añadirlo en otra entrada, vamos a ver cómo poder agregar ésta barra a nuestro blog de Blogger por ejemplo:
Acudimos a Personalizar Diseño y agregamos un widget/gadget haciendo click en «Añadir gadget«.

Buscamos y agregamos el que se llama «HTML/JavaScript» y en la ventana que surge, en el campo «Contenido» pegaremos el código HTML que se nos proporcionó para nuestra barra, tal y como vemos en la imagen:

Como veis en la imagen, he seleccionado un texto concreto. Este texto (que se trata de una dirección URL) la deberemos sustituir por la URL a la que queremos que nos lleve dicha barra. Además si os fijais en la otra URL que hay en éste código, se trata de la URL de la imagen de nuestra barra, que está alojada en ImageShack. Seleccionamos «Guardar» y listo.