Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 DISEÑO Y PRODUCCIÓN DIGITAL Sesión 26 Módulo III: Herramientas de Producción para Medios Digitales: Herramientas de captura / Herramientas de edición Introducción al Fireworks Extraído del manual de Fireworks de Macromedia Presenta: Lic. Fernando Gutiérrez C., MATI Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Introducción al Fireworks Fireworks es una herramienta digital para diseñar y producir elementos gráficos para la web. Esta herramienta puede utilizarse para crear, editar y animar gráficos web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Introducción al Fireworks Fireworks se integra con otros productos de Macromedia, como Dreamweaver, Flash, FreeHand y Director, y con otros editores HTML y aplicaciones gráficas de uso frecuente para ofrecer una solución web global. Los elementos gráficos de Fireworks pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se utilice. Con Fireworks MX, la producción gráfica se integra en el proceso de desarrollo en un flujo de trabajo abierto y eficaz que reconoce y permite utilizar los formatos de archivo, aplicaciones y normas empleados.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 En el centro de la pantalla se encuentra la ventana de documento. En el centro de la ventana de documento se encuentra el lienzo. Aquí es donde se muestra el documento de Fireworks y las imágenes creadas. En la parte superior de la pantalla hay una barra de menús. La mayoría de los comandos de Fireworks son accesibles desde la barra de menús. En la izquierda de la pantalla se encuentra el panel Herramientas. Si el panel Herramientas no está visible, elija Ventana > Herramientas. El panel Herramientas contiene las herramienta para seleccionar, crear y modificar diversos elementos gráficos y objetos web.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 En la parte inferior de la pantalla se encuentra el Inspector de propiedades. Si no está visible, elija Ventana > Propiedades. El Inspector de propiedades presenta las propiedades del objeto o la herramienta seleccionados. Estas propiedades pueden cambiarse. Si no se ha seleccionado ningún objeto ni herramienta, indica las propiedades del documento. El Inspector de propiedades muestra dos o cuatro filas de propiedades. Si está a media altura, es decir, si sólo muestra dos filas, es posible hacer clic en la flecha de ampliación del ángulo inferior derecho para ver todas las propiedades.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 En la derecha de la pantalla hay varios paneles, como Capas y Optimizar. Éstos y otros paneles pueden abrirse desde el menú Ventana. Desplace el puntero por los distintos elementos de la interfaz. Si mantiene el puntero el tiempo suficiente sobre un elemento, aparece la ayuda emergente. Los mensajes de la ayuda emergente identifican herramientas, menús, botones y otros rasgos de la interfaz en todo el programa. Desaparecen al retirar el puntero de los elementos en cuestión.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Con Fireworks es posible crear y modificar dos tipos de imágenes: objetos vectoriales e imágenes de mapa de bits. Un objeto vectorial es una descripción matemática de una forma geométrica. Los trazados de vectores se definen con puntos. Su calidad no se degrada cuando se amplían, reducen o cambian de escala. Por su parte, la imagen de mapa de bits está compuesta por una cuadrícula de píxeles de color. Las imágenes con variaciones complejas de color, como las fotografías, suelen ser imágenes de mapa de bits. Así como otras aplicaciones ofrecen herramientas para editar formas vectoriales o imágenes de mapa de bits, Fireworks permite trabajar con ambos tipos de elementos gráficos.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Diseño web en Fireworks Los diseñadores web utilizan un proceso denominado división para desmembrar los documentos web por varias razones. En la web se descargan con más rapidez las imágenes pequeñas, lo cual permite que los usuarios vayan viendo una página progresivamente en lugar de esperar a que se descargue toda una imagen grande. Además, con la división es posible optimizar las distintas partes del documento de forma diferente. La división también es necesaria para añadir interactividad.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Acerca de las imágenes vectoriales Los elementos gráficos vectoriales describen imágenes mediante líneas y curvas, denominados vectores, que incluyen información de color y posición. Por ejemplo, la imagen de una hoja puede describirse con una serie de puntos, cuyo resultado es el contorno de la hoja. El color de la hoja lo determina el color del contorno o trazo y el color del área interior o relleno. Cuando se edita una imagen vectorial, se modifican las propiedades de las líneas y curvas que describen su forma. Las imágenes vectoriales son independientes de la resolución, lo que significa que es posible desplazar, cambiar el tamaño, alterar la forma y modificar el color de una imagen vectorial, así como visualizarla en dispositivos de salida de diferente resolución, sin que cambie la calidad de su aspecto.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Acerca de las imágenes de mapa de bits Las imágenes de mapa de bits están formadas por puntos, llamados píxeles, organizados en una cuadrícula. La pantalla del ordenador es una gran cuadrícula de píxeles. En la versión de mapa de bits de la hoja, la imagen estaría determinada por la posición y el valor de color de cada píxel de la cuadrícula. Cada punto tiene asignado un color. Cuando se presentan con la resolución adecuada, los puntos encajan entre sí como las teselas de un mosaico y forman la imagen. Cuando se edita una imagen de mapa de bits, se modifican los píxeles, no las líneas y curvas. Las imágenes de mapa de bits dependen de la resolución, es decir, los datos que las definen están fijos en una cuadrícula que tiene un tamaño determinado. Cuando se aumenta el tamaño de un elemento gráfico de mapa de bits, sus bordes pueden quedar desiguales, porque los píxeles se redistribuyen en la cuadrícula. La visualización de un elemento gráfico de mapa de bits en un dispositivo de salida con menor resolución que la propia imagen también puede reducir su calidad.

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Dado que Fireworks exporta el contenido HTML en forma de tablas HTML, también determina la disposición del documento para HTML importado basándose en tablas HTML. Un archivo HTML debe contener al menos una tabla para que Fireworks pueda reconstruirlo. Al pegar en Fireworks un objeto copiado de otra aplicación, éste queda centrado en el documento activo. Puede utilizar el Portapapeles para cortar y pegar objetos y texto con cualquiera de los formatos siguientes: FreeHand 7 o posterior, Illustrator, PNG, PICT (Macintosh), DIB (Windows), BMP (Windows), Texto ASCII, EPS, WBMP, TXT, RTF

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Para mayor información revisar el manual de Fireworks en al área de Material de Apoyo.