Manual de Fireworks Cs3

Dirección de Normatividad e Infraestructura Tecnológica Manual de Fireworks CS3

Dirección de Normatividad e Infraestructura tecnológica Manual de Fireworks CS3

Departamento de Capacitación Especializada

BIENVENIDA

La Dirección de Normatividad e Infraestructura Tecnológica con el afán de

contribuir al mejoramiento del desempeño laboral de Servidores Públicos, ha

adoptado como una de sus estrategias, la capacitación en materia de tecnologías

de la información especializadas, proporcionando conocimientos sobre el uso de

recursos informáticos.

Por lo cual lo invitamos a participar entusiasta y activamente en el curso taller de

“Fireworks CS3 Básico”, que al término del curso-taller el participante será capaz

de desarrollar habilidades para el diseño de gráficos enriquecidos para la web.



PROPÓSITO

Al término del curso-taller el participante será capaz de desarrollar habilidades

para el diseño de gráficos enriquecidos para la web.



RESULTADOS DE APRENDIZAJE

1. Conocer y utilizar el entorno y el área de trabajo de Fireworks CS3.

2. Diseñar y editar gráficos (Vectoriales, Mapas de bits y de Texto) en

Fireworks CS3.

3. Crear animaciones en Fireworks CS3.

4. Diseñar gráficos enriquecidos para la Web en Fireworks CS3.

5. Optimizar y exportar gráficos en Fireworks CS3.



INTRODUCCIÓN El siguiente material consta de 5 temas principales, los que abordan las posibilidades que ofrece el programa de Fireworks CS3. En el primer tema, expone las herramientas y los componentes que en su conjunto conforman la interfaz de Fireworks CS3. El segundo tema es bastante amplio debido a que aprenderá a utilizar las herramientas así como su configuración para la creación y edición de gráficos vectoriales y de mapas de bits. En el tercer tema, aprenderá a crear animaciones mediante la utilización de fotogramas y exportarlos al formato de GIF animado. En el cuarto tema, aprenderá a crear gráficos de símbolo botón, áreas interactivas con comportamientos web, Plantillas y Galerias de diapositivas (Slideshows) para su utilización en la Internet. En el quinto tema, aprenderá a exportar objetos aplicando diversas configuraciones y extensiones de formatos de gráficos para la optimización de los mismos y poder utilizarlos en diversos medios impresos o electrónicos.



ÍNDICE

TEMA 1 Utilizar el entorno y el área de trabajo de Fireworks CS3 ...................................................... 7

El entorno de Fireworks CS3. ................................................................................................ 7 Cambio del tamaño, color y resolución del lienzo. ................................................................... 8 Abrir una imagen y cambiar la resolución de la misma. ............................................................ 9

TEMA 2 Diseñar y editar gráficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3 ................. 11

Dibujar formas básicas con las herramientas para crear gráficos vectoriales. ............................. 11 Selección y edición de gráficos vectoriales. ............................................................................. 12 La organización de los objetos. .............................................................................................. 13 La transformación de los objetos .......................................................................................... 13 Aplicación de efectos a vectoriales ......................................................................................... 14 El modo mapa de bits ........................................................................................................... 15 Crear selecciones en modo mapa de bits ................................................................................ 15 Edición de mapas de bits. ..................................................................................................... 16 Aplicar efectos a mapa de bits ............................................................................................... 17 Las mascaras y las capas ...................................................................................................... 19 Texto Enmascarado .............................................................................................................. 19 Creación de mascaras utilizando herramientas de selección ..................................................... 20 Creación de mascaras utilizando la herramienta Pluma y Degradado ......................................... 21 Los Símbolos ....................................................................................................................... 22 ¿Qué es un Comando? ......................................................................................................... 23 Extensiones ......................................................................................................................... 26

TEMA 3 Crear animaciones en Fireworks CS3 .................................................................................. 28 Pasos para la creación de una animación en Fireworks CS3...................................................... 27 Animación a Texto ............................................................................................................... 28 Animación de rotación de texto ............................................................................................. 29 Exportación de una animación ............................................................................................... 30

TEMA 4 Diseñar gráficos enriquecidos para la Web ......................................................................... 34

Pasos para agregar un URL .................................................................................................. 34 Creación de divisiones .......................................................................................................... 36 Rollover ............................................................................................................................... 40 Cambio de imágenes ............................................................................................................ 43 Comando Slideshow (Presentación de diapositivas) ................................................................. 49 Comando Page (Plantillas) .................................................................................................... 51

TEMA 5 Optimizar y exportar gráficos en Fireworks CS3. ................................................................. 50 La optimización de un gráfico ................................................................................................ 50 Exportar imagen a Adobe PhotoShop ..................................................................................... 55 Exportación de un archivo de Fireworks CS3 a HTML de Dreamweaver ..................................... 56

Práctica ................................................................................................................................... 58

Conclusión ............................................................................................................................... 65

Bibliografía .............................................................................................................................. 66

Dirección de Normatividad e Infraestructura Tecnológica Manual de Fireworks CS3

Departamento de Capacitación y Evaluación de la Gestión Informática Institucional 7

TEMA 1 UTILIZAR EL ENTORNO Y EL ÁREA DE TRABAJO DE FIREWORKS CS3

En este tema identificará y conocerá el entorno y los paneles de herramientas que conforman a Fireworks CS3. Así mismo establecerá los parámetros adecuados para obtener la configuración deseada de los mismos. El entorno de Fireworks CS3.

El Lienzo.


Departamento de Capacitación Especializada 8

Es el documento de Fireworks CS3, en el cual podrá realizar los diseños gráficos, y en él podrá cambiar el tamaño, definir el color de fondo, y la resolución del mismo. Además en la parte inferior del lienzo, se encuentran los botones de reproducción, estas se activan siempre y cuando el documento contenga un diseño para animación.

Ejemplo 1.1

Para crear un nuevo lienzo, pulse: Archivo> Nuevo

En el panel Nuevo documento podrá establecer el tamaño, color, y la resolución del lienzo. Observe que al especificar el tamaño del lienzo, Fireworks CS3, le proporciona al instante el tamaño del archivo. Vea ejemplo 1.1.

Pulse en el botón ACEPTAR para aceptar los parámetros, el lienzo es el siguiente, vea ejemplo 1.2:

En la parte superior derecha del lienzo se encuentran cuatro pestañas de visualización.

La primera pestaña “Original” muestra el documento en el formato original png.

La pestaña Vista previa, visualiza el lienzo de acuerdo al formato final que se haya establecido, por ejemplo, jpeg, gif,etc.

Las pestañas 2 copias y 4 copias comparan las presentaciones preliminares según los parámetros variables de exportación que haya establecido.

Ejemplo 1.2

En la parte inferior, se encuentran los botones de control de reproducción, estos se activa cuanto se realizan animaciones a través de los fotogramas. Así mismo visualiza el tamaño del lienzo y los rangos de porcentajes de aumento y disminución de visualización.

Cambio del tamaño, color y resolución del lienzo.

Para cambiar el tamaño del lienzo al instante.

Pulse Modificar > Lienzo > Tamaño del lienzo.

En el ejemplo 1.3, podrá establecer las nuevas medidas del tamaño del lienzo, así mismo, establecer el anclaje, es decir, en que lado del lienzo va a ser afectado. Por default, el anclaje se encuentra activado en el centro, lo que significa que el cambio afectará a todo el lienzo.

Ejemplo 1.3

Para el cambio del color del lienzo.

Cuentas con dos opciones:



1. Pulse Modificar > Lienzo > Color del lienzo

2. Pulse sobre cualquier área del documento y la tabla de propiedades se habilitará.

En el ejemplo 1.4 podrá establecer el color por default blanco, Transparente o Personalizado, para este último mediante un clic sostenido, activa la paleta de color, la forma del cursor cambia a un gotero, para seleccionar el color deseado pulse un clic. Posteriormente pulse OK para aceptar el cambio de color. Incluso podrá mover el gotero hacia el lienzo para seleccionar otro color fuera de la tabla de colores.

Ejemplo 1.4

Abrir una imagen y cambiar la resolución de la misma

Ejemplo 1.5

Para abrir una imagen pulse:

Archivo > Abrir

Para poder ver todas las imágenes sin importar el tipo de formato, en la opción Tipo seleccione “Todos los archivos”. Vea ejemplo 1.5.



Cambio de la resolución de la imagen.

Modificar > Lienzo > Tamaño de la imagen

1En el ejemplo 1.6 podrá establecer los valores de dimensión y de impresión. Si mantiene activa la opción “Mantener proporciones”, los cambios de valores se darán en ambas opciones de manera instantánea.

Así mismo, podrá establecer la resolución en las siguientes unidades píxeles por pulgadas o por centímetros.

Fireworks CS3 cuenta con varios métodos de interpolación de píxeles para ajustar el tamaño y resolución de la imagen: Bicúbica, Bilinear, Suave y lo mas cercano.

La interpolación bicúbica, además de ser el método predeterminado, es el que suele proporcionar resultados más nítidos y de mayor calidad.

La interpolación bilineal ofrece resultados más nítidos que la interpolación suave, pero menos precisos que la bicúbica.

La interpolación suave, que era la empleada en Fireworks 1, proporciona un desenfoque suave y detalles menos precisos. Este método resulta útil cuando los demás generan resultados no deseados.

Con la interpolación de valor vecino más cercano, los bordes aparecen dentados y se ofrece un contraste pronunciado sin desenfoque. El efecto es similar al que se produce al aumentar o reducir una imagen con la herramienta Zoom.

Pulse OK para aceptar los cambios.

Es recomendable abrir una imagen y aplicar los diferentes tipos de interpolación de píxeles, para observar los resultados diferentes que se obtienen.

En este tema aprendió a crear un lienzo y a realizar las configuraciones respecto a su tamaño y color de fondo. Así mismo, aprendió a abrir una imagen y aplicar los diferentes ajustes de resolución de la misma.

Ejemplo 1.6

Al finalizar “Utilizar el entorno y el área de trabajo de Fireworks CS3”, realizar la práctica No.1 correspondiente a la página 58.

1 Ayuda de Fireworks CS3, Macromedia Inc.



TEMA 2 DISEÑAR Y EDITAR GRÁFICOS (VECTORIALES, MAPAS DE BITS Y DE TEXTO) EN FIREWORKS CS3

En este tema aprenderá a utilizar las herramientas y la configuración de sus parámetros para dibujar y editar objetos vectoriales y/o de Mapas de bits. Así mismo, con Fireworks CS3 podrá almacenar sus efectos mediante comandos y llevar a cabo la administración y aplicación de los mismos. Dibujar formas básicas con las herramientas para crear gráficos vectoriales. ¿Qué es un objeto vectorial?, son los objetos cuya forma se definen mediante una serie de líneas, curvas y puntos las cuales conforman un trazado. Los objetos vectoriales son más simples que los de mapas de bits, ya que en ellos las imágenes se almacenan y se representan por medio de trazos matemáticos, por lo que al no estar formados en pixeles, la calidad de la resolución se mantiene. Pasos para dibujar un objeto vectorial.

1. En la barra de herramientas observe que las herramientas se encuentran agrupadas de acuerdo a las funciones a utilizar que son Seleccionar, Mapa de bits, Vectorial, Web, Colores y Vista.

2. Cree un nuevo lienzo de 500X500, con color de fondo blanco. 3. En la sección, Vectorial, seleccione la herramienta Línea. Al dibujarla observe que son

visualizadas en la parte inferior las propiedades de la herramienta, con la cual podrá aplicar diversas configuraciones. Vea ejemplo 2.1.

Ejemplo 2.1

4. Seleccione la herramienta Pluma para crear objetos con curvas bezier. Pulse un clic, mueva hacia cualquier dirección el cursor, mediante un clic sostenido mueva nuevamente el cursor hacia cualquier dirección y al hacerlo, estará creado los tiradores, que nos permitirán modificar el ángulo de la curva. Vea ejemplo 2.2.

Ejemplo 2.2

Herramienta Pluma

Herramienta Pincel

5. Con la herramienta Pincel podrá crear diferentes formas de objetos aplicando diferentes estilos de pincel. Vea ejemplo 2.2.



6. Con las herramientas formas básicas podrá crear formas de rectángulos, rectángulos con bordes redondeados, elipses y polígonos. Mediante un clic sostenido podrá ver la lista de formas básicas. Vea ejemplo 2.3

Ejemplo 2.3

Selección y edición de gráficos vectoriales.

Para la selección de un gráfico vectorial, podrá seleccionar las siguientes herramientas ubicadas en la sección “Seleccionar”. Vea ejemplo 2.4.

Ejemplo 2.4

Ejemplo 2.5

Ejemplo 2.6

Cabe señalar que la Herramienta Subselección, además de seleccionar objetos enteros, es el idóneo para seleccionar y modificar los nodos que dan forma a un objeto. Ver ejemplo 2.5. Con la herramienta “Seleccionar detrás”, permite seleccionar un objeto que se encuentra detrás de otro. Ver ejemplo 2.6. Otra función de la herramienta pluma es agregar o eliminar nodos que conforman a un objeto además de agregar nodos con curvatura bezier. Pasos para agregar un nodo a un objeto vectorial:

Seleccione el objeto creado por la herramienta Pluma. Con la misma herramienta muévala al borde del objeto. Observe que el cursor cambia a uno positivo. Pulse un clic.

Pasos para eliminar un nodo a un objeto vectorial:

Con la herramienta Pluma seleccionada. Mueva el cursor sobre el nodo a eliminar. Observe que el cursor cambia a uno negativo. Pulse un clic.



La organización de los objetos Puede utilizar las siguientes técnicas de organización de objetos. • Agrupar objetos individuales para editarlos como si fueran un solo objeto. Pasos para agrupar objetos individuales.

Podrá utilizar cualquiera de las herramientas de selección, cree un marco alrededor de los mismos, mediante un clic sostenido, y observe los objetos seleccionados. Sí desea mayor control en la selección de los mismos seleccione uno de ellos y pulse la tecla SHIFT, sin soltarlo, seleccione los demás objetos. Vea ejemplo 2.7.

Ejemplo 2.7

• Los objetos pueden situarse delante o detrás de otros objetos. Si desea situar delante de un objeto, pulse Modificar > Ordenar > Poner en primer plano. Si desea situar detrás de un objeto, Modificar > Ordenar > Enviar hacia atrás. Si desea situar un objeto al fondo, pulse Modificar > Ordenar > Enviar al fondo. Atención: El objeto debe estar previamente seleccionado. • Los objetos seleccionados pueden alinearse respecto a un área del lienzo o respecto al eje horizontal o vertical.

Seleccione los objetos a alinear, pulse Modificar > Alinear y seleccione una de las siguientes opciones Izquierda, Derecha, Centrar, Arriba, Abajo o Centrar verticalmente.

Transformación de los objetos.

Ejemplo 2.8

Pasos para modificar el tamaño de un objeto. 1. Seleccione el objeto. 2. Seleccione cualquiera de las siguientes herramientas de

transformación: Escala, Inclinación y distorsión. 3. En el objeto previamente seleccionado, son visualizados los nodos,

seleccione a uno de ellos y mediante un clic sostenido, mueva el mouse hacia cualquier dirección y observe el resultado. Vea ejemplo 2.8. Observe que un nodo en particular se ubica en el centro del objeto, con él, podrá establecer el punto de rotación del mismo.

Pasos para modificar la forma de un objeto. 1. En un objeto rectangular, previamente seleccionado. Pulse la

herramienta Subselección. Observe que los nodos pasan de cuadros obscuros a blancos.

2. Seleccione uno de los nodos y mediante un clic sostenido muévalo para cambiar la forma del mismo.



Establecer el tamaño de un vectorial. Para establecer las medidas de un tamaño determinado, es necesario abrir la ventana acoplable “Info”, pulse Windows > Info; posteriormente seleccione un objeto y en ella podrá observar el tamaño en pixeles del objeto. Aplicación de efectos a vectoriales. Con Fireworks CS3 puede crear efectos como cambio de colores, biseles, sombras, resplandores y relieves entre otros. Además podrá personalizar cada efecto para obtener el aspecto deseado, así como modificarse en cualquier momento. Al seleccionar un efecto, es visualizado la ventana de propiedades del mismo, por lo que podrá realizar cualquier cambio o introducir nuevos parámetros, obteniendo diferentes aspectos.

1. Cree un nuevo lienzo de 200 X 200 pixeles. 2. Establezca el color del lienzo a blanco. 3. Dibuje un cuadro rectangular con bordes redondeado. En la barra de propiedades de esta herramienta,

está la opción “Agregar efectos”. Pulse sobre ella para ver la lista de opciones. Vea ejemplo 2.9.

Ejemplo 2.9

4. Seleccione un efecto y cambie los valores por otros. Observe el efecto obtenido. Vea ejemplo 2.10.

Ejemplo 2.10

5. Es sugerible que realice cambios en los parámetros para observar diferentes tipos de efectos obtenidos.

Una forma rápida de aplicar efectos a objetos vectoriales es mediante el panel de Estilos,

pulse Ventana > Estilos. Este panel cuenta con una amplia variedad de estilos, y cada uno de ellos son editables desde la barra de propiedades, siempre y cuando lo haya aplicado.



El Modo Mapa de bits.

Ejemplo 2.9

Las imágenes de mapas de bits están conformados por pixeles, los cuales almacenan información completa sobre el color de cada uno de los mismos entre otros parámetros. Mas píxeles de mejor calidad es la imagen. Vea ejemplo 2.9. En Fireworks CS3 activa el modo de mapa de bits de manera inmediata al seleccionar una imagen. En modo Mapa de bits, Fireworks muestra el documento enmarcado por un borde color azul. Este borde recuerda al usuario que está activo el modo Mapa de bits.

Selección. Las herramientas de selección de píxeles definen el área de píxeles que se desea seleccionar. Al utilizar una de ellas, sus opciones de bordes son visualizadas en la barra de propiedades, vea ejemplo 2.11: Duro: crea una selección de recuadro con un borde definido. Suavizado: evita la aparición de bordes dentados en la selección del recuadro. Fundido: permite fundir el borde de la selección de píxeles. Así mismo, la cantidad de fundido. En las tres opciones podrá establecer la tolerancia de color.

Ejemplo 2.11

En modo Mapa de bits, las herramientas de selección principales son las herramientas Recuadro y Recuadro oval, las herramientas Lazo y Lazo poligonal, y la herramienta Varita mágica.

1. Seleccione la imagen. 2. Seleccione la

herramienta Recuadro.

3. Mediante un clic sostenido dibuje un marco.

1. Repita los primeros pasos.

2. Mediante un clic sostenido dibuje una elipse.

1. Seleccione la imagen.

2. Seleccione la herramienta Lazo.

3. Mediante un clic sostenido dibuje un borde del área a seleccionar.

1. Seleccione la imagen. 2. Seleccione la

herramienta Lazo Poligonal.

3. Realizando varios clics dibuje un borde.



Edición Para la edición de objetos de mapas de bits es necesario seleccionarlos o crear áreas de selección, y posteriormente editarlos mediante las herramientas de formas básicas, Línea, Lápiz y/o Pincel. Cuando se pinta en modo Mapa de bits, en lugar de dibujar vectores se pintan píxeles. Cualquier cosa que se pinte sustituirá a los píxeles de la imagen. Pintando píxeles. Pasos para pintar píxeles: 1. Seleccione la herramienta gotero. La función de esta es seleccionar pixeles

con un determinado color. 2. Mueva el cursor sobre el área de la imagen para seleccionar el color y pulse

un clic para realizarlo. 3. Seleccione la herramienta Lápiz

Ejemplo 2.12

Ejemplo 2.13

4. Pinte sobre el área adecuada. Ver ejemplo 2.12. Pasos para eliminar pixeles: 1. Seleccione la herramienta Borrador. 2. Configure los parámetros como tamaño, suavidad y la opacidad. 3. Mueva el cursor sobre el área a borrar. 4. Vea ejemplo 2.13. Pasos para la clonación de pixeles:

1. Seleccione la herramienta Sello 2. Configure los parámetros como

tamaño, suavidad y la opacidad. 3. Mediante un clic establezca el punto

de origen a copiar. 4. Mediante un clic establezca el punto

de destino a copiar. 5. Mueva el cursor, cuantas veces sea

necesario hasta obtener el duplicado de la imagen.

6. Vea ejemplo 2.14 Ejemplo 2.14

Pasos para el recorte una imagen

1. Seleccione la herramienta Recortar. 2. Mediante un clic sostenido, seleccione el área a recortar. 3. Pulse Enter. Vea ejemplo 2.15 4. Ahora el lienzo tendrá un nuevo tamaño, de acuerdo al área

recortada.

Ejemplo 2.15



Aplicar efectos a mapas de bits. Reemplazo de color. 1. Abra una imagen. 2. Pulse sobre la herramienta “Reemplazar color”, y observe la barra de propiedades del mismo. Vea ejemplo

2.16.

3. En la barra de propiedades seleccione la opción Muestra y establezca el color desde A: Así mismo podrá establecer los parámetros siguientes como: Tamaño y forma del pincel, Tolerancia para establecer un valor de 0 (color exacto de la paleta) a 255 (reemplaza colores similares a la paleta).

4. Una vez establecido los parámetros, arrastre el cursor sobre el área a reemplazar el color. Y obtendrá el resultado siguiente. Vea ejemplo 2.17.



Cambia el color a áreas seleccionadas.

1. Abre el archivo 2. De acuerdo al ejemplo 2.18, seleccione dicha área. 3. Con la herramienta “Bote de pintura”, aplique el color blanco. El

color del área previamente seleccionada cambia por otro color. Vea ejemplo 2.19.

Ejemplo 2.18

Ejemplo 2.19

4. Otra opción de cambiar el color de un área seleccionada, es pulsando Filtro > Ajustar color > Curva. En el cuadro de dialogo Curva, seleccione el canal “Verde”. Y mediante un clic sostenido mueva el canal hacia cualquier dirección y observe las tonalidades de color obtenidos. Vea ejemplo 2.20.

Ejemplo 2.20

1. Abra la imagen “PSP1.jpg”. 2. Con la herramienta “Varita Mágica”, seleccione el área

que rodea al objeto, pulse “Supr” para borrar el área, posteriormente pulse Seleccionar > Seleccionar inversa. Vea imagen 2.21.

3. Con la herramienta Escala, reduzca el objeto a las siguientes medidas: 353 x 141 pixeles.

4. Aplique el siguiente efecto, pulsando en el botón Efectos > Sombra y Glow > Glow. Establezca los siguientes parámetros. Vea ejemplo 2.22.

Ejemplo 2.22>>

Ejemplo 2.21

5. Cambie el color del lienzo a negro.



Las máscaras y las capas.

Las mascaras son objetos que se agregan a la imagen para aislar y proteger áreas de la misma. Para su creación puede utilizarse en cualquier objeto como los vectoriales, mapa de bits y/o texto. Al seleccionar un área de la imagen, el área que no está seleccionada es un área con mascara. La utilización de las mascaras permiten obtener diversos efectos y únicos.

Un documento en Fireworks puede contener muchos objetos, y dichos objetos residir en una o varias capas. En las capas podemos observar el orden de los objetos que conforman a una imagen, lo anterior acarrea ventajas, ya que puede cambiar el orden de los objetos. Dependiendo de la herramienta a utilizar una capa es creada por ella, sin embargo, puede crear las capas necesarias. Para crearlas pulse en la barra de menú Ventana > Capas.

Texto Enmascarado.

1. Abra la imagen 2. Escriba el siguiente texto “Aves”, fuente: indistinto, tamaño a 150

pixeles, en color blanco. Y posiciónelo de acuerdo al ejemplo 2.23.

3. Seleccione el texto y la imagen. Pulse Modificar > Mascara > Agrupar como mascara.

4. El resultado obtenido debe ser al ejemplo 2.24.

Ejemplo 2.23

Ejemplo 2.24



Creación de mascaras utilizando herramientas de selección.

1. Abra la imagen. Posteriormente abra la ventana Capas, pulsando Ventana > Capas.

2. Con la herramienta de selección “Marco elíptico”, dibuje una elipse, alrededor del ojo del tigre. Vea el ejemplo 2.25.

3. En la ventana capas, pulse sobre la opción “Agregar mascara”. En el ejemplo 2.26 observe que en la capa, la imagen cuenta con una mascara, ambos vinculados, si los desvincula pulsando un clic sobre el, podrá mover la imagen.

4. Cambie el color del lienzo y observe el resultado. Vea ejemplo 2.27.

Ejemplo 2.27

Ejemplo 2.25

Ejemplo 2.26



Creación de máscara utilizando la herramienta Pluma y Degradado

1. Abra la imagen “Hercules.jpg”. 2. Seleccione la herramienta Pluma, y establezca

los siguientes parámetros de contorno: tamaño 1 y Estilo “Píxel suave”. Abra la ventana Capas.

3. Con esta herramienta dibuje el contorno de la imagen. Vea el ejemplo 2.28.

4. En la ventana Capas, seleccione ambas capas (trazado y mapa de bits) y pulse en la barra de menú, Modificar > Mascara > Agrupar como mascara. Vea ejemplo 2.29.

5. En esta capa, seleccione el objeto correspondiente a la mascara. Posteriormente seleccione la herramienta Degradado y aplíquelo tal como se ve en el ejemplo 2.29.

6. Cambie el color del lienzo y el resultado es el ejemplo 2.30.

Ejemplo 2.30

Ejemplo 2.29

Ejemplo 2.28



Los Símbolos.

Fireworks cuenta con tres tipos de símbolos: gráficos, animaciones y botones. Cada uno posee características propias para usos específicos. Al generar un símbolo, éste se almacena en el panel “Biblioteca” (Ventana > Biblioteca), por lo que se puede volver a utilizar cuantas veces sea necesario. Para utilizar un símbolo desde la biblioteca sólo selecciónelo y mediante un clic sostenido arrástrelo hacia el lienzo, estas son copias del mismo, también conocidas como instancias, es importante tomar en cuenta, que cuando se modifica el objeto de símbolo original, las instancias (copias) cambian automáticamente para reflejar las modificaciones efectuadas en el símbolo.

Pasos para generar un símbolo.

1. Diseñe un objeto o importe una imagen. 2. Selecciónelo y pulse F8. 3. Asígnele un nombre y seleccione la opción “Gráfico”. Vea ejemplo 2.31

Ejemplo 2.31

Es importante asignarle un nombre a los símbolos, de esta manera podrá identificarlos en el panel Biblioteca.

4. Abra el panel biblioteca, seleccione el símbolo y arrástrelo hacia el lienzo, repítelo tres veces; abra el panel Biblioteca, pulse doble clic, en el área superior donde se visualiza el símbolo, con la finalidad de abrirlo y realice alguna modificación y observe los resultados. Vea ejemplo 2.32.

Ejemplo 2.32



¿Qué es un comando?

Un comando es esencialmente un archivo que contiene una serie de pasos o instrucciones para la aplicación de diversos efectos gráficos. Los comandos en Fireworks CS3 se alojan en la barra de menú “Comandos”.

El menú “Comando” se compone en dos secciones. En la sección superior te permitirán controlar, crear y administrar los comandos. En la inferior se encuentran los comandos que por default vienen integrados con fireworks, como son Creativos, Documentos, Agrupar comandos por lotes, Asistente Gráfico o datos, Cambiar tamaño selección y Web. También se alojaran aquellos comando que descargo o compró desde Internet.

Pasos para la aplicación de comandos.

1. Abra un nuevo documento con fondo blanco. 2. Con la herramienta “Pluma” dibuje un trazado y selecciónela. Vea ejemplo 2.33.

Ejemplo 2.33

3. Pulse Comandos > Creativo > Insertar puntas de flecha. La ventana similar al ejemplo 2.34 podrás establecer parámetros como agregar estilos de flecha, tamaño, escala, etc. Al final presione en Aceptar.

Ejemplo 2.34

4. El resultado es el siguiente ejemplo 2.35

Ejemplo 2.35



El siguiente comando Creativo, permite aplicar efectos instantáneos a una imagen.

1. Abra una imagen y selecciónela. Pulse Comandos > Creativo > Fundir imagen. Se visualizará la siguiente ventana. Vea ejemplo 2.36. En ella, podrá establecer diferentes estilos de fundición de imágenes. Solo seleccione el estilo y pulse sobre el botón Aceptar.

Ejemplo 2.36

2. Cabe señalar que también se activa la barra de propiedades con los cuales podrá establecer parámetros con un mejor control sobre los efectos. Vea ejemplo 2.37

Ejemplo 2.37.

3. Y obtener resultados diferentes, ver ejemplos 2.38.

Ejemplo 2.38



Creación de comandos.

1. Abra un nuevo documento, con la herramienta Texto, escriba la palabra “CREACIÓN” estableciendo los siguientes parámetros. Vea ejemplo 2.39.

Ejemplo 2.39.

2. Seleccione la palabra y establezca los siguientes parámetros. Vea ejemplo 2.40.

Ejemplo 2.40.

3. Abra el panel Historial, pulsando Ventana > Historial. Éste panel almacena todos los procedimientos que esté realizando y/o aplicando a su diseño. Seleccione los pasos que aplicó al objeto texto y pulse sobre icono Guardar como en el ejemplo 2.41.

Ejemplo 2.41

4. Se visualizará la siguiente ventana, en la cual establecerá el nombre del comando. Vea ejemplo 2.42.



Ejemplo 2.42.

5. Los comandos almacenados se ubicaran en la sección inferior de la barra de menú comandos. 6. Para la ejecución de un comando, seleccione el objeto tipo texto, pulse Comando, localice y pulse sobre

el nombre del comando recién creado. El comando será aplicado.

Extensiones.

Las extensiones son comandos personalizados para la generación de efectos complejos y avanzados. Fireworks CS3 tiene su propio administrador de extensiones, siempre y cuando los tenga debidamente instalados, si desea incluir nuevas extensiones desde la web, pulse sobre el icono “Ir a Macromedia Exchange”, ver ejemplo 2.43. Con el administrador podrá eliminar, instalar, enviar o empaquetar las extensiones.

Ejemplo 2.43

Macromedia Exchange es un sitio web de Adobe Macromedia, que ofrece extensiones gratuitas y/o compradas, para versiones PC o MAC, cabe señalar, que algunas extensiones son tan complejas que requieren parámetros y conocimiento en directrices o coordenadas.



En este tema aprendió a utilizar las herramientas y establecer parámetros para la edición de vectoriales y de mapas de bits, así como la creación de comandos y la administración de extensiones.

NOTAS:

Al finalizar “Diseñar y editar gráficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3”, realizar la práctica No.2 correspondiente a la página 60.



TEMA 3 CREAR ANIMACIONES EN FIREWORKS CS3

En este tema realizará animaciones utilizando diversos objetos creados y/o importados mediante la utilización de los fotogramas, obteniendo finalmente un objeto GIF animado.

En Fireworks las animaciones se aplican a objetos convertidos a símbolos de animación. La animación de un símbolo se divide en fotogramas, los cuales determinan el tiempo y forma de la animación. Una animación puede contener más de un objeto de tipo símbolo y en cada uno de ellos poder realizar animaciones diferentes y contar con un número diferente de fotogramas.

Pasos para la creación de una animación en Fireworks.

1. Dibuje un objeto o importe una imagen. 2. Seleccionelo y pulse F8 para activar el cuadro de

propiedades de símbolo. En él, seleccione la opción “Animación”. Posteriormente pulse en el botón “OK”. Vea ejemplo 3.1.

Ejemplo 3.1

3. Introduzca los siguientes valores, vea ejemplo 3.2. Podrá definir lo siguiente:

Número de Fotogramas: Es el número de fotogramas que tendrá una animación, entre mayor sea el número mayor duración será.

Mover: Establece la distancia de movimiento.

Dirección: Establece el grado de dirección.

Ajustar escala a: Ajusta las dimensiones del objeto conforme a la animación.

Opacidad: Estableces el nivel de opacidad de 0 a 100% visible.

Girar y dirección: Establece el grado de giro de acuerdo a las manecillas del reloj o viceversa. Ejemplo 3.2

4. Pulse Aceptar. 5. Al hacerlo, el objeto queda enmarcado y con un nodo en color rojo en el centro. Con la herramienta

Selección, seleccione dicho punto y arrástrelo hacia cualquier dirección, de esta manera está creando el trayecto de la animación. El trayecto consta de dos puntos uno verde (inicio) y uno rojo (final). Ejemplo 3.3.



Ejemplo 3.3

6. Abra el panel Fotogramas para establecer la velocidad de movimiento de la animación. Pulse Ventana> Fotogramas. En este panel podrá ver el número de fotogramas que contiene la animación, y en cada una de ellos podrá cambiar la velocidad del mismo, entre mas alto el valor mas lenta es la animación. Para cambiarlo pulse dos veces sobre el valor y establezca un nuevo valor. Vea ejemplo 3.4.

7. Reproduzca la animación y observe el resultado. 8. En la parte inferior del panel Fotogramas, observe

los siguientes controles:

5. Papel cebolla: Es una característica que te permite visualizar las etapas de la animación al mismo tiempo.

1 2 3 4 5

6. Bucle: Estableces el número de veces que se repita la animación.

7. Distribuir en fotogramas: Distribuyes el objeto en la animación.

8. Insertar fotograma: Inserta uno nuevo a partir de una seleccionada.

9. Eliminar fotograma: Elimina un fotograma previamente seleccionado.

9. Optimice el documento y expórtelo como una Animación GIF.



Animación a texto.

Ejemplo 3.4 1. Cree un nuevo lienzo de 300x500 pixeles con fondo color blanco. 2. Escriba el texto “Bienvenidos”, tamaño a 45 pixeles, y ubíquelo en

la parte superior del lienzo. Vea ejemplo 3.4. 3. Seleccione el texto, y pulse Modificar > Animación > Animar

selección… 4. En el cuadro, establezca las siguientes configuraciones. Vea

ejemplo 3.5. 5. Reproduzca y observe el efecto. 6. En la ventana Fotograma, seleccione el fotograma # 18. En la

barra de propiedades cambie el parámetro de opacidad de 100 a 100, por 100 a 0.

7. Escriba el siguiente texto “Al curso de Fireworks CS3”, con el mismo tamaño del anterior. Ubíquelo al final del lienzo. Vea ejemplo 3.6.

8. Pulse de nuevo Modificar > Animación > Animar selección… 9. En él, establezca las siguientes parámetros. Vea ejemplo 3.7.

Ejemplo 3.5

Ejemplo 3.7

10. Reproduzca y observe los efectos obtenidos.

Ejemplo 3.6



Animación de rotación de texto.

Cree un nuevo lienzo con las siguientes medidas: 400X400 píxeles, con color de fondo blanco.

1. Escriba el siguiente texto “Hechos no palabras” con los siguientes parámetros:tamaño a 35 pixeles y fuente: Garamond.

2. Dibuje una elipse de 246x246 pixeles, sin relleno y sin contorno. 3. Seleccione ambos objetos y pulse Texto > Adaptar a trayecto. 4. En la barra de propiedades del objeto Texto, realice los siguientes ajustes. Vea ejemplo 3.8.

Ejemplo 3.8

5. El resultado debe ser similar al siguiente. Vea ejemplo 3.9.

Ejemplo 3.9

6. Seleccione y pulse F8, se visualiza el cuadro de animación, y establezca los siguientes parámetros, vea ejemplo 3.10.



Ejemplo 3.10

7. Una vez establecido los parámetros, observe que se visualiza el panel de control de reproducción en la parte de inferior del lienzo.

8. Reproduzca la animación, observe y guarde el resultado.

Exportación de la animación.

1. El siguiente paso consiste en exportar el ejercicio como gif animado.

Pulse Archivo > “Presentación preliminar de la imagen”, en la pestaña Opciones, establezca los siguientes parámetros, vea ejemplo 3.11.

Ejemplo 3.11

Pulse en la opción Formato y seleccione “GIF Animado”.

Establezca la paleta de color “Adaptable”, así como, número máximo de color 128.

Establezca el tipo de transparencia “Transparencia Alpha”.

2. Finalmente nombre el archivo y finalmente pulse en “Exportar…”.

Para abrir un gif animado hágalo desde cualquier navegador web como Internet Explorer, Mozilla, etc.



Animación entre instancias de símbolo gráfico.

Esta clase de animación le permite crear una animación entre dos objetos de símbolo gráfico, cabe señalar que funcionará siempre y cuando sean los mismos objetos idénticos.

Pasos:

1. Debe contar con al menos un símbolo gráfico. Vea ejemplo sig.

2. Posicione los objetos de tal manera que uno sea el inicio y el otro el fin de la animación, vea ejemplo siguiente:

3. Selecciónelos y pulse Modificar > Símbolos > Instancias Tween, aparecerá el siguiente la ventana,

establezca el número de cuadros y active la casilla “Distribuir en cuadros”.

4. Observe que en el panel de fotogramas, cuenta con 12 fotogramas, el primero contiene el objeto símbolo ubicado en el lado derecho y el último contiene el posicionado en la derecha, los 10 restantes se refieren al proceso de animación cuadro por cuadro.

5. Recuerde no seleccionar instancias de diferentes símbolos ya no funciona de esta manera. Así mismo, una vez generado los fotogramas, no puede cambiar la dirección de la animación de los objetos.

En este tema aprendió a detalle a crear animaciones mediante los fotogramas y conversión de objetos a símbolo de animación, así como a establecer diferentes parámetros para obtener diferentes tipos de animaciones.

Al finalizar “Crear animaciones”, realizar la práctica No.3 correspondiente a la página 61.



TEMA 4.

DISEÑAR GRÁFICOS ENRIQUECIDOS PARA LA WEB

En este tema aprenderá a establecer zonas interactivas y/o divisiones a un gráfico la cual le permitirá crear botones interactivos y rollovers, los cuales podrán ser vistos en un explorador Web.

Pasos para agregar un URL.

Existen dos formas para agregar un URL, la primera es agregarlo desde el panel URL y la segunda directamente desde el objeto previamente seleccionado y que además incluya una zona interactiva.

Desde el panel URL.

1. Pulse Ventana > URL. Vea ejemplo 4.1. 2. En el símbolo de cadena escriba la

dirección web. Y pulse en el icono “+”. 3. O en la parte inferior pulse el icono “+”,

se visualizará la ventana “Nuevo URL”, escriba en él, la dirección Web, por ejemplo http://www.chiapas.gob.mx

4. Pulse en el botón “OK”, para aceptar la dirección.

5. Para eliminar una dirección web, selecciónela y pulse sobre el botón “Basura”.

Ejemplo 4.1

Desde un objeto gráfico.

Para agregar un URL a un objeto gráfico, es necesario que este contenga una zona interactiva.

1. Dibuje un objeto gráfico con un texto “Ok”. Vea ejemplo 4.2. 2. En la barra de herramientas pulse sobre la

herramienta “Zona interactiva”. En ella, se visualizan tres formas siguientes: Rectángular, Circular y Polígonal.

Ejemplo 4.2

3. Seleccione la primera, y dibuje la zona interactiva sobre el botón. Al dibujarla se visualiza el símbolo de comportamiento. Vea ejemplo 4.3.

Observe que al dibujar una zona interactiva, al instante se visualiza la barra de propiedades de la misma, por lo que puede cambiar el color de la zona, escribir un vínculo, una etiqueta y establecer un destino de marco. Vea ejemplo 4.4.

Ejemplo 4.3



Ejemplo 4.4

4. Pulse Archivo > Vista preliminar en un Browser. 5. El siguiente paso es la exportación del objeto gráfico, con la finalidad que funcione como un mapa de

imagen en un navegador Web. Pulse Archivo > Exportar. Vea el ejemplo 4.5.

Ejemplo 4.5

En este cuadro podrá especificar el nombre, tipo y las divisiones, así como, otros parámetros.

6. Posteriormente pulse en la opción “Guardar”.



Creación de divisiones.

Las divisiones son segmentos que se exportan como archivos independientes para su descarga. Con estas divisiones podrá optimizar el tamaño del archivo de la imagen, agregar interactividad y para cambiar partes de una imagen.

Pasos crear divisiones:

1. Abra el archivo “museo del ave_DIV.jpg”. 2. Seleccione la herramienta división Poligonal. Vea el ejemplo 4.6.

Ejemplo 4.6

3. Con dicha herramienta dibuje un polígono sobre el gráfico correspondiente a la imagen 1. Vea imagen 4.7.

Ejemplo 4.7

4. Realice el mismo procedimiento a los gráficos restantes. Vea imagen 4.8.

Ejemplo 4.8

5. Por separado seleccione cada división y establezca los parámetros. Vea ejemplo 4.9:



Ejemplo 4.9

Un destino es un marco de página Web alternativo, o una ventana de navegador Web, en donde se abre el documento vinculado. En el cuadro de texto Destino del Panel Objeto, puede especificar un destino para la zona interactiva.

Tipo (Type): Imagen o HTML.

Link: Establezca la dirección web.

Alt: Establezca una etiqueta.

Para especificar un destino (target):

Las opciones de destino reservado son las siguientes:

• _blank carga los documentos vinculados en una ventana de navegador nueva sin nombre.

• _parent carga el documento vinculado en el conjunto de marcos relacionados o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se carga en la ventana de navegador completa.

• _self carga el documento vinculado en el mismo marco o en la misma ventana que el vínculo. Normalmente no es necesario especificar el destino, ya que está implícito.

• _top carga el documento vinculado en la ventana de navegador completa y, por consiguiente, se eliminan todos.

6. Presione la tecla F12, para previsualizar y ejecutar en el navegador Web. vea ejemplo 4.10.

Ejemplo 4.10



Rollover.

Los rollovers son elementos gráficos que cambian de aspecto en un navegador Web cuando el puntero del ratón se desplaza sobre ellos o se hace clic en ellos. Incluyen botones e imágenes intercambiadas. Cualquiera que sea su aspecto, los rollovers siempre funcionan de la misma forma: un gráfico activa la visualización de otro como respuesta a un clic o al desplazamiento del puntero sobre ellos. Las imágenes de rollover pueden colocarse en dos o más fotogramas.

El elemento activador es siempre un objeto Web, es decir, una división o una zona interactiva. Los objetos Web pueden tener uno varios comportamientos asociados. El rollover más sencillo intercambia una imagen en el fotograma 1 con una imagen que se encuentra justo debajo en el fotograma 2. Puede crear rollovers más complejos: los rollover de intercambio de imágenes pueden intercambiar una imagen de cualquier fotograma; los rollovers desunidos muestran una imagen en un punto alejado del cursor.i

Pasos para crear objetos Rollover.

1. Abra el archivo “Rollover1.png”. 2. Seleccione el objeto botón “Registro”. Vea ejemplo 4.11. y pulse Modificar > Símbolo > Convertir a

símbolo o presione la tecla F8.

Ejemplo 4.11

3. En la ventana propiedades de símbolo, establezca el siguiente parámetro, vea ejemplo 4.12, al hacerlo el objeto botón tendrá un área interactiva similar al ejemplo 4.13.

Ejemplo 4.12

Ejemplo 4.13



4. Sobre el botón, pulse el botón derecho del mouse y seleccione la opción “Añadir menú emergente”, vea ejemplo 4.14.

Ejemplo 4.14

5. En la ventana Editor de menú emergente, se encuentra la primera pestaña “Contenido”, en ella, pulse en el icono (+), cada vez que pulse sobre este icono, está agregando una opción mas, establezca los siguientes cuatro opciones, vea el ejemplo 4.15: “Registro a Expresate”, “Editar registro”, “Eliminar registro” y “Sitio Chiapas”, en todas ellas establezca los vínculos y el destino como _blank (en una nueva ventana del navegador web). Al establecer los parámetros pulse en el botón “Siguiente”.

Ejemplo 4.15



6. En la pestaña “Apariencia” establecerá la apariencia del menú emergente como HTML o Imagen, tome en cuenta que esta última, la apariencia será de mayor calidad pero el tamaño se incrementará por los estilos que se aplican. Sin importar el tipo de apariencia, en ella podrá establecer colores, fuentes, alineaciones, etc. Vea ejemplo 4.16.

7. En la pestaña Avanzado, podrá establecer parámetros en cuanto a las celdas como anchura, altura, rellenos, entre otros. En ella se encuentra la opción “Demora de menú” en la cual podrá establecer el tiempo en milisegundos de aparición del menú, establezca en 100. Vea ejemplo 4.17.

Ejemplo 4.16 4.17

Ejemplo 4.18

8. En la pestaña “Posición”, podrá establecer cuatro diferentes tipos de posición de las celdas, así como de los submenús. Vea imagen 4.18. Pulse Listo.

9. Observe que en un objeto de tipo símbolo botón, en la parte inferior izquierda, vea imagen 4.19, se encuentra un acceso directo para la edición del objeto botón. Pulse mediante un clic y de manera inmediata abrirá el editor de eventos del objeto. Vea imagen 4.20.

En cada evento podrá cambiar las propiedades del objeto como relleno de color, efectos, tamaño del área activa, etc. Por default en el evento “Sobre” , Fireworks CS3, no visualiza dicho evento, por lo que



tendrá que pulsar en el botón “Copiar Gráfico Arriba”, con la finalidad de copiar el gráfico de dicho evento al evento “Sobre”. Vea ejemplo 4.21.

Ejemplo 4.19

Ejemplo 4.20

Ejemplo 4.19

Ejemplo 4.21



Ejemplo 4.19

Ejemplo 4.22

10. Pulse sobre la pestaña “Área Activa” y observe que el área sea del mismo tamaño que el botón, en caso contrario realice los ajustes necesarios mediante un clic sostenido sobre las líneas sostenidas. Vea ejemplo 4.22.

11. Presione F12 para visualizarlo en el Navegador Web. Vea imagen 4.23.

Ejemplo 4.23



Cambio de imágenes.

1. Abra el archivo “Swap.png”. Este archivo consta de dos botones “Videos” y “Chiapas.gob.mx”, en cada una de ellas, establecerá la interactividad de cambio de imágenes (swap). Es recomendable que abra el panel “Capas”, para que note los nombres que las divisiones tienen asignadas.

2. Con la herramienta División, dibuje un área interactiva, sobre el área en blanco. Vea el ejemplo 4.24.

3. Seleccione el primer botón “Videos” vea el ejemplo 4.25.

Ejemplo 4.25

4. Y mediante un clic sostenido del botón izquierdo del Mouse, arrastre el cursor a la división recién creada, al hacerlo, se activara la ventana Intercambiar imagen vea el ejemplo 4.26 y pulse sobre el botón “Mas opciones…”

Ejemplo 4.26

Ejemplo 4.27



En ella, podrá establecer el archivo de imagen de intercambio, como se ilustra en el ejemplo 4.27.

Si va a realizar un diseño con intercambiador de imágenes para la web, es conveniente crear una carpeta que incluya las imágenes.

Exportación WEB. Para su exportación diríjase al tema “Exportación de un archivo de Fireworks CS3 a HTML de Dreamweaver.”



Comando SlideShow (Álbum de imágenes) Usted puede generar un álbum de imágenes personalizándolo con diferentes opciones del comando SlideShow de Fireworks CS3. El álbum genera varios documentos en html, xhtml, swf de flash y java script.

1. Cree una carpeta, nómbrela y guarde en ella diversas imágenes. Se sugiere que todas las imágenes cuenten

con las mismas dimensiones y optimizadas en el mismo formato. Vea el tema 5 “Optimizar y exportar gráficos en Fireworks CS3”

2. Pulse Comandos > Crear SlideShow, en el ejemplo siguiente, observe los componentes que conforman la ventana del creador:

a) Álbumes b) Imágenes c) Propiedades del álbum libro d) Propiedades del álbum e) Rótulos f) Filtros g) Propiedades del Slideshow h) Opciones de exportación



3. Lea cuidadosamente las opciones que ofrece este comando. La creación de un Slideshow es realmente

sencillo y fácil.



El Comando PAGES (PAGINAS). Este nuevo panel de Fireworks CS3 infiere al nombre de “Páginas” cuya una funcionalidad práctica es diseñar plantillas o “wire frames”. La metodología es la siguiente después de diseñar, utilice el comando Página, para definirlo como “Página Maestra”, y continuar con nuevas paginas vinculadas y basadas en el diseño de la página maestra. De esta manera podrá actualizarlas en cualquier momento. Cabe señalar que cada página cuenta con sus propias capas y fotogramas, lo cual exigen una buena cantidad de memoria RAM de su equipo de cómputo. Pasos:

1. Abra el archivo gob_EJ.png. (Solicítelo al instructor). En este archivo observe los paneles capas y librería.

2. Convierta las opciones DSPYN,DCE y DIT a símbolos de tipo botón. Utilice los mismos nombres para nombrar los botones.

3. Abra el panel PAGINAS. Seleccione la “page 1”, pulse en el botón OPCIONES y seleccione “ESTABLECER COMO PÁGINA MAESTRA”, y verifique que la página quede establecida como PAGINA MAESTRA. Doble clic sobre la página maestra y nómbrela como “index”.



4. Seleccione la página maestra y pulse sobre el botón “Nuevo/Duplicar página”, pulse sobre él tres veces,

para crear tres páginas y nómbrelas como los botones: DSPYN, DCE y DIT. En total serán cuatro páginas.

5. Ahora, seleccione la página maestra. Y seleccione el primer botón (DSPYN), y en la barra de propiedades, pulse sobre la opción VÍNCULO y seleccione “dspyn.htm”. Repita este paso, para los siguientes dos botones. Por default, Fireworks CS3, establece el formato como “htm”.

6. Seleccione la segunda página, es decir, “dspyn.htm”. En ella, cree un nuevo botón cuya funcionalidad será ir a la página “index”, ubíquelo al lado del tercer botón. Cabe señalar que este botón estará en las tres páginas a excepción de la página “index”.

7. Aplique interactividad a dicho botón. 8. Ahora en el panel Page, debe contar con cuatro páginas. Observe ejemplo

9. El último paso consiste en la exportación de las páginas. Pulse Archivo > Exportar y establezca la

siguiente configuración: Verifique que la opción “Sólo página actual” no esté activada. Si se encuentra activada, la página que esté seleccionada, será la que se exporte. Es sugerible que se nombre a la primera página como “index.htm”. Es recomendable crear una carpeta y en ella, guardar las exportaciones realizadas.

10.



En este tema aprendió a crear zonas interactivas y/o divisiones, crear botones interactivos, rollovers, Páginas y Slideshow, para el enriquecimiento de sitios web.

NOTAS:

Al finalizar “Diseñar gráficos Web mediante la inserción de zonas interactivas y comportamientos”, realizar la práctica No.4 correspondiente a la página 62.



TEMA 5 OPTIMIZAR Y EXPORTAR GRÁFICOS EN FIREWORKS CS3.

En este tema aprenderá a establecer los parámetros adecuados para la optimización y exportación de un gráfico, con la finalidad de que éste se adapte lo mejor posible a una página Web o impresión.

La optimización de un gráfico.

La optimización de un grafico consiste en seleccionar el formato adecuado para la comprensión y mantener lo mejor posible la calidad del mismo. Esto se conoce como la optimización, que en resumen, busca el equilibrio entre la calidad, la comprensión y los colores de un gráfico.

Web-Safe (Browser-Safe) Colors. (Colores seguros para la web).

Los colores que observa en su monitor son medidos en el número de bits que su tarjeta de video pueda soportar, esto es conocido como el número de colores. Hoy en día, la capacidad de su monitor es que pueda soportar un mínimo de 8 bits o 256 colores.

Sin embargo, los navegadores de Internet, tienen su reducida paleta de colores de 216 colores, la cual es conocida como paleta de colores Web Safe. (Colores seguros para la web).

De los 256 colores que visualiza en un monitor de un sistema con un mínimo de 8 bits, 40 colores no son compatibles con los sistemas Windows y Mac. Estos colores son sustraídos de los 256 colores, el resto de los colores o sea los 216 son compatibles para ambas plataformas. A lo anterior, le permitirá usar con seguridad estos 216 colores, asegurando que dichos colores lucirán de manera real en ambas plataformas y usando diferentes navegadores de Internet, sin perdida de color (dithering).

Para simular un color que no se encuentra en el espectro de color de un monitor, la computadora utiliza el “dithering”, que no es más que mezclar dos o más colores para crear ese determinado color.

Por ello es de especial utilidad utilizar la paleta de colores web safe, ya que es garantía de que los colores lucirán tal como son y sin perdida de calidad.

Pasos para la optimización de un gráfico

1. Abra el archivo “*wrecked auto.jpg”.

2. Pulse en la pestaña “2-Arriba”, vea ejemplo 5.1.



Ejemplo 5.1

3. Pulse Ventana >Optimizar. Vea ejemplo 5.2.

Ejemplo 5.2

4. En ella, establezca los siguientes parámetros: Configuración: GIF Web 216 Formato a exportar: GIF Paleta de color: Web 216

Fireworks CS3 opera con los siguientes formatos de archivos, la elección de uno, dependerá del destino final que tendrá el gráfico.

GIF Web 216 fuerza a que todos los colores sean Websafe. La paleta de colores contiene hasta 128 colores.

GIF WebSnap 256 convierte los colores que no sean Websafe al color Websafe más cercano. La paleta de colores puede contener hasta 256 colores como máximo.



GIF WebSnap 128 convierte los colores que no son Websafe al color Websafe más cercano. La paleta de colores contiene hasta 128 colores.

GIF adaptable 256 es una paleta de colores que contiene sólo los colores utilizados en el gráfico. La paleta de colores puede contener hasta 256 colores como máximo.

JPEG - Calidad superior define la calidad en 80 y el suavizado en 0, creando un gráfico de alta calidad pero de gran tamaño.

JPEG - Archivo más pequeño define la calidad en 60 y el suavizado en 2, creando un gráfico de calidad reducida pero con la mitad del tamaño del de la mejor calidad.

5. En el ejemplo 5.3, podrá observar los parámetros ya establecidos, sin embargo, podrá observar la paleta

de colores, estos colores corresponden a los colores de la imagen, así mismo, podrá observar que en cada cuadro de color cuenta con un símbolo, que a continuación se describen:

El color ha sido editado, sólo afectará a la imagen que se exportará.

El color está bloqueado.

El color es transparente.

El color es Web Safe.

El color tiene varios atributos.

Ejemplo 5.3 En la parte inferior podrá notar los tamaños correspondientes de ambas imágenes la original (izquierda) y la preliminar (derecha)

6. El siguiente paso es establecer la imagen a dos colores blanco y negro, en la opción Colores establézcalo a 2. vea ejemplo 5.4.



Ejemplo 5.4

7. Como podrá observar en el ejemplo anterior, la paleta de colores se compone de dos colores blanco y gris, -éste último lo cambiará por el color negro-, para reemplazarlo, mediante un clic pulse sobre el cuadro gris, al seleccionar dicho cuadro de color, se activan las siguientes herramientas, éstas se encuentran en la parte inferior. Vea ejemplo 5.5.

Ejemplo 5.5 Editar color

Con esta herramienta podrá cambiar el color de cada cuadro, la edición del mismo reemplazará las instancias de la imagen. Cabe señalar que la edición no afecta a la imagen original.

Forzar a color Websafe Esta herramienta fuerza a que los colores sean Websafe. Cabe señalar que deberá elegir la paleta de colores Web 216.

Bloqueo de color Bloquea los colores para que no se editen o eliminen al cambiar la paleta de colores por otro o al reducir el número de ellos. Cabe señalar que los colores bloqueados se añadirán a una nueva paleta de colores.

8. A lo anterior, pulse en la herramienta “Editar color”, vea ejemplo 5.6, en dicho cuadro, seleccione el color negro y pulse Aceptar.

Ejemplo 5.6 9. Ahora observe en la imagen preliminar el resultado obtenido mediante el reemplazo de color. Vea el

ejemplo 5.7.



Ejemplo 5.7

10. Podrá reducir mucho más el tamaño del archivo si establece los parámetros de “Perdida a 41” y “Dither 82 %”. Vea el ejemplo 5.8.

Ejemplo 5.8

11. El resultado obtenido, por la optimización, es una imagen en blanco y negro, con una reducción considerable de tamaño a 8.21 K de 474.10 K. Vea imagen 5.9.

Ejemplo 5.9



Exportar imagen a Adobe PhotoShop. Las opciones de exportación de una imagen diseñada en Fireworks CS3 a Photoshop permiten mantener la editabilidad del mismo, en ambas aplicaciones.

1. Abra el archivo “seguro.png”. Vea ejemplo 5.10. Este archivo cuenta con varias capas de objetos y efectos, permitiendo que durante el proceso de exportación a Adobe Photoshop, éstas se mantengan.

2. Pulse Archivo > Exportar. En él establezca los siguientes parámetros. Vea ejemplo 5.11.

Ejemplo 5.11

3. El establecer estos parámetros permiten que las capas sean editables en Adobe PhotoShop. Esta práctica sólo es valida para Fireworks posteriores a Fireworks CS3 v8.



Exportación de un archivo de Fireworks CS3 a HTML de Dreamweaver.

1. Abra el archivo “Living tech.png”. 2. Pulse Archivo > Exportar 3. Establezca los siguientes parámetros. Vea ejemplo 5.12.

Ejemplo 5.12

4. Pulse en el botón “Opciones…”En Opciones, seleccione su editor HTML, en este ejemplo, será Dreamweaver HTML. Vea ejemplo 5.13. Si desea utilizar otro editor HTML y éste no aparece, seleccione “genérico”.

Ejemplo 5.13

Nota: Es importante que elija su editor HTML en el menú Estilo de HTML; en caso contrario, es posible que los elementos interactivos como los botones y los rollovers no funcionen correctamente al importarlos en su editor web.

5. Pulse en Aceptar para volver al cuadro de diálogo Exportar. 6. Seleccione Exportar Archivo HTML en el menú emergente HTML. 7. Al seleccionar la opción Exportar Archivo HTML genera un archivo HTML y los archivos de imagen

asociados en la ubicación que especifique. 8. Seleccione Exportar divisiones en el menú emergente Divisiones si su documento los contiene. 9. Seleccione Colocar imágenes en subcarpeta para almacenar las imágenes en una carpeta independiente.

Puede elegir una carpeta específica o utilizar el valor predeterminado de Fireworks, una carpeta denominada “images” o “imágenes”.



10. Pulse en Guardar. 11. Tras la exportación, los archivos de Fireworks aparecen en su disco duro. Las imágenes y un archivo

HTML se crean en la ubicación que especificó en el cuadro de diálogo Exportar. 12. Abra su archivo HTML y ejecute sus funciones. Vea ejemplo 5.14.

Ejemplo 5.14

En Dreamweaver MX, podrá realizar otras mejoras como alineación del diseño, color de fondo, inserción de objetos y programación, entre otros. Para su importación desde Dreamweaver MX, pulse en la barra de menú Insertar > Objetos de imagen > HTML de Fireworks.

En este tema aprendió a establecer los parámetros adecuados para la optimización y exportación de un gráfico.

NOTAS:

Al finalizar “Optimizar y exportar gráficos”, realizar la práctica No.5 correspondiente a la página 63.



PRÁCTICAS

Práctica No. 1

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Utilizar el entorno y el área de trabajo de Fireworks CS3 Duración: 15 minutos. Instrucciones: Establezca un lienzo con los siguientes parámetros:

Banner tipo “Leaderboard” para la Web. Medidas 728X60 pixeles. Color de fondo “#FFFFFF”. Guárdelo como “Banner_L.png”.

Valor de la práctica: 20 %



Práctica No. 2.1

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Diseñar y editar gráficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3 Duración: 30 minutos. Instrucciones: Con las herramientas vectoriales, obtenga el siguiente diseño. 1. Tamaño del lienzo: 290X191. 2. Son 5 objetos que conforman este gráfico.




Práctica No. 2.2

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Diseñar y editar gráficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3 Duración: 30 minutos. Instrucciones: Con las herramientas de selección y mapas de bits, obtenga el siguiente diseño.




Práctica No. 3

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Crear animaciones en Fireworks CS3. Duración: Duración 30 minutos. Instrucciones: Diseña una animación con los siguientes con los siguientes parámetros (opcionales o disponibilidad de imágenes o fuentes): Tamaño del lienzo: 728x90 (Banner) Color de fondo: #99CC00 Fuente: AvantGarde MD BT y 35 pixeles de tamaño. Vea los archivos “dino.zip” y el finalizado “museo del dino.gif”.




Práctica No. 4

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Diseñar gráficos Web mediante la inserción de zonas interactivas. Duración: Duración 30 minutos. Instrucciones:

Realizar el siguiente diseño con las dimensiones de 800X600. Diseñar 4 objetos texto de símbolo botón; y en cada uno de ellos aplicar comportamientos de

navegación a su dirección Web respectiva. Así mismo, establecer una zona interactiva en la que se visualicen imagenes (Intercambio de imágenes)

al apuntar uno de los botones. Al finalizar exportar en HTML.




Práctica No. 5

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Optimizar y exportar gráficos en Fireworks CS3. Duración: Duración 30 minutos. Instrucciones: Abra el archivo que realizó en la práctica No. 2.1.

1. Optimice y exporte el archivo, el medio final en la cual se utilizará la imagen es para Dreamweaver 8. Por lo que debe aplicar la transparencia adecuada, la paleta de colores, el tramado y la perdida de colores.

2. El tamaño final del archivo no debe sobrepasar los 7.50 KB.




Práctica Final de Fireworks CS3

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Duración: Duración 90 minutos. Instrucciones: realiza la siguiente práctica final, tomando en cuenta los efectos que observa.

• Dimensiones: 936X702




CONCLUSIÓN

Al termino del curso taller de Fireworks CS3, el participante será capaz de desarrollar habilidades para el diseño de gráficos enriquecidos para la web. En el primer tema, identificó los componentes que conforman Fireworks CS3 así como la configuración de los mismos. En el segundo tema, aprendió a utilizar y a configurar las herramientas para el diseño de objetos vectoriales, texto, y mapas de bits, así mismo la identificación de diferentes tipos de símbolos. En el tercer tema, aprendió a crear animaciones mediante el uso de los fotogramas y obtener un producto final como GIF animado. En el cuarto tema, aprendió a utilizar herramientas para establecer zonas interactivas Web. En el quinto tema, aprendió a configurar los parámetros necesarios para la optimización de acuerdo a un medio como la web, impresión y/o multimedia.



BIBLIOGRAFÍA

http://www.fireworkszone.com

http://www.kadazuro.com

http://www.adobe.com/devnet/fireworks/

http://www.adobe.com/support/fireworks/ Dudas o comentarios Elaborado y/o actualizado en el mes de Marzo de 2009 por Lic. J Alejandro Herrera López [email protected] Departamento de Capacitación Especializada Dirección de Normatividad e Infraestructura Tecnológica 10 Pte. Nte No. 987 2o. Piso, Fracc. Vista Hermosa, Tuxtla Gutiérrez, Chiapas. C.P. 29000; Tel: 61 7-21-36 Conmutador 61 7-21-00 Ext. 34121

i Utilización de Fireworks 4 de Macromedia Edición 2000

http://www.fireworkszone.com/

http://www.kadazuro.com/

http://www.adobe.com/devnet/fireworks/

http://www.adobe.com/support/fireworks/

mailto:[email protected]

Manual de Fireworks Cs3

Documents

Transcript of Manual de Fireworks Cs3