Tutorial | Animar banner con Fireworks

 Banner diseñado con Fireworks, sencillo, sin movimiento

Uno de los programas que más uso para diseñar, ilustrar y subir mis imágenes a la red es el Fireworks. Pero, oh problema!, son pocos los buenos tutoriales sobre diseño, ilustración y/o animaciones que hay en la red usando este programa, salvo para casos excepcionales como el diseño de iconos, por ejemplo. La mayoría de los diseñadores, que se enorgullecen de serlo, usan programas como el Illustrator o el Photoshop. No digo que estos otros programas no sean buenos, de hecho son excelentes, sino que como herramienta útil, fácil de usar y práctica para subir a la red, prefiero el Fireworks, de lejos.
Tomando en cuenta lo anterior, como tuve que ponerme a investigar para hacer la animación de un banner que me pidieron, acá les dejo un tutorial sencillo, con toque AquaVioleta, que armé a próposito para la ocasión, y para dejar mi granito de arena en red, de modo que quien lo necesite pueda "ayudarse" un poco. El primer resultado del banner es la imagen que está al principio del post. El resultado final tendrán que verlo después de todo el proceso.

Animar un símbolo (corazón) con Fireworks

Heart ChickeeBum! ®

1. Crea una figura cerrada. Por ejemplo, un corazón:
a) Usa la herramienta Pluma para crear la primera mitad del corazón. Algo más o menos así:




b) Después, selecciona, copia y pega, esa misma parte, para crear la otra mitad del corazón. Y gírala, en sentido horizontal, para poder armar la figura completa. Sería algo así:



d) Termina de unir el corazón:



e) Para que ambas figuras queden unidas, como una forma cerrada, vete al menú: Modificar, selecciona: Símbolo y luego: Convertir en Símbolo. Ahí, ajusta las propiedades, Nombre: Corazón (por ejemplo) y Tipo: Gráfico.

2. Copia y pega 2 veces más ese mismo corazón. Te van a quedar tres corazones en capas:




3. Selecciona el corazón central, y añade efectos de ajuste de color. Esto se hace en el menú de propiedades de la figura. Para esto hay que ir a Propiedades, seleccionar: Filtros, luego: Añadir efectos, Ajustar color: Matiz/Saturación y llevar el matiz al color hasta el que queremos degradar (-180, por ejemplo).

4. Ahora hay que disminuir el tamaño del corazón central. Para esto hay que usar la herramienta Escala. Esto debería quedar así:




5. Ubica el corazoncito en el centro del corazón del fondo y cúbrelo con el otro corazón, de modo que parezca una especie de sándwich.Algo así, primero:


6. Y así, después:



6. Selecciona los tres corazones y únelos para formar la animación. Para esto tendrás que irte al menú Modificar : Símbolo: Entre instancias. Ahí ajusta los valores: Pasos (21, por ejemplo) y selecciona Distribuir en fotogramas. Te va a quedar así:



7. Chaz! Ya tienes un corazón que late en colores. El ritmo se lo puedes cambiar variando la velocidad de los fotogramas en el menú de Fotogramas y Historial.

8. Recuerda: para verlo latir tipo GIF fuera del programa, tendrás que exportarlo. Vete al menú Archivo, selecciona: Presentación preliminar de la imagen... y después: Opciones. En ese menú, selecciona el Formato: GIF Animado, la Paleta: Exacta y haz click en  Exportar. Dale un nombre al archivo, el que más te guste. Deja clickeado Exportar: Sólo imágenes. Y listo! Ya tienes un Corazon animado en GIF. Yo me animé un poquito más y le añadí un toque AquaVioleta al símbolo. El banner con animación GIF me quedó así:


Heart ChickeeBum! ®
Banner GIF, animado con Fireworks ^__^


Por cierto, para armar este post, me ayudé con un tutorial que está en YouTube, al que le interese puede verlo acá.

Comentarios

Entradas populares