Primeros pasos con Fireworks Marcas comerciales 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev y WebHelp son marcas comerciales registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados Unidos o en otras jurisdicciones, incluidas las de otros países. Otros nombres de productos, logotipos, diseños, títulos, palabras o frases utilizados en esta publicación pueden ser marcas comerciales, marcas de servicios o nombres comerciales de Macromedia, Inc. o de otras entidades y estar registrados en determinadas jurisdicciones, incluidas las de otros países. Información de terceros Esta guía contiene vínculos a sitios Web de terceros que no se encuentran bajo el control de Macromedia, y de cuyo contenido Macromedia no es responsable. El acceso a cualquier sitio Web de otras empresas que se mencione en esta guía es responsabilidad exclusiva del usuario. Macromedia proporciona estos vínculos sólo como ayuda, pero su inclusión no implica que Macromedia haga suyo ni acepte responsabilidad alguna por el contenido de dichos sitios. Copyright © 2005 Macromedia, Inc. Todos los derechos reservados. Este manual no se puede copiar, fotocopiar, reproducir, traducir ni convertir a ningún formato electrónico o legible por máquina, en parte o en su totalidad, sin el permiso por escrito de Macromedia, Inc. No obstante, el propietario, o persona autorizada, de una copia del software con el que se incluye este manual está autorizado a realizar una copia impresa de una versión electrónica de este manual con fines exclusivos de aprendizaje de uso del software, teniendo en cuenta que ninguna parte de este manual se puede imprimir, reproducir, distribuir, revender ni transmitir para otros fines, incluidos, sin limitación, fines comerciales, como vender esta documentación o proporcionar servicios de soporte de pago ZFW80M100L. Agradecimientos Gestión del proyecto: Charles Nadeau, Debi Robson Redacción: David Sullivan, Rosanne Conroy, Charles Nadeau Edición: Melba Lancaster, Shawn Jackson, Linda Adler Responsable de producción: Patrice O'Neill Producción y diseño multimedia: Adam Barnett, Aaron Begley, Arena Reed, Paul Rangel, John Francis, Mario Reynoso Gestión del proyecto de localización: Luciano Arruda Especialista en localización de productos: Masayo Noda Agradecimientos especiales a Jon Varese, Jennifer Rowe, Jay Armstrong, Alan Musselman, Maureen Keating, Matt Hoffberg, David Spells, Sheila McGinn, Andrew Wilson, Rosana Francescato, Kristin Conradi, Yuriko Ando, Rubric, Inc. y a todos los miembros de los equipos de ingeniería y control de calidad de Fireworks . Primera edición: Agosto de 2005 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 (EE.UU.) Contenido Capítulo 1: Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Utilidades de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Novedades de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Instalación de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Capítulo 2: Aprendizaje de Fireworks . . . . . . . . . . . . . . . . . . . . . . .11 Procedimientos iniciales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Cómo aprovechar al máximo la documentación de Fireworks. . . . . . . .11 Utilización del sistema de ayuda de Fireworks . . . . . . . . . . . . . . . . . . . . 12 Capítulo 3: Conceptos básicos de Fireworks . . . . . . . . . . . . . . . . 17 El espacio de trabajo de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Realización de tareas básicas en Fireworks. . . . . . . . . . . . . . . . . . . . . . 28 Capítulo 4: Tutorial: Creación de páginas-maqueta . . . . . . . . . . .33 Creación de una carpeta de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Revisión del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Creación y almacenamiento de un documento nuevo . . . . . . . . . . . . . 36 Importación y posicionamiento de las imágenes. . . . . . . . . . . . . . . . . . .37 Creación de un boceto del área de contenidos . . . . . . . . . . . . . . . . . . . 39 Posicionamiento de texto e imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Exportación de la imagen para la Web . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Capítulo 5: Tutorial: Administración de fotografías . . . . . . . . . . 55 Revisión del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Proceso por lotes de archivos de imagen de gran tamaño . . . . . . . . . Composición de las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vista previa y exportación de las imágenes . . . . . . . . . . . . . . . . . . . . . . Visualización de las imágenes optimizadas finales. . . . . . . . . . . . . . . . 55 56 58 64 65 3 Capítulo 6: Tutorial: Creación de titulares publicitarios . . . . . . . . 67 Revisión del trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Incorporación del fondo y el logotipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Organización de los objetos con capas . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Creación de un fondo que contraste para el logotipo . . . . . . . . . . . . . . 75 Creación de un contorno alrededor del titular publicitario . . . . . . . . . . 79 Creación de un efecto de borde ladeado . . . . . . . . . . . . . . . . . . . . . . . . . 81 Incorporación de un eslogan al titular publicitario . . . . . . . . . . . . . . . . . 83 Exportación de un archivo de imagen optimizada . . . . . . . . . . . . . . . . . 84 Capítulo 7: Tutorial: Creación de páginas Web . . . . . . . . . . . . . . .89 Visualización de la página Web finalizada . . . . . . . . . . . . . . . . . . . . . . . . 90 Apertura del archivo de origen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Importación de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 División del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Creación de un rollover. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Creación de botones para una barra de navegación . . . . . . . . . . . . . . .101 Creación y edición de un menú emergente . . . . . . . . . . . . . . . . . . . . . . .110 Optimización del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 Exportación de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Comprobación del archivo finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 4 Contenido CAPÍTULO 1 Introducción Macromedia Fireworks 8 es la solución definitiva para el diseño y producción de gráficos Web profesionales. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos Web. En este capítulo se cubren los siguientes temas: Utilidades de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Novedades de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Instalación de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1 Utilidades de Fireworks Fireworks 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. 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 gráficos de Fireworks pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se utilice. 5 Novedades de Fireworks 8 Cree y optimice de forma precisa imágenes para la Web en un entorno intuitivo y personalizable. Fireworks admite ahora formatos ActionScript y CSS (Cascading Style Sheet), lo que permite a la aplicación trabajar de una manera incluso más eficaz con Dreamweaver y Flash. Nuevos formatos de archivos, nuevos paneles y un flujo de trabajo espectacularmente simplificado que no sólo permite optimizar sus imágenes, sino también su tiempo. Optimización Panel Edición de imagen Este nuevo panel es una ubicación central desde la que el usuario puede acceder a las herramientas de edición de imagen, filtros y comandos de menú más utilizados. Fireworks 8 admite ahora la importación de formatos de archivos QuickTime Image, MacPaint, SGI y JPEG 2000 (para QuickTime es necesario el filtro de conexión correspondiente). Cambio de nombres de archivo simplificado, la posibilidad de comprobar las dimensiones de los archivos cuando se utiliza la escala durante un proceso por lotes y la incorporación de una barra de estado y un archivo de historial son sólo algunas de las mejoras de este flujo de trabajo. Más formatos de archivos de importación Flujo de trabajo de proceso por lotes optimizado Aproveche el flujo de trabajo integrado de Fireworks para crear y optimizar imágenes para Dreamweaver 8 y Flash Professional 8 sin perder información ni tiempo con ediciones de ida y vuelta. Utilice la compatibilidad mejorada para CSS y ActionScript, así como la función de alineación con otros productos de Studio. Flujo de trabajo integrado Menús emergentes CSS (Cascading Style Sheet) Fireworks 8 utiliza el formato CSS (Cascading Style Sheet) para crear menús emergentes interactivos. El resultado es nítido y sencillo para personalizar código que se integra perfectamente con sitios creados en Dreamweaver. Los atributos vectoriales (rellenos, trazos, filtros y modos de mezcla) se conservan al mover objetos entre Flash y Fireworks. Compatibilidad de vectores 6 Introducción Flujo de trabajo integrado Más opciones de división Reconocimiento de valores de color de ActionScript Utilice el comando "Guardar como" para guardar mapas de bits en distintos tipos de archivos. Lógica para Abrir, Guardar y Exportar desarrollada Las divisiones poligonales se insertan automáticamente cuando el objeto seleccionado es un trazado poligonal. Fireworks reconoce valores de color de ActionScript al copiar desde Flash y pegar en campos de valores de color de Fireworks. Elija formatos de salida de un archivo, como gif, jpg, tiff, en el cuadro de diálogo "Guardar como". Se ha mejorado la lógica utilizada para determinar las carpetas predeterminadas en los cuadros de diálogo Abrir, Guardar, Guardar como, Guardar una copia y Exportar, lo que reduce la navegación necesaria. Como en Flash, las cuadrículas utilizan ahora una línea de puntos y un color predeterminado más claro. Cuadrículas menos intrusivas Utilice Fireworks con herramientas visuales para crear gráficos y animaciones Web de calidad profesional, como rollovers y menús emergentes sin necesidad de programar. Ejerza un control preciso sobre sus imágenes con muchas y nuevas opciones creativas. Creación de forma sencilla 25 nuevos modos de mezcla Sombra de perspectiva Sombra sólida Componentes de interfaces móviles 25 nuevas opciones para alterar el aspecto de los colores y objetos. Añada una sombra de perspectiva a trazados abiertos y objetos de texto. Nuevo filtro automático que marca varias veces el objeto al que se aplica. Cree rápidamente una maqueta de su interfaz móvil con los componentes de interfaz de mapa de bits. Comience a trabajar rápidamente con nuevos y Botones, animaciones, temas y atractivos activos, como botones, animaciones, temas y marcas. marcas de muestra Novedades de Fireworks 8 7 Creación de forma sencilla Panel Propiedades de Este nuevo panel se utiliza para modificar las forma automática propiedades de formas automáticas, como estrella, fecha y polígono inteligente. Recuadro automático y Conversión de selecciones (recuadro a trazado y trazado a recuadro) Texto de nom ...