Manual de Fireworks Cs3

Direccin de Normatividad e Infraestructura Tecnolgica
Manual de Fireworks CS3
Direccin de Normatividad e Infraestructura tecnolgica
BIENVENIDA
La Direccin de Normatividad e Infraestructura Tecnolgica con el afn de contribuir al mejoramiento del desempeo laboral de Servidores Pblicos, ha adoptado como una de sus estrategias, la capacitacin en materia de tecnologas de la informacin especializadas, proporcionando conocimientos sobre el uso de recursos informticos.
Por lo cual lo invitamos a participar entusiasta y activamente en el curso taller de Fireworks CS3 Bsico, que al trmino del curso-taller el participante ser capaz de desarrollar habilidades para el diseo de grficos enriquecidos para la web.
Departamento de Capacitacin Especializada
PROPSITO
Al trmino del curso-taller el participante ser capaz de desarrollar habilidades para el diseo de grficos enriquecidos para la web.
RESULTADOS DE APRENDIZAJE
1. Conocer y utilizar el entorno y el rea de trabajo de Fireworks CS3. 2. Disear y editar grficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3. 3. Crear animaciones en Fireworks CS3. 4. Disear grficos enriquecidos para la Web en Fireworks CS3. 5. Optimizar y exportar grficos en Fireworks CS3.
INTRODUCCIN
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 configuracin para la creacin y edicin de grficos vectoriales y de mapas de bits. En el tercer tema, aprender a crear animaciones mediante la utilizacin de fotogramas y exportarlos al formato de GIF animado. En el cuarto tema, aprender a crear grficos de smbolo botn, reas interactivas con comportamientos web, Plantillas y Galerias de diapositivas (Slideshows) para su utilizacin en la Internet. En el quinto tema, aprender a exportar objetos aplicando diversas configuraciones y extensiones de formatos de grficos para la optimizacin de los mismos y poder utilizarlos en diversos medios impresos o electrnicos.
NDICE TEMA 1 Utilizar el entorno y el rea de trabajo de Fireworks CS3 ...................................................... 7 El entorno de Fireworks CS3. ................................................................................................ 7 Cambio del tamao, color y resolucin del lienzo. ................................................................... 8 Abrir una imagen y cambiar la resolucin de la misma. ............................................................ 9 TEMA 2 Disear y editar grficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3................. 11 Dibujar formas bsicas con las herramientas para crear grficos vectoriales. ............................. 11 Seleccin y edicin de grficos vectoriales. ............................................................................. 12 La organizacin de los objetos............................................................................................... 13 La transformacin de los objetos .......................................................................................... 13 Aplicacin de efectos a vectoriales ......................................................................................... 14 El modo mapa de bits ........................................................................................................... 15 Crear selecciones en modo mapa de bits ................................................................................ 15 Edicin de mapas de bits. ..................................................................................................... 16 Aplicar efectos a mapa de bits ............................................................................................... 17 Las mascaras y las capas ...................................................................................................... 19 Texto Enmascarado .............................................................................................................. 19 Creacin de mascaras utilizando herramientas de seleccin ..................................................... 20 Creacin de mascaras utilizando la herramienta Pluma y Degradado ......................................... 21 Los Smbolos ....................................................................................................................... 22 Qu es un Comando? ......................................................................................................... 23 Extensiones ......................................................................................................................... 26 TEMA 3 Crear animaciones en Fireworks CS3 .................................................................................. 28 Pasos para la creacin de una animacin en Fireworks CS3...................................................... 27 Animacin a Texto ............................................................................................................... 28 Animacin de rotacin de texto ............................................................................................. 29 Exportacin de una animacin ............................................................................................... 30 TEMA 4 Disear grficos enriquecidos para la Web ......................................................................... 34 Pasos para agregar un URL .................................................................................................. 34 Creacin de divisiones .......................................................................................................... 36 Rollover............................................................................................................................... 40 Cambio de imgenes ............................................................................................................ 43 Comando Slideshow (Presentacin de diapositivas) ................................................................. 49 Comando Page (Plantillas) .................................................................................................... 51 TEMA 5 Optimizar y exportar grficos en Fireworks CS3. ................................................................. 50 La optimizacin de un grfico ................................................................................................ 50 Exportar imagen a Adobe PhotoShop ..................................................................................... 55 Exportacin de un archivo de Fireworks CS3 a HTML de Dreamweaver ..................................... 56
Prctica ................................................................................................................................... 58 Conclusin ............................................................................................................................... 65 Bibliografa .............................................................................................................................. 66
Direccin de Normatividad e Infraestructura Tecnolgica
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 parmetros adecuados para obtener la configuracin deseada de los mismos.
El entorno de Fireworks CS3.
El Lienzo.
Departamento de Capacitacin y Evaluacin de la Gestin Informtica Institucional
Ejemplo 1.1 Es el documento de Fireworks CS3, en el cual podr realizar los diseos grficos, y en l podr cambiar el tamao, definir el color de fondo, y la resolucin del mismo. Adems en la parte inferior del lienzo, se encuentran los botones de reproduccin, estas se activan siempre y cuando el documento contenga un diseo para animacin.
Para crear un nuevo lienzo, pulse: Archivo> Nuevo En el panel Nuevo documento podr establecer el tamao, color, y la resolucin del lienzo. Observe que al especificar el tamao del lienzo, Fireworks CS3, le proporciona al instante el tamao del archivo. Vea ejemplo 1.1. Pulse en el botn ACEPTAR para aceptar los parmetros, el lienzo es el siguiente, vea ejemplo 1.2: En la parte superior derecha del lienzo se encuentran cuatro pestaas de visualizacin. La primera pestaa Original muestra el documento en el formato original png. La pestaa Vista previa, visualiza el lienzo de acuerdo al formato final que se haya establecido, por ejemplo, jpeg, gif,etc. Las pestaas 2 copias y 4 copias comparan las presentaciones preliminares segn los parmetros variables de exportacin que haya establecido. En la parte inferior, se encuentran los botones de control de reproduccin, estos se activa cuanto se realizan animaciones a travs de los fotogramas. As mismo visualiza el tamao del lienzo y los rangos de porcentajes de aumento y disminucin de visualizacin. Cambio del tamao, color y resolucin del lienzo. Para cambiar el tamao del lienzo al instante. Pulse Modificar > Lienzo > Tamao del lienzo. En el ejemplo 1.3, podr establecer las nuevas medidas del tamao 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:
Ejemplo 1.2
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 resolucin de la misma Para abrir una imagen pulse: Archivo > Abrir Para poder ver todas las imgenes sin importar el tipo de formato, en la opcin Tipo seleccione Todos los archivos. Vea ejemplo 1.5.
Ejemplo 1.5
Cambio de la resolucin de la imagen. Modificar > Lienzo > Tamao de la imagen En el ejemplo 1.6 podr establecer los valores de dimensin y de impresin. Si mantiene activa la opcin Mantener proporciones, los cambios de valores se darn en ambas opciones de manera instantnea. As mismo, podr establecer la resolucin en las siguientes unidades pxeles por pulgadas o por centmetros. Fireworks CS3 cuenta con varios mtodos de interpolacin de pxeles para ajustar el tamao y resolucin de la imagen: Bicbica, Bilinear, Suave y lo mas cercano.
1
Ejemplo 1.6 La interpolacin bicbica, adems de ser el mtodo predeterminado, es el que suele proporcionar resultados ms ntidos y de mayor calidad. La interpolacin bilineal ofrece resultados ms ntidos que la interpolacin suave, pero menos precisos que la bicbica. La interpolacin suave, que era la empleada en Fireworks 1, proporciona un desenfoque suave y detalles menos precisos. Este mtodo resulta til cuando los dems generan resultados no deseados. Con la interpolacin de valor vecino ms 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 interpolacin de pxeles, para observar los resultados diferentes que se obtienen.
En este tema aprendi a crear un lienzo y a realizar las configuraciones respecto a su tamao y color de fondo. As mismo, aprendi a abrir una imagen y aplicar los diferentes ajustes de resolucin de la misma.
Al finalizar Utilizar el entorno y el rea de trabajo de Fireworks CS3, realizar la prctica No.1 correspondiente a la pgina 58.
1
Ayuda de Fireworks CS3, Macromedia Inc.
10
TEMA 2 DISEAR Y EDITAR GRFICOS (VECTORIALES, MAPAS DE BITS Y DE TEXTO) EN FIREWORKS CS3
En este tema aprender a utilizar las herramientas y la configuracin de sus parmetros 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 administracin y aplicacin de los mismos.
Dibujar formas bsicas con las herramientas para crear grficos vectoriales. Qu es un objeto vectorial?, son los objetos cuya forma se definen mediante una serie de lneas, curvas y puntos las cuales conforman un trazado. Los objetos vectoriales son ms simples que los de mapas de bits, ya que en ellos las imgenes se almacenan y se representan por medio de trazos matemticos, por lo que al no estar formados en pixeles, la calidad de la resolucin 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 seccin, Vectorial, seleccione la herramienta Lnea. 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 direccin el cursor, mediante un clic sostenido mueva nuevamente el cursor hacia cualquier direccin y al hacerlo, estar creado los tiradores, que nos permitirn 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.
11
6. Con las herramientas formas bsicas podr crear formas de rectngulos, rectngulos con bordes redondeados, elipses y polgonos. Mediante un clic sostenido podr ver la lista de formas bsicas. Vea ejemplo 2.3
Ejemplo 2.3 Seleccin y edicin de grficos vectoriales. Para la seleccin de un grfico vectorial, podr seleccionar las siguientes herramientas ubicadas en la seccin Seleccionar. Vea ejemplo 2.4. Cabe sealar que la Herramienta Subseleccin, adems de seleccionar objetos enteros, es el idneo para seleccionar y modificar los nodos que dan forma a un objeto. Ver ejemplo 2.5. Con la herramienta Seleccionar detrs, permite seleccionar un objeto que se encuentra detrs de otro. Ver ejemplo 2.6. Otra funcin de la herramienta pluma es agregar o eliminar nodos que conforman a un objeto adems 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 muvala 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.
Ejemplo 2.4
Ejemplo 2.5
Ejemplo 2.6
12
La organizacin de los objetos Puede utilizar las siguientes tcnicas de organizacin 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 seleccin, cree un marco alrededor de los mismos, mediante un clic sostenido, y observe los objetos seleccionados. S desea mayor control en la seleccin de los mismos seleccione uno de ellos y pulse la tecla SHIFT, sin soltarlo, seleccione los dems objetos. Vea ejemplo 2.7.
Ejemplo 2.7 Los objetos pueden situarse delante o detrs de otros objetos. Si desea situar delante de un objeto, pulse Modificar > Ordenar > Poner en primer plano. Si desea situar detrs de un objeto, Modificar > Ordenar > Enviar hacia atrs. Si desea situar un objeto al fondo, pulse Modificar > Ordenar > Enviar al fondo. Atencin: 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. Transformacin de los objetos. Pasos para modificar el tamao de un objeto. 1. Seleccione el objeto. 2. Seleccione cualquiera de las siguientes herramientas de transformacin: Escala, Inclinacin y distorsin. 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 direccin 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 rotacin del mismo. Pasos para modificar la forma de un objeto. 1. En un objeto rectangular, previamente seleccionado. Pulse la Ejemplo 2.8 herramienta Subseleccin. Observe que los nodos pasan de cuadros obscuros a blancos. 2. Seleccione uno de los nodos y mediante un clic sostenido muvalo para cambiar la forma del mismo.
13
Establecer el tamao de un vectorial. Para establecer las medidas de un tamao determinado, es necesario abrir la ventana acoplable Info, pulse Windows > Info; posteriormente seleccione un objeto y en ella podr observar el tamao en pixeles del objeto. Aplicacin de efectos a vectoriales. Con Fireworks CS3 puede crear efectos como cambio de colores, biseles, sombras, resplandores y relieves entre otros. Adems 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 parmetros, 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 opcin 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 parmetros para observar diferentes tipos de efectos obtenidos. Una forma rpida 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.
14
El Modo Mapa de bits. Las imgenes de mapas de bits estn conformados por pixeles, los cuales almacenan informacin completa sobre el color de cada uno de los mismos entre otros parmetros. Mas pxeles 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. Seleccin. Las herramientas de seleccin de pxeles definen el rea de pxeles 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 seleccin de recuadro con un borde definido. Suavizado: evita la aparicin de bordes dentados en la seleccin del recuadro. Fundido: permite fundir el borde de la seleccin de pxeles. As mismo, la cantidad de fundido. En las tres opciones podr establecer la tolerancia de color. Ejemplo 2.9
Ejemplo 2.11 En modo Mapa de bits, las herramientas de seleccin principales son las herramientas Recuadro y Recuadro oval, las herramientas Lazo y Lazo poligonal, y la herramienta Varita mgica.
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.
15
Edicin Para la edicin de objetos de mapas de bits es necesario seleccionarlos o crear reas de seleccin, y posteriormente editarlos mediante las herramientas de formas bsicas, Lnea, Lpiz y/o Pincel. Cuando se pinta en modo Mapa de bits, en lugar de dibujar vectores se pintan pxeles. Cualquier cosa que se pinte sustituir a los pxeles de la imagen. Pintando pxeles. Pasos para pintar pxeles: 1. Seleccione la herramienta gotero. La funcin 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 Lpiz 4. Pinte sobre el rea adecuada. Ver ejemplo 2.12. Pasos para eliminar pixeles: 1. Seleccione la herramienta Borrador. 2. Configure los parmetros como tamao, suavidad y la opacidad. 3. Mueva el cursor sobre el rea a borrar. 4. Vea ejemplo 2.13. Ejemplo 2.13 Pasos para la clonacin de pixeles: 1. Seleccione la herramienta Sello 2. Configure los parmetros como tamao, 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 Pasos para el recorte una imagen 1. 2. 3. 4. Seleccione la herramienta Recortar. Mediante un clic sostenido, seleccione el rea a recortar. Pulse Enter. Vea ejemplo 2.15 Ahora el lienzo tendr un nuevo tamao, de acuerdo al rea recortada.
Ejemplo 2.12
Ejemplo 2.14
Ejemplo 2.15
16
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 opcin Muestra y establezca el color desde A: As mismo podr establecer los parmetros siguientes como: Tamao 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 parmetros, arrastre el cursor sobre el rea a reemplazar el color. Y obtendr el resultado siguiente. Vea ejemplo 2.17.
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. 4. Otra opcin 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 direccin y observe las tonalidades de color obtenidos. Vea ejemplo 2.20.
Ejemplo 2.18
Ejemplo 2.19
Ejemplo 2.20
1. Abra la imagen PSP1.jpg. 2. Con la herramienta Varita Mgica, 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.
Ejemplo 2.21
4. Aplique el siguiente efecto, pulsando en el botn Efectos > Sombra y Glow > Glow. Establezca los siguientes parmetros. Vea ejemplo 2.22. Ejemplo 2.22>> 5. Cambie el color del lienzo a negro.
18
Las mscaras y las capas. Las mascaras son objetos que se agregan a la imagen para aislar y proteger reas de la misma. Para su creacin 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 utilizacin 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, tamao a 150 pixeles, en color blanco. Y posicinelo 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
19
Creacin de mascaras utilizando herramientas de seleccin. 1. Abra la imagen. Posteriormente abra la ventana Capas, pulsando Ventana > Capas. 2. Con la herramienta de seleccin Marco elptico, dibuje una elipse, alrededor del ojo del tigre. Vea el ejemplo 2.25. 3. En la ventana capas, pulse sobre la opcin 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.25
Ejemplo 2.26
Ejemplo 2.27
20
Creacin de mscara utilizando la herramienta Pluma y Degradado 1. Abra la imagen Hercules.jpg. 2. Seleccione la herramienta Pluma, y establezca los siguientes parmetros de contorno: tamao 1 y Estilo Pxel 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 aplquelo 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.28
Ejemplo 2.29
Ejemplo 2.30
21
Los Smbolos. Fireworks cuenta con tres tipos de smbolos: grficos, animaciones y botones. Cada uno posee caractersticas propias para usos especficos. Al generar un smbolo, ste se almacena en el panel Biblioteca (Ventana > Biblioteca), por lo que se puede volver a utilizar cuantas veces sea necesario. Para utilizar un smbolo desde la biblioteca slo seleccinelo y mediante un clic sostenido arrstrelo hacia el lienzo, estas son copias del mismo, tambin conocidas como instancias, es importante tomar en cuenta, que cuando se modifica el objeto de smbolo original, las instancias (copias) cambian automticamente para reflejar las modificaciones efectuadas en el smbolo. Pasos para generar un smbolo. 1. Disee un objeto o importe una imagen. 2. Seleccinelo y pulse F8. 3. Asgnele un nombre y seleccione la opcin Grfico. Vea ejemplo 2.31
Ejemplo 2.31 Es importante asignarle un nombre a los smbolos, de esta manera podr identificarlos en el panel Biblioteca. 4. Abra el panel biblioteca, seleccione el smbolo y arrstrelo hacia el lienzo, reptelo tres veces; abra el panel Biblioteca, pulse doble clic, en el rea superior donde se visualiza el smbolo, con la finalidad de abrirlo y realice alguna modificacin y observe los resultados. Vea ejemplo 2.32.
Ejemplo 2.32
22
Qu es un comando? Un comando es esencialmente un archivo que contiene una serie de pasos o instrucciones para la aplicacin de diversos efectos grficos. Los comandos en Fireworks CS3 se alojan en la barra de men Comandos. El men Comando se compone en dos secciones. En la seccin superior te permitirn 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 Grfico o datos, Cambiar tamao seleccin y Web. Tambin se alojaran aquellos comando que descargo o compr desde Internet. Pasos para la aplicacin de comandos. 1. Abra un nuevo documento con fondo blanco. 2. Con la herramienta Pluma dibuje un trazado y seleccinela. Vea ejemplo 2.33.
Ejemplo 2.33 3. Pulse Comandos > Creativo > Insertar puntas de flecha. La ventana similar al ejemplo 2.34 podrs establecer parmetros como agregar estilos de flecha, tamao, escala, etc. Al final presione en Aceptar.
Ejemplo 2.34 4. El resultado es el siguiente ejemplo 2.35
Ejemplo 2.35
23
El siguiente comando Creativo, permite aplicar efectos instantneos a una imagen. 1. Abra una imagen y seleccinela. Pulse Comandos > Creativo > Fundir imagen. Se visualizar la siguiente ventana. Vea ejemplo 2.36. En ella, podr establecer diferentes estilos de fundicin de imgenes. Solo seleccione el estilo y pulse sobre el botn Aceptar.
Ejemplo 2.36 2. Cabe sealar que tambin se activa la barra de propiedades con los cuales podr establecer parmetros 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
24
Creacin de comandos. 1. Abra un nuevo documento, con la herramienta Texto, escriba la palabra CREACIN estableciendo los siguientes parmetros. Vea ejemplo 2.39.
Ejemplo 2.39. 2. Seleccione la palabra y establezca los siguientes parmetros. 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 diseo. 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.
25
Ejemplo 2.42. 5. Los comandos almacenados se ubicaran en la seccin inferior de la barra de men comandos. 6. Para la ejecucin de un comando, seleccione el objeto tipo texto, pulse Comando, localice y pulse sobre el nombre del comando recin creado. El comando ser aplicado. Extensiones. Las extensiones son comandos personalizados para la generacin 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 sealar, que algunas extensiones son tan complejas que requieren parmetros y conocimiento en directrices o coordenadas.
26
En este tema aprendi a utilizar las herramientas y establecer parmetros para la edicin de vectoriales y de mapas de bits, as como la creacin de comandos y la administracin de extensiones.
NOTAS:
Al finalizar Disear y editar grficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3, realizar la prctica No.2 correspondiente a la pgina 60.
27
TEMA 3 CREAR ANIMACIONES EN FIREWORKS CS3
En este tema realizar animaciones utilizando diversos objetos creados y/o importados mediante la utilizacin de los fotogramas, obteniendo finalmente un objeto GIF animado.
En Fireworks las animaciones se aplican a objetos convertidos a smbolos de animacin. La animacin de un smbolo se divide en fotogramas, los cuales determinan el tiempo y forma de la animacin. Una animacin puede contener ms de un objeto de tipo smbolo y en cada uno de ellos poder realizar animaciones diferentes y contar con un nmero diferente de fotogramas. Pasos para Fireworks. la creacin de una animacin en
1. Dibuje un objeto o importe una imagen. 2. Seleccionelo y pulse F8 para activar el cuadro de propiedades de smbolo. En l, seleccione la opcin Animacin. Posteriormente pulse en el botn OK. Vea ejemplo 3.1. Ejemplo 3.1 3. Introduzca los siguientes valores, vea ejemplo 3.2. Podr definir lo siguiente: Nmero de Fotogramas: Es el nmero de fotogramas que tendr una animacin, entre mayor sea el nmero mayor duracin ser. Mover: Establece la distancia de movimiento. Direccin: Establece el grado de direccin. Ajustar escala a: Ajusta las dimensiones del objeto conforme a la animacin. Opacidad: Estableces el nivel de opacidad de 0 a 100% visible. Girar y direccin: 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 Seleccin, seleccione dicho punto y arrstrelo hacia cualquier direccin, de esta manera est creando el trayecto de la animacin. El trayecto consta de dos puntos uno verde (inicio) y uno rojo (final). Ejemplo 3.3.
28
Ejemplo 3.3
6. Abra el panel Fotogramas para establecer la velocidad de movimiento de la animacin. Pulse Ventana> Fotogramas. En este panel podr ver el nmero de fotogramas que contiene la animacin, y en cada una de ellos podr cambiar la velocidad del mismo, entre mas alto el valor mas lenta es la animacin. Para cambiarlo pulse dos veces sobre el valor y establezca un nuevo valor. Vea ejemplo 3.4.
7. Reproduzca la animacin y observe el resultado. 8. En la parte inferior del panel Fotogramas, observe los siguientes controles: 5. Papel cebolla: Es una caracterstica que te permite visualizar las etapas de la animacin al mismo tiempo. 6. Bucle: Estableces el nmero de veces que se repita la animacin. 7. Distribuir en fotogramas: Distribuyes el objeto en la animacin. 8. Insertar fotograma: Inserta uno nuevo a partir de una seleccionada. 9. Eliminar fotograma: Elimina un fotograma previamente seleccionado. 9. Optimice el documento y exprtelo como una Animacin GIF.
1 2
29
Animacin a texto. 1. Cree un nuevo lienzo de 300x500 pixeles con fondo color blanco. 2. Escriba el texto Bienvenidos, tamao a 45 pixeles, y ubquelo en la parte superior del lienzo. Vea ejemplo 3.4. 3. Seleccione el texto, y pulse Modificar > Animacin > Animar seleccin 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 parmetro de opacidad de 100 a 100, por 100 a 0. 7. Escriba el siguiente texto Al curso de Fireworks CS3, con el mismo tamao del anterior. Ubquelo al final del lienzo. Vea ejemplo 3.6. 8. Pulse de nuevo Modificar > Animacin > Animar seleccin 9. En l, establezca las siguientes parmetros. Vea ejemplo 3.7. 10. Reproduzca y observe los efectos obtenidos.
Ejemplo 3.4
Ejemplo 3.5
Ejemplo 3.6 Ejemplo 3.7
30
Animacin de rotacin de texto. Cree un nuevo lienzo con las siguientes medidas: 400X400 pxeles, con color de fondo blanco. 1. Escriba el siguiente texto Hechos no palabras con los siguientes parmetros:tamao 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 animacin, y establezca los siguientes parmetros, vea ejemplo 3.10.
31
Ejemplo 3.10 7. Una vez establecido los parmetros, observe que se visualiza el panel de control de reproduccin en la parte de inferior del lienzo. 8. Reproduzca la animacin, observe y guarde el resultado. Exportacin de la animacin. 1. El siguiente paso consiste en exportar el ejercicio como gif animado. Pulse Archivo > Presentacin preliminar de la imagen, en la pestaa Opciones, establezca los siguientes parmetros, vea ejemplo 3.11.
Ejemplo 3.11 Pulse en la opcin Formato y seleccione GIF Animado. Establezca la paleta de color Adaptable, as como, nmero mximo 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 hgalo desde cualquier navegador web como Internet Explorer, Mozilla, etc.
32
Animacin entre instancias de smbolo grfico. Esta clase de animacin le permite crear una animacin entre dos objetos de smbolo grfico, cabe sealar que funcionar siempre y cuando sean los mismos objetos idnticos. Pasos: 1. Debe contar con al menos un smbolo grfico. Vea ejemplo sig.
2. Posicione los objetos de tal manera que uno sea el inicio y el otro el fin de la animacin, vea ejemplo siguiente:
3. Seleccinelos y pulse Modificar > Smbolos > Instancias Tween, aparecer el siguiente la ventana, establezca el nmero 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 smbolo ubicado en el lado derecho y el ltimo contiene el posicionado en la derecha, los 10 restantes se refieren al proceso de animacin cuadro por cuadro. 5. Recuerde no seleccionar instancias de diferentes smbolos ya no funciona de esta manera. As mismo, una vez generado los fotogramas, no puede cambiar la direccin de la animacin de los objetos.
En este tema aprendi a detalle a crear animaciones mediante los fotogramas y conversin de objetos a smbolo de animacin, as como a establecer diferentes parmetros para obtener diferentes tipos de animaciones.
Al finalizar Crear animaciones, realizar la prctica No.3 correspondiente a la pgina 61.
33
TEMA 4. DISEAR GRFICOS ENRIQUECIDOS PARA LA WEB
En este tema aprender a establecer zonas interactivas y/o divisiones a un grfico la cual le permitir crear botones interactivos y rollovers, los cuales podrn 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 adems incluya una zona interactiva. Desde el panel URL. 1. Pulse Ventana > URL. Vea ejemplo 4.1. 2. En el smbolo de cadena escriba la direccin 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 direccin Web, por ejemplo http://www.chiapas.gob.mx 4. Pulse en el botn OK, para aceptar la direccin. 5. Para eliminar una direccin web, seleccinela y pulse sobre el botn Basura.
Ejemplo 4.1 Desde un objeto grfico. Para agregar un URL a un objeto grfico, es necesario que este contenga una zona interactiva. 1. Dibuje un objeto grfico con un texto Ok. Vea ejemplo 4.2. 2. En la barra de herramientas pulse sobre la herramienta Zona interactiva. En ella, se Ejemplo 4.2 visualizan tres formas siguientes: Rectngular, Circular y Polgonal. 3. Seleccione la primera, y dibuje la zona interactiva sobre el botn. Al dibujarla se visualiza el smbolo de comportamiento. Vea ejemplo 4.3.
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 vnculo, una etiqueta y establecer un destino de marco. Vea ejemplo 4.4.
34
Ejemplo 4.4 4. Pulse Archivo > Vista preliminar en un Browser. 5. El siguiente paso es la exportacin del objeto grfico, 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 parmetros. 6. Posteriormente pulse en la opcin Guardar.
35
Creacin de divisiones. Las divisiones son segmentos que se exportan como archivos independientes para su descarga. Con estas divisiones podr optimizar el tamao 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 divisin Poligonal. Vea el ejemplo 4.6.
Ejemplo 4.6 3. Con dicha herramienta dibuje un polgono sobre el grfico correspondiente a la imagen 1. Vea imagen 4.7.
Ejemplo 4.7 4. Realice el mismo procedimiento a los grficos restantes. Vea imagen 4.8.
Ejemplo 4.8 5. Por separado seleccione cada divisin y establezca los parmetros. Vea ejemplo 4.9:
36
Ejemplo 4.9 Un destino es un marco de pgina 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 direccin 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 vnculo. Si el marco que contiene el vnculo 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 vnculo. Normalmente no es necesario especificar el destino, ya que est implcito. _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
37
Rollover. Los rollovers son elementos grficos que cambian de aspecto en un navegador Web cuando el puntero del ratn se desplaza sobre ellos o se hace clic en ellos. Incluyen botones e imgenes intercambiadas. Cualquiera que sea su aspecto, los rollovers siempre funcionan de la misma forma: un grfico activa la visualizacin de otro como respuesta a un clic o al desplazamiento del puntero sobre ellos. Las imgenes de rollover pueden colocarse en dos o ms fotogramas. El elemento activador es siempre un objeto Web, es decir, una divisin o una zona interactiva. Los objetos Web pueden tener uno varios comportamientos asociados. El rollover ms sencillo intercambia una imagen en el fotograma 1 con una imagen que se encuentra justo debajo en el fotograma 2. Puede crear rollovers ms complejos: los rollover de intercambio de imgenes 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 botn Registro. Vea ejemplo 4.11. y pulse Modificar > Smbolo > Convertir a smbolo o presione la tecla F8.
Ejemplo 4.11 3. En la ventana propiedades de smbolo, establezca el siguiente parmetro, vea ejemplo 4.12, al hacerlo el objeto botn tendr un rea interactiva similar al ejemplo 4.13.
Ejemplo 4.13
Ejemplo 4.12
38
4. Sobre el botn, pulse el botn derecho del mouse y seleccione la opcin Aadir men emergente, vea ejemplo 4.14.
Ejemplo 4.14 5. En la ventana Editor de men emergente, se encuentra la primera pestaa Contenido, en ella, pulse en el icono (+), cada vez que pulse sobre este icono, est agregando una opcin 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 vnculos y el destino como _blank (en una nueva ventana del navegador web). Al establecer los parmetros pulse en el botn Siguiente.
Ejemplo 4.15
39
6. En la pestaa 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 tamao 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 pestaa Avanzado, podr establecer parmetros en cuanto a las celdas como anchura, altura, rellenos, entre otros. En ella se encuentra la opcin Demora de men en la cual podr establecer el tiempo en milisegundos de aparicin del men, establezca en 100. Vea ejemplo 4.17.
Ejemplo 4.16
4.17
Ejemplo 4.18 8. En la pestaa Posicin, podr establecer cuatro diferentes tipos de posicin de las celdas, as como de los submens. Vea imagen 4.18. Pulse Listo. 9. Observe que en un objeto de tipo smbolo botn, en la parte inferior izquierda, vea imagen 4.19, se encuentra un acceso directo para la edicin del objeto botn. 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, tamao del rea activa, etc. Por default en el evento Sobre , Fireworks CS3, no visualiza dicho evento, por lo que
40
tendr que pulsar en el botn Copiar Grfico Arriba, con la finalidad de copiar el grfico de dicho evento al evento Sobre. Vea ejemplo 4.21.
Ejemplo 4.19
Ejemplo 4.20
Ejemplo 4.19
Ejemplo 4.21
41
Ejemplo 4.19
Ejemplo 4.22 10. Pulse sobre la pestaa rea Activa y observe que el rea sea del mismo tamao que el botn, en caso contrario realice los ajustes necesarios mediante un clic sostenido sobre las lneas sostenidas. Vea ejemplo 4.22. 11. Presione F12 para visualizarlo en el Navegador Web. Vea imagen 4.23.
Ejemplo 4.23
42
Cambio de imgenes. 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 imgenes (swap). Es recomendable que abra el panel Capas, para que note los nombres que las divisiones tienen asignadas. 2. Con la herramienta Divisin, dibuje un rea interactiva, sobre el rea en blanco. Vea el ejemplo 4.24.
3. Seleccione el primer botn Videos vea el ejemplo 4.25.
Ejemplo 4.25 4. Y mediante un clic sostenido del botn izquierdo del Mouse, arrastre el cursor a la divisin recin creada, al hacerlo, se activara la ventana Intercambiar imagen vea el ejemplo 4.26 y pulse sobre el botn Mas opciones
Ejemplo 4.26
Ejemplo 4.27
43
En ella, podr establecer el archivo de imagen de intercambio, como se ilustra en el ejemplo 4.27.
Si va a realizar un diseo con intercambiador de imgenes para la web, es conveniente crear una carpeta que incluya las imgenes. Exportacin WEB. Para su exportacin dirjase al tema Exportacin de un archivo de Fireworks CS3 a HTML de Dreamweaver.
44
Comando SlideShow (lbum de imgenes) Usted puede generar un lbum de imgenes personalizndolo 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, nmbrela y guarde en ella diversas imgenes. Se sugiere que todas las imgenes cuenten con las mismas dimensiones y optimizadas en el mismo formato. Vea el tema 5 Optimizar y exportar grficos en Fireworks CS3 2. Pulse Comandos > Crear SlideShow, en el ejemplo siguiente, observe los componentes que conforman la ventana del creador: a) lbumes b) Imgenes c) Propiedades del lbum libro d) Propiedades del lbum e) Rtulos f) Filtros g) Propiedades del Slideshow h) Opciones de exportacin
45
3. Lea cuidadosamente las opciones que ofrece este comando. La creacin de un Slideshow es realmente sencillo y fcil.
46
El Comando PAGES (PAGINAS). Este nuevo panel de Fireworks CS3 infiere al nombre de Pginas cuya una funcionalidad prctica es disear plantillas o wire frames. La metodologa es la siguiente despus de disear, utilice el comando Pgina, para definirlo como Pgina Maestra, y continuar con nuevas paginas vinculadas y basadas en el diseo de la pgina maestra. De esta manera podr actualizarlas en cualquier momento. Cabe sealar que cada pgina cuenta con sus propias capas y fotogramas, lo cual exigen una buena cantidad de memoria RAM de su equipo de cmputo. Pasos: 1. Abra el archivo gob_EJ.png. (Solictelo al instructor). En este archivo observe los paneles capas y librera.
2. Convierta las opciones DSPYN,DCE y DIT a smbolos de tipo botn. Utilice los mismos nombres para nombrar los botones. 3. Abra el panel PAGINAS. Seleccione la page 1, pulse en el botn OPCIONES y seleccione ESTABLECER COMO PGINA MAESTRA, y verifique que la pgina quede establecida como PAGINA MAESTRA. Doble clic sobre la pgina maestra y nmbrela como index.
47
4. Seleccione la pgina maestra y pulse sobre el botn Nuevo/Duplicar pgina, pulse sobre l tres veces, para crear tres pginas y nmbrelas como los botones: DSPYN, DCE y DIT. En total sern cuatro pginas. 5. Ahora, seleccione la pgina maestra. Y seleccione el primer botn (DSPYN), y en la barra de propiedades, pulse sobre la opcin VNCULO 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 pgina, es decir, dspyn.htm. En ella, cree un nuevo botn cuya funcionalidad ser ir a la pgina index, ubquelo al lado del tercer botn. Cabe sealar que este botn estar en las tres pginas a excepcin de la pgina index.
7. Aplique interactividad a dicho botn. 8. Ahora en el panel Page, debe contar con cuatro pginas. Observe ejemplo
9. El ltimo paso consiste en la exportacin de las pginas. Pulse Archivo > Exportar y establezca la siguiente configuracin: Verifique que la opcin Slo pgina actual no est activada. Si se encuentra activada, la pgina que est seleccionada, ser la que se exporte. Es sugerible que se nombre a la primera pgina como index.htm. Es recomendable crear una carpeta y en ella, guardar las exportaciones realizadas. 10.
48
En este tema aprendi a crear zonas interactivas y/o divisiones, crear botones interactivos, rollovers, Pginas y Slideshow, para el enriquecimiento de sitios web.
NOTAS:
Al finalizar Disear grficos Web mediante la insercin de zonas interactivas y comportamientos, realizar la prctica No.4 correspondiente a la pgina 62.
49
TEMA 5 OPTIMIZAR Y EXPORTAR GRFICOS EN FIREWORKS CS3.
En este tema aprender a establecer los parmetros adecuados para la optimizacin y exportacin de un grfico, con la finalidad de que ste se adapte lo mejor posible a una pgina Web o impresin.
La optimizacin de un grfico. La optimizacin de un grafico consiste en seleccionar el formato adecuado para la comprensin y mantener lo mejor posible la calidad del mismo. Esto se conoce como la optimizacin, que en resumen, busca el equilibrio entre la calidad, la comprensin y los colores de un grfico. Web-Safe (Browser-Safe) Colors. (Colores seguros para la web). Los colores que observa en su monitor son medidos en el nmero de bits que su tarjeta de video pueda soportar, esto es conocido como el nmero de colores. Hoy en da, la capacidad de su monitor es que pueda soportar un mnimo 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 mnimo de 8 bits, 40 colores no son compatibles con los sistemas Windows y Mac. Estos colores son sustrados 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 lucirn 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 ms que mezclar dos o ms colores para crear ese determinado color. Por ello es de especial utilidad utilizar la paleta de colores web safe, ya que es garanta de que los colores lucirn tal como son y sin perdida de calidad. Pasos para la optimizacin de un grfico 1. Abra el archivo *wrecked auto.jpg.
2. Pulse en la pestaa 2-Arriba, vea ejemplo 5.1.
50
3. Pulse Ventana >Optimizar. Vea ejemplo 5.2.
Ejemplo 5.1
4. En ella, establezca los siguientes parmetros: Configuracin: Formato a exportar: Paleta de color:
Ejemplo 5.2 GIF Web 216 GIF Web 216
Fireworks CS3 opera con los siguientes formatos de archivos, la eleccin de uno, depender del destino final que tendr el grfico. 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 ms cercano. La paleta de colores puede contener hasta 256 colores como mximo.
51
GIF WebSnap 128 convierte los colores que no son Websafe al color Websafe ms cercano. La paleta de colores contiene hasta 128 colores. GIF adaptable 256 es una paleta de colores que contiene slo los colores utilizados en el grfico. La paleta de colores puede contener hasta 256 colores como mximo. JPEG - Calidad superior define la calidad en 80 y el suavizado en 0, creando un grfico de alta calidad pero de gran tamao. JPEG - Archivo ms pequeo define la calidad en 60 y el suavizado en 2, creando un grfico de calidad reducida pero con la mitad del tamao del de la mejor calidad.
5. En el ejemplo 5.3, podr observar los parmetros 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 smbolo, que a continuacin se describen: El color ha sido editado, slo 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 tamaos correspondientes de ambas imgenes la original (izquierda) y la preliminar (derecha) 6. El siguiente paso es establecer la imagen a dos colores blanco y negro, en la opcin Colores establzcalo a 2. vea ejemplo 5.4.
52
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.
Editar color Con esta herramienta podr cambiar el color de cada cuadro, la edicin del mismo reemplazar las instancias de la imagen. Cabe sealar que la edicin no afecta a la imagen original.
Ejemplo 5.5 Forzar a color Websafe Bloqueo de color Esta herramienta fuerza a que los Bloquea los colores para que no se colores sean Websafe. editen o eliminen al cambiar la Cabe sealar que deber elegir la paleta de colores por otro o al paleta de colores Web 216. reducir el nmero de ellos. Cabe sealar que los colores bloqueados se aadirn 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.
53
Ejemplo 5.7 10. Podr reducir mucho ms el tamao del archivo si establece los parmetros de Perdida a 41 y Dither 82 %. Vea el ejemplo 5.8.
Ejemplo 5.8 11. El resultado obtenido, por la optimizacin, es una imagen en blanco y negro, con una reduccin considerable de tamao a 8.21 K de 474.10 K. Vea imagen 5.9.
Ejemplo 5.9
54
Exportar imagen a Adobe PhotoShop. Las opciones de exportacin de una imagen diseada 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 exportacin a Adobe Photoshop, stas se mantengan.
2. Pulse Archivo > Exportar. En l establezca los siguientes parmetros. Vea ejemplo 5.11.
Ejemplo 5.11 3. El establecer estos parmetros permiten que las capas sean editables en Adobe PhotoShop. Esta prctica slo es valida para Fireworks posteriores a Fireworks CS3 v8.
55
Exportacin 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 parmetros. Vea ejemplo 5.12.
Ejemplo 5.12 4. Pulse en el botn OpcionesEn 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 genrico.
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. Pulse en Aceptar para volver al cuadro de dilogo Exportar. Seleccione Exportar Archivo HTML en el men emergente HTML. Al seleccionar la opcin Exportar Archivo HTML genera un archivo HTML y los archivos de imagen asociados en la ubicacin que especifique. Seleccione Exportar divisiones en el men emergente Divisiones si su documento los contiene. Seleccione Colocar imgenes en subcarpeta para almacenar las imgenes en una carpeta independiente. Puede elegir una carpeta especfica o utilizar el valor predeterminado de Fireworks, una carpeta denominada images o imgenes.
5. 6. 7. 8. 9.
56
10. Pulse en Guardar. 11. Tras la exportacin, los archivos de Fireworks aparecen en su disco duro. Las imgenes y un archivo HTML se crean en la ubicacin que especific en el cuadro de dilogo 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 alineacin del diseo, color de fondo, insercin de objetos y programacin, entre otros. Para su importacin desde Dreamweaver MX, pulse en la barra de men Insertar > Objetos de imagen > HTML de Fireworks.
En este tema aprendi a establecer los parmetros adecuados para la optimizacin y exportacin de un grfico.
NOTAS:
Al finalizar Optimizar y exportar grficos, realizar la prctica No.5 correspondiente a la pgina 63.
57
PRCTICAS Prctica No. 1 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Utilizar el entorno y el rea de trabajo de Fireworks CS3 Duracin: 15 minutos. Instrucciones: Establezca un lienzo con los siguientes parmetros: Banner tipo Leaderboard para la Web. Medidas 728X60 pixeles. Color de fondo #FFFFFF. Gurdelo como Banner_L.png.
Valor de la prctica: 20 %
58
Prctica No. 2.1 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Disear y editar grficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3 Duracin: 30 minutos. Instrucciones: Con las herramientas vectoriales, obtenga el siguiente diseo. 1. Tamao del lienzo: 290X191. 2. Son 5 objetos que conforman este grfico.
59
Prctica No. 2.2 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Disear y editar grficos (Vectoriales, Mapas de bits y de Texto) en Fireworks CS3 Duracin: 30 minutos. Instrucciones: Con las herramientas de seleccin y mapas de bits, obtenga el siguiente diseo.
60
Prctica No. 3 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Crear animaciones en Fireworks CS3. Duracin: Duracin 30 minutos. Instrucciones: Disea una animacin con los siguientes con los siguientes parmetros (opcionales o disponibilidad de imgenes o fuentes): Tamao del lienzo: 728x90 (Banner) Color de fondo: #99CC00 Fuente: AvantGarde MD BT y 35 pixeles de tamao. Vea los archivos dino.zip y el finalizado museo del dino.gif.
61
Prctica No. 4 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Disear grficos Web mediante la insercin de zonas interactivas. Duracin: Duracin 30 minutos. Instrucciones: Realizar el siguiente diseo con las dimensiones de 800X600. Disear 4 objetos texto de smbolo botn; y en cada uno de ellos aplicar comportamientos de navegacin a su direccin Web respectiva. As mismo, establecer una zona interactiva en la que se visualicen imagenes (Intercambio de imgenes) al apuntar uno de los botones. Al finalizar exportar en HTML.
62
Prctica No. 5 Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Resultado de Aprendizaje: Optimizar y exportar grficos en Fireworks CS3. Duracin: Duracin 30 minutos. Instrucciones: Abra el archivo que realiz en la prctica 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 tamao final del archivo no debe sobrepasar los 7.50 KB.
63
Prctica Final de Fireworks CS3

Fecha: Nombre del participante: Dependencia: Nombre del Facilitador: Duracin: Duracin 90 minutos. Instrucciones: realiza la siguiente prctica final, tomando en cuenta los efectos que observa.
Dimensiones: 936X702
64
CONCLUSIN
Al termino del curso taller de Fireworks CS3, el participante ser capaz de desarrollar habilidades para el diseo de grficos enriquecidos para la web. En el primer tema, identific los componentes que conforman Fireworks CS3 as como la configuracin de los mismos. En el segundo tema, aprendi a utilizar y a configurar las herramientas para el diseo de objetos vectoriales, texto, y mapas de bits, as mismo la identificacin de diferentes tipos de smbolos. 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 parmetros necesarios para la optimizacin de acuerdo a un medio como la web, impresin y/o multimedia.
65
BIBLIOGRAFA
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 Lpez jherrera@chiapas.gob.mx Departamento de Capacitacin Especializada Direccin de Normatividad e Infraestructura Tecnolgica 10 Pte. Nte No. 987 2o. Piso, Fracc. Vista Hermosa, Tuxtla Gutirrez, Chiapas. C.P. 29000; Tel: 61 7-21-36 Conmutador 61 7-21-00 Ext. 34121
Utilizacin de Fireworks 4 de Macromedia Edicin 2000
66

Manual de Fireworks Cs3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual de Fireworks Cs3

Diunggah oleh

Hak Cipta:

Format Tersedia

Direccin de Normatividad e Infraestructura Tecnolgica

Manual de Fireworks CS3

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura Tecnolgica

Manual de Fireworks CS3

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

Departamento de Capacitacin y Evaluacin de la Gestin Informtica Institucional

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Ayuda de Fireworks CS3, Macromedia Inc.

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada

Direccin de Normatividad e Infraestructura tecnolgica

Manual de Fireworks CS3

Departamento de Capacitacin Especializada