MANUAL DE FIREWORKS
Al Abrir Fireworks, encontramos la siguiente Pantalla de Inicio: |
|
Pero aún no tenemos un area de trabajo, que en este caso llamamos "lienzo" (canvas), así que vamos a Archivo(File)>Nuevo(New), y nos aperece esta ventana, que sirve para confirgurar precisamente el area de trabajo: |
|
En ella se nos dan las opciones para determinar el ancho (width) y el alto (heigh) del lienzo; la resolución (que en el caso de diseño web, se suele determinar en 72 pixels; y el sistema de medidas que queremos utilizar: pixels, pulgadas (inches), o centímetros. Nosotros utilizaremos pixels, por ser el sistema más utilizado en medidas para diseño web.
En la misma ventana podemos ver, además, las opciones para determinar el color que llevará el "lienzo" o area de trabajo. Pero es de notar que, aunque definamos un color determinado, aun nos da la opción de utilizarlo de color blanco, o transparente..
Una vez definidas las propiedades del lienzo, ya estamos listos para trabajar.
Por empezar, fijémonos que a la izquierda o en algún lugar de la pantalla, encontramos la siguiente "caja de herramientas":
Son 37 herramientas, algunas de las cuales cambian según lo que se trabaje: dibujos o pixeles.
En la tabla siguiente, sacada del manual oficial de Fireworks, se describen las funciones básicas de cada herramienta en cada modo:
Herramienta |
En el modo de objeto |
En el modo de edición de imágenes |
Puntero  |
Selecciona y mueve trazados en la pantalla. |
Mueve la imagen o los pixeles agrupados mediante un recuadro.
Haga doble click en una imagen para editar los pixeles que la componen. |
Seleccionar detrás  |
Seleccciona un objeto situado detrás del objeto seleccionado. |
Mueve la imagen o los pixeles agrupados mediante un recuadro. |
Seleccionar en nivel inferior  |
Selecciona y mueve recuadros en la pantalla, selecciona un objeto de un grupo o un símbolo. Muestra los puntos de un trazado y selecciona puntos. |
Mueve la imagen o los pixeles agrupados mediante un recuadro. |
Recuadro o recuadro elíptico  |
Activa el modo de edición de imágenes y selecciona un area de pixeles rectangular o elíptica. |
Selecciona un area de pixeles rectangular o elíptica. |
Lazo o lazo poligonal  |
Activa el modo de edición de imágenes y selecciona un area de pixeles de estilo libre |
selecciona o mueve un area de pixeles de estilo libre. |
Varita mágica  |
Activa el modo de edición de imágenes y selecciona un area formada por pixeles de color similar. |
Selecciona un area formada por pixeles de color similar. |
Línea  y formas básicas  |
Dibuja objetos como trazados que se pueden editar. |
Pinta pinceladas de pixeles en un objeto de imagen. |
Pluma  |
Dibuja objetos como trazados que se pueden editar. |
Activa el modo objetos y dibuja objetos como trazados que se pueden editar. |
Texto  |
Crea y edita bloques de texto y abre el editor de texto. |
Activa el modo de objetos, crea bloques de texto, y abre el editor de texto. |
Lápiz  |
Dibuja trazos de lápiz de un pixel como trazados de estilo libre. |
Dibuja trazos de lápiz de un pixel. |
Pincel  |
Dibuja pinceladas como trazados. |
Pinta pinceladas como pixeles. |
Estilo libre  |
Estira o contrae un trazado seleccionado para cambiar la forma del mismo. |
Activa el modo de objeto. |
Remodelar area  |
Remodela las partes de un trazado seleccionado que están incluídas en el cursor "remodelar area" |
Activa el modo de objeto. |
Depurador de trazados
|
Modifica las características de presión y velocidad de un trazado sin modificar su forma. |
Activa el modo de objeto. |
Cuchillo/borrador |
En el modo de objetos esta herramienta se convierte en Cuchillo. Corta un trazado seleccionado para crear varios trazados. |
En el modo de edición de imágenes esta herramienta se convierte en Borrador. Borra pixeles de una imagen. |
Sello |
Activa el modo de edición de imágenes y duplica partes de un objeto de imagen. |
Duplica partes de un objeto de imagen. |
Rectángulos, líneas y elipses:
Obviamente, para dibujar estas formas debo recurrir a las herramientas correspondientes, pero tanto estas como las demás tienen la posibilidad de ser modificada en algunos aspectos. Por ejemplo:
1- Dibuje un rectángulo con la herramienta correspondiente.
2- Ventana (Window)>Objeto (Object) . O Alt+F2
3- Le aparecerá una ventana como esta, la de "Objeto":
En esta ventana Ud. tiene opciones para darle un determinado ángulo de "redondeado" (roundness) a las puntas del rectángulo, y para poner el trazo, hacia adentro, centrado, o hacia afuera con respecto al objeto (stroke). Opciones similares aparecen si va a dibujar elipses o polígonos. Pruébelo. |
|
Pruebe también, teniendo seleccionada la herramienta polígono pero antes de dibujar un objeto: Ventana>Opciones de herramienta (Tool options), y verá que aparecen las siguientes opciones, que le permiten seleccionar:
1- Si va a dibujar un polígono o una estrella.
2- Cuántos lados tendrá el polígono o cuántas puntas la estrella.
3- El ángulo de los lados de la estrella.
La herramienta de línea tiene las mismas opciones que las anteriores en la ventana de Objeto.
Otras herramientas de trazado:
Lápiz  : es para dibujar a mano alzada . El trazo abierto se finaliza normalmente en cualquier lugar. El trazo cerrado, se finaliza en el mismo lugar donde se empezó. A la figura resultante se le puede dar relleno. |
Pincel  : La herramienta Pincel permite pintar pinceladas de estilo libre, mientras que la herramienta Lápiz dibuja trazos de lápiz de un píxel. |
Pluma  : Sirve para realizar trazados segmento por segmento. Los nodos resultantes en este trazado, poseen sub-nodos que ayudan a la modificación en la curva de alguno de esos segmentos. |
El trazado, color, efecto y otras características, son modificables desde la ventana de trazado (stroke). Practique con algunas de las posibilidades que le brinda. |
|
Tanto las imágenes creadas con las herramientas de dibujo, como los trazos cerrados creados con las herramientas de trazo, pueden ser modificadas desde las ventanas de Relleno y Borde (Fill y Stroke) a las que se accede desde el menú ventana (Window). |
|
Edición y remodelado de trazados editando los puntos :
Algunos puntos sobre este tema, sacados del manual oficial de Fireworks: "Los puntos son la estructura de los objetos de
trazado en Fireworks. Cuando se dibuja en el modo de objetos con cualquier herramienta de dibujo de Fireworks, el trazado de resultado se definirá por los puntos especificados al dibujar. El tipo de punto y el aspecto curvo o recto de las
líneas adyacentes están relacionados directamente:
- Un punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones suaves y regulares entre segmentos. |
|
- Un punto de esquina indica que al menos uno de los segmentos adyacentes es una línea recta. |
|
Las dos herramientas más convenientes para realizar la modificación de los trazados mediante la edición de puntos, son las de Pluma  y Nivel inferior  .
Edición y remodelado de imágenes :
Las imágenes aparecen seleccionadas por defecto con una delgada línea azul. Haciendo clic en cualesquiera de sus nodos con la herramienta de Selección  , podemos distorsionar el tamaño, aunque no su forma. Pero si queremos cambiar el tamaño conservando las proporciones , debemos utilizar la herramienta Escalar  .
Al utilizarla, la imagen aparece seleccionada como muestra la figura. La imagen azul es la original, mientras que el burde punteado que sobresale, muestra el aumento de tamaño que se está ejecutando, pero, nótese, este aumento es de modo PROPORCIONAL, tanto vertical como horizontalmente, siempre y cuando los cambios se hagan pinchando en los nodos de las esquinas. |
|
Otra de las opciones que da la herramienta de escalar, es la de girar el objeto. Esto se consigue cuando se coloca el mouse entre dos nodos de la figura, y el cursor adopta la forma de una curva de giro. |
|
En el único caso en que se puede cambiar tanto el tamaño como la FORMA original de las imágenes, es en el de las dibujadas mediante las herramientas de dibujo, y con la herramienta Nivel inferior 
Insertar imágenes:
1- Menú Insertar (Insert)> Imagen (Image).
2- Seleccionar la imagen que se va a insertar.
3- OK o Aceptar.
Las imágenes se insertan con su tamaño y peso original. En caso que el tamaño del lienzo (canvas) difiera con el de la imagen, podemos arreglar esta diferencia mediante el comando Recortar (Trim) del menú Modificar (Modify).
En caso que las imágenes deban ser insertadas desde un Scanner, es aconsejable determinar la resolución en 200 dpi, y no en 72, como es común para resolución web, ya que de esta manera se obtiene INICIALMENTE una imagen de buena calidad, la que después puede ser optimizada para web.
Efectos:
Son aplicables tanto a las imágenes realizadas con las herramientas de dibujo, como a aquellas que insertamos desde fuera de Fireworks. Para aplicarlos debemos tener, primeramente, seleccionada la imagen a la que queremos aplicarlos, y luego ir al menú Ventana(Window)> Efectos(Effect). Entonces aparecerá esta ventana:
En principio aparece sin ningún efecto seleccionado. |
|
Pero al desplegar el menú aparecerán las opciones para optar por alguno de ellos, o por los efectos que se utilizan por defecto (use defaults). |
|
Los efectos "por defecto" son cuatro: 1. Inner Bevel, 2. Outer Bevel 3. Drop Shadow, 4. Glow |
|
Y cada uno de ellos posee un menú desplegable (que se activa al hacer clic en la "i" azul que se ve en la imagen) para configurar en detalle cada uno de los efectos que se elijan. |
|
Otra de las opciones para aplicar efectos es la de utilizar la "Librería de estilos", que se activa mediante el menú Ventana (Window), y luego Estilos (Styles). |
|
Fireworks también le da la posibilidad de crear sus propios estilos e incorporarlos a la lista de los que ya existen.
Para eso debe partir de una imagen existente a la que Ud. le haya aplicado los distintos efectos y estilos que quiera incorporar.
1- Seleccionar la imagen.
2- Haga clic en el botón Estilo Nuevo (New Style) de la ventana de estilos: |
|
Aparecerá la ventana de Estilo nuevo, en la que Ud. podrá elegir las propiedades que el nuevo estilo tomará de su imagen, y el nombre que tendrá este nuevo estilo. |
|
Optimización y exportación de gráficos simples :
Para la primera parte de este trabajo nos manejamos básicamente con dos elementos que nos da Fireworks: las opciones de previsualización (preview), y las opciones de optimización.
Tenemos hasta cuatro opciones de previsualización. De ellas, elegimos la que nos parezca más apta como producto final. |
|
En las opciones de optimización tenemos a mano los formatos en los cuales podemos optimizar la imagen, y algunas otras que hacen referencia a la calidad que tendrá como resultado final. La combinación que le demos a estas opciones es la que definirá, en mayor o menor medida, una imagen de máxima calidad con el menor peso posible. |
 
|
|
Una vez optimizada la imagen, sólo falta exportarla a la carpeta que tengamos designada a tal efecto. Para eso vamos a ir al menú Archivo (File)> Exportar (Export), o directamente al botón Exportar de la barra de herramientas superior. Luego seleccionamos la carpeta donde queremos guardar el archivo, le ponemos un nombre, y finalmente aceptar.
Enmascaramiento de imágenes:
"Las máscaras se crean agrupando dos objetos en un grupo de máscara El objeto superior (la máscara) se utiliza para crear un efecto de recorte sobre el objeto inferior. Puede utilizar tanto una imagen como un objeto con trazados como objeto superior de la máscara" (del manual oficial de Macromedia).
En este caso tenemos los dos objetos a utilizar: una elipse, que actuará de máscara, y la foto o imagen que queremos enmascarar.
|
Tomemos la precaución de que la máscara (en este caso, la elipse) esté por sobre el objeto a enmascarar.
|
Luego, aplicamos -Modificar (Modify)>
-Máscara (Mask)>
-Agrupar como máscara (Group as Mask).
|
En este caso, no importa el color de la imagen que vaya a actuar de máscara (aquí es la elipse), porque se encuentra SOBRE la imagen a enmascarar, pero nótese qué es lo que pasa cuando esta misma elipse se halla POR DEBAJO del objeto:
En este caso, como la máscara era negra, la figura tomó toda la escala de grises del color que tenía debajo |
|
De ahí podemos concluir que, cuando la máscara se halla por debajo del objeto, este adoptará la gama de colores que le defina la máscara.
En la foto de la derecha, la máscara era color bordó. |
|
Gifts animados:
"Una animación GIF está formada por una serie de imágenes fijas que aparecen de forma consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear una animación en Fireworks, cada imagen se sitúa en un
fotograma distinto. A continuación, todas las imágenes de una animación se exportan en un archivo GIF animado. En Fireworks es posible abrir y editar animaciones GIF existentes o crear otras nuevas". (Manual oficial de Macromedia)
Esto implica que para crear un GIF animado debemos tener, en primera instancia, esa "serie de imágenes fijas" que lo conformarán, ya sean diseñadas por nosotros o provistas por otros medios.
Por ejemplo, tenemos varias imágenes individuales que simulan la frecuencia de movimientos que tendrá el gif animado final
 |
Estas las pegamos, en un lienzo nuevo, una sobre otra pero perfectamente centradas.
|
Cuidando de tener seleccionadas TODAS las imágenes superpuestas, vamos a Ventana(Window)>Fotogramas(Frames).
En esta ventana veremos
que la imagen está
aún compuesta por un solo frame.
|
Entonces vamos, en esa misma ventana, al botón Distribuir en Frames (Distribute to frames), y veremos cómo, automáticamente, las imágenes que teníamos en uno solo, se distribuyen cada una en un frame distinto.
|
Ahora configuraremos los "tiempos" de la animación.
El primer aspecto a configurar es cuántas veces se repetirá el efecto animado. En la parte inferior de la ventana Fotogramas (Frames), tenemos el botón que nos da las opciones de hacerlo hasta 20 veces, continuamente (Forever), o sin repetición alguna.
 |
Podemos también configurar la duración del tiempo de los frames, individual o generalmente. Esto lo podemos hacer cliqueando dos veces en el número que aparece a la derecha de cada número de frame. Alli aparecerá un menú en donde podemos configurar el tiempo que durará CADA FRAME. Si queremos configurar la duración de TODOS los frames, simplemente habrá que seleccionarlos todos antes de hacerlo. |
|
Otras opciones de configuración:
1- Para agregar un frame.
2- Para eliminar el/los frame/s seleccionado/s.
 |
Finalmente, para probar el producto final, hacemos clic en el botón Play, abajo a la derecha, en la ventana del documento. Y allí veremos la animación en curso. Y ahora ... sólo basta pedirle tres deseos ... |
|
Con respecto a los efectos que podemos aplicar a los GIF's animados, sólo resta señalar dos cosas:
1- Los efectos referidos a sombras y texturas, son los mismos aplicables a cualquier imagen.
2- Los que están referidos al movimientos de las imágenes habrá que determinarlos por medio de una conveniente distribución en los distintos frames.
Con respecto a la optimización y exportación de un GIF animado:
1- Para la optimización de las imágenes que componen la animación, deben tenerse seleccionados todos los frames.
2- La exportación es exactamente igual que en un GIF no animado, sólo que en el mismo proceso de optimización hay que especificar que la exportación será como GIF animado.
Creación y organización de capas:
"Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustración que se dibujan en distintas hojas superpuestas transparentes. Cada objeto de un documento reside en una capa.
Puede crear todas las capas antes de comenzar a dibujar o ir añadiéndolas cuando sea necesario. También puede reorganizar el orden de apilamiento de las capas o de los objetos de una sola capa".(Manual Oficial de Macromedia)
La ventana que nos permite trabajar con las capas (layers), la podemos visualizar desde el menú Ventana(Window)>Capas(Layers).
Por defecto, el lienzo nos aparece con dos capas: la capa web, en donde posteriormente ubicaremos los objetos de zona interactiva; y la capa 1.
Los objetos que Ud. vaya dibujando, aparecerán por defecto en la capa 1, pero Ud. tiene la posibilidad de agregar más capas mediante el botón Agregar capas.
El hecho de trabajar en capas le dará la posibilidad de trabajar con diversos efectos. |
|
En un documento recién abierto, inserte una foto. Esta aparecerá en una capa independiente de la capa 1. Posiciónese en la capa 1 haciendo clic sobre ella y dibuje una figura geométrica cualquiera (recuerde que estamos probando), y luego colóquela sobre la figura
.  |
En el menú desplegable que se muestra en la imagen, se pueden encontrar los efectos disponibles para trabajar en capas, pero no olvidemos que esto dependerá del color de la figura que usemos en la capa que actuará de máscara.
Si hacemos clic en el ojo correspondiente a cada imagen, veremos que esta se o culta o se muestra, según se oculte o aparezca el ojo. Y la presencia del lápiz junto a alguna imagen, nos indicará que se está trabajando o que se tiene seleccionada esa imagen. |
|
Historial del documento:
"El panel Historial permite ver, cambiar y repetir el historial del documento. En este panel se enumeran las acciones más recientes que se han realizado en Fireworks, conforme al número especificado en Pasos de deshacer". (Manual de Macromedia)
O sea que con el historial podemos:
1- Deshacer y rehacer comandos frecuentes.
2- Seleccionar un número determinado de comandos realizados para repetirlos.
3- Seleccionar y guardar un grupo de comandos recientemente realizados, para guardarlo como un solo comando.
Abra la ventana del historial con el menú Ventana(Window)> Historial(History). Ahí podrá ver las acciones que ha ido realizando, desde la primera a la última, de arriba hacia abajo.
Si selecciona una de las acciones y luego presiona el botón Volver a reproducir (Replay), obviamente repetirá esa acción. |
|
Si selecciona una o más acciones y luego presiona el botón Guardar como comando, aparecerá una ventana en donde le pedirá el nombre para el nuevo comando. Posteriormente, cuando vuelva a necesitar esa acción o conjunto de acciones, las encontrará agrupadas en un solo comando dentro del menú Comando. |
|
Búsqueda y reemplazo:
Nos falta hacer referencia ahora a la ventana de búsqueda y reemplazo, similar en tareas a las que encontramos en los procesadores de texto. La ventaja consiste en que podemos hacerlo con otros elementos, además de texto:
"Utilice Buscar y reemplazar para buscar y reemplazar elementos, como texto, valores URL, fuentes y color, en un documento. Con Buscar y reemplazar se puede buscar en el documento actual o en varios archivos a la vez.
Durante el uso de Buscar y reemplazar, Fireworks puede efectuar un seguimiento y guardar un registro de cambios en el panel Historial del proyecto. Buscar y reemplazar sólo funciona con archivos PNG de Fireworks o con archivos que
contienen objetos vectoriales, como archivos FreeHand, CorelDRAW e Illustrator". (Manual de Macromedia)
La ventana de Búsqueda y reemplazo aparece desde el menú Ventana(Window)>Buscar y reemplazar(Find and replace). |
|
Símbolos e instancias:
"Utilice símbolos e instancias para simplificar las animaciones de Fireworks y facilitar el trabajo de edición. Las instancias son representaciones de un objeto Fireworks original, que recibe el nombre de símbolo. Cuando se modifica el objeto símbolo (original), las instancias (copia) cambian automáticamente para reflejar las modificaciones efectuadas en el símbolo.
Puede utilizar símbolos e instancias para modificar fácilmente ilustraciones complejas que contienen varias copias de objetos, compartir componentes a través de estados de rollover y crear y modificar animaciones rápidamente. Los símbolos se almacenan en el panel Biblioteca. Se puede crear un símbolo a partir de cualquier objeto, texto o grupo. Los símbolos pueden incluir otros símbolos". (Manual de Macromedia) |
Para crear un símbolo vamos a Insertar(Insert)> Nuevo símbolo(New Symbol), y entonces aparece la ventana en donde aparecen dos opciones:
1- Para elegir si el símbolo será un gráfico o un botón.
2- Para darle el nombre a ese símbolo.
 |
En el caso de optar por un gráfico, la ventana que aparecerá, será casi idéntica a la del lienzo común de trabajo, con todas las posibilidades que esta brinde. En el caso de optar por un botón, la ventana de trabajo para este, aparece con las opciones para determinar su apariencia en cada una de las instancias.
Instancias de un botón:
- Up : la apariencia inicial del botón.
- Over : apariencia del botón cuando es señalado por el mouse.
- Down : apariencia del botón al momento de hacer clic sobre él.
- Over while down : apariencia del botón al estar mostrando el link al que hace referencia. |
|
Ambos tipos de símbolos quedan almacenados dentro de la Librería (Library) que se halla en el menú Ventana(Window). |
|
Tanto botones como gráficos, pueden ser utilizados varias veces sin necesidad de repetir su elaboración. Bastará seleccionar el que necesitemos dentro de la Librería , y transportarlo con el mouse hasta el lienzo.
Creación de zonas interactivas y mapas de imagen:
"Al acceder a la página principal de la mayoría de sedes Web, lo más probable es que encuentre un mapa de imágenes. Un mapa de imagen es un gráfico o grupo de gráficos que aparece en una página Web y que dispone de áreas especiales
denominadas zonas interactivas. La ubicación y el tamaño de la zona interactiva se definen en el archivo HTML de la página Web. Al desplazar el cursor sobre una zona interactiva, éste adquiere la forma de una mano pequeña. Normalmente, al hacer clic en una zona interactiva se abre una página Web y para esto, se hace referencia a la dirección URL que se le ha asignado en el código HTML.
El proceso de creación de un mapa de imagen en Fireworks sigue estos tres pasos generales:
Creación del mapa de imagen en el documento PNG de Fireworks
Exportación del gráfico y de los archivos HTML
Ubicación del HTML del mapa de imagen en la posición adecuada de la sede
Web o en otro archivo HTML". (Manual Oficial de Macromedia)
Para crear un mapa de imagen es necesario, primeramente, elegir un gráfico de origen, que puede ser una serie de botones, ventanas, una lista de títulos o cualquier imagen desde la que se determinarán las zonas interactivas que compondrán el mapa de imagen.
El archivo PNG de Fireworks en el que se crea el mapa de imagen no es el mapa de imagen en sí. Para crear un mapa de imagen en un navegador Web, es preciso combinar el gráfico exportado y los archivos HTML.
Para crear las zonas interactivas tenemos la herramienta Zona interactiva en cualquiera de sus tres modalidades  según la zona que deseemos sea cuadrangular, circular o poligonal. Posteriormente, la asignación de vínculos (valores URL) a esas zonas, se hará mediante la ventana correspondiente, que aparece al dar doble clic sobre la zona interactiva |
|
En esta ventana aparecen las opciones para:
1- Determinar la dirección URL.
2- Determinar el texto que aparecerá en el Alt con el mouse.
3- Determinar el modo en que se abrirá la ventana (self, blank, etc)
4- El color a utilizar en la máscara web.
5- La forma que le daremos a la máscara web. |
|
Introducción de valores URL absolutos o relativos:
Los valores URL que se introducen en el inspector Objeto o en el panel URL pueden ser absolutos (externos) o relativos (internos): Si desea establecer un vínculo con una página Web que no pertenezca a su sitio Web, debe utilizar una dirección URL absoluta. Para establecer un vínculo con una página Web de su sitio Web, puede utilizar una dirección URL absoluta o relativa.
Los valores URL absolutos (externos) son direcciones URL completas que incluyen el protocolo de servidor, que suele ser http:// en el caso de páginas Web. Por ejemplo, http://www.macromedia.com/support/fireworks es la dirección URL absoluta de la página Web de asistencia técnica de Macromedia Fireworks. Aunque los valores URL absolutos son siempre direcciones exactas que no dependen de la ubicación del documento origen, los vínculos no se establecen correctamente si se traslada el documento de destino.
Los valores URL relativos (internos) están relacionados con la carpeta que contiene el documento origen. Los valores URL relativos suelen ser los más fáciles de utilizar para establecer un vínculo con archivos que van a permanecer en la misma carpeta que el documento actual.
Barras de navegación:
1- Cree un botón con todas sus instancias.
2- Luego pase a crear el gráfico de fondo sobre el que irán los botones, o sea, el "cuerpo" de la botonera.
3- Distribuya los botones sobre el gráfico y adapte el tamaño del lienzo al de la botonera.
4- Agregue los links correspondientes a los botones. |
|
Exportación como HTML:
5- Haga clic en la herramienta de exportación y fíjese que esté seleccionada la opción de exportar usando los "slices" y en estilo HTML. |
|
6- Si usa Dreamweaver como programa de html, encontrará la herramienta de Fireworks HTML  , al presionarla, se abrirá una ventana de diálogo en donde deberá incluir el HTML creado en Fireworks, para luego darle el OK
 |
|
Importación con zonas de división:
"La división de imágenes tiene las ventajas siguientes:
- Puede optimizarse cada parte de la imagen por separado, con lo que se obtienen archivos más pequeños y fáciles de descargar.
- Pueden exportarse algunas partes de la imagen como archivo GIF y otras como JPEG, con lo que se utiliza lo mejor de cada formato de exportación.
- Pueden designarse páginas para utilizar algunos de sus elementos gráficos en todas las páginas y cambiar sólo las divisiones que tienen contenidos exclusivos, lo que proporciona velocidad al sitio Web. Además, se puede editar y reemplazar un elemento gráfico de una división sin tener que volver a descargar todas las divisiones de una imagen.
- Pueden crearse rollovers con divisiones" .(Manual de Macromedia)
Vamos a tomar como ejemplo una imagen ya optimizada que pesa 40,7 Kb. Tomemos en cuenta que la medida de peso idealpara un HTML, con imágenes y todo, es de 50 Kb. Por tanto nos encontramos ante una imagen realmente "pesada". Si a esto le sumamos que, en este ejemplo, NO QUEREMOS bajarle la calidad, tenemos en manos un problema, pues el el HTML que contenga esta foto va a tardar en bajar, y no queremos que el usuario se canse de esperar y cambie de página.
La única opción que nos queda es dividir la imagen, para que baje por partes, y el usuario no tenga que esperar a que baje completamente para empezar a ver algo. Para esta operación de división utilizamos la herramienta División  , y en este caso nos ayudaremos con las guías para dividir la imagen en varias partes. |
|
Una vez hecho, definimos las divisiones de acuerdo a las que ya definieron las guías, con la herramienta dividir. Las divisiones nos quedarán con una "máscara" verde. Cada una de estas zonas definidas será una imagen cuando se exporte todo como un HTML. En la imagen se pueden ver las divisiones y una de ellas seleccionada. Si nos fijáramos en la vista previa mientras la mantenemos seleccionada, podríamos ver que esa imagen pesa 5,28 Kb. Ese es el peso aproximado de cada una de las divisiones. |
|
El próximo paso es la exportación. Debemos fijarnos que estés seleccionadas todas las zonas de división, y también que estén seleccionadas las opciones correctas:
1- Que utilice las áreas de división.
2- Que utilice el mismo programa de diseño web que utilizaremos para construir nuestra página. En este caso, Dreamweaver. |
|
Hay que mencionar dos puntos más a propósito de las divisiones:
1- Existe la herramienta de División poligonal  , en caso que las divisiones no sean exactamente cuadrangulares.
2- Las zonas poligonales pueden actuar como zonas interactivas, en el sentido que se les puede asignar también vínculos URL.
Rollovers simples:
Los botones tienen como una de sus características principales la posibilidad de vincular direcciones URL, ya que incluyen una zona interactiva especialmente para estos casos. Pro esta zona interactiva, por defecto e invariablemente, mantiene una forma rectangular. De modo que, si yo deseo que el botón realice un rollover de color o imagen, la otra forma o imagen a utilizar, deberá tener también esta forma.
Qué pasa en los casos en que necesito un botón circular con algún efecto? Recurro a la creación de un rollover simple.
Para esto debemos tener, en primer lugar, las dos imágenes que actuaran cada una en un FRAME distinto. Luego, posicionados en el frame que mostrará la imagen por defecto del rollover, voy a Ventana>Comportamiento (behaviors). Enseguida el programa nos preguntará si queremos aplicar el rollover 1) A toda la imagen o 2) A sólo una parte. Como el rollover que estamos armando es uno simple, elegimos la opción 1 |
|
A continuación cliqueamos en el signo " + " de la misma ventana, y nos pasará a mostrar la acción que queremos que realice.
Por defecto, nos marcará el evento "Mouse Over", que es cuando el mouse está sobre la imagen. Es entonces cuando se ejecutará el rollover. |
|
Click Aquí para solicitar más INFORMACIÓN
WWW.CEINFOR.NET
|
