En este tuto voy a explicar como hacer un userbar animado. Los Userbar son pequeñas barras que se ponen debajo de las firmas. Y lo hago porque alguien me pregunto como las hacia, asi que acá esta.

Resultado:



Materiales:


* Una Imagen previamente preajustada al tamaño (350 de ancho se usa en casi todos los foros).
* Una textura grid mismo tamaño que la userbar.


Paso 1
Crearemos un nuevo archivo en fireworks con estas especificaciones:



Paso 2
Vamos a archivo-->importar o ctrl+r. E importamos la imagen que queremos animar y añadimos una nueva capa (layer en ingles).



Paso 3
Compartimos esa capa que hemos creado, pero trabajaremos en la capa 1 por el momento.

Paso 4
Seleccionamos la imagne que vamos a animar y vamos a:



Paso 5
Ahora aparecera esta ventana:



Vamos a animar la imagen para que se mueva de arriba hacia abajo y usaremos 60 fotogramas. Mi imagen tiene 259px y nuestra userbar tiene 19px. Para que nuestra imagen se mueva de arriba hacia abajo tenemos que poner 259px-19px en la seccion mover, esto nos dará 240px. "Dirección" nos dice en que dirección se movera la imagen, en este caso 90 para que se mueva de arriba abajo. Le damos aceptar y nos saldra un aviso de que la imagen execede el tamaño de nuestra userbar, le damos aceptar.

Paso 6
Ahora agregamos un fotograma más pulsando donde puse la x y volveremos a importar nuestra imagen.



Pero esta vez la colocaremos a modo de que la parte de abajo quede ajustada con nuestra userbar. De esta manera:



Paso 7
Ahora la animamos igual que hicimos en el paso 5 solo que esta vez en direccion le pondremos 270 para que la imagen se mueva de abajo para arriba.

Paso 8
Ahora seleccionamos la capa 2 e importamos la textura (que previamente hemos hecho), y la ajustamos en nuestra userbar. Ahora ajustaremos la opacidad, lo normal sería entre 15-30 pero eso depende de como nos guste.

Paso 9
Ahora es tiempo de ponerle el mensaje que queramos, como esta userbar la he dedicado a Mötley Crüe, ese será el mensaje que pondré. No olvidemos dejar 1px de borde negro. El tipo de letra y tamaño queda a su discresión, la fuente más común para esto es la Redensek, aunque yo aquí usé la calibri

Paso 10
Ahora haremos algo así:



y ajustaremos la opacidad entre 30 y 35.

Paso 11
Bien ahora tomamos la herramienta rectángulo y hacemos uno de 350x19, dejando 1px de borde. Vamos a propiedades y en categoría de relleno ponemos ninguno.



Paso 12
Bien ahora seleccionamos todos los fotogramas del 1 al 120 manteniendo apachado la tecla shift. Y cambiamos el 7 por un 12 y con esto haciendo que el cambio entre fotogramas sea más despacio. Para hacerlo solo le damos dos clics en el siete ponemos 12 y le damos enter.

Paso 13
Finalmente ahora vamos a archivo-->presentacion preliminar de la imagen. Y la exportamos con estos atributos.



Bueno eso es todo, espero que les sirva. Si tienen alguna duda solo posteen.

Tags: userbar, animated, animado, fireworks, tutorial