Por Patricio Figueroa
07 Febrero de 2003 En
este taller decidimos armar un banner, elemento estándar
para hacer publicidad en la web, pensando en cualquiera que busque
promocionar su página en la red.
El
primer paso para crear un banner en Fireworks es abrir un documento
nuevo con dimensiones de 468 x 60 pixeles (para abrir un nuevo archivo
debemos seleccionar la opción File>> New). Aparecerá
un documento en blanco en cual –en nuestro caso- dibujaremos
un vector rectangular con la herramienta correspondiente.
Una
vez dibujado el rectángulo, podemos elegir el color de nuestra
figura.
Efectos
y texturas
Revisaremos
dos opciones para que nuestra creación quede con una apariencia
profesional.
Al
seleccionar el recuadro, Fireworks MX nos da la posibilidad de poder
elegir la textura de su relleno, a través de opciones 100
% configurables por el usuario. Estas aparecerán automáticamente
en la barra de propiedades, donde debemos desplegar el menú
correspondiente.
Elegida
la textura que más nos haya gustado, encontraremos en la
misma barra de propiedades otras opciones, como el nivel de transparencia
de la textura o si queremos que los bordes sean sólidos (hard)
o difusos (feather).
Ya
teniendo la textura definida, otra función que incluye Fireworks
son los Efectos (effects) con los cuales podemos sombrear o dar
relieve tanto a figuras y textos, como a imágenes del tipo
bitmap. Para aplicar efectos a nuestro banner el procedimiento es
parecido a la acción de usar rellenos. Los efectos más
utilizados son:
Bevel
and Enboss (Bisel y relieve): Esta opción nos permitirá
darle relieve o profundidad al objeto deseado.
Shadow
and glow (Sombras y brillos): Uno de los efectos más
recurrentes a la hora de diseñar son las sombras. Acá
tenemos la posibilidad de hacer sombras interiores (inner shadows)
y sombras exteriores (drop shadows).
Al
igual que en el caso de los rellenos, los efectos también
tienen la opción de se configurados en detalle. Gracias a
esto se puede determinar el tamaño de la sombra, la distancia
con el objeto, la profundidad del relieve, etc.
Nota:
Para que los efectos y rellenos resulten, debemos asegurarnos que
el elemento al cual queremos aplicarlos esté seleccionado.
Esto se comprueba fijándose en que sus bordes estén
de color celeste.
Animaciones
Aprovecharemos
que Fireworks permite crear gifs animados de una forma muy sencilla,
para poner en movimiento el texto de nuestro banner.
Lo
primero que debemos hacer para animar un objeto es seleccionarlo.
En nuestro caso le daremos movimiento a la leyenda www.mouse.cl
para que cruce por todo el banner.
Luego
de realizar esta tarea presionamos el botón secundario del
mouse donde aparecerá la opción “Animation”
(animación), donde a su vez debemos hacer clic en “animation
selection”. Acá aparecerá la siguiente ventana:
Los
frames son los cuadros que tendrá la animación. En
la práctica, mientras más frames tenga el movimiento,
más lento será este. Por otra parte, si tiene pocos
cuadros la acción será muy rápida. En nuestro
ejemplo nos decidimos por 20 frames.
Cuidado!!!
Crear “N” cantidad de frames significa que se crearán
cuadros en blanco en cada uno de los cuales debemos asegurarnos
de copiar los otros elementos del banner, excepto el objeto animado.
Exportar
a HTML
Una
vez lista nuestra creación, podemos generar el banner incrustado
en una página web. Para esto debemos dirigirnos al menu File
y seleccionar Export (exportar), donde hay que escoger la opción
Html and Images, como muestra la imagen.
Ponemos
a tu disposición el archivo original
(en formato PNG) para que puedas descargarlo y así aclarar
todas las dudas que te puedan surgir.
En
la próxima parte de este taller aprenderemos a construir
nuestros propios botones.
|
Luego de conocer las herramientas básicas de Fireworks MX,
en esta nueva entrega del taller construiremos un banner para aplicar
lo aprendido. En esta tarea usaremos las distintas opciones de efectos
y rellenos, y la posibilidad de animar objetos que posee este software.
