Enviado por b@cHo en Diseño, Windows
Crear userbars animadas en Fireworks
Para cualquier persona que frecuente foros a de saber que el uso de Userbars es cada vez más frecuente, pero para que conformarse con usar el diseño de otra persona cuando uno puede hacer las suyas con gustos colores y animada.
Como se menciona en el titulo, se va a usar Fireworks como herramienta de trabajo, debido a que soy muy tacaño usaremos una version algo vieja (8) pero aun asi es completamente compatible con el CS3 y CS4
Lo primero que haremos sera crear un archivo con las medidas “estandares” de las userbars que vendrian siendo :
350 de ancho por 19 de alto
Ahora necesitaremos los siguientes materiales:
Una imagen de 350 de ancho (puede ser una re-escalada)
Una textura, ya sean las clasicas lineas inclinadas o una punteada.
(Par ahorrar trabajo les dejo la punteada y la lineas inclinadas)
La fuente “Visitor”
Ahora importaremos la imagen de 350 de ancho y añadimos una nueva capa
Seleccionamos la nueva capa y en el menu de opciones seleccionamos “Compartir esta capa” para que este presente en todos los fotogramas sin tener que repetirla.
Ahora seleccionamos la imagen que vamos a animar, y vamos al menu Modificar>Animar>Animar Selección.
En fotogramas ponemos cuantos fotogramas queramos, entre mas mas tiempo dura y viceversa, como en mi caso es una imagen pequeña pondre 40
Ponemos direccion 90 Grados en caso de que quieres que valla de abajo hacia arriba y 270 en caso de que el final de la imagen sea lo que se muestre en el canvas.
En Mover vamos a poner la altura de tu imagen Menos la altura del Canvas (19px) en mi caso seria 123-19 entonces pongo en mover 104 grados.
Damos aceptar, nos saldra una advertencia y le daremos simplemente Aceptar.
Ahora deberiamos tener algo como esto:
Ahora solo nos falta agregar el Regreso de la imagen.
Para esto agregaremos un nuevo fotograma seleccionando el ultimo y dando click en “Fotograma Nuevo”
Volvemos a importar nuestra imagen en el fotograma vacio puesta desde el sentido contrario que antes, por ejemplo la mia esta desde arriba pues la primera la puse desde abajo:
Ahora repetimos el procedimiento de animación solamente que a los grados opuestos (en mi caso a 270):
Con esto deberia ir ahora hacia el sentido opuesto que antes!
Ahora solo faltan los toques finales, selecciona la capa vacia que creamos al principio, e importa cualquiera de las dos texturas que te haya gustado mas.
Ahora solo ajusta su opacidad a 15-20
Ahora añade unos reflejos con un elipses o dibuja tu mismo el patron que quieras, ajusta su opacidad de 20-30 y color de fondo, blanco:
Ahora solo falta un pequeño borde para esto haz un rectangulo de 350×19 sin fondo y con un margen de 1 px de cualquier color (en este caso blanco aunque normalemnte son negro)
Finalmente ponemos un pequeño cuadro de texto con la fuente anteriormente descargada.
Finalmente exportamos como archivo GIF Animado paleta de WebSnap Adaptable sin perdida y 255 de calidad o mas.
Pues solo en caso de que su animacion vaya demasiado rapido, seleccionen todos los fotogramas y cambien el numero de centesimos de segundos.
En caso de que su imagen no tenga fondo pueden usar la función de fundir imagen, de la cual sera el proximo post mío de diseño.
Posts Relacionados
- Crear Userbars en Fireworks Usando fundido Pues en este pequeño tutorial se mostrará como hacer una...
- Crear un planeta con Fireworks Genial no? Pues no es tan dificil de hacer. Siguen...
- Crear y verificar archivos SFV En muchas ocasiones nos encontramos con archivos SFV, normalmente cuando...
- Arquitectura 3 Capas La aquitectura 3 capas o programacion 3 capas consiste literalmente...
- Retoque Digital (Ojos Azules) Hice un tutorial en PDF de como cambiar el color...
Ola qusiera saber como instalas la letra visitor en el programa pliss :)
Usando