macromedia

FIREWORKS 3

Utilizacin de Fireworks

macromedia

Marcas comerciales Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developers Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind y Xtra son marcas comerciales de Macromedia, Inc. y pueden estar registradas en los EE. UU. u otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logos, diseos, ttulos, palabras o frases mencionadas en esta publicacin pueden ser marcas comerciales, marcas de servicio o nombres comerciales de Macromedia, Inc. o de otras entidades y pueden estar registrados en determinadas jurisdicciones, incluidas las internacionales. Apple, el logo Apple, Macintosh, Power Macintosh, Mac OS y LaserWriter son marcas registradas de Apple Computer, Inc. Adobe, Adobe Type Manager, Illustrator y Photoshop son marcas comerciales de Adobe Systems Incorporated. CorelDRAW es una marca comercial registrada de Corel Corporation o Corel Corporation Limited en Canad, los EE. UU. y/o otros pases. Java y todas las marcas basadas en Java son marcas comerciales o marcas comerciales registradas de Sun Microsystems, Inc. en EE.UU. y en otros pases. GIF-LZW se licencia bajo la patente de los EE.UU. N 4.558.302 y equivalente extranjeros. Este software se basa en parte en el trabajo de Independent JPEG Group. El formato Graphics Interchange Format es Copyright de CompuServe Incorporated. GIF es una marca de servicio, propiedad de CompuServe Incorporated. Porciones Copyright 1988 1992 Sam Lefer. Porciones Copyright 1991, 1992 Silicon Graphics. Imgenes 1999 de PhotoDisc, Inc. Esta gua contiene vnculos a sitios Web de terceros que no se encuentran bajo el control de Macromedia. Macromedia no es responsable del contenido de cualquier sitio vinculado. Si accede a un sitio Web de terceros mencionado en esta gua, lo hace bajo su propia responsabilidad. Macromedia proporciona estos vnculos slo como una ayuda, la inclusin del vnculo no implica que Macromedia haga suyo o acepte el contenido de dichos sitios de terceros. Nota legal de Apple APPLE COMPUTER, INC., NO OFRECE NINGUNA GARANTA, EXPRESA O IMPLCITA, DEL PAQUETE DE SOFTWARE ADJUNTO, SU COMERCIABILIDAD O SU ADECUACIN PARA ALGN PROPSITO EN PARTICULAR. LA EXCLUSIN DE GARANTAS IMPLCITAS NO ESTN PERMITIDAS EN ALGUNOS ESTADOS. LA EXCLUSIN ANTERIOR PUEDE NO SER APLICABLE A USTED. ESTA GARANTA LE PROPORCIONA DERECHOS LEGALES ESPECFICOS. ES POSIBLE QUE DISPONGA DE OTROS DERECHOS QUE VAREN DE UNOS ESTADOS A OTROS. Fireworks ha sido creado por Macromedia, Inc. 1999. Reservados todos los derechos. Patentes de los EE.UU. 5.353.396, 5.361.333, 5.434.959, 5.467.443, 5.500.927, 5.594.855 y 5.623.593. Otras patentes pendientes. No se permite la copia, fotocopia, reproduccin, traduccin o conversin mediante ningn medio electrnico o mecnico, ya sea de forma total o parcial de este manual, sin la previa autorizacin por escrito de Macromedia, Inc. Primera edicin: Diciembre 1999 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 Agradecimientos Escrito por Randy Varnell, Rocky Angelucci, Stuart Manning, Robin Hunt-Smith, Sherri Harte y Peter Fenczik. Editado por Stuart Manning y Monte Williams. Proyecto dirigido por Monte Williams. Produccin por Sherri Harte y Rocky Angelucci. Agradecimientos especiales a John Ahlquist, Doug Benson, Dennis Grifn, Mark Haynes, David Morris y Diana Smedley. Director de localizacin Linda Page. Proyecto de localizacin Sami Kaied. Ingeniera de localizacin Michael Neal.

NDICE DE CONTENIDO

INTRODUCCIN Requisitos del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Instalacin e inicio de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Aprendizaje de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Novedades de Fireworks 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 CAPTULO 1 Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Herramientas de dibujo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Botones de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Rollovers sosticados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 Efectos automticos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Automatizacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Mscaras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Zonas interactivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Optimizacin de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Exportacin de imgenes, HTML y JavaScript . . . . . . . . . . . . . . . . . . .28 Animacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 CAPTULO 2 Conceptos bsicos de Fireworks . . . . . . . . . . . . . . . .33 Qu es Fireworks? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Perfeccionamiento de los sitios Web con Fireworks . . . . . . . . . . . . . . . .34 Descripcin del rea de trabajo de Fireworks . . . . . . . . . . . . . . . . . . . . .36 Visualizacin de un documento de Fireworks . . . . . . . . . . . . . . . . . . . .37 Optimizacin en el rea de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Visualizacin y eleccin de herramientas . . . . . . . . . . . . . . . . . . . . . . . .38 Uso de paneles e inspectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Asignacin de comportamientos a objetos Web . . . . . . . . . . . . . . . . . . .40 Cambio y repeticin del historial de un documento . . . . . . . . . . . . . . .41 Creacin de botones rollover de JavaScript . . . . . . . . . . . . . . . . . . . . . .41 Utilizacin de los mens contextuales . . . . . . . . . . . . . . . . . . . . . . . . . .42 Conguracin de preferencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42 3

CAPTULO 3 Creacin e importacin de documentos . . . . . . . . .45 Conguracin de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . .46 Visualizacin y navegacin por el documento . . . . . . . . . . . . . . . . . . . .46 Cambio del tamao, el color y la resolucin del documento . . . . . . . . .48 Rotacin y recorte del lienzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Creacin de documentos de Fireworks mediante la importacin . . . . . .50 Importacin de imgenes de un escner o una cmara digital . . . . . . . .53 CAPTULO 4 Dibujo de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55 Activacin del modo de objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56 Eleccin de herramientas de dibujo y edicin . . . . . . . . . . . . . . . . . . . .56 Dibujo en el modo de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Cambio del trazo de las herramientas de dibujo. . . . . . . . . . . . . . . . . . .61 Cambio del relleno de las herramientas de dibujo . . . . . . . . . . . . . . . . .61 Incorporacin de imgenes importadas en un documento . . . . . . . . . . .62 CAPTULO 5 Edicin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Seleccin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 Remodelado de trazados editando los puntos . . . . . . . . . . . . . . . . . . . .68 Remodelado directo de trazados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70 Remodelado de objetos de trazado con operaciones de trazado . . . . . . .72 Cambio de los colores de trazo y relleno . . . . . . . . . . . . . . . . . . . . . . . .75 Edicin de trazos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Edicin de rellenos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 Uso de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85 Transformacin y distorsin de objetos . . . . . . . . . . . . . . . . . . . . . . . . .87 Organizacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Smbolos e instancias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94 CAPTULO 6 Color y transparencia . . . . . . . . . . . . . . . . . . . . . . . . . . .99 Eleccin de colores al dibujar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100 Personalizacin del panel Muestras . . . . . . . . . . . . . . . . . . . . . . . . . . .101 Cambio de grupo de muestras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 Creacin de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 Asignacin de transparencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Suavizado para que coincida el color de fondo del resultado . . . . . . . .106 Eliminacin de halos de grcos de web . . . . . . . . . . . . . . . . . . . . . . .106

ndice de contenido

CAPTULO 7 Uso de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Introduccin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110 Edicin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111 Aplicacin de trazos, rellenos, efectos y estilos al texto. . . . . . . . . . . . .115 Adaptacin de texto a un trazado . . . . . . . . . . . . . . . . . . . . . . . . . . . .115 Transformacin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Remodelado del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 Importacin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 CAPTULO 8 Edicin y pintura de pxeles . . . . . . . . . . . . . . . . . . . . 119 Familiarizacin con el modo de edicin de imgenes. . . . . . . . . . . . . .120 Creacin de imgenes de mapa de bits. . . . . . . . . . . . . . . . . . . . . . . . .120 Activacin del modo de edicin de imgenes. . . . . . . . . . . . . . . . . . . .121 Seleccin de pxeles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Ajuste de una seleccin con recuadro. . . . . . . . . . . . . . . . . . . . . . . . . .124 Edicin de pxeles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Pintura de pxeles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 Comportamiento de los modos de mezcla en el modo de edicin de imgenes 130 Uso de ltros y ltros de conexin. . . . . . . . . . . . . . . . . . . . . . . . . . . .130 CAPTULO 9 Aplicacin de efectos a objetos . . . . . . . . . . . . . . . . 139 Aplicacin de un efecto automtico. . . . . . . . . . . . . . . . . . . . . . . . . . .140 Edicin de Efectos automticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 Creacin de efectos personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Control de la actualizacin del efecto automtico . . . . . . . . . . . . . . . .142 Aplicacin de efectos a objetos agrupados . . . . . . . . . . . . . . . . . . . . . .142 Utilizacin de efectos automticos estndar . . . . . . . . . . . . . . . . . . . . .143 Utilizacin de ltros de conexin de Photoshop como efectos automticos 145 Utilizacin de Xtras de Fireworks como efectos automticos . . . . . . . .145 CAPTULO 10 Composicin y mscaras . . . . . . . . . . . . . . . . . . . . . . 147 Composiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Enmascaramiento de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150

ndice de contenido

CAPTULO 11 Optimizacin de grficos . . . . . . . . . . . . . . . . . . . . . . 153 Optimizacin en el rea de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . .154 Presentacin preliminar de los ajustes de optimizacin y comportamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156 Seleccin del formato de archivo ms adecuado. . . . . . . . . . . . . . . . . .157 Eleccin de los ajustes de optimizacin para archivos GIF y PNG. . . .158 Eleccin de los ajustes de optimizacin para archivos JPEG. . . . . . . . .159 Optimizacin de paletas de colores . . . . . . . . . . . . . . . . . . . . . . . . . . .160 CAPTULO 12 Exportacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Exportacin de una imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 Resultados de la exportacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 Exportacin con el Asistente de exportacin . . . . . . . . . . . . . . . . . . . .167 Optimizacin y presentacin preliminar durante la exportacin . . . . .167 Exportacin de fotogramas o capas como varios archivos. . . . . . . . . . .169 Exportacin de una rea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 Exportacin de objetos con divisiones . . . . . . . . . . . . . . . . . . . . . . . . .170 Exportacin de trazados vectoriales . . . . . . . . . . . . . . . . . . . . . . . . . . .171 CAPTULO 13 Creacin de zonas interactivas y de mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Eleccin de grcos origen para mapas de imagen . . . . . . . . . . . . . . . .174 Creacin de zonas interactivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174 Asignacin de valores URL a zonas interactivas . . . . . . . . . . . . . . . . . .175 Edicin de zonas interactivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178 Conguracin de las opciones de mapa de imagen . . . . . . . . . . . . . . .178 Exportacin de mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . .179 CAPTULO 14 Divisin de imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . .181 Comparacin entre divisiones y zonas interactivas. . . . . . . . . . . . . . . .182 Dibujo de objetos de divisin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182 Creacin de una imagen simple dividida . . . . . . . . . . . . . . . . . . . . . . .185 Adicin de interactividad a las divisiones. . . . . . . . . . . . . . . . . . . . . . .185 Denominacin de divisiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186 Mezcla de formatos de archivo en una imagen dividida . . . . . . . . . . . .188 Creacin de una divisin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . .188 Creacin de una divisin de reemplazo . . . . . . . . . . . . . . . . . . . . . . . .189 Creacin de rollovers de JavaScript con divisiones . . . . . . . . . . . . . . . .189

ndice de contenido

CAPTULO 15 Creacin de botones . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Qu es un botn?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192 Descripcin de los botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192 Creacin de botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192 Creacin de barras de navegacin mediante smbolos anidados . . . . . .196 Conversin de rollovers de Fireworks en botones. . . . . . . . . . . . . . . . .196 Insercin de un botn de origen externo . . . . . . . . . . . . . . . . . . . . . . .197 CAPTULO 16 Creacin de rollovers avanzados . . . . . . . . . . . . . . . 199 Descripcin de los rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200 Correspondencia de estados de rollover y fotogramas . . . . . . . . . . . . .200 Denicin del rea de activacin del rollover. . . . . . . . . . . . . . . . . . . .201 Asignacin de comportamientos de rollover . . . . . . . . . . . . . . . . . . . .201 Asignacin de vnculos de URL a rollovers . . . . . . . . . . . . . . . . . . . . .202 Creacin de rollovers desunidos para intercambiar partes de la imagen 203 Uso de archivos externos como origen de rollover . . . . . . . . . . . . . . . .204 Uso de rollovers irregulares o superpuestos . . . . . . . . . . . . . . . . . . . . .204 Exportacin de rollovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205 CAPTULO 17 Creacin de animaciones . . . . . . . . . . . . . . . . . . . . . 207 Planicacin de una animacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208 Administracin de fotogramas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209 Creacin o importacin de elementos para la animacin . . . . . . . . . . .212 Control de la animacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 Optimizacin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Presentacin preliminar de una animacin . . . . . . . . . . . . . . . . . . . . .215 Exportacin de una animacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216 Apertura de una animacin existente. . . . . . . . . . . . . . . . . . . . . . . . . .217 Apertura de varios archivos como una animacin . . . . . . . . . . . . . . . .217 CAPTULO 18 Automatizacin de tareas repetitivas . . . . . . . . . . . 219 Bsqueda y reemplazo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Procesamiento por lotes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224 Creacin de archivos de comandos . . . . . . . . . . . . . . . . . . . . . . . . . . .229

ndice de contenido

CAPTULO 19 Operaciones con Dreamweaver y otros editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Planicacin del sitio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234 Descripcin del cdigo HTML de Fireworks . . . . . . . . . . . . . . . . . . .234 Uso del comando Actualizar HTML . . . . . . . . . . . . . . . . . . . . . . . . . .234 Copia y pegado de cdigo HTML de Fireworks . . . . . . . . . . . . . . . . .235 Exportacin de cdigo HTML de Fireworks como un archivo . . . . . .235 Colocacin de archivos Fireworks en Dreamweaver. . . . . . . . . . . . . . .238 Pegado de un archivo HTML de Fireworks en otro archivo HTML . .238 Edicin de imgenes Fireworks incluidas en Dreamweaver . . . . . . . . .239 Optimizacin de grcos de Fireworks en Dreamweaver . . . . . . . . . . .240 Algunos conceptos bsicos de HTML . . . . . . . . . . . . . . . . . . . . . . . . .241 Etiquetas HTML comunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .241 APNDICE A Mtodos abreviados de teclado . . . . . . . . . . . . . . . 243 Men Archivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 Men Editar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 Men Ver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 Men Insertar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 Men Modicar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 Men Texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 Men Ventana. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 Men Xtras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 Men Ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 Editor de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250 Caja de herramientas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250 Varios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251 NDICE ANALTICO . . . . . . . . . . . . . . . . . . . . . . . . . 253

ndice de contenido

INTRODUCCIN

Fireworks 3 es la solucin perfecta para disear y producir elementos grcos Web profesionales. Se trata del primer entorno de produccin que permite a los diseadores y desarrolladores crear los elementos grcos en la Web. Utilice Fireworks para disear con rapidez elementos grcos, animaciones. Fireworks combina herramientas de edicin de mapa de bits y de vectores. En Fireworks, todos los elementos pueden editarse en cualquier momento, el ujo de trabajo puede automatizarse para satisfacer la demanda constante de cambios, actualizaciones y ediciones. La integracin de Fireworks con productos de Macromedia, como Dreamweaver y Flash, as como con otras aplicaciones grcas y editores de HTML de su preferencia, permite obtener una solucin Web global. Es posible exportar grcos de Fireworks con cdigo HTML y JavaScript personalizado para el editor HTML que se utilice.

11

Requisitos del sistema

Para ejecutar Fireworks se requiere el siguiente hardware y software: Para Microsoft Windows: Intel Pentium 120 o procesador equivalente (se recomienda Pentium III) ejecutando Windows 95, Windows 98 o Windows NT 4 (con Service Pack 3) o posterior; 64 MB de RAM y 60 MB de espacio libre de disco (se recomiendan 100 MB); un monitor en color (se recomienda una resolucin de 1024 x 768 y millones de colores); Ratn o tableta digitalizadora y una unidad de CD-ROM. Para Macintosh: Un procesador Power Macintosh (se recomienda G3, y G4 para mejoras de rendimiento AltiVec) ejecutando OS Mac 8.1 o posterior; 64 MB de RAM y 60 MB de espacio libre de disco (se recomiendan 100 MB); Adobe Type Manager 4 o posterior para utilizar fuentes Typo 1; un monitor en color (se recomienda una resolucin de 1024 x 768 y millones de colores); Ratn o tableta digitalizadora y una unidad de CD-ROM.

En Windows, el programa de instalacin de Fireworks se inicia automticamente. Si no lo hiciera: seleccione Inicio > Ejecutar. Haga clic en Examinar y elija el archivo Setup.exe del CD de Fireworks 3. Haga clic en Aceptar en el cuadro de dilogo Ejecutar. En el Macintosh, haga doble clic para iniciar el Instalador de Fireworks.
3

Siga las instrucciones que aparecen en la pantalla. El programa de instalacin solicita la introduccin de la informacin necesaria. Vuelva a iniciar el sistema si se le solicitara.

Aprendizaje de Fireworks
Existen distintos recursos para aprender a utilizar Fireworks, como el manual impreso, un sistema de ayuda ejecutable desde la aplicacin y otras fuentes de informacin disponibles a travs de la Web. se encuentra disponible siempre que la aplicacin est activa. Contiene la misma informacin que este manual.
Ayuda de Fireworks

Instalacin e inicio de Fireworks

Antes de instalar Fireworks, asegrese de que su sistema cumple los requisitos indicados en Requisitos del sistema en la pgina 12. Consulte el documento Lame del CD-ROM de Fireworks para ver la informacin ms reciente sobre el producto.
Para instalar Fireworks: 1

Al elegir Buscar en la ayuda de Fireworks, es posible que aparezca una ventana de seguridad Java solicitando permiso para leer archivos en su disco duro. Debe otorgar este permiso para poder realizar bsquedas. La applet no escribe nada en su disco duro ni lee otros archivos que no sean pginas de ayuda HTML. es una pelcula Shockwave que se incluye en la Ayuda de Fireworks. Es una introduccin a las funciones clave de Fireworks que puede encontrar en el tema de Ayuda Descripcin del tutorial.
Visita multimedia

Introduzca el CD-ROM de Fireworks en la unidad de CD-ROM. Elija una de las opciones siguientes:

La pelcula requiere el reproductor Shockwave 7 en el navegador Web. Puede descargar el reproductor Shockwave ms reciente del sitio Web de Macromedia en http://www.macromedia.com/shockwave/download/.

12

Introduccin

curso de aprendizaje de las funciones clave de Fireworks y que puede realizarse en menos de una hora. Si es un usuario nuevo de Fireworks, comience el aprendizaje por el tutorial. Incluye tareas comunes de Fireworks como la optimizacin de los archivos GIF y JPEG y la creacin de animaciones y rollovers.
Tutorial de Fireworks es un Aplicacin Fireworks contiene un gran nmero de

Novedades de Fireworks 3
Fireworks 3 ofrece muchas funciones nuevas para mejorar la prctica del diseo Web. Integracin con Dreamweaver El empleo conjunto de Fireworks 3 y Dreamweaver 3 es realmente ecaz para trasladar sus imgenes a la Web: Los comportamientos mejorados de Fireworks se reconocen como comportamientos nativos de Dreamweaver. Dreamweaver localiza de forma automtica el archivo origen de Fireworks cuando se inician y optimizan imgenes desde Dreamweaver. Las imgenes divididas y ensambladas de Fireworks se insertan en Dreamweaver mediante el comando Insertar Fireworks de Dreamweaver. Las imgenes de Fireworks y su cdigo HTML asociado se colocan en la posicin correcta, y los vnculos se actualizan de forma automtica. Para obtener ms informacin, consulte Planicacin del sitio Web en la pgina 234. Presentacin preliminar de la exportacin en el rea de trabajo Presente en pantalla todo su trabajo, inclusive los rollovers, sin salir del rea de trabajo, y compare los archivos tal como se exportaran: La nueva ventana Presentacin preliminar muestra la imagen optimizada en el rea de trabajo. El nuevo panel Optimizar permite cambiar los parmetros de optimizacin de la imagen que aparece en la presentacin preliminar. Las ventanas 2-arriba y 4-arriba permiten comparar dos o cuatro versiones optimizadas distintas de una imagen, o comparar el original con versiones mejoradas.

cuadros de dilogo y cuadros de ayuda emergente para ayudarle a utilizar el programa. La ayuda emergente aparece cuando se sita brevemente el cursor sobre un elemento de la interfaz del usuario. Tambin aparecen mensajes muy tiles cuando se intenta utilizar determinadas herramientas de forma incorrecta. incluye informacin sobre las funciones bsicas y avanzadas de Fireworks.
Utilizacin de Fireworks Extensin de Fireworks

incluye informacin para escribir archivos de comandos de JavaScript, para automatizar tareas de Fireworks. Prcticamente todos los comandos y parmetros de Fireworks pueden controlarse con comandos de JavaScript que Fireworks sabe interpretar.
Sitio Web Centro de soporte de Fireworks

se

actualiza con regularidad con la ltima informacin sobre Fireworks, adems contiene consejos de usuarios expertos, temas avanzados, ejemplos, consejos y actualizaciones. Busque en el Centro de soporte noticias sobre Fireworks y cmo sacar el mximo partido del programa en http://www.macromedia.com/support/reworks/.
Grupo de noticias sobre Fireworks proporciona un

intercambio vivo entre usuarios de Fireworks, representantes del soporte tcnico y el equipo de desarrollo de Fireworks. Utilice un lector de grupos de noticias para consultar
news://forums.macromedia.com/macromedia.reworks.

13

Se pueden seleccionar y optimizar las divisiones por separado en la ventana Presentacin preliminar. Los rollovers y las animaciones pueden verse en accin en la ventana de presentacin preliminar sin necesidad de iniciar un navegador Web. Para obtener informacin adicional sobre la presentacin preliminar en el espacio de trabajo, consulte Optimizacin en el rea de trabajo en la pgina 154. Panel Historial El panel Historial proporciona total exibilidad al permitir anular las operaciones anteriores paso a paso, as como volver a recuperarlas. Registra todo el trabajo y muestra una lista completa de los pasos ms recientes. Es posible revisar los distintos pasos y desplazarse por ellos con el controlador deslizante del panel Historial. Puede guardar grupos de pasos como comandos, y aplicarlos en otras imgenes. Tambin puede copiarlos y pegarlos. Puede guardar comandos para recrear imgenes que se repiten en un sitio. Los comandos son nicos para cualquier plataforma, por lo que puede compartirlos con usuarios que trabajen en el mismo proyecto o que deseen conseguir un aspecto semejante. Para obtener ms informacin, consulte Creacin de archivos de comandos con el panel Historial en la pgina 229. Automatizacin con JavaScript Tanto las tareas de Fireworks 3 como las de Dreamweaver 3 pueden automatizarse con JavaScript. Incluso es posible crear archivos de comandos que controlen Fireworks desde Dreamweaver.

Gestin mejorada de archivos y efectos de Photoshop Estas mejoras aumentan la capacidad de trabajar con archivos Adobe Photoshop en Fireworks: Puede modicar los efectos de capas de Photoshop con el panel Efecto. Puede utilizar tantos ltros de Photoshop en archivos de comandos como efectos automticos de Live Effects. Puede conservar las posibilidades de edicin en las capas de texto de archivos de Photoshop importados. Para obtener ms informacin, consulte Aplicacin de un efecto automtico en la pgina 140 y Apertura de archivos de Photoshop en la pgina 51. Exportacin a Illustrator y Flash Los elementos grcos creados en Fireworks tambin pueden utilizarse para imprimir o para animaciones: Exporte los documentos de Fireworks como vectores si desea importarlos en FreeHand 8 o Illustrator. Exporte los documentos de Fireworks como archivos SWF si desea importarlos en Macromedia Flash. Para obtener ms informacin, consulte Exportacin de una imagen en la pgina 166.

14

Introduccin

Funciones de divisin, rollover y animacin mejoradas La creacin de barras de navegacin, rollovers y archivos GIF animados en Fireworks, as como su colocacin en pginas HTML, resulta mucho ms fcil: Puede crear barras de navegacin con los nuevos comportamientos compatibles con Dreamweaver, como Establecer imagen de Bar Nav. Tambin puede crear barras de navegacin rpidamente mediante smbolos de botn. Puede actualizar tablas de Fireworks 3 en cualquier archivo HTML. Puede crear divisiones poligonales para poder intercambiar imgenes entrelazadas de forma irregular. Cree divisiones solapadas sin errores HTML. Utilice la biblioteca de Fireworks, cuyo aspecto y comportamiento es semejante a la de Flash. Puede crear bibliotecas de smbolos reutilizables para actualizar de una vez varias imgenes Web. Para obtener ms informacin, consulte Planicacin del sitio Web en la pgina 234, Comparacin entre divisiones y zonas interactivas en la pgina 182 y Seleccin de objetos en la pgina 66. Mejoras en los botones de rollover Con el nuevo Editor de botones puede crear botones de rollover aunque no tenga ninguna experiencia de diseo Web. Los usuarios ms experimentados tambin pueden aprovechar las posibilidades del Editor de botones y de los smbolos de botn: El Editor de botones ofrece sugerencias en cada paso del proceso de creacin de botones. Los smbolos de botn pueden editarse en cualquier momento con el Editor de botones.

El texto de los botones puede modicarse en todos los estados de un botn de forma simultnea con la ayuda del inspector de objetos. Los estados de un smbolo de botn se desplazan con la imagen cuando sta se cambia de posicin, sin necesidad de volver a ubicar y alinear cada uno de los estados por separado. Puede cambiar el aspecto de un grupo de botones sin que afecte al texto de cada botn, mediante un smbolo de botones anidados. Para obtener ms informacin, consulte Qu es un botn? en la pgina 192. Nuevas opciones de edicin de mapas de bits Con las opciones nuevas de edicin de mapas de bits pueden arreglarse imgenes sin salir de Fireworks: Puede ajustar el contraste y el brillo. Puede ajustar el matiz y la saturacin. Puede corregir la gama tonal mediante Niveles, Niveles automticos y Curvas. Aplquelos como efectos automticos Live Effects. Para obtener ms informacin, consulte Uso de ltros y ltros de conexin en la pgina 130. Presentacin preliminar de Gama La presentacin preliminar de Gama permite ver el aspecto de las imgenes en otra plataforma informtica. Si est trabajando en Windows, puede ver cmo queda una imagen en un Macintosh, y viceversa. Para obtener ms informacin, consulte Qu es Fireworks? en la pgina 33

15

Acceso instantneo a texturas y patrones Utilice texturas y patrones para ampliar sus posibilidades creativas en cuanto a trazos y rellenos. Fireworks 3 permite aplicar texturas y patrones utilizados en archivos de mapas de bits de casi cualquier tipo que se encuentren en un disco al que pueda acceder su sistema. Para obtener ms informacin, consulte Seleccin de objetos en la pgina 66. Controles de ajuste de escala y rotacin Con estas nuevas caractersticas se tiene ms control sobre la transformacin: Puede elegir entre las opciones de escala de interpolacin Bicbico, Bilineal, Vecino ms cercano y Suave. Puede rotar el lienzo y todos los objetos en l incluidos. Para obtener ms informacin, consulte Seleccin de objetos en la pgina 66. Mejoras en el texto Las nuevas funciones de texto y fuentes (tipos) dan ms posibilidades de control: Puede adaptar el tamao de los bloques de texto automticamente, en vertical o en horizontal, al introducir el texto. Puede utilizar la presentacin preliminar de las fuentes para ver una fuente antes de aplicarla. Puede sustituir fuentes no encontradas con otras fuentes que tenga instaladas en su sistema. La siguiente vez que se abre el documento, Fireworks recuerda la nueva fuente que se especic. Para obtener ms informacin, consulte Introduccin de texto en la pgina 110.

Efectos automticos Pueden verse muchos ltros de otras empresas como efectos automticos, incluidos ltros de Photoshop o Alien Skin Eye Candy. Especique la carpeta de ltros de conexin (Plug-ins), o crguelos directamente en Fireworks para crear al instante el efecto deseado en un objeto. Los efectos automticos pueden aplicarse a texto, imgenes, elementos grcos, trazados y trazos; y pueden aadirse tantos como se desee. Tambin pueden modicarse. Si realiza cambios en el objeto, el efecto se actualiza de forma automtica. Los parmetros favoritos pueden guardarse y aplicarse a otros objetos.

16

Introduccin

CAPTULO 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tutorial

Este captulo introduce al usuario a las funciones clave de Macromedia Fireworks en aproximadamente una hora. Para obtener informacin detallada sobre las funciones tratadas en este curso rpido de aprendizaje, consulte el ndice de este manual del usuario. Si desea seguir la introduccin animada de Fireworks, consulte el tema Descripcin del tutorial en las pginas de Ayuda de Fireworks. En este curso rpido de aprendizaje, crear la pgina Web principal de una compaa de caf cticia. Antes de comenzar, abra el archivo nalizado para ver con lo que trabajar a continuacin.
1

En Fireworks, elija Archivo > Abrir y seleccione el archivo Tutorial_Final.png ubicado en la carpeta Tutorial incluida en la carpeta de la aplicacin Fireworks 3.

17

Haga clic en el botn Mostrar zonas interactivas y divisiones, en la parte inferior de la Caja de herramientas. Los rectngulos verdes y azules que aparecen sobre la imagen indican zonas interactivas y divisiones. En este curso rpido de aprendizaje aprender a crear y utilizar zonas interactivas y divisiones.
Botn Mostrar zonas interactivas y divisiones Botn Ocultar zonas interactivas y divisiones

Site el puntero sobre la herramienta Rectngulo de la Caja de herramientas y haga clic para seleccionarla.

Site la herramienta Rectngulo junto a una esquina del rectngulo formado por las guas y arrastre hasta la esquina opuesta.

Haga clic en el botn Ocultar zonas interactivas y divisiones. Si desea disminuir el tamao de la ilustracin y dejar el archivo abierto mientras trabaja, elija Ver > Reducir. Si no desea dejar el archivo abierto, elija Archivo > Cerrar. Abra ahora el archivo con el que trabajar a lo largo del curso de aprendizaje.

Elija Archivo > Abrir y seleccione el archivo Tutorial_Start.png ubicado en la subcarpeta Tutorial de la carpeta de la aplicacin Fireworks 3. Elija Archivo > Guardar como. Denomine el archivo mi_trabajo y haga clic en Guardar.

Color de trazos y rellenos En Fireworks, el color de una lnea se denomina trazo y el color interno de un objeto se denomina relleno. Los colores de trazo y relleno actuales se muestran en las paletas de colores de la Caja de herramientas. Tambin pueden establecerse en los paneles Trazo y Relleno.
1

Herramientas de dibujo
Fireworks incluye una gran variedad de herramientas para crear formas geomtricas bsicas, as como para dibujar con precisin formas irregulares. Dibujo de un rectngulo Comenzar por dibujar un rectngulo con la ayuda de las guas.
1 2

Con el rectngulo an seleccionado, haga clic en la echa triangular situada junto a la paleta de colores para abrirla.
Paleta de colores de relleno

Si las guas (lneas en verde brillante) no estn visibles, elija Ver > Guas. Para asegurarse de que el puntero se ajusta a las guas, elija Ver > Opciones de guas > Ajustar a guas.

De manera predeterminada, los mens emergentes de colores presentan los 216 colores de la paleta Websafe.

18

Captulo 1

Desplace el puntero por los colores y observe que en la parte superior del men emergente se presenta el valor hexadecimal de cada muestra de color. Haga clic en una muestra para seleccionar el color del relleno (en el ejemplo utilizamos el blanco). Tambin puede escribir el valor hexadecimal del color en el cuadro de texto de la parte superior del men emergente.

Botones de JavaScript
Fireworks permite crear botones interactivos sin necesidad de escribir una lnea de cdigo JavaScript. Creacin de un botn Convertir el rectngulo en un botn y utilizar el editor de botones para completar el botn.
1

Con el rectngulo an seleccionado, elija Insertar > Convertir en smbolo. En Fireworks los botones son un tipo especial de objetos denominado 'smbolos' que se almacenan en la biblioteca del documento. Para obtener informacin adicional sobre el uso de smbolos y el panel Biblioteca, consulte Smbolos e instancias en la pgina 94.

Si el panel Trazo no est visible, elija Ventana > Trazo. El panel Trazo permite elegir una gran variedad de parmetros, como el tamao del pincel, la forma del pincel y la textura. Elija parmetros de trazo. Experimente con varios valores para ver los distintos efectos. En el ejemplo utilizamos los parmetros que muestra la gura siguiente.
2

Escriba Botn en el cuadro de texto Nombre, seleccione la opcin Botn y haga clic en Aceptar.

Observe que el rectngulo parece tener un relleno verde claro y una pequea echa en el ngulo inferior izquierdo. El relleno no ha cambiado. En realidad, el verde claro representa un objeto de divisin. La echa indica que el rectngulo es una instancia del botn. La ilustracin original del botn est guardada en la biblioteca del documento.

Tutorial

19

Haga doble clic en el botn para abrir el editor de botones o elija Modicar > Smbolo > Editar smbolo. Con el editor de botones puede crear los elementos grcos que desee utilizar en cada estado del botn. La primera modicacin ser aadir texto al rtulo del botn.

Escriba our story en el amplio cuadro de texto disponible en la parte inferior del cuadro de dilogo y haga clic en Aceptar.

Ahora utilizar los comandos de Alinear para centrar el texto en el rectngulo.

7 4

Seleccione la herramienta Texto y haga clic aproximadamente en el centro del rectngulo situado en el Editor de botones.

Con la herramienta Puntero, seleccione el rectngulo y a continuacin presione Mays mientras hace clic en el texto.

Elija una fuente (o tipo) en el men emergente de fuentes del cuadro de dilogo Editor de texto, especique un tamao en puntos, seleccione un color del men emergente de colores y haga clic en el botn de alineacin centrada (utilizamos Arial, 14 puntos, negrita y centrado).

20

Captulo 1

Elija Modicar > Alinear > Centrar verticalmente y, a continuacin, Modicar > Alinear > Centrar horizontalmente.

10

Utilice la herramienta Puntero para seleccionar el rectngulo. Haga clic en la paleta de colores de relleno de la Caja de herramientas, seleccione el cuentagotas y haga clic en el rectngulo marrn situado detrs del mensaje de bienvenida. El cuentagotas permite tomar una muestra de cualquier color en pantalla.

Fireworks desplaza el texto para alinearlo con el rectngulo sin mover ste. Los comandos de Alinear mantienen la posicin del primer objeto seleccionado, y alinean los objetos seleccionados con respecto al primero.
9

Haga clic en la cha Sobre del Editor de botones y a continuacin en el botn Copiar grco Arriba. La imagen de la cha Sobre es la que debe aparecer cuando el puntero pase sobre el botn en la pgina Web ya terminada. Para que esta imagen sea distinta a la del estado Arriba, deber tomar una muestra de color de la imagen y cambiar el color de relleno.

Todos los botones creados deben vincularse a una direccin Internet, como un valor URL.
11

Haga clic en la cha rea activa del editor de botones y, a continuacin, en el Asistente de vnculos (en el ngulo inferior derecho). Haga clic en la cha Vnculo. Introduzca un valor URL en el cuadro de texto de la parte superior del cuadro de dilogo. Utilice un valor URL vlido (como http:// www.macromedia.com), de forma que pueda probar el botn en un navegador.

12

13 14

Haga clic en Aceptar. Cierre el Editor de botones.

Tutorial

21

Duplicacin del botn Fireworks permite crear varios botones de igual aspecto pero con vnculos y texto distintos.
1

Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) mientras arrastra el botn hacia abajo por la pgina. Cuando se arrastra con la tecla Alt/Opcin presionada, se mueve una copia del objeto seleccionado.

Haga clic en la cha Vnculo y cambie el valor URL. Utilice un valor URL vlido de forma que pueda probar el botn cuando haga una presentacin preliminar de la pgina en un navegador. Haga clic en Aceptar. Observe que el texto del botn se ha actualizado.

Rollovers sofisticados
2

Si el Inspector de objetos no est visible, elija Ventana > Objeto.

Adems de crear botones, Fireworks permite crear efectos sosticados con rollovers de JavaScript. Por ejemplo, cuando el puntero pasa sobre un botn, adems de cambiar el aspecto del botn, puede cambiar el aspecto de otra zona de la pgina. En Fireworks, este tipo de efecto se denomina 'rollover desunido'.
1

En el cuadro de texto de Texto de botn, escriba gifts y presione Intro (Windows) o Retorno (Macintosh). Aparece un cuadro de mensajes preguntando si desea editar la instancia activa del botn o todas las instancias del botn. Como ha duplicado el botn Our Story, debe tener dos instancias del mismo. Cuando se edita un botn, Fireworks actualiza todas sus instancias. En este caso, elija editar el botn activo, ya que necesita tener dos botones diferenciados.

Si el panel Capas no est visible, elija Ventana > Capas. Haga clic en Capa 1 para convertirla en la capa activa. Los cambios siguientes debe realizarlos en la Capa 1. Presente el panel Fotogramas (si no est visible, elija Ventana > Fotogramas).

Botn Fotograma nuevo/Duplicar fotograma

4 5

Haga clic en Actual. Haga clic en el botn Asistente de vnculos del inspector Objeto.

Haga clic en el botn Fotograma nuevo/ Duplicar fotograma, en la parte inferior del panel Fotogramas.

22

Captulo 1

Haga clic en Fotograma 2, en el panel Fotogramas. Habr desaparecido todo excepto los botones, pues la ilustracin est en el Fotograma 1. Los botones, sin embargo, estn en una capa que comparten todos los fotogramas. A continuacin, colocar en Fotograma 2 una ilustracin que sirva como origen del rollover. Necesita activar las opciones de papel cebolla para alinear con facilidad la ilustracin del Fotograma 2 con la del Fotograma 1. Las opciones de papel cebolla permiten observar versiones atenuadas de ms de un fotograma a la vez.

Haga clic en Swap text en la lista de elementos. En la parte superior del panel Biblioteca aparece una presentacin preliminar de la ilustracin.

Haga clic en la columna a la izquierda de Fotograma 1, en el panel Fotogramas. Fireworks muestra el contenido del Fotograma 1 como si estuviera en un papel cebolla translcido.

Arrastre la ilustracin Swap text del rea de presentacin preliminar del panel Biblioteca y alinela sobre el texto del mensaje.

Haga clic en el nombre del fotograma 1, en el panel Fotogramas, para activarlo.

Para ahorrarle tiempo, hemos creado el elemento grco que utilizar para el rollover.
6

Si el panel Biblioteca no est visible, elija Ventana > Biblioteca. En el panel Biblioteca se almacenan los botones y otros elementos grcos que desean volver a utilizarse en un diseo. Para obtener informacin adicional sobre el uso del panel Biblioteca, consulte Smbolos e instancias en la pgina 94.

Tutorial

23

10

Utilice la herramienta Puntero para seleccionar el rectngulo marrn de detrs del mensaje de bienvenida, y elija Insertar > Divisin. Fireworks inserta un rectngulo verde claro transparente encima de la imagen para reejar la divisin.

12 13

Seleccione el botn Gifts. En el Inspector de comportamientos (si no est visible, elija Ventana > Comportamientos), haga clic en el botn del signo ms (+) y elija Intercambiar imagen en el men emergente.

Aparece el cuadro de dilogo Intercambiar imagen.

14

Asegrese de que text_slice est seleccionado en las lista de divisiones del sector izquierdo del cuadro de dilogo y haga clic en Aceptar.

11

En el Inspector de objetos (si no est visible, elija Ventana > Objeto), anule la seleccin de la opcin Denominacin automtica de divisiones y especique text_slice en el cuadro de texto de la parte inferior del panel. Al denominar de forma diferente a las divisiones le ayudar a identicar las imgenes de divisin a la hora de identicar y actualizar un sitio Web.
15

Haga clic en el botn Ocultar zonas interactivas y divisiones de la Caja de herramientas. Haga clic en la cha Presentacin preliminar del espacio de trabajo y desplace el puntero sobre los botones. Site el puntero en el botn Gifts y observe cmo cambia el mensaje de la derecha. La cha Presentacin preliminar muestra la imagen, los botones y los comportamientos JavaScript tal como aparecern en el navegador Web.

Asignar un comportamiento (cdigo JavaScript predenido) al botn Gifts que utiliza esta divisin como el rea que debe cambiar cuando el puntero se desplace sobre el botn.

16

Haga clic en la cha Original y guarde la imagen.

24

Captulo 1

Efectos automticos
Fireworks incluye efectos especiales y comandos de ajuste de la imagen que pueden utilizarse en trazados e imgenes de mapa de bits. Cuando se utiliza el panel Efecto, los efectos permanecen editables aplicarlos a los objetos Tambin pueden eliminarse.
1

Haga clic en el men emergente de la parte superior del panel Efecto y elija Sombrear e iluminar > Sombra. Haga clic fuera de las opciones del men emergente para aceptar los valores predeterminados.

Seleccione el botn Our Story.

Abra el panel Efecto. Aplicar los efectos de bisel y sombra para dar al botn aspecto tridimensional. Haga clic en el men emergente de la parte superior del panel y elija Bisel y Relieve > Bisel interior. Fireworks muestra un conjunto de opciones para la denicin del bisel.

Automatizacin
Fireworks registra en el panel Historial todos los pasos que se llevan a cabo mientras se trabaja con el documento. Puede utilizar el panel Historial para anular pasos y volver al estado anterior del documento. Tambin puede utilizar el panel Historial para automatizar tareas mediante la reproduccin de pasos.
1 2

Seleccione el botn Gifts. En el panel Historial, presione la tecla Mays mientras hace clic en los ltimos dos pasos, denominados ambos Efecto. Estos pasos corresponden a los efectos de bisel y de sombra que aplic al botn Our Story.

Establezca 3 pxeles como anchura del borde biselado (si detiene el ratn sobre cada opcin del panel Efecto, Fireworks presenta el nombre junto al puntero).

Establezca aqu la anchura del bisel.

Tutorial

25

Haga clic en el botn Volver a reproducir del panel Historial. Fireworks aplica los efectos de bisel y sombra al botn Gifts.

Arrastre el tirador de seleccin de la mscara con la herramienta Puntero para colocar la taza de caf dentro de la mscara.

Zonas interactivas
En Fireworks es muy sencillo asociar un rea de la imagen con un valor URL. Cree zonas interactivas cuando desee crear un vnculo pero no necesite los estados interactivos de un botn. Cuando se crea una zona interactiva en Fireworks, se crea un mapa de imagen.

Mscaras
Las mscaras sirven para cubrir objetos de forma que slo aparezca en el documento la parte que queda al descubierto. Utilizar el rectngulo blanco para enmascarar la imagen de la taza de caf y darle un borde negro.
1

Seleccione el rectngulo que contiene el texto "order our". Seleccione todo el rectngulo y no solo el texto.

Utilice la herramienta Puntero y arrastre el rectngulo blanco sobre la taza de caf.

Elija Insertar > Zona interactiva. Fireworks inserta un rectngulo azul transparente que representa la zona interactiva. Introduzca un valor URL en el cuadro de texto de la parte superior del Inspector de objetos. Observe que el Inspector de objetos muestra en la barra de ttulos el tipo de objeto seleccionado.

Presione la tecla Mays mientras hace clic en la imagen de la taza de caf de forma que queden seleccionados tanto la taza de caf como el rectngulo. Elija Modicar > Grupo de mscara > Enmascarar trayecto. El rectngulo enmascara la taza de caf. El pequeo rombo del centro de la taza de caf es el tirador de seleccin de la mscara.

26

Captulo 1

Optimizacin de imgenes
Fireworks permite optimizar las distintas partes de un documento por separado. Cada documento tiene unos parmetros de optimizacin predeterminados, pero puede utilizar las divisiones para optimizar distintas zonas del documento. Por ejemplo, la mayor parte del documento puede optimizarse como archivo GIF, pero la imagen de la taza de caf tendr ms calidad de visualizacin si se optimiza como archivo JPEG. En primer lugar, conrme los parmetros de optimizacin del documento. Estos parmetros afectan a todas las partes de la imagen que no se encuentren en objetos de divisin.
1

Utilice la herramienta Puntero para seleccionar la imagen de la taza de caf, y elija Insertar > Divisin. Fireworks crea un objeto de divisin del mismo tamao que el objeto seleccionado.

En el men emergente Conguracin, en la parte superior del panel Optimizar, elija JPEG - Archivo ms pequeo.

Elija Editar > Anular seleccin para anular la seleccin de todos los objetos. Abra el panel Optimizar. Observe que en la barra de ttulo del panel se indica la conguracin de la seleccin activa. En este caso, dado que no hay nada seleccionado, muestra la conguracin del documento.

Haga clic en la cha 2-arriba, en la parte superior del espacio de trabajo. Si es preciso, seleccione la herramienta Mano y arrastre en el panel izquierdo para poder ver la taza de caf.

Compruebe que est seleccionado GIF WebSnap 128 en el men emergente Conguracin, en la parte superior del panel. Puede utilizar las opciones de la parte inferior del panel para personalizar los parmetros de optimizacin seleccionados. Para obtener informacin adicional sobre los parmetros de optimizacin, consulte el captulo 11, "Optimizing Graphics". Ahora crear una divisin en la taza de caf.

Fireworks muestra dos versiones del documento. El panel izquierdo presenta la imagen original y el panel derecho la versin optimizada. Al realizar cambios en la imagen original, Fireworks actualiza la imagen optimizada. Si hay objetos Web (zonas interactivas y divisiones), al seleccionar una divisin en el panel izquierdo se ensombrece el resto de la imagen y solo queda resaltada la divisin seleccionada para la optimizacin.

Tutorial

27

Con la divisin de la taza de caf seleccionada, realice cambios en los parmetros de optimizacin de la cha Optimizar y observe cmo cambia la imagen de la derecha. Guarde el archivo.

Acepte el Nombre base predeterminado. Fireworks utiliza este mismo nombre para el archivo HTML que crea, y como base del nombre que asignar a todos los archivos GIF y JPEG que se generen de la divisin. Si desea modicar los criterios de denominacin que utiliza Fireworks o cambiar las propiedades del HTML exportado, haga clic en el botn Opciones. Para obtener ms informacin, consulte Exportacin de una imagen en la pgina 166.

Exportacin de imgenes, HTML y JavaScript

Cuando se exporta un documento, Fireworks exporta archivos individuales de cada una de las divisiones. Tambin genera todo el cdigo HTML y JavaScript necesario para ver el documento en un navegador Web. Fireworks permite exportar el cdigo de JavaScript, HTML y las imgenes para incorporarlos en el sitio que est creando y administrando con Macromedia Dreamweaver.
1 4

Elija Utilizar objetos de divisin en el men emergente Divisiones. De esta forma se asegura el funcionamiento de todos los botones, los comportamientos y las optimizaciones en un navegador Web. Elija Dreamweaver 3 en el men emergente Estilo. Se crea cdigo HTML optimizado para su uso en Dreamweaver 3. Asegrese de que la opcin seleccionada en el men emergente Ubicacin es Mismo directorio. Con esta opcin puede especicar dnde desea guardar el archivo HTML relacionado con las imgenes exportadas. Puede incluso copiar todo el HTML en el Portapapeles para pegarlo directamente en un archivo Dreamweaver. Haga clic en Guardar (Windows) o en Exportar (Macintosh) para exportar los archivos. El archivo HTML puede verse ahora en el navegador o abrirse en Dreamweaver para su modicacin. Si lo desea, realice una presentacin preliminar del documento en un navegador Web para ver cmo queda y probar sus botones.

Seleccione Archivo > Exportar. Al exportar el documento, se crea una serie de archivos de imgenes de cada divisin y un archivo HTML. Para facilitar la eliminacin posterior de estos archivos, exprtelos a una carpeta nueva.

Elija una ubicacin, haga clic en el botn Crear nueva carpeta y asgnele un nombre. Asegrese de que el nombre de la nueva carpeta aparece en la parte superior del cuadro de dilogo.

28

Captulo 1

Abra un navegador Web, elija Archivo > Abrir pgina en Navigator (Netscape Navigator) o Archivo > Abrir (Microsoft Internet Explorer), y seleccione el archivo HTML que export. Tambin puede abrir un navegador directamente desde Fireworks si selecciona Archivo > Presentacin preliminar en el navegador y elige a continuacin un navegador. Si la lista no muestra ningn navegador, elija Establecer navegador para aadir un navegador principal y otro secundario a la lista.

Abra el panel Capas y haga clic en el botn Capa nueva / Duplicar capa, en la parte inferior del panel.

Cuando haya probado el HTML exportado, vuelva a Fireworks y cierre el archivo.

Ahora desplazar las miniaturas para colocarlas en la capa nueva.

3

Animacin
Los archivos GIF animados se crean en Fireworks con los fotogramas. Cada fotograma contiene una imagen distinta. Los elementos que deben aparecer en todos los fotogramas se colocan en una capa adicional que compartirn todos los fotogramas. Como la serie de fotogramas se presenta en orden consecutivo, se genera la ilusin de movimiento.
1

Para seleccionar las cuatro miniaturas, mantenga presionada la tecla Mays mientras hace clic en cada una de las imgenes con la herramienta Puntero.

Abra el documento Animated_Start.png que se encuentra en la subcarpeta Tutorial de la carpeta de la aplicacin Fireworks.
4

El cuadrado azul que se muestra en la columna de la derecha de Capa 1 del panel Capas indica que el objeto seleccionado est en esa capa. Arrastre el cuadrado azul prximo a Capa 1 a la capa nueva, Capa 2.

Ahora ya puede compartir la Capa 1 entre fotogramas de forma que el texto aparezca en todos los fotogramas de la animacin.
5

Seleccione Capa 1 en el panel Capas.

Tutorial

29

Abra el men emergente de opciones del panel Capas (haga clic en la echa triangular situada en la parte superior del panel) y elija Compartir capa. Observe el icono de cinta cinematogrca que aparece a la derecha del nombre de capa para indicar que se trata de una capa compartida por fotogramas.

Abra el panel Fotogramas y haga clic en el botn Distribuir en fotogramas, en la parte inferior del panel.

10

Abra el panel Optimizar y elija GIF Animado en el men emergente de formatos del archivo de exportacin. Debe utilizar GIF Animado para exportar todos los fotogramas al archivo. Si seleccionara solo GIF, exportara nicamente el primer fotograma.

Presione la tecla Mays mientras hace clic en las miniaturas para volverlas a seleccionar. Arrastre las miniaturas, colquelas sobre el texto alinelas sobre las cuatro ltimas letras del logotipo.
11

Presione la tecla Mays mientras hace clic en todos los fotogramas del panel Fotogramas, y elija Propiedades en el men de opciones del panel (haga clic en el tringulo de la parte superior del panel).

A continuacin, distribuya las miniaturas en distintos fotogramas para crear la animacin.

30

Captulo 1

12

Establezca una demora de fotogramas de 50 (es decir, medio segundo) y presione Intro (Windows) o Retorno (Macintosh). La demora de fotogramas determina la velocidad de la animacin.

13

Haga clic en el botn Reproducir, situado en la parte inferior de la ventana de la aplicacin (Windows) o en la ventana del documento (Macintosh). Observe que el botn Reproducir se convierte en un botn Detener cuando la animacin comienza a reproducirse. Haga clic en el botn Detener para detener la animacin.

14

Elija Archivo > Guardar como, denomine al documento my_animation y haga clic en Guardar. Si lo desea, puede exportar el archivo y probarlo en el navegador.

Enhorabuena! Ha terminado el curso de aprendizaje de Fireworks. Ya puede crear sus propias ilustraciones con Fireworks.

Tutorial

31

32

Captulo 1

CAPTULO 2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Conceptos bsicos de Fireworks

Puede familiarizarse con los conceptos de Fireworks al realizar una incursin rpida por el rea de trabajo. Este captulo contiene una lista de las funciones de sitios Web que pueden crearse en Fireworks, incluidas algunas que quiz desconozca.

Qu es Fireworks?
Gracias a la aparicin de Fireworks, los diseadores de sitios Web ya no tienen que cambiar continuamente entre las distintas aplicaciones especcas para realizar una tarea especca. Los efectos automticos de carcter no destructivo evitan la frustracin que acarrea tener que volver a crear los grcos Web desde el principio despus de realizar una simple modicacin. Fireworks genera JavaScript facilitando la creacin de rollovers. Adems, las funciones de optimizacin permiten comprimir el tamao del archivo de grcos Web sin perjudicar la calidad. A continuacin se describen algunas de las operaciones que puede realizar en Fireworks: Puede crear grcos utilizando algunas de las mejores funciones de las aplicaciones de grcos vectoriales y de mapa de bits en una sola aplicacin. Puede realizar la edicin con la exibilidad caracterstica de los objetos vectoriales y aplicar efectos de mapa de bits; incluidos biseles, iluminacin, sombras y, ahora, ltros de Photoshop, que permiten volver a dibujar mientras se edita. En Fireworks puede optimizar los grcos Web para reducir el tamao del archivo todo lo posible, lo que permite cargar los sitios Web de forma rpida. Fireworks tambin permite convertir los grcos Web en objetos interactivos con el n de crear mapas de imgenes, botones rollover de JavaScript, anuncios en titulares animados y pginas Web completas.

33

Asimismo, es posible reducir la duracin del proceso de diseo de sitios Web mediante el uso del procesamiento por lotes, de conguraciones de estilos y de exportacin almacenables, de funciones de optimizacin en el rea de trabajo, de archivos de secuencia de comandos y de la compatibilidad con Macromedia Dreamweaver y otro software de diseo de pginas Web. Fireworks es, ante todo, una aplicacin de diseo de grcos en pantalla. Sin embargo, gracias a la posibilidad de exportar los grcos a aplicaciones tales como FreeHand e Illustrator, puede volver a utilizar los grcos diseados en Fireworks para imprimirlos.

Imgenes optimizadas Antes de transferir fotografas o cualquier otra forma de imgenes para el sitio Web, utilice la funcin de optimizacin de Fireworks para comprimirlas todo lo posible sin comprometer la calidad.

Perfeccionamiento de los sitios Web con Fireworks

Es posible que Fireworks se haya presentado como un optimizador de grcos o como un creador de botones y de mapas de imagen. En esta seccin se destacan algunas de las operaciones que pueden realizarse con Fireworks y que probablemente desconoca. Imgenes para la Web Una amplia coleccin de herramientas y efectos artsticos, as como de funciones de control del color y de optimizacin, convierten a Fireworks en una aplicacin excelente para crear logotipos y otras imgenes.

La presentacin preliminar 2-arriba compara un archivo JPEG optimizado con calidades 100% y 60%. Miniaturas Si dispone de muchas imgenes y desea incluirlas en el sitio Web, puede crear miniaturas con zonas interactivas en las que se puede hacer clic para abrir la imagen a tamao real. Para ms informacin, consulte Creacin de miniaturas en el Centro de soporte Fireworks.

34

Captulo 2

Anuncios en titulares animados Utilice fotogramas, smbolos y la funcin de optimizacin para crear anuncios en titulares animados GIF o Flash compactos.

Botones y rollovers de JavaScript Cree botones que desencadenen eventos en la pgina Web. Destaque la capacidad de interaccin mediante rollovers de JavaScript que cambien de apariencia en funcin del estado del botn en uso.

Mapas de imagen Para explorar un sitio Web, convierta un grco en un mapa interactivo. Site zonas interactivas en las reas del grco en las que es ms probable que los usuarios hagan clic y asgneles valores URL. Barras de navegacin de JavaScript Cree un grupo completo de botones JavaScript como un solo grco y, a continuacin, utilice divisiones para exportarlo como un grupo de grcos ms pequeos con valores URL nicos.

Conceptos bsicos de Fireworks

35

Desarticulacin de rollovers Cree rollovers que desencadenen un cambio en otra parte de la pgina Web. Por ejemplo, es posible conseguir que un grco se reemplace por otro al hacer clic en un botn de una barra de navegacin.

Pginas Web completas Cree una pgina Web completa en Fireworks e incluya una barra de navegacin, un anuncio en titulares e imgenes JPEG y GIF. A continuacin, fraccione la pgina en zonas separadas que pueda optimizar de forma ecaz. Al exportar la pgina, Fireworks escribe el cdigo HTML para poderla ver en un navegador.

Descripcin del rea de trabajo de Fireworks

Al abrir Fireworks 3, aparecen comandos de men dispuestos longitudinalmente por la parte superior de la ventana y la Caja de herramientas en el lado izquierdo de la pantalla. En la parte derecha de sta, aparecen varios paneles otantes que disponen de varias chas. Al abrir un documento, en el centro de la pantalla aparece una ventana de documento. Al mover el puntero sobre el botn, el botn y el rea de texto cambian de aspecto. Es posible que tenga que utilizar estos componentes de Fireworks con frecuencia: El documento PNG de Fireworks en uso se muestra en la ventana de documento Original. Las ventanas Presentacin preliminar, 2-arriba y 4-arriba y los paneles Optimizar y Tabla de color permiten optimizar el rea de trabajo. En las presentaciones preliminares se puede ver cmo quedar el grco en un navegador, lo que permite comparar el mismo grco optimizado de cuatro maneras distintas. Tambin puede ver y ajustar la conguracin de optimizacin mediante los paneles Optimizar y Tabla de color.

36

Captulo 2

La Caja de herramientas contiene las herramientas de seleccin, dibujo y edicin, la herramienta Aumentar, la herramienta Zona interactiva, la herramienta Divisin y los controles de color de trazo y de relleno. Los inspectores Objeto, Trazo, Relleno y Efecto permiten controlar una amplia gama de caractersticas de los objetos seleccionados. El Mezclador de colores y los paneles Muestras y Tabla de color permiten gestionar la paleta de colores del documento actual. Los paneles Capas y Fotogramas permiten organizar la estructura de un documento y contienen opciones destinadas a crear, eliminar y manipular las capas y los fotogramas. El panel Fotogramas contiene las opciones de creacin de animaciones. El inspector Comportamientos permite controlar los comportamientos, que determinan la reaccin que se produce en las zonas interactivas o las divisiones al mover el ratn. El panel Historial incluye una lista de los nuevos comandos que puede deshacer y rehacer de forma rpida. Tambin puede elegir comandos para repetirlos y guardar secuencias de comandos como un solo comando. El Editor de botones agiliza la creacin de botones rollover y de barras de navegacin de JavaScript. Los mens contextuales proporcionan acceso rpido a los comandos relacionados con la seleccin actual. El panel Biblioteca contiene smbolos grcos y de botn. Las copias de la biblioteca pueden arrastrarse fcilmente hasta el documento.

Visualizacin de un documento de Fireworks

El documento PNG de Fireworks en uso se muestra en la ventana de documento Original. El nombre del documento y el porcentaje actual de aumento aparecen en la barra de ttulo.

La cha Original y las tres chas de presentacin preliminar se encuentran en la esquina superior izquierda del rea de trabajo.
Para mostrar el documento PNG original:

En la ventana de documento, haga clic en la cha Original.

Optimizacin en el rea de trabajo

En la presentacin preliminar se muestra el grco tal y como aparecer en un navegador Web con la conguracin de exportacin actual. En las vistas 2-arriba y 4-arriba se comparan presentaciones preliminares de exportacin basadas en varias conguraciones de exportacin. Estas vistas permiten comparar las versiones optimizadas con el documento original.
Para mostrar una presentacin preliminar de exportacin:

Haga clic en la cha Presentacin preliminar, 2-arriba o 4-arriba de la ventana de documento. Utilice los paneles Optimizar y Tabla de color para modicar la conguracin de exportacin. Estos paneles, junto con Presentacin preliminar, realizan las mismas funciones que el cuadro de dilogo Exportar presentacin preliminar de versiones anteriores de Fireworks, lo que supone una mejora del rea de trabajo.

Conceptos bsicos de Fireworks

37

En la ventana Presentacin preliminar puede ver el comportamiento de los rollovers y las barras de navegacin, adems de animaciones. Para obtener ms informacin sobre la optimizacin y exportacin de grcos en Fireworks, consulte Optimizacin en el rea de trabajo en la pgina 154 y Exportacin de una imagen en la pgina 166.

La Caja de herramientas contiene 37 herramientas, algunas de la cuales estn agrupadas, tal como se ilustra. Haga clic en una herramienta para seleccionarla. De forma alternativa, puede presionar las teclas de mtodo abreviado para cambiar rpidamente de herramienta. Para obtener ms informacin sobre las teclas de mtodo abreviado, consulte el Apndice Mtodos abreviados de teclado. La funcin de algunas herramientas cambia en funcin de lo que se edite: objetos o pxeles. Para obtener ms informacin sobre las herramientas de Fireworks, consulte Eleccin de herramientas de dibujo y edicin en la pgina 56.
Para elegir una herramienta alternativa en un grupo de herramientas: 1

Visualizacin y eleccin de herramientas

La Caja de herramientas contiene las herramientas necesarias para crear, seleccionar y editar objetos. En Windows, las barras de herramientas Principal, Modicar y Ver controles proporcionan fcil acceso a varios comandos. Los usuarios de Macintosh pueden seleccionar estos comandos en los mens.

Haga clic y mantenga el cursor sobre cualquier herramienta que tenga un tringulo en la esquina inferior derecha. Arrastre el cursor sobre la herramienta que desee y suelte el botn del ratn. La herramienta elegida aparece en la Caja de herramientas.

Reorganizacin de las barras de herramientas (Windows solamente) Las barras de herramientas se pueden mostrar u ocultar y desacoplar o trasladar a la parte superior o inferior del documento, o a los laterales del mismo.
Para mostrar u ocultar la Caja de herramientas o una barra de herramientas:

Seleccione Ventana > Caja de herramientas o elija una barra de herramientas del submen Ventana > Barras de herramientas. Si la Caja de herramientas o la barra de herramientas no est acoplada, puede hacer clic en el botn Cerrar de la parte superior derecha de la barra de ttulo.

38

Captulo 2

Para desacoplar la Caja de herramientas o una barra de herramientas: 1

Uso de paneles e inspectores

Muchos de los controles de Fireworks se encuentran disponibles en los paneles e inspectores otantes acoplables del rea de trabajo. Mediante las opciones de un inspector normalmente se controlan las caractersticas de los objetos seleccionados. Por lo general, las opciones de un panel permiten controlar las caractersticas del documento o la herramienta. Puede organizar su entorno de trabajo al combinar diferentes paneles e inspectores en los paneles con chas. Igualmente, puede separar un panel o un inspector de un panel con chas para colocarlo en el punto que ms le convenga en el rea de trabajo.
Para mostrar u ocultar un panel o un inspector:

Desplace la herramienta en uso hasta una zona situada entre los botones de herramientas. La herramienta se convierte en la herramienta Puntero. Arrastre la Caja de herramientas o la barra de herramientas lejos de la posicin en la que estaba acoplada. La Caja de herramientas o la barra de herramientas se convierte en un panel otante.

Para acoplar la Caja de herramientas o una barra de herramientas: 1 2

Desplace la herramienta en uso sobre la barra de ttulo. Arrastre la Caja de herramientas o la barra de herramientas por toda la ventana de aplicacin hasta la zona donde desee acoplarla.

Cambio de las opciones de herramientas En el panel Opciones de herramientas se muestran las opciones relacionadas con la herramienta activa. Por ejemplo, en las opciones de la herramienta Puntero se incluyen Resaltar posicin del ratn y Mostrar al arrastrar.

Elija el panel o inspector en el men Ventana. La mayora de paneles e inspectores disponen de un men emergente Opciones.

Botn emergente de panel o inspector

Para elegir una opcin del men emergente Opciones de un panel o un inspector: Para mostrar u ocultar el panel Opciones de herramientas: 1

Haga doble clic en una herramienta de la Caja de herramientas. Elija Ventana > Opciones de herramientas. Para obtener informacin sobre opciones de herramientas concretas, consulte las secciones del manual en las que se presentan las distintas herramientas.

Haga clic en el botn de echa derecha que est situado junto a la esquina superior derecha del panel o inspector. El men emergente Opciones aparece. Elija un comando del men emergente Opciones.

Algunos cuadros de datos de los paneles e inspectores incluyen un men emergente, un panel de muestras, un deslizador o un dial.

Conceptos bsicos de Fireworks

39

Para utilizar una opcin del men emergente: 1 2

Haga clic en la echa abajo situada junto al cuadro. Cambie el valor: Elija una opcin o una muestra de color. Arrastre el deslizador o el dial. Escriba la primera letra de la opcin que desee elegir. Presione dicha letra varias veces para recorrer todas las opciones que empiezan por esa misma letra.

Los paneles que estaban ocultos cuando se seleccion Ocultar paneles permanecen ocultos despus de desactivar esta opcin.
Para restablecer la posicin predeterminada de los paneles y restaurar las preferencias de la aplicacin: 1 2

Para introducir informacin en un cuadro de texto de un panel o inspector: 1 2 3

Haga clic en el cuadro de texto para que aparezca un punto de insercin. Escriba un valor. Presione Intro. Arrastre un panel o inspector otante sobre otro panel o inspector otante. Cuando aparezca el borde resaltado en el panel situado debajo, suelte el botn del ratn. Haga clic en una cha de la ventana para situarlo delante.

Salga de Fireworks. Borre el archivo de preferencias llamado Fireworks 3 Preferences: En Windows, este archivo est ubicado en la carpeta Fireworks. En Macintosh, este archivo se encuentra en la carpeta System\Preferences. Reinicie Fireworks.

Para combinar dos o ms paneles o inspectores: 1

Asignacin de comportamientos a objetos Web

El cdigo JavaScript es el mecanismo que hace que los grcos Web cambien de aspecto al mover el ratn. El inspector Comportamientos permite asignar comportamientos JavaScript a los objetos Web, que son los objetos que denen las zonas interactivas y divisiones en Fireworks. Tambin puede visualizar y modicar los comportamientos que se han asignado a los objetos Web.
Para mostrar el inspector Comportamientos:

Para eliminar un panel o inspector de un panel con fichas:

Site el panel o inspector fuera del panel con chas arrastrando su cha correspondiente.
Para ocultar un panel o un grupo de paneles con fichas:

Elija Ventana > Comportamientos.

Haga clic en el cuadro de cierre de la parte superior del panel o de la ventana del grupo de paneles.
Para ocultar todos los paneles:

Elija Ver > Ocultar paneles. Presione la tecla Tab.

Para mostrar los paneles ocultos:

Elija Ver > Ocultar paneles. Presione la tecla Tab.

Para obtener ms informacin sobre los comportamientos, consulte Asignacin de comportamientos de rollover en la pgina 201.

40

Captulo 2

Cambio y repeticin del historial de un documento

El panel Historial permite ver, cambiar y repetir el historial del documento. En este panel se enumeran las acciones ms recientes que se han realizado en Fireworks, conforme al nmero especicado en Pasos de deshacer. Utilice el marcador de deshacer del panel Historial para deshacer y rehacer comandos recientes. Seleccione los ltimos comandos utilizados en el panel Historial y haga clic en Volver a reproducir para repetirlos. Guarde un grupo de comandos recientes como un comando personalizado y seleccinelo en el men Comando para volver a utilizar el grupo como un solo comando.

Para guardar comandos con el fin de volver a utilizarlos: 1 2

Resalte los comandos que quiera guardar. Abra el cuadro de dilogo Guardar comando: Haga clic en el botn Guardar de la parte inferior del panel Historial. En el men emergente Opciones, elija Guardar como comando. Introduzca el nombre de comando y haga clic en Aceptar para aadir el nombre al submen Modicar > Comando.

Para utilizar el comando personalizado guardado:

Elija el nombre del comando en el men Comando. Para obtener ms informacin sobre la creacin de comandos mediante el panel Historial, consulte Creacin de archivos de comandos en la pgina 229.

Creacin de botones rollover de JavaScript

En el Editor de botones pueden crearse barras de navegacin y rollovers de JavaScript de dos-, tres o cuatro estados. Si elige Insertar > Nuevo botn, se abre una ventana con varias chas:

Para deshacer y rehacer comandos: 1

Seleccione Ventana > Historial para abrir el panel Historial. Arrastre el marcador hacia arriba o hacia abajo con el cursor.

Para repetir comandos: 1

Si los comandos se van a aplicar a objetos, seleccione los objetos. Resalte los comandos que quiera repetir. Mantenga presionada la tecla Mays mientras hace clic para resaltar un rango continuo de comandos. Haga clic en el botn Volver a reproducir de la parte inferior del panel Historial. Ventana del Editor de botones

Conceptos bsicos de Fireworks

41

En los cuatro primeros paneles; Arriba, Sobre, Abajo, y Sobre y Abajo, puede crear un grco para cada estado del botn. En el quinto panel; rea activa, puede editar la divisin y crear zonas interactivas para el botn. Los botones creados en la ventana del Editor de botones (smbolos de botn) disponen de varias funciones exclusivas que sirven de ayuda cuando los botones se utilizan como elementos grcos. Para obtener ms informacin, consulte Qu es un botn? en la pgina 192

La cantidad de memoria que necesita Fireworks puede aumentar si conguran un gran nmero de acciones de deshacer. Para obtener informacin sobre el uso del panel Historial para deshacer y rehacer pasos, consulte Cambio y repeticin del historial de un documento en la pgina 41.
Colores predeterminados permite establecer los colores predeterminados para las pinceladas, los rellenos y los resaltes de trazados.

permite elegir uno de los cuatro mtodos de escala que Fireworks utiliza para interpolar pxeles al trazar una imagen a escala.
Interpolacin

Utilizacin de los mens contextuales

Los mens contextuales incluyen comandos asociados a la seleccin actual.
Para utilizar un men contextual: 1

La interpolacin bicbica, adems de ser el mtodo predeterminado, es la que suele proporcionar resultados ms ntidos y de ms 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. sta resulta til cuando los dems mtodos de escala generan resultados no deseados. Con la interpolacin de 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 Aumentar. Configuracin de las preferencias de edicin Las preferencias de edicin permiten controlar la forma del puntero y las ayudas visuales en el modo de edicin de imgenes. Asimismo, permiten determinar si el archivo PNG origen de Fireworks se va a abrir al editar u optimizar desde Dreamweaver.
Cursores precisos permite sustituir los cursores de

Abra el men contextual. En Windows, haga clic con el botn derecho del ratn en el objeto. En Macintosh, haga Control-clic en el objeto. Elija un comando.

Configuracin de preferencias
Mediante la conguracin de preferencias de Fireworks se controla la presentacin general de la interfaz de usuario, as como la edicin y la ubicacin de las carpetas. Configuracin de las preferencias generales El nmero de pasos de deshacer, los colores predeterminados y el mtodo de conversin Photoshop son preferencias generales. permite establecer la cantidad de veces que se puede deshacer/rehacer una accin en un rango de 0 a 100. Esta conguracin se aplica tanto al comando Editar > Deshacer como al panel Historial.
Pasos de Deshacer

los iconos de herramientas por el cursor en forma de cruz.

42

Captulo 2

Eliminar objetos al recortar

permite borrar permanentemente pxeles u objetos situados fuera de la caja delimitadora de una seleccin cuando se elige Editar > Recortar el documento o Modicar > Tamao del lienzo.

Los materiales adicionales (filtros de conexin de Photoshop, Texturas y Patrones) son carpetas de

permite ampliar el borde listado para que abarque el lienzo completo de un documento al activar el modo de edicin de imgenes, lo que permite editar los pxeles de todo el documento. Si desactiva esta funcin, slo podr editar los pxeles del borde del objeto de imagen seleccionado.
Expandir para rellenar el documento

destino que contienen ltros de conexin, texturas y patrones. Estas carpetas pueden estar incluidas en otra carpeta, en un CD-ROM o en otra unidad externa, e incluso en una red. Los ltros de conexin de Photoshop aparecen en el men Xtras de Fireworks. Las texturas o los patrones almacenados como archivos PNG aparecen como opciones en los mens emergentes Patrn y Textura del panel Relleno. Consulte Uso de ltros y ltros de conexin en la pgina 130 y Utilizacin de ltros de conexin de Photoshop como efectos automticos en la pgina 145. Para obtener ms informacin sobre las texturas y los patrones, consulte el Captulo 4: Dibujo de objetos.
Los discos temporales (Primario y Secundario)

permite abrir archivos de imagen directamente en el modo de edicin de imgenes. Desactive esta funcin para abrir todos los archivos en el modo de objetos.
Abrir en modo de edicin de imgenes

permite desactivar la opcin Ocultar bordes de forma automtica al activar o desactivar el modo de edicin de imgenes.
Desactivar "Ocultar bordes"

permite determinar si el archivo PNG origen de Fireworks se va a abrir al utilizar Fireworks para editar imgenes en Dreamweaver u otro editor HTML.
Al editar con aplicaciones externas

permite determinar si el archivo PNG origen de Fireworks se va a abrir al optimizar un grco con el comando de Dreamweaver Optimizar imagen en Fireworks.
Al optimizar de aplicaciones externas

permite especicar la ubicacin en la que desea que Fireworks almacene los archivos de cach temporales, cuyo tamao puede aumentar considerablemente. Si su PC dispone de ms de un disco duro, puede denir el disco que tenga ms espacio libre como disco temporal primario. Si se agota el espacio en el disco duro primario, especique un disco secundario. Configuracin de las preferencias de importacin de archivos de Photoshop Mediante las preferencias del panel Importar, es posible gestionar varios aspectos relacionados con la conversin de archivos durante la importacin desde Photoshop. El cuadro de dilogo Opciones de archivos Photoshop, que se abre al importar un archivo de Photoshop, incluye las mismas opciones. Para obtener ms informacin sobre las opciones del panel Importar, consulte Apertura de archivos de Photoshop en la pgina 51.

Gestin de carpetas externas y discos temporales Las preferencias del panel Carpetas proporcionan acceso a los ltros de conexin de Photoshop, a los archivos de texturas y a los archivos de patrones de origen externo. Asimismo, permiten especicar si se desea que Fireworks almacene los archivos de cach temporales.

Conceptos bsicos de Fireworks

43

44

Captulo 2

CAPTULO 3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creacin e importacin de documentos

Si selecciona Archivo > Nuevo para crear un documento nuevo en Fireworks, se crea un tipo de documento Portable Network Graphic (PNG). PNG es el formato de archivo nativo de Fireworks. Despus de crear grcos Web en Fireworks, puede exportarlos a otros formatos grcos para Web conocidos, tales como JPEG, GIF y GIF animado. Al exportar un grco en otro formato de archivo, el archivo PNG original de Fireworks no se modica, por lo que puede utilizarlo siempre que quiera. Mientras que el documento PNG est abierto, es posible ampliar o reducir los grcos. Tambin puede cambiar el tamao y la resolucin del documento, as como girar el lienzo a la derecha e invertirlo o desplazar lateralmente la imagen importada. Al activar la vista de gama, se muestra el aspecto que tendr el grco en monitores Macintosh o Windows. Es posible importar archivos de Photoshop, FreeHand e Illustrator, as como archivos de CorelDRAW sin comprimir y archivos GIF animados. Asimismo, puede importar imgenes de una cmara digital o de un escner. Por ltimo, puede exportar los archivos en otros formatos de archivo con independencia del formato que tenga la imagen importada.

45

Configuracin de un documento nuevo

Ni que decir tiene que para crear grcos Web en Fireworks, primero es preciso congurar un documento nuevo o abrir un documento existente. Aunque las caractersticas del documento se pueden cambiar despus, resulta ms ecaz proyectar su diseo, en la medida de lo posible, con antelacin. Si desea que un documento nuevo tenga el mismo tamao inicial que el de una imagen determinada, copie sta en el Portapapeles antes de crear el documento.
Para crear un documento nuevo: 1

Haga clic en Aceptar para abrir el documento nuevo y empiece a trabajar.

Para crear un documento nuevo con las mismas dimensiones que un objeto del Portapapeles: 1

Copie en el Portapapeles el objeto de otro archivo de Fireworks o de cualquier otra aplicacin, incluido un navegador Web. Elija Archivo > Nuevo. Se abre el cuadro de dilogo Documento nuevo, en el que aparecen la altura y la anchura del objeto situado en el Portapapeles. Establezca la resolucin y el color del lienzo y, a continuacin, haga clic en Aceptar. Elija Editar > Pegar para pegar el objeto del Portapapeles en el documento nuevo.

Elija Archivo > Nuevo. El cuadro de dilogo Documento nuevo se abre.

Visualizacin y navegacin por el documento

Es posible controlar la ampliacin del documento, el nmero de vistas y el modo de visualizacin de ste. Asimismo, puede desplazarse por el documento para ver otras partes del mismo con facilidad. Esto resulta til si ampla el documento de forma que ya no sea posible ver el grco entero.

Introduzca las medidas de anchura y altura del lienzo en pxeles, pulgadas o centmetros. Es preciso que cualquier grco creado recientemente pueda adaptarse al lienzo.

Introduzca la resolucin en pxeles por pulgada o en pxeles por centmetro. Elija el color blanco, un color transparente u otro personalizado para el lienzo. Utilice el men emergente Paleta de colores personalizada del cuadro de dilogo para seleccionar un color de lienzo personalizado.
Nota: El color del lienzo puede verse si no se ha especicado un color de fondo ni una textura en la pgina Web.

46

Captulo 3

Configuracin del nivel de aumento del documento En Fireworks, el rango de aumento puede establecerse en un porcentaje de 6 a 6400.

Para ampliar un rea concreta:

Arrastre un rea de seleccin con la herramienta Aumentar.

Para reducir el documento a partir de un rea de seleccin:

Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y arrastre un rea de seleccin con la herramienta Aumentar.
Para volver a aplicar un nivel de aumento del 100 por ciento:

Haga doble clic en la herramienta Aumentar de la Caja de herramientas.

Elija un valor de Nivel de aumento en el men emergente. Para desplazarse por el documento: 1

El men emergente Aumentar se encuentra en la barra de herramientas Ver controles, mientras que las herramientas Aumentar y Mano estn situadas en la Caja de herramientas.
Para ampliar un documento:

Elija la herramienta Mano. Aparece el cursor con forma de mano. Mantenga presionado el botn del ratn mientras arrastra el cursor con forma de mano.

Vistas mltiples de documento Utilice varias vistas para ver un documento con distintos niveles de aumento al mismo tiempo.
Para abrir una vista adicional del documento:

Elija la herramienta Aumentar y haga clic dentro de la ventana de documento en la que quiera situar el nuevo punto central. Seleccione un nivel de aumento en el men emergente Aumentar. Elija Ver > Nivel de aumento y seleccione una opcin de aumento.
Para reducir un documento:

Elija Ventana > Nueva ventana.

Para disponer las vistas del documento en mosaico:

Elija la herramienta Aumentar, mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y, a continuacin, haga clic en un documento. Seleccione un nivel de aumento en el men emergente Aumentar. Elija Ver > Nivel de aumento y seleccione una opcin de aumento.

Elija Ventana > Mosaico horizontal o Ventana > Mosaico vertical.

Para cerrar una vista del documento:

Haga clic en el cuadro de cierre de la ventana.

Creacin e importacin de documentos

47

Control del nuevo dibujo del documento Los modos de visualizacin inuyen en la presentacin en pantalla de un documento, no as en los datos del objeto ni en la calidad del resultado. En el modo de pantalla completa, el documento se muestra con todos los detalles y colores disponibles. En el modo de borrador, los trazados tienen una anchura de un pxel, sin relleno, y las imgenes aparecen como cuadros X. Con Gama de Macintosh (Windows) o Gama de Windows (Macintosh), la funcin Pantalla completa se modica para mostrar el aspecto del grco en otras plataformas. Mientras utiliza la plataforma Windows, puede ver la presentacin del grco en Macintosh y viceversa.
Nota: En el modo de borrador, los objetos seleccionados se muestran con todo detalle. Para activar otro modo de visualizacin:

Para cambiar el color del lienzo:

Seleccione Modicar > Color del lienzo.

Para cambiar el tamao de una imagen en Fireworks: 1

Elija Modicar > Tamao de la imagen. Se abre el cuadro de dilogo Tamao de la imagen.

Elija el modo en el men Ver. Elija el modo en el men emergente del modo de visualizacin de la barra de herramientas Ver controles (Windows) o en la esquina inferior izquierda de la ventana de documento (Macintosh).

Cambio del tamao, el color y la resolucin del documento

Despus de crear un documento, es posible retroceder y cambiar el tamao y el color del lienzo, as como las caractersticas de resolucin de la imagen.
Para cambiar el tamao del lienzo: 1 2

Seleccione Modicar > Tamao del lienzo. Haga clic en un botn Anclaje para especicar los lados del lienzo que se van a ampliar o eliminar en Fireworks y, a continuacin, haga clic en Aceptar.

Introduzca dimensiones horizontales y verticales nuevas en los campos Dimensiones en pxeles. Si desactiva Volver a muestrear la imagen, podr cambiar los valores de Resolucin o Tamao de impresin, pero no podr modicar las dimensiones en pxeles. En los campos Tamao de impresin, introduzca las dimensiones horizontal y vertical que se van a utilizar para imprimir la imagen. En el campo Resolucin, introduzca un valor de resolucin nuevo para la imagen. Si elige la opcin Volver a muestrear la imagen, las dimensiones en pxeles tambin cambian al modicar la resolucin. Para mantener la misma proporcin entre las dimensiones vertical y horizontal, elija Restringir las proporciones. Desactive Restringir proporciones para cambiar la anchura y la altura por separado. Seleccione Volver a muestrear imagen para aadir o suprimir pxeles al cambiar el tamao si quiere que la imagen tenga el mismo aspecto con un tamao distinto. Haga clic en Aceptar.

48

Captulo 3

Eleccin de un mtodo de nuevo muestreo El cambio de tamao de imgenes de mapa de bits plantea siempre el mismo problema: debo aadir o suprimir pxeles para cambiar el tamao de la imagen, o cambio el nmero de pxeles por pulgada o centmetro? El tamao de una imagen pixelada se puede cambiar de la siguiente manera: Ajuste la resolucin, ya que esto permite adaptar un nmero mayor o menor de pxeles en un espacio dado gracias al cambio de tamao de los pxeles de la imagen. Vuelva a muestrear la imagen. Cuando se vuelve a muestrear la imagen, es preciso aadir o eliminar pxeles para ampliar o reducir el tamao del mapa de bits. En cualquier caso, la imagen se modica, lo que puede producir una cierta disminucin de la calidad al utilizar la resolucin elegida. Aplique el muestreo por reduccin, o suprima pxeles, para reducir el tamao de la imagen. Esto siempre conlleva una disminucin de la calidad, ya que se eliminan pxeles para cambiar el tamao de la imagen. Aplique el muestreo por aumento, o aada pxeles, para aumentar el tamao de la imagen. Esto puede conllevar una disminucin de la calidad de la imagen, dado que se aaden algunos pxeles con este propsito; adems, los pxeles aadidos no siempre se corresponden exactamente con los de la imagen original.

Nuevo muestreo en Fireworks En Fireworks, el procedimiento de nuevo muestreo es distinto del utilizado en la mayora de las aplicaciones de edicin de imgenes. Fireworks contiene objetos de imagen de mapa de bits basados en pxeles y objetos de trazado -basados en vectores. El nuevo muestreo de un objeto de imagen consiste en aadir o suprimir pxeles para aumentar o reducir el tamao de ste. Cuando un objeto de trazado se vuelve a muestrear, apenas se produce una disminucin de la calidad, ya que ste se dibuja de nuevo matemticamente con un tamao mayor o menor. Sin embargo, dado que los objetos de trazado de Fireworks estn compuestos de pxeles, algunos trazados o rellenos pueden parecer algo distintos despus del nuevo muestreo, debido a que es preciso volver a dibujar los pxeles del trazado o relleno.
Nota: Cuando se cambia el tamao de una imagen, las guas, los objetos de zona interactiva y los objetos de divisin tambin cambian de tamao.

Rotacin y recorte del lienzo

Fireworks permite girar y recortar el lienzo de forma sencilla. Al recortar el lienzo, se elimina el espacio adicional en blanco que queda alrededor de una imagen. Rotacin del lienzo La rotacin del lienzo resulta til cuando la imagen importada est invertida o se ha desplazado lateralmente. El lienzo se puede girar 180 grados, 90 grados a la derecha o 90 grados a la izquierda.

Antes y despus de muestrear una imagen por reduccin

Creacin e importacin de documentos

49

Al girar el lienzo, la rotacin afecta a todos los objetos del documento.

Para recortar el lienzo:

Elija Modicar > Recortar el lienzo para eliminar automticamente los pxeles sobrantes del borde del documento. El lienzo se recorta siguiendo el borde exterior de todos los pxeles del documento. Si el documento contiene ms de un fotograma, la opcin Recortar el lienzo aplica el recorte a todos los objetos de todos los fotogramas, no slo al fotograma actual.

Una imagen antes y despus de girarla 180 grados

Para girar el lienzo: 1 2

Seleccione Modicar > Rotar lienzo. Elija una opcin de rotacin.

Creacin de documentos de Fireworks mediante la importacin

Fireworks permite importar distintos formatos de archivo, incluidos archivos de Photoshop, FreeHand e Illustrator, as como archivos de CorelDRAW sin comprimir y archivos GIF animados. Si utiliza Archivo > Abrir para importar un archivo con formato distinto del formato PNG, se crea un documento de Fireworks nuevo. El nuevo documento es un archivo PNG, mientras que el archivo original no se modica. Para obtener informacin sobre la importacin de grcos como objetos de imagen en un documento de Fireworks abierto, consulte Incorporacin de imgenes importadas en un documento en la pgina 62. Apertura de archivos de Fireworks 1 En Fireworks 1, la capa de fondo es una imagen permanente que abarca todo el lienzo y bajo la cual no es posible colocar objetos ni capas. Los documentos de Fireworks 3 no disponen de una capa de fondo permanente. Al abrir un documento de Fireworks 1 en Fireworks 3, la capa de fondo del documento de Fireworks 1 se convierte en un objeto de imagen y se coloca en la parte inferior del documento para utilizarla como capa compartida.

Recorte del lienzo Si el documento contiene una imagen rodeada por espacio adicional en blanco, puede recortar el lienzo de forma sencilla.

Antes de recortar el lienzo

Despus de recortar el lienzo

50

Captulo 3

La capa URL del documento de Fireworks 1 se convierte en la capa Web. Para obtener ms informacin sobre las capas, consulte Creacin y organizacin de capas en la pgina 92. Apertura de archivos de Photoshop Cuando se abre un archivo de Photoshop en Fireworks, las capas de texto se mantienen editables, aunque, de forma predeterminada, no se comparten entre fotogramas. Puede ajustar este aspecto en el momento de la importacin. En Windows, los archivos de Photoshop deben incluir la extensin PSD en su nombre para que Fireworks pueda reconocer el tipo de archivo de Photoshop.
Para abrir archivos de Photoshop: 1 2

Crear capas compartidas permite a los fotogramas

compartir capas.
Convertir en fotogramas

permite situar cada capa del documento importado en un fotograma separado.

permite importar el texto como bloques de texto para que pueda editarlos. Si las fuentes adecuadas no se encuentran disponibles, el aspecto del texto puede cambiar. Para obtener ms informacin, consulte Administracin de fuentes no encontradas en la pgina 118.
Editable Mantener aspecto permite convertir los objetos de texto en una imagen e importarlos como una imagen de mapa de bits. Esto resulta til si no ha instalado las fuentes correctas en el PC y desea que el texto conserve su aspecto original despus de importarlo.

Elija Archivo > Abrir. Seleccione un archivo y haga clic en Abrir. Se abre el cuadro de dilogo Opciones de archivo de Photoshop.
Nota: En Windows, los nombres de archivo de Photoshop deben incluir la extensin PSD para que Fireworks reconozca este tipo de archivos.

permite ignorar todos los objetos e importar una sola imagen compuesta plana, si ha guardado una imagen compuesta en el archivo de Photoshop.
Utilizar imagen compuesta plana

Las conguraciones del cuadro de dilogo Opciones de archivo de Photoshop son idnticas a las opciones de importacin denidas en el panel Importar del cuadro de dilogo Preferencias. Apertura de archivos de FreeHand, Illustrator o CorelDRAW Es posible abrir un dibujo vectorial de FreeHand, Illustrator o CorelDRAW y aplicarle las modicaciones de Fireworks, como las pinceladas y los rellenos con textura. Fireworks permite importar archivos CDR sin comprimir, creados con CorelDRAW 7 u 8 para Windows. En Fireworks no es posible abrir ni importar archivos CMX o archivos CDR comprimidos. Dado que CorelDRAW incluye un conjunto de funciones distintas de las utilizadas en Fireworks, cabe esperar que se produzcan los siguientes cambios al importar archivos CDR:

En el cuadro de dilogo Opciones de archivo de Photoshop, elija las opciones adecuadas:

Mantener capas

permite conservar la estructura de capas del archivo importado.

Creacin e importacin de documentos

51

El contenido de la pgina maestra se repite en cada fotograma de Fireworks. Solamente se importan los dos objetos nales de una mezcla de CorelDRAW. Los objetos se agrupan despus de la importacin. Las cotas se convierten en objetos vectoriales. Se importa texto regular. La mayor parte de los parmetros de texto y de prrafo se pierden. Los colores suelen convertirse en colores RVA, siempre que resulte posible.
Para abrir archivos de FreeHand, Illustrator o CorelDRAW: 1

Conversin de archivos permite especicar cmo debern gestionarse los documentos de varias pginas al importarlos:

Abrir una pgina slo permite importar la pgina especicada. Abrir pginas como fotogramas permite importar todas las pginas del documento y coloca cada una de ellas en un fotograma distinto. Recordar capas permite mantener la estructura de capas del archivo importado. Convertir capas en fotogramas permite colocar cada capa del documento importado en un fotograma diferente. permite importar los objetos de capas desactivadas. De lo contrario, las capas invisibles no se tienen en cuenta.
Incluir capas visibles Incluir capas de fondo

Elija Archivo > Abrir. Se abre el cuadro de dilogo Opciones de archivos vectoriales.

En el cuadro Opciones de archivos vectoriales, elija las opciones adecuadas:

permite importar los objetos situados en la capa de fondo del documento. De lo contrario, la capa de fondo no se tiene en cuenta.

permite convertir en una imagen grupos complejos, mezclas o rellenos de mosaico e incluir cada uno de ellos en un documento de Fireworks como un solo objeto de imagen. Introduzca un nmero en el campo para determinar el nmero de objetos que puede contener un grupo, mezcla o relleno de mosaico antes de convertirlo en una imagen durante la importacin.
Representar como imgenes

permite suavizar los objetos importados para que no aparezcan bordes dentados.
Suavizado

permite especicar el porcentaje de escala del archivo importado.

Escala

Nota: Para aplicar las funciones Suavizado o Borde duro a los objetos seleccionados, utilice Modicar > Borde del trazado despus de importarlos.

permite especicar la anchura y la altura del archivo importado en pxeles.

Anchura y Altura

permite especicar la resolucin del archivo importado.

Resolucin

52

Captulo 3

Apertura de una animacin GIF Cuando se abre una animacin GIF, Fireworks realiza las siguientes operaciones: Sita cada uno de los fotogramas de la animacin GIF en un fotograma distinto. Crea una capa de fondo a partir de los pxeles comunes que ha encontrado en todos los fotogramas importados. Todos los fotogramas comparten la imagen situada en la capa de fondo. Por consiguiente, la modicacin de la imagen se reeja en todos los fotogramas.

Para importar una imagen de un escner o una cmara digital: 1 2

Conecte el escner o la cmara al PC. Instale el software suministrado con el escner o la cmara. En Fireworks, seleccione Archivo > Digitalizar y elija un mdulo TWAIN o el ltro de conexin de Photoshop Acquire que corresponda al dispositivo desde el cual desee importar una imagen. Para la mayora de mdulos TWAIN o ltros de conexin para adquisicin, Fireworks presentar un cuadro de dilogo adicional en el que se solicita que establezca las opciones correspondientes.

Importacin de imgenes de un escner o una cmara digital

Para importar imgenes mediante un escner o una cmara digital, utilice los mdulos TWAIN o los ltros de conexin de Photoshop Acquire (Macintosh). Las imgenes de un escner o una cmara digital que se importan en Fireworks, se abren como documentos nuevos. Para utilizar los ltros de conexin de Photoshop Acquire en Fireworks, es preciso realizar una de estas acciones durante o despus de la instalacin: Instale el ltro de conexin de Photoshop Acquire en la carpeta Fireworks 3\Settings\Xtras. Instale el ltro de conexin de Photoshop Acquire en la carpeta Photoshop Plug-ins o en una carpeta diferente. En Fireworks, seleccione Archivo > Preferencias, haga clic en la cha Carpetas y elija Filtros de conexin Photoshop. A continuacin, haga clic en el botn Examinar y desplcese hasta la carpeta que contenga los ltros de conexin de Photoshop.

Siga las instrucciones y aplique las conguraciones. La imagen importada se abre como documento nuevo de Fireworks.

Nota: Fireworks no puede escanear imgenes a menos que se hayan instalado los controladores de software, los mdulos y los ltros de conexin apropiados. Para obtener instrucciones especcas relacionadas con la instalacin, las conguraciones y las opciones, consulte la documentacin del mdulo TWAIN o del ltro de conexin para adquisicin que est utilizando.

Creacin e importacin de documentos

53

54

Captulo 3

CAPTULO 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dibujo de objetos

Por lo general, los grcos generados por ordenador son dibujos vectoriales o imgenes de mapa de bits. Aplicaciones como Macromedia FreeHand crean dibujos vectoriales, mientras que con otras del tipo de Photoshop se generan imgenes de mapa de bits. Los trazados y los puntos son los elementos bsicos de los grcos vectoriales. Mientras dibuja, los trazados vectoriales y sus puntos correspondientes se generan de forma automtica. Al ampliar el grco vectorial, ste no cambia de aspecto aunque parezca ms grande. En cambio, una imagen de mapa de bits es una matriz de pxeles que forman una imagen, igual que las losetas de un mosaico. Al ampliar la imagen de mapa de bits, pueden verse los pxeles individuales. Esto hace que su aspecto sea ms granulado y sea bsicamente irreconocible. En Fireworks, la distincin entre grcos vectoriales y de mapas de bits no existe. Los objetos dibujados en Fireworks incluyen trazados vectoriales que pueden editarse y que, al ampliar el objeto, ponen de relieve los pxeles que lo componen, que vuelven a dibujarse conforme se realiza la edicin vectorial. La herramienta Pluma de Fireworks permite dibujar imgenes de mapa de bits, que pueden editarse, mediante el mismo procedimiento utilizado en FreeHand o Illustrator para dibujar trazados vectoriales. Mientras dibuja en Fireworks, puede utilizar herramientas de dibujo vectoriales o de mapa de bits para crear grcos de mapa de bits. Con independencia de la herramienta de dibujo que se utilice, los objetos de Fireworks proporcionan un control sobre los procesos de dibujo y edicin que antes slo ofrecan las aplicaciones grcas vectoriales. De la misma forma, los atributos de estos objetos permiten ejercer un control sobre la parte artstica que antes era exclusivo de las aplicaciones grcas de mapa de bits. En este captulo nos centraremos en el dibujo de objetos de trazado en el modo predeterminado, conocido como modo de objetos. En Fireworks tambin es posible dibujar, pintar y editar pxeles utilizando las tcnicas de mapa de bits tradicionales, en lo que se conoce como el modo de edicin de imgenes. Para obtener ms informacin consulte Edicin de pxeles en la pgina 127.
55

Activacin del modo de objetos

Al crear un documento de Fireworks nuevo, ste se abre en el modo de objetos de forma predeterminada. Sin embargo, si abre una imagen o utiliza una herramienta con la que Fireworks activa el modo de edicin de imgenes, ser preciso volver al modo de objetos para dibujar y editar los objetos de trazado. Si aparece un borde listado alrededor del lienzo de un documento, Fireworks se encuentra en el modo de edicin de imgenes.
Para regresar al modo de objetos:

En esta tabla no se incluyen las herramientas cuya funcin es idntica en ambos modos.
Herramienta En el modo de objetos En el modo de edicin de imgenes

Puntero

Selecciona y mueve Mueve la imagen o trazados en la pantalla. los pxeles agrupados mediante un recuadro. Haga doble clic en una imagen para editar los pxeles que la componen. Selecciona un objeto situado detrs del objeto seleccionado. Selecciona y mueve trazados en la pantalla, selecciona un objeto de un grupo o un smbolo, muestra los puntos de un trazado y selecciona puntos. Activa el modo de edicin de imgenes y selecciona un rea de pxeles rectangular o elptica. Activa el modo de edicin de imgenes y selecciona un rea de pxeles de estilo libre. Mueve la imagen o los pxeles agrupados mediante un recuadro. Mueve la imagen o los pxeles agrupados mediante un recuadro.

Seleccionar detrs

Utilice una herramienta de seleccin para hacer doble clic en un rea de la ventana de documento que est fuera del lienzo. Haga clic en el botn Detener de la barra de estado.

Seleccionar en nivel inferior

Recuadro o Recuadro elptico

Selecciona o mueve un rea de pxeles rectangular o elptica. Selecciona o mueve un rea de pxeles de estilo libre.

Cursor de parada y botn Detener Utilice una herramienta que slo funcione en el modo de objetos, como la herramienta Texto. Elija Modicar > Salir de edicin de imagen. Presione la tecla Esc. En Windows, presione Control+Mays+D. En Macintosh, presione Comando+Mays+D.

Lazo o Lazo poligonal

Varita mgica Activa el modo de Selecciona un rea edicin de imgenes y formada por pxeles selecciona un rea de color similar. formada por pxeles de color similar. Lnea y Formas bsicas Pluma Dibuja objetos como trazados que se pueden editar. Dibuja objetos como trazados que se pueden editar. Pinta pinceladas de pxeles en un objeto de imagen. Activa el modo de objetos y dibuja objetos como trazados que se pueden editar.

Eleccin de herramientas de dibujo y edicin

En la tabla siguiente se describen las funciones bsicas de cada herramienta en cada modo. Algunas herramientas funcionan en un solo modo, mientras que otras pueden utilizarse en ambos. Adems, las caractersticas de algunas de ellas varan en funcin del modo en el que se dibuje.
Texto

Crea y edita bloques de Activa el modo de texto y abre el Editor objetos, crea de texto. bloques de texto y abre el Editor de texto. Dibuja trazos de lpiz Dibuja trazos de de un pxel como lpiz de un pxel. trazados de estilo libre.

Lpiz

56

Captulo 4

Herramienta En el modo de objetos

En el modo de edicin de imgenes Pinta pinceladas como pxeles. Activa el modo de objeto.

Arrastre una herramienta para dibujar lneas, rectngulos, elipses, estrellas y polgonos. Pinte trazados de estilo libre o dibuje trazos de lpiz de un pxel. Dibuje trazados de estilo libre mediante el trazado de puntos, igual que en FreeHand. Familiarizacin con los trazados abiertos y cerrados Los trazados pueden ser abiertos o cerrados: Un trazado abierto tiene un punto inicial y otro nal que no se tocan. En el trazado cerrado, el punto inicial y el nal son el mismo punto.

Pincel Estilo libre

Dibuja pinceladas como trazados. Estira o contrae un trazado seleccionado para cambiar la forma del mismo.

Remodelar rea

Remodela las partes de Activa el modo de un trazado objeto. seleccionado que estn incluidas en el cursor Remodelar rea.

Depurador de Modifica las Activa el modo de trazados caractersticas de objeto. presin y velocidad de un trazado sin cambiar su forma. Cuchillo/ Borrador En el modo de objetos, esta herramienta se convierte en Cuchillo. Corta un trazado seleccionado para crear varios trazados. Activa el modo de edicin de imgenes y duplica partes de un objeto de imagen. En el modo de edicin de imgenes, esta herramienta se convierte en Borrador. Borra pxeles de una imagen. Duplica partes de un objeto de imagen.

Sello

Dibujo en el modo de objetos

En el modo de objetos, los trazados y los puntos son los elementos bsicos del diseo grco. Si ampla un objeto de trazado de Fireworks, podr comprobar que est compuesto por pxeles, como si se hubiese pintado en una aplicacin de edicin de imgenes. Sin embargo, si elige la herramienta Seleccionar en nivel inferior y selecciona un objeto de trazado, podr ver el trazado y los puntos que denen y controlan la forma de dicho objeto. Para obtener ms informacin sobre la seleccin, consulte Seleccin de objetos en la pgina 66. Para dibujar objetos de trazado, puede realizar lo siguiente:

Un trazado abierto y otro cerrado Un trazado individual puede disponerse en forma de bucle de manera que parezca que encierra un rea, aunque, en realidad, no sea un trazado cerrado. Un trazado cerrado es aquel en el que los puntos nales estn unidos solamente. Ambos tipos de trazado pueden rellenarse. Para obtener ms informacin sobre los rellenos, consulte Cambio del trazo de las herramientas de dibujo en la pgina 61.

Dibujo de objetos

57

Dibujo de lneas, rectngulos y elipses En Fireworks puede dibujar lneas, rectngulos, cuadrados, elipses y crculos perfectos de forma sencilla. Para dibujar, utilice la herramienta Lnea y las herramientas de formas bsicas.

Para dibujar una forma bsica a partir de un punto central concreto:

En Windows, mantenga presionada la tecla Alt y arrastre una herramienta de dibujo. En Macintosh, mantenga presionada la tecla Opcin y arrastre una herramienta de dibujo.
Para restringir una forma y dibujarla a partir de un punto central al mismo tiempo:

Herramienta Lnea y herramientas de formas bsicas Los polgonos, los tringulos y las estrellas tambin se consideran formas bsicas. Para obtener informacin, consulte Dibujo de tringulos y otros polgonos en la pgina 59.
Para dibujar una lnea, un rectngulo o una elipse: 1 2 3 4

En Windows, mantenga presionadas las teclas Mays+Alt mientras arrastra una herramienta de dibujo. En Macintosh, mantenga presionadas las teclas Mays+Opcin mientras arrastra una herramienta de dibujo. Redondeo de las esquinas de un rectngulo Las esquinas de un rectngulo o un cuadrado pueden redondearse mientras se dibuja mediante la conguracin de la curvatura de las esquinas en el panel Opciones de la herramienta Rectngulo. Establezca este valor antes de dibujar el rectngulo.
Para dibujar un rectngulo con esquinas redondeadas: 1

Elija la herramienta Lnea o una herramienta de formas bsicas. Mantenga presionado el botn del ratn para empezar a dibujar. Para dibujar, arrastre el ratn. Cuando el trazado est terminado, suelte el botn del ratn.

Para dibujar un cuadrado:

Mantenga presionada la tecla Mays mientras arrastra la herramienta Rectngulo.

Para dibujar un crculo:

Haga doble clic en la herramienta Rectngulo para abrir el panel Opciones de la herramienta Rectngulo. Introduzca un valor en el cuadro de texto Esquina. Para dibujar un rectngulo, mantenga presionado el botn del ratn y arrstrelo.

Mantenga presionada la tecla Mays mientras arrastra la herramienta Elipse.

Para restringir la orientacin de una lnea a incrementos de 45 grados:

Nota: Las esquinas de los rectngulos existentes no se pueden redondear.

Mantenga presionada la tecla Mays mientras arrastra la herramienta Lnea.

58

Captulo 4

Dibujo de tringulos y otros polgonos Utilice el panel Opciones de la herramienta Polgono para determinar el nmero de lados del polgono. Asegrese de cambiar estos valores antes de dibujar el objeto.
Para dibujar un tringulo u otro polgono: 1

Para dibujar una estrella: 1

2 3 4

2 3 4

Haga doble clic en la herramienta Polgono para abrir el panel Opciones de la herramienta Polgono. En el men emergente Forma, elija Polgono. Introduzca el nmero de lados del polgono. Para dibujar el polgono, mantenga presionado el botn del ratn y arrstrelo.

Haga doble clic en la herramienta Polgono para abrir el panel Opciones de la herramienta Polgono. En el men emergente Forma, elija Estrella. Introduzca el nmero de puntas de la estrella. Establezca el valor de ngulo: Elija ngulo automtico. Introduzca un valor en ngulo. Cuanto menor sea el nmero, mayor ser el ngulo. Para dibujar la estrella, mantenga presionado el botn del ratn y arrstrelo.

Nota: La herramienta Polgono dibuja siempre respecto de un punto central. Para restringir la orientacin de una forma a incrementos de 45 grados:

Nota: La herramienta Polgono dibuja siempre respecto de un punto central. Para restringir la orientacin de una forma a incrementos de 45 grados:

Mantenga presionada la tecla Mays mientras dibuja. Pintura y dibujo de trazados de estilo libre Para dibujar un trazado de estilo libre, utilice la herramienta Pincel o Lpiz. Las herramientas Pincel y Lpiz de Fireworks permiten pintar o dibujar de la misma forma que en las aplicaciones grcas de mapa de bits tradicionales; sin embargo, los objetos dibujados en Fireworks pueden editarse debido a que son objetos de trazado.

Mantenga presionada la tecla Mays mientras dibuja. Dibujo de estrellas Es posible dibujar estrellas de 3 a 360 puntas. Para dibujar ms de 25 puntas, introduzca un valor directamente en el cuadro de texto. Al dibujar estrellas, tambin puede variar los grados del ngulo. Utilice el panel Opciones de la herramienta Polgono para establecer el nmero de puntas y los grados del ngulo. Asegrese de cambiar estos valores antes de dibujar la estrella.

Herramienta Pincel y herramienta Lpiz La herramienta Pincel permite pintar pinceladas de estilo libre, mientras que la herramienta Lpiz dibuja trazos de lpiz de un pxel.

Estrella de cinco puntas con ngulo = Automtico, polgono de cinco lados, y estrella de ocho puntas con ngulo = 10.

Pincelada y trazo de lpiz.

Dibujo de objetos

59

Nota: Para dibujar y editar en el modo de edicin de imgenes, tambin puede utilizar las herramientas Pincel y Lpiz. Para obtener informacin, consulte Edicin de pxeles con la herramienta Lpiz o Pincel en la pgina 127. Para pintar trazados o dibujar trazos de lpiz: 1 2

Utilice la herramienta Pluma para dibujar trazados con una sucesin de puntos. Esta herramienta funciona de forma similar a las de FreeHand e Illustrator.

Elija la herramienta Pincel o Lpiz. Mantenga presionado el botn del ratn y arrstrelo para dibujar un trazado de estilo libre.

Herramienta Pluma
Para dibujar un trazado punto a punto:

Nota: Para restringir el trazado a una lnea vertical u horizontal, mantenga presionada la tecla Mays mientras arrastra el ratn. 3

1 2

Elija la herramienta Pluma. Haga clic para trazar los puntos: Si desea dibujar segmentos rectos, haga clic para trazar cada punto. Para dibujar segmentos curvos, mantenga presionado el botn del ratn sobre un punto y, a continuacin, arrstrelo.

Termine el trazado: Para dejar el trazado abierto, suelte el botn del ratn en el lugar en el que quiera que termine. Para cerrar el trazado, suelte el botn del ratn en el punto inicial cuando aparezca un cuadrado relleno junto al cursor.

Termine el trazado: Para crear un trazado abierto, haga doble clic en el ltimo punto. Para crear un trazado cerrado, haga clic en el punto inicial cuando aparezca un cuadrado relleno junto al cursor.

Dibujo de trazados de estilo libre mediante el trazado de puntos Es posible dibujar un trazado segmento a segmento mediante el trazado de los puntos que lo componen. Asimismo, puede dibujar segmentos de lnea rectos o curvos. Un mismo trazado puede contener segmentos rectos y curvos.

Para continuar dibujando un trazado abierto existente: 1

Elija la herramienta Pluma o la herramienta Volver a dibujar trazado. Haga clic en el punto nal y contine dibujando el trazado.

Para obtener informacin detallada sobre la edicin de trazados, consulte Remodelado de trazados editando los puntos en la pgina 68.

Dibujo de trazados mediante el trazado punto a punto.

60

Captulo 4

Cambio del trazo de las herramientas de dibujo

Los atributos de trazo de las herramientas Pluma, Lpiz y Pincel pueden cambiarse para aplicar los nuevos atributos al siguiente objeto que se dibuje. El color de trazo actual aparece en la paleta de colores de trazo de la Caja de herramientas. Utilice la Caja de herramientas para cambiar el trazo de las herramientas de dibujo.

Cambio del relleno de las herramientas de dibujo

Los atributos de relleno de las herramientas de dibujo Rectngulo, Elipse y Polgono pueden cambiarse para aplicar los nuevos atributos a este tipo de objetos la prxima vez que los dibuje. Puede dibujar objetos con rellenos slidos, degradados o de patrn. El color de relleno actual aparece en la paleta de colores de relleno de la Caja de herramientas. Utilice la Caja de herramientas para cambiar el relleno de una herramienta de dibujo.

El pincel de pintura indica la paleta de colores de trazo elegida en la Caja de herramientas. El panel Trazo tambin permite cambiar el color de trazo de una herramienta de dibujo. Asimismo, permite elegir entre una variedad de puntas de pincel y tamaos de punta. Adems, las caractersticas de trazo de un objeto pueden cambiarse despus de dibujarlo. Para obtener ms informacin, consulte Edicin de trazos en la pgina 76.
Para cambiar el color de trazo de las herramientas de dibujo: 1

El cubo de pintura indica la paleta de colores de relleno elegida en la Caja de herramientas. Tambin puede cambiar el color de relleno de las herramientas de dibujo en el panel Relleno. Puede elegir entre gran diversidad de degradados y rellenos de patrones. As mismo, puede cambiar las caractersticas de relleno de los objetos despus de dibujarlos. Para ms informacin, consulte "Editing lls" on page 80.
Para cambiar el color de relleno de las herramientas de formas bsicas: 1

En la paleta de colores de trazo de la Caja de herramientas, haga clic en la echa abajo situada junto a la paleta de colores para abrir el men emergente de sta. Elija un color de trazo en el conjunto de muestras. Elija una herramienta de dibujo. Para dibujar el objeto, mantenga presionado el botn del ratn y arrstrelo.

2 3 4

3 4

En la paleta de colores de relleno de la Caja de herramientas, haga clic en la echa abajo situada junto a la paleta de colores para abrir el men emergente de sta. Elija un color de relleno en el conjunto de muestras. Elija la herramienta Rectngulo, Elipse o Polgono. Para dibujar el objeto, mantenga presionado el botn del ratn y arrstrelo.

Nota: Los objetos que se dibujan con la herramienta Pincel, Lpiz o Pluma no aparecen rellenos. El relleno debe aadirse despus de dibujar el objeto.

Dibujo de objetos

61

Incorporacin de imgenes importadas en un documento

Es posible importar, arrastrar y colocar o copiar y pegar objetos, imgenes o textos dibujados en otras aplicaciones, as como imgenes de una cmara digital o de un escner, en un documento de Fireworks. Procedimiento de arrastre y colocacin En Fireworks, es posible arrastrar y colocar objetos, imgenes o texto de otras aplicaciones que admitan el uso de este procedimiento: FreeHand 7 o posterior Flash 3 o posterior Photoshop 4 o posterior Illustrator 7 o posterior Microsoft Ofce 97 o posterior Microsoft Internet Explorer 3 o posterior Netscape Navigator 3 o posterior CorelDRAW 7 o posterior
Para arrastrar y colocar en Fireworks: 1

Al pegar en Fireworks un objeto copiado de otra aplicacin, ste queda centrado en el documento activo. Cada modo de edicin gestiona los datos pegados de manera diferente: En el modo de objetos, al pegar una seleccin de pxeles se genera un objeto de imagen rectangular, en el que se utiliza la transparencia alfa para conservar el aspecto de la seleccin. Los objetos vectoriales mantienen los atributos vectoriales. En el modo de edicin de imgenes, al pegar un grco vectorial o un objeto de imagen, se pega una seleccin de pxeles que permanece otando hasta que se desactiva. Una vez desactivada, la seleccin pasa a formar parte de la imagen. Nuevo muestreo de objetos importados Cuando se pega una imagen con resolucin distinta de la del documento de Fireworks de destino, Fireworks presenta un mensaje en el que se pregunta si se quiere volver a muestrear la imagen. El nuevo muestreo permite aadir pxeles a la imagen que ha cambiado de tamao, o eliminar pxeles de la misma para que su aspecto sea lo ms parecido posible al de la imagen original. Por lo general, despus de efectuar un nuevo muestreo con una resolucin mayor, la disminucin de la calidad o la prdida de datos es prcticamente inapreciable. Por el contrario, un nuevo muestreo con una resolucin menor siempre causa prdida de datos y disminucin de la calidad. Para mantener la altura y la anchura original de los datos pegados, aadiendo y eliminando pxeles segn se necesite, elija Volver a muestrear. Para mantener los pxeles originales, lo que puede hacer que el tamao relativo de la imagen pegada aumente o se reduzca ms de lo esperado, elija No muestrear de nuevo.

Seleccione un grco en otra aplicacin y arrstrelo hasta un documento abierto de Fireworks. Site el cursor sobre el documento de Fireworks y suelte el botn del ratn.

Pegado en Fireworks Puede utilizar el Portapapeles para cortar y pegar cualquiera de los formatos siguientes: FreeHand 7 o posterior Illustrator PNG PICT (Macintosh) DIB (Windows) BMP (Windows) Texto ASCII

62

Captulo 4

Importacin de archivos PNG En la capa de dibujo actual se pueden importar archivos PNG de Fireworks. Tenga en cuenta lo siguiente: Los objetos de zona interactiva y de divisin se sitan en la capa Web del documento. Para obtener ms informacin, consulte Visualizacin de zonas interactivas en la capa Web en la pgina 175. Las capas del archivo importado se fusionan. En el caso de los archivos con ms de un fotograma, slo se importa el primer fotograma.
Para importar un archivo PNG en un documento de Fireworks: 1

Elija Archivo > Importar para abrir el cuadro de dilogo Importar. Desplcese hasta el archivo y haga clic en Abrir. Site el cursor de importacin en el lugar en que desee situar la esquina superior izquierda de la imagen: Haga clic para importar la imagen a tamao completo. Arrastre el cursor de importacin para cambiar el tamao de la imagen importada. Fireworks mantiene las proporciones de la imagen. Los objetos del archivo aparecen seleccionados para que pueda agruparlos, moverlos o distribuirlos inmediatamente y de forma sencilla despus de importarlos.

2 3

Dibujo de objetos

63

64

Captulo 4

CAPTULO 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Edicin de objetos

Dibujar trazados con una herramienta de Fireworks slo es el primer paso a la hora de crear grcos de Web. Utilice las funciones de edicin de Fireworks para que sus objetos sean nicos. Una vez dibujado el objeto de trazado, puede seleccionarlo y remodelarlo segn la forma exacta que desee. Un trazado tambin se puede remodelar moviendo puntos a lo largo del mismo o ajustando los tiradores de punto. Los segmentos de lnea se pueden ampliar y reducir, e incluso se pueden redibujar segmentos que sustituyan a los originales entre dos puntos. Despus pueden editarse sus atributos de trazo y relleno. Las opciones de Trazo van desde lneas nas como las de un lpiz hasta anchas bandas similares a pintura de aerosol o manchas de aceite. Personalice todas las caractersticas de un trazo y gurdelo para volver a utilizarlo. Las opciones de Relleno incluyen desde colores slidos hasta degradados multicolores y patrones de mapa de bits. Despus de aplicar un relleno de degradado o de patrn, puede editarlo en el espacio de trabajo y crear otros rellenos originales fantsticos. Adems de los patrones de Fireworks, se puede utilizar prcticamente cualquier otra imagen en un equipo PC. Tambin puede aadirse una textura a los trazos y rellenos. Puede guardar los atributos como un estilo para volver a utilizar el uso de los trazos, rellenos y otros atributos. En vez de reconstruir los atributos para volver a crear el aspecto de un objeto, puede guardar ese aspecto como un estilo y aplicarlo a otros objetos. Si va a utilizar un grco varias veces en un documento, cree un smbolo a partir del mismo y utilice instancias del smbolo donde quiera. Las mezclas entre instancias se crean fcilmente con una tcnica denominada interpolacin. Cuando se edita un smbolo, todas las instancias cambian automticamente para reejar esta edicin, con independencia de su lugar en el documento.

65

Puede girar, escalar, inclinar y distorsionar objetos mediante las herramientas y comandos de transformacin. Tambin puede establecer el orden de apilamiento de los objetos, organizarlos en grupos para trabajar con ellos como si fueran un nico objeto y utilizar capas.

Para aadir una seleccin:

Mantenga presionada la tecla Mays mientras selecciona ms objetos. Los dems objetos permanecern seleccionados.
Para anular la seleccin de un objeto dejando los dems seleccionados:

Seleccin de objetos
Para editar un objeto es necesario seleccionarlo. Los objetos se pueden seleccionar haciendo clic sobre ellos o arrastrando los recuadros de seleccin a su alrededor con las herramientas Puntero, Seleccionar detrs o Seleccionar en nivel inferior.
Nota: Utilice la herramienta Recuadro, Lazo o Varita mgica para seleccionar un rea de pxeles en el modo de edicin de imgenes. Para obtener ms informacin, consulte Seleccin de pxeles en la pgina 122. Para seleccionar un objeto de trazado: 1

Mantenga presionada Mays y haga clic en el objeto seleccionado. Los dems objetos permanecern seleccionados. Aunque haya trazados apilados, agrupados o superpuestos que oscurezcan otro trazado, podr seleccionarlo.
Para seleccionar un trazado detrs de otro: 1

Elija la herramienta Seleccionar detrs.

Elija la herramienta Puntero.

Haga clic en un trazado varias veces hasta haber seleccionado el objeto que desee.

Para seleccionarlo todo en todas las capas de un documento: 2

Mueva el puntero sobre el trazado del objeto, o sobre el relleno si lo tiene.

Nota: Si la herramienta Resaltar posicin del ratn est activada, el resaltado indicar cuando el puntero est en posicin para seleccionar el objeto. Para obtener ms informacin, consulte Resaltado de objetos seleccionables en la pgina 67.

Elija Editar > Seleccionar todo. En Windows, presione Control+A. En un Macintosh, presione Comando+A.
Nota: Seleccionar todo no elige los objetos que estn en capas bloqueadas u ocultas. Si est activada la opcin Editar slo una capa, nicamente se seleccionarn los objetos en la capa actual. Para obtener ms informacin, consulte Creacin y organizacin de capas en la pgina 92. Para anular la seleccin de todo lo que hay en cada capa:

Haga clic en el objeto. Aparecer un trazado de seleccin que contornea el objeto.

Para seleccionar varios objetos a la vez:

Elija la herramienta Puntero y arrastre un recuadro alrededor de los objetos.

Elija Editar > Anular seleccin. En Windows, presione Control+D. En un Macintosh, presione Comando+D.

66

Captulo 5

Resaltado de objetos seleccionables Cuando hay una herramienta de seleccin activa y el ratn pasa por encima de un objeto, aparece un resaltado sobre el objeto que indica que se puede seleccionar. Puede desactivar este resaltado si distrae su atencin.
Para desactivar el resaltado: 1

Para visualizar el trazado y los puntos de un objeto:

Seleccione el trazado con la herramienta Seleccionar en nivel inferior.

Haga doble clic en la herramienta de seleccin para abrir su panel Opciones. Anule la seleccin de Resaltar posicin del ratn.

Elija la herramienta Seleccionar en nivel inferior si el trazado est seleccionado y los puntos no se muestran.

Visualizacin de trazados y puntos al seleccionar objetos de trazado Cuando se selecciona un objeto de trazado, Fireworks muestra informacin de los distintos tipos de trazados y puntos, segn la herramienta de seleccin en uso y el estado del comando Ocultar bordes.
Para mostrar el contorno de seleccin de un trazado, pero no sus puntos:

Un objeto seleccionado con la herramienta Seleccionar en nivel inferior presenta el trazado del objeto con puntos.
Para ocultar el contorno de un objeto seleccionado:

Seleccione el trazado con la herramienta Puntero o Seleccionar detrs.

Elija Ver > Ocultar bordes.

Nota: Para identicar el objeto seleccionado con el contorno del trazado y los puntos ocultos, observe la barra de estado (Windows) o el Inspector de objetos.

Elija la herramienta Puntero o Seleccionar detrs si el trazado est seleccionado y se muestran los puntos.

Un objeto seleccionado no presenta el contorno cuando se elige Ocultar bordes. Un objeto seleccionado con la herramienta Puntero muestra el contorno del trazado sin puntos.

Edicin de objetos

67

Seleccin de imgenes en el modo de objetos Utilice la herramienta Puntero para seleccionar un objeto de imagen en este modo. El objeto de imagen seleccionado queda rodeado de un cuadro delimitador rectangular que tiene tiradores de cambio de tamao.

Un punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones suaves y regulares entre segmentos.

Un punto de esquina indica que al menos uno de los segmentos adyacentes es una lnea recta.

Imagen seleccionada en el modo de objetos

Para ocultar el cuadro delimitador:

Elija Ver > Ocultar bordes.

Nota: Para cambiar al modo de edicin de imgenes, haga doble clic sobre la imagen.

Para seleccionar puntos especficos: 1

Elija la herramienta Seleccionar en nivel inferior.

Remodelado de trazados editando los puntos

Los puntos son la estructura de los objetos de trazado en Fireworks. Cuando se dibuja en el modo de objetos con cualquier herramienta de dibujo de Fireworks, el trazado de resultado se denir por los puntos especicados al dibujar. El tipo de punto y el aspecto curvo o recto de las lneas adyacentes estn relacionados directamente:
2

Seleccione uno o ms puntos: Haga clic en un punto, o mantenga presionada Mays y haga clic en varios puntos uno a uno. Arrastre un rea de seleccin alrededor de uno o ms puntos.

Para mover un punto:

Arrstrelo con la herramienta Seleccionar en nivel inferior.

68

Captulo 5

Para convertir un punto curvo en otro de esquina: 1

Elija la herramienta Pluma.

Para cambiar la forma de un segmento de trazado adyacente:

Arrastre un tirador de punto.

Para mostrar los tiradores de punto si no son visibles: 1

Haga clic en un punto curvo para seleccionarlo.

2

Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y arrastre desde el punto con la herramienta Seleccionar en nivel inferior. Repita el paso anterior para presentar el segundo tirador de punto.

La vista previa del trazado muestra dnde se dibujar el nuevo trazado si se suelta el botn del ratn.
Tirador de punto Puntero de seleccin e nivel inferior 3

Haga clic en el punto otra vez para convertirlo.

Presentacin prelimina de trazado Trazado Punto seleccionado

Los tiradores se retraen y los segmentos adyacentes se vuelven lneas rectas.

Para convertir un punto de esquina en un punto curvo: 1 2

Arrastre un tirador de punto con la herramienta Seleccionar en nivel inferior para editar segmentos de trazado adyacentes.
Si desea doblar solamente un segmento adyacente sin editar el otro: 1

Elija la herramienta Pluma. Haga clic en un punto de esquina y arrstrelo alejndolo. Los tiradores se extendern curvando los segmentos adyacentes.

Elija la herramienta Seleccionar en nivel inferior.

2 3

Seleccione un punto. Doble el segmento: En Windows, mantenga presionada Alt y arrastre un tirador de punto. En un Macintosh, mantenga presionada Opcin y arrastre un tirador de punto.

Edicin de objetos

69

Remodelado directo de trazados

Adems de arrastrar puntos y tiradores de punto, Fireworks tiene diversas herramientas que sirven para editar trazados.

A medida que mueve el puntero del ratn por un trazado seleccionado, el puntero cambia al de ampliacin o reduccin, segn su posicin relativa al trazado.
Este puntero Indica que La herramienta Estilo libre est en uso. La herramienta Estilo libre est en uso y el cursor de ampliacin se encuentra en posicin para ampliar el trazado seleccionado. La herramienta Estilo libre est en uso y el cursor est ampliando el trazado seleccionado. La herramienta Estilo libre est en uso y el cursor de reduccin est activo.

Las herramientas de edicin del modo de objetos: Estilo libre, Remodelar rea, Depurador de trazados, Volver a dibujar trazado y Cuchillo. Doblado de trazados Utilice la herramienta Estilo libre para doblar un trazado sin modicar sus puntos. Puede reducir o ampliar cualquier parte del trazado. Fireworks aade, mueve o suprime automticamente puntos situados a lo largo del trazado mientras lo edita.
Longitud especificada

La herramienta Remodelar rea est en uso y el puntero est activo. El rea comprendida entre el crculo interno y el crculo externo representa la intensidad reducida.

Cuando el puntero est directamente encima, el trazado se puede ampliar. Cuando no est directamente encima, puede reducirlo. Es posible cambiar el tamao del puntero de ampliacin La herramienta Estilo libre ampla un segmento de trazado.
Para ampliar trazados seleccionados: 1 2

Elija la herramienta Estilo libre. Desplace el puntero directamente sobre el trazado seleccionado. El cursor cambia al puntero de ampliacin.

Arrastre el trazado.

La herramienta Estilo libre reduce un segmento de trazado. El trazado se vuelve a dibujar para reejar la ampliacin.

70

Captulo 5

Para reducir trazados seleccionados: 1

Distorsin de trazados Utilice la herramienta Remodelar rea para ampliar el rea de todos los trazados seleccionados dentro del crculo exterior del puntero de esta herramienta.

Elija la herramienta Estilo libre. El puntero cambia al de reduccin.

2 3

Apunte algo alejado del trazado. Arrastre hacia el trazado para reducirlo. Presionar ligeramente sobre el trazado seleccionado para cambiarlo de forma.

Para cambiar el tamao del puntero de reduccin:

Para aumentar la anchura, presione la tecla de echa derecha o presione la tecla nmero 2. Para reducir la anchura del puntero de reduccin, presione la tecla de echa izquierda o presione la tecla nmero 1. Para establecer el tamao del puntero de reduccin y la longitud del segmento de trazado sobre el que tiene efecto, en el panel Opciones de herramientas, especique un valor entre 1 y 500 en el cuadro de texto Tamao. Este valor indica el tamao en pxeles del puntero.
Nota: La herramienta Estilo libre tambin responde a la presin de una tableta Wacom u otras compatibles.

El crculo interior representa el lmite de la herramienta a su mxima potencia. El rea situada entre el crculo interior y el exterior remodela los trazados con una potencia menor al nivel mximo. El crculo interior del puntero determina la reduccin gravitacional del puntero cuya fuerza puede denirse.
Nota: La herramienta Remodelar rea tambin responde a la presin de una tableta Wacom u otra compatible. Para distorsionar los trazados seleccionados: 1 2

Elija la herramienta Remodelar rea. Arrastre a travs de los trazados para volver a dibujarlos.

Edicin de objetos

71

Para cambiar el tamao del puntero de Remodelar rea:

Para aumentar el tamao del puntero, presione la tecla de echa derecha o presione la tecla nmero 2. Para reducir el tamao del puntero de reduccin, presione la tecla de echa izquierda o presione la tecla nmero 1. Para establecer el tamao del puntero de reduccin y la longitud del segmento de trazado sobre el que tiene efecto, en el panel Opciones de herramientas, especique un valor entre 1 y 500 en el cuadro de texto Tamao. Este valor indica el tamao en pxeles del puntero.
Para establecer la fuerza del crculo interior del puntero de Remodelar rea:

Arrastre para volver a dibujar un segmento de trazado. La porcin del trazado que se va a volver a dibujar se resalta en color rojo. Suelte el botn del ratn para reemplazar el segmento de trazado.

Corte de trazados en varios objetos distintos Utilice la herramienta Cuchillo para cortar un trazado en otros dos o ms.

Nota: Si se selecciona un objeto de imagen, la herramienta Cuchillo se convertir en la herramienta Borrador. Para cortar un trazado seleccionado: 1 2

Introduzca un valor entre 1 y 100 en el cuadro de texto Fuerza del panel Opciones. Este valor indica el porcentaje de fuerza del puntero. A mayor porcentaje, mayor ser la fuerza. Volver a dibujar trazados Utilice la herramienta Volver a dibujar trazado para redibujar un segmento del trazado seleccionado, conservando sus caractersticas de pincel, relleno y efectos.

Elija la herramienta Cuchillo. Corte el trazado: Arrastre el puntero a travs del trazado Haga clic en el trazado Anule la seleccin del trazado.

Remodelado de objetos de trazado con operaciones de trazado

Para volver a dibujar el segmento de un trazado seleccionado: 1

Elija la herramienta Volver a dibujar trazado.

Desplace el puntero directamente sobre un trazado. El cursor cambiar al puntero de Volver a dibujar trazado.

Utilice las operaciones de trazado para crear formas combinando o alterando los trazados existentes. Al utilizar una operacin de trazado suprime cualquier informacin relativa a la presin o la velocidad de los trazados. En algunas de estas operaciones, el orden de apilamiento de los objetos de trazado seleccionados dene la manera en que funciona la operacin. Para obtener ms informacin sobre cmo disponer el orden de apilamiento de los objetos seleccionados, consulte Organizacin de objetos en la pgina 90.

72

Captulo 5

Combinacin de objetos de trazado Los objetos de trazado se pueden combinar en un solo objeto.
Para crear un trazado continuo a partir de dos abiertos: 1 2 3

El trazado de resultado utiliza los atributos de trazo y relleno del objeto de trazado situado detrs. Eliminacin de porciones de un objeto de trazado Puede eliminar porciones de un objeto de trazado seleccionado denidas por las porciones superpuestas de otro objeto de trazado seleccionado situado delante.

Elija la herramienta Seleccionar en nivel inferior. Seleccione dos extremos en dos trazados abiertos. Elija Modicar > Unir.

Para crear un trazado compuesto: 1

Seleccione dos o ms trazados abiertos o cerrados. Elija Modicar > Unir.

Para dividir un trazado compuesto: 1 2

Seleccione el trazado compuesto: Elija Modicar > Separar.

Para eliminar porciones de un objeto de trazado: 1

Seleccione el objeto de trazado que dene el rea que desea eliminar. Elija Modicar > Organizar > Poner en primer plano. Mantenga presionada Mays y aada a la seleccin el objeto de trazado del que van a borrarse partes. Elija Modicar > Combinar > Perforar.

Para combinar trazados cerrados en otro trazado que abarque el rea completa de los originales:

Elija Modicar > Combinar > Unir. El trazado de resultado utiliza los atributos de trazo y relleno del objeto situado detrs. Puede crear un objeto a partir de la interseccin de dos o ms objetos.

Los atributos de trazo y relleno no cambiarn. Recortado de un trazado Puede eliminar porciones de un trazado fuera del rea denida por otro trazado seleccionado que est situado delante.

Para crear un trazado cerrado que abarque el rea comn a todos los trazados cerrados seleccionados:

Elija Modicar > Combinar > Intersectar.

Edicin de objetos

73

Para recortar un trazado seleccionado: 1

Para expandir el trazo de un objeto seleccionado: 1

Seleccione el objeto de trazado que dene el rea que va a recortar. Elija Modicar > Organizar > Poner en primer plano. Mantenga presionada Mays y aada a la seleccin el objeto de trazado que va a recortar. Elija Modicar > Combinar > Recortar.

Elija Modicar > Modicar el trazado > Ampliar trazo para abrir el cuadro de dilogo Ampliar trazo.

El objeto de resultado conserva los atributos de trazo y relleno del objeto de trazado situado detrs. Simplificacin de un trazado Puede suprimir puntos de un trazado manteniendo su forma global.
Para simplificar un trazado seleccionado: 2

Establezca la anchura del trazado cerrado de resultado, aparentando que el trazo del objeto original se ha ensanchado. Especique un tipo de esquina: en ngulo, redonda o biselada. Si elige ngulo en el paso 3, establezca el ngulo mnimo, que es el punto en que una esquina de este tipo se convertir automticamente en otra biselada. El ngulo mnimo es la relacin entre la longitud de la esquina en ngulo y la anchura del trazo. Elija una opcin de terminacin: unida, cuadrada o redonda, y haga clic en Aceptar.

Elija Modicar > Modicar el trazado > Simplicar. Expansin de un trazo Puede convertir el permetro del trazo del trazado seleccionado en otro trazado cerrado. El resultado crea la ilusin de un trazado sin relleno y con el mismo trazo que el relleno del objeto original.

Reemplaza al trazado original un trazado cerrado con la forma del original y con sus mismos atributos de trazo y relleno.

74

Captulo 5

Contraccin o expansin de un trazado Puede contraer o expandir el trazado de un objeto seleccionado especicando una cantidad.
Para expandir o contraer el trazado seleccionado: 1

Los colores actuales de trazo y relleno aparecen en las paletas de colores de trazo y relleno del panel Trazo, panel Relleno, Mezclador de colores, Caja de herramientas.

Elija Modicar > Modicar el trazado > Cambiar el tamao para abrir el cuadro de dilogo Cambiar el tamao. Elija contraer o expandir el trazado: Hacia dentro contrae el trazado. Hacia afuera expande el trazado. Establezca la anchura entre el trazado original y el que va a contraer o expandir. Especique un tipo de esquina: en ngulo, redonda o biselada. Si elige ngulo en el paso 4, establezca el ngulo mnimo, que es el punto en que una esquina de este tipo se convierte automticamente en otra biselada. El ngulo mnimo es la relacin entre la longitud de la esquina en ngulo y la anchura del trazo. Haga clic en Aceptar. Las paletas de colores de trazo y relleno en la Caja de herramientas Una vez aplicado un color a un trazo y a un relleno, esos colores se convierten en los activos para los siguientes objetos que dibuje.
Para cambiar el color del trazo o el relleno antes de dibujar el siguiente objeto:

Elija una muestra de color en el men emergente de la paleta de colores de trazo o relleno, que est en la Caja de herramientas.
Para cambiar el color de trazo o relleno de un objeto seleccionado:

Un objeto de trazado ms pequeo o ms grande con los mismos atributos de trazo y relleno reemplazar al objeto original.

Elija una muestra de color en el men emergente de la paleta de colores de trazo o relleno, que est en la Caja de herramientas.
Para intercambiar colores de trazo y de relleno:

Cambio de los colores de trazo y relleno

Despus de dibujar un objeto de trazado, puede modicar sus atributos de trazo y relleno. Si aade un trazo al objeto seleccionado, se pintar el contorno del objeto en negro, blanco o un color. Si aade un relleno slido a un objeto seleccionado, el interior del objeto se pinta de negro, blanco o un color.

Haga clic en el botn Intercambiar colores del Mezclador de color o la Caja de herramientas.

El color de trazo se convierte en el color de relleno y viceversa.

Para restablecer los colores predeterminados:

Haga clic en el botn Colores predeterminados.

Edicin de objetos

75

Para cambiar los colores predeterminados: 1 2

Elija Archivo > Preferencias. En la opcin Colores predeterminados del panel General, elija colores en los mens emergentes de la paleta de colores de trazo y relleno, y haga clic en Aceptar.

El nuevo trazo creado tendr el color actual mostrado en la paleta de colores de pincel.

Para utilizar un color del selector del sistema: 1

Haga clic en el botn del selector de color en el men emergente de la paleta de colores.

Utilice el panel Pincel para cambiar el trazo aplicado al objeto.

Para editar el trazo de un objeto seleccionado: 1

Se abre el cuadro de dilogo Color (Windows) o el selector de colores de Apple (Macintosh).

2

Elija un color en el selector del sistema y haga clic en Aceptar.

2

En el panel Trazo elija una categora de trazo, como Lpiz, Aceite o Acuarela, en el men emergente Categora del trazo. Elija un trazo en el men emergente Nombre del trazo. Para cambiar el color del trazo, elija una muestra en el men emergente de la paleta de colores. Modique la suavidad de los bordes con el deslizador Suavidad de bordes junto a la vista previa de Punta. Tambin puede elegir una textura para el trazo en el men emergente Textura e introducir un valor para su intensidad. Para obtener ms informacin, consulte Adicin de textura a un trazo en la pgina 76.
Nota: Algunas categoras de trazos tienen aplicada una textura predeterminada.

Este color se convertir en el nuevo color de trazo o de relleno. Para obtener ms informacin sobre cmo aadir un color del selector al panel Muestras, consulte Personalizacin del panel Muestras en la pgina 101.

Edicin de trazos
Los trazos se pueden editar para crear trazados con amplias caractersticas de pluma o pincel, desde trazados nos como los de un lpiz hasta anchas bandas similares a pintura en aerosol o manchas de aceite. Las texturas de trazo aumentan el nmero de posibilidades creativas. Con el panel Trazo y los paneles Editar pincel puede controlar totalmente cada caracterstica del pincel, como la cantidad de tinta, el tamao y forma de la punta, la textura, el efecto de los bordes y el aspecto. Asimismo, los controles de conguracin de sensibilidad permiten controlar cmo una pluma sensible a la presin afecta al aspecto de los trazos. Tambin puede guardar el pincel de resultado para volver a utilizarlo.
5

Adicin de textura a un trazo Las texturas modican el brillo pero no el matiz, por lo que dan a los trazos un aspecto menos mecnico pero ms orgnico. Tienen ms efecto con los trazos anchos.

76

Captulo 5

Se puede aadir una textura a cualquier trazo. Fireworks se suministra con varias texturas que se pueden elegir, como Gasa, Mancha de aceite o Papel de lija.

Escriba un porcentaje entre 0 y 100 para controlar la profundidad de la textura. A mayor porcentaje, ms aumentar la intensidad de la textura.

Creacin de trazos personalizados Puede crear y guardar trazos personalizados para volver a utilizarlos en el documento actual, y cambiar caractersticas especcas del trazo como la cantidad de tinta o la forma y sensibilidad de la punta. Tambin se pueden utilizar de textura los archivos de mapa de bits que tenga en su sistema o en un CD-ROM. Los siguientes formatos de archivo sirven para texturas: PNG, GIF, JPEG, BMP, TIFF, PICT (slo Macintosh). Para incluir una textura externa en el men emergente Textura y utilizarla en todos los documentos, copie el archivo de textura en la carpeta Fireworks 3\Settings\Textures. Utilice el panel Pincel para aadir una textura a un trazo de pincel. Utilice el men emergente Opciones del panel Trazo para editar los atributos del trazo de pincel y guardar los trazos personalizados. Utilice el cuadro de dilogo Editar trazo para cambiar las caractersticas.
Para abrir el cuadro de dilogo Editar trazo:

Elija Editar trazo en el men emergente Opciones del panel Trazo. El cuadro de dilogo Editar trazo tiene tres paneles tabulados: Opciones, Forma y Sensibilidad. La presentacin preliminar que aparece en la parte inferior de cualquier panel Editar trazo muestra el trazo actual junto con su conguracin. La presentacin preliminar de un trazo que tiembla y cambia a izquierda y derecha proporciona la indicacin de las conguraciones de sensibilidad y presin actuales.

El men emergente Textura muestra una presentacin preliminar de la textura resaltada.

Para aadir textura al trazo de un objeto seleccionado: 1

En el panel Trazo elija una categora del men emergente Categora del trazo y un determinado trazo del men emergente Nombre del trazo. Elija una textura: Eljala del men emergente Textura. Elija Otra en el men emergente Textura para utilizar una externa. Abra un archivo de textura.

Edicin de objetos

77

Para establecer opciones generales de trazo de pincel: 1

Para modificar la punta del pincel: 1

En el panel Opciones, establezca la cantidad de tinta, el espaciado y la velocidad. Los valores altos de velocidad crean trazos que uyen de manera parecida a un aerosol.

En el panel Forma elija una forma de punta: Cuadrada, para obtener una forma redonda, anule la seleccin de Cuadrada.

Escriba valores para el tamao, suavidad de los bordes, aspecto y ngulo del pincel. Haga clic en Aplicar y en Aceptar.

Panel Opciones de Editar trazo

2

Para superponer trazos de pincel para trazos densos, seleccione Concentracin Para establecer la cantidad de textura del trazo escriba un nmero en el cuadro de texto Textura. A nmeros ms altos, ms se ver la textura. Para establecer textura tambin en los bordes, escriba un nmero en el campo Textura de bordes y elija un efecto de borde en el men emergente Efecto de bordes. Escriba en el campo Puntas el nmero de puntas que desea que tenga el pincel. Si va a tener varias puntas, escriba un valor de espaciado en el campo Espaciado entre puntas. Elija el mtodo de variacin de color. Se puede seleccionar Aleatorio, Uniforme, Complementario, Matiz o Sombra. Haga clic en Aplicar para que los cambios tengan efecto en los trazos seleccionados y haga clic en Aceptar.

Fireworks tiene conguraciones de trazo para ajustar con precisin los atributos controlados por la velocidad y la presin si se utiliza una tableta y pluma sensible a la presin Wacom. Puede elegir el atributo de trazo que controlar la pluma.
Para establecer la sensibilidad del trazo: 1

En el panel Sensibilidad elija una propiedad como Tamao, Cantidad de tinta o Saturacin del men emergente Propiedades de trazo.

78

Captulo 5

En las opciones Afectado por, elija el grado en que los datos de sensibilidad afectarn a la propiedad actual del trazo y haga clic en Aceptar.

En el men emergente Opcin elija Suprimir trazo.

Colocacin del trazo en el trazado De manera predeterminada, el trazo de pincel de un objeto aparece centrado en el trazado. No obstante, hay opciones para colocar el trazo del pincel completamente dentro o fuera del trazado. Esto permite controlar el tamao global de los objetos trazados y conseguir efectos creativos, como los trazos en los bordes de botones biselados.

Almacenamiento de configuraciones de trazo Los trazos editados se pueden guardar para utilizarlos en el documento actual u otros.
Para guardar un trazo: 1

En el men emergente Opciones del panel Trazo, elija Guardar trazo como. En el cuadro de dilogo Guardar trazo, escriba un nombre para el trazo y haga clic en Aceptar. Este nombre se aadir al men emergente del trazo para utilizarlo en el documento.

Para volver a utilizar un trazo guardado en otro documento: 1 2

Copie un objeto con el trazo guardado. Pegue el objeto en el otro documento. El trazo guardado se aade al men emergente de nombre del trazo para utilizarlo en otros documentos.

Para cambiar el nombre de un trazo: 1 2 3

Anule la seleccin de todos los objetos. Elija el trazo en el panel Trazo. Elija Cambiar nombre de trazo en el men emergente Opcin. En el men de dilogo Cambiar nombre de trazo, escriba el nombre del trazo o el relleno y haga clic en Aceptar.

Para suprimir un trazo: 1

Trazo centrado, situado en el interior o en el exterior del trazado

Elija el trazo en el panel Trazo.

Edicin de objetos

79

Utilice los botones de colocacin de Trazo en el Inspector de objetos si desea reorientar los trazos de pincel.

El relleno creado tendr el color actual mostrado en la paleta de colores de relleno de la Caja de herramientas.

Para mover un trazo de pincel dentro o fuera del trazado seleccionado: 1

Elija un botn de colocacin en el Inspector de objetos: hacia dentro, centrado o hacia fuera. Opcionalmente, elija Relleno sobre trazo. Por lo general, el trazo se superpone al relleno entre el trazado y el borde interior de dicho trazo. Si elige Relleno sobre trazo, los objetos seleccionados se llenarn hasta los trazados. Al elegir estas opcin, los rellenos opacos pueden oscurecer porciones de los trazos de pincel dentro de los trazados. Los rellenos con un grado de transparencia pueden tintarse o mezclarse con los trazos de pincel incluidos en los trazados.

Utilice el panel Relleno para editar los atributos de un relleno. Edicin de un relleno slido Un relleno slido es sencillamente un color slido que llena el interior de un objeto. El color de un relleno se puede cambiar en la Caja de herramientas, el panel Relleno y en el Mezclador de colores.
Para editar el relleno slido de un objeto seleccionado: 1

Edicin de rellenos
Puede editar rellenos para crear trazados con una variedad de caractersticas de slido, tramado, patrn o degradados, desde colores slidos hasta degradados similares a satn, ondas o bordes doblados. Puede cambiar los distintos atributos de un relleno, como el color, borde, textura y transparencia de un determinado objeto. Los rellenos de degradado personalizados se pueden guardar para utilizarlos en el documento actual o varios otros.

En el panel Relleno elija Slido en el men emergente Categora de relleno. Elija un color en el men emergente de la paleta de colores. El relleno aparece en el objeto seleccionado y se convierte en el color de relleno activo.

80

Captulo 5

Aplicacin de un relleno de degradado Todas las categoras de relleno distintas de Ninguno, Slido, Patrn y Tramado web son rellenos de degradado. Los degradados rellenan con transiciones de color para crear distintos efectos.

Edicin de un relleno de degradado Los rellenos de degradado se pueden editar, guardar, cambiar de nombre o suprimir con el men emergente Opciones del panel Relleno y el cuadro de dilogo Editar degradado.

Cuadro de dilogo Editar degradado

Para abrir el cuadro de dilogo Editar degradado: 1

Seleccione un objeto que tenga un relleno de este tipo o elija un degradado en el men emergente Categora de relleno. Elija Editar degradado en el men emergente Opciones del panel Relleno. Este cuadro de dilogo se abre con el degradado actual en la rampa de colores y la vista previa.

Para aplicar un relleno de degradado a un objeto seleccionado: 1

En el panel Relleno, elija un relleno de degradado en el men emergente Categora de relleno. En el men emergente Nombre del relleno elija una combinacin de colores de relleno, como Rojo, Verde, Azul o Pasteles. El relleno aparecer en el objeto seleccionado, convirtindose en el relleno activo.

Para ajustar la transicin entre los colores del relleno:

Arrastre las muestras de color a la izquierda o la derecha.

Para aadir una nueva muestra de color al degradado:

Haga clic en el rea entre la rampa de colores y la vista previa.

Para suprimir una muestra de color del degradado:

Arrastre la muestra alejndola del cuadro de dilogo Editar degradado.

Edicin de objetos

81

Para cambiar el color de una muestra: 1 2

Haga doble clic en la muestra de color. Elija un color en el men emergente de muestras.

Para cambiar el nombre de un relleno de degradado: 1 2

Seleccione el relleno en el panel Relleno. Elija Cambiar nombre de degradado en el men emergente Opciones. En el cuadro de dilogo Cambiar nombre de degradado escriba el nombre del relleno y haga clic en Aceptar.

Una vez haya terminado de editar el degradado, haga clic en Aceptar en el cuadro de dilogo Editar degradado. El relleno de degradado aparecer en los objetos que haya seleccionado y se convertir en el relleno activo. Almacenamiento y reutilizacin de rellenos de degradado Es posible guardar todos los cambios que haga en las conguraciones de un relleno de degradado. Al guardar un relleno de degradado, se almacena slo para utilizarlo en el documento actual.
Para guardar el relleno de degradado actual: 1

Para suprimir un relleno de degradado guardado: 1 2

Seleccione el relleno en el panel Relleno. Elija Suprimir degradado en el men emergente Opciones.

Aplicacin de un relleno de patrn Adems de los rellenos slidos y de degradado, un objeto de trazado tambin se puede llenar con un grco de mapa bits, que se llamar un relleno de patrn. Fireworks se suministra con ms de una docena de rellenos de patrn, como Alfombra bereber, Hojas de photinia o Ladrillos.

Elija Guardar degradado como en el men emergente Opciones del panel Relleno. En el cuadro de dilogo Guardar degradado, escriba un nombre de relleno y haga clic en Aceptar

Para utilizar un relleno de degradado guardado en otro documento: 1

Copie un objeto que tenga ese relleno guardado. Pguelo en el otro documento.

El relleno guardado se aadir al panel Relleno para poder utilizarlo con el otro documento.

82

Captulo 5

Tambin puede utilizar de relleno de patrn un archivo de mapa de bits que tenga almacenado en su sistema o en un CD-ROM. Los siguientes formatos de archivo se pueden utilizar de patrn: PNG, GIF, JPEG, BMP, TIFF y PICT (slo Macintosh). Si un archivo de patrn es una imagen transparente de 32 bits, esa transparencia tendr efecto en el relleno cuando lo utilice con Fireworks. Si la imagen no es de 32 bits, la transparencia se har opaca. Para incluir un patrn externo en el men emergente Nombre del relleno y utiliz1arlo en todos los documentos, Copie el archivo de patrn en la carpeta Fireworks 3\Settings\Patterns.
Para aplicar un relleno de patrn a un objeto seleccionado: 1

Transformacin y distorsin de rellenos de degradado y de patrn Puede mover, rotar, inclinar y cambiar la anchura del relleno de patrn o degradado de un objeto.

Al seleccionar un objeto con un relleno de este tipo y elegir la herramienta Cubo de pintura, aparece una serie de tiradores sobre o cerca del objeto. Arrastre estos tiradores para ajustar el relleno del objeto.

En el panel Relleno, elija Patrn en el men emergente Categora de relleno. Elija un patrn: Eljalo en el men emergente del nombre de patrn. Elija Otro en este men emergente de nombre si desea utilizar un patrn externo. Navegue a un archivo de patrn. Utilice los tiradores de la herramienta Cubo de pintura para ajustar interactivamente un relleno de patrn o degradado.
Para mover el relleno dentro de un objeto:

El relleno de patrn aparecer en el objeto seleccionado y se convertir en el color de relleno activo.

Nota: Aunque el relleno de patrn est activo y se aplicar a los siguientes objetos que dibuje, no se muestra en la paleta de colores de relleno de la Caja de herramientas, el panel Relleno o el Mezclador de colores.

Arrastre el tirador redondo o haga clic en otra posicin sobre el relleno.

Para girar el relleno:

Arrastre las lneas que unen los tiradores.

Para ajustar la anchura e inclinacin del relleno:

Arrastre un tirador cuadrado. Adicin de textura a un relleno Las texturas modican el brillo de un relleno, aunque no el matiz, y le dan un aspecto menos mecnico y ms orgnico.

Edicin de objetos

83

Puede aadir una textura a cualquier relleno. Fireworks se suministra con varias texturas que se pueden elegir, como Gasa, Mancha de aceite o Papel de lija. Tambin se pueden utilizar como textura los archivos de mapa de bits que tenga en su sistema o en un CD-ROM.

Para aadir una textura al relleno de un objeto seleccionado: 1

En el panel Relleno, elija un tipo del men emergente Categora de relleno. Elija una textura: Eljala del men emergente Textura. Elija Otra en el men emergente Textura para utilizar una externa. Navegue hasta un archivo de textura.

Los siguientes formatos de archivo sirven para texturas: PNG, GIF, JPEG, BMP, TIFF y PICT (slo Macintosh). Para incluir una textura externa en el men emergente Textura y utilizarla en todos los documentos, Copie el archivo de textura en la carpeta Fireworks 3\Settings\Textures. Utilice el panel Relleno para aadir una textura a un relleno.
4

Escriba un porcentaje entre 0 y 100 para controlar la profundidad de la textura. A mayor porcentaje, ms aumentar la intensidad de la textura. Para introducir el nivel de transparencia del relleno, elija Transparente. El porcentaje de Textura tambin controla el grado de transparencia.

Tramados con colores de Websafe Algunas veces ser necesario utilizar colores que no sean Websafe. Por ejemplo, el logotipo de una compaa puede tener un color que no est incluido en la paleta de 216 colores Web.

El men emergente Nombre de la textura muestra una vista previa de la textura que aparece resaltada.

Para obtener un color Websafe lo ms parecido posible que no se virar ni modicar cuando se exporte con la paleta de Websafe, utilice un relleno de tramado web. Tramado web es el mtodo por el que dos colores en la paleta se combinan para obtener otro color lo ms parecido posible que no est en esa paleta. Tramado web puede aumentar el tamao del archivo.

Los rellenos de tramado web se crean con dos colores Websafe.

84

Captulo 5

Para utilizar un relleno de tramado web: 1 2

Seleccione un objeto que contenga un color que no sea Websafe. En el panel Relleno, elija Tramado web como la categora de relleno. El relleno no Websafe del objeto aparecer en la paleta de colores de relleno junto a su tipo. Los colores del tramado de Websafe aparecern en las casillas de las paletas de colores de la parte inferior. El tramado web tambin aparecer en el objeto y se convertir en el color de relleno activo.

Para cambiar el borde del relleno de un objeto seleccionado: 1

En el panel Relleno, elija una opcin en el men emergente Borde: Borde duro, Suavizado, Fundido. Para obtener un borde fundido, elija tambin el nmero de pxeles que se fundirn a cada lado del borde. El nmero predeterminado es 10. Puede elegir un valor de 0 a 100. A valores ms altos, mayor ser el fundido.

Nota: Al denir el borde de un relleno de tramado Web Fundido o Suavizado aparecen colores que no son Websafe. Para crear la ilusin de verdadero relleno transparente en un navegador web:

En el panel Relleno, aplique un relleno de tramado web a un objeto seleccionado. 2 Seleccione Transparente. 3 Exporte el objeto como un archivo GIF o PNG estableciendo Transparencia de ndice o Transparencia alfa. Cuando vea el grco en un navegador web, el fondo de la pgina Web se ver a travs de todos los dems pxeles del relleno de tramado web, creando as el efecto de transparencia.
1

Uso de estilos
Puede guardar y volver a aplicar un conjunto de atributos predenidos de relleno, trazo, efectos o texto y crear un estilo. Los estilos de Fireworks se parecen ms a las mezclas de color en la paleta de un pintor que a los de un procesador de textos. Al aplicar un estilo, el objeto recoge todas las caractersticas del mismo.

Cambio del borde de un relleno En Fireworks, se puede establecer que el borde de un relleno sea una lnea regular slida, o se puede suavizar y fundir ese borde. De forma predeterminada, los bordes estn suavizados. Suavizado alisa los bordes dentados que pueden presentar los objetos redondeados como elipses y crculos, al mezclar sutilmente el borde con el fondo. Fundido, sin embargo, produce una mezcla muy visible a ambos lados del borde. Esto da al borde un efecto de alisado, casi luminoso.

Fireworks tiene muchos estilos predenidos. Puede aadir, cambiar y eliminar los estilos. El CD-ROM de Fireworks y el sitio web de Macromedia tienen muchos estilos predenidos adicionales que se pueden importar en Fireworks. Para obtener ms informacin, consulte Importacin y exportacin de estilos en la pgina 87.

Edicin de objetos

85

Aplicacin y edicin de estilos Utilice el panel Estilos para almacenar y aplicar los estilos a objetos o a texto.

Para aadir un estilo nuevo: 1

Cree un objeto o texto con las conguraciones de trazo, relleno, efectos o texto que desee. Escriba el nombre del estilo con el objeto seleccionado: Haga clic en el botn Nuevo estilo de la parte inferior del panel Estilos. Elija Nuevo estilo en el men emergente Opciones del panel Estilos.

Elija las propiedades que desea que formen parte del estilo y haga clic en Aceptar. Aparecer el icono correspondiente al estilo en el panel Estilos.

Para editar un estilo: 1

Abra el cuadro de dilogo Editar estilos: Haga doble clic en un estilo del panel Estilos. Haga clic en un estilo del panel Estilos y elija Editar estilo en el men emergente Opciones.

Panel Estilos
2

Fireworks no hace un seguimiento de los estilos aplicados a un objeto, por lo que ste no se actualiza al editar el estilo.
Para aplicar un estilo a un objeto o bloque de texto seleccionado:

En el cuadro de dilogo Editar estilo, elija o anule la seleccin de los componentes que desee aplicar.

Para basar un nuevo estilo en otro existente: 1

Aplique el estilo del que va a partir al objeto seleccionado. Edite los atributos del objeto. Guarde los atributos como el nuevo estilo.

Haga clic en un estilo del panel Estilos.

2 3

86

Captulo 5

Para suprimir un estilo: 1

Para exportar estilos: 1

Eljalo en el panel Estilos. Para seleccionar varios estilos y suprimirlos, mantenga presionada la tecla Mays mientras los elige.

Eljalos en el panel Estilos. Para elegir ms de un estilo, mantenga presionada Mays mientras hace clic.

Haga clic en el botn Suprimir estilo del panel Estilos.

Seleccione Exportar estilos en el men emergente Opciones. Escriba un nombre y una ubicacin para el documento que contiene los estilos guardados. Haga clic en Guardar.

4 Nota: Una vez suprimido un estilo que haya creado, no podr recuperarlo. Si suprime alguno de los estilos suministrados con Fireworks, puede recuperarlo con el comando Restablecer estilos del men emergente Opciones. Sin embargo, al restablecer los estilos tambin se suprimen los estilos personalizados. Para restablecer los estilos predeterminados en el panel Estilos:

Para importar estilos: 1

Elija Importar estilos en el men emergente Opciones. Elija un documento con estilos guardados para importarlo. Todos los estilos en el documento se importan y colocan directamente despus del estilo actualmente seleccionado en el panel Estilos.

Seleccione Restablecer estilos en el men emergente Opciones.

Para aumentar el tamao de los iconos de presentacin preliminar de estilos:

En el men emergente Opciones, seleccione Iconos grandes.

Para volver a los iconos pequeos:

Transformacin y distorsin de objetos

Puede escalar, rotar, reejar, distorsionar o inclinar un objeto o un grupo con las herramientas Transformar y los comandos de men. Tambin puede transformar texto, imgenes de mapa de bits, zonas interactivas y divisiones.

Seleccione la opcin Iconos grandes otra vez. Importacin y exportacin de estilos El CD-ROM de Fireworks y el sitio web de Macromedia tienen muchos estilos predenidos ms que pueden importarse en Fireworks. Puede exportar los estilos y compartirlos con otros usuarios de Fireworks, o importarlos de otros documentos de Fireworks.

Herramientas Transformar

Edicin de objetos

87

Al elegir un comando de men o una herramienta Transformar se muestran los tiradores de transformacin. Estos tiradores enmarcan completamente los objetos seleccionados.
Tiradores de transformacin

Para editar los objetos seleccionados en el espacio de trabajo con los tiradores de transformacin: 1

Elija una herramienta Transformar. A medida que mueve el puntero, cambia para indicar la actividad disponible.

2 Punto de centrado

Arrastre para transformar los objetos.

Escalado de objetos Al escalar un objeto se amplia o reduce horizontal, verticalmente o en ambos sentidos. Un objeto se puede escalar arrastrndolo.
Para escalar un objeto seleccionado: 1

Objeto original

Muestre los tiradores de transformacin: Elija la herramienta Transformar escala.

Rotado y escalado
2

Elija Modicar > Transformar > Escala. Arrastre los tiradores de transformacin: Para escalar el objeto tanto horizontal como verticalmente, arrastre uno de los tiradores de esquina. Las proporciones se modican a medida que se escalan. Para escalar el objeto horizontal o verticalmente, arrastre un tirador central.

Inclinado y distorsionado

Reejado verticalmente y horizontalmente

88

Captulo 5

Rotacin de objetos Los objetos que rotan lo hacen sobre su punto central. Un objeto se puede rotar arrastrando sus tiradores de transformacin o eligiendo un ngulo preestablecido.
Para rotar un objeto seleccionado 90 o 180 grados:

Reflejo de objetos Puede reejar un objeto sobre su eje vertical u horizontal sin cambiar su posicin relativa.
Para reflejar un objeto seleccionado:

Elija Modicar > Transformar > Reejar horizontalmente o Reejar verticalmente. Inclinacin de objetos La inclinacin transforma un objeto tumbndolo a lo largo del eje horizontal, vertical o ambos. Un objeto se puede inclinar arrastrndolo.
Para inclinar un objeto seleccionado: 1

Elija Modicar > Transformar y seleccione el comando Rotacin en el submen.

Para rotar un objeto seleccionado arrastrndolo: 1

Elija cualquiera de las herramientas Transformar.

Muestre los tiradores de transformacin: Elija la herramienta Transformar inclinacin

Mueva el puntero fuera del objeto hasta que aparezca el cursor de rotacin.
2

Elija Modicar > Transformar > Inclinar. Arrastre un tirador para distorsionar el objeto.

Para lograr la ilusin de perspectiva:

Arrastre un punto de esquina.

Arrastre para rotar el objeto.

Para restringir la rotacin:

Mantenga presionada Mays y mueva el puntero detrs de los tiradores.

Para cambiar de lugar el eje de rotacin:

Arrastre el punto central alejndolo del centro de los tiradores.

Para restablecer el eje de rotacin:

Haga doble clic en el punto central.

Edicin de objetos

89

Distorsin de objetos Al distorsionar un objeto, se mueven sus lados o esquinas en la direccin en que se arrastre la herramienta Distorsin.
Para distorsionar un objeto seleccionado: 1

Para transformar el relleno, trazo y efecto junto con el objeto:

Elija Atributos de escala en el cuadro de dilogo Transformacin numrica.

Nota: Si anula la seleccin de Atributos de escala, los atributos de trazo, relleno y efecto no cambiarn de tamao, ya que Fireworks slo escala el trazado.

Muestre los tiradores de transformacin: Elija la herramienta Transformar distorsin.

Organizacin de objetos
A medida que un documento se haga ms complejo, podr organizar sus objetos: Elija Modicar > Transformar > Distorsionar.
2

Arrastre un tirador para distorsionar el objeto.

Situar objetos detrs o delante de otros. La manera de organizar los objetos se denomina orden de apilamiento. Agrupe objetos individuales. Cree y ordene capas. Oculte o muestre objetos y capas. Organizacin de objetos Fireworks apila los objetos en una capa basndose en el orden en que se crearon, situando los ms recientes al principio del apilamiento. El orden de apilamiento determina la manera en que aparecen los objetos al superponerlos. Para cambiar el orden de apilamiento de los objetos, utilice los comandos Organizar. Si los objetos no se superponan, no observar el cambio en el orden de apilamiento.
Para situar un objeto en la pila: 1

Transformaciones numricas En vez de arrastrar para escalar, cambiar el tamao o rotar un objeto, puede transformarlo utilizando valores especcos.
Para escalar o rotar objetos seleccionados en medidas especficas: 1

Elija Modicar > Transformar > Transformacin numrica. Se abre el cuadro de dilogo Transformacin numrica.

En el men emergente, elija el tipo de transformacin que va a realizar en la seleccin actual. Escriba valores numricos para transformar la seleccin y haga clic en Aceptar.

Para mantener las proporciones horizontales y verticales de un objeto al escalarlo o cambiarlo de tamao:

Seleccione el objeto. Cambie el orden de apilamiento: Elija Modicar > Organizar > Traer al frente o Enviar al fondo para situar el objeto en primer plano o en el fondo.

Elija Restringir las proporciones en el cuadro de dilogo Transformacin numrica.

90

Captulo 5

Elija Modicar > Organizar > Traer hacia adelante o Enviar hacia atrs para situar el objeto una posicin hacia arriba o hacia a bajo en el orden apilamiento.
Para seleccionar un objeto detrs de otro: 1

Agrupacin de objetos Agrupe dos o ms objetos si desea jar su posicin y orden de apilamiento relativos. Los objetos dentro de un grupo se pueden manipular. Los objetos conservan sus caractersticas individuales, a menos que se modique el grupo entero.

Elija la herramienta Seleccionar detrs.

Haga clic en el objeto delante del que desea seleccionar. Siga haciendo clic hasta que haya seleccionado el objeto que desee. Agrupacin de objetos seleccionados como un nico objeto.
Para agrupar dos o ms objetos seleccionados:

Ocultar y mostrar objetos Los objetos se pueden ocultar temporalmente y volver a mostrarse ms adelante. Los objetos ocultos no se exportarn.
Para ocultar de la vista los objetos seleccionados:

Elija Modicar > Agrupar.

Para desagrupar un grupo seleccionado:

Elija Ver > Ocultar seleccin. Este comando no oculta las guas.
Nota: Al cerrar y volver a abrir un documento, los objetos ocultos siguen permaneciendo ocultos. Para mostrar todos los objetos, incluyendo los ocultos:

Elija Modicar > Desagrupar. Seleccin de objetos agrupados Para trabajar con objetos individuales de un grupo, desagrpelos o utilice la herramienta Seleccionar en nivel inferior para elegir slo aquellos que desee modicar.

Elija Ver > Mostrar todo.

Herramienta Seleccionar en nivel inferior

Edicin de objetos

91

Si se modican los atributos de un objeto de nivel inferior, los cambios afectan solamente al objeto seleccionado y no a todo el grupo. Si mueve un objeto seleccionado en el nivel inferior a otra capa, el objeto ser suprimido del grupo original.

Cada objeto de un documento reside en una capa. Puede crear todas las capas antes de comenzar a dibujar o ir aadindolas cuando sea necesario. Tambin puede reorganizar el orden de apilamiento de las capas o de los objetos de una sola capa.

Seleccin en nivel inferior de un objeto incluido en un grupo.

Para seleccionar un objeto en un grupo: 1

Nota: El lienzo est situado debajo de todas las capas, aunque no es una capa propiamente dicha. Para obtener informacin adicional sobre cmo trabajar con el lienzo, consulte Cambio del tamao, el color y la resolucin del documento en la pgina 48.

Elija la herramienta Seleccionar en nivel inferior. Haga clic en el objeto.

El panel Capas muestra el estado actual de todas las capas del fotograma actual de un documento. El nombre de la capa activa aparece resaltado.

Para seleccionar un grupo que contiene el objeto seleccionado:

Elija Editar > Seleccionar nivel superior.

Para seleccionar en el nivel inferior todos los objetos de un grupo: 1 2

Seleccione el grupo. Elija Editar > Seleccionar en nivel inferior. Se seleccionar individualmente cada uno de los objetos del grupo. Para anular la seleccin de alguno, mantenga presionada Mays y haga clic en ese objeto. Panel Capas Si desea que los objetos en todas las capas menos la activa estn protegidos de cambios o selecciones inadvertidas, utilice Editar slo una capa. Si est activado Editar slo una capa, slo se pueden seleccionar los objetos de la capa actual.

Creacin y organizacin de capas Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustracin que se dibujan en distintas hojas superpuestas transparentes.

92

Captulo 5

Para aadir una capa:

Para mover una capa:

Seleccione Nueva capa en el men emergente Opciones del panel Capas. Haga clic en el botn Nueva capa. Elija Insertar > Capa.
Para activar una capa:

Desplace el nombre de una capa hacia arriba o hacia abajo en el panel Capas. Al mover una capa, cambia su orden de apilamiento. En un documento, Fireworks apila las capas basndose en el orden en que se crearon, colocando la ms reciente al principio del apilamiento. El orden de apilamiento determina la manera en que los objetos de una capa se superponen a los de otras.
Para mostrar u ocultar una capa:

Haga clic en el nombre de la capa en el panel Capas. Seleccione un objeto en esa capa. Los objetos que dibuje, importe o pegue residirn inicialmente en la capa activa.
Para nombrar una capa: 1

Haga clic en el cuadrado situado en la primera columna a la izquierda del nombre de la capa. El icono de ojo indica que la capa es visible.
Nota: Las capas ocultas no se exportan. Para bloquear una capa:

Haga doble clic en el nombre de una capa en el panel Capas. Se abre el cuadro de dilogo Opciones de capa. En el cuadro de texto Nombre, escriba el nuevo nombre de la capa y haga clic en Aceptar.

Haga clic en el cuadrado situado en la segunda columna a la izquierda del nombre de la capa. Un candado indica que la capa est bloqueada. Los objetos de una capa bloqueada no se pueden editar.
Para duplicar una capa:

Para suprimir una capa:

Arrstrela al botn Suprimir capa. Seleccione una capa y haga clic en el botn Suprimir capa. Seleccione una capa y elija Suprimir capa en el men emergente Opciones del panel Capas.

Arrastre una capa al botn Nueva capa. Seleccione una capa y elija Duplicar capa en el men emergente Opciones del panel Capas.
Para mover los objetos seleccionados a otra capa:

Arrastre el cuadrado azul a la capa que desee.

Edicin de objetos

93

Para copiar objetos seleccionados en otra capa:

Smbolos e instancias
Utilice smbolos e instancias para simplicar las animaciones de Fireworks y facilitar el trabajo de edicin. Las instancias son representaciones de un objeto Fireworks original, que recibe el nombre de smbolo. Cuando se modica el objeto smbolo (original), las instancias (copia) cambian automticamente para reejar las modicaciones efectuadas en el smbolo. Puede utilizar smbolos e instancias para modicar fcilmente ilustraciones complejas que contienen varias copias de objetos, compartir componentes a travs de estados de rollover y crear y modicar animaciones rpidamente Los smbolos se almacenan en el panel Biblioteca.

Mantenga presionada Alt (Windows) u Opcin (Macintosh) y arrastre el cuadrado azul a la capa deseada.

Para compartir una capa entre varios fotogramas:

Haga doble clic en una capa, y en el cuadro de dilogo Opciones de capa elija Compartir en fotogramas. Seleccione la capa que desea compartir, y elija Compartir capa en el men emergente Opciones del panel Capas.
Nota: Si una capa se comparte en todos los fotogramas, al actualizar un objeto en esa capa, se actualizar en todos los fotogramas. Para activar y desactivar Editar slo una capa:

En el men emergente Opciones del panel Capas, elija Editar slo una capa. Aparece una marca de vericacin en el comando cuando se activa esta opcin. Deseleccione Editar slo una capa para desactivar la opcin. La capa Web La capa Web es una capa especial que aparece inicialmente en la parte superior de todos los documentos nuevos. Contiene objetos web que se utilizan para proporcionar interactividad a los documentos Fireworks exportados. La capa web se puede mover en el panel Capas, pero no se puede suprimir. Asimismo, la capa web es compartida por todos los fotogramas. El panel Biblioteca puede guardar tanto smbolos grcos como de botn. Para obtener informacin sobre cmo mezclar dos o ms instancias de un mismo smbolo, consulte Interpolacin de instancias en la pgina 213. Creacin de un smbolo Se puede crear un smbolo a partir de cualquier objeto, texto o grupo. Los smbolos pueden incluir otros smbolos

94

Captulo 5

Para crear un nuevo smbolo: 1

Modificacin de un smbolo Puede modicar los smbolos en el editor de smbolo para cambiar automticamente todas las instancias asociadas.
Para abrir el editor de smbolo:

2 3

Elija Insertar > Smbolo nuevo. Se abre el cuadro de dilogo Propiedades de smbolo. En el cuadro de texto Nombre, escriba el nombre del smbolo. Elija un tipo de smbolo, Grco o Botn, y haga clic en Aceptar. Se abre el editor de smbolo o el editor de botn. Cree el objeto que va a utilizarse como smbolo y cierre el editor. El smbolo aparecer en la biblioteca y en el documento.

Para convertir uno o ms objetos seleccionados en un smbolo: 1

Haga doble clic en una instancia del smbolo. Haga doble clic en el objeto de smbolo en la ventana de vista previa del panel Biblioteca. En este panel, seleccione un nombre y elija Editar smbolo en el men emergente Opciones. Haga doble clic en el nombre del smbolo en el panel Biblioteca. Se abre el cuadro de dilogo Propiedades de smbolo. Haga clic en Editar.
Para editar un smbolo: 1 2

2 3

Elija Insertar > Convertir en smbolo. Se abre el cuadro de dilogo Propiedades de smbolo. En el cuadro de texto Nombre, escriba el nombre del smbolo. Elija un tipo de smbolo, Grco o Botn, y haga clic en Aceptar. El objeto seleccionado se convierte en un smbolo, que aparece en la biblioteca.

Haga doble clic en una instancia para abrir el editor de smbolo. Realice las modicaciones y cierre la ventana. Todas las instancias del smbolo se modicarn para reejar los cambios.

Para duplicar un smbolo: 1 2

Ubicacin de instancias Es posible aadir una o ms instancias de un smbolo al documento actual. Para situar una instancia. arrastre un smbolo del panel Biblioteca al documento actual.

En el panel Biblioteca, seleccione el smbolo. En el men emergente Opciones, elija Duplicado.

Para suprimir un smbolo: 1 2 3

En el panel Biblioteca, seleccione un smbolo. Elija Suprimir en el men emergente Opciones del panel Biblioteca. Haga clic en Suprimir. Se suprimir el smbolo y todas sus instancias.

Para seleccionar todos los smbolos en la biblioteca que an no se hayan utilizado en el documento actual:

Un icono de echa representa una instancia.

Elija Seleccionar elementos no utilizados en el men emergente Opciones del panel Biblioteca.

Edicin de objetos

95

Separacin de una instancia de su smbolo Normalmente, al modicar una instancia se modica el smbolo y las dems instancias. Sin embargo, se puede modicar una instancia sin que tenga efecto en el smbolo u otras instancias, separando su vnculo con el smbolo.
Para separar una instancia de un smbolo: 1 2

Para exportar smbolos: 1

En el men emergente Opciones del panel Biblioteca, elija Exportar smbolos. Se abre el cuadro de dilogo Exportar smbolos.

Seleccione los smbolos que desee exportar y haga clic en Exportar. Se abre el cuadro de dilogo Guardar como. Navegue a una carpeta, escriba un nombre para el archivo de smbolo y haga clic en Guardar. Fireworks guarda el smbolo en un archivo PNG.

En el documento, seleccione la instancia. Elija Modicar > Smbolo > Romper vnculo. La instancia pasa a ser un grupo. El smbolo en el panel Biblioteca deja de estar asociado a ese grupo.

Para importar smbolos con arrastrar y soltar o con copiar y pegar:

Exportacin, importacin y actualizacin de smbolos Puede exportar smbolos y utilizarlos en documentos de Fireworks, o importarlos de otros documentos. Si cambia un smbolo en el documento original, podr actualizar los cambios en todos los documentos en que lo haya importado. Por ejemplo, supongamos que ha creado un smbolo para el logotipo de una compaa en un archivo maestro. Despus, puede importar el smbolo del logotipo en varios documentos distintos. Si el logotipo cambia, puede modicarlo en el archivo maestro y actualizarlo en todos los archivos en que lo haya importado. Tambin puede romper automticamente el vnculo entre el smbolo importado y el documento original al editar el smbolo en el documento actual. Esto permitir editar un smbolo importado independientemente del smbolo original.

Arrastre y suelte un smbolo en el documento actual. Pegue un smbolo en el documento actual.

Para importar smbolos con el panel Biblioteca: 1

En el men emergente Opciones del panel Biblioteca, elija Importar smbolos. Aparece el cuadro de dilogo Abrir. Navegue a la carpeta que contiene el archivo de smbolo, elija un archivo y haga clic en Abrir. Se abre el cuadro de dilogo Importar smbolos.

Seleccione smbolos que importar y haga clic en Importar.

96

Captulo 5

Los smbolos importados aparecen en el panel Biblioteca con la palabra importado junto al tipo de archivo.

Para actualizar un smbolo importado de otro documento: 1

En el documento original, modique el smbolo y guarde el archivo. En el documento en que import el smbolo, seleccinelo en el panel Biblioteca. Elija Actualizar en el men emergente Opciones del panel Biblioteca.

Edicin de objetos

97

98

Captulo 5

CAPTULO 6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Color y transparencia

Fireworks le permite un amplio conjunto de opciones a la hora de elegir colores para un grco. Puede utilizar las muestras de colores predeterminados para ayudarle a mantener el aspecto de un grco en distintos navegadores web y plataformas a medida que trabaja. O tambin puede utilizar las muestras de color de los sistemas Windows o Macintosh. Puede crear sus propios colores y grupos de muestras, adems de aadir o quitar muestras a cualquiera de los grupos. Puede mezclar sus propios colores utilizando cualquiera de los modelos de color Hexadecimal, RVA, CMA, MSB o Escala de grises. Tambin puede ver los componentes de un color en un documento expresados en estos tres modelos. Al realizar la exportacin, puede designar que el color del lienzo u otro color del grco sean transparentes, de manera que sea visible el fondo de una pgina web. Tambin puede utilizar colores para solucionar problemas como los halos que aparecen alrededor de los grcos web. Para ms informacin sobre la optimizacin de colores para exportarlos con la Tabla de color, consulte Optimizacin de paletas de colores en la pgina 160.

99

Eleccin de colores al dibujar

Si desea elegir un nuevo color a medida que va creando un grco, utilice el panel Muestras. El panel Muestras contiene muestras de color que se pueden elegir mientras se dibuja.

Para abrir un men emergente de paleta de colores:

Haga clic en la echa junto a la paleta de colores.

Aplicacin de colores en el panel Muestras Puede utilizar el panel Muestras para aplicar colores al trazo o al relleno de los objetos de trazado. Panel Muestras
Para abrir el panel Muestras: Para aplicar un color a un objeto seleccionado: 1

Haga clic en cualquier paleta de colores del atributo correspondiente para activarlo. Elija un color: En el panel Muestras, haga clic en una muestra para aplicar ese color al trazo o el relleno del objeto seleccionado, y asignarlo a la paleta de colores activa. Abra el men emergente de la paleta de colores y haga clic en una muestra.

Elija Ventana > Muestras. Los colores en el panel Muestras tambin aparecen en los mens emergentes de paleta de colores de los paneles Trazo y Relleno, el Mezclador de colores y la Caja de herramientas.

Aplicacin de colores del men emergente de paleta de colores Paletas de colores en la Caja de herramientas Puede utilizar el men emergente de la paleta de colores para aplicar colores al trazo o el relleno de objetos de trazado.
Para aplicar un color a un objeto seleccionado:

Elija una muestra de color del men emergente de la paleta de colores de trazo o relleno. Escriba el nmero hexadecimal de un color en el cuadro de texto de valor del men emergente de paleta de colores de trazo o relleno.

Muestras emergentes de paleta de colores

100

Captulo 6

Aplicacin de colores desde cualquier lugar en pantalla Utilice el botn Cuentagotas de uno de los mens emergentes de paleta de colores para llevar un color desde cualquier parte de la pantalla, incluso un documento de Fireworks, y aplicarlo a los objetos seleccionados.

Personalizacin del panel Muestras

Puede aadir, suprimir, reemplazar y clasicar las muestras de color del panel Muestras. Estos cambios se actualizarn en los mens emergentes de paleta de colores.

Botn Cuentagotas
Para aplicar un color desde cualquier lugar de la pantalla a un objeto seleccionado: 1

Abra el men emergente de la paleta de colores de trazo, relleno o efecto. Haga clic en el botn Cuentagotas en el men emergente de paleta de colores. El puntero cambia a un cuentagotas. Elija un color: En Windows, mantenga presionado el botn del ratn, arrastre el cuentagotas a la parte de la pantalla que desee y sultelo. En un Macintosh, haga clic en cualquier parte de la pantalla. El color se aplicar al objeto seleccionado.

Tambin puede aadir y suprimir grupos completos de muestras. Para obtener ms informacin, consulte Cambio de grupo de muestras en la pgina 102.
Nota: Al seleccionar Edicin > Deshacer, la operacin de adicin o eliminacin de muestras no se cancela. Para aadir un color de un documento de Fireworks al panel Muestras: 1

Elija la herramienta Cuentagotas de la Caja de herramientas.

Nota: Para restringir ese color a Websafe, mantenga presionada la tecla Mays.

Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y haga clic en el color que desee aadir.

Para aadir un color desde cualquier lugar de la pantalla al panel Muestras: 1

Haga clic en el botn Cuentagotas del men emergente de la paleta de colores de trazo o relleno.

Haga clic en cualquier lugar de la pantalla para elegir un color. Puede tambin seleccionar el color de otro documento de Fireworks.

Color y transparencia

101

En el panel Muestras, mueva el puntero al espacio abierto detrs de la ltima muestra. El puntero adopta la forma de un cubo de pintura.

Cambio de grupo de muestras

Algunas veces querr utilizar un grupo de muestras distinto o crear uno propio. Fireworks permite elegir de entre los siguientes grupos de muestras: Paleta web 216, Colores de sistema de Macintosh, Colores de sistema de Windows, Escala de grises y Grupos de muestras personalizados que se importan de archivos ACT o GIF. Utilice el panel Muestras para elegir un grupo de muestras.

Haga clic para aadir la muestra.

Para reemplazar una muestra por otro color: 1

Haga clic en un color con el cuentagotas. Este color se aplica al objeto seleccionado y se convierte en el color de trazo o relleno activo.

Mantenga presionada Mays y apunte a una muestra del panel Muestras. El puntero adopta la forma de un cubo de pintura.

Haga clic en la muestra para reemplazarla por el nuevo color.

Para suprimir una muestra del panel Muestras: 1

Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y apunte a una muestra. El puntero adopta la forma de unas tijeras. Men emergente Opciones del panel Muestras
Para elegir un grupo de muestras:

Haga clic en la muestra para suprimirla del panel Muestras.

Para borrar todo el panel Muestras:

Elija un grupo de muestras en el men emergente Opciones del panel Muestras.

Para elegir un grupo de muestras personalizado: 1

Elija Borrar muestras en el men emergente Opciones del panel Muestras.

Para volver a las muestras de color predeterminadas:

2 3

Elija la Paleta web 216 en el men emergente Opciones del panel Muestras.
Para ordenar las muestras por color:

Elija Reemplazar muestras en el men emergente Opciones del panel Muestras. Aparece el cuadro de dilogo Abrir. Navegue a la carpeta y elija un archivo. Haga clic en Abrir. Las muestras de color en el grupo de muestras personalizado reemplazarn a las que haba previamente.

Elija Ordenar por colores en el men emergente Opciones del panel Muestras.

Nota: Para obtener informacin sobre la creacin de grupos de muestras personalizados, consulte Almacenamiento de paletas en la pgina 164.

102

Captulo 6

Para anexar un grupo a las muestras actuales del panel Muestras: 1

Elija Aadir muestras en el men emergente Opciones del panel Muestras. Aparece el cuadro de dilogo Abrir. Navegue a la carpeta, elija un archivo de grupo de muestras y haga clic en Aceptar. Fireworks puede aadir muestras desde dos tipos de archivo: Archivos ACT de Photoshop o archivos GIF. Las muestras nuevas se anexan a continuacin de las muestras actuales.

De manera predeterminada, el Mezclador de colores identica los colores segn el sistema RVA hexadecimal, presentando los valores de los componentes de rojo (R), verde (V) y azul (A) de un color. Los valores RVA se calculan a partir de un rango comprendido entre 00 y FF.
Seleccione Para expresar componentes de color como Valores de rojo, verde y azul, donde cada componente puede tener un valor comprendido entre 0 y 255. 0-0-0 corresponde al color negro y 255-255-255 al blanco. -Valores de rojo, verde y azul, donde cada componente puede tener un valor hexadecimal comprendido entre 00 y FF. 00-0000 corresponde al color negro y -FFFFFF al color blanco. Valores de matiz, saturacin y brillo, donde Matiz tiene un valor comprendido entre 0 y 360 grados y Saturacin y Brillo un porcentaje comprendido entre 0 y 100. Valores de cian, magenta y amarillo, donde cada componente tiene un valor comprendido entre 0 y 255. 0-0-0 corresponde al color blanco y 255-255-255 al negro.

RVA

Para guardar un grupo de muestras de color personalizado: 1

Elija Guardar muestras en el men emergente Opciones del panel Muestras. Se abre el cuadro de dilogo Guardar como. Asigne un nombre al nuevo grupo de muestras y haga clic en Guardar.

Hexadecimal

MSB

Creacin de colores
Cree sus propios colores y aplquelos a los objetos, adalos al panel Muestras, o utilcelos para formar un nuevo grupo de muestras. Creacin de color en el Mezclador de colores Utilice el Mezclador de colores para leer los valores del color activo y crear otros nuevos.
CMA

Escala de grises Un porcentaje del color negro. El componente Negro (N) tiene un valor comprendido entre el 0 y el 100%, donde 0 representa el color blanco y 100 el color negro. Entre estos dos valores se encuentran sombras de gris.

Se pueden elegir otros modelos de color en el men emergente Opciones del Mezclador de colores. El valor de cada componente del color actual cambia en cada modelo de color. Mezclador de colores Puede crear sus propios colores utilizando cualquiera de los siguientes modelos: RVA, Hexadecimal, CMA, MSB y Escala de grises.
Para desplazarse por los modelos en la barra de color:

En el Mezclador de colores, mantenga presionada Mays y haga clic en la barra de color de la parte inferior del mezclador de colores.

Color y transparencia

103

Las opciones del Mezclador de colores no cambian.

Nota: Cuando aparece la barra de color del modelo Hexadecimal, los posibles colores se limitan a los de la paleta web 216. Para aplicar un color de la barra al objeto seleccionado: 1

Para mostrar el selector de colores del sistema:

Haga doble clic en una paleta de colores. Haga clic en el botn del selector de colores del sistema en el men emergente de muestras de la paleta de colores.

2 3

En el Mezclador de colores, haga clic en la paleta de colores de trazo o relleno para que sea la paleta activa. Mueva el puntero sobre la barra de color. El puntero se convierte en un cuentagotas. Haga clic para seleccionar un color. El color se aplica al objeto seleccionado y se convierte en el color de trazo o de relleno activo.

Visualizacin de informacin sobre colores Puede informacin de colores en el panel Informacin y en el Mezclador de colores. El panel Informacin muestra los valores componentes del color en la posicin actual del puntero. El Mezclador de colores presenta valores RVA.

Para crear un color en el Mezclador de colores:

Para proteger de modicaciones inadvertidas los objetos al mezclar los colores, anule la seleccin de todos los objetos antes de realizar una mezcla. 2 Haga clic en la paleta de colores de trazo o de relleno para convertirla en el destino del nuevo color. 3 Elija un modelo de color en el men emergente Opciones del Mezclador de colores. 4 Especique los valores componentes del color: Escriba valores en los cuadros de texto de componentes de color. Utilice los deslizadores emergentes. Seleccione un color en la barra de color. Puede aadirlo al panel Muestras para volver a utilizarlo.
1

Para mostrar informacin del color de los dems modelos:

Elija otro modelo de color en el men emergente Opciones del panel Informacin.
Para ver la informacin de un color en el Mezclador de colores: 1

En el Mezclador de colores, elija el men emergente de la paleta de colores de trazo o relleno. En el men emergente de la paleta de colores, haga clic en el botn Cuentagotas.

Creacin de colores con el selector de colores del sistema Puede crear colores utilizando el cuadro de dilogo Colores de Windows (Windows) o el Selector de colores de Apple (Macintosh). Las opciones del selector de colores del sistema anularn las del Mezclador de colores y el panel Muestras.

El puntero cambia a un cuentagotas.

104

Captulo 6

Haga doble clic en un objeto que contiene el color que desea ver. La paleta de colores activa muestra el color, el Mezclador muestra sus valores componentes y el color se aplicar a los objetos seleccionados.

Nota: El establecimiento de colores como transparentes no afecta a la imagen original, sino nicamente a la versin exportada de la misma. Puede ver el aspecto que tendr la imagen exportada en la ventana Presentacin preliminar. Para obtener ms informacin sobre la exportacin, consulte Optimizacin y presentacin preliminar durante la exportacin en la pgina 167.

Asignacin de transparencia
Puede hacer que el color del lienzo y otros colores en un archivo aparezcan transparentes si los ha exportado como PNG o GIF. De esta manera, la imagen o el color de fondo de una pgina web se ver a travs de una porcin de un grco. Esto puede hacer que el grco parezca formar parte de la pgina web, en vez de situarse encima. En Fireworks, un tablero a cuadros grises y blancos indica las reas transparentes en las ventanas Original como Presentacin preliminar. Tambin puede establecerse que el color del lienzo sea transparente. Para obtener ms informacin, consulte Cambio del tamao, el color y la resolucin del documento en la pgina 48. Utilice los botones del cuentagotas Transparencia en el panel Optimizar para hacer que el color aparezca transparente al visualizarlo en un navegador web.
Para seleccionar un color y hacerlo transparente: 1

Haga clic en Presentacin preliminar, 2-arriba o 4-arriba. En 2-arriba o 4-arriba, haga clic en una vista que no sea la original. En el panel Optimizar, elija Transparencia de ndice en el men emergente Transparencia de la parte inferior del panel. El color del lienzo se volver transparente en la presentacin preliminar. Para elegir un color distinto, haga clic en el botn Establecer del men emergente Transparencia.

El puntero cambia a un cuentagotas. 4 Elija un color para hacerlo transparente. Haga clic en una muestra de color del panel Tabla de colores. Haga clic en un color del documento. Para obtener ms informacin sobre la ventana de presentacin preliminar, el panel Optimizar y el panel Tabla de colores, consulte Optimizacin y presentacin preliminar durante la exportacin en la pgina 167.

Color y transparencia

105

Para aadir colores a la transparencia: 1

Haga clic en Presentacin preliminar, 2-arriba o 4-arriba. En 2-arriba o 4-arriba, haga clic en una vista que no sea la original. En el panel Optimizar, haga clic en el botn Aadir a transparencia.

Suavizado para que coincida el color de fondo del resultado

El suavizado hace que un objeto aparezca ms difuminado, al mezclar su color con el color del lienzo. Por ejemplo, si el objeto es negro y el lienzo es blanco, el suavizado aadir varios tonos de gris a los pxeles que rodean el borde del objeto para obtener una suave transicin del negro al blanco. Para no crear halos, haga que el color del lienzo coincida con el color del fondo de la pgina Web de resultado, suavice el objeto respecto al lienzo, y despus haga que el lienzo sea transparente. Si desea suavizar un grco para exportarlo varias veces con fondos de distinto color, utilice el men emergente Mate en el panel Optimizar. Esto es muy til si el grco va a aparecer en pginas web que tengan fondos distintos.
Para cambiar los colores de suavizado y hacer que coincidan con el color de fondo de resultado:

El puntero cambia a un cuentagotas.

3

Elija otro color para hacerlo transparente. Haga clic en una muestra de color del panel Tabla de colores. Haga clic en un color de la presentacin preliminar.

Para eliminar colores de la transparencia: 1

Haga clic en Presentacin preliminar, 2-arriba o 4-arriba. En 2-arriba o 4-arriba, haga clic en una vista que no sea la original. Haga clic en el botn Eliminar de transparencia

En el panel Optimizar, seleccione un color del men emergente Mate. Intente que coincida lo ms posible con el del fondo de la pgina web.

Elija el color que va a eliminar de la transparencia: Haga clic en una muestra de color del panel Tabla de colores. Haga clic en un color de la presentacin preliminar.

Eliminacin de halos de grficos de web

Al visualizar un grco suavizado con un lienzo transparente en un navegador web, a veces aparece un anillo o halo descoloreado de pxeles alrededor de los bordes del grco. Al hacer que el color del lienzo sea transparente, los pxeles del suavizado no se modican. Si coloca un grco en una pgina web que tiene el fondo de un color distinto al color de suavizado, es posible que se vean los pxeles del permetro del objeto suavizado sobre el fondo de la pgina web. Estos pxeles formarn un halo, muy visible en los fondos oscuros.

106

Captulo 6

En los archivos de Fireworks o en archivos importados de Photoshop, estos halos se pueden suprimir haciendo que el color del lienzo coincida con el color del fondo de la pgina web. Debe eliminar el halo de los archivos GIF de los que no disponga de archivo original, y en los archivos importados de imagen suavizada respecto a un color de ndice (generalmente un color de lienzo transparente). Para suprimir el halo, haga que los colores de suavizado ms claros sean transparentes con el panel Optimizar.

En el panel Optimizar, haga clic en el botn Aadir a transparencia.

El puntero cambia a un cuentagotas.

4

Haga clic en los pxeles descoloreados que forman el halo para convertirlos en transparentes.

Panel Optimizar Utilice Transparencia de ndice y retire manualmente los colores del halo con los botones Cuentagotas del panel Optimizar.
Para suprimir el halo de un grfico: 1

Haga clic en Presentacin preliminar, 2-arriba o 4-arriba. En 2-arriba o 4-arriba, haga clic en una vista que no sea la original. El panel Optimizar mostrar la Transparencia de ndice en el men emergente de transparencia.

Elija la herramienta Aumentar y reducir, y ample hasta que pueda distinguir los pxeles que rodean los bordes de los objetos en el grco.

Color y transparencia

107

108

Captulo 6

CAPTULO 7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Uso de texto

Fireworks tiene numerosas funciones de texto que suelen reservarse para las aplicaciones de edicin de sobremesa ms sosticadas. Puede crear caracteres en una gran variedad de fuentes y tamaos, ajustando su acercamiento, espaciado, color, interlineado, lnea de base y ms caractersticas. La combinacin de las funciones de edicin de texto de Fireworks con la amplia variedad posible de trazos, rellenos, efectos y estilos har que los textos sean un elemento vivo de sus diseos grcos. La capacidad de editar el texto en cualquier momentoincluso despus de aplicar efectos automticos como sombras o biselessignica que pueden corregirse fcilmente los errores ortogrcos, adems de copiar objetos con texto y cambiar el texto en cada copia. El texto vertical, el texto transformado, el texto amoldado a un trazado y el texto convertido en trazados o imgenes, aumenta an ms las posibilidades de diseo. Puede importar texto que conserve los atributos de RTF (Rich Text Format). Adems, cuando se importa un documento de Photoshop, el texto que contiene sigue siendo editable. Fireworks se ocupa de las fuentes no instaladas al realizar una importacin solicitando al usuario que elija una fuente de sustitucin.

109

Introduccin de texto
Introduzca, asigne formato y edite el texto de los grcos utilizando la herramienta Texto y el Editor de texto.

Para escribir texto: 1 2

Elija la herramienta Texto. Haga clic en el lugar del documento en que desea que empiece el bloque de texto. Se abre el Editor de texto. Seleccione la fuente, el tamao, el espaciado y otras caractersticas de texto. Escriba el texto. Seleccinelo en el Editor de texto para asignarle formato despus de escribirlo. Para ver el texto en el documento a medida que lo escribe en el Editor de texto: Elija la opcin de aplicacin automtica en el Editor de texto.

Herramienta Texto
4 5

Haga clic en Aplicar.

7

Haga clic en Aceptar. El texto aparecer dentro de un bloque de texto en el documento de Fireworks.

El Editor de texto Todo el texto de un documento de Fireworks aparece en un rectngulo con tiradores que se denomina bloque de texto.

Para volver a abrir el Editor de texto:

Haga doble clic en el bloque de texto. Seleccione el texto y elija Texto > Editor. Desplazamiento de los bloques de texto Puede seleccionar un bloque de texto y moverlo a cualquier lugar del documento, de manera idntica a los dems objetos. Para mover un bloque de texto seleccionado, arrstrelo a la nueva ubicacin.

110

Captulo 7

Tamao automtico de los bloques de texto Los bloques de texto de Fireworks cambian de tamao automticamente. A medida que escribe, el bloque de texto se expande. Si elimina el texto, el bloque se reduce de tamao para adaptarse al texto restante. Para controlar la anchura del texto amoldado dentro de un bloque, cmbielo de tamao.

Para editarlo en el Editor de texto: 1

Haga doble clic en el bloque de texto. Se abre el Editor de texto. En el rea de presentacin preliminar del Editor de texto, resalte el texto que desea cambiar. Aplique los cambios.
Nota: Para obtener ms informacin sobre cmo modicar los atributos de texto, consulte las secciones correspondientes en este captulo.

Para ver los cambios en el documento a medida que escribe el texto en el Editor: Elija la opcin de aplicacin automtica en el Editor de texto. Haga clic en Aplicar.

Para cambiar el tamao de un bloque de texto, arrastre un tirador de cambio de tamao.

5

Haga clic en Aceptar.

Edicin de texto
Dentro de un bloque de texto, se pueden cambiar todos los aspectos, como el tamao, fuente, espaciado, interlineado y lnea de base del texto. Para cambiar los atributos de un bloque de texto, utilice el men Texto o el Editor de texto.

Seleccin de una fuente, su tamao y su estilo Cuando se cambian los atributos de fuente, tamao y estilo del texto dentro de un bloque, puede utilizarse el Editor de texto y tambin los comandos del men Texto.
Nota: Si desea utilizar fuentes Type 1 en Macintosh, Fireworks precisa Adobe Type Manager 4 o una versin posterior.

Al ver el texto en el Editor, aparece de forma predeterminada con su fuente y tamao actuales. Un bloque de texto puede contener muchas fuentes y tamaos distintos. Tambin puede ver el texto en el Editor con la fuente y tamao de fuente de su sistema. Esto es til si la fuente o tamao que est utilizando es difcil de leer mientras se escribe.
Para ver el texto en la fuente del sistema:

El Editor de texto Al editar texto, sus atributos de trazo, relleno y efecto tambin se actualizan segn los cambios.

Anule la seleccin de Mostrar fuente en el Editor de texto.

Uso de texto

111

Para ver texto con el tamao predeterminado:

Anule la seleccin de Mostrar tamao y color en el Editor de texto.

Definicin de la lnea de base y el interlineado La lnea de base determina el acercamiento del texto por encima, por debajo o sobre su lnea de base natural. Utilice la lnea de base para crear caracteres de subndice y de superndice. El interlineado determina la distancia entre las lneas adyacentes en un prrafo. Propiamente dicho, el interlineado es el porcentaje del tamao de punto en que las lneas de texto se han separado entre cada lnea de base. Utilice el Editor de texto para establecer la lnea de base y el interlineado.

Para cambiar la fuente, su tamao y su estilo con el Editor de texto: 1

En el Editor, seleccione los caracteres que desee cambiar. Para cambiar la fuente, elija otra en el men emergente Fuentes.

Para cambiar el tamao del tipo de fuente, elija otro tamao en el men emergente Tamao. Para aplicar un estilo de Negrita, Cursiva o Subrayado, haga clic en el correspondiente botn de estilo. Haga clic en Aceptar.
Para establecer la lnea de base y el interlineado: 1

En el Editor, seleccione los caracteres que desee cambiar. En el men emergente Interlineado, elija un valor. 100% es el interlineado predeterminado. En el men emergente Lnea de base, elija la cantidad de superndice o subndice que se aplicar al texto. Haga clic en Aceptar.

Para cambiar la fuente, su tamao y su estilo con el men Texto: 1

Seleccione el bloque o los bloques de texto. Puede cambiar los atributos de ms de un bloque a la vez. Para cambiar la fuente, elija Texto > Fuente y seleccinela en el submen. Para cambiar el tamao del tipo de fuente, elija Texto > Tamao y seleccione un tamao en el submen. Para cambiar el estilo, elija Texto > Estilo y seleccione un estilo en el submen.

Definicin del ajuste entre caracteres El ajuste entre caracteres aumenta o reduce la separacin entre determinados pares de letras, con el n de mejorar su presentacin. La mayora de fuentes incluye informacin que reduce automticamente la separacin entre determinados pares de letras, como TA o Va. De forma predeterminada, Fireworks utiliza la informacin de acercamiento entre caracteres de la fuente al mostrar texto, aunque esto puede desactivarse para tamaos de punto pequeos o cuando el texto no se ha suavizado.

112

Captulo 7

El ajuste entre caracteres tambin puede aumentar o reducir el espaciado entre ms de dos caracteres distintos. Utilice el Editor de texto para establecer el acercamiento de los caracteres.
Para desactivar el ajuste automtico de caracteres:

La orientacin del texto determina si el bloque de texto se orienta horizontal o verticalmente. De forma predeterminada, el texto se orienta en sentido horizontal.

Anule la seleccin de Ajuste de caracteres automtico.

Para establecer el ajuste entre caracteres: 1

Seleccione los caracteres en el Editor de texto: Para ajustar el espaciado entre dos caracteres, haga clic entre ellos. Para el ajuste entre los caracteres, resalte los que desea cambiar.

Orientacin horizontal y vertical Utilice el men Texto o el Editor de texto para establecer la orientacin. Para establecer la direccin del texto, utilice el Editor de texto. Estas conguraciones se aplican slo a bloques de texto completos.

Escriba un valor de acercamiento.

Cero representa el ajuste normal. Los valores positivos alejan las letras entre s. Los valores negativos acercan las letras. Definicin de la direccin y orientacin La direccin del texto determina si el texto uye de derecha a izquierda o de izquierda a derecha. De forma predeterminada, el texto uye de izquierda a derecha.

Para establecer la orientacin de bloques de texto seleccionados utilizando el men Texto:

Para establecer que el texto se oriente en sentido vertical, elija un comando de la parte inferior en el submen Texto > Alinear. Para establecer que el texto se oriente en sentido horizontal, elija un comando de la parte superior del submen Texto > Alinear.

Texto que uye de izquierda a derecha y de derecha a izquierda

Uso de texto

113

Para establecer la orientacin con el Editor de texto:

Haga clic en el botn Texto horizontal o Texto vertical.

Utilice el men Texto o el Editor de texto para establecer la alineacin. Puede denir la alineacin de los distintos prrafos dentro de un bloque de texto

Para establecer la direccin utilizando el Editor de texto:

Para establecer la alineacin con el Editor de texto: 1 2

Haga clic en el botn De izquierda a derecha o De derecha a izquierda.

Seleccione texto dentro de un bloque de texto. Haga clic en el botn de alineacin Izquierda, Centrado, Derecha, Justicado o Expandido.

Aplicacin de color al texto Definicin de la alineacin La alineacin determina la posicin de cada lnea de texto en un prrafo en relacin a los bordes izquierdo y derecho del bloque de texto. El texto se puede alinear hacia el borde izquierdo o derecho del bloque, se puede centrar en su interior, o se puede alinear hacia los bordes izquierdo y derecho a la vez (justicacin completa). De forma predeterminada, el texto se alinea hacia la izquierda. Para lograr un efecto de estiramiento o encajar el texto en un determinado espacio, puede establecer la alineacin de manera que el texto se estire para llenar el bloque horizontalmente, en el caso de texto orientado en esa direccin, o verticalmente, en el caso de texto con orientacin vertical. De forma predeterminada, el texto utiliza el color de relleno activo y no tiene trazo.
Para establecer el color del texto:

Elija un color en el men emergente de paleta de colores del Editor de texto. Seleccione el bloque de texto y elija un color en el men emergente de la paleta de colores del panel Relleno. Haga doble clic en una de las dos paletas de colores o utilice el selector de color del sistema.

Texto horizontal estirado para rellenar un bloque de texto. Puede aplicar el color a todo el bloque de texto o slo a determinados caracteres.

114

Captulo 7

Suavizado de los bordes de texto Para que se alise el borde del texto es necesario suavizarlo. Los bordes del texto se mezclarn con el fondo. Esto puede hacer que el texto sea ms ntido y legible. Utilice el Editor de texto para establecer el suavizado. El suavizado se aplica a todos los caracteres en un bloque de texto.
Para aplicar un borde de suavizado al texto seleccionado: 1 2

Texto al que se le ha aplicado un trazo (arriba), relleno, efecto y estilo (abajo) Para ms informacin sobre los trazos y rellenos, consulte el Captulo 4: Dibujo de objetos y Captulo 5: Edicin de objetos. Para ms informacin sobre los efectos automticos, consulte el Captulo 9: Aplicacin de efectos a objetos.

Abra el Editor de texto. En el men emergente Suavizado del Editor de texto, elija una opcin: Ntido, fuerte o tenue.

Aplicacin de trazos, rellenos, efectos y estilos al texto.

Puede aplicar trazos, rellenos, efectos y estilos de la misma manera que se aplican a los dems objetos. Puede aplicar alguno o todos al mismo bloque de texto. Es posible aplicar cualquier estilo del panel Estilos al texto, aunque no sea un estilo de texto. El texto sigue siendo editable. Los trazos, rellenos, efectos y estilos se actualizan automticamente en respuesta a la edicin.

Adaptacin de texto a un trazado

Para quitar al texto las limitaciones de los bloques rectangulares, puede dibujar un trazado y unirle texto. El texto uye a lo largo de la forma del trazado y se puede editar. Un trazado al que se une texto pierde temporalmente sus atributos de trazo, relleno y efecto. Todos los atributos de trazo, relleno y efecto que se apliquen sern, por lo tanto, para el texto y no para el trazado. Cuando se separa el texto de un trazado, ste vuelve a tener sus atributos de trazo, relleno y efecto. Si un texto adaptado a un trazado abierto excede la longitud de ste, el texto sobrante vuelve al principio del trazado y repite su forma.

El texto adaptado a un trazado vuelve al principio y repite la forma del trazado.

Uso de texto

115

Para colocar texto en un trazado: 1 2 3

Para editar la forma del trazado: 1 2 3

Seleccione un bloque de texto y un trazado. Seleccione Texto > Unir al trazado. Tambin puede elegir Texto > Orientacin, y despus una opcin de orientacin en el submen:

Elija Texto > Separar del trazado. Edite el trazado. Despus de editar el trazado, seleccinelo junto con el bloque de texto y elija Texto > Unir al trazado.

F i r e Firew or w ks o r k s

Texto horizontal en un trazado y texto vertical en un trazado con orientacin vertical

Para mover el punto inicial de un texto adaptado a un trazado: 1 2

Seleccione el objeto de texto en trazado. En el Inspector de objetos, escriba un valor en el cuadro de texto Desplazamiento del texto.

Texto girado alrededor de un trazado, vertical, inclinado verticalmente e inclinado horizontalmente

Para editar el texto unido a un trazado:

Transformacin de texto
Puede transformar los bloques de texto de la misma manera que puede transformar otros objetos. Puede escalar, rotar, inclinar y reejar texto para crear efectos originales.

Haga doble clic en el objeto de texto y trazado para abrir el Editor de texto. Elija la herramienta Texto y seleccione el texto.

116

Captulo 7

El texto transformado se puede seguir editando, aunque las transformaciones acusadas pueden hacer que sea poco legible. La transformacin del texto no cambia el tamao de punto. Para obtener ms informacin, consulte el Captulo 5: Edicin de objetos.

Importacin de texto de Photoshop Puede abrir o importar un archivo de Photoshop completo, y puede copiar y pegar o arrastrar y colocar texto de un archivo de Photoshop en el archivo de Fireworks actual. Si slo desea utilizar algunas palabras o caracteres de otro archivo y no le importa que despus el texto no pueda editarse, utilice la funcin de arrastrar y colocar o copiar y pegar. El texto se incluir como pxeles y no podr editarse como tal. Si desea que el texto se pueda editar como texto, abra o importe el archivo completo.
Nota: La capa de texto conserva el nombre. Para abrir o importar un archivo de Photoshop: 1

Remodelado del texto

Para remodelar, borrar y manipular este tipo de texto con las herramientas de edicin de trazado, puede convertirlo a los objetos componentes del trazado al que est unido. Una vez que haya convertido el texto en trazados, ya no lo podr editar como texto. Una razn para convertir el texto en trazados es si se desea abrir algn documento que tenga texto con fuentes poco usuales en un sistema que no tenga esas fuentes instaladas.
Nota: La conversin de texto en trazados no es necesaria para ver una determinada fuente en un navegador web, porque el texto se exporta a un formato de mapa de bits, como por ejemplo GIF. Para convertir el texto seleccionado en trazados:

Elija un comando Archivo: Elija Archivo > Abrir. Elija Archivo > Importar. Abra la carpeta que contiene el archivo. Elija el archivo y haga clic en Aceptar.

2 3

Seleccione Texto > Convertir en trazados. El texto convertido en trazados retiene todos sus atributos visuales, aunque slo puede editarlo como un trazado. Importacin de archivos RTF Al importar texto RTF, Fireworks mantiene los siguientes atributos: Fuente, tamao y estilo (negrita, cursiva) Alineacin (izquierda, derecha, centrada, justicada) Interlineado Lnea de base Ajuste entre caracteres Escala horizontal Color del primer carcter Todos los dems datos RTF no se tienen en cuenta.

Importacin de texto
Puede utilizar texto de otros documentos si lo arrastra y coloca o lo copia y pega de un documento fuente en el documento de Fireworks actual. Tambin puede abrir o importar un archivo de texto completo en Fireworks. Fireworks puede importar los siguientes formatos de texto: RTF (Rich Text Format) ASCII (slo texto)

Uso de texto

117

Para importar texto RTF: 1

Para seleccionar una fuente de sustitucin: 1

Elija un comando Archivo: Elija Archivo > Abrir. Elija Archivo > Importar.

Elija una fuente no encontrada en la lista Cambiar fuente no encontrada. Elija una fuente de sustitucin en la A, y haga clic en Aceptar. La prxima vez que abra un documento con las mismas fuentes no encontradas, el cuadro de dilogo Fuentes no encontradas incluir aquellas fuentes que ha elegido.

2 3

Navegue a la carpeta que contiene el archivo. Elija el archivo y haga clic en Aceptar.

Nota: Fireworks no puede importar texto RTF mediante las operaciones de copiar y pegar o arrastrar y colocar.

Para dejar una fuente no encontrada sin cambios:

Importacin de texto ASCII Puede importar texto ASCII utilizando cualquiera de los mtodos de importacin. El texto ASCII importado se establece en la fuente predeterminada actual, con un tamao de 12 pxeles, y utiliza el color de relleno actual. Administracin de fuentes no encontradas Si abre un documento de Fireworks que contiene fuentes no instaladas en su sistema, se abrir el cuadro de dilogo Fuentes no encontradas. Se pueden elegir fuentes que reemplacen a las fuentes no encontradas. Si no elige unas fuentes de sustitucin, el texto aparecer en la fuente predeterminada del sistema. Puede editar y guardar el texto. Cuando el archivo se abra en un equipo PC que tenga instaladas dichas fuentes, recordar y utilizar las fuentes originales.

Haga clic en No modicar.

118

Captulo 7

CAPTULO 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Edicin y pintura de pxeles

Fireworks combina la riqueza artstica de las aplicaciones de mapa de bits con herramientas que antes slo se encontraban disponibles en aplicaciones vectoriales, tal como FreeHand. Sin embargo, tambin es posible editar pxeles separados y reas de pxeles de imgenes de mapa de bits. Las imgenes de mapa de bits contienen cuadrados diminutos que se combinan como las losetas de un mosaico para crear una imagen. Estos cuadrados minsculos se denominan pxeles. Un ejemplo de imagen de mapa de bits sera una fotografa en color. Entre las opciones de edicin se incluyen las siguientes: pintura y dibujo con herramientas de aplicaciones de edicin de mapa de bits tradicionales, cambio del color de los pxeles, correccin y mejora de imgenes mediante ltros, duplicacin de elementos de la imagen con la herramienta Sello y fundido de los bordes de la imagen. Incluso puede aplicar ltros de conexin de Photoshop a las imgenes.

119

Familiarizacin con el modo de edicin de imgenes

Al hacer doble clic en una imagen de mapa de bits, Fireworks activa el modo de edicin de imgenes. En Fireworks, el uso de este modo se reconoce porque el documento aparece rodeado por un borde listado. Cuando el borde est visible, puede pintar o editar pxeles en cualquier parte del documento.

Las imgenes de mapa de bits, como las fotografas, no contienen trazados que permitan remodelar la imagen mediante el desplazamiento de un punto sobre el trazado. Lo que ve es cada pxel. Para obtener ms informacin sobre la edicin de objetos con trazados y puntos, consulte Remodelado de trazados editando los puntos en la pgina 68.

Objeto vectorial con un trazado y puntos, e imagen de mapa de bits compuesta de pxeles en su totalidad.

En el modo de edicin de imgenes, el lienzo est rodeado por un borde listado. Los pxeles se editan en el modo de edicin de imgenes. La edicin y el dibujo en este modo tienen carcter permanente, salvo que los comandos se pueden deshacer utilizando Editar > Deshacer o el panel Historial. En el modo de edicin de imgenes no es posible dibujar objetos de trazado.

Creacin de imgenes de mapa de bits

Las imgenes de mapa de bits pueden crearse importndolas, al convertir objetos de trazado a imgenes o al dibujar y pintar en el modo de edicin de imgenes. Para obtener ms informacin sobre la importacin de imgenes, consulte Creacin de documentos de Fireworks mediante la importacin en la pgina 50
Nota: Al abrir un archivo de imagen de mapa de bits (por ej., un archivo JPEG) en Fireworks, ste se abre en el modo de edicin de imgenes.

Los objetos seleccionados que contienen trazados pueden convertirse en un solo objeto de imagen. Asimismo, puede convertir objetos de trazado seleccionados, texto y cualquier cantidad de imgenes de mapa de bits seleccionadas en un solo objeto de imagen.

120

Captulo 8

La conversin de un trazado en imagen es un proceso irreversible, excepto cuando es posible seguir utilizando Editar > Deshacer. Las imgenes no se pueden convertir en objetos de trazado.
Para convertir los objetos seleccionados en una imagen de mapa de bits:

Para ocultar temporalmente el borde listado:

Seleccione Ver > Ocultar bordes. Al salir del modo de edicin de imgenes, la opcin Ocultar bordes se desactiva.
Para evitar que el borde listado aparezca alrededor de todo el documento:

Seleccione Modicar > Combinar imgenes.

Para crear un objeto de imagen nuevo al dibujar y pintar: 1 2

Elija Archivo > Preferencias, haga clic en la cha Edicin y desactive Expandir para rellenar el documento. Esto resulta til cuando el documento contiene imgenes de mapa de bits pequeas y quiere que el borde listado rodee la imagen seleccionada solamente.
Para volver al modo de objetos desde el modo de edicin de imgenes:

Elija Insertar > Imagen vaca. Elija una herramienta de edicin de imgenes y empiece a dibujar o a pintar.

Para crear un objeto de imagen nuevo con la herramienta Recuadro o Lazo:

Haga clic en un rea vaca del documento con la herramienta Recuadro o Lazo.

Elija una herramienta de seleccin y haga doble clic en un rea situada fuera de la imagen. Haga doble clic en un rea de la ventana de documento que est fuera del lienzo con una herramienta de seleccin. Haga clic en el botn Detener de la barra de estado (Windows) o de la parte inferior de la ventana de documento (Macintosh).

Activacin del modo de edicin de imgenes

Debe activar el modo de edicin de imgenes para editar los pxeles de la imagen que haya importado o creado. El cambio a este modo se realiza con toda facilidad
Para activar el modo de edicin de imgenes:

Cursor de parada y botn Detener Elija Modicar > Salir de edicin de imagen. Presione Control+Mays+D (Windows) o Comando+Mays+D (Macintosh). Presione la tecla Esc. Cuando se desactiva el modo de edicin de imgenes, el espacio vaco sobrante que queda por los bordes del objeto de imagen se recorta.

Haga doble clic en la imagen con la herramienta Puntero. Seleccione el objeto de imagen y elija Modicar > Objeto de imagen. Haga clic en un objeto de imagen con una de las siguientes herramientas: Recuadro, Recuadro elptico, Lazo, Lazo poligonal, Varita mgica, Borrador o Sello.

Edicin y pintura de pxeles

121

Seleccin de pxeles
Al realizar una seleccin en el modo de edicin de imgenes, se seleccionan pxeles. Mediante el desplazamiento de los pxeles seleccionados se crea una seleccin otante de pxeles, que puede moverse hasta cualquier parte del borde listado. Si selecciona otros pxeles o sale del modo de edicin de imgenes, los pxeles quedan permanentemente situados en la nueva ubicacin. Uso de las herramientas de seleccin de edicin de imgenes En el modo de edicin de imgenes, las principales herramientas de seleccin son: Recuadro, Recuadro elptico, Lazo, Lazo Poligonal y Varita mgica

Para seleccionar un rea rectangular de pxeles: 1 2

Elija la herramienta Recuadro. En el panel Opciones de la herramienta Recuadro, elija las opciones Estilo y Borde. Consulte Eleccin de opciones de herramientas en la pgina 124. Arrastre el ratn en diagonal para seleccionar los pxeles.

Para seleccionar un rea elptica de pxeles: 1

Elija la herramienta Recuadro elptico. En el panel Opciones de la herramienta Recuadro, elija las opciones Estilo y Borde que se describen en Eleccin de opciones de herramientas en la pgina 124. Arrastre el ratn en diagonal para seleccionar los pxeles.

Herramientas Recuadro

Herramientas Lazo y Varita mgica Utilice estas herramientas para resaltar el rea de pxeles que quiera editar, mover, cortar o copiar. Cada una de estas herramientas dibuja un recuadro compuesto por puntos parpadeantes. Para ms informacin sobre las opciones de estas herramientas, consulte Eleccin de opciones de herramientas en la pgina 124.
Para eliminar un recuadro: Nota: Mantenga presionada la tecla Mays para dibujar recuadros cuadrados o circulares. Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) para empezar a dibujar desde el centro. Para seleccionar un rea de pxeles de estilo libre: 1

Dibuje otro recuadro o haga clic fuera de la seleccin actual con la herramienta Recuadro o Lazo. Elija Editar > Anular seleccin. Salga del modo de edicin de imgenes.

Elija la herramienta Lazo.

122

Captulo 8

En el panel Opciones de la herramienta Lazo, elija una opcin Borde tal como se describen en Eleccin de opciones de herramientas en la pgina 124. Arrastre el cursor alrededor de los pxeles que desee seleccionar.

Para seleccionar un rea de pxeles de colores similares: 1 2

Elija la herramienta Varita mgica. En el panel Opciones de la herramienta Varita mgica, elija una opcin Borde y establezca el nivel de tolerancia arrastrando el deslizador correspondiente. Consulte Eleccin de opciones de herramientas en la pgina 124. Haga clic en el rea que corresponde al color que desee seleccionar. Alrededor del rango seleccionado de pxeles aparece un borde parpadeante.
Nota: La tolerancia permite establecer el rango de colores que se seleccionan al hacer clic en un pxel con la herramienta Varita mgica. Si introduce el valor 0 y hace clic en un pxel, slo se seleccionan los pxeles adyacentes que tengan exactamente el mismo color. Si introduce el valor 65, se selecciona un rango de colores anes.

Para seleccionar un rea poligonal de pxeles: 1 2

Elija la herramienta Lazo poligonal. En el panel Opciones de la herramienta Lazo, elija una opcin Borde tal como se describen en Eleccin de opciones de herramientas en la pgina 124. Haga clic para denir el contorno de la seleccin. Cierre el polgono: Haga clic en el punto inicial. Haga doble clic en el rea de trabajo con la herramienta Polgono.

Pxeles seleccionados cuando la tolerancia se establece en 87

Nota: Mantenga presionada la tecla Mays para restringir las lneas del lazo poligonal a incrementos de 45 grados.

Edicin y pintura de pxeles

123

Para seleccionar colores similares con Seleccionar similar: 1

Elija una herramienta Recuadro o Lazo y arrstrela en diagonal para seleccionar el rea de color que desee. Elija Editar > Seleccionar similar. Alrededor del rango seleccionado de pxeles aparece un borde parpadeante. El valor de tolerancia denido en el panel Opciones de la herramienta Varita mgica determina el rango de colores similares que se selecciona.

Ajuste de una seleccin con recuadro

Despus de seleccionar los pxeles con la herramienta Recuadro o Lazo, puede editar el recuadro. Las teclas de modicacin permiten aadir pxeles al borde del recuadro, o eliminar pxeles de ste, de forma manual. Tambin es posible ampliar o reducir el borde del recuadro conforme a un valor especicado, suavizar el borde del recuadro o seleccionar un rea de pxeles adicional alrededor del recuadro existente. Adicin o eliminacin de pxeles mediante las teclas de modificacin Mediante el uso de las teclas de modicacin, puede aadir pxeles al borde del recuadro parpadeante, o eliminarlos. Tambin puede seleccionar los pxeles situados en la interseccin de dos selecciones con recuadros superpuestas.
Para aadir pxeles a una seleccin con recuadro:

Eleccin de opciones de herramientas Despus de elegir una herramienta Recuadro, Lazo o Varita mgica, las opciones especcas de esa herramienta se muestran en el panel Opciones de herramientas. Las opciones de borde estn disponibles en todas las herramientas de seleccin de pxeles: Duro crea una seleccin con recuadro con un borde denido. Suavizado evita la aparicin de bordes dentados en la seleccin con recuadro. Fundido permite fundir el borde de los pxeles seleccionados. Las opciones de estilo slo estn disponibles en las herramientas Recuadro: Normal permite crear un recuadro en el que la altura y la anchura tienen valores independientes. Tasa ja limita la altura y la anchura a los valores denidos. Tamao jo limita la altura y la anchura conforme a las dimensiones establecidas.

Mantenga presionada la tecla Mays y seleccione los pxeles que quiera aadir.
Nota: Con la tecla Mays tambin puede crear una seleccin con recuadro adicional. Mientras mantiene presionada la tecla Mays, cree una seleccin con recuadro que no solape el borde del recuadro original. Para eliminar pxeles de una seleccin con recuadro

Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y seleccione los pxeles que desee eliminar.

124

Captulo 8

Para seleccionar los pxeles situados en la interseccin de los bordes de dos recuadros: 1

Ampliacin y contraccin de un recuadro Una vez que se ha dibujado un recuadro para seleccionar pxeles, es posible ampliar o contraer el borde del mismo.
Para ampliar el borde de un recuadro: 1

Mantenga presionadas las teclas Alt+Mays (Windows) u Opcin+Mays (Macintosh) mientras crea una seleccin con recuadro nueva que solape el borde del recuadro original. Suelte el botn del ratn. Slo se seleccionan los pxeles situados en la interseccin de los dos recuadros.

Despus de dibujar el recuadro, elija Editar > Modicar recuadro > Ampliar. Se abre el cuadro de dilogo Expandir seleccin.

Introduzca el nmero de pxeles que quiera utilizar para ampliar el borde del recuadro y haga clic en Aceptar.

Para contraer el borde de un recuadro: 1

Despus de dibujar el recuadro, elija Editar > Modicar recuadro > Contraer. El cuadro de dilogo Contraer seleccin se abre.

Recuadro rectangular sobre el recuadro original

Introduzca el nmero de pxeles que quiera emplear para contraer el borde del recuadro y haga clic en Aceptar.

Seleccin de pxeles resultante

Edicin y pintura de pxeles

125

Seleccin de un rea situada alrededor de un recuadro existente Es posible crear un recuadro adicional que incluya el recuadro existente y que tenga una anchura especca. Esto permite crear efectos grcos especiales, como el fundido de los bordes de una seleccin de pxeles.

Para seleccionar un rea situada alrededor de un recuadro existente: 1

Despus de dibujar un recuadro, elija Editar > Modicar recuadro > Borde. El cuadro de dilogo Borde se abre. Introduzca la anchura del recuadro que quiera situar alrededor del recuadro existente y haga clic en Aceptar.

Suavizado del borde de un recuadro En Fireworks 3, es posible eliminar los pxeles sobrantes de los bordes de los pxeles seleccionados. Esto resulta til si aparecen pxeles sobrantes por el borde de una seleccin de pxeles, o de un recuadro, despus de utilizar la herramienta Varita mgica.

Recuadro original

Seleccin de pxeles antes y despus del suavizado

Para suavizar el borde de un recuadro: 1

Elija Editar > Modicar recuadro > Suavizar. Se abre el cuadro de dilogo Seleccin suave. Introduzca un radio de muestra para especicar el grado de suavizado que se quiere aplicar y haga clic en Aceptar.

Despus de enmarcarlo en un recuadro adicional

126

Captulo 8

Edicin de pxeles
Despus de seleccionar los pxeles, puede editarlos con la herramienta Lpiz, Pincel o Cubo de pintura. Asimismo, puede clonar los pxeles, fundir los bordes de la imagen, borrar pxeles o recortar una imagen. Edicin de pxeles con la herramienta Lpiz o Pincel Es posible cambiar los pxeles de forma secuencial o varios pxeles simultneamente. Tambin puede eliminarlos.

Edicin de pxeles con la herramienta Cubo de pintura Despus de seleccionar los pxeles, tambin puede utilizar la herramienta Cubo de pintura para cambiar el color de stos por el de la paleta de colores de relleno.

Herramienta Cubo de pintura

Para aplicar el color de relleno a los pxeles seleccionados: 1

Elija un color en la paleta de colores de relleno. Haga clic en la herramienta Cubo de pintura. En el panel Opciones de la herramienta Cubo de pintura, elija Rellenar slo seleccin. Haga clic en el recuadro de seleccin. El color de relleno se aplica a los pxeles seleccionados.

Herramientas Lpiz y Pincel

Para editar un pxel cada vez: 1 2

2 3

Elija la herramienta Lpiz. Elija un color en la paleta de colores de trazo.

Clonacin de partes de una imagen Haga clic en el pxel que desee cambiar. Para duplicar reas de una imagen de mapa de bits, utilice la herramienta Sello. Cuando se clona un rea, aparecen dos cursores. El crculo azul indica el rea que se quiere clonar (el origen) y el cursor en forma de sello seala el lugar en el que se desea colocar el duplicado.

Para editar varios pxeles a la vez: 1 2

Seleccione un rea de pxeles. Elija un color de la paleta de colores de relleno.

Herramienta Sello
3

Presione las teclas Alt+Supr (Windows) u Opcin+Supr (Macintosh) para cambiar el color de los pxeles seleccionados por el de la paleta de colores de relleno.

Nota: Para cambiar el color de los pxeles seleccionados por el de la paleta de colores de trazo, tambin puede utilizar la herramienta Pincel.

Edicin y pintura de pxeles

127

La clonacin es til cuando se quiere arreglar una fotografa que presenta rayas. Para esto, basta con duplicar las reas de la foto y situar los duplicados sobre las rayas.

Elija una opcin Muestra: Imagen permite hacer un duplicado de la imagen seleccionada solamente. Documento permite duplicar cualquier rea del documento, incluidos los objetos de trazado existentes.

En el men emergente Tamao del sello, arrastre el deslizador para establecer el tamao del sello. En la ventana de presentacin preliminar Suavidad de bordes, arrastre el deslizador para ajustar la suavidad del borde de la herramienta Sello. Mueva el cursor hasta el rea que desee clonar y haga clic con el botn del ratn. Mueva el cursor en forma de sello hasta el rea en la que desee situar el duplicado y haga clic con el botn del ratn.

6 7

Cursores con forma de sello

Para clonar partes de una imagen de mapa de bits: 1 2

Haga clic en la herramienta Sello. En el panel Opciones de herramientas, elija una opcin Origen: Fijo permite bloquear el cursor de origen (el crculo azul) en un rea concreta de la imagen para que pueda duplicarla varias veces. El cursor en forma de sello y el cursor de origen circular no se desplazan a la vez. Alineado permite desbloquear el cursor de origen para que pueda duplicar distintas reas de una imagen. Los dos cursores se mueven a la misma vez.

Nota: Para cambiar la ubicacin del cursor de origen, mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) mientras hace clic con la herramienta Sello.

Fundido de los bordes de la imagen Al fundir una seleccin, los pxeles de la imagen no se desenfocan. Slo se desenfocan los bordes del recuadro de seleccin. Esto resulta til cuando se quiere eliminar un objeto de una foto. Mediante el fundido, el rea copiada se mezcla fcilmente con los pxeles circundantes.
Para fundir los bordes de una seleccin de pxeles: 1

Elija la herramienta Recuadro y seleccione un rea de pxeles. Elija Editar > Fundido para abrir el cuadro de dilogo Seleccin de fundido. Escriba un valor para establecer el radio de fundido y haga clic en Aceptar. El valor del radio determina el nmero de pxeles que se desenfocan a cada lado del borde de seleccin.

128

Captulo 8

Borrado de pxeles Utilice la herramienta Borrador para eliminar pxeles, o para pintar los pxeles con un color diferente.

Recorte de una imagen Utilice Editar > Recortar la imagen seleccionada para cortar partes de una imagen. Por ejemplo, es posible que tenga una fotografa que se ha tomado a demasiada distancia. En este caso, puede eliminar los elementos del fondo y conservar la imagen de la persona que aparece en la foto.

Herramienta Borrador
Para borrar pxeles: 1

Herramienta Recortar
Para recortar una imagen: 1

Haga doble clic en la herramienta Borrador para abrir el panel Opciones de la herramienta Borrador. Establezca el color del borrador en el men emergente Borrar con: Transparente permite asignar un color transparente al borrador. Color de relleno permite seleccionar el color en la paleta de colores de relleno. Color de trazo permite seleccionar el color en la paleta de colores de trazo. Color del lienzo permite seleccionar el color del lienzo del documento.

Elija Editar > Recortar la imagen seleccionada. Aparecen los tiradores de recorte. Ajuste los tiradores de recorte hasta que el cuadro delimitador abarque el rea de la imagen que quiera conservar: Arrastre los tiradores. Mantenga presionada la tecla Mays y utilice las teclas de echa.

3 4

Elija un borrador cuadrado o redondo. Arrastre el deslizador Suavidad de bordes para establecer la suavidad del borde del borrador. Arrastre el deslizador Tamao del borrador para establecer el tamao del borrador. Arrastre la herramienta Borrador sobre los pxeles que quiera borrar o pintar con un color diferente.
3

Haga doble clic dentro del cuadro delimitador o presione Intro para recortar la imagen. Los elementos situados fuera del cuadro delimitador se eliminan. Presione la tecla Esc para cancelar el comando de recorte.

Edicin y pintura de pxeles

129

Pintura de pxeles
De la misma manera que es posible editar pxeles individuales con las herramientas Lpiz y Pincel, tambin se pueden pintar lneas de mapa de bits y pinceladas con estas herramientas. Sin embargo, el proceso de dibujo en el modo de edicin de imgenes es diferente en el modo de objetos. En el modo de objetos, las herramientas de dibujo crean un objeto de trazado que puede editarse y que contiene trazados y puntos. Al editar el objeto, los trazos, rellenos y efectos del mapa de bits vuelven a dibujarse automticamente. Adems, puede cambiar los trazos y los rellenos. En el modo de edicin de imgenes, las herramientas de dibujo modican los pxeles y, a diferencia de lo que sucede cuando se trabaja con objetos de trazado, no es posible editar el trabajo. Para obtener ms informacin sobre la edicin de objetos de trazado que tienen trazados, consulte Edicin de trazos en la pgina 76 y Cambio de los colores de trazo y relleno en la pgina 75.
Para pintar lneas o pinceladas: 1

Comportamiento de los modos de mezcla en el modo de edicin de imgenes

Los modos de mezcla se comportan de forma distinta en el modo de objetos y en el modo de edicin de imgenes. En el modo de objetos, un modo de mezcla afecta al objeto seleccionado. En el modo de edicin de imgenes, los modos de mezcla se comportan de distintas maneras: Un modo de mezcla afecta a la seleccin otante de pxeles. Un modo de mezcla afecta a los pinceles y rellenos de los pxeles que se dibujen posteriormente, si no existe una seleccin otante. Para obtener ms informacin sobre los modos de mezcla, consulte Descripcin de los modos de mezcla en la pgina 148.

Elija la herramienta Puntero y haga doble clic en la imagen en la que desee pintar lneas de pxeles o pinceladas. Elija la herramienta Pincel o Lpiz. Elija un color en las paletas de colores de trazo y relleno. En el panel Trazo, elija las opciones de anchura y de presentacin de la lnea o pincelada.

Uso de filtros y filtros de conexin

Los ltros del men Xtras sirven para mejorar y perfeccionar las imgenes. Fireworks incluye varios ltros de edicin de imgenes nuevos que permiten ajustar el contraste y el brillo, el matiz y la saturacin del color, as como el rango tonal de una imagen. Asimismo, los ltros permiten desenfocar o perlar una imagen y crear una presentacin inigualable mediante la asignacin de colores o la inversin de stos. Sin embargo, no est limitado a utilizar estos ltros, ya que puede aadir los ltros de conexin de Photoshop al men Xtras. Los ltros del men Xtras se utilizan principalmente en imgenes de mapa de bits, como en fotografas. Sin embargo, tambin puede aplicar estos ltros a objetos de trazado. Al aplicar un ltro del men Xtra a un objeto de trazado, ste convierte en una imagen.

2 3

Nota: Si pinta lneas y trazos que amplan una imagen de mapa de bits, su tamao se recorta automticamente despus de desactivar el modo de edicin de imgenes. La imagen se recorta en forma de rectngulo conforme al tamao de los pxeles usados y el espacio transparente que la rodea se elimina.

130

Captulo 8

El efecto de los ltros y ltros de conexin aplicados mediante el men Xtras slo puede anularse si el comando Deshacer est disponible. Utilice el men Xtras para aplicar ltros si est seguro de que no desea editar o anular la accin de los ltros. Por ejemplo, si ajusta el brillo y el contraste para mejorar una imagen, es poco probable que necesite editar o eliminar la accin del ltro. Uso de filtros y filtros de conexin como Efectos automticos En Fireworks 3, puede aplicar los ltros incorporados del men Xtras y los ltros de conexin de Photoshop a una imagen mediante el panel Efecto para convertirlos en efectos automticos. Para obtener ms informacin sobre el uso de los ltros y los ltros de conexin de Photoshop como efectos automticos, consulte Utilizacin de ltros de conexin de Photoshop como efectos automticos en la pgina 145 y Utilizacin de Xtras de Fireworks como efectos automticos en la pgina 145. Ajuste del brillo o el contraste El ltro Brillo/Contraste permite modicar el contraste o el brillo de todos los pxeles de una imagen. El uso de este comando afecta a los resaltes, las sombras y los medios tonos de una imagen. El ltro Brillo/Contraste se emplea en imgenes en las que no es necesario realizar una correccin importante. Para obtener informacin sobre los procedimientos de correccin tonal ms avanzados, consulte Ajuste del rango tonal con los cuentagotas en la pgina 135 y Ajuste del rango tonal mediante la funcin Curvas en la pgina 134. Despus de ajustar el brillo
Para ajustar el brillo o el contraste: 1 2

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Elija Xtras > Ajustar color > Brillo/Contraste. Se abre el cuadro de dilogo Brillo/Contraste.

Elija Presentacin preliminar para ver los cambios efectuados en el rea de trabajo. Al realizar cambios, la imagen se actualiza de forma automtica. Arrastre los deslizadores Brillo y Contraste para ajustar la conguracin. El rango de valores es 100 a 100. Haga clic en Aceptar.

Ajuste del matiz o la saturacin Utilice Matiz/Saturacin para ajustar el color, as como la saturacin y la intensidad de ste en la imagen.Para ajustar el matiz o la saturacin: 1 Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. 2 Elija Xtras > Ajustar color > Matiz/Saturacin. Se abre el cuadro de dilogo Matiz/Saturacin.

Original

Edicin y pintura de pxeles

131

Elija Presentacin preliminar para ver los cambios efectuados en el rea de trabajo. Al realizar cambios, la imagen se actualiza de forma automtica. Elija Colorear para convertir una imagen RVA en otra de dos tonos o para aadir color a una imagen de escala de grises. Si elige Colorear, el rango de valores de los deslizadores Matiz y Saturacin cambia. El matiz cambia de 0 a 360, y la saturacin de 0 a 100.

Ajuste del rango tonal mediante la funcin Niveles Utilice la funcin Niveles para corregir las imgenes que presentan una concentracin elevada de pxeles en las zonas resaltadas o de sombras. Una imagen que tenga una escala tonal completa debera presentar un nmero de pxeles mayor en todas las reas: los resaltes, los medios tonos y las sombras. El ltro Niveles dene los pxeles ms oscuros (las sombras) y los ms claros (los resaltes) como blanco y negro y, a continuacin, vuelve a distribuir los medios tonos proporcionalmente. Esto permite generar una imagen con detalles bien denidos en todos sus pxeles.

Arrastre el deslizador Saturacin para ajustar la saturacin de los colores. El rango de valores es 100 a 100. Arrastre el deslizador Matiz para ajustar el color de la imagen. El rango de valores es 180 a 180. Arrastre el deslizador Luminosidad para ajustar la luminosidad de los colores. El rango de valores es 100 a 100. Haga clic en Aceptar.

Original con una alta concentracin de pxeles en las zonas resaltadas

Despus de ajustar la imagen con la funcin Niveles Utilice el histograma del cuadro de dilogo Niveles para ver la distribucin de los pxeles de una imagen.

132

Captulo 8

En el histograma se representa grcamente la distribucin de los pxeles situados en los resaltes, los medios tonos y las sombras de una imagen. El histograma aparece en el cuadro de dilogo Niveles.
Pxeles ms oscuros Medios tonos Pxeles con ms brillo

Elija Presentacin preliminar para ver los cambios efectuados en el rea de trabajo. La imagen se actualiza automticamente conforme se realizan cambios. En el men emergente Canal, determine si desea aplicar los cambios a colores separados o a todos los canales de color. Para ajustar los resaltes y las sombras, arrastre los deslizadores Niveles de entrada que estn situados debajo del histograma. El deslizador de la derecha ajusta los resaltes utilizando valores entre 255 y 0; el deslizador del extremo izquierdo ajusta las sombras mediante valores comprendidos entre 0 y 255. Los valores se introducen automticamente en los cuadros Niveles de entrada conforme se mueven los deslizadores.

Histograma El histograma sirve para determinar cul es el mejor mtodo para corregir el rango tonal de una imagen. Una concentracin elevada de pxeles en las sombras o los resaltes indica que podra mejorar la imagen aplicando las funciones Niveles o Curvas. En el eje X se muestran los valores de color, desde el ms oscuro (0) hasta el ms claro (255). Si el eje X se lee de izquierda a derecha, los pxeles ms oscuros se representan en la izquierda y los ms luminosos aparecen a la derecha. En el eje Y se representa el nmero de pxeles que hay en cada nivel de brillo.
Para ajustar los resaltes y las sombras: 1

Nota: El valor de las sombras no puede ser superior al de los resaltes, y ste ltimo no puede ser inferior al de las sombras. 6

Para ajustar los valores de contraste de la imagen, arrastre los deslizadores Niveles de salida. Arrastre el deslizador de la derecha para ajustar los resaltes utilizando valores comprendidos en un rango de 255 a 0. Arrastre el deslizador de la izquierda para ajustar las sombras en un rango de 0 a 255. Los valores se introducen automticamente en los cuadros Niveles de salida conforme se mueven los deslizadores.

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Elija Xtras > Ajustar color > Niveles. El cuadro de dilogo Niveles se abre.

Para obtener informacin sobre el uso de los botones de cuentagotas para el ajuste del rango tonal, consulte Ajuste del rango tonal con los cuentagotas en la pgina 135. Ajuste automtico del rango tonal Mediante el ltro Niveles automticos se pueden denir automticamente los pxeles ms claros y ms oscuros de una imagen. Este ltro es exactamente igual que el ltro Niveles y la nica diferencia consiste en que Fireworks realiza la operacin de forma automtica.

Edicin y pintura de pxeles

133

Para ajustar los resaltes y las sombras de forma automtica: 1

Seleccione Xtras > Ajustar color > Curvas. Se abre el cuadro de dilogo Curvas.

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Seleccione Xtras > Ajustar color > Niveles automticos.

Nota: Tambin puede hacer clic en el botn Auto del cuadro de dilogo Niveles o Curvas para ajustar los resaltes y las sombras de forma automtica.

Ajuste del rango tonal mediante la funcin Curvas La funcin Curvas es similar a la funcin Niveles, ya que ambas permiten ajustar el rango tonal de una imagen. Mientras que la funcin Niveles emplea los resaltes, las sombras y los medios tonos para corregir el rango tonal, la funcin Curvas permite ajustar cualquier color por el rango tonal (desde los pxeles ms oscuros hasta los ms claros) sin que esto afecte a otros colores. La cuadrcula del cuadro de dilogo Curvas representa los siguientes valores de brillo: En el eje horizontal se representa el brillo original de los pxeles (mostrado en el cuadro Entrada). En el eje vertical se representan los nuevos valores de brillo (mostrados en el cuadro Salida). Al abrir el cuadro de dilogo Curvas por primera vez, las lneas diagonales que aparecen indican que no se han realizado cambios y, por consiguiente, los valores de entrada y salida son los mismos para todos los pxeles.
Para ajustar un punto especfico del rango tonal: 1

Elija Presentacin preliminar para ver los cambios efectuados en el rea de trabajo. La imagen se actualiza automticamente conforme se realizan cambios. En el men emergente Canal, determine si desea aplicar los cambios a colores separados o a todos los canales de color. Haga clic en un punto de la lnea diagonal de la cuadrcula y arrstrela hasta una posicin distinta para ajustar la curva. El eje horizontal corresponde a los valores de entrada (el brillo original de los pxeles). El eje vertical corresponde a los valores de salida (el brillo ajustado de los pxeles). Cada punto de la curva tiene valores de entrada y salida propios. Al arrastrar un punto, los valores de entrada y salida se actualizan automticamente. En la lnea diagonal se muestran los valores de brillo en un rango de 0 a 255, en donde 0 representa las sombras.

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes.

Lnea diagonal despus de arrastrar un punto para ajustar la curva.

134

Captulo 8

Para obtener informacin sobre el uso de los botones de cuentagotas para el ajuste del rango tonal, consulte Ajuste del rango tonal con los cuentagotas en la pgina 135.
Nota: Al hacer clic en el botn Auto, se generan los mismos resultados que al hacer clic en el botn Auto del cuadro de dilogo Niveles. Para eliminar un punto de la curva: 3

El cuentagotas de medio tono (cuentagotas con tinta gris) restablece el valor de medio tono.

Haga clic en un pxel de la imagen y, a continuacin, en Aceptar.

Arrastre el punto fuera de la cuadrcula.

Nota: No es posible eliminar los puntos nales de la curva.

Inversin de los valores de color de una imagen Utilice la funcin Invertir para transformar cada color de un objeto o una imagen en su opuesto. Por ejemplo, si aplica Invertir a un objeto de imagen rojo (R=255, V=0, A=0), ste se transforma en azul claro (R=0, V=255, A=255).

Ajuste del rango tonal con los cuentagotas Los resaltes, las sombras y los medios tonos tambin se pueden ajustar con el botn de cuentagotas correspondiente de los cuadros de dilogo Niveles o Curvas. Por ejemplo, es posible que tenga una imagen que contiene mucho blanco y que, por consiguiente, parece desgastada. Haga clic en el cuentagotas de resaltado y, a continuacin, en un pxel de la imagen que no sea tan blanco. El nuevo color se asigna al resalte de la imagen para aumentar el contraste de sta.
Para ajustar el rango tonal mediante un cuentagotas: 1

Original

Abre el cuadro de dilogo Niveles o Curvas y elija un color en el men emergente Canal. Elija el cuentagotas adecuado: El cuentagotas de resaltado (cuentagotas con tinta blanca) restablece el valor de resalte. Despus de la inversin El cuentagotas de sombra (cuentagotas con tinta negra) restablece el valor de sombra.
Para invertir colores: 1

Seleccione un objeto o una imagen de mapa de bits. Seleccione Xtras > Ajustar color > Invertir.

Edicin y pintura de pxeles

135

Desenfoque de una imagen Para desenfocar los pxeles de una imagen de mapa de bits, utilice el comando Desenfocar. En las opciones de desenfoque se incluyen las siguientes: Desenfocar, Desenfocar ms y Desenfoque gaussiano. Con la opcin Desenfocar ms, el efecto producido por esta operacin se triplica prcticamente. Desenfoque gaussiano aplica una media ponderada de desenfoque a cada pxel para generar un efecto de neblina.

Para desenfocar una imagen: 1

Seleccione una imagen en el modo de objetos o en el modo de edicin de imgenes. Seleccione una opcin de desenfoque: Xtras > Desenfocar > Desenfocar Xtras > Desenfocar > Desenfocar ms

Para desenfocar una imagen mediante la opcin Desenfoque gaussiano: 1

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Seleccione Xtras > Desenfocar > Desenfoque gaussiano. Se abre el cuadro de dilogo Desenfoque gaussiano.

Antes de utilizar el desenfoque gaussiano

3

Elija Presentacin preliminar para ver los cambios efectuados en el rea de trabajo. La imagen se actualiza automticamente conforme se realizan cambios. Para establecer la intensidad del efecto, arrastre el deslizador Radio de desenfoque. El rango de valores es de 0,1 a 250. Si se incrementa el radio, se produce un efecto de desenfoque ms pronunciado. Haga clic en Aceptar.

Despus de utilizar el desenfoque gaussiano

136

Captulo 8

Uso del filtro Convertir en alfa El ltro Convertir en alfa permite convertir un objeto o un texto en una transparencia degradada basada en la transparencia de la imagen.

Transformacin de las transiciones cromticas en lneas Utilice la funcin Buscar bordes para identicar las partes de una imagen que son transiciones cromticas. Esta funcin permite transformar las transiciones en lneas. Cuando se utiliza en imgenes de mapa de bits, esta funcin conere la apariencia de un esbozo a la imagen.

Original

Original

Despus de la conversin en alfa

Para convertir un objeto en un alfa: 1 2

Seleccione un objeto o un objeto de texto. Seleccione Xtras > Otro > Convertir en alfa. Despus de aplicar Buscar bordes
Para transformar las transiciones cromticas en lneas: 1 2

Seleccione un objeto o una imagen. Seleccione Xtras > Otro > Buscar bordes.

Edicin y pintura de pxeles

137

Perfilado de una imagen El ltro Perlar permite corregir imgenes que estn borrosas. El comando Perlar incluye tres opciones: Perlar, Perlar ms y Desperlar mscara. Perlar permite ajustar el foco de una imagen borrosa mediante el incremento del contraste de los pxeles adyacentes. Perlar ms permite aumentar el contraste de los pxeles adyacentes casi tres veces ms que Perlar. Desperlar mscara permite perlar una imagen mediante el ajuste del contraste de los bordes de sta. De las tres, la ltima es la que proporciona un mayor control y, por lo tanto, suele ser la opcin ideal para perlar una imagen.

Para perfilar una imagen: 1 2

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Elija una opcin de perlado: Xtras > Perlar > Perlar Xtras > Perlar > Perlar ms

Nota: Si perla demasiado la imagen, puede estropearla. Para perfilar una imagen mediante la funcin Desperfilar mscara: 1 2

Seleccione la imagen en el modo de objetos o en el modo de edicin de imgenes. Seleccione Xtras > Perlar > Desperlar mscara. Se abre el cuadro de dilogo Desperlar mscara.

3 4

Original

Despus de perlar
7

Elija Presentacin preliminar para ver cmo afectan los cambios a la imagen. Arrastre el deslizador Cantidad de perlado para seleccionar la cantidad de este efecto que se va a aplicar, en un porcentaje de 1 a 500. Arrastre el deslizador Radio del pxel para seleccionar un radio de 0,1 a 250. Al incrementar el radio, aumenta el rea de gran contraste alrededor de cada borde del pxel. Arrastre el deslizador Umbral para seleccionar un umbral de 0 a 255. Los valores comprendidos entre 2 y 25 son los ms utilizados. Al incrementar el umbral, slo se perlan los pxeles de la imagen que presentan ms contraste. Al reducir el valor de umbral, tambin se incluyen los pxeles de menor contraste. Si el valor de umbral es 0, se perlan todos los pxeles de la imagen. Haga clic en Aceptar.

138

Captulo 8

CAPTULO 9
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Aplicacin de efectos a objetos

Fireworks incluye una amplia seleccin de trazos y rellenos con los que pueden una amplia gama de atractivos grcos para su sitio Web. Pero, qu le parecera poder crear un borde biselado alrededor de los botones para simular un relieve?, y poder crear un resplandor alrededor de una imagen o aadir una sombra al texto para darle profundidad? Estos y otros muchos efectos se aplican con facilidad en Fireworks. Adems, puede aplicar efectos a un objeto con solo hacer clic en el panel Efecto. Es posible editar y quitar Efectos automticos tan fcilmente como se aplican. La funcin ms destacada de los efectos de Fireworks es que son 'vivos', es decir que actualizan los objetos conforme los aplica. Si esto no fuera suciente, en Fireworks 3 puede utilizar ltros Xtras, por ejemplo, Desenfoque gaussiano y Perlar, como Efectos automticos. Una gran cantidad de ltros de conexin de Photoshop tienen ahora la exibilidad de los Efectos automticos.

139

Aplicacin de un efecto automtico

Utilice el panel Efecto para aplicar Efectos automticos. Al aplicar un efecto, aparece en el panel Efecto. Es posible aplicar varios efectos a un objeto Cada vez que aada un efecto al objeto, aparecer al nal de la lista del panel Efecto. Aparece una marca junto a cada efecto de la lista. De esta forma, un efecto puede activarse y desactivarse.
Guardar, editar, asignar nombre y eliminar efectos. Seleccionar una categora de efecto. Ver lista de efectos.

Edicin de Efectos automticos

Utilice el botn Informacin que aparece junto a un efecto del panel Efecto para editar el efecto aplicado a un objeto.

Botn Informacin
Para editar un Efecto automtico: 1

En el panel Efecto, haga clic en el botn Informacin que aparece junto al efecto que desee editar. Aparecer una ventana de edicin emergente o un cuadro de dilogo.
Nota: Si un efecto no puede modicarse, el botn Informacin aparecer atenuado. Por ejemplo, no puede editar Niveles automticos.

Panel Efecto
Para aplicar un Efecto automtico a un objeto seleccionado: 1

En el panel Efecto, elija un efecto en el men emergente. El efecto se aade al panel Efecto. Segn el efecto elegido, aparecer una ventana de edicin o cuadro de dilogo que permite personalizar la conguracin del efecto.
2 3

La ventana emergente de edicin de Sombra Ajuste los valores del efecto. Al nalizar, haga clic fuera de la ventana de edicin emergente o pulse Intro para cerrarla.

Introduzca en dicha ventana o cuadro de dilogo los valores del efecto y cirrelos. Haga clic en Aceptar para cerrar un cuadro de dilogo. Pulse Intro o haga clic en cualquier punto del rea de trabajo para cerrar una ventana emergente.
Nota: El panel Efecto no est disponible en el modo de edicin de imgenes.

Reordenacin de los Efectos automticos Los diferentes efectos aplicados a un objeto pueden reordenarse. Al reordenar los efectos se cambia la secuencia en que se aplican en el objeto. Esto puede alterar el aspecto del objeto.

Repita los pasos 1 y 2 para aplicar ms de un efecto automtico.

140

Captulo 9

Normalmente, los efectos que modican el interior de un objeto, como el efecto Bisel interior, deben aplicarse antes que los efectos que modican el exterior del objeto. Por ejemplo, aplique el efecto Bisel interior antes de aplicar los efectos Bisel exterior, Iluminado o Sombra.
Para reordenar los efectos aplicados a un objeto seleccionado:

Creacin de efectos personalizados

Utilice el men emergente Opciones del panel Efecto para guardar la conguracin de un efecto personalizado, cambiarle el nombre o suprimirlo. En Fireworks 3, los efectos guardados se almacenan con la aplicacin. Si asigna un nombre y guarda la conguracin de un efecto para un objeto, el efecto se encuentra disponible para cualquier documento que abra despus. Si asigna un nombre y guarda varios efectos aplicados a un objeto, todos los efectos pueden aplicarse a otros objetos de una vez.
Nota: Al abrir documentos de versiones anteriores de Fireworks que contengan efectos guardados, los efectos aparecern como 'Sin nombre'` Todos los efectos se mantienen. Utilice el panel Efecto para cambiar el nombre del efecto. Para guardar una configuracin de efecto 1

En el panel Efecto, seleccione en la lista el efecto que desee mover y arrstrelo hasta la posicin que desee en la lista. Los efectos que aparecen al principio de la lista se aplican antes que los restantes. Eliminacin de Efectos automticos Los efectos aplicados a un objeto pueden eliminarse fcilmente. Si se aplican varios efectos a un objeto, es posible eliminar uno de ellos o todos los efectos. Para obtener informacin sobre la desactivacin temporal de un efecto, consulte Control de la actualizacin del efecto automtico en la pgina 142.
Para quitar un efecto aplicado a un objeto seleccionado: 1 2

Seleccione Guardar efecto como en el men emergente Opciones del panel Efecto.

En el panel Efecto, seleccione en la lista el efecto que desee quitar. Haga clic en el botn Eliminar de la parte inferior del panel Efecto o arrastre el efecto al botn Eliminar.

Men emergente Opciones del panel Efecto

2

Escriba un nombre para el efecto y luego haga clic en Aceptar. El efecto se aadir al men emergente del panel Efecto.

Para quitar todos los efectos aplicados a un objeto seleccionado

Para cambiar el nombre de una configuracin de efecto personalizado: 1

En el panel Efecto, elija Ninguno en el men emergente Efecto.

Seleccione el efecto personalizado cuyo nombre desee cambiar en el panel Efecto. Seleccione Cambiar nombre del efecto en el men emergente Opciones del panel Efecto. Escriba un nuevo nombre y haga clic en Aceptar. No es posible cambiar el nombre o eliminar un efecto estndar de Fireworks.

Aplicacin de efectos a objetos

141

Para eliminar un efecto personalizado con nombre: 1

Seleccione el objeto que contiene el efecto personalizado que desee eliminar o elija el efecto personalizado en el men emergente de la parte superior del panel Efecto. Elija Suprimir efecto en el men emergente Opciones del panel Efecto.

Control de la actualizacin del efecto automtico

Es posible que los archivos que utilicen numerosos efectos automticos tarden ms tiempo en abrirse. Adems, al cambiar el tamao o editar un objeto con numerosos efectos, Fireworks puede tardar ms tiempo en actualizar el objeto en la pantalla. Puede desactivar temporalmente un efecto para acelerar la actualizacin de la pantalla.
Para desactivar temporalmente un efecto aplicado a un objeto:

Almacenamiento de un efecto como estilo Otra forma de guardar y reutilizar un efecto es mediante la creacin de un estilo a partir del efecto. Los efectos automticos son uno de los atributos que puede guardar como parte de un estilo. Para obtener informacin adicional sobre los estilos, consulte Uso de estilos en la pgina 85. Utilizacin de la configuracin predeterminada de los efectos automticos Seleccione Utilizar valores predeterminados en el men emergente Efecto del panel Efecto para cargar los efectos predeterminados en el panel Efecto. Es posible cambiar los valores predeterminados de efecto.
Para guardar una configuracin de efecto como predeterminada: 1

Deseleccione la casilla que aparece junto al efecto en el panel Efecto. El efecto desaparecer del objeto.
Para reactivar un efecto desactivado:

Haga clic en el cuadro situado junto al efecto.

Para desactivar temporalmente todos los efectos aplicados a un objeto:

Elija Todo desactivado en el men emergente Opciones del panel Efecto.

Nota: Para obtener informacin sobre la eliminacin permanente de un efecto aplicado a un objeto, consulte Eliminacin de Efectos automticos en la pgina 141.

Seleccione el objeto que contiene la conguracin de efecto que desee utilizar como valor predeterminado. Seleccione Guardar predeterminados en el men emergente Opciones del panel Efecto.

Aplicacin de efectos a objetos agrupados

Al aplicar un efecto a un grupo, se aplica a todo los objetos del grupo. Al desagrupar los objetos, cada objeto recupera los efectos que tuviera individualmente. Puede aplicar un efecto a un objeto dentro de un grupo al seleccionar solo dicho objeto. Para obtener informacin sobre la seleccin de un grupo de objetos dentro de un grupo, consulte Seleccin de objetos agrupados en la pgina 91.

142

Captulo 9

Utilizacin de efectos automticos estndar

Con Fireworks, puede crear efectos Web, como biseles, sombras, resplandores y relieves. Es posible personalizar cada efecto para obtener exactamente el aspecto que desee. La conguracin del efecto puede modicarse en cualquier momento. Al elegir los efectos Bisel, Relieve, Sombra o Iluminado, aparece una ventana emergente de edicin en el panel Efecto para congurar el efecto. Las opciones de la ventana emergente de edicin cambian segn el efecto elegido. Experimente con diferentes valores hasta obtener el aspecto que desee. Si despus desea cambiar el efecto, consulte Edicin de Efectos automticos en la pgina 140.
Anchura de bisel Contraste Suavidad ngulo del bisel

Para aplicar un borde biselado a un objeto seleccionado: 1

En el panel Efecto, elija una opcin de Bisel. Relieve > Bisel interior Bisel y relieve > Bisel exterior Aparece la ventana emergente de edicin. Edite la conguracin en la ventana emergente de edicin. Al nalizar, haga clic fuera de la ventana de edicin o pulse Intro para cerrarla. Si selecciona Bisel exterior, elija el color del bisel. En el men emergente Preestablecidos, elija un preestablecido de efecto para botones. Consulte Uso de efectos de biselado para dibujar estados de un botn en la pgina 195 para obtener ms informacin sobre las opciones de preestablecidos de botones.

Aplicacin de efectos de relieve Utilice el efecto Relieve para que una imagen aparezca elevada o hundida respecto al fondo. Es posible un efecto de relieve hundido o relieve elevado.

Ventana emergente de edicin Bisel interior Aplicacin de bordes biselados Al aplicar un borde biselado a botones obtendr botones elevados en el sitio Web. Es posible crear un bisel interior o un exterior.

Relieve hundido y relieve elevado sobre un lienzo azul Bisel interior y bisel exterior

Aplicacin de efectos a objetos

143

Para aplicar un efecto de relieve a un objeto: 1

Para aplicar una sombra o una sombra interior: 1

Abra el men emergente de la parte superior del panel Efecto para ver una lista de los efectos disponibles. Elija un efecto Relieve: Bisel y Relieve > Relieve hundido Bisel y Relieve > Relieve elevado Aparece la ventana emergente de edicin. Edite la conguracin en la ventana emergente de edicin. Al nalizar, haga clic fuera de la ventana de edicin o pulse Intro para cerrarla.

Abra el men emergente de la parte superior del panel Efecto para ver una lista de los efectos disponibles. Elija una opcin de sombra: Sombrear e iluminar > Sombra Sombrear e iluminar > Sombra interior Aparece la ventana emergente de edicin. Edite la conguracin en la ventana emergente de edicin. Arrastre el deslizador de distancia para denir la distancia de la sombra respecto al objeto. Arrastre el deslizador Opacidad para denir el grado de transparencia en la sombra. Seleccione Slo sombra para ocultar el objeto y mostrar slo la sombra.

Aplicacin de sombras e iluminados Fireworks facilita la aplicacin de sombras, sombras interiores e iluminados a objetos. Puede especicar el ngulo de la sombra para simular el ngulo de la luz brillando sobre el objeto.

Al nalizar, haga clic fuera de la ventana de edicin o pulse Intro para cerrarla.

Para aplicar una iluminacin: 1

Efectos Sombra y Sombra interior

2

Abra el men emergente de la parte superior del panel Efecto para ver una lista de los efectos disponibles. Elija Sombrear e iluminar > Iluminado. Aparece la ventana emergente de edicin. Edite la conguracin en la ventana emergente de edicin. Arrastre el deslizador Desplazamiento para indicar la distancia del resplandor con respecto al objeto. Arrastre el deslizador Opacidad para denir el grado de transparencia del iluminado.

Efecto Iluminado

Al nalizar, haga clic fuera de la ventana de edicin o pulse Intro para cerrarla.

144

Captulo 9

Utilizacin de filtros de conexin de Photoshop como efectos automticos

Al instalar un ltro de conexin de Photoshop en Fireworks, se aade al men Xtras y al panel Efecto. Utilice el men Xtras para aplicar ltros de conexin de Photoshop slo cuando est seguro de que no desea editar o eliminar el efecto de un objeto. Utilice el panel Efecto para aplicar ltros de conexin de Photoshop como efectos automticos. Algunos de ltros de conexin de Photoshop no pueden utilizarse como efectos automticos.
Nota: Al compartir un archivo de Fireworks en el que se ha aplicado un ltro de conexin de Photoshop como efecto automtico, el receptor del archivo debe tener instalado el ltro de conexin para poder verlo el efecto. Los efectos de Fireworks, se almacenan con el archivo Fireworks y el receptor no necesita instalar archivos adicionales para ver el efecto. Para instalar filtros de conexin de Photoshop: 1

Para aplicar un filtro de conexin de Photoshop a un objeto seleccionado como un efecto automtico:

Elija el ltro de conexin en el men emergente Efecto del panel Efecto.

Utilizacin de Xtras de Fireworks como efectos automticos

En Fireworks, es posible utilizar todos los ltros del men Xtras como efectos automticos mediante el panel Efecto. De esta forma podr editar o quitar el ltro de un objeto en cualquier momento. Tambin puede editar objetos a los que aplic los ltros. Utilice el men Xtras para aplicar ltros slo cuando seguro de que no va necesitar quitar o editar el ltro. Para obtener informacin sobre la utilizacin del men Xtras para aplicar ltros Xtras, consulte Uso de ltros y ltros de conexin en la pgina 130.
Nota: Si se aplica un ltro Xtra mediante el men Xtras, el ltro es editable slo en el caso de que Deshacer est disponible. Despus de guardar o de volver a abrir la imagen, el ltro ya no se puede quitar.

En el men emergente Opciones del panel Efecto, seleccione Localizar ltros de conexin. Aparece el cuadro de dilogo Seleccione la carpeta de ltros de conexin de Photoshop. Abra la carpeta en que se encuentran los ltros de conexin de Photoshop y haga clic en Aceptar. Debe reiniciar Fireworks para cargar los ltros de conexin.

Nota: Si mueve los ltros de conexin a otra carpeta, debe repetir los pasos anteriores o seleccionar Archivo > Preferencias y hacer clic en la cha Carpetas para cambiar la ruta de acceso a los ltros de conexin. Despus debe reiniciar Fireworks.

Aplicacin de efectos a objetos

145

146

Captulo 9

10

CAPTULO 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Composicin y mscaras

Las tcnicas de composicin y de enmascaramiento proporcionan otro nivel de control creativo. Es posible crear efectos nicos al mezclar los colores de objetos superpuestos. Fireworks tiene varios modos de mezcla para ayudarle a encontrar el aspecto que desee, desde oscurecer a saturacin y tinta. Otra forma de crear un efecto particular es mediante la creacin de un grupo de mscara. Gracias al enmascaramiento, puede utilizar un objeto de trazado o de imagen para crear un efecto de recorte en una imagen subyacente. Por ejemplo, puede colocar un objeto de trazado elptico sobre una fotografa. Despus puede seleccionar el trazado y la imagen para crear un grupo de mscara. Toda el rea de la imagen que est fuera de la elipse se recorta, slo se ve la parte de la imagen con la forma de la elipse. Es posible crear todo tipo de efectos interesantes al cambiar los atributos de los objetos del grupo de mscara. Las posibilidades son innitas.

147

Composiciones
La composicin es el proceso de utilizar modos de mezclas para variar la transparencia o la interaccin de colores de dos o ms objetos superpuestos. Los modos de mezcla manipulan los valores de color de los objetos superpuestos. Asimismo, aaden una nueva dimensin de control al efecto de opacidad. Descripcin de los modos de mezcla Cuando se selecciona un modo de mezcla, ste se aplica completamente al aspecto de los objetos seleccionados. Los objetos incluidos en un documento o capa pueden tener modos de mezcla que dieran de los de otros objetos incluidos en el mismo documento o capa. Cuando se agrupan objetos con distintos modos de mezcla, el modo de mezcla del grupo prevalece sobre los modos de mezcla individuales de cada objeto. stos se restablecen al desagrupar los objetos Un modo de mezcla consta de estos elementos: Color de mezcla es el color al que se aplica el modo de mezcla. Opacidad es el grado de transparencia con el que se aplica el modo de mezcla. Color base es el color de los pxeles situados debajo del color de mezcla Color resultante es el resultado del efecto del modo de mezcla sobre el color base.

Ajuste de la opacidad y aplicacin de los modos de mezcla Utilice el Inspector de objetos para ajustar la opacidad de los objetos seleccionados y aplicar modos de mezcla. Un valor de 100 produce un objeto completamente opaco, mientras que un valor 0 (cero) produce un objeto completamente transparente.

Seleccionar un modo de mezcla. Ajustar la opacidad.

Denicin de la opacidad y seleccin de un modo de mezcla en el Inspector de objetos.

Para definir el modo de mezcla para objetos existentes: 1

Con dos objetos superpuestos, seleccione el objeto superior. En el men emergente Modo de mezcla, elija una opcin de mezcla.

Color de base Color de mezcla Color resultante

148

Captulo 10

Para definir un modo de mezcla predeterminado que se aplicar a los objetos conforme los dibuje:

Ejemplos de modos de mezcla

Elija Editar > Anular seleccin para evitar la aplicacin no deseada de un modo de mezcla. 2 En el Inspector de objetos, elija un modo de mezcla como valor predeterminado tal como se describe en esta seccin. Normal no aplica ningn modo de mezcla. Multiplicar multiplica el color base por el color de mezcla, lo cual produce colores ms oscuros. Pantalla multiplica el color inverso del color de mezcla por el color base, lo cual produce un efecto blanqueador. Oscurecer selecciona el color ms oscuro del color de mezcla y el color base para utilizarlos como color resultante. Este color solamente reemplaza los pxeles de color ms claro que el color de mezcla. Aclarar selecciona el color ms claro del color de mezcla y el color base para utilizarlo como color resultante. Este color solamente reemplaza los pxeles de color ms oscuro que el color de mezcla. Diferencia Sustrae el color de mezcla del color base o el color base del color de mezcla. El color con menos brillo se sustrae del color con ms brillo. Matiz combina el valor de matiz del color de mezcla con la luminancia y la saturacin del color base para crear el color resultante. Saturacin combina la saturacin del color de mezcla con la luminancia y el matiz del color base para crear el color resultante. Color combina el matiz y la saturacin del color de mezcla con la luminancia del color base para crear el color resultante y preservar los niveles de gris con el propsito de colorear imgenes monocromticas y teir las imgenes de color. Luminosidad combina la luminancia del color de mezcla con el matiz y saturacin del color base. Invertir invierte el color base. Tinta aade gris al color base. Borrar suprime todos los pxeles del color base, incluidos los de la imagen de fondo.
1

Imagen original Normal

Multiplicar

Pantalla

Oscurecer

Aclarar

Diferencia

Matiz

Saturacin

Color

Luminosidad

Invertir

Tinta

Borrar

Composicin y mscaras

149

Comportamiento de los modos de mezcla Los modos de mezcla se comportan de forma diferente segn est en el modo de objetos o en el modo de edicin de imgenes. En el modo de objetos, un modo de mezcla afecta al objeto seleccionado. En el modo de edicin de imgenes, un modo de mezcla afecta a la seleccin otante de pxeles. En el modo de edicin de imgenes sin una seleccin otante, un modo de mezcla afecta a los pinceles y rellenos de los objetos que se dibujen a partir del momento que se activa el modo de mezcla.

Al editar los atributos de trazo y de relleno del objeto de mscara, podr crear muchos efectos nicos. Consulte Edicin de grupos de mscara en la pgina 151 para obtener informacin sobre la edicin de un objeto de mscara.

Imagen y trazado de recorte

Enmascaramiento de imgenes
Las mscaras se crean agrupando dos objetos en un grupo de mscara El objeto superior (la mascara) se utiliza para crear un efecto de recorte sobre el objeto inferior. Puede utilizar tanto una imagen como un objeto con trazados como objeto superior de la mscara. Un grupo de mscara tiene dos funciones principales: El trazado de un objeto vectorial para realizar un contorno de otro objeto o imagen. En Freehand esta operacin recibe el nombre de pegar dentro o trazado de recorte. Asigna la forma de su trazado al objeto o imagen inferior. Una imagen para crear un contorno de otros objetos de forma que el objeto superior no sea visible y el valor de cada pxel del objeto superior afecte a la visibilidad del objeto inferior. Esto se denomina mscara de capa en Photoshop. Una aplicacin habitual de las mscaras es utilizar la imagen superior para denir una transparencia de degradado para un objeto situado en un nivel inferior.

Mscara de trazado

Mscara de imagen Creacin de mscaras Puede utilizar un objeto de trazado o de imagen como mscara.
Para crear una mscara de trazado: 1

Cree el objeto que desee utilizar como objeto superior de la mscara. Site el objeto o imagen sobre el rea de desee enmascarar. Seleccione el objeto superior de la mscara y los objetos que deben enmascararse. Finalice la mscara de trazado:

150

Captulo 10

Seleccione Modicar > Grupo de mscara > Enmascarar trazado. Seleccione slo los objetos que deben enmascararse y elija Editar > Cortar. Despus seleccione el objeto superior de mscara y elija Editar > Pegar dentro.
Para centrar objetos de mscaras dentro del objeto superior de mscara:

Edicin de grupos de mscara Fireworks permite editar un grupo de mscara de cualquier momento. Es posible modicar los bordes del objeto superior de mscara para crear impresionantes efectos. Por ejemplo, es posible aplicar un borde fundido al objeto superior tal como aparece en la ilustracin siguiente.

Haga clic en el tirador del grupo de mscara que se encuentra en el centro del grupo y arrastre hasta que la imagen se centre de la forma que desee.
Para crear una mscara de imagen: 1

Cree el objeto que desee utilizar como objeto superior de la mscara. Por ejemplo, cree un objeto texto con un relleno degradado de negro a blanco. Site el objeto sobre el rea de la imagen que desee enmascarar. Seleccione el objeto superior de la mscara y los objetos que deben enmascararse. Seleccione Modicar > Grupo de mscara > Enmascarar imagen. El objeto superior se convierte en un objeto alfa cuyos valores de escala de grises se emplearn para enmascarar los objetos inferiores. Grupo de mscara original

Nota: No es necesario que el objeto superior sea un trazado para este tipo de enmascaramiento. Puede ser una imagen.

Despus de fundir el borde Despus de seleccionar el grupo de mscara, los atributos del objeto superior aparecen en los paneles Relleno, Trazo y Efecto.

Composicin y mscaras

151

Para convertir una mscara de trazado seleccionada en una mscara de imagen:

En el Inspector de objetos, elija Imagen como opcin de Mscara. Seleccione Modicar > Grupo de mscara > Enmascarar imagen.
Para convertir una mscara de imagen seleccionada en una mscara de trazado:

En el Inspector de objetos, elija Trazado como opcin de Mscara. Seleccione Modicar > Grupo de mscara > Enmascarar trazado.
Para convertir un grupo normal seleccionado en un grupo de mscara:

En el Inspector de objetos, elija Grupo de mscara en el men emergente Tipo. Seleccione Modicar > Grupo de mscara > Enmascarar imagen. Seleccione Modicar > Grupo de mscara > Enmascarar imagen.
Para convertir una mscara seleccionada en un grupo normal:

En el Inspector de objetos, elija Grupo en el men emergente Tipo.

Para seleccionar objetos dentro de un grupo de mscara:

Utilice la herramienta Seleccionar en nivel inferior. Haga doble clic en el tirador de grupo de mscara. Seleccione Editar > Seleccionar en nivel inferior.

152

Captulo 10

11

CAPTULO 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Optimizacin de grcos

El objetivo nal del diseo de grcos Web es la creacin de imgenes atrayentes que se descarguen lo ms rpidamente posible. Para ello, es necesario reducir el nmero de colores, seleccionar un formato con la mejor compresin para la imagen y mantener la mayor calidad posible. Este equilibrio es lo que se conoce como optimizacin: encontrar la proporcin correcta de colores, compresin y calidad. En Fireworks, los ajustes de optimizacin se aplican slo a las imgenes exportadas. Por tanto, puede trabajar libremente siguiendo su proceso creativo sin tener que preocuparse de las limitaciones del color o de la aplicacin de efectos. Despus, puede elegir, personalizar y comparar los ajustes de optimizacin que mejor se adapten a la imagen que exportar. La optimizacin de imgenes en Fireworks es una tarea que consta de tres etapas: Cada formato de archivo tiene diferentes formas de comprimir la informacin de color en el propio archivo. La eleccin del formato adecuado para determinados tipos de grcos puede reducir en gran medida el tamao de archivo.
Eleccin del mejor formato de archivo.

Cada formato de archivo web tiene su propio conjunto de opciones para controlar la compresin de imgenes. Por ejemplo, puede utilizar el tramado en un archivo GIF para compensar el nmero menor de colores en la imagen, tambin puede utilizar el suavizado en un archivo JPEG y desenfocar ligeramente la imagen para as reducir el tamao del archivo JPEG.
Definicin de las opciones especficas del formato. Ajuste de los colores de la imagen. Limite los colores al asignar a la imagen un nmero determinado de colores, llamado paleta de colores. Despus, es posible eliminar los colores no utilizados de la paleta de colores. Un nmero reducido en la paleta signica que habr menos colores en la imagen, el resultado ser un archivo con un tamao ms reducido. La reduccin del nmero de colores tambin puede reducir la calidad de la imagen, por tanto deben probarse varias paletas de colores para encontrar el mejor equilibrio entre calidad y tamao.

153

Optimizacin en el rea de trabajo

Los controles de Fireworks para la optimizacin se encuentran en diferentes paneles del rea de trabajo: El panel Optimizar contiene los controles clave para optimizar las imgenes en Fireworks. El panel Tabla de color muestra los colores de la paleta de colores actual. La ventana Presentacin preliminar presenta una vista previa del aspecto nal del grco.
Nota: En Fireworks, todos los controles de optimizacin se encuentran en el rea de trabajo. Sin embargo, es posible optimizar an ms la imagen con el cuadro de dilogo Presentacin preliminar de la exportacin al seleccionar Archivo > Presentacin preliminar de la exportacin. Para obtener informacin adicional sobre la Presentacin preliminar de la exportacin, consulte Optimizacin y presentacin preliminar durante la exportacin en la pgina 167.

Para especificar el ajuste de optimizacin para una imagen: 1

En el panel Optimizar, seleccione un formato de archivo. Para obtener informacin adicional, consulte Seleccin del formato de archivo ms adecuado en la pgina 157.

Dena las opciones especcas del formato. Para obtener informacin adicional, consulte Eleccin de los ajustes de optimizacin para archivos GIF y PNG en la pgina 158 y Eleccin de los ajustes de optimizacin para archivos JPEG en la pgina 159.

Si fuera necesario, elija otro ajuste de optimizacin en el men emergente Opciones del panel Optimizar.

Definicin de los ajustes de optimizacin para divisiones Es posible especicar un ajuste de optimizacin diferente para cada divisin de un documento. Por ejemplo, es posible que desee hacerlo cuando una parte de su grco contiene una imagen fotogrca que se exporte mejor como JPEG y otra parte sea una rea slida de blanco que se comprima mejor como GIF. Al dibujar una divisin sobre cada parte, puede especicar que cada parte se exporte de forma diferente. Al seleccionar un objeto de divisin en la capa Web, el panel Optimizar muestra los ajustes de dicha divisin.

Es posible elegir diferentes ajustes de optimizacin para denir rpidamente un formato de archivo y aplicar ajustes especcos de un formato. Es posible modicar los ajustes preestablecidos. Si necesita un control ms preciso de la optimizacin que la ofrecida por los preestablecidos, puede crear un ajuste de optimizacin personalizado mediante el panel Optimizar.
Para elegir una optimizacin preestablecida:

Seleccinela en el men emergente Conguracin del panel Optimizar.

154

Captulo 11

Para definir los ajustes de optimizacin para una divisin: 1

Para guardar ajustes de optimizacin como un preestablecido: 1

Seleccione un objeto de divisin. Si los objetos de divisin no son visibles, haga clic en el botn Mostrar zonas interactivas y divisiones de la Caja de herramientas. Estos botones ocultan y muestran la capa Web.

Haga clic en el botn Guardar del panel Optimizar.

Escriba un nombre para el preestablecido de optimizacin y haga clic en Aceptar. Los ajustes de optimizacin almacenados aparecen en la parte inferior del men emergente Conguracin del panel Optimizar. Estarn disponibles en todos los documentos que abra a partir de ese momento.

Botn Mostrar zonas interactivas y divisiones

Botn Ocultar zonas interactivas y divisiones

2

El archivo de preestablecidos se guarda en la carpeta Fireworks 3\Settings\Export Settings.

Para compartir los ajustes de optimizacin con otro usuario de Fireworks:

Introduzca el ajuste de optimizacin del panel Optimizar. La divisin seleccionada est lista para exportarse con los ajustes de optimizacin especicados.

Para obtener informacin adicional sobre las divisiones, consulte Dibujo de objetos de divisin en la pgina 182. Almacenamiento y reutilizacin de ajustes Si crea un ajuste de optimizacin personalizado que piense volver a utilizar, gurdelo para utilizarlo ms adelante durante una optimizacin o proceso por lotes. Al guardar un preestablecido personalizado se almacenan: Los ajustes del panel Optimizar La paleta de colores del panel Tabla de color La demora de fotogramas elegida en el panel fotogramas

Copie el archivo de preestablecidos de optimizacin de la carpeta Fireworks 3\Settings\Export Settings a la misma carpeta del otro sistema.
Para eliminar un preestablecido de optimizacin personalizado: 1

En el cuadro Conguracin del panel Optimizar, elija el ajuste de optimizacin que desee eliminar. Haga clic en el botn Eliminar en la parte inferior del panel Optimizar.

No es posible un preestablecido de optimizacin estndar de Fireworks.

Optimizacin de grficos

155

Presentacin preliminar de los ajustes de optimizacin y comportamientos

La ventana Presentacin preliminar muestra el aspecto de la imagen exportada, segn los ajustes de optimizacin actuales. Adems, puede probar los comportamientos y rollovers antes de exportar mediante la ventana Presentacin preliminar.
Para ver una presentacin preliminar de una imagen segn los ajustes de optimizacin actuales:

Estimacin del tiempo de descarga del archivo La ventana Presentacin preliminar muestra el tamao total y el tiempo estimado de descarga de la imagen. El tiempo de descarga estimado es el tiempo promedio que transcurrir al descargar todas las divisiones de la imagen y todos los estados de rollover utilizando los ajustes de optimizacin actuales mediante un mdem de 28,8K. Comparacin de los ajustes de optimizacin Si desea comparar el mismo grco bajo diferentes ajustes de optimizacin, puede dividir la ventana de documento en dos o cuatro presentaciones preliminares utilizando las chas 2-arriba y 4-arriba. Puede asignar ajustes diferentes a cada presentacin preliminar para comparar el efecto de cada eleccin de ajustes sobre la imagen. Al seleccionar las presentaciones preliminares 2arriba o 4-arriba, la primera vista es el archivo original. Puede seguir editando dicha vista y comparar el grco original con una versin optimizada. En la parte inferior de cada presentacin preliminar, encontrar datos sobre los ajustes actuales, incluyendo el formato de archivo, el tiempo estimado de descarga, tamao de archivo, paleta y cantidad de colores.

Haga clic en la cha Presentacin preliminar que se encuentra en la esquina superior izquierda de la ventana de documento.

Para ver los objetos de divisin y guas en la Presentacin preliminar:

Haga clic en el botn Mostrar zonas interactivas y divisiones de la Caja de herramientas.

Para ocultar los objetos de divisin y guas en una Presentacin preliminar:

Haga clic en el botn Ocultar zonas interactivas y divisiones de la Caja de herramientas. Presentacin preliminar de botones y rollovers Mueva el puntero sobre el rollover o botn en la ventana Presentacin preliminar para ver como aparecer en un navegador Web.
Nota: Debe estar viendo el Fotograma 1 para ver los botones o rollovers. Para cambiar al Fotograma 1, haga clic en el panel Fotogramas.

Ventana Presentacin preliminar

156

Captulo 11

Para comparar dos ajustes diferentes de optimizacin: 1

2 3 4

Haga clic en la cha 2-arriba que se encuentra en la esquina superior izquierda de la ventana de documento. Haga clic en una de las presentaciones preliminares para seleccionarla. Introduzca los ajustes en el panel Optimizar y en el panel Tabla de color. Seleccione la otra presentacin preliminar y especique otros ajustes de optimizacin para comparar con la primera.

Seleccin del formato de archivo ms adecuado

GIF, JPEG y PNG son formatos de archivo grco que se utilizan habitualmente en el desarrollo de pginas web, ya que tienen una gran capacidad de compresin. La compresin reduce el tiempo de transferencia a travs de la Internet. Sin embargo, la integridad visual de un grco puede variar de un formato a otro en funcin del mtodo de compresin de cada uno de ellos. Por lo tanto, deber basar su eleccin en el diseo y uso previstos para el grco. Eleccin del formato GIF Graphics Interchange Format, o GIF, es el formato de grco web ms extendido. Aunque solamente puede contener 256 colores, el formato GIF ofrece una satisfactoria compresin de imgenes sin prdida de datos. Adems, los archivos GIF pueden contener un rea transparente y varios fotogramas para animacin. Las imgenes comprimidas sin prdida de datos normalmente no pierden calidad de imagen al comprimirse. El mtodo de compresin del formato GIF consiste en el examen horizontal de las de pxeles, la deteccin de reas slidas de color y la reduccin de reas idnticas de pxeles que se encuentran en el archivo. As pues, las imgenes que contienen reas repetitivas de color plano se comprimen mejor cuando se exportan con el formato GIF. Por lo general, los archivos GIF son idneos para crear grcos animados, logotipos, grcos con reas transparentes o animaciones.
Nota: El tramado o sombreado de archivos GIF produce archivos de mayor tamao.

Para comparar cuatro ajustes diferentes de optimizacin:

Haga clic en la cha 4-arriba que se encuentra en la esquina superior izquierda de la ventana de documento. 2 Seleccione una de las presentaciones preliminares. 3 Introduzca los ajustes en el panel Optimizar y en el panel Tabla de color. 4 Seleccione las otras presentaciones preliminares y especique otros ajustes de optimizacin para compararlas. Al seleccionar 2-arriba o 4-arriba, la primera vista muestra el documento PNG de Fireworks original para que pueda compararlo con las versiones optimizadas. Puede cambiar esta vista para ver otra versin optimizada.
1 Para intercambiar la vista original con una vista optimizada de las Presentaciones preliminares 2arriba o 4-arriba: 1 2

Seleccione la vista original. En el panel Optimizar, elija Reanudar presentacin preliminar del men emergente Conguracin.

Para intercambiar cualquier vista optimizada con la vista original de las presentaciones preliminares 2-arriba o 4-arriba: 1 2

Seleccione una vista optimizada. Elija Original (sin presentacin preliminar) en el men emergente Conguracin

Optimizacin de grficos

157

Eleccin del formato JPEG JPEG es un formato alternativo al formato GIF lo desarroll el Joint Photographic Experts Group especcamente para imgenes fotogrcas. El formato JPEG admite millones de colores (24 bits). JPEG es un formato en el que se descartan algunos datos durante la compresin de archivos, lo que reduce la calidad del archivo nal. Sin embargo, el hecho de descartar datos es aceptable cuando no se observa una reduccin evidente de la calidad. Cuando desee exportar un archivo JPEG, utilice el deslizador emergente Calidad del panel Optimizar para determinar la merma de calidad que se producir despus de comprimir el archivo. Utilice un porcentaje alto para preservar la calidad de la imagen y aplicar menos compresin, como resultado, obtendr archivos de mayor tamao Utilice un porcentaje bajo para producir un archivo pequeo, aunque con menor calidad de imagen. Utilice las presentaciones preliminares 2-arriba y 4-arriba para probar y comparar el aspecto y tamao previsto del archivo con distintos valores de Calidad para un archivo JPEG exportado. JPEG es el formato ptimo para fotografas digitalizadas, imgenes que utilizan texturas, imgenes con transiciones de color en degradado o cualquier imagen que precise ms de 256 colores. Eleccin del formato PNG PNG, o Portable Network Graphic, es el formato de grco web ms verstil. Sin embargo, no todos los exploradores web pueden beneciarse completamente de las ventajas del formato PNG sin recurrir a ltros de conexin. Los archivos PNG son compatibles con profundidades de color de hasta 32 bits, pueden contener transparencia o un canal alfa y ser progresivos.

La compresin PNG es sin prdida de datos, incluso con profundidades altas de color. Comprime las y columnas de pxeles, ofreciendo una compresin mejor que GIF, que slo explora las. El formato PNG es adecuado para la creacin de complejas transparencias activas, grcos con colores de alta densidad y grcos con colores reducidos y altamente comprimidos. PNG es el formato de archivo propio de Fireworks. Sin embargo, los archivos PNG de Fireworks contienen informacin adicional que no se guarda al exportar un archivo PNG para utilizarlo en la Web.

Eleccin de los ajustes de optimizacin para archivos GIF y PNG

Los ajustes de optimizacin de Fireworks son similares para GIF y PNG de 8 bits (PNG8).

Eleccin de la profundidad de color La profundidad de color es el nmero de colores de un grco exportado. Las imgenes GIF se exportan con una profundidad de color de 8 bits (256 colores) o menos. Es posible exportar archivos PNG con una profundidad de color mayor. Una profundidad de color ms alta crea archivos de mayor tamao que, por lo general, no resultan adecuados como grcos web. Utilice PNG con profundidades de color de 24 o 32 bits cuando desee exportar imgenes fotogrcas con tonos continuos o mezclas degradadas complejas de colores.

158

Captulo 11

Eleccin de una paleta de colores Los archivos GIF y PNG de 8 bits exportados contienen una paleta de colores. Una paleta de colores es una lista de hasta 256 colores disponible en el archivo. Slo los colores denidos en dicha paleta aparecen en la imagen; sin embargo, algunas paletas de colores contienen colores que no estn presentes en la imagen. El ajuste de la paleta de colores durante la optimizacin afecta a los colores de la imagen exportada. Para obtener informacin adicional sobre las paletas de colores, consulte Optimizacin de paletas de colores en la pgina 160. Tramado para conseguir una aproximacin a los colores no presentes El tramado consigue aproximaciones de colores que no se encuentran en la paleta actual al alternar dos colores pxel a pxel. El tramado es especialmente til cuando se exportan imgenes que incorporan mezclas complejas o degradados, o bien cuando se exportan imgenes fotogrcas segn un formato de imagen indexado, como GIF. El tramado puede aumentar considerablemente el tamao de los archivos.
Para tramar una imagen que se exportar:

Definicin de reas transparentes Es posible denir reas transparentes en imgenes GIF y PNG para que al aparecer en un navegador Web, el fondo de la pgina Web sea visible a travs de las reas transparentes de la imagen. Para obtener informacin adicional sobre la transparencia, consulte Asignacin de transparencia en la pgina 105. Eliminacin de todos los colores no utilizados de la paleta Elija Eliminar colores no utilizados en el men emergente Opciones del panel Optimizar para crear el archivo ms pequeo con el menor nmero de colores. No seleccione Eliminar colores no utilizados si desea incluir todos los colores de la paleta, con independencia de que se utilicen o no en la imagen exportada. Entrelazado: descarga por segmentos Cuando se visualizan en un navegador web, las imgenes entrelazadas aparecen primero con baja resolucin, y sta aumenta paralelamente a la descarga de las mismas Elija Entrelazado en el men emergente Opciones del panel Optimizar para exportar un archivo GIF o PNG entrelazado.

Introduzca un valor de porcentaje en el cuadro de texto Trama del panel Optimizar. Ajuste de la prdida para reducir el tamao de archivo Para conseguir que las imgenes con formato GIF se compriman an ms introduzca un ajuste de Prdida en el panel Optimizar. Los ajustes altos de prdida consiguen archivos ms pequeos pero con una calidad menor. Normalmente, un ajuste de prdida entre 5 y 15 genera los mejores resultados.

Eleccin de los ajustes de optimizacin para archivos JPEG

Los archivos JPEG se almacenan siempre en color de 24 bits. La compresin JPEG se especializa en la compresin de transiciones de color y degradados.

Optimizacin de grficos

159

Reduccin de la calidad para reducir el tamao de archivo Ajuste el valor Calidad en el panel Optimizar para aumentar o reducir la calidad de una imagen JPEG. Al seleccionar una calidad menor se crean archivos JPEG ms pequeos. Suavizado de los bordes para aumentar la compresin Dena un valor de Suavizado para reducir el tamao de los archivos JPEG. El suavizado difumina los bordes duros, que no se comprimen satisfactoriamente en los archivos JPEG. Un nmero alto produce un difuminado mayor en el JPEG exportado, lo que permite crear archivos ms pequeos. Perfilado de bordes de color y aumento del detalle Elija Perlar bordes JPEG en el men emergente Opciones del panel Optimizar para preservar los bordes nos entre dos colores. Utilice esta opcin cuando desee exportar archivos JPEG que contengan texto o gran detalle para preservar el perl de dichos elementos. La opcin Perlar bordes JPEG aumenta el tamao del archivo. Archivos JPEG progresivos Seleccione JPEG progresivo en el men emergente Opciones del panel Optimizar para exportar un archivo JPEG progresivo. Los archivos JPEG progresivos, al igual que los archivos GIF entrelazados, se muestran primero con baja resolucin, y su calidad aumenta a medida que se realiza su descarga.
Nota: Algunas aplicaciones antiguas de edicin de imgenes no pueden abrir archivos JPEG progresivos.

Optimizacin de paletas de colores

Los archivos GIF y PNG exportados como color de 8 bits o menos utilizan una paleta para almacenar y referenciar los colores utilizados en la imagen exportada. Puede optimizar y personalizar las paletas de colores mediante el panel Tabla de color. Eleccin de la paleta de colores adecuada Seleccione una paleta del men emergente Paleta y optimcela segn convenga. De forma predeterminada, estn disponibles las siguientes paletas: es una paleta personalizada que se crea a partir de los colores del documento. Normalmente, las paletas adaptables permiten producir imgenes de alta calidad y del menor tamao posible.
Adaptable Adaptable WebSnap es una paleta adaptable en la que un color cuyo valor se aproxima al de un color Websafe se convierte en el color Websafe ms parecido.

es una paleta con los 216 colores comunes a los sistemas Windows y Macintosh. A menudo, esta paleta recibe el nombre de paleta Websafe o browser-safe porque produce resultados bastante coherentes entre plataformas y navegadores diferentes.
Web 216 Exacta es una paleta que contiene exactamente los

colores empleados en la imagen. Solamente las imgenes que tengan 256 colores o menos pueden utilizar esta paleta. Si la imagen contiene ms de 256 colores, la paleta cambia a Adaptable
Sistema (Windows)

y Sistema (Macintosh) contienen cada una los 256 colores denidos por los estndares de las plataformas Windows o Macintosh.

160

Captulo 11

Escala de grises

es una paleta compuesta por 256 o menos tonos de gris. Al elegir esta paleta la imagen exportada se convierte en escala de grises. Blanco y negro es una paleta de dos colores que consta slo de blanco y negro. Uniforme es una paleta matemtica basada en valores de pxeles RVA. Personalizada es una paleta que se modica o carga desde una paleta externa o desde un archivo GIF.
Para importar una paleta: 1

Si dene como nmero de colores un valor menor que el nmero de colores reales de una imagen, se descartan algunos colores, comenzando por los menos utilizados. Los pxeles que contienen colores descartados se convierten al color ms aproximado que est incluido en la paleta. Visualizacin de colores en una paleta El panel Tabla de color muestra los colores en la Presentacin preliminar actual al trabajar con colores de 8 bits o menos y permite modicar la paleta de una imagen. Las muestras de color pueden presentar diversos smbolos que indican determinadas caractersticas de los colores.

Cargue una paleta ACO o GIF: Seleccione Cargar paleta en el men emergente Opciones del panel Tabla de color Seleccione Personalizada en men emergente Paleta del panel Optimizar. Localice un archivo ACO o GIF y haga clic en Abrir. Los colores del archivo ACO o GIF se aaden al panel Tabla de color.

Establecimiento del nmero de colores de una paleta Escriba un nmero en la opcin Colores del panel Optimizar para establecer el nmero mximo de colores que desee incluir en la paleta de imagen exportada. El nmero situado en la parte inferior izquierda del panel Tabla de color indica el nmero real de colores que se emplea en la imagen. Reduzca el nmero de colores para crear archivos de menor tamao.

Este smbolo Indica que

El color se ha editado. Esto no cambia el color del documento, solamente lo hace para la exportacin.

El color est bloqueado.

El color es transparente.

El color es Websafe.

El color tiene varios atributos. En este caso, el color es Websafe, est bloqueado y ha sido editado

Opcin Colores

Optimizacin de grficos

161

Si modica el documento, es posible que el panel Tabla de color no muestre todos los colores del documento. En este caso, el ttulo del panel cambia a Colores (Reconstruir), para indicar que debe volver a generar la tabla de color.
Para actualizar los colores del panel Tabla de color para reflejar las ediciones del documento:

Bloqueo de colores en una paleta Es posible bloquear colore independientes para que no se eliminen o se editen al cambiar de paleta o al reducir el nmero de colores de una paleta. Si cambia a otra paleta despus de bloquear colores, los colores bloqueados se aaden a la nueva paleta.
Para bloquear un color seleccionado:

Seleccione Reconstruir tabla de color en el men emergente Opciones del panel Tabla de color.
Para seleccionar un color:

Haga clic en el botn Bloquear situado en la parte inferior del panel Tabla de color o seleccione Bloquear color en el men emergente Opciones.

Haga clic en el color del panel Tabla de color.

Para seleccionar varios colores:

Mantenga presionada la tecla Control (Windows) o Comando (Macintosh) conforme hace clic en los colores.
Para seleccionar un rango de colores: 1 2

Para desbloquear un color: 1 2

Seleccione un color en el panel Tabla de color. Haga clic en el botn Bloquear situado en la parte inferior del panel Tabla de color o deseleccione Bloquear color en el men emergente Opciones.

Haga clic en un color. Mantenga presionada la tecla Mays y haga clic en un segundo color.

Para desbloquear todos los colores:

Para ver todos los pxeles del documento que contienen un determinado color: 1

Seleccione Desbloquear todos los colores en el men emergente Opciones del panel Tabla de color. Edicin de colores en una paleta Puede cambiar un color de la paleta al editarlo en el panel Tabla de color. La edicin de un color reemplaza todas las instancias del mismo en la imagen exportada. La edicin no reemplaza el color en la imagen original.

Haga clic en la cha Presentacin preliminar de la ventana de documento. Haga clic y mantenga presionado el botn del ratn en el panel Tabla de color. Los pxeles que contienen el color seleccionado cambian temporalmente a otro color de resalte hasta que suelte el botn del ratn.

Nota: Al ver los pxeles del documento con la vista 2arriba o 4-arriba, seleccione una vista diferente de la original.

162

Captulo 11

Para editar un color: 1

Definicin de colores Websafe Los colores Websafe son colores comunes a las plataformas Windows y Macintosh. Estos colores no se traman cuando se visualizan en un navegador Web con la pantalla denida en 256 colores. Fireworks aplica y utiliza los colores Websafe de diferentes mtodos.

Seleccione un color y abra el selector de color del sistema: Seleccione un color y haga clic en el botn Editar color situado en la parte inferior del panel Tabla de color.

Haga doble clic en un color del panel Tabla de color. Seleccione un color y elija Editar en el men emergente Opciones.
2

Para forzar todos los colores a colores Websafe:

Elija la paleta Web 216.

Para crear una paleta adaptable que prefiera colores Websafe:

Cambie el color mediante el selector de colores del sistema. El nuevo color reemplaza cada instancia del color reemplazado en el rea de presentacin preliminar.

Seleccione la paleta Adaptable WebSnap. Los colores que no sean Websafe y sean parecidos a un color Websafe se convierten en el color Websafe ms aproximado.
Para forzar un color a su equivalente Websafe ms cercano: 1 2

Nota: Haga clic con el botn derecho del ratn (Windows) o presione la tecla Control y haga clic (Macintosh) sobre un color de la paleta para que aparezca un men de mtodos abreviados correspondientes a las opciones de edicin del color . Para eliminar las ediciones de los colores: 1

Seleccione un color en el panel Tabla de color. Cambie el color: Haga clic en el botn Adaptar a Web Safe.

Seleccione un color editado en el panel Tabla de color. Elimine la edicin: Haga clic para deseleccionar el botn correspondiente a la edicin que desee eliminar. Por ejemplo, para desbloquear un color, seleccione un color bloqueado y haga clic en el botn Bloquear en la parte inferior del panel Tabla de color. Seleccione Eliminar edicin en el men emergente Opciones del panel Tabla de color. El color vuelve a su estado original, sin ediciones. Elija Adaptar a Web Safe en el men emergente Opciones del panel Tabla de color. El hecho de cambiar un color a color Websafe en el panel Tabla de color no afecta a la imagen original pero s a la versin exportada de la misma.

Optimizacin de grficos

163

Almacenamiento de paletas Es posible guardar paletas personalizadas como archivos de paletas externos. Las paletas guardadas pueden utilizarse con otros documentos de Fireworks o en otras aplicaciones que admitan paletas externas como Adobe Photoshop y Macromedia FreeHand.
Para guardar una paleta de colores personalizada: 1

Elija Guardar paleta en el men emergente Opciones. Escriba un nombre para la paleta y elija una carpeta de destino. Haga clic en Guardar.

Puede cargar el archivo de paleta en el panel Muestras o utilizarlo al exportar otros documentos.

164

Captulo 11

12

CAPTULO 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Exportacin

Despus de crear grcos en Fireworks, es posible optimizarlos y exportarlos a los formatos ms comunes de la Web y a los formatos de las aplicaciones de grcos vectoriales. Los ajustes de exportacin y optimizacin no cambian el documento original de Fireworks, por tanto puede crear una versin original del documento y exportarla con diferentes formatos Web y de impresin. Antes de exportar para la Web, debe optimizar el archivo que desee exportar. Para obtener informacin adicional sobre la optimizacin de una imagen, consulte Optimizacin en el rea de trabajo en la pgina 154. Si desea optimizar como parte del proceso de exportacin, el cuadro de dilogo Presentacin preliminar de la exportacin ofrece todas las opciones del rea de trabajo para esta tarea. El cuadro de dilogo Presentacin preliminar de la exportacin muestra cualquier cambio que realice con lo que puede ver cmo los cambios afectan a la calidad y el tamao de la imagen. Si no est familiarizado con la optimizacin ni con la exportacin de grcos Web, utilice el Asistente de exportacin. Este asistente le gua en todo el proceso de exportacin y le sugiere diferentes ajustes. Puede exportar grcos a otras aplicaciones de grcos vectoriales como Macromedia FreeHand y Flash, y Adobe Illustrator. Adems, puede copiar y pegar los trazados Fireworks en aplicaciones de vectores.

165

Exportacin de una imagen

Si optimiz un grco en el rea de trabajo mediante el panel Optimizar y el panel Tabla de color, puede utilizar Archivo > Exportar para exportarlo. De esta forma no se abrir el cuadro de dilogo Presentacin preliminar de la exportacin y se abrir el cuadro de dilogo Exportar.

La opcin Personalizado permite especicar una ubicacin para el cdigo HTML. Copiar al Portapapeles exporta la informacin HTML en el portapapeles en lugar de hacerlo en un archivo, de esta forma podr pegarla directamente en un editor HTML.
Nota: Fireworks genera automticamente los vnculos entre el archivo HTML y las imgenes. 7

Haga clic en Guardar (Windows) o Exportar (Macintosh).

Resultados de la exportacin
Al exportar, Fireworks genera todos los archivos que necesita para volver a crear la imagen en una pgina Web:
Para exportar una imagen: 1 2

5 6

Seleccione Archivo > Exportar. Seleccione una ubicacin para los archivos exportados. La ubicacin es la carpeta en la que se colocarn las imgenes exportadas. Normalmente, la mejor ubicacin es una carpeta de su sitio local. Asigne un nombre al archivo. Para obtener informacin adicional sobre la asignacin de nombres a varios archivos, consulte Denominacin de divisiones en la pgina 186. Seleccione las opciones de divisin. Consulte Exportacin de objetos con divisiones en la pgina 170. Elija un estilo HTML que se corresponda con el editor HTML. Seleccione la ubicacin del archivo HTML: La opcin Mismo directorio exporta el archivo HTML en la misma carpeta que las imgenes. La opcin Subir un nivel exporta el archivo HTML en una carpeta por encima de las imgenes. Es la ubicacin ms comn.

Genera un archivo HTML que contiene el cdigo JavaScript y tablas necesarios para volver recrear una imagen dividida o para crear la funcionalidad del rollover. El cdigo HTML generado por Fireworks siempre contiene un vnculo a la imagen exportada y dene el color de fondo de la pgina Web al color del lienzo o el color mate del grco. Para obtener informacin adicional sobre el uso del cdigo HTML generado con Fireworks, consulte Descripcin del cdigo HTML de Fireworks en la pgina 234. Genera uno o varios archivos de imagen, segn el nmero de divisiones creadas en el documento y de estados incluidos en los botones o rollovers del documento. Genera, si fuera necesario, un archivo llamado Shim.gif, que es un archivo GIF transparente de 1x1 pxeles que Fireworks utiliza en el cdigo HTML para solucionar problemas de espaciado al reorganizar imgenes con divisiones en una tabla HTML. Puede decidir si Fireworks debe exportar o no un suplemento. Para obtener informacin adicional sobre el control de suplementos, consulte Uso de suplementos en tablas anidadas durante la divisin en la pgina 170.

166

Captulo 12

Exportacin con el Asistente de exportacin

Utilice el Asistente de exportacin para recorrer el proceso de exportacin paso a paso. En l puede especicar el destino del archivo y el uso previsto del mismo. El Asistente de exportacin propone un tipo de archivo y varias opciones de optimizacin. Si preere optimizar hasta un tamao mximo de archivo, el Asistente de exportacin optimiza el archivo exportado para ajustarlo dentro de la restriccin de tamao denida en la opcin Tamao de archivo de exportacin objetivo.

5 6 7

Si fuera necesario, cambie los ajustes de exportacin. Haga clic en Exportar. En el cuadro de dilogo Exportar, escriba un nombre de archivo, elija las opciones de divisin y estilo HTML y seleccione una carpeta de destino, por ltimo, haga clic en Guardar (Windows) o Exportar (Macintosh).

Optimizacin y presentacin preliminar durante la exportacin

El cuadro de dilogo Presentacin preliminar de la exportacin muestra todos los controles de optimizacin de Fireworks, asimismo presenta hasta cuatro vistas de la imagen exportadas. El panel Opciones del cuadro de dilogo Presentacin preliminar de la exportacin contiene todos los controles de optimizacin del panel Optimizar y el panel Tabla de color. Las opciones del panel Animacin de Presentacin preliminar de la exportacin tambin se encuentran en el panel Fotogramas. Adems de los controles de optimizacin, el cuadro de dilogo Presentacin preliminar de la exportacin tiene funciones nicas. Por ejemplo, el cuadro de dilogo Presentacin preliminar de la exportacin aparece al denir valores de optimizacin personalizados durante un proceso por lotes o al ejecutar Fireworks desde Dreamweaver para optimizar o editar una imagen colocada en Dreamweaver. Para obtener informacin adicional sobre la optimizacin de imgenes, consulte Optimizacin en el rea de trabajo en la pgina 154.
Para exportar un grfico mediante Presentacin preliminar de la exportacin: 1 2 3

Para exportar un grfico con el Asistente de exportacin: 1 2

Seleccione Archivo > Asistente de exportacin. Responda a las preguntas de cada panel y haga clic en Continuar para seguir con el panel siguiente. Aparece la pantalla Resultados del anlisis con recomendaciones sobre los formatos de archivo.
Nota: Elija Tamao de archivo de exportacin objetivo en el primer panel para optimizar hasta alcanzar un tamao mximo de archivo.

Haga clic en Salir para ver los resultados. La ventana de presentacin preliminar 2-arriba muestra las opciones recomendadas de exportacin. Haga clic en el rea de presentacin preliminar que contenga el formato de archivo que desee utilizar.

Seleccione Archivo > Presentacin preliminar de la exportacin. Elija ajustes de exportacin y de optimizacin. Haga clic en Exportar.

Exportacin

167

En el cuadro de dilogo Exportar, escriba un nombre de archivo, elija las opciones de divisin y estilo HTML y seleccione una carpeta de destino, por ltimo, haga clic en Guardar (Windows) o Exportar (Macintosh).

Para ver la presentacin preliminar en el cuadro de dilogo Presentacin preliminar de la exportacin 1

Presentacin preliminar de la optimizacin en Presentacin preliminar de la exportacin El rea de presentacin preliminar muestra el grco tal y como se exportar, y proporciona una estimacin del tamao del archivo. Asimismo indica el tiempo aproximado de descarga segn los valores de exportacin actuales.
Conjunto de opciones para la presentacin preliminar de exportacin Guardar la configuracin de exportacin utilizada en la vista activa

Tamaos de archivo y tiempos de descarga estimados

Visualizar los resultados de la configuracin de exportacin elegida

Para ampliar o reducir la presentacin preliminar, seleccione la herramienta Aumentar y reducir. Haga clic para aumentar la vista. Utilice Alt-clic (Windows) u Opcinclic (Macintosh) para reducir la ampliacin. 2 Para realizar una panormica en el rea de presentacin preliminar, elija la herramienta Puntero y arrastre el puntero dentro de una presentacin preliminar o mantenga presionada la barra espaciadora en una presentacin preliminar. Cuando estn abiertas varias vistas, todas las presentaciones preliminares se amplan por igual y tienen el mismo encuadre para mostrar la misma porcin de la imagen. 3 Para comparar los ajustes de optimizacin en la Presentacin preliminar de la exportacin, haga clic en un botn de vista dividida para dividir el rea de presentacin preliminar en dos o cuatro vistas.

Puede utilizar vistas divididas para comparar distintos ajustes para alcanzar el tamao de archivo ms pequeo que mantenga un nivel aceptable de calidad. Tambin puede restringir el tamao de archivo en la Presentacin preliminar de exportacin mediante el Asistente tamao. Cuando se exportan archivos GIF animados o rollovers JavaScript, el tamao de archivo previsto es la suma de todos los fotogramas.
Nota: Para aumentar la velocidad de actualizacin de la pantalla en el cuadro de dilogo Presentacin preliminar de la exportacin no seleccione Presentacin preliminar. Presione Esc para detener la actualizacin de la pantalla del rea de presentacin preliminar mientras cambie las conguraciones.

Cada ventana de presentacin preliminar puede mostrar una vista preliminar del grco exportado segn determinados valores de exportacin. Para optimizar un grco basado en el tamao mximo de archivo, haga clic en el botn Exportar a tamao para abrir el asistente Optimizar tamao. Especique el tamao de archivo.

El asistente Optimizar tamao intenta obtener un archivo con el tamao solicitado mediante los mtodos siguientes: Ajustando la calidad JPEG Modicando el suavizado JPEG

168

Captulo 12

Alterando el nmero de colores en imgenes de 8 bits Cambiando la conguracin de trama en imgenes de 8 bits Activando o desactivando valores de optimizacin

Seleccione un destino y haga clic en Guardar (Windows) o Exportar (Macintosh). Cada capa se exporta como una imagen independiente segn los ajustes de optimizacin especicados en el panel Optimizar. El nombre de la capa del panel Capas determina el nombre de archivo de cada archivo exportado.
4

Exportacin de fotogramas o capas como varios archivos

Fireworks puede exportar todas las capas o todos los fotogramas de un documento como archivos de imgenes independientes utilizando un solo comando de exportacin.
Para exportar fotogramas como archivos independientes:

Exportacin de una rea

Utilice la herramienta Exportar rea para exportar una parte de un grco de Fireworks.

Herramienta Exportar rea

Seleccione Archivo > Exportacin especial > Capas/Fotogramas en archivos. 2 Seleccione Fotogramas en el men emergente Archivos de 3 Seleccione Recortar imgenes para recortar automticamente las imgenes exportadas para encajar los objetos en cada fotograma. Si desea exportar fotogramas con el mismo tamao que el documento, no seleccione Recortar imgenes. 4 Introduzca el nombre base para cada archivo en el cuadro de texto Nombre base. 5 Seleccione un destino y haga clic en Guardar (Windows) o Exportar (Macintosh). Cada fotograma se exporta como una imagen independiente segn los ajustes de optimizacin especicados en el panel Optimizar.
1 Para exportar capas como archivos independientes: 1 2 3

Para exportar una parte de un documento: 1 2

Seleccione Archivo > Exportacin especial > Capas/Fotogramas en archivos. Seleccione Capas en el men emergente Archivos de. Seleccione Recortar imgenes para recortar automticamente las imgenes exportadas para encajar los objetos en cada capa. Si desea exportar capas con el mismo tamao que el documento, no seleccione Recortar imgenes.

Seleccione la herramienta Exportar rea de la Caja de herramientas. Arrastre un recuadro que dena la parte del documento que desee exportar. Despus de soltar el botn del ratn, el rea que se exportar permanece resaltada mediante un recuadro. Cambie el tamao del rea que desee exportar: Mantenga presionada la tecla Mays y arrastre para cambiar proporcionalmente el tamao del rea que desee exportar. Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) y arrastre para cambiar el tamao del recuadro respecto al centro. Mantenga presionadas las teclas Alt-Mays (Windows) u Opcin-Mays (Macintosh) y arrastre para restringir las proporciones y cambiar el tamao respecto al centro. Utilice las teclas de echa para mover el recuadro. Mantenga presionada la tecla Mays mientras utiliza las teclas de echa para cambiar el tamao del recuadro. Abra la presentacin preliminar de exportacin: Haga doble clic en el interior del rea a exportar seleccionada.
Exportacin 169

Haga clic en el botn Exportar del panel Opciones de herramientas. La Presentacin preliminar de exportacin muestra el rea denida mediante el recuadro de seleccin del rea a exportar. 5 Ajuste las conguraciones en la Presentacin preliminar de exportacin y haga clic en Exportar. 6 En el cuadro de dilogo Exportar, escriba un nombre de archivo y seleccione una carpeta de destino, por ltimo, haga clic en Guardar (Windows) o Exportar (Macintosh). Para cancelar la operacin sin llegar a exportar, haga doble clic fuera del recuadro de seleccin del rea a exportar, presione Esc o seleccione una herramienta diferente.

Divisiones: Fotograma actual exporta divisiones denidas por los objetos de divisin, pero solo imgenes a partir del fotograma actual. La opcin Dividir siguiendo las guas exporta divisiones denidas por las guas existentes.
5

En el cuadro de dilogo Exportar, elija un destino y las opciones HTML, por ltimo, haga clic en Guardar (Windows) o Exportar (Macintosh). Cada divisin se exporta con los ajustes de optimizacin individuales denidos para cada divisin del panel Optimizar.

Uso de suplementos en tablas anidadas durante la divisin Cuando Fireworks exporta HTML para una imagen con divisiones, las divisiones se ensamblan en una tabla. Puede exportar la tabla de los documentos con divisiones utilizando suplementos o mediante tablas anidadas: Los suplementos son imgenes que permiten espaciar las celdas de tabla para conseguir una alineacin correcta al mostrarse en un navegador. Una tabla anidada es una tabla dentro de otra tabla. La tabla anidada no utiliza suplementos. Una tabla anidada incluye cdigo HTML adicional, que puede tardar ms en cargarse en un navegador. Es posible especicar valores diferentes de exportacin de tabla para cada objeto dividido de cada documento. Si lo desea, puede utilizar el botn Fijar predeterminados del cuadro de dilogo Propiedades HTML para aplicar estos valores como predeterminados para todos los nuevos documentos.
Para definir la forma en que Fireworks exporta tablas HTML: 1

Exportacin de objetos con divisiones

Los diseadores Web a veces crean un grco y despus lo cortan en porciones. Estas porciones se vuelven a ensamblar en una pgina Web mediante una tabla HTML. Este proceso recibe el nombre de creacin de divisiones. Para ms informacin sobre la creacin de divisiones, consulte Dibujo de objetos de divisin en la pgina 182.
Para exportar objetos con divisiones: 1 2

Seleccione objetos con divisiones. Seleccione Archivo > Exportacin especial > Divisin seleccionada. Si seleccion una nica divisin, aparece el cuadro de dilogo Presentacin preliminar de la exportacin. Si seleccion varias divisiones aparece el cuadro de dilogo Exportar. En el cuadro de dilogo Exportar elija un mtodo de divisin: La opcin Ninguna evita que se divida al exportar, incluso si dibuj objetos de divisin en el documento. La opcin Utilizar objetos de divisin exporta divisiones denidas en los objetos de divisin.

Seleccione Archivo > Propiedades HTML, o haga clic en el botn Opciones del cuadro de dilogo Exportar.

170

Captulo 12

En el men emergente Tabla, elija una opcin de exportacin de tabla: Tablas anidadas - Sin suplementos crea una tabla anidada sin suplementos. Tabla nica - Sin suplementos crea una sola tabla sin suplementos. Esta opcin puede provocar que las tablas aparezcan incorrectamente en algunos navegadores que no puedan presentar celdas tablas de anchura ja. Suplemento transparente de 1 pxel utiliza un archivo GIF transparente de 1x1 pxeles como suplemento cuyo tamao puede cambiarse conforme sea necesario en el cdigo HTML. Suplementos de divisiones de imgenes aplica divisiones adicionales en la imagen, creando suplementos segn sea necesario a partir de las porciones actuales de la imagen. Haga clic en Aceptar.

Rellenos de textura, patrones, tramados web, y rellenos degradados lineales (FreeHand) Objetos de divisiones y mapas de imagen Varias opciones de formato de texto Color de guas, cuadrculas y lienzo Imgenes de mapa de bits (FreeHand) Adems, los bordes de los objetos sern duros, el texto vertical ser horizontal y el texto de derecha a izquierda se cambia a texto de izquierda a derecha. Exportacin a FreeHand e Illustrator Es posible exportar trazados de Fireworks a FreeHand o Illustrator para utilizarlos en grcos impresos o para editarlos con herramientas de edicin de trazado ms complejas.
Para exportar un grfico para FreeHand o Illustrator: 1

Exportacin de trazados vectoriales

Fireworks ofrece varias nuevas funciones para exportar trazados de vectores a aplicaciones vectoriales. Por ejemplo, es posible exportar trazados de vectores para que se abran en Macromedia FreeHand 8, Adobe Illustrator 7 o posterior y en Flash 3 o posterior. Adems, puede copiar y pegar un trazado de vector en otros programas de grcos vectoriales. Al exportar a FreeHand o Illustrator, el aspecto de los objetos puede ser diferente, dependiendo de si una funcin Fireworks se admite en FreeHand o Illustrator. Las siguientes funciones no se admiten en FreeHand ni en Illustrator y no aparecern en el archivo exportado: Efectos automticos Opacidad y modos de mezcla

Seleccione Archivo > Exportacin especial > Illustrator 7. Haga clic en el botn Congurar. Determine lo que debe hacerse con las capas: Seleccione Exportar slo fotograma actual para preservar los nombres de capas. Seleccione Convertir fotogramas en capas para contraer todas las capas de Fireworks y exportar cada fotograma como una capa.

2 3

Seleccione Compatible con FreeHand 8 para utilizar el archivo exportado en FreeHand. Esta opcin omite las imgenes y convierte los rellenos degradados en rellenos slidos.

Haga clic en Aceptar para nalizar la exportacin.

Exportacin

171

Exportacin a Macromedia Flash Puede exportar trazados de Fireworks a Macromedia Flash para utilizarlos como grcos y animaciones de Flash en su sitio Web.
Nota: Para exportar un trazado de Fireworks que no contenga caractersticas de mapa de bits, copie y pegue el trazado de vectores en Flash mediante Editar > Copiar como trazados.

Para exportar un grfico a Flash: 1

Seleccione Archivo > Exportacin especial > Flash SWF. Para elegir cmo se exportan los objetos, haga clic en el botn Opciones. Para mantener el aspecto del documento, elija las opciones: Seleccione objetos: Mantener aspecto y Texto: Convertir en trazados. Para convertir los objetos de trazado se convierten en objetos de imagen y preservar el aspecto de los trazos y rellenos aplicados. Seleccione Texto: Convertir en trazados para convertir el texto en trazados y preservar el espaciado y ajuste entre caracteres introducidos en Fireworks.

Algunos de los formatos se pierden a menos que elija Mantener aspecto en el cuadro de dilogo Opciones de exportacin de Flash SWF. Se mantienen el color y el tamao de los trazos. Los formatos que no se mantienen en la exportacin: Efectos automticos Opacidad y modos de mezcla (los objetos con opacidad se convierten en smbolos con un canal alfa). Grupos de mscara Objetos de divisin, mapas de imagen y comportamientos (por ejemplo, los rollovers no se mantienen). Algunas de las opciones de formatos de texto, como el ajuste entre caracteres trazos de mapa de bits Fundido de bordes Capas El suavizado de objetos (el reproductor Flash aplica suavizado en el propio documento. Por tanto, el suavizado se aplica en el documento al exportarlo). Al exportar a Flash, puede realizar varias elecciones sobre la forma en que se exportarn los objetos.
4

Seleccione Objetos: Mantener trazados y Texto: Mantener editabilidad para mantener la editabilidad de los trazados. Haga clic en Aceptar para nalizar la exportacin.

Copia y pegado de trazados seleccionados Utilice Copiar como trazados para copiar trazados seleccionados de Fireworks a otras aplicaciones como FreeHand, Flash, Adobe Photoshop, Illustrator o CorelDRAW. El comando Copiar como trazados copia slo los trazados de Fireworks.
Para copiar trazados seleccionados de Fireworks: 1 2

Seleccione Editar > Copiar como trazados. Cambie a otro documento abierto de otra aplicacin. Pegue los trazados en la otra aplicacin.

172

Captulo 12

13

CAPTULO 13

Creacin de zonas interactivas y de mapas de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Al acceder a la pgina principal de la mayora de sedes Web, lo ms probable es que encuentre un mapa de imgenes. Un mapa de imagen es un grco o grupo de grcos que aparece en una pgina Web y que dispone de reas especiales denominadas zonas interactivas. La ubicacin y el tamao de la zona interactiva se denen en el archivo HTML de la pgina Web. Al desplazar el cursor sobre una zona interactiva, ste adquiere la forma de una mano pequea. Normalmente, al hacer clic en una zona interactiva se abre una pgina Web y para esto, se hace referencia a la direccin URL que se le ha asignado en el cdigo HTML. El proceso de creacin de un mapa de imagen en Fireworks sigue estos tres pasos generales: Creacin del mapa de imagen en el documento PNG de Fireworks Exportacin del grco y de los archivos HTML Ubicacin del HTML del mapa de imagen en la posicin adecuada de la sede Web o en otro archivo HTML

173

Eleccin de grficos origen para mapas de imagen

El grco origen es la base sobre la que se crea el mapa de imagen. El grco origen puede ser una imagen con reas bien denidas, una la de botones con sus etiquetas o una simple lista de temas. Tambin puede tratarse de un grco complejo que incluya todos estos elementos, y muchos ms. El grco origen puede crearse en Fireworks o importarse. De cualquier manera, siempre debe elegirse un grco compuesto por elementos que todo el mundo pueda reconocer para las zonas interactivas.
Para establecer un grfico origen para un mapa de imagen: 1 2

Para volver a dibujar una zona interactiva rectangular o circular: 1 2

Abra el grco origen. Elija las herramientas Zona interactiva rectangular o Zona interactiva circular.

Arrastre la herramienta Zona interactiva para dibujar una zona interactiva sobre un rea del grco origen. Mantenga presionada la tecla Alt (Windows) u Opcin (Macintosh) para dibujar rectngulos o crculos a partir de un punto central.

Cree o importe un grco. Elija Modicar > Tamao del lienzo e introduzca las dimensiones del mapa de imagen. Seleccione Archivo > Guardar como para asignar nombre al documento origen de Fireworks.

Creacin de zonas interactivas con forma irregular Las zonas interactivas pueden tener formas distintas que no sean rectngulos o crculos. Tambin puede crear zonas interactivas poligonales.
Para crear una zona interactiva con la herramienta Zona interactiva poligonal: 1

El archivo PNG de Fireworks en el que se crea el mapa de imagen no es el mapa de imagen en s. Para crear un mapa de imagen en un navegador Web, es preciso combinar el grco exportado y los archivos HTML.

Elija la herramienta Zona interactiva poligonal.

Creacin de zonas interactivas

Despus de identicar las reas del grco origen que podran servir como zonas interactivas, puede crear estas zonas y asignarles vnculos URL. Puede dibujar zonas interactivas o crear una zona interactiva al trazar objetos.

Haga clic en la herramienta para trazar los puntos, igual que si estuviese dibujando segmentos rectos con la herramienta Pluma. El relleno permite denir el rea de la zona interactiva, sin importar si el trazado est abierto o cerrado.

174

Captulo 13

Para crear una zona interactiva mediante el trazado de uno o varios objetos seleccionados: 1

La capa Web aparece siempre que se crea una zona interactiva o una divisin.
Para mostrar u ocultar la capa Web:

Elija Insertar > Zona interactiva. Si selecciona varios objetos, aparece un cuadro de dilogo en el que se pregunta si desea crear una nica zona interactiva rectangular que abarque todos los objetos o una zona interactiva individual con la forma de cada objeto. Haga clic en el botn Mostrar zonas interactivas y divisiones de la Caja de herramientas.

En el panel Capas, haga clic en el icono en forma de ojo de la capa Web. Otra forma de crear una zona interactiva poligonal consiste en convertir otra zona interactiva circular en poligonal y, a continuacin, arrastrar los puntos. Para obtener ms informacin sobre la conversin de zonas interactivas, consulte Edicin de zonas interactivas en la pgina 178. Visualizacin de zonas interactivas en la capa Web Todos los documentos PNG de Fireworks contienen la capa Web, en la que estn situados todos los objetos de zona interactiva y de divisin. Para obtener ms informacin sobre las divisiones, consulte Dibujo de objetos de divisin en la pgina 182. De forma predeterminada, los objetos de zona interactiva de la capa Web tienen un color azul traslcido, mientas que los objetos de divisin son verdes traslcidos. Si lo desea, puede cambiar el color de los objetos Web para organizarlos.
Para organizar objetos Web por el color: 1 Para asignar un valor URL a una zona interactiva: 1 2

Asignacin de valores URL a zonas interactivas

Un valor URL (Universal Resource Locator) es una direccin Internet de una pgina o un archivo especcos. Para asignar valores URL a cada zona interactiva, utilice el inspector Objeto.

Seleccione uno o varios objetos de zona interactiva o de divisin. Elija Ventana > Objeto para abrir el inspector Objeto. Elija un color en el men emergente de la paleta de colores.

Seleccione una zona interactiva en la capa Web. Elija Ventana > Objeto para abrir el inspector Objeto. Introduzca un valor URL en el cuadro de texto Vnculo. Consulte

Creacin de zonas interactivas y de mapas de imagen

175

Introduzca una descripcin alternativa (alt), que es el texto que aparece en un navegador Web conforme se descarga la imagen. Introduzca un nombre de marco HTML o elija un destino reservado. Un destino es un marco de pgina Web alternativo o una ventana de navegador Web en donde se abre el archivo vinculado. Consulte Eleccin de una opcin Destino en la pgina 177. Para organizar la capa Web, elija un color de zona interactiva alternativo en el men emergente de superposicin de colores.

Editar sirve para editar el nombre de un valor URL en una biblioteca. Importar URL permite importar estos valores desde archivos HTML o bibliotecas URL. Exportar URL permite exportar estos valores a distintas bibliotecas.
Para crear una biblioteca URL nueva: 1

Seleccione Nuevo URL en el men emergente Opciones del panel URL. Introduzca un nombre de biblioteca y haga clic en Aceptar.

Administracin de valores URL con el panel URL Si piensa introducir los mismos valores URL varias veces, puede crear una biblioteca de valores URL en el panel URL y guardar estos valores en ella.

Fireworks almacena los valores URL en un archivo de marcadores HTML de la carpeta Fireworks 3\Settings\URL Libraries. Estos nombres de archivo aparecen en el men emergente Biblioteca del panel URL.
Para aadir una direccin URL a una biblioteca URL: 1

Elija una biblioteca en el men emergente Biblioteca. Introduzca un valor URL absoluto o relativo en el cuadro de texto Vnculo. Haga clic en el botn Aadir URL actual a biblioteca.

Las bibliotecas URL estn disponibles para todos los documentos de Fireworks. Puede asignar valores URL de varias bibliotecas a zonas interactivas de un solo grco. Las bibliotecas URL pueden gestionarse mediante los comandos del men emergente Opciones del panel URL: Aadir permite agregar valores URL existentes en un documento a la biblioteca, o eliminarlos de sta. Aadir URL permite agregar valores URL a las bibliotecas, o eliminarlos de stas.
Para asignar una direccin URL de la biblioteca URL a una zona interactiva seleccionada: 1

Elija una biblioteca en el men emergente Biblioteca. En el panel URL, haga clic en una direccin URL de la lista.

176

Captulo 13

Introduccin de valores URL absolutos o relativos Los valores URL que se introducen en el inspector Objeto o en el panel URL pueden ser absolutos o relativos: Si desea establecer un vnculo con una pgina Web que no pertenezca a su sede Web, debe utilizar una direccin URL absoluta. Para establecer un vnculo con una pgina Web de su sede Web, puede utilizar una direccin URL absoluta o relativa. Los valores URL absolutos son direcciones URL completas que incluyen el protocolo de servidor, que suele ser http:// en el caso de pginas Web. Por ejemplo, http://www.macromedia.com/support/reworks es la direccin URL absoluta de la pgina Web de asistencia tcnica de Macromedia Fireworks. Aunque los valores URL absolutos son siempre direcciones exactas que no dependen de la ubicacin del documento origen, los vnculos no se establecen correctamente si se traslada el documento de destino. Los valores URL relativos estn relacionados con la carpeta que contiene el documento origen. En estos ejemplos se muestra la sintaxis de navegacin de los valores URL relativos: le.htm establece un vnculo con un archivo ubicado en la misma carpeta que el documento origen. ../../le.htm establece un vnculo con un archivo ubicado dos carpetas por encima de la carpeta que contiene el documento origen. Cada ../ representa un paso. htmldocs/le.htm establece un vnculo con un archivo ubicado en una carpeta llamada htmldocs, que se encuentra debajo de la carpeta que contiene el documento origen. Los valores URL relativos suelen ser los ms fciles de utilizar para establecer un vnculo con archivos que van a permanecer en la misma carpeta que el documento actual.

Especificacin de texto alternativo El texto alternativo aparece en el marcador de posicin de la imagen mientras sta se descarga de la Web. Tambin se muestra en lugar del grco cuando la imagen no se descarga correctamente. En algunas versiones de Internet Explorer, el texto tambin aparece junto al puntero como un cuadro de sugerencias.
Para especificar el texto alternativo:

Escriba el texto en el cuadro de texto Alt del inspector Objeto. Eleccin de una opcin Destino 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 inspector Objeto, puede especicar un destino para la zona interactiva o la divisin seleccionada: Escriba el nombre del marco HTML en el que quiera abrir el documento vinculado. Elija un destino reservado en el men emergente Destino. Las opciones reservadas de destino son las siguientes:
_blank carga los documentos vinculados en una ventana de navegador nueva sin nombre.

carga el documento vinculado en el conjunto de marcos o en la ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el documento vinculado se cargar en la ventana de navegador completa.
_parent _self carga el documento vinculado en el mismo marco o en la misma ventana que el vnculo. Normalmente no es necesario especicar el destino, ya que est implcito.

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

Creacin de zonas interactivas y de mapas de imagen

177

Edicin de zonas interactivas

Al igual que los objetos grcos, los objetos Web tienen puntos y trazados. Para editar una zona interactiva, utilice las herramientas Puntero, Seleccionar en nivel inferior y Transformar. Las zonas interactivas no se pueden editar con otras herramientas de edicin, como Remodelar.
Para editar una zona interactiva seleccionada utilizando puntos: 1

Para inclinar una zona interactiva seleccionada: 1

Para convertir la zona interactiva en otra poligonal, elija Polgono en el men emergente Forma del inspector Objeto. Elija la herramienta Inclinacin y arrastre los tirados de transformacin.

Elija la herramienta Puntero o Seleccionar en nivel inferior.

Configuracin de las opciones de mapa de imagen

Los mapas de imagen de tipo cliente se han convertido en la opcin ms utilizada por los diseadores Web. En los mapas de imagen de tipo cliente, la informacin de hipervnculo se almacena en el documento HTML. En el caso de los mapas de imagen de tipo servidor, esta informacin se almacena en el servidor en un archivo de mapa de imagen independiente. Cuando los usuarios hacen clic en una zona interactiva de los mapas de imagen de tipo cliente, el valor URL asociado se enva directamente al servidor. Esto hace que los mapas de imagen de cliente sean ms rpidos que los de tipo servidor, ya que el servidor no necesita interpretar la ubicacin en la que se ha hecho clic. Netscape Navigator 2.0 y posteriores, NCSA Mosaic 2.1 y 3.0 y todas las versiones de Microsoft Internet Explorer admiten mapas de imagen de tipo cliente.

Arrastre los puntos: Una zona interactiva rectangular cambiar de posicin y de dimensiones, pero seguir siendo rectangular. Una zona interactiva circular cambiar de posicin y de dimetro, pero continuar siendo circular. Una zona interactiva poligonal cambiar de forma en funcin de la ubicacin del punto desplazado.

Para convertir una zona interactiva seleccionada en otra rectangular, circular o poligonal: 1

Elija Ventana > Objeto para abrir el inspector Objeto. Elija Rectngulo, Crculo o Polgono en el men emergente Forma.

Para transformar una zona interactiva seleccionada: 1 2

Seleccione la herramienta Transformar. Arrastre los tiradores de transformacin.

178

Captulo 13

Despus de crear todas las zonas interactivas, utilice el cuadro de dilogo Propiedades HTML para congurar las opciones que afectan al mapa de imagen.

Exportacin de mapas de imagen

Una vez que se crea un mapa de imagen en el documento PNG de Fireworks, es preciso exportarlo para que funcione como un mapa de imagen en un navegador Web. Al exportar un mapa de imagen, se genera una serie de archivos. Cuando se exporta un mapa de imagen de cliente, se generan el archivo grco y el archivo HTML que contienen la informacin de mapa para las zonas interactivas y los vnculos URL correspondientes. Mediante la exportacin de un mapa de imagen de servidor, se generan el archivo grco, un archivo de mapa separado y un archivo HTML que contiene un vnculo con el archivo de mapa.

Para configurar las opciones de un mapa de imagen simple: 1

Elija Archivo > Propiedades HTML. Obvie la seccin Opciones de divisiones. Especique si el mapa de imagen es de tipo cliente, servidor o ambos. Los navegadores que pueden utilizar los dos tipos dan prioridad a los mapas de imagen de tipo cliente. Elija una valor de URL de fondo para las partes de la imagen que no se hayan denido mediante objetos de zona interactiva. Introduzca una descripcin de imagen alternativa, que aparece cuando la imagen est desactivada o no est disponible.

Al exportar un mapa de imagen dividida, suelen generarse varios archivos grcos. Para obtener ms informacin sobre la divisin, consulte Dibujo de objetos de divisin en la pgina 182.
Para exportar un mapa de imagen: 1

Para preparar el grco con el n de exportarlo, debe optimizarlo. Para obtener ms informacin sobre la optimizacin de grcos en el rea de trabajo, consulte Optimizacin en el rea de trabajo en la pgina 154.

Elija Archivo > Exportar para abrir el cuadro de dilogo. Abra la carpeta en la que quiera situar el archivo grco y asigne un nombre al archivo. Si ya ha creado una estructura de archivos local para la sede Web, puede guardar el grco en la carpeta correcta de esta sede. Por el momento, no utilice la opcin Divisiones.

3 Nota: Si desea guardar toda la informacin en el cuadro Propiedades HTML para utilizarla como valores predeterminados en los nuevos documentos de Fireworks, haga clic en Fijar predeterminados.

Creacin de zonas interactivas y de mapas de imagen

179

Elija un formato de estilo HTML. Si se elige una opcin distinta de la opcin Ninguna, se da instrucciones a Fireworks para que genere un documento HTML durante la exportacin. Para obtener ms informacin sobre los estilos HTML, consulte Exportacin de un archivo HTML en la pgina 236.

Haga clic en el botn Examinar y desplcese hasta la carpeta en la que quiera ubicar los archivos HTML. Si elige Dreamweaver 3 Library.lbi en el paso 4, tendr que ubicar el archivo HTML en una carpeta llamada Library y, a continuacin, tendr que situar dicha carpeta en el nivel raz de la sede Web.

Haga clic en Guardar para exportar el mapa de imagen. En el caso de los mapas de imagen de servidor, abra el archivo HTML exportado e introduzca la ruta de acceso URL al archivo de mapa en el que se encuentra dentro del servidor.

Es posible abrir el archivo HTML generado por Fireworks para el mapa de imagen y copiar y pegar el cdigo de ste en otro archivo HTML. Fireworks emplea notas HTML para marcar con claridad el comienzo y el nal del cdigo de los mapas de imagen y de otras funciones Web creadas en Fireworks. La funcin denominada Actualizar HTML, que enva los archivos HTML generados por Fireworks a la ubicacin correcta de la sede Web destinada a archivos HTML. Para obtener informacin sobre la ubicacin de los mapas de imagen en Dreamweaver u otro editor HTML, consulte Colocacin de archivos Fireworks en Dreamweaver en la pgina 238.

180

Captulo 13

14

CAPTULO 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Divisin de imgenes

Antes de Fireworks, la divisin manual de las imgenes era un proceso que requera mucho trabajo. La divisin de imgenes tiene las ventajas siguientes: Puede optimizarse cada parte de la imagen por separado, con lo que se obtienen archivos ms pequeos y fciles de descargar. Pueden exportarse algunas partes de la imagen como archivo GIF y otras como JPEG, con lo que se utiliza lo mejor de cada formato de exportacin. Pueden designarse pginas para utilizar algunos de sus elementos grcos en todas las pginas y cambiar slo las divisiones que tienen contenidos exclusivos, lo que proporciona velocidad al sitio Web. Adems, se puede editar y reemplazar un elemento grco de una divisin sin tener que volver a descargar todas las divisiones de una imagen. Pueden crearse rollovers con divisiones. En este captulo se exponen los conceptos bsicos de la divisin. En el Captulo 15: Creacin de botones y en el Captulo 16: Creacin de rollovers avanzados se describen tcnicas para la creacin de distintos elementos grcos interactivos mediante la divisin.

181

Comparacin entre divisiones y zonas interactivas

Las zonas interactivas y las divisiones pueden tener un valor URL y comportamientos asignados. Pueden especicar un rea que cambie de aspecto cuando el ratn desencadene un rollover. Tambin puede cambiar el color de cualquier objeto Web conforme aparece en la capa Web.

Dibujo de objetos de divisin

La divisin de un elemento grco es tan sencilla como dibujar un rectngulo. Fireworks dispone de dos herramientas para dividir imgenes: La herramienta Divisin y la herramienta Divisin poligonal. Los objetos que se crean de denominan 'objetos de divisin'. Las lneas rojas que sobresalen de los objetos de divisin son las guas de la divisin, determinan el punto en que Fireworks dividir la imagen en archivos independientes durante la exportacin.
Guas de divisin Objeto de divisin

Las zonas interactivas son reas de una sola imagen que generan una respuesta al movimiento del ratn. Las divisiones pueden tener la misma nalidad, pero trocean una imagen como un puzzle y despus la vuelven a montar en el navegador.

Para dibujar un objeto de divisin rectangular: 1

Elija la herramienta Divisin.

Arrastre para dibujar el objeto de divisin. El objeto de divisin y las guas de divisin se muestran en la Capa de Web.

Tambin puede insertar una divisin en funcin de un objeto seleccionado.

182

Captulo 14

Para insertar una divisin rectangular en funcin de un objeto: 1 2

Para dibujar un objeto de divisin poligonal: 1

Elija la herramienta Divisin poligonal.

Seleccione un objeto. Elija Insertar > Divisin. La divisin es un rectngulo cuya rea incluye los pxeles ms externos del objeto seleccionado. Si ha seleccionado ms de un objeto, al elegir Insertar > Divisin se abre un cuadro de dilogo: Elija Uno para crear un solo objeto de divisin que cubra todos los objetos seleccionados. Elija Varios para crear un objeto de divisin para cada objeto seleccionado.

Nota: Puede arrastrar y colocar objetos de divisin en otros documentos de Fireworks.

Haga clic para colocar los puntos de las esquinas del polgono. La herramienta Divisin poligonal dibuja slo segmentos en lnea recta. Utilice esta tcnicas cuando dibuje divisiones poligonales: No superponga objetos de divisiones poligonales. Cuando dibuje un objeto de divisin poligonal alrededor de objetos con bordes suaves, debe incluir todo el objeto, para evitar la creacin involuntaria de bordes duros en el elemento grco de la divisin. Como alternativa, haga clic en el primer punto para cerrar el polgono.

Dibujo de divisiones poligonales La herramienta Divisin poligonal ayuda a evitar que las divisiones se superpongan al crear un rollover con elementos grcos entrelazados o que entran en el rea de los dems incluidos en la imagen. Si asigna un comportamiento a una divisin poligonal, el objeto de divisin poligonal dene el rea activa de la divisin. No es conveniente abusar de las divisiones poligonales, ya que requieren ms cdigo JavaScript que las divisiones rectangulares semejantes. Un nmero elevado de divisiones poligonales pueden aumentar el tiempo de procesamiento del navegador Web

Para realizar una divisin poligonal en funcin de un objeto seleccionado: 1 2

Elija Insertar > Zona interactiva. Elija Insertar > Divisin. La zona interactiva se convierte en una divisin poligonal.

Para obtener informacin adicional sobre el uso de la herramienta Divisin poligonal para crear rollovers complejos, consulte Uso de rollovers irregulares o superpuestos en la pgina 204. Visualizacin de divisiones y guas Las guas de divisin aparecen de forma automtica al dibujar un objeto de divisin. Las guas de divisin determinan dnde divide Fireworks la imagen en pequeos archivos para exportar las divisiones. Las guas de divisin no pueden editarse como las guas normales, sino que se vuelven a perlar cuando se aaden, desplazan o modican objetos de divisin.

Divisin de imgenes

183

Puede asignar un color exclusivo a cada objeto de divisin para organizar las divisiones. Tambin puede cambiar el color de las guas de divisin.
Para ocultar o visualizar todas las zonas interactivas, divisiones y guas:

Para cambiar el color de un objeto de divisin seleccionado:

En el Inspector de objetos, elija otro color en el men emergente Paleta de colores de la divisin. Uso del solapamiento de divisiones En las vistas de Presentacin preliminar, 2-arriba y 4-arriba, el solapamiento de divisiones permite identicar el rea en donde se est efectuando la optimizacin. El solapamiento de divisiones, que se encuentra activado de forma predeterminada, presenta las reas que no son objeto de optimizacin con un tono blanquecino transparente atenuado. El solapamiento de divisiones no se muestra en la vista Original.

Haga clic en el botn Ocultar zonas interactivas y divisiones o Mostrar zonas interactivas y divisiones de la Caja de herramientas. Haga clic en el icono del ojo situado junto a la Capa de Web en el panel Capas.

Para ocultar o visualizar guas de divisin en todas las vistas de documentos:

Seleccione Ver > Guas de divisin.

Para cambiar el color de las guas de divisin: 1 2

Cuando se prepara para optimizar una divisin seleccionada, las partes que no se editan se muestran atenuadas.

Elija Ver > Opciones de guas > Editar guas. Elija otro color en el men emergente Color divisin.

Si no se encuentra seleccionada ninguna divisin, las reas divididas estn atenuadas y se optimiza el resto del documento.

184

Captulo 14

Puede seleccionar reas para optimizar en la ventana Presentacin preliminar, 2-arriba o 4arriba.
Para seleccionar el rea de optimizacin: 1

Para establecer las propiedades de objeto de una imagen dividida simple: 1 2 3

Abra el Inspector de objetos. Elija Imagen en el men emergente Tipo. Elija Sin URL (no HREF) en el men emergente Vnculo. Omita los cuadros de texto Alt y Destino. Elija los criterios de denominacin. Consulte Denominacin de divisiones en la pgina 186. Elija parmetros de exportacin en los paneles Optimizar y Tabla de color. Consulte Optimizacin en el rea de trabajo en la pgina 154.

Haga clic en la lengeta de la cha Presentacin preliminar, 2-arriba o 4-arriba. Haga clic en el rea que desee optimizar.

4 5

Cuando se selecciona una divisin, su solapamiento se desactiva. Si desea seleccionar varias divisiones, mantenga presionada la tecla Mays mientras hace clic con la herramienta Puntero.
Para ocultar o visualizar el solapamiento de divisiones:

Elija Ver > Solapamiento de divisin. Resulta muy til ocultar Solapamiento de divisin en las presentaciones 2-arriba y 4-arriba para comparar una vista original (con divisiones visibles) con una presentacin preliminar optimizada (con divisiones ocultas).

Adicin de interactividad a las divisiones

Desde el Inspector de objetos puede aadir las mismas funciones interactivas a un objeto de divisin que a una zona interactiva: un vnculo de URL, texto alternativo o un URL de destino. Puede asignar un vnculo de URL a una divisin para, al hacer clic en el rea de la divisin en un navegador, desplazarse a la pgina con dicha URL.

Creacin de una imagen simple dividida

Puede crear una imagen dividida simple que se descargue por partes en un navegador; as puede conseguirse una velocidad de descarga superior a la de una imagen original como imagen simple. Si divide una imagen pero no pretende asignarle una URL ni crear con ella un rollover, puede omitir la mayora de las opciones del Inspector de objetos.

Divisin de imgenes

185

Para asignar un vnculo de URL a un objeto de divisin seleccionado:

Denominacin automtica de divisiones Si no desea introducir un nombre especco para cada divisin, puede dejar que los asigne Fireworks de forma automtica, segn los criterios de denominacin predeterminados. La siguiente tabla muestra las opciones de denominacin automtica. En este ejemplo, el nombre base es Miarchivo.
Seleccione: Para denominar las divisiones de esta forma
Miarchivo_r01_c01 Miarchivo_r01_c02 Miarchivo_r02_c01 Miarchivo_01 Miarchivo_02 Miarchivo_03 Miarchivo_a Miarchivo_b Miarchivo_c

En el Inspector de objetos, especique un URL absoluto o uno relativo: Escriba un URL en el cuadro de texto Vnculo. Elija un URL en el men emergente Vnculo. Elija un URL de la biblioteca de URL en el panel URL. Para obtener informacin adicional, consulte Asignacin de valores URL a zonas interactivas en la pgina 175.

NombreBase_Fila#_Col#

Denominacin de divisiones
La divisin corta una imagen en varios trozos. Las partes se exportan en archivos separados, y stos deben tener un nombre. Adems, si una imagen tiene ms de un fotograma, cada parte de cada fotograma es un archivo y requiere un nombre propio.
NombreBase_Nmero

NombreBase_Alfabtico

#Fila_#Columna_NombreBase r01_c01_Miarchivo r01_c02_Miarchivo r02_c01_Miarchivo Numro_NombreBase 01_Miarchivo 02_Miarchivo 03_Miarchivo a_Miarchivo b_Miarchivo c_Miarchivo

Alfabtico_NombreBase

Fireworks asigna un nombre a cada archivo de divisin al exportarlo. Puede aceptar los criterios de denominacin predeterminados, o especicar un nombre particular para cada divisin: Elija Denominacin automtica de divisiones si desea que la asignacin de nombre a los archivos siga las convenciones de denominacin predeterminadas. Anule la seleccin de Denominacin automtica de divisiones e introduzca un nombre especco para cada divisin en el cuadro de texto Nombre de la divisin.

es el nombre introducido en la exportacin. Forma parte de todos los nombres de archivos de divisin exportados, conforme a los criterios de denominacin.
Nombre base Fila (r##)

y Columna (c##) designan los nmeros de la y columna de la tabla que los navegadores Web utilizan para reconstruir una imagen dividida. Tambin forman parte de cada nombre de archivo de divisin exportado segn los criterios de denominacin.

186

Captulo 14

Para asignar un nombre automtico a los archivos de divisin: 1 2

Denominacin personalizada de archivos de divisin Puede ser conveniente utilizar unos nombres determinados en las divisiones, para identicarlos entre los archivos de divisin de la estructura de archivos de su sitio Web. Por ejemplo, si tiene un botn en una barra de navegacin que retorna a la pgina Web principal, puede denominarlo principal.
Para especificar un nombre personalizado para una divisin seleccionada: 1

Seleccione una o ms divisiones. En el Inspector de objetos, elija Denominacin automtica de divisiones. Cuando exporte la imagen dividida, especique un nombre en el cuadro de texto Nombre base del cuadro de dilogo Exportar. No aada ninguna extensin de archivo al nombre base. Fireworks aade la extensin de archivo de forma automtica a los archivos de divisin.

Puede cambiar los criterios de asignacin de nombre en el cuadro de dilogo Propiedades HTML.

En el Inspector de objetos, anule la seleccin de Denominacin automtica de divisiones.

Para cambiar los criterios predeterminados de denominacin automtica: 1

Introduzca un nombre en el cuadro de texto del nombre de divisin. Si no especica ningn nombre, Fireworks retorna a la denominacin automtica. No aada ninguna extensin de archivo al nombre base. Fireworks aade la extensin de archivo de forma automtica a los archivos de divisin.

Elija Archivo > Propiedades HTML para abrir el cuadro de dilogo Propiedades HTML. Elija unos criterios de denominacin en el men emergente Denominacin automtica. Haga clic en el botn Aceptar.

Nota: Para guardar todos los dato del cuadro de dilogo Propiedades HTML como conguracin predeterminada de los documentos nuevos de Fireworks, haga clic en Fijar predeterminados.

Si una divisin tiene ms de un fotograma, Fireworks aade un nmero a cada archivo de fotograma. Por ejemplo, si especica el nombre personalizado de archivo de divisin principal para un rollover con tres estados, Fireworks asigna el nombre principal.gif al grco del estado Arriba, principall_f2.gif al grco del estado Sobre y principal_f3.gif al grco del estado Abajo.

Divisin de imgenes

187

Uso de tablas anidadas y suplementos En el cuadro de dilogo Propiedades HTML, puede elegir el tipo de tabla que deben utilizar los navegadores Web para reconstruir imgenes divididas. Tambin puede determinar cmo los navegadores recompondrn las tablas mediante suplementos o tablas anidadas al dividir. Consulte Uso de suplementos en tablas anidadas durante la divisin en la pgina 170.

Creacin de una divisin de texto

Una divisin de texto designa el rea de una imagen dividida donde se presenta texto HTML estndar en el navegador. Una divisin de texto no exporta datos de imgenes en pxeles; exporta el texto HTML que aparece en la celda de la tabla denida por la divisin.

Mezcla de formatos de archivo en una imagen dividida

Algunos elementos grcos Web contienen fotografas, imgenes vectoriales o de mapa de bits, animaciones, reas de color slido y texto dentro de una sola imagen. Las divisiones de texto son muy tiles para actualizar mensajes que aparecen en el sitio Web sin tener que crear otros elementos grcos.
Para crear una divisin de texto: 1 2

Dibuje un objeto de divisin. En el Inspector de objetos, elija Texto en el men emergente Tipo. Especique el texto en el campo de entrada de texto del Inspector de objetos. Para asignar formato al texto de una divisin de texto: Utilice las etiquetas de formato de texto HTML en el cuadro de texto del inspector de Objeto. Utilice las etiquetas de formato de texto HTML en el archivo HTML que piensa transferir en el sitio Web tras la exportacin de la imagen que contiene la divisin de texto.

La divisin de la imagen permite exportar partes de la misma como GIF y otras como JPEG. Para obtener informacin adicional sobre la eleccin de distintos formatos de archivo, paletas de color y otros parmetros de optimizacin para las divisiones de una sola imagen, consulte Denicin de los ajustes de optimizacin para divisiones en la pgina 154.

El texto de una divisin de texto no aparece en el archivo PNG de Fireworks, sino en el navegador Web.

188

Captulo 14

Creacin de una divisin de reemplazo

Puede actualizar una divisin nica de una imagen dividida existente sin necesidad de exportar y descargar la imagen dividida completa. Es conveniente utilizar la denominacin personalizada de divisiones cuando pretenda reemplazar una divisin para poder localizarla con facilidad.
Para actualizar una divisin de una imagen: 1

Edite el rea bajo la divisin en el archivo PNG de Fireworks. Seleccione la divisin. Elija Archivo > Exportar especial > Seleccionar divisin. Actualice los parmetros de optimizacin si es preciso. Exporte la divisin a la misma carpeta que la divisin original sin cambiar su nombre base.

2 3

Si conserva el nombre de archivo original en la divisin actualizada y carga la divisin en el mismo lugar del sitio Web de donde proceda la original, la divisin nueva reemplazar a la original en la imagen.

Creacin de rollovers de JavaScript con divisiones

Numerosos diseadores Web utilizan las divisiones de Fireworks para crear barras de navegacin y rollovers JavaScript. Las tcnicas utilizadas en Fireworks 1 y 2 an son vlidas en Fireworks 3. No obstante, el nuevo editor de botones ofrece ciertas ventajas a la hora de crear barras de navegacin y rollovers de JavaScript. Para obtener informacin adicional sobre los rollovers y el Editor de botones, consulte captulo 15: Creacin de botones.

Divisin de imgenes

189

190

Captulo 14

15

CAPTULO 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creacin de botones

Fireworks permite crear una serie de rollovers y botones de JavaScript, aunque se desconozca todo sobre JavaScript. El Editor de botones de Fireworks 3 acompaa al usuario a travs del proceso de creacin de botones y automatiza muchas de las tareas necesarias. El resultado es un prctico smbolo de botn que puede situar y transformar como un nico objeto. Puede duplicar botones con rapidez para crear una barra de navegacin, actualizar el texto de los fotogramas de los botones de forma sencilla y convertir los rollovers de Fireworks 2 en botones de Fireworks 3. Al exportar un botn, Fireworks genera de forma automtica el JavaScript necesario para mostrar los rollovers en el navegador Web. Dreamweaver de Macromedia permite insertar con facilidad el cdigo HTML de los rollovers JavaScript de Fireworks en las pginas Web. Tambin puede cortar y pegar el cdigo del rollover en cualquier archivo HTML.

191

Qu es un botn?
Un botn de Fireworks es un rollover encapsulado con todos los aspectos posibles del botn, que representan sus diferentes estados de utilizacin. Puede utilizar el Editor de botones para ensamblar todos estos elementos (incluido el objeto de divisin, que es el rea activa para la activacin del botn) y, a continuacin, colocar el botn en el documento de Fireworks. Cada botn puede tener cuatro estados o aspectos diferentes. Cada estado representa el aspecto de un botn en respuesta a una accin del puntero. El estado Arriba es el estado predeterminado o aspecto de reposo del botn, cuando el puntero no est sobre l. El estado Sobre es el aspecto del botn cuando el puntero pasa sobre l en un navegador de Web. El estado Abajo es el aspecto del botn tras hacer clic en l, en general, su aspecto en la pgina Web de destino. El estado Sobre y Abajo es el aspecto del botn al pasar el puntero sobre l cuando est en estado Abajo. Muchos de los botones de la Web tienen slo dos estados: Arriba y Sobre. El estado Sobre es el ms til ya que su funcin habitual es indicar al usuario que un clic del ratn puede provocar alguna reaccin. Los estados Arriba y Abajo indican un estado inactivo, mientras que el estado Sobre y Abajo alerta sobre la posibilidad de que con un clic del ratn no se consiga nada.

Un botn es un tipo especial de smbolo. Es posible arrastrar instancias suyas desde la Biblioteca al documento. Para obtener informacin adicional sobre los smbolos, consulte Smbolos e instancias en la pgina 94. Los botones estn encapsulados. Al desplazar el botn por el documento, tambin se mueven todos los componentes y estados asociados a l. Es el n de la complicada edicin en varios fotogramas. Un botn puede editarse de forma sencilla. Haga doble clic en l y modifquelo en el Editor de botones. Los botones seleccionados tienen un prctico cuadro de texto en el Inspector de objetos donde puede actualizarse el texto de todos los estados de forma simultnea. Al igual que los smbolos, los botones creados con el Editor de botones tienen un punto de registro.

Creacin de botones
La forma ms sencilla de crear barras de navegacin o botones de rollover JavaScript es utilizar el Editor de botones. Las indicaciones de cada panel del editor facilitan las decisiones referentes al diseo.

Descripcin de los botones

Un botn creado con el Editor de botones es algo ms que un rollover de JavaScript normal creado en Fireworks:

192

Captulo 15

Creacin de botones de rollover simples El Editor de botones permite crear botones simples de dos estados.
Para crear un botn de dos estados: 1

Haga clic en la cha rea activa. El Editor de botones crea de forma automtica una divisin del tamao del recuadro de seleccin del smbolo del botn. La divisin se actualiza si se edita la imagen de alguno de los estados.

Elija Insertar > Nuevo smbolo para abrir el cuadro de dilogo Propiedades de smbolo. Elija Botn como tipo de smbolo, escriba un nombre y haga clic en Aceptar. Se abre el Editor de botones con la cha del estado Arriba.

Haga clic en el Asistente de vnculos para asignar un URL a un rollover. Para obtener informacin adicional sobre el Asistente de vnculos, consulte Asignacin de un valor URL al botn en la pgina 194.

En el rea de trabajo del editor, coloque el elemento grco que aparecer como estado Arriba del botn: Utilice las herramientas de dibujo y edicin para crear un elemento grco. Importe o arrastre y suelte un elemento grco en el Editor de imgenes. Importe un botn de una biblioteca de botones de Fireworks. Para obtener ms informacin, consulte Insercin de un botn de origen externo en la pgina 197.

Al cerrar el Editor de botones, el botn aparece en la biblioteca y el documento contiene una instancia de l. Si mueve o cambia el tamao del botn como una unidad, tambin se mueven o cambia el tamao de todos los estados de dicho botn.
Para colocar copias de un botn en un documento:

Arrastre el botn desde la biblioteca hasta el documento para crear una instancia suya. Edicin de botones Los botones pueden editarse despus de su creacin. Al editar el smbolo de un botn, todas las instancias reejan los cambios. Si el botn se ha importado de una biblioteca o de otro documento de Fireworks, al editarlo en el documento actual se rompe el vnculo con el documento anterior. Para obtener informacin adicional sobre la importacin y actualizacin de botones, consulte Insercin de un botn de origen externo en la pgina 197.
Para abrir un botn en el Editor de botones:

Elija Papel cebolla para poder alinear visualmente cada elemento grco de estado del botn. Haga clic en la cha Sobre. Coloque el elemento grco que aparecer como estado Sobre del botn: Haga clic en Copiar grco Arriba para pegar una copia del elemento grco del estado Arriba en la ventana Sobre y edtelo para cambiar su aspecto. Cree una imagen nica para el estado Sobre. Importe un grco a la ventana Sobre. Ignore las chas Abajo y Sobre y Abajo, ya que no se utilizan en la creacin de botones de rollovers simples.

5 6

Haga doble clic en una instancia. Seleccione un botn y elija Modicar > Smbolo > Editar smbolo.

Creacin de botones

193

Para editar un smbolo de botn existente: 1 2 3

Asignacin de un valor URL al botn Asigne un valor URL a los botones para vincularlos a otra pgina u otro sitio Web.
Para asignar un valor URL a un botn mediante el Asistente de vnculos: 1

Abra el Editor de botones. Haga clic en la cha de uno de los estados. Seleccione el objeto y edtelo del mismo modo que cualquier objeto del documento.

Dibujo y edicin en el rea activa El rea activa de un botn, tambin conocida como su rea de acierto, es la zona en la que, al pasar el puntero por encima en un navegador Web, se activa el rollover. Si eligi Establecer automticamente rea activa, Fireworks crea de forma automtica una divisin con el tamao del recuadro de seleccin del smbolo del botn. Si necesita que el rea activa tenga un tamao o forma diferente, puede crear una divisin o una zona interactiva. Los objetos Web de la cha rea activa de un botn aparecen en la capa Web del documento.
Para dibujar objetos Web de divisin o de zona interactiva: 1 2 3

Seleccione un botn del documento. En el Inspector de objetos, haga clic en el botn Asistente de vnculos. El Asistente de vnculos le gua por los pasos necesarios para asignar un valor URL al botn.

Adicin de estado Abajo El estado Abajo aparece cuando se ha hecho clic en el botn y ste an aparece en la pgina Web. El estado Abajo suele emplearse para las barras de navegacin, tambin conocidas como Bar Nav.
Para agregar el estado Abajo al botn: 1

Haga clic en la cha Abajo del Editor de botones. Elija Incluir estado Abajo en Bar Nav. Coloque un elemento grco en el Editor de botones. Haga clic en Copiar grco Sobre para pegar una copia de la imagen del estado Sobre en la ventana de Abajo y edtela. Cree un elemento grco nico para el estado Abajo. Importe un elemento grco en la ventana Abajo.

2 3

Abra el Editor de botones. Haga clic en la cha rea activa. Anule la seleccin de Establecer automticamente el rea activa. Seleccione la herramienta Divisin o Zona interactiva y dibuje en el Editor de botones.

Para editar la zona activa de un botn: 1 2 3

Abra el Editor de botones. Haga clic en la cha rea activa. Utilice las herramientas Puntero, Divisin o Divisin poligonal para mover, modicar o volver a dibujar el rea activa actual.

Adicin de estado Sobre y Abajo El estado Sobre y Abajo aparece cuando el botn est en estado Abajo y el ratn se desplaza por encima de l. Este estado suele utilizarse para las barras de navegacin, tambin conocidas como Bar Nav.

194

Captulo 15

Para agregar el estado Sobre y Abajo a un botn: 1

Haga clic en la cha Sobre y Abajo del Editor de botones. Elija Incluir estado Sobre y Abajo Bar Nav. Coloque un elemento grco en el Editor de botones. Haga clic en Copiar grco Abajo para pegar el elemento grco del estado Sobre y Abajo en la ventana de Sobre y Abajo y, a continuacin edtelo. Cree una imagen nica para el estado Sobre y Abajo. Importe un elemento grco en la ventana de Sobre y Abajo.

Uso de efectos de biselado para dibujar estados de un botn Para crear un estado de rollover se puede utilizar cualquier objeto. Sin embargo, debido a que los botones son un tipo comn de rollover de JavaScript, Fireworks incluye opciones preestablecidas de efectos automticos para simplicar la creacin de los aspectos de botn ms comunes. Aplique el efecto Bisel interior o Bisel exterior a un objeto y seleccione Elevado, Resaltado, Recuadro o Invertido en el cuadro emergente de efectos preestablecido de botn del panel Efecto.
Efectos de botn preestablecidos Elevado Descripcin

2 3

Edicin de texto para botones En Fireworks es fcil cambiar el texto de un botn de rollover, sin necesidad de editar cada fotograma.
Para cambiar el texto de todos los estados de un botn de forma simultnea: 1 2

El bisel aparece elevado respecto a los objetos subyacentes.

Resaltado

El color del botn se ilumina.

Seleccione el botn en el documento. En el Inspector de objetos, escriba el nuevo texto en el cuadro de texto Texto de botn y presione la tecla Intro. El texto se actualiza en todos los estados del botn.

Recuadro

El bisel aparece hundido en los objetos subyacentes.

Invertido

El bisel aparece invertido en los objetos subyacentes y se iluminan los colores.

Para cambiar el texto en todos los estados del botn de forma simultnea en el Editor de botones: 1

Cambie el texto del bloque superior en alguno de los estados del botn. Aparece un mensaje que solicita la conrmacin para la actualizacin en el resto de estados del botn.

Por ejemplo, si desea crear un botn de cuatro estados, puede utilizar Elevado como elemento grco para el estado Arriba, Resaltado para el estado Abajo, etc. Si desea informacin adicional sobre los efectos automticos, consulte Aplicacin de un efecto automtico en la pgina 140.

Haga clic en S.

Creacin de botones

195

Creacin de barras de navegacin mediante smbolos anidados

Una barra de navegacin es un grupo de botones. En general, la barra contina en la pgina Web o parece hacerlo mientras otras partes de la pgina cambian. Una forma sencilla de crear barras de navegacin es duplicar un grupo de botones y cambiar el texto y el vnculo URL de cada botn.
Para crear una barra de navegacin sencilla: 1

Conversin de rollovers de Fireworks en botones

Los rollovers creados con Fireworks, incluidas las versiones anteriores, pueden convertirse en botones para aprovechar las nuevas ventajas de los botones.
Para convertir un rollover de Fireworks en un botn: 1

En el panel Fotogramas, elija Papel cebolla. Esto permite seleccionar con facilidad todos los elementos grcos de los estados del rollover.

Cree un botn slo con los elementos grcos, sin texto. Cree un segundo botn vaco. Arrastre el botn original desde la biblioteca hasta el botn vaco. De esta forma se crea una instancia del botn en una capa compartida del botn nuevo. En el panel Capas, seleccione una capa que no sea compartida y aada texto al nuevo botn en cada uno de sus estados. En las chas Abajo y Sobre y Abajo, seleccione las opciones Incluir, segn corresponda. Cierre el Editor de botones. En el documento, duplique el botn con texto. En cada botn duplicado, cambie el texto con el Inspector de objetos.

2 3 4

Seleccione todos los componentes del rollover. Elija Insertar > Convertir en smbolo. Escriba un nombre y elija Tipo: Botn y haga clic en Aceptar.

2 3

Los componentes del rollover se convierten en un botn en su propia capa compartida y el nuevo botn se coloca en la biblioteca. Los objetos de zona interactiva y de divisin del rollover no se aaden al nuevo botn.

6 7 8

Para actualizar los grficos de todos los botones de una barra de navegacin sencilla:

Utilice el Editor de botones para modicar el botn original (el botn sin texto). Fireworks actualiza el resto de los botones para reejar el nuevo aspecto. Dado que el texto es exclusivo de los ltimos smbolos del botn, la actualizacin de la imagen no le afecta. Tambin puede crear una barra de navegacin ms compleja, con los estados Abajo y Sobre y Abajo.

196

Captulo 15

Insercin de un botn de origen externo

Es posible seleccionar un botn de una biblioteca de Fireworks o de otros documentos de Fireworks. Cuando se importa un botn de origen externo, Fireworks lo detecta. Ms adelante, si el archivo de origen cambia, puede actualizar el botn importado para reejar los cambios del original.
Para insertar un botn preparado en el documento: 1

Seleccione una biblioteca: Elija Insertar > Bibliotecas > Otras y seleccione la biblioteca de botones o el documento de Fireworks donde se encuentra el botn que desea insertar. Elija Abrir para acceder a una biblioteca de botones que est fuera de la carpeta Fireworks 3\Settings\Libraries.

Elija un smbolo de la biblioteca y haga clic en Importar.

Para actualizar un botn importado: 1

En el panel Biblioteca, seleccione el smbolo del botn que desea actualizar. Elija Actualizar en el men emergente de opciones del panel Biblioteca. Fireworks actualiza el botn importado para que su aspecto sea igual al del original.

Creacin de botones

197

198

Captulo 15

16

CAPTULO 16
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creacin de rollovers avanzados

En ocasiones es necesario que el comportamiento de los rollover sea ms complejo de lo que permite el Editor de botones. Por ejemplo, puede desear crear un rollover desunido o una barra de navegacin que cambie de aspecto segn el botn sobre el que se haga clic. Es posible crear rollovers ms complejos mediante divisiones y fotogramas sin utilizar el Editor de botones. Puede asignar comportamientos adicionales a los smbolos de botones existentes mediante las tcnicas indicadas en este captulo. Los elementos bsicos para la creacin de rollovers en Fireworks son los objetos de divisin y de zona interactiva y el Inspector de comportamientos. Para obtener informacin adicional sobre las zonas interactivas y las divisiones, consulte el Captulo 13: Creacin de zonas interactivas y de mapas de imagen y el Captulo 14: Divisin de imgenes.

199

Descripcin de los rollovers

Los rollovers de JavaScript son elementos grcos que cambian de aspecto en un navegador Web cuando el puntero del ratn se desplaza sobre ellos o se hace clic en ellos. Pueden adoptar muchas formas, como botones, imgenes intercambiadas o imgenes que se conmutan. Los rollovers de JavaScript pueden crearse con el Editor de botones de Fireworks, con divisiones o con cdigo JavaScript, pero siempre funcionan de la misma forma. Los rollovers sustituyen un elemento grco con otro como respuesta a un clic o al desplazamiento del puntero sobre ellos. A continuacin se describe, paso a paso, la tcnica general de la creacin de rollovers. Para crear botones de rollover normales, utilice el Editor de botones. Para obtener ms informacin, consulte Creacin de botones en la pgina 192.
Tcnica general de creacin de rollovers en Fireworks: 1

Establezca vnculos, designe objetivos y congure los criterios de denominacin para las divisiones de imgenes. Para obtener informacin adicional sobre el establecimiento de vnculos, consulte el Captulo 13: Creacin de zonas interactivas y de mapas de imagen.

Optimice los elementos grcos. Para obtener informacin adicional sobre la optimizacin, consulte el Captulo 11: Optimizacin de grcos.

Exporte las divisiones para crear los archivos grcos y genere el HTML; ste incluye el cdigo JavaScript encargado de controlar los rollovers de un navegador. Para obtener informacin adicional sobre la exportacin de divisiones, consulte el Captulo 12: Exportacin.

Coloque el rollover HTML en el HTML de la pgina Web.

Cree fotogramas para el rollover. La imagen de cada estado de un rollover se dibuja en un fotograma separado. Por ejemplo, un botn tiene de dos a cuatro fotogramas. Cree o importe un elemento grco para cada fotograma. Cree divisiones para denir el rea que cambia de aspecto cuando se activa el rollover. Todos los estados de un botn comparten la misma divisin. Si el rea que activa el rollover no es la que cambia de aspecto, dibuje un objeto de zona interactiva para que acte como activador del rollover. Dena los comportamientos del rollover. Los comportamientos determinan lo que ocurre como respuesta a la accin del ratn. Por ejemplo, un comportamiento puede indicar al navegador Web que sustituya una imagen del Fotograma 5 por una del Fotograma 6 cuando el ratn pase sobre un rollover de intercambio de imagen.

2 3

Correspondencia de estados de rollover y fotogramas

Cada aspecto de un rollover se denomina estado. En Fireworks, cada estado se coloca en un fotograma diferente. Para los botones, que tienen de dos a cuatro fotogramas, los estados son los siguientes: El estado Arriba muestra la imagen del Fotograma 1. Este es el aspecto predeterminado del botn. El estado Sobre muestra la imagen del Fotograma 2. Esta es la forma en que aparece el botn cuando el puntero se desplaza sobre l en el navegador Web. El estado Abajo muestra la imagen del Fotograma 3, el aspecto que presenta el rollover si se hace clic en l.

200

Captulo 16

El estado Sobre y Abajo muestra la imagen del Fotograma 4, el aspecto del rollover cuando el puntero se mueve sobre un botn en estado Abajo. Estos estados tambin pueden aplicarse a otros tipos de rollovers, pero los que no son botones pueden utilizar ms fotogramas.

Asignacin de comportamientos de rollover

Asigne comportamientos desde el Inspector de comportamientos para determinar lo que el rollover hace cuando se activa y el tipo de evento del ratn que lo desencadena.
Para asignar un comportamiento a una divisin o zona interactiva seleccionada:

Definicin del rea de activacin del rollover

Utilice objetos de divisin o de zona interactiva para denir el rea por la que debe pasar el puntero para activar el rollover. Las divisiones y zonas interactivas denen el rea activa del rollover. Cuando el rollover aparece en un navegador Web, el desplazamiento del puntero sobre el rea denida con una divisin o zona interactiva activa el comportamiento asignado. En los rollovers simples, se utilizan divisiones para activar los eventos que tienen lugar dentro de los lmites de la divisin del objeto. Tambin puede utilizarse una zona interactiva para activar los rollovers. Utilice un objeto de divisin para activar los rollovers en los que el rea de activacin es, al mismo tiempo, el rea de intercambio. Utilice un objeto de zona interactiva sobre un objeto de divisin si desea que el rea de activacin sea un rea ms pequea dentro de la divisin. Utilice un objeto de zona interactiva o de divisin para activar un rollover en otra divisin.

Elija un comportamiento en el men emergente de adicin de acciones (+) del Inspector de comportamientos.

Elimina el comportamiento seleccionado. Aade un comportamiento.

Para asignar el evento de ratn que activa el rollover: 1

Seleccione la divisin o zona interactiva que contiene el comportamiento que desea modicar. En el Inspector de comportamientos, seleccione el comportamiento. Junto al nombre de comportamiento resaltado, elija la actividad del puntero que lo desencadenar.

Creacin de rollovers avanzados

201

Eleccin del comportamiento apropiado El Inspector de comportamientos, dispone de las siguientes opciones: crea un rollover con el Fotograma 1 como estado Arriba y el Fotograma 2 como estado Sobre. En realidad, la opcin Rollover simple es un grupo de comportamientos que contiene las opciones Intercambiar imagen y Restaurar imagen de intercambio.
Rollover simple

Los comportamientos de Fireworks son compatibles con los de Dreamweaver 3. Cuando exporta un rollover de Fireworks a Dreamweaver 3, puede editar los comportamientos de Fireworks mediante el Inspector de comportamientos de Dreamweaver 3.

Asignacin de vnculos de URL a rollovers

Si desea vincular el rollover a otra pgina Web, asigne un vnculo de URL a un objeto de zona interactiva o de divisin.
Para asignar un vnculo de URL a un objeto de divisin o de zona interactiva seleccionado:

cambia el contenido de la divisin especicada por el de otro fotograma de la divisin o el de un archivo externo. Restaurar imagen de intercambio torna el rollover a su aspecto predeterminado. Establecer imagen de Bar Nav determina si una divisin es parte de una barra de navegacin dentro del documento actual. Todas las divisiones que forman parte de la barra de navegacin deben tener este comportamiento. En realidad, la opcin Establecer imagen de Bar Nav es un grupo de comportamientos que contiene Bar Nav Sobre, Bar Nav Abajo y Restaurar Bar Nav. Bar Nav Sobre especica el estado Sobre para la divisin seleccionada cuando forma parte de una barra de navegacin y tambin puede especicar el estado Sobre y Abajo. Bar Nav Abajo especica el estado Abajo para la divisin seleccionada cuando forma parte de una barra de navegacin. Restaurar Bar Nav hace que las otras divisiones de la barra de navegacin vuelvan a su estado Arriba.
Intercambiar imagen Nota: Para obtener informacin adicional sobre la creacin de barras de navegacin, consulte Creacin de barras de navegacin mediante smbolos anidados en la pgina 196. Establecer el texto de la barra de estado permite denir el texto que aparece en la barra de estado de la parte inferior de la mayora de las ventanas de los navegadores.

En el Inspector de objetos, escriba un URL o elija uno del men emergente de vnculos URL. Elija un URL en el panel URL.
Indique un valor URL para el objeto de zona interactiva o de divisin seleccionado.

202

Captulo 16

Creacin de rollovers desunidos para intercambiar partes de la imagen

Un rollover desunido cambia el aspecto de un rea que no se encuentra bajo el puntero. Para ver un ejemplo de un rollover desunido abra el archivo Tutorial_Final.png que se encuentra en la carpeta Tutorial dentro de la carpeta de la aplicacin Fireworks. Definicin de reas de activacin y de intercambio La primera parte de la creacin de rollovers desunidos consiste en dibujar un objeto de zona interactiva o de divisin sobre el rea del documento que activara el rollover y un objeto de divisin sobre el rea de intercambio (el rea que cambia de aspecto al activarse el rollover).
Para dibujar un rea de activacin:

Configuracin del comportamiento de Intercambiar imagen La segunda parte de la creacin de rollovers desunidos es la asignacin de un comportamiento a la zona de activacin.
Para configurar el comportamiento de Intercambiar imagen de un rollover desunido: 1

Seleccione el objeto Web que desea utilizar como activador. Elija Intercambiar imagen en el men emergente de adicin de acciones (+) del Inspector de comportamientos. Aparece el cuadro de dilogo Intercambiar imagen.

Elija un objeto de divisin para el rea de intercambio: Haga clic en el nombre de un objeto de divisin de la lista de la parte superior del cuadro de dilogo. La lista muestra todos los objetos de divisin del documento por el nombre actual. Haga clic en una divisin en el diagrama de divisiones. Este diagrama muestra la forma en que est dividido el documento.

Dibuje un objeto de zona interactiva o de divisin, o un smbolo de botn: Dibuje un objeto de zona interactiva si el rea de activacin no es un rollover o no cambia de aspecto. Dibuje un objeto de divisin si desea que tambin cambie el aspecto de la zona de activacin. Coloque un smbolo de botn si desea utilizarlo como activador. Puede asignar otros comportamientos a los smbolos de botn de la misma forma que con los objetos de divisin y de zona interactiva.
Para dibujar un rea de intercambio: 5 4

Elija un origen para el intercambio: Haga clic en Fotograma n: y elija el nmero del fotograma con el que desea realizar el intercambio cuando se activa el rollover. Slo se utiliza el rea situada bajo el objeto de divisin destino del fotograma especicado. Haga clic en Archivo de imagen y escriba el nombre o busque el archivo externo que desee intercambiar al activar el rollover. Elija Restablecer la imagen onMouseOut para volver a colocar la imagen original en la divisin cuando el puntero salga del rea de activacin.

Dibuje un objeto de divisin en la parte del documento donde se producir el intercambio.

Creacin de rollovers avanzados

203

Elija Precargar imgenes. Para obtener ms informacin, consulte Carga previa de estados de rollover en la pgina 206.

El archivo debe tener la misma altura y anchura que la divisin en que se va a colocar. Si el tamao no es igual, el navegador lo adapta al del objeto de divisin, lo que puede afectar a la calidad, en especial en los archivos GIF animados.
Nota: Fireworks no incluye en la memoria cach los rollovers que utilizan archivos externos para los estados de rollover para evitar que se interrumpa la visualizacin de archivos GIF animados cuando se utilizan como estados de rollover. Si desea incluir estos rollovers en la memoria cach, debe personalizar la salida HTML de Fireworks. Para seleccionar un archivo externo como origen de un rollover: 1

Haga clic en Aceptar.

Definicin del evento de ratn que desencadena el comportamiento El ltimo paso es denir la accin del puntero que activa el comportamiento Intercambiar imagen.
Para definir la accin del puntero que activa un rollover desunido: 1

Seleccione un objeto Web que active el rollover. En el Inspector de comportamientos, elija el comportamiento Intercambiar imagen de la lista de acciones. Elija un evento para el comportamiento Intercambiar imagen en el men emergente de eventos: onMouseOver activa el evento cuando el puntero se mueve sobre el rea de evento. onMouseOut activa el evento cuando el puntero sale del rea de evento. onClick activa el evento cuando se hace clic en el rea de evento.

Elija Archivo de imagen en los cuadros de dilogo Intercambiar imagen, Bar Nav Sobre o Bar Nav Abajo. Busque el archivo que desea utilizar.

Uso de rollovers irregulares o superpuestos

Fireworks simplica la tarea de crear rollovers de formas irregulares con reas superpuestas. Es posible dibujar un objeto de divisin con cualquier forma mediante la herramienta Zona interactiva poligonal. Al exportar estas divisiones, Fireworks crea de forma automtica las divisiones y el JavaScript necesarios para el rea irregular de destino o el rollover superpuesto a n de que funcione correctamente.

Uso de archivos externos como origen de rollover

Puede utilizar archivos GIF, GIF animados, JPEG y PNG como origen de un rollover. Si elige un archivo externo como origen, ste se intercambia con la divisin destino cuando se activa el rollover en un navegador Web.

Herramienta Divisin poligonal

204

Captulo 16

Por ejemplo, la siguiente ilustracin muestra dos objetos con reas superpuestas.

Exporte el archivo. Fireworks exporta una serie de divisiones y estados para recrear el aspecto del rollover con forma irregular. El JavaScript que crea Fireworks activa varios rollovers para intercambiar todas las divisiones que contienen una parte de la forma irregular.

Exportacin de rollovers
Fireworks permite utilizar cada objeto como un rollover, sin necesidad de escribir cdigo JavaScript adicional para intercambiar las divisiones apropiadas.
Para crear rollovers de forma irregular: 1

Cuando se exportan rollovers desde Fireworks, se exporta una serie de imgenes para los diferentes estados de rollover, as como un archivo HTML que contiene cdigo JavaScript. Para obtener informacin adicional sobre la exportacin, consulte captulo 12: Exportacin. Compatibilidad de JavaScript y el navegador El cdigo JavaScript exportado con el rollover se utiliza para mostrar ste en el navegador Web. El cdigo JavaScript exportado desde Fireworks incluye la deteccin del navegador Web y es compatible con la versin 3, o superior, de Netscape Navigator y Microsoft Internet Explorer. Algunos navegadores, como Internet Explorer 3, no pueden mostrar los cuatro estados de rollover de JavaScript. En estos casos, el JavaScript exportado por Fireworks permite a estos navegadores mostrar el estado Arriba y vincularlo al URL correspondiente.

Utilice la herramienta Divisin poligonal para dibujar divisiones poligonales que tengan la misma forma que cada objeto.

Fireworks crea una serie de divisiones y dene de forma automtica varias reas de divisin rectangulares para los objetos de divisin irregulares.
2

Asigne comportamientos a cada divisin con Intercambiar imagen para congurar el rollover.

Creacin de rollovers avanzados

205

Carga previa de estados de rollover Los estados de rollover que genera Fireworks con JavaScript son de carga previa, es decir, los guardan en la memoria cach. Esto signica que cuando el archivo HTML se carga por primera vez en el navegador Web, todas las imgenes de rollover, incluidas las que no son visibles inicialmente, se cargan en la memoria del navegador. Cuando el cursor se mueve encima de un rollover de JavaScript de Fireworks, el estado alternativo se intercambia inmediatamente en lugar de esperar a que se descargue desde el servidor. El almacenamiento previo en la memoria cach no tiene lugar cuando el rollover es un archivo externo para evitar que se interrumpa la reproduccin de los archivos GIF animados mientras se utilizan como estados de rollover. Personalizacin del cdigo HTML y JavaScript exportado con Fireworks El estilo del HTML y JavaScript creado por Fireworks est denido en las plantillas HTML. Para obtener informacin adicional sobre la personalizacin de HTML en Fireworks, consulte el Captulo 19: Operaciones con Dreamweaver y otros editores HTML.

206

Captulo 16

17

CAPTULO 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creacin de animaciones

Los grcos animados coneren un aspecto dinmico a las sedes Web. En Fireworks puede crear una gran variedad de animaciones GIF de gran realismo, incluidos anuncios en titulares, logotipos y dibujos animados. Una animacin GIF est formada por una serie de imgenes jas que aparecen de forma consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear una animacin en Fireworks, cada imagen se sita en un fotograma distinto. A continuacin, todas las imgenes de una animacin se exportan en un archivo GIF animado. En Fireworks es posible abrir y editar animaciones GIF existentes o crear otras nuevas. Mediante la modicacin gradual del contenido de los fotogramas consecutivos, es posible lograr que un objeto parezca desplazarse por el lienzo, agrandarse o reducirse, girar, cambiar de color, aparecer o desaparecer gradualmente o cambiar de forma. Puede utilizar stas y otras tcnicas para componer una animacin sosticada en la que se cuente una historia entera o se represente un objeto en movimiento que parezca real, como un personaje de dibujos animados, un animal o un automvil. Para simplicar la animacin de forma signicativa, puede convertir en smbolos los objetos que aparezcan en varios fotogramas de sta. Si desea crear pasos intermedios durante la ubicacin, transformacin o aplicacin de efectos a los objetos, puede utilizar el procedimiento de interpolacin. Mediante este procedimiento, los objetos intermedios vuelven a dibujar y a distribuirse por los fotogramas de forma automtica.

207

Planificacin de una animacin

Antes de empezar a crear una animacin, es importante que planique los eventos que desea que ocurran. De lo contrario, puede perderse en fotogramas y capas y la animacin puede perder dinamismo al reproducirla. Por lo general, la animacin es un proceso que consta de cinco pasos. El orden de estos pasos puede variar en funcin de las preferencias de trabajo y del diseo de la animacin.
Para crear una animacin: 1 2

Puede dibujar o importar los objetos que quiera utilizar. En muchos casos, ahorrar tiempo si convierte los objetos en smbolos. Si desea realizar este proceso con ms rapidez, puede interpolar los smbolos entre instancias y distribuirlos por los fotogramas, en lugar de situar cada objeto en un fotograma. Para obtener ms informacin sobre los smbolos y la interpolacin, consulte Interpolacin de instancias en la pgina 213. Configuracin de la velocidad de animacin Cuando planique una animacin, tendr que tener en cuenta la velocidad a la que van a pasar los fotogramas. Esto se denomina demora de fotogramas. Si el valor de demora de fotogramas es alto, la animacin parece detenerse y volver a empezar. Cuando la demora es demasiado breve, los detalles de la animacin se confunden. La complejidad de la animacin y la velocidad a la que funciona el PC en el que se reproduce afectan a la homogeneidad de la reproduccin. Si es posible, reproduzca la animacin en varios PC para determinar el intervalo de demora ptimo. Para obtener informacin sobre la conguracin de la velocidad de animacin, consulte Control de la animacin en la pgina 213. Planificacin de los fotogramas Aunque siempre se pueden aadir o eliminar fotogramas durante la creacin de una animacin, es aconsejable planicar el momento en el que deben ocurrir los eventos principales. Si emplea una tasa de fotogramas por segundo, como cinco fotogramas por segundo, puede establecer la estructura de la animacin creando un nmero determinado de fotogramas.

Cree un documento nuevo. Utilice el panel Fotogramas para aadir varios fotogramas al documento. Arrastre o site los objetos en fotogramas diferentes. Establezca la demora de fotogramas. Optimice el documento y exprtelo como una animacin GIF. Para obtener informacin sobre la exportacin de una animacin GIF, consulte Exportacin de una animacin en la pgina 216.

4 5

Creacin de objetos para la animacin Los objetos actan en una animacin igual que los actores en una pelcula. Por ejemplo, en una animacin en la que aparecen tres gansos volando, cada ganso es un personaje.

208

Captulo 17

Por ejemplo, si quiere que el nombre de la empresa aparezca de forma gradual en tres segundos aproximadamente y la demora de fotogramas se ha establecido en 20 centsimas de segundo, necesitar 15 fotogramas. Para obtener ms informacin sobre los fotogramas, consulte Administracin de fotogramas en la pgina 209. Organizacin de animaciones con capas Adems de los objetos en movimiento, muchas animaciones contienen objetos estticos que forman el decorado y el fondo de la animacin. Estos objetos pueden situarse en capas, que pueden compartir varios fotogramas de forma que aparezcan en cada uno de ellos.

Para aadir un fotograma nuevo detrs del fotograma actual:

Haga clic en el botn Fotograma nuevo/ duplicado de la parte inferior del panel Fotogramas.

Para aadir un fotograma en una posicin especfica de la secuencia: 1

Seleccione Aadir fotogramas en el cuadro emergente Opciones del panel Fotogramas. Se abre el cuadro de dilogo Aadir fotogramas.

Introduzca el nmero de fotogramas que desee aadir y elija la ubicacin en la que quiera insertarlos.

Administracin de fotogramas
En las animaciones de Fireworks, los intervalos de tiempo se dividen en fotogramas, como en una pelcula. Los fotogramas individuales, una vez organizados, forman la pelcula. El panel Fotogramas permite crear y organizar los fotogramas. Mediante este panel, puede establecer la sincronizacin de la animacin y desplazar los objetos entre los fotogramas.

Para crear copias de un fotograma:

Arrastre un fotograma existente hacia el botn Fotograma nuevo/duplicado de la parte inferior del panel Fotogramas.

Para copiar un fotograma seleccionado y situarlo en una secuencia determinada: 1

Seleccione Duplicar fotograma en el cuadro emergente Opciones del panel Fotogramas. El cuadro de dilogo Duplicar fotograma se abre.

Introduzca el nmero de duplicados del fotograma seleccionado que quiera crear y elija la posicin de insercin de los mismos.

Adicin, desplazamiento, copia y eliminacin de fotogramas El panel Fotogramas permite aadir, copiar, eliminar y cambiar el orden de los fotogramas.

La duplicacin de un fotograma resulta til cuando se quiere que los objetos vuelvan a aparecer en otra parte de la animacin.
Para volver a ordenar los fotogramas:

Arrstrelos uno a uno hasta una posicin distinta de la lista.

Creacin de animaciones

209

Desplazamiento y eliminacin de los objetos seleccionados en el panel Fotogramas El panel Fotogramas permite desplazar los objetos seleccionados hasta un fotograma diferente. Este panel tambin permite eliminar los objetos seleccionados.
Indica que se ha seleccionado un objeto. Arrastre para moverlo a otro fotograma.

Si desea que algunos objetos aparezcan en toda la animacin, puede situarlos en una capa y, a continuacin, utilizar el panel Capas para compartir dicha capa. Los objetos incluidos en capas compartidas pueden editarse en cualquier fotograma. Esta edicin afectar a todos los dems fotogramas.

Para desplazar un objeto a un fotograma diferente: 1 2

En este ejemplo, varios fotogramas del documento comparten la capa Web y el fondo.
Para que varios fotogramas compartan una capa: 1

Seleccione el objeto. En el panel Fotogramas, arrastre el cuadrado azul de la derecha del fotograma hasta el nuevo fotograma.

Haga doble clic en la capa. El cuadro de dilogo Opciones de capa se abre. Elija la opcin Compartir en fotogramas.

2 Para eliminar el fotograma seleccionado:

Haga clic en el botn Suprimir fotograma del panel Fotogramas.

Nota: Cuando se comparte una capa, el contenido de sta en todo los fotogramas se sustituye por su contenido en el fotograma actual. Para anular la posibilidad de que varios fotogramas compartan una capa: 1

Arrastre el fotograma al botn Suprimir fotograma. Seleccione Suprimir fotograma en el cuadro emergente Opciones del panel Fotogramas. Capas compartidas por varios fotogramas Las capas dividen un documento de Fireworks en planos velados, como si se tratase de hojas de papel vegetal superpuestas. En las animaciones, las capas sirven para organizar los objetos que forman parte del decorado o del fondo de la animacin.

Haga doble clic en la capa compartida. El cuadro de dilogo Opciones de capa se abre. Desactive la opcin Compartir en fotogramas. Elija la forma de copiar los objetos en los fotogramas: Mantenga el contenido de la capa compartida en el fotograma actual solamente. Copie el contenido de la capa compartida en todos los fotogramas.

2 3

Nota: La capa Web, que contiene objetos de divisin y de zona interactiva solamente, es la que comparten siempre todos los fotogramas.

210

Captulo 17

Visualizacin de los fotogramas situados delante y detrs del fotograma actual El papel cebolla permite ver el contenido de los fotogramas situados delante y detrs del fotograma seleccionado actualmente. Adems, ayuda a animar los fotogramas de forma homognea sin tener que avanzar o retroceder por stos. El trmino papel cebolla procede de una tcnica de animacin tradicional que consiste en utilizar papel de calcar no y traslcido para ver secuencias animadas. Cuando el papel cebolla est activado, los objetos de los fotogramas situados delante o detrs del fotograma actual se visualizan de manera atenuada, para que pueda distinguirlos de los objetos del fotograma actual.

Para ajustar el nmero de fotogramas situados delante o detrs del fotograma actual que quedan visibles: 1

En el panel Fotogramas, haga clic en el botn Papel cebolla.

Elija una opcin de visualizacin: Seleccione Sin papel cebolla para desactivar el papel cebolla y ver el contenido del fotograma actual solamente. Elija Mostrar fotograma siguiente para ver el contenido del fotograma actual y del fotograma siguiente. Elija Anterior y posterior para ver el contenido del fotograma actual y de los fotogramas adyacentes.

El pjaro ms oscuro del centro se encuentra en el fotograma actual con la opcin. De forma predeterminada, los objetos atenuados en otros fotogramas pueden seleccionarse y editarse sin salir del fotograma actual.

Seleccione Mostrar todos los fotogramas para ver el contenido de todos los fotogramas. Elija Personalizar para establecer un nmero personalizado de fotogramas y controlar la opacidad del papel cebolla. Elija Editar varios fotogramas para seleccionar y editar todos los objetos visibles. Desactive Editar varios fotogramas para seleccionar y editar los objetos del fotograma actual solamente.

Creacin de animaciones

211

Creacin o importacin de elementos para la animacin

El proceso de creacin de elementos para una animacin es el mismo que se utiliza para crear los objetos de cualquier otro grco. Asimismo, es posible importar grcos para utilizarlos en una animacin. Despus de crear o importar los grcos que quiere utilizar en la animacin, puede crear smbolos para los objetos que va a utilizar en ms de un fotograma. Si sita dos o ms instancias de un smbolo en un fotograma y cambia el aspecto o la posicin de uno de ellos, puede utilizar la interpolacin para dibujar instancias intermedias y distribuirlas por varios fotogramas de forma automtica. Ejemplo de uso de smbolos e instancias en la animacin Los smbolos son objetos que se almacenan en una biblioteca y que pueden volverse a utilizar fcilmente como copias, denominadas instancias. Al editar un smbolo (el objeto original), las instancias (copias) se actualizan automticamente para reejar los cambios aplicados al smbolo. Para obtener ms informacin sobre la creacin y el uso de smbolos, consulte Modicacin de un smbolo en la pgina 95. Los smbolos se almacenan en la biblioteca.

En los pasos siguientes, la palabra Cow se ha convertido en un smbolo.

Por ejemplo, para que la palabra Cow aparezca animada en varios fotogramas: 1 2

Cree un documento con tres fotogramas. Elija Insertar > Nuevo smbolo. Se abre el cuadro de dilogo Propiedades de smbolo.

Asigne un nombre al smbolo Cow, elija Grco y haga clic en Aceptar. Se abre el editor de smbolos. Con la herramienta Texto, introduzca la palabra Cow y asgnele un formato en el que se utilice una fuente de ms grosor y letras grandes. Haga clic en Aceptar para cerrar el Editor de texto. Cierre el editor de smbolos. Una instancia de la palabra Cow aparece en el Fotograma 1 y el smbolo se aade al panel Biblioteca.

Site instancias de la palabra Cow en otros fotogramas: Elija Copiar en fotogramas en el cuadro emergente Opciones para abrir el cuadro de dilogo Copiar en fotogramas. Elija Todos los fotogramas y haga clic en Aceptar. Seleccione los fotogramas uno a uno en el panel Fotogramas y arrastre una instancia desde el panel Biblioteca hasta el lienzo.

Desplace o transforme la instancia en cada fotograma, o aplquele efectos automticos, en funcin de cmo desee que aparezca en la animacin.

Un smbolo de la biblioteca

En los pasos siguientes se muestra la forma de mantener las caractersticas de ubicacin, transformacin y efectos de las instancias en todos los fotogramas cuando se cambia el smbolo.

212

Captulo 17

Para cambiar la palabra por Llama en todos los fotogramas: 1

Seleccione Cow para abrir el editor de smbolos: En el documento, haga doble clic en cualquier instancia de la palabra Cow. En la biblioteca de smbolos, haga doble clic en la instancia de la palabra Cow.

Por ejemplo, el procedimiento siguiente describe la interpolacin de una instancia vertical con una instancia horizontal para producir objetos que giran progresivamente para crear una mezcla de las dos.
Para interpolar instancias: 1

Seleccione dos o ms instancias del mismo smbolo. Seleccione Modicar > Smbolos > Entre instancias. Introduzca el nmero de pasos de interpolacin en el cuadro de dilogo Entre instancias. Para distribuir los objetos interpolados con el n de separar los fotogramas de la animacin, elija Distribuir en fotogramas y haga clic en Aceptar.
Nota: Si no distribuye los objetos para separar los fotogramas, puede hacerlo despus seleccionando todas las instancias y haciendo clic en el botn Distribuir en fotogramas del panel Capas o Fotogramas.

Para abrir el Editor de texto, haga doble clic en el bloque de texto incluido en el smbolo. Utilice el Editor de texto para cambiar el texto Cow por Llama y haga clic en Aceptar. El smbolo y cada instancia de ste se actualizan para convertirse en Llama; sin embargo, slo cambia el texto y cada instancia conserva sus caractersticas de ubicacin, transformacin y efecto.

Interpolacin de instancias La interpolacin es un trmino de animacin que se utiliza para describir el proceso en el que el animador principal dibuja slo los fotogramas y los asistentes dibujan los fotogramas intermedios. En Fireworks, la interpolacin mezcla dos o ms instancias del mismo smbolo, creando instancias intermedias con atributos interpolados. Es posible cambiar la ubicacin, transformacin, opacidad y efectos de las instancias individuales.

Control de la animacin
Utilice el panel Fotogramas para establecer de qu manera se va a reproducir la animacin.

Interpolacin con una opacidad de 100% a 25%

Creacin de animaciones

213

Configuracin de la demora de fotogramas La demora de fotogramas determina el tiempo durante el cual se va a mostrar el fotograma actual. Especique este valor en centsimas de segundo. Por ejemplo, el valor 50 permite ver un fotograma durante medio segundo, mientras que el valor 300 permite visualizarlo durante 3 segundos.
Para introducir un valor de demora de fotogramas para cada fotograma: 1

Configuracin del nmero de veces que se reproduce la animacin La conguracin del bucle permite determinar la cantidad de veces que se va a repetir la animacin.
Para establecer la repeticin de la animacin GIF: 1

Haga clic en el botn de bucle.

2 3

Abra el cuadro de dilogo de propiedades del fotograma: En el panel Fotogramas, haga doble clic en un nombre de fotograma. Resalte un nombre de fotograma y elija Propiedades en el cuadro emergente Opciones del panel Fotogramas. Introduzca un nmero en la opcin Demora de fotogramas. Presione Intro o haga clic fuera del panel para cerrar el cuadro de dilogo.

En el cuadro emergente, elija la cantidad de veces que quiera repetir la animacin despus de reproducirla la primera vez. Por ejemplo, si elige el valor 4, la animacin se reproduce la primera vez y, a continuacin, se repite cuatro veces ms.

Para reproducir la animacin de forma continua: 1

Haga clic en el botn de bucle.

Para establecer el valor de demora de fotogramas para ms de un fotograma: 1

Elija Siempre en el cuadro emergente.

3 4

Seleccione los fotogramas: Para seleccionar un rango contiguo de fotogramas, mantenga presionada la tecla Mays y seleccione el primer y el ltimo nombre de fotograma. Para seleccionar un rango de fotogramas discontinuo, mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga clic en cada nombre de fotograma. Elija Propiedades en el cuadro emergente Opciones del panel Fotogramas para abrir el cuadro de dilogo de propiedades del fotograma. Introduzca un nmero como demora de fotogramas. Presione Intro o haga clic fuera del panel para cerrar el cuadro de dilogo.

Visualizacin y ocultacin de fotogramas durante la reproduccin Es posible mostrar u ocultar fotogramas durante la reproduccin. Si se oculta un fotograma, ste no aparecer durante la reproduccin y tampoco se exportar.
Para mostrar u ocultar un fotograma: 1

Haga doble clic en un fotograma del panel Fotogramas. Desactive Incluir al exportar. Presione Intro o haga clic fuera del cuadro emergente para cerrarlo.

2 3

214

Captulo 17

Optimizacin de una imagen

Despus de crear una animacin en Fireworks, sta se puede optimizar como parte del proceso de preparacin para exportarla. Para obtener ms informacin sobre la optimizacin de grcos, consulte Eleccin de los ajustes de optimizacin para archivos GIF y PNG en la pgina 158.
Para optimizar una animacin: 1

Presentacin preliminar de una animacin

Es posible mostrar una presentacin preliminar de una animacin mientras se crea para ver los progresos realizados. Tambin puede ver una presentacin preliminar de sta despus de optimizarla para comprobar el aspecto que presentar la animacin GIF exportada en un navegador Web.
Para ver una presentacin preliminar de una animacin en el rea de trabajo:

En el panel Optimizar, elija GIF animado en el cuadro emergente Formato del archivo de exportacin. Establezca las opciones Paleta, Trama o Transparencia. En el panel Fotogramas, establezca la demora de fotogramas.

Utilice los controles de fotograma. En Windows, los controles de fotograma aparecen en la barra de estado. En Macintosh, stos aparecen en la parte inferior de la ventana de documento.

Configuracin de la transparencia Como parte del proceso de optimizacin, puede elegir uno o varios colores de la animacin GIF para que se vuelvan transparentes en un navegador Web. Esto resulta til cuando se quiere que una imagen o el color de fondo de una pgina Web se vea en la animacin.
Nota: Los navegadores Web antiguos no admitan el empleo de animaciones GIF transparentes. Para convertir el color del lienzo en transparente:

Controles de fotograma Cuando realice una presentacin preliminar de la animacin, recuerde los siguientes conceptos: Para establecer el intervalo de tiempo que se va a mostrar el fotograma en la ventana de documento, introduzca valores de demora de fotogramas en el panel Fotogramas. Los fotogramas que no se van a incluir en la exportacin no aparecen en la presentacin preliminar de la animacin. La animacin se reproduce de forma repetida hasta que la detenga, con independencia de la conguracin de bucle establecida en el panel Fotogramas. En la ventana de documento Original, la presentacin preliminar de la animacin presenta el grco con una resolucin completa, en lugar de utilizar la presentacin optimizada de 8 bits de las animaciones GIF exportadas.

En el panel Optimizar, elija Transparencia de ndice en el cuadro emergente Transparencia.

Para mostrar un color como transparente en un navegador Web: 1

Elija Ventana > Optimizar para abrir el panel Optimizar. En el cuadro emergente Transparencia, elija Transparencia de ndice o Transparencia alfa. Para seleccionar los colores de transparencia, utilice las herramientas de transparencia del panel Optimizar.

Creacin de animaciones

215

Para ver una presentacin preliminar de la animacin en la ventana Presentacin preliminar: 1

Haga clic en la cha Presentacin preliminar de la parte superior de la ventana de documento. Utilice los controles de fotograma.

Exportacin de una animacin

Una vez que se ha creado y optimizado una animacin, sta se encuentra lista para exportarla como una animacin GIF, como varios archivos o como un archivo Flash SWF. Si la exporta como un archivo Flash SWF, puede importarla en Macromedia Flash para continuar editndola. Para obtener ms informacin, consulte Exportacin a Macromedia Flash en la pgina 172.
Para exportar una animacin como un archivo GIF animado: 1

Nota: No se recomienda realizar una presentacin preliminar de las animaciones en las ventanas 2-arriba o 4-arriba. Para ver una presentacin preliminar de una animacin en un navegador Web:

Elija Archivo > Presentacin preliminar en el navegador y elija un navegador en el submen.

Para ver una presentacin preliminar de una animacin en el cuadro de dilogo Exportar presentacin preliminar: 1

Elija GIF animado como parte del proceso de optimizacin. Para obtener ms informacin, consulte Eleccin de los ajustes de optimizacin para archivos GIF y PNG en la pgina 158. Seleccione Archivo > Exportar. En el cuadro de dilogo Exportar, escriba un nombre para el archivo y seleccione el destino.

Elija Archivo > Exportar presentacin preliminar para abrir el cuadro de dilogo Exportar presentacin preliminar. Utilice los controles de fotograma para mostrar la animacin GIF exactamente igual que como se exportar.

2 3

Para exportar una animacin como varios archivos: 1

El cuadro de dilogo Exportar presentacin preliminar incluye las opciones de bucle, optimizacin, mtodo de eliminacin y demora de fotogramas. Para obtener ms informacin sobre el uso del cuadro de dilogo Exportar presentacin preliminar, consulte Optimizacin y presentacin preliminar durante la exportacin en la pgina 167.

Seleccione Archivo > Exportar especial > Capas/Fotogramas en archivos. En el cuadro de dilogo Exportar, seleccione Fotogramas en el cuadro emergente Archivos de. Escriba un nombre base para los archivos y seleccione el destino.

Para exportar una animacin como un archivo Flash SWF: 1 2

Elija Archivo > Exportar especial > Flash SWF. Haga clic en Opciones para ajustar la conguracin de exportacin y, a continuacin, haga clic en Aceptar. En el cuadro de dilogo Exportar especial, escriba un nombre para el archivo y especique el destino.

216

Captulo 17

Apertura de una animacin existente

Las animaciones GIF existentes se pueden abrir y editar en Fireworks. Cuando se abre una animacin GIF, Fireworks realiza lo siguiente: Crea una capa compartida denominada Fondo a partir de los pxeles comunes que se han encontrado en ms de la mitad de los fotogramas importados. Sita los componentes animados de cada fotograma en un fotograma separado y, a continuacin, inserta estos componentes como objetos de imagen en un capa llamada GIF.
Para editar una animacin GIF: 1

Apertura de varios archivos como una animacin

Fireworks puede crear una animacin a partir de un grupo de archivos de imagen. Por ejemplo, para crear un anuncio basado en varios grcos existente, abra cada grco y sitelo en un fotograma separado del mismo documento.
Para abrir varios archivos como una animacin: 1

Seleccione Archivo > Abrir varios. El cuadro de dilogo Varios archivos se abre. Desplcese hasta los archivos deseados y aada otros para abrirlos como fotogramas en la animacin. Para aadir un archivo a la lista, haga clic en Aadir. Para aadir todos los archivos de la carpeta actual a la lista, haga clic en Aadir todos. Para eliminar un archivo de la lista de archivos aadidos, cierre un archivo de esta lista y haga clic en Eliminar.

Elija Archivo > Abrir y abra un archivo GIF animado. Elija un fotograma en el panel Fotogramas. Seleccione un objeto y comience a editarlo.

2 3

Nota: Los cambios aplicados a los objetos de una capa que comparten varios fotogramas afectan a todos los fotogramas del documento.

Elija Abrir como animacin y haga clic en Aceptar.

Fireworks abre los archivos en un solo documento y sita cada uno de ellos en un fotograma separado, segn el orden en que se han seleccionado en el cuadro de dilogo Varios archivos.

Creacin de animaciones

217

218

Captulo 17

18

CAPTULO 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Automatizacin de tareas repetitivas

Los diseadores Web ven obstaculizado su trabajo con frecuencia debido a las tareas repetitivas, como la optimizacin o conversin de imgenes para que se ajusten a determinadas especicaciones. Parte de la funcionalidad de Fireworks est puesta al servicio de la automatizacin y simplicacin de un gran nmero de tediosas tareas de conversin de archivos, edicin y dibujo. Para agilizar el proceso de edicin, utilice Buscar y reemplazar a n de buscar y reemplazar elementos de uno o varios archivos. Busque y reemplace elementos, como valores URL, fuentes, color y texto. Utilice Procesar por lotes para convertir grupos de archivos de imagen en otros formatos, o para cambiar sus paletas de colores. Con Procesar por lotes, se pueden aplicar conguraciones de optimizacin personalizadas a grupos de archivos. Tambin puede cambiar el tamao de un grupo de archivos: Procesar por lotes es una herramienta ideal para crear miniaturas. Utilice el panel Historial para crear comandos de acceso directo a las funciones ms utilizadas, o para crear un archivo de comandos que pueda ejecutar una compleja serie de pasos. Fireworks admite y ejecuta JavaScript; de este modo, los usuarios avanzados pueden automatizar tareas muy complejas si escriben comandos de JavaScript y los ejecutan con Fireworks. Es posible controlar el funcionamiento de casi cualquier comando o conguracin de Fireworks mediante JavaScript utilizando comandos especiales de JavaScript que Fireworks es capaz de interpretar.

219

Bsqueda y reemplazo
Utilice Buscar y reemplazar para buscar y reemplazar elementos, como texto, valores URL, fuentes y color, en un documento. Con Buscar y reemplazar se puede buscar en el documento actual o en varios archivos a la vez. Durante el uso de Buscar y reemplazar, Fireworks puede efectuar un seguimiento y guardar un registro de cambios en el panel Historial del proyecto. Buscar y reemplazar slo funciona con archivos PNG de Fireworks o con archivos que contienen objetos vectoriales, como archivos FreeHand, CorelDRAW e Illustrator.
Men Opciones Opcin Buscar

Buscar accede al siguiente caso del elemento. Los elementos encontrados aparecen seleccionados en el documento. Reemplazar sustituye un elemento encontrado por el contenido especicado en la opcin Cambiar por. Reemplazar todo busca y reemplaza en todo el rango de bsqueda cada uno de los casos de un elemento encontrado.
Nota: El reemplazo de objetos en varios archivos no puede modicarse; no es posible deshacer el cambio con Editar > Deshacer.

Seleccin del origen de la bsqueda Fireworks puede efectuar operaciones de bsqueda y reemplazo en cinco ubicaciones distintas. Seleccione una opcin del men emergente Buscar para denir el rango de contenido en el que desea buscar y reemplazar: Buscar seleccin busca y reemplaza elementos solamente en los objetos y texto seleccionados actualmente.

Opcin Buscar

Panel Buscar y reemplazar

Para buscar y reemplazar elementos de un documento: 1 2

Buscar fotograma busca y sustituye elementos slo dentro del fotograma en uso. Buscar en documento busca y reemplaza elementos en el documento activo. Buscar historial del proyecto busca y reemplaza elementos en los archivos incluidos en el Historial del proyecto. Para obtener informacin adicional sobre el Historial del proyecto, consulte Gestin de bsquedas con el Historial del proyecto en la pgina 221. Buscar archivos busca y reemplaza elementos en varios archivos. Si elige Buscar archivos, busque el archivo en el que desee realizar la bsqueda y haga clic en Aadir a para agregarlo a la lista de bsqueda y reemplazo; haga clic en Aadir todos para agregar todos los archivos de la carpeta actual a la lista de bsqueda y reemplazo.

Abra el documento. Seleccione Editar > Buscar y reemplazar para abrir el panel Buscar y reemplazar. En la opcin Buscar, seleccione el origen de la bsqueda. En el men emergente Buscar, elija un atributo de bsqueda. Dena las opciones Buscar y Cambiar por. Seleccione el tipo de bsqueda y reemplazo que desea realizar:

5 6

220

Captulo 18

Bsqueda y reemplazo en varios archivos Cuando desee efectuar operaciones de bsqueda y reemplazo en varios archivos, seleccione Opciones de sustitucin en el men emergente Opciones para denir cmo se manejarn varios archivos abiertos despus de la bsqueda.
Para guardar y cerrar cada archivo despus de efectuar la bsqueda: 1

Para guardar todas las copias de seguridad de los archivos modicados durante una operacin de bsqueda y reemplazo, elija Copias de seguridad incrementales. Los archivos originales se trasladan a la subcarpeta Original Files incluida en la carpeta actual y se aade un nmero en incremento a cada nombre de archivo. Si realiza operaciones de bsqueda y reemplazo adicionales, el archivo original se copia en la carpeta Original Files y el nmero superior siguiente se aade al nombre de archivo. Por ejemplo, en el caso de un archivo Drawing.png, el archivo de seguridad se denomina Drawing-1.png la primera vez que se ejecuta esta operacin. La segunda vez, recibe el nombre Drawing-2.png y as sucesivamente. Gestin de bsquedas con el Historial del proyecto El Historial del proyecto ayuda a hacer un seguimiento y a controlar los cambios que se efectan en varios archivos durante operaciones de bsqueda y reemplazo o de proceso por lotes. Todo documento modicado mediante una operacin de bsqueda y reemplazo queda registrado en el historial del proyecto.

Elija Opciones de sustitucin en el men emergente Opciones del panel Buscar y reemplazar.

Seleccione Guardar y cerrar archivos en el cuadro de dilogo Opciones de sustitucin y, a continuacin, haga clic en Aceptar. Cada archivo se guarda y se cierra una vez realizada la operacin de bsqueda y reemplazo. Solamente permanecen abiertos los archivos activos originalmente.
Nota: Si Guardar y cerrar est desactivado y se procesa por lotes un gran nmero de archivos, Fireworks puede quedarse sin memoria y anular el proceso por lotes.

Seleccione una opcin del men emergente Copias de seguridad para crear copias de seguridad de los archivos modicados en operaciones de bsqueda y reemplazo. Para buscar y reemplazar sin hacer copias de seguridad de los archivos originales, elija Sin copias de seguridad. Los archivos modicados reemplazarn a los archivos originales. Para crear y guardar una sola copia de seguridad de cada uno de los archivos modicados durante una operacin de bsqueda y reemplazo, elija Sobrescribir copias de seguridad. Si realiza operaciones de bsqueda y reemplazo adicionales, el archivo original anterior siempre reemplaza a la copia de seguridad. Las copias de seguridad se guardan en una subcarpeta llamada Original Files.

Utilice Historial del proyecto para desplazarse por los archivos seleccionados, exportar archivos seleccionados con su conguracin de exportacin ms reciente o elegir archivos para procesarlos por lotes.

Automatizacin de tareas repetitivas

221

En el Historial del proyecto se registra cada uno de los documentos modicados y se muestra el fotograma del documento que contiene el cambio, as como la fecha y hora de la modicacin. Aada archivos manualmente al Historial del proyecto para conservar los archivos que se editarn con frecuencia.
Para aadir archivos manualmente al Historial del proyecto: 1 2

Visualizacin e impresin del Historial del proyecto La versin ms reciente del Historial del proyecto se guarda como archivo HTML y en la carpeta Fireworks 3\Settings. Abra el archivo Project_Log.htm en un navegador para visualizar o imprimir el Historial del proyecto. Bsqueda y reemplazo de texto Seleccione Buscar texto en el men emergente Buscar del panel Buscar y reemplazar para buscar y reemplazar palabras, frases o cadenas de texto de documentos de Fireworks. En la opcin Buscar, introduzca el texto de bsqueda. Especique el texto que se utilizar para reemplazar el texto encontrado en la opcin Cambiar por.

Seleccione Archivo > Historial del proyecto. Seleccione Aadir archivos en el men emergente Opciones del Historial del proyecto y busque el archivo que desee aadir. Seleccione el archivo que desee aadir. Haga clic en Aadir.

3 4

Para abrir los archivos incluidos en el Historial del proyecto:

Seleccione uno de los archivos que aparecen en el Historial del proyecto y haga clic en Abrir. Haga doble clic en un archivo del Historial del proyecto.
Para suprimir una entrada del Historial del proyecto:

Seleccione una o varias entradas y elija Borrar seleccin en el men emergente Opciones del Historial del proyecto.
Para suprimir todas las entradas del Historial del proyecto:

Tambin puede elegir opciones que permitan realizar bsquedas ms denidas: Palabra completa permite encontrar el texto tal y como aparece en la opcin Buscar y no como parte de cualquier otra palabra. Coincidir mays./mins. se utiliza para distinguir entre letras maysculas y minsculas en procesos de bsqueda de textos. Expresiones normales sirve para utilizar expresiones regulares en la bsqueda.

Seleccione Borrar todo en el men emergente Opciones del Historial del proyecto.
Para exportar uno de los archivos incluidos en el Historial del proyecto con su configuracin de exportacin ms reciente:

Seleccione uno o ms archivos en el Historial del proyecto y elija Exportar de nuevo en el men emergente Opciones del Historial del proyecto.

222

Captulo 18

Puede utilizar expresiones regulares para buscar partes de una palabra o nmeros segn determinadas condiciones. Para obtener informacin adicional sobre el uso de expresiones regulares, consulte http://developer.netscape.com/docs/manuals/ communicator/jsguide/regexp.htm. Bsqueda y reemplazo de fuentes Elija Buscar fuente en el men emergente Buscar del panel Buscar y reemplazar para buscar y reemplazar fuentes en uno o ms documentos de Fireworks.

Bsqueda y reemplazo de colores Seleccione Buscar color en el men emergente Buscar para buscar y reemplazar colores de documentos de Fireworks.

Seleccione un elemento en el men emergente Aplicar a para indicar la manera en que se aplicarn los colores encontrados en operaciones de bsqueda y reemplazo: Rellenos se emplea para buscar y reemplazar colores de relleno, excepto los de rellenos de patrn. Especique las caractersticas de la fuente o fuentes en las reas Buscar y Cambiar por. En el campo Cambiar por, especique las caractersticas de la fuente o fuentes que desee utilizar para reemplazar las fuentes encontradas. Mn. permite establecer el tamao mnimo en puntos de la fuente seleccionada que desea buscar. Mx. sirve para establecer el tamao mximo en puntos de la fuente seleccionada que va a buscar. Trazos permite buscar y reemplazar colores de trazo nicamente. Rellenos y trazos permite buscar y reemplazar colores de relleno y de trazo. Efectos se utiliza para buscar y reemplazar colores de efectos nicamente. Todas las propiedades sirve para buscar y reemplazar colores de relleno, trazo y efecto.

Automatizacin de tareas repetitivas

223

Bsqueda y reemplazo de valores URL Seleccione Buscar URL en el men emergente Buscar del panel Buscar y reemplazar para buscar y reemplazar valores URL asignados a objetos Web en documentos de Fireworks.

Bsqueda y reemplazo de colores no Websafe Un color no Websafe es un color no incluido en la paleta de colores Web216. Seleccione Buscar fuera de-Web216 en el men emergente Buscar del panel Buscar y reemplazar para buscar todos los colores no Websafe y reemplazarlos por colores Websafe.

Tambin puede elegir opciones que permitan realizar bsquedas ms denidas: Palabra completa permite encontrar el texto tal y como aparece en el campo Buscar y no como parte de cualquier otra palabra. Coincidir mays./mins. se utiliza para distinguir entre letras maysculas y minsculas en procesos de bsqueda de textos. Expresiones normales sirve para utilizar expresiones regulares en la bsqueda. Puede utilizar expresiones regulares para buscar partes de una palabra o nmeros segn determinadas condiciones. Para obtener informacin adicional sobre el uso de expresiones regulares, consulte http:// developer.netscape.com/docs/manuals/ communicator/jsguide/regexp.htm.
Nota: Buscar fuera de Web216 no se encarga de buscar ni reemplazar pxeles de los objetos de imagen.

Procesamiento por lotes

El procesamiento por lotes es un til mtodo para convertir automticamente un grupo de archivos grcos. Para realizar el procesamiento por lotes, elija entre las siguientes opciones: Convertir una seleccin de archivos a otro formato. Convertir una seleccin de archivos al mismo formato con distintas conguraciones de optimizacin. Escalar archivos exportados. Buscar y reemplazar texto, colores, valores URL o fuentes.

224

Captulo 18

Para procesar archivos por lotes: 1

Seleccione Archivo > Procesar por lotes.

Haga clic en Aceptar para ejecutar el proceso por lotes. Para obtener informacin sobre la creacin de archivos de comandos de un proceso por lotes, consulte Almacenamiento de procesos por lotes como Scriptlets en la pgina 228. Haga clic en Cancelar para cancelar el proceso por lotes.

Seleccione los archivos que desee procesar: Archivos abiertos actualmente procesa todos los documentos abiertos. Historial del proyecto (todos los archivos) procesa por lotes todos los archivos incluidos en el panel Historial del proyecto. Historial del proyecto (archivos seleccionados) procesa por lotes los archivos actualmente seleccionados en el panel Historial del proyecto. Personalizar muestra el cuadro de dilogo Abrir varios y permite seleccionar los archivos que se van a procesar por lotes.

Bsqueda y sustitucin durante un proceso por lotes Seleccione Buscar y reemplazar en el cuadro de dilogo Proceso por lotes para buscar y reemplazar texto, fuentes, colores o URL durante un proceso por lotes. Despus de seleccionar Buscar y reemplazar, aparece el cuadro de dilogo Reemplazar por lotes, donde se solicita que especique los elementos en que debe efectuar la bsqueda y el reemplazo durante el proceso por lotes.

Seleccione las acciones que desee efectuar mediante el proceso por lotes. Buscar y reemplazar permite buscar y reemplazar texto, valores URL, colores y fuentes en los archivos procesados por lotes. Exportar se usa para cambiar las conguraciones de exportacin, las convenciones de denominacin y las opciones de escala aplicadas a los archivos procesados.

Seleccione las opciones de copia de seguridad para los archivos originales. Para crear copias de seguridad de los archivos originales, seleccione Copia de seguridad de archivos originales y elija la conguracin necesaria en el cuadro de dilogo Guardar copias de seguridad.

Reemplazar por lotes slo afecta a los siguientes formatos de archivo: PNG de Fireworks, Illustrator, FreeHand y CorelDRAW. Reemplazar por lotes no afecta a los formatos GIF y JPEG.

Automatizacin de tareas repetitivas

225

Para seleccionar atributos a fin de buscar y reemplazar durante un proceso por lotes: 1

Modificacin de la configuracin de archivos mediante un proceso por lotes Es posible modicar un tipo de archivo, la optimizacin de archivo o las conguraciones de escala durante un proceso por lotes si se selecciona Exportar en el cuadro de dilogo Procesar por lotes. Despus de seleccionar Exportar, aparece el cuadro de dilogo Exportar por lotes, donde se solicita que especique la conguracin que se aplicar durante el proceso por lotes.

Seleccione el tipo de atributo de bsqueda y reemplazo en el men emergente Buscar y elija las conguraciones. En la opcin Buscar, escriba o seleccione el elemento especco que desee buscar. En la opcin Cambiar por, escriba o seleccione el elemento especco que vaya a utilizar para reemplazar los elementos encontrados. Para aadir archivos modicados al Historial del proyecto a n de poderlos localizar con facilidad ms adelante, seleccione Actualizar historial del proyecto. Haga clic en Aceptar para guardar la conguracin de Buscar y reemplazar y regresar al cuadro de dilogo Procesar por lotes.

Para obtener ms informacin sobre las opciones de Buscar y reemplazar, consulte Buscar y reemplazar.
Nota: Durante la bsqueda y reemplazo de valores URL en el proceso por lotes, no se generan nuevos archivos HTML.

Para establecer las configuraciones de exportacin que se aplicarn a los archivos durante un proceso por lotes: 1

En el cuadro de dilogo Procesar por lotes, elija Exportar o haga clic en el botn Examinar (...) para abrir el cuadro de dilogo Exportar por lotes. En el men emergente Conguracin de exportacin del cuadro de dilogo Exportar por lotes, elija una opcin: Seleccione Utilizar conguracin de cada archivo para que la conguracin de exportacin previa de cada archivo se aplique en el proceso por lotes. Por ejemplo, al procesar por lotes una carpeta que contenga archivos GIF o JPEG, los archivos resultantes seguirn siendo GIF y JPEG, y se utilizar la conguracin original de paletas y compresin para exportar cada archivo.

226

Captulo 18

Seleccione Personalizar o haga clic en el botn Edicin personalizada para abrir el cuadro de dilogo Presentacin preliminar de la exportacin e introduzca las conguraciones de exportacin personalizadas para el proceso por lotes. Seleccione una conguracin de exportacin preestablecida o guardada previamente para utilizarla en el proceso por lotes. Todas las conguraciones preestablecidas y guardadas aparecern en el men emergente Conguracin de la exportacin.
3

Para establecer opciones de escala para archivos procesados por lotes. 1

En el cuadro de dilogo Procesar por lotes, elija Exportar o haga clic en el botn Examinar (). En el men emergente Escala del cuadro de dilogo Exportar por lotes, elija una opcin: Seleccione Sin escala para exportar los archivos no modicados. Elija Escalar hasta tamao para introducir un valor de anchura y altura que servir para escalar las imgenes de acuerdo con un tamao exacto. Seleccione Escalar hasta tamao e introduzca o elija un valor en el cuadro de texto Escala horizontal o Escala vertical para escalar las imgenes proporcionalmente con un valor de anchura o altura especco. Por ejemplo, para escalar imgenes proporcionalmente con una anchura de 50 pxeles, escriba 50 en el cuadro de texto Escala horizontal y elija Variable en el cuadro de texto Escala vertical. Elija Escalar para encajar en rea e introduzca un valor en Anchura mx. y Altura mx. para escalar las imgenes proporcionalmente de modo que puedan encajar en un rango de anchura y altura especicado.
Nota: Seleccione Escala para ajustar a rea para convertir un grupo de imgenes en miniaturas.

Haga clic en Aceptar para volver al cuadro de dilogo Procesar por lotes y nalizar el proceso por lotes.

Para establecer las opciones de denominacin de los archivos procesados por lotes: 1

En el cuadro de dilogo Procesar por lotes, elija Exportar o haga clic en el botn Examinar (). En el men emergente Nombre del archivo del cuadro de dilogo Exportar por lotes, elija una opcin: Seleccione Nombre original para que no se modiquen los nombres de los archivos. Elija Aadir prejo y escriba un prejo en el cuadro de texto Nombre del archivo para aadir el texto especicado al principio del nombre de archivo de cada archivo procesado por lotes. Seleccione Aadir sujo y escriba un sujo en el cuadro de texto Nombre del archivo para aadir el texto especicado al nal del nombre y antes de la extensin del archivo. Por ejemplo, si escribe _thumb en el campo Nombre del archivo, el archivo Soerbaird.gif recibir el nombre Soerbaird_thumb.gif cuando sea procesado por lotes.

Seleccione Escala segn porcentaje para escalar imgenes de acuerdo con un porcentaje concreto.
3

Haga clic en Aceptar para volver al cuadro de dilogo Procesar por lotes y nalizar el proceso por lotes.

Haga clic en Aceptar para volver al cuadro de dilogo Procesar por lotes y nalizar el proceso por lotes.

Automatizacin de tareas repetitivas

227

Creacin de copias de seguridad de archivos procesados por lotes Es posible guardar copias de seguridad de los archivos originales de un proceso por lotes. Las copias de seguridad se colocan en la subcarpeta Original Files incluida en la misma carpeta que el archivo original.

Copias de seguridad incrementales se utiliza para conservar copias de todos los archivos de copia de seguridad. Cada vez que se ejecuta un nuevo proceso por lotes, se adjunta un nmero al nal del nombre del archivo de la nueva copia de seguridad. Por ejemplo, si se deseara crear una copia de seguridad incremental de un archivo llamado Picture.gif, la primera vez que se ejecutara el proceso por lotes, se copiara un archivo llamado Picture.gif a una subcarpeta Original Files. La segunda vez que se ejecutara un proceso por lotes con el archivo Picture.gif, se copiara un archivo llamado Picture-1.gif a la subcarpeta Original Files. En el tercer proceso por lotes, el archivo recibira el nombre Picture-2.gif y as sucesivamente.
Nota: Si no se selecciona Realizar copia de archivos originales, el proceso por lotes efectuado sobre el mismo formato de archivo sobrescribir el archivo original. Sin embargo, la ejecucin del proceso por lotes sobre un formato de archivo diferente crear un archivo nuevo con el nuevo formato, y el archivo original no se mover ni se suprimir. 3

Para crear copias de seguridad de archivos procesados por lotes: 1

Seleccione Copia de seguridad de archivos originales del cuadro de dilogo Procesar por lotes o haga clic en el botn Examinar (...). Se abre el cuadro de dilogo Guardar copias de seguridad.

En el cuadro de dilogo Guardar copias de seguridad, elija el modo de creacin de copias de seguridad de los archivos: Sobrescribir copias de seguridad permite mantener una nica copia del archivo previo. Cada vez que se ejecuta un nuevo proceso por lotes, la copia de seguridad antigua se reemplaza con la nueva copia de seguridad.

Haga clic en Aceptar para volver al cuadro de dilogo Procesar por lotes y nalizar el proceso por lotes.

Almacenamiento de procesos por lotes como Scriptlets Es posible guardar la conguracin de los procesos por lotes como Scriptlets para reutilizar fcilmente los procesos por lotes varias veces en el futuro.
Para crear un Scriptlet: 1 2

Seleccione Archivo > Procesar por lotes. Seleccione conguraciones en el cuadro de dilogo Procesar por lotes.

228

Captulo 18

Seleccione las acciones que va a realizar y elija la conguracin en los cuadros de dilogo Reemplazar por lotes y Exportar por lotes. Cada vez que se ejecute el Scriptlet guardado, Fireworks solicitar que se especiquen los archivos que debe procesar por lotes. Haga clic en Archivo de comandos del cuadro de dilogo Procesar por lotes. Especique un nombre y un destino para el Scriptlet y haga clic en Aceptar.

Creacin de archivos de comandos

Puede reducir el tedio que causan algunas tareas repetitivas si crea archivos de comandos de macros en Fireworks. Para ello, realice en Fireworks los pasos que desee incluir en un archivo de comandos y, a continuacin, utilice el panel Historial para guardarlos como comandos. O bien, escriba cdigo JavaScript propio en un editor de texto para ejecutarlo en Fireworks. Utilice archivos de comando para el tipo de tareas siguiente: aplicacin de cambios a texto, aplicacin de colores, trazos y rellenos, cambio del tamao y la resolucin de los documentos, establecimiento de un color de lienzo especco o aplicacin de varios efectos o distorsiones a distintos objetos. Es posible modicar casi cualquier comando o conguracin de Fireworks mediante JavaScript utilizando comandos especiales de JavaScript que Fireworks pueda interpretar. Ampliacin de Fireworks Macromedia Dreamweaver 3 tambin emplea JavaScript. Es posible escribir archivos de comando para controlar Fireworks desde Dreamweaver 3. Para obtener documentacin sobre el API de JavaScript, acceda a http://www.macromedia.com/support. Creacin de archivos de comandos con el panel Historial El panel Historial incluye una lista de los pasos realizados durante el uso de Fireworks. Cada paso se guarda en una lnea independiente del panel Historial, de arriba a abajo. De manera predeterminada, el panel incluye hasta 20 pasos. Guarde grupos de pasos en el panel Historial como un comando que pueda reutilizarse. Los comandos guardados se almacenan como archivos JSF en la carpeta Fireworks 3\Settings\Commands.

Nota: Si guarda el Scriptlet en la carpeta Fireworks 3\Settings\Commands, ste aparecer en el men Comandos. Para ejecutar un Scriptlet por lotes: 1 2 3

Seleccione Archivo Elija un Scriptlet. En el cuadro de dilogo Archivos para procesar, elija los archivos que desea procesar con el Scriptlet y haga clic en Aceptar. Para obtener ms informacin sobre la seleccin de archivos, consulte Procesamiento por lotes en la pgina 224.

Ejecucin de Scriptlets mediante arrastrar y colocar Si alguno de los procesos por lotes se repite con frecuencia, gurdelo como Scriptlet y, a continuacin, arrastre el Scriptlet desde el disco duro y colquelo en el ejecutable de Fireworks para ejecutar el proceso por lotes. Al arrastrar un archivo Scriptlet, junto con archivos o carpetas legibles, a la aplicacin Fireworks, sta se inicia para procesarlos inmediatamente. Tambin se pueden arrastrar varios archivos Scriptlet y archivos grcos y colocarlos en Fireworks. Despus de hacerlo, Fireworks procesa los archivos grcos tantas veces como Scriptlets se hayan arrastrado y colocado.

Automatizacin de tareas repetitivas

229

Los comandos guardados pueden ejecutarse en cualquier documento de Fireworks, ya que no son especcos de documento.
Men emergente Opciones

Para cambiar el nmero de pasos registrados por el panel Historial: 1 2

Seleccione Archivo > Preferencias. Sustituya el nmero de Pasos de Deshacer por el nmero de pasos que el panel Historial deber registrar.

Nota: El registro de pasos adicionales requiere ms memoria RAM. Para borrar todos los pasos del panel Historial: Guardar los pasos seleccionados como un comando. Copiar los pasos seleccionados en el Portapapeles.

Seleccione Borrar marcador en el men emergente Opciones del panel Historial a n de liberar memoria y espacio en disco. Al borrar pasos del panel Historial se elimina la capacidad de deshacer ediciones.
Para guardar pasos como un comando:

Volver a reproducir los pasos. Deshacer y rehacer pasos.

Para deshacer los pasos con el panel Historial:

Seleccione los pasos que va a guardar como un comando: Haga clic en un paso y, a continuacin, mantenga presionada la tecla Mays y haga clic en otro paso para seleccionar un rango de pasos que se guardarn como un comando. Presione Control (Windows) o Comando (Macintosh) para seleccionar pasos no contiguos.

Arrastre el indicador de Deshacer hacia arriba del panel hasta llegar al ltimo paso que desee deshacer. Haga clic en el recorrido del indicador de Deshacer. Los pasos deshechos se conservan en el panel Historial y aparecen resaltados en color gris.
2 Para rehacer los pasos deshechos:

Guarde el comando: Haga clic en el botn Guardar situado en la parte inferior del panel Historial. Seleccione Guardar como comando en el men emergente Opciones del panel Historial.

Arrastre el indicador de Deshacer hacia la parte superior del panel hasta llegar al ltimo paso que desee restablecer. Haga clic en el recorrido del indicador de Deshacer.
3

Introduzca un nombre para el comando y haga clic en Aceptar. El comando aparece en el men Comandos.

230

Captulo 18

Reproduccin de pasos o comandos Es posible ejecutar comandos registrados o una seleccin de pasos del panel Historial en cualquier momento.
Para reproducir un comando guardado: 1 2

Cambio de nombre y eliminacin de comandos Es posible cambiar el nombre de los comandos que aparecen en el men Comandos, as como eliminarlos.
Para cambiar un nombre de comando: 1

Seleccione un objeto, si es necesario. Elija el comando en el men Comandos.

Para volver a reproducir una seleccin de pasos: 1 2 3

Seleccione Comandos > Editar lista de comandos. Se abre el cuadro de dilogo Editar lista de comandos.

Seleccione uno o varios objetos. Elija los pasos en el panel Historial. Reproduzca los pasos: Haga clic en el botn Volver a reproducir de la parte inferior del panel Historial. Seleccione Volver a reproducir los pasos seleccionados en el men emergente Opciones del panel Historial.
1 2 3

Seleccione un comando. Haga clic en Cambiar nombre, introduzca un nombre nuevo y haga clic en Aceptar.

Para eliminar un comando incluido en Fireworks:

Seleccione Comandos > Editar lista de comandos. Se abre el cuadro de dilogo Editar lista de comandos.

Los pasos marcados con una X no pueden repetirse y no es posible volver a reproducirlos. Las lneas separadoras indican que se ha producido un cambio de seleccin. Los comandos creados a partir de pasos que traspasan una lnea separadora pueden generar resultados imprevisibles.
Para aplicar pasos seleccionados a objetos en un gran nmero de documentos: 1 2 2

Seleccione un comando y haga clic en Suprimir.

Para eliminar un comando no incluido en Fireworks:

Seleccione un rango de pasos. Copie los pasos: Haga clic en el botn Copiar situado en la parte inferior del panel Historial. Seleccione Copiar pasos en el men emergente Opciones del panel Historial.

Elimine el archivo JSF asociado con el comando de la carpeta Fireworks 3\Settings\Commands.

Seleccione uno o varios objetos de cualquier documento de Fireworks. Seleccione Editar > Pegar.

Para repetir el ltimo paso:

Seleccione Editar > Repetir.

Automatizacin de tareas repetitivas

231

Edicin o personalizacin de un archivo de comandos Los archivos de comandos se guardan como JavaScript. Es posible abrirlos y editarlos en cualquier editor de texto, como NotePad o SimpleText. Los archivos de comandos pueden escribirse en JavaScript y es posible utilizar comandos especcos de Fireworks para controlar los comandos y conguraciones de Fireworks.
Para editar pasos seleccionados como JavaScript en un editor de texto: 1 2

Seleccione un rango de pasos. Copie los pasos: Haga clic en el botn Copiar situado en la parte inferior del panel Historial. Seleccione Copiar pasos en el men emergente Opciones del panel Historial.

3 4

Cambie a una aplicacin de edicin de texto. Pegue los pasos.

232

Captulo 18

19

CAPTULO 19

Operaciones con Dreamweaver y otros editores HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Normalmente, el destino de una imagen exportada desde Fireworks es aparecer en una pgina Web. Esto signica que el vnculo a la imagen y el cdigo JavaScript o de tabla HTML necesarios para hacer funcionar los rollovers deben colocarse en un documento HTML. Fireworks puede exportar un documento HTML que contenga dicho cdigo. Sin embargo la mayora de los diseadores no suelen crear pginas Web a partir del documento HTML creado por Fireworks. Normalmente, dicho cdigo se inserta en documentos HTML existentes. Ya que el cdigo HTML generado por Fireworks contiene a menudo JavaScript o tablas avanzados para rollovers y divisiones, la ubicacin correcta de las porciones de un documento HTML de Fireworks en las secciones correspondientes del archivo HTML destino es de suma importancia. Muchos diseadores Web utilizan herramientas de edicin HTML como Macromedia Dreamweaver, Adobe GoLive o Microsoft FrontPage. Fireworks simplica la tarea de insercin de su cdigo HTML en un editor HTML con varios estilos de exportacin HTML orientados a los editores ms utilizados. Si utiliza Macromedia Dreamweaver 3 junto con Fireworks, podr aprovechar algunas funciones de la integracin de las dos aplicaciones, incluyendo el intercambio de comportamientos, seguimiento avanzado de las actualizaciones de los archivos e incluso actualizaciones automticas de HTML.

233

Planificacin del sitio Web

Al exportar desde Fireworks, tenga en cuenta la estructura del sitio Web en el que se colocarn las imgenes de Fireworks. Cuando Fireworks escribe cdigo HTML o JavaScript durante la exportacin, incluye referencias al destino que elija para los archivos de imagen y el archivo HTML. En Dreamweaver, debe trabajar en una copia local del sitio Web que reeje la estructura del sitio cuando transera los archivos al servidor Web. Normalmente es mejor exportar los archivos Fireworks directamente en la carpeta de trabajo del sitio Dreamweaver.

Uso del comando Actualizar HTML

La forma ms fcil de colocar o actualizar cdigo de HTML de Fireworks en otro archivo HTML en el mismo sistema es utilizando el comando Archivo > Actualizar HTML. Al colocar cdigo HTML de esta forma, Fireworks actualiza el cdigo HTML y JavaScript, adems tambin exporta las imgenes referenciadas por dicho cdigo HTML con lo que reemplazan las versiones anteriores.
Para actualizar el cdigo HTML de Fireworks colocado en otro archivo HTML: 1 2

Descripcin del cdigo HTML de Fireworks

El cdigo HTML generado por Fireworks contiene un vnculo con la imagen exportada y el HTML que establece el color de fondo de la pgina web para que sea igual que el del lienzo o del color mate del grco exportado. Fireworks puede exportar el cdigo HTML y JavaScript necesario para crear mapas de imgenes, rollovers, mensajes de barra de estado y otras acciones que se denen mediante el inspector de comportamientos. Adems, Fireworks exporta tablas HTML para recomponer grcos con divisiones. Es posible visualizar archivos HTML exportados con Fireworks abrindolos en un navegador web. Estos archivos pueden editarse en un editor de texto como NotePad (Windows) o SimpleText (Macintosh) o en una herramienta de creacin de pginas web como Dreamweaver.

Seleccione Archivo > Actualizar HTML. Localice el archivo HTML que desee actualizar y haga clic en Abrir.

Fireworks actualiza la tabla o tablas HTML y el cdigo JavaScript del documento HTML. Fireworks tambin exporta las imgenes y las coloca en las carpetas correctas, tal como estn referenciadas en el archivo HTML que est actualizando. Si Fireworks no encontrar el cdigo HTML correspondiente para actualizar, ofrecer la opcin de insertar el nuevo cdigo HTML en el documento que designe. Fireworks lo inserta en el archivo, colocando la seccin JavaScript al comienzo del documento y la tabla HTML o vnculo a la imagen al nal.

234

Captulo 19

Copia y pegado de cdigo HTML de Fireworks

Otro mtodo rpido para colocar imgenes de Fireworks en otro documento HTML es mediante la copia y pegado desde Fireworks en otro editor HTML, como Dreamweaver o Adobe GoLive.
Para copiar y pegar cdigo HTML de Fireworks en un editor HTML: 1 2

Exportacin y pegado Un mtodo similar a la copia de imgenes de Fireworks y de cdigo de HTML en un documento HTML es la exportacin de las imgenes en una carpeta de la copia local del sitio Web, y pegar despus el cdigo HTML y JavaScript directamente en un editor HTML.
Para exportar y pegar imgenes de Fireworks y cdigo HTML en un editor HTML: 1 2

Seleccione Editar > Copiar cdigo HTML. Siga los pasos del asistente conforme le gua en el proceso de denicin de la exportacin del cdigo HTML e imgenes. El asistente sigue un proceso para exportar las imgenes a una carpeta. El cdigo HTML se copia en el Portapapeles.

En Fireworks, elija Archivo > Exportar. En el cuadro de dilogo Exportar, elija un destino para las imgenes. Lo ideal es exportar las imgenes al sitio nal. Elija Portapapeles en el men emergente destino del cdigo HTML. En el editor HTML, abra la pgina en la que desee colocar las imgenes de Fireworks. Haga clic en el punto en el que desee que aparezca el contenido, y elija Edicin > Pegar. El cdigo HTML de Fireworks se pega en el archivo HTML. Al copiar en Macromedia Dreamweaver 3 o Adobe GoLive, todo el cdigo HTML y JavaScript asociado con los archivos Fireworks que exporte se copia en el archivo HTML y se actualizan todos los vnculos a las imgenes.

En el editor HTML, coloque el cursor en la ubicacin en la que desee pegar el cdigo HTML. Seleccione Editar > Pegar o el comando equivalente.

El cdigo HTML de Fireworks se pega en el archivo HTML. Al copiar en Dreamweaver 3 o GoLive. Todo el cdigo HTML y JavaScript asociado con los archivos Fireworks que exporte se copia en el archivo HTML y se actualizan todos los vnculos a las imgenes.

Exportacin de cdigo HTML de Fireworks como un archivo

Si no desea colocar inmediatamente el cdigo HTML de Fireworks en un editor HTML, puede exportar el cdigo HTML como un archivo. Despus, podr cortar y pegar el cdigo HTML de dicho archivo en otro archivo HTML. La exportacin como archivo es til si otra persona edita el cdigo HTML en otro sistema o si piensa modicar el cdigo HTML posteriormente.

Operaciones con Dreamweaver y otros editores HTML

235

Exportacin de un archivo HTML Al exportar imgenes, puede indicar a Fireworks que exporte el archivo HTML en uno de los diferentes formatos:
Ninguno no genera cdigo HTML durante la exportacin. Dreamweaver 2 genera cdigo HTML que puede editarse en Dreamweaver 2. Los comportamientos aplicados a objetos aparecen en el Inspector de comportamientos de Dreamweaver. Los comportamientos de Fireworks 3 que no estaban presentes en Dreamweaver 2 aparecern como comportamientos personalizados en el Inspector de comportamientos de Dreamweaver 2. Dreamweaver 3 genera cdigo HTML que puede editarse en Dreamweaver 3. Los comportamientos aplicados a objetos Web aparecen en el Inspector de comportamientos de Dreamweaver. Puede editar rollovers y otros comportamientos JavaScript en el Inspector de comportamientos de Dreamweaver. Dreamweaver 3 Library.lbi

Para exportar cdigo HTML con un archivo: 1 2

Seleccione Archivo > Exportar. Elija un estilo de salida HTML en el men emergente Estilo de conguracin HTML. Especique una ubicacin para el archivo HTML exportado.

Uso de los elementos de biblioteca de Dreamweaver 3 Los elementos de biblioteca de Dreamweaver simplican el proceso de edicin y actualizacin de un componente utilizado con frecuencia en un sitio Web, como una serie de vnculos de pie de pgina o una barra de navegacin. Un elemento de biblioteca es una porcin de un archivo HTML ubicado en una carpeta denominada Library en el directorio raz del sitio. Los elementos de biblioteca aparecen en la paleta de biblioteca de Dreamweaver. Puede arrastrar una copia en cualquier pgina del sitio Web. No es posible editar un elemento de biblioteca directamente en el documento Dreamweaver; slo puede editar el elemento de biblioteca maestro. Despus, puede indicar a Dreamweaver que actualice cada copia de dicho elemento en todo el sitio Web. Para obtener informacin adicional sobre el uso de elementos de biblioteca de Dreamweaver 3, consulte Utilizacin de Dreamweaver.

crea objetos especiales llamados elementos de biblioteca dentro de Dreamweaver. Puede utilizar los elementos de biblioteca en Dreamweaver para imgenes que utilice en varias pginas de su sitio y para imgenes que deban actualizarse con frecuencia. Los archivos de biblioteca deben tener una extensin LBI y estar ubicados en una carpeta denominada Library en el directorio raz del sitio.

FrontPage genera HTML que puede editarse en Microsoft FrontPage. Genrico

genera cdigo HTML que cumple el estndar bsico HTML sin favorecer a ningn editor HTML. genera HTML que puede editarse en Adobe GoLive. Los comportamientos aplicados a objetos Web aparecen en el Inspector de acciones de GoLive.

GoLive

236

Captulo 19

Para exportar un elemento de biblioteca: 1 2

Seleccione Archivo > Exportar. Seleccione Dreamweaver 3 Library.lbi en el men emergente Estilo.

Es posible editar los estilos de salida de Fireworks para personalizar el cdigo HTML exportado. Asimismo, puede utilizar cdigo JavaScript para crear cuadros de dilogo o avisos para los procesos de exportacin. Por ejemplo, es posible crear un cuadro de dilogo que se abra durante la exportacin para especicar un ttulo personalizado para la pgina HTML que desee exportar, o para producir cdigo HTML diferente para tareas concretas.
Para aadir un estilo de salida:

Guarde el archivo con la extensin LBI en una carpeta llamada Library, situada en el directorio raz del sitio. Si fuera necesario, Fireworks le instar a crear esta carpeta.

Cree, duplique o coloque una nueva carpeta en la carpeta Fireworks 3\Settings\HTML Code. Coloque copias personalizadas de los archivos Imagemap.htt, Slices.htt y ServerMap.mtt en la nueva carpeta. El nombre de la carpeta indica el nombre del estilo que aparece en el men emergente Salida HTML

Haga clic en Exportar y guarde los archivos.

Edicin de los estilos de salida HTML de Fireworks Si desea crear sus propios estilos de salida HTML, puede aadir, quitar o editar estilos de salida HTML realizando cambios en las plantillas ubicadas en la carpeta Fireworks 3\Settings\HTML Code. Los archivos de plantilla estn creados en JavaScript y se ejecutan durante la exportacin.
Nota: Es necesario tener conocimientos sobre este lenguaje para editar una plantilla. Si un archivo de plantilla que ha sido modicado contiene errores en el lenguaje JavaScript, el proceso de exportacin se detiene. Fireworks no puede corregir errores de JavaScript; solamente ejecuta cdigo JavaScript vlido en los procesos de exportacin.

Para eliminar un estilo de salida:

Mueva o elimine la carpeta que contiene el estilo que desea borrar de la carpeta Fireworks 3\Settings\HTML Code.
Para modificar un estilo de salida: 1

En la carpeta Fireworks 3\Settings\HTML Code, abra la carpeta que contiene el estilo que desee editar. Abra la plantilla en un editor de texto, efecte los cambios necesarios y gurdela. Asegrese de utilizar el mismo nombre y ruta de acceso cuando guarde el documento.

Operaciones con Dreamweaver y otros editores HTML

237

Colocacin de archivos Fireworks en Dreamweaver

Otra forma de colocar imgenes de Fireworks o archivos HTML en un documento Dreamweaver es mediante la importacin de imgenes de Fireworks o de archivos HTML desde Dreamweaver 3.
Para colocar imgenes de Fireworks en un documento de Dreamweaver 3: 1

Pegado de un archivo HTML de Fireworks en otro archivo HTML

Si utiliza un editor HTML diferente de Dreamweaver o GoLive o si el cdigo HTML se aade a los documentos HTML en otro sistema, es posible que tenga que copiar y pegar cdigo HTML desde el archivo HTML de Fireworks en otro archivo HTML. Al hacerlo, exporte el cdigo HTML utilizando el estilo de salida Genrico. Fireworks inserta comentarios en el cdigo HTML exportado que le ayudan a identicar el comienzo y el nal del cdigo de elementos especcos, como tablas y rollovers. Al copiar el cdigo HTML exportado desde Fireworks, es importante pegarlo en la ubicacin correcta del documento HTML destino. Al copiar y pegar cdigo HTML de Fireworks en otros documentos HTML, no es necesario copiar los cdigos <HTML> o <BODY>. Dichos cdigos ya deberan encontrarse en el documento HTML destino. Copia de cdigo JavaScript en un archivo HTML Cuando Fireworks exporta cdigo HTML junto con comportamientos JavaScript, el cdigo incluye cdigo JavaScript para la ejecucin de comportamientos, as como todo el cdigo HTML necesario. Asegrese de hacer lo siguiente cuando pegue cdigo JavaScript en otros documentos HTML: Pegue toda la seccin <SCRIPT> entre las etiquetas <HEAD> y </HEAD>. Asegrese de que la seccin comienza con <SCRIPT> y naliza </SCRIPT>. Si ya existiera una seccin de guin en el archivo HTML destino, no es necesario que copie las etiquetas <SCRIPT>; copie el cdigo del archivo origen y pguelo al nal de la seccin destino <SCRIPT>, antes de la etiqueta </SCRIPT>. Pegue la etiqueta de la imagen en la seccin <BODY> en el punto en que desea que aparezca la imagen en la pgina.

Exporte imgenes de Fireworks a un formato web como GIF, JPEG o PNG. En Dreamweaver, seleccione Insertar > Imagen. En el cuadro de dilogo Seleccionar origen de imagen de Dreamweaver, localice la imagen que acaba de exportar desde Fireworks.

2 3

Para colocar archivos HTML de Fireworks en un documento de Dreamweaver 3: 1

En Dreamweaver, elija Insertar > Media > HTML de Fireworks. En el cuadro de dilogo Insertar HTML de Fireworks, localice un documento HTML generado por Fireworks. Si desea eliminar el documento importado de HTML de Fireworks del disco duro al importarlo en Dreamweaver, elija Eliminar archivo despus de insercin. Haga clic en Aceptar. El cdigo HTML de Fireworks se coloca en el documento de Dreamweaver. Todas las imgenes asociadas tambin se importan y el cdigo JavaScript se incorpora en la pgina de Dreamweaver.

238

Captulo 19

Copia del cdigo HTML de mapas de imagen de tipo cliente El cdigo HTML exportado por Fireworks para mapas de imagen de tipo cliente incluye un vnculo con el grco e informacin <MAP> para denir las zonas interactivas del mapa de imgenes. Asegrese de hacer lo siguiente cuando pegue mapas de imagen en documentos HTML: Pegar el vnculo del mapa de imgenes dentro de la seccin <BODY> del documento HTML destino en el que desee que aparezca el mapa de imagen. Pegar todo en la seccin <MAP> justo a continuacin del vnculo con el grco. Copia de cdigo HTML en documentos con divisiones Cuando se exportan divisiones de una imagen, el cdigo HTML exportado por Fireworks incluye una tabla que permite recomponer las divisiones en una pgina Web. Si piensa exportar rollovers JavaScript o mapas de imgenes junto con las divisiones, el cdigo HTML debera incluir tambin cdigo JavaScript y una seccin <MAP>. Asegrese de hacer lo siguiente cuando pegue un archivo con divisiones en otros documentos HTML: Pegar toda la seccin <TABLE> incluyendo las etiquetas, en el lugar donde desee que aparezca el grco con divisiones en la pgina. Pegar cualquier cdigo JavaScript dentro de la seccin <SCRIPT>, o pegar ntegramente la seccin <SCRIPT> entre las etiquetas <HEAD> y </HEAD>. Pegar todas las secciones <MAP> correspondientes al grco con divisiones justo despus de la etiqueta </TABLE>.

Edicin de imgenes Fireworks incluidas en Dreamweaver

Es posible editar imgenes de Fireworks que haya incluido en Dreamweaver simplemente iniciando Fireworks desde Dreamweaver. Edite archivos GIF y JPEG desde Dreamweaver utilizando un archivo origen de Fireworks u optimice la imagen sin afectar al archivo origen. Antes de ejecutar Fireworks y editar, asegrese de denir un editor externo en Dreamweaver.
Para definir Fireworks como un editor externo de Dreamweaver 2: 1

En Dreamweaver 2, seleccione Edicin > Preferencias > Editores externos. Dena Fireworks como Editor de imgenes.

Para definir Fireworks como un editor externo de Dreamweaver 3: 1

En Dreamweaver 3, seleccione Edicin > Preferencias > Editores externos. Elija un tipo de archivo para asociar con Fireworks: GIF, JPEG o PNG. Si Fireworks 3 no aparece ya como Editor, haga clic en el botn Aadir editor, localice la aplicacin Fireworks 3 y haga clic en Abrir. Fireworks 3 aparecer en la lista de editores. Si desea que Fireworks sea el editor primario para el formato de imagen seleccionado, seleccione Fireworks 3 y haga clic en Convertir en primario.

Para ejecutar Fireworks y editar grficos colocados en Dreamweaver 2 o 3: 1

En Dreamweaver, seleccione Ventana > Propiedades para abrir el inspector de propiedades si fuera necesario.

Operaciones con Dreamweaver y otros editores HTML

239

Ejecute Fireworks: Seleccione una imagen y, en el inspector de propiedades, haga clic en Editar. En Dreamweaver 3, haga clic con el botn derecho del ratn (Windows) o Control-clic (Macintosh) en la imagen y elija Editar con Fireworks 3. Dreamweaver inicia Fireworks en el caso de que no est abierto ya.

Optimizacin de grficos de Fireworks en Dreamweaver

Es posible cambiar la conguracin de optimizacin de una imagen de Fireworks colocada en Dreamweaver al ejecutar Fireworks desde Dreamweaver y cambiar la conguracin en el cuadro de dilogo Presentacin preliminar de la exportacin.
Para optimizar una imagen de Fireworks colocada en Dreamweaver: 1

Como respuesta al mensaje que pregunta si desea utilizar otro documento Fireworks existente como origen: Haga clic en S, si ya existe un archivo origen Fireworks, localice el archivo PNG origen si fuera necesario y haga clic en Aceptar. Haga clic en No, si no existe ningn archivo origen de Fireworks o, si solamente desea editar la imagen de mapa de bits que se encuentra en Dreamweaver.

En Dreamweaver 2 o 3, elija Comando > Optimizar en Fireworks. Como respuesta al mensaje que pregunta si desea utilizar otro documento Fireworks existente como origen: Haga clic en S, si ya existe un archivo origen Fireworks, localice el archivo PNG origen si fuera necesario y haga clic en Aceptar. Haga clic en No, si no existe ningn archivo origen de Fireworks o, si solamente desea editar la imagen de mapa de bits que se encuentra en Dreamweaver.

4 5

Edite el grco en Fireworks. Seleccione Archivo > Actualizar. Cuando Dreamweaver abre y edita un grco en Fireworks, Actualizar adopta la funcin de Guardar en el men Archivo. Al seleccionar Actualizar se exporta la imagen con la conguracin de Presentacin preliminar de exportacin ms reciente, se reemplaza el archivo GIF o JPEG utilizado por Dreamweaver y guarda el archivo origen PNG en el caso de haber seleccionado un archivo origen.
3

En la Presentacin preliminar de la exportacin de Fireworks, introduzca la conguracin de optimizacin y haga clic en Actualizar.

La imagen actualizada se guarda sobre la antigua en la carpeta de Dreamweaver y la imagen colocada en Dreamweaver se actualiza para reejar el cambio.

6 7

Cierre el documento Fireworks. Cambie a Dreamweaver. La imagen colocada se actualiza y reeja los cambios efectuados en Fireworks

Nota: No ejecute Dreamweaver para modicar una tabla con divisiones o rollovers creados en Fireworks. En su lugar, edite el archivo original de Fireworks y elija Archivo > Actualizar HTML desde Fireworks para actualizar el cdigo HTML y las imgenes en Dreamweaver.

240

Captulo 19

Algunos conceptos bsicos de HTML

En esencia, los archivos en HTML son archivos de texto que contienen estos elementos: Texto que aparece una pgina web. Etiquetas HTML que determinan el formato y estructura del texto, as como vnculos a imgenes y otros documentos HTML (pginas Web). Las etiquetas HTML aparecen entre corchetes y tienen el siguiente aspecto:
<tag> texto con formato </tag>

<SCRIPT></SCRIPT> marca el comienzo del cdigo de un lenguaje de comandos como JavaScript. <TITLE></TITLE> establece

el nombre del documento que aparece en la parte superior de la ventana del navegador Web. indica una seccin con texto o vnculos que aparece en el cuerpo principal del documento.
<BODY></BODY> <IMG> muestra

una imagen en la pgina Web.

Por ejemplo:
<IMG SRC=Picture.gif>

Esta etiqueta presenta la imagen Picture.gif en la pgina.

<A></A> rea un vnculo con otro documento HTML a partir de un texto o una imagen. Por ejemplo: <A HREF=http://www.macromedia.com>Vnculo</A>

Al igual que en el ejemplo anterior, la mayora de etiquetas HTML constan de un smbolo de apertura y otro de cierre que, juntos, denen el principio y nal del texto afectado. Sin embargo, algunas etiquetas solamente precisan el smbolo de apertura. Muchas etiquetas permiten aadir variables con el n de controlar el efecto de la etiqueta sobre el rango del texto seleccionado. Por ejemplo:
<font color=blue>Fireworks</font>

En este caso, al hacer clic en la palabra Vnculo se accede a www.macromedia.com. Para insertar una imagen y convertirla en un vnculo utilice dos etiquetas:
<A HREF=http://www.getfireworks.com> <IMG SRC=Explosion.jpg> </A>

Esta etiqueta asigna el color azul a la palabra Fireworks.

Etiquetas HTML comunes

La mayora de los documentos HTML contienen estas etiquetas:
<HTML></HTML> marca el comienzo y el nal del

Estas etiquetas presentan la imagen Explosion.jpg en la pgina web. Si se hace clic sobre la misma se accede al sitio www.getreworks.com. Observe que el vnculo con la imagen est situado entre las etiquetas de vnculo, entre <A> y </A>.
<MAP></MAP> describe la forma de una zona interactiva mediante coordenadas y contiene la URL destino de la zona interactiva. Nota: Para obtener informacin adicional sobre etiquetas HTML especcas y el uso de las mismas, consulte alguna de las publicaciones comerciales o sitios web dedicados a HTML.

documento HTML.
<HEAD></HEAD> contiene las etiquetas <META>, <TITLE> y <SCRIPT>. <META></META> almacena

informacin adicional acerca del documento HTML, como la aplicacin en que se cre, palabras clave para motores de bsqueda y otros datos que pueden ser de utilidad para diversas aplicaciones. Muchos editores de HTML aaden metainformacin en los documentos HTML.

Operaciones con Dreamweaver y otros editores HTML

241

242

Captulo 19

APNDICE A
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mtodos abreviados de teclado

Men Archivo
Comando Nuevo Abrir Abrir varios Cerrar Guardar Guardar como Importar Exportar Presentacin preliminar de exportacin Presentacin preliminar en navegador principal Presentacin preliminar en navegador secundario Imprimir Salir Windows Control+N Control+O Control+Mays+O Control+W, Control + F4 Control+S Control+Mays+S Control+R Control+Mays+R Control + Mays + X Macintosh Comando+N Comando+O Comando+Mays+O Comando+W Comando+S Comando+Mays+S Comando+R Comando+Mays+R Comando+Mays+X

F12

F12

Mays + F12

Mays + F12

Control+P Alt+F4

Comando+P Comando+Q

243

Men Editar
Comando Deshacer Repetir Cortar Copiar Pegar Pegar dentro Pegar atributos Seleccionar todo Anular seleccin Seleccionar nivel superior Seleccionar nivel inferior Seleccionar inverso Duplicar Clonar Recortar la imagen seleccionada Windows Control+Z Control+ Mays + Z Control+X Control+C Control+V Control+Mays+V Control + Alt + Mays + V Control+A Control+D Control + flecha arriba Control + Down Arrow Control + Mays + I Control + Alt + D Control +Mays + C Control + Alt + C Macintosh Comando+Z Comando + Mays + Z Comando+X Comando+C Comando+V Comando+Mays+V Comando+Mays+Opcin+V Comando+A Comando+D Comando + flecha arriba Comando + Flecha abajo Comando + Mays + I Comando+Opcin + D Comando + Mays + C Comando + Opcin + V

Men Ver
Comando Aumentar Windows Control + + (ms), o Control + barra espaciadora + arrastrar Control + (menos) Control + 0 (cero) Control+ Alt + 0 (cero) Control + K Macintosh Comando + + (ms), o Comando + Barra espaciadora + arrastrar Comando + (menos) Comando + 0 (cero) Comando + Opcin + 0 (cero) Comando + K

Reducir Encajar seleccin Encajar todo Pantalla completa

244

Apndice A

Comando Ocultar la seleccin Mostrar todo Ocultar bordes Ocultar paneles Reglas Cuadrcula Guas Guas de divisin

Windows Control + M Control + Mays + M Control + H Control + Mays + H, o Tab Control + Alt + R Control + (apstrofo) Control + ; (punto y coma) Control + Alt + Mays + ;

Macintosh Comando + M Comando + Mays + M Comando + H Comando + Mays + H, o Tab Comando + Opcin + R Comando + (apstrofo) Comando + ; (punto y coma) Comando + Mays + Opcin + ;

Submen Nivel de aumento

Para establecer la visualizacin en 50% 100% 200% 400% 800% 3200% 6400% Windows Macintosh

Control + 5 Control + 1 Control + 2 Control + 4 Control + 8 Control + 3 Control + 6

Comando + 5 Comando+ 1 Comando + 2 Comando + 4 Comando + 8 Comando + 3 Comando + 6

Submen Opciones de cuadrcula

Comando Ajustar a cuadrcula Editar cuadrcula Windows Control + Mays + (apstrofo) Control + Alt + G Macintosh Comando + Mays + (apstrofo) Comando + Opcin + G

Mtodos abreviados de teclado

245

Submen Opciones de guas

Comando Bloquear guas Ajustar a guas Editar guas Windows Control + Alt + ; Control + Mays + ; Control + Alt + Mays + G Macintosh Comando + Opcin + ; Comando + Mays + ; Comando+Opcin+Mays+G

Men Insertar
Comando Nuevo smbolo Convertir en smbolo Zona interactiva Imagen Imagen vaca Windows Control + F8 F8 Control + Mays + U Control + R Control + Alt + Y Macintosh Comando + F8 F8 Comando + Mays + U Comando + R Comando + Opcin + Y

Men Modificar
Comando Entre instancias Objeto de imagen Salir de edicin de imagen Unir Separar Combinar imgenes Agrupar Enmascarar imagen Desagrupar Windows Control + Alt + Mays + T Control + E Control + Mays + D Control + J Control + Mays + J Control + Mays + Alt + Z Control + G Control + Mays + G Control + U Macintosh Comando+Opcin+Mays+T Comando + E Comando + Mays + D Comando + J Comando + Mays + J Comando+Mays+Opcin+Z Comando + G Comando + Mays + G Comando + U

246

Apndice A

Submen Transformar
Comando Transformacin libre Transformacin numrica Rotar 90 (s. horario) Rotar 90 (s. antihorario) Windows Control + T Control + Mays + T Control + 9 Control + 7 Macintosh Comando + T Comando + Mays + T Comando + 9 Comando + 7

Submen Organizar
Comando Poner en primer plano Traer hacia adelante Enviar hacia atrs Enviar al fondo Windows Control + F Control + Mays + F Control + Mays + B Control + B Macintosh Comando + F Comando + Mays + F Comando + Mays + B Comando + B

Submen Alinear
Comando Izquierda Centrado vertical Derecha Arriba Centrado horizontal Abajo Distribuir anchuras Distribuir alturas Windows Ctrl + Alt +1 Ctrl + Alt +2 Ctrl + Alt +3 Ctrl + Alt +4 Ctrl + Alt +5 Ctrl + Alt +6 Ctrl + Alt +7 Ctrl + Alt +9 Macintosh Comando + Opcin +1 Comando + Opcin +2 Comando + Opcin +3 Comando + Opcin +4 Comando + Opcin +5 Comando + Opcin +6 Comando + Opcin +7 Comando + Opcin +9

Mtodos abreviados de teclado

247

Men Texto
Comando Editor Unir al trazado Convertir en trazados Windows Control + Mays + E Control + Mays + Y Control + Mays + P Macintosh Comando + Mays + E Comando + Mays + Y Comando + Mays + P

Submen Estilo
Comando Regular Windows Control+Alt+Mays+P, o F5 Control+Alt+Mays+B, o F6 Control+Alt+Mays+I, o F7 Control+Alt+Mays+U, o F8 Macintosh Comando+Opcin+Mays+P, o F5

Negrita Cursiva Subrayado

Comando+Opcin+Mays+B, o F6 Comando+Opcin+Mays+I, o F7 Comando+Opcin+Mays+U, o F8

Submen Alinear
Comando Izquierda Centrado Derecha Justificado Expandido Windows Control+Alt+Mays+L Control+Alt+Mays+C Control+Alt+Mays+R Control+Alt+Mays+J Control+Alt+Mays+S Macintosh Comando+Opcin+Mays+L Comando+Opcin+Mays+C Comando+Opcin+Mays+R Comando+Opcin+Mays+J Comando+Opcin+Mays+S

248

Apndice A

Men Ventana
Comando Nueva ventana Caja de herramientas Inspector de objetos Panel Trazo Panel Relleno Panel Efecto Panel Muestras Mezclador de colores Opciones de herramientas Panel Capas Panel Fotogramas Panel Informacin Inspector de comportamientos Administrador de URL Estilos Windows Control+Alt+N Control + Alt + T Control + I Control + Alt + B Control + Alt + F Control + Alt + E Control + Alt + S Control + Alt + M Control + Alt + O Control + Alt + L Control + Alt + K Control + Alt + I Control + Alt + H Control + Alt + U Control + Alt + J Macintosh Comando + Opcin + N Comando + Opcin + T Comando + I Comando + Opcin + B Comando + Opcin + F Comando + Opcin + E Comando + Opcin + S Comando + Opcin + M Comando + Opcin + O Comando + Opcin + L Comando + Opcin + K Comando + Opcin + I Comando + Opcin + H Comando + Opcin + U Comando + Opcin + J

Men Xtras
Comando Repetir Xtra Windows Control+Alt+Mays+X Macintosh Comando+Opcin+Mays+X

Men Ayuda
Comando Uso de Fireworks Windows F1 Macintosh Ayuda

Mtodos abreviados de teclado

249

Editor de texto
Funcin Aumentar acercamiento o ajuste entre caracteres Reducir acercamiento o ajuste entre caracteres Aumentar interlineado Reducir interlineado Windows Control + Flecha derecha Macintosh Comando + Flecha derecha

Control + Flecha izquierda Control + Flecha arriba Control + Flecha abajo

Comando + Flecha izquierda Comando + Flecha arriba Comando + Flecha abajo

Caja de herramientas
Para cambiar a esta herramienta Presione Puntero Seleccionar detrs Recortar Exportar rea Seleccionar nivel inferior Recuadro Recuadro elipse Lazo Lazo poligonal Varita mgica Mano Aumentar y reducir Lnea Pluma Rectngulo Elipse v o 0 (cero) v o 0 (cero) c j a or 1 m m l l w Barra espaciadora o h z n p r r

250

Apndice A

Para cambiar a esta herramienta Presione Polgono Texto Lpiz Pincel Volver a dibujar trazado Escala Inclinacin Distorsin Estilo libre Remodelar rea Depurador de trazados (+) Depurador de trazados (-) Cuentagotas Cubo de pintura Borrador Sello g t y b b q q q f f u u i k e s

Varios
Funcin Restablecer colores de trazo y relleno a valores predeterminados Intercambiar colores de trazo y de relleno Fotograma siguiente Fotograma anterior Windows d Macintosh d

x Control + Pgina abajo Control + Pgina arriba

x Comando + Pgina abajo Comando + Pgina arriba

Mtodos abreviados de teclado

251

252

Apndice A

NDICE ANALTICO

A activacin modo de edicin de imgenes 121 modo objeto 121 Adaptable, paleta 160 adicin archivos de comandos 229 botones 192 capas 93 comandos 230 efectos 140 estilos 86 fotogramas 209 instancias 95 objetos 57 objetos de divisin 182 paletas 161 rellenos 80 rollovers 192 Scriptlets 228 scriptlets 228 smbolos 94 texto 110 textura 83 trazados 59 trazos 77 zonas interactivas 174 agrupacin de objetos 91 ajuste automtico entre caracteres 112 ajuste entre caracteres 112 allanar capas 94 almacenamiento ajustes de optimizacin 155 ajustes de trazos 79 comandos 41 efectos 141 paletas de colores personalizadas 164 pinceles 79 rellenos degradados 82 Ampliar trazo, comando 74 Ampliar, comando 125 Aadir a transparencia, herramienta 106

animacin activacin y desactivacin de fotogramas 214 adicin de fotogramas 209 administracin de fotogramas 209 apertura 217 capas compartidas por varios fotogramas 210 conguracin de demora de fotograma 214 control 213 copia de fotogramas 209 creacin 208 creacin desde varios archivos 217 demora de fotograma 208 desactivacin de capas compartidas 210 desactivacin del papel cebolla 211 descripcin 207 desplazamiento de objetos a otro fotograma 210 distribucin de objetos en fotogramas 213 edicin de archivos GIF 217 edicin de varios fotogramas 211 eliminacin de fotogramas 210 exportacin 216 exportacin como archivo Flash 216 exportacin como varios archivos 216 generacin de bucle 214 importacin 53 importacin de objetos 212 insercin de fotogramas 209 interpolacin 213 objetos como actores 208 optimizacin 215 organizacin con capas 209 papel cebolla 211 planicacin de fotogramas 208 planicacin de una animacin 208 presentacin preliminar 215 reorganizacin de fotogramas 209 reproduccin 215 transparencia 215 uso de smbolos e instancias 212 velocidad 208

253

visualizacin de fotogramas antes y despus 211 visualizacin de todos los fotogramas 211 visualizacin de varios fotogramas 211 visualizacin del fotograma siguiente 211 visualizacin personalizada de fotograma 211 Anular seleccin, comando 122 apertura animacin GIF 217 archivos de Fireworks 1 50 archivos de Photoshop 51 varios archivos como animacin 217 varios documentos 47 AppleScript, vase archivos de comandos aprendizaje de Fireworks Centro de soporte 13 descripcin de funciones 33 descripcin del rea de trabajo 36 grupo de noticias 13 recursos 12 tutoriales 13 archivos copia de seguridad en procesos por lotes 228 entrelazado 159 importacin PNG 63 mapas de imagen 180 modicacin de la conguracin mediante proceso por lotes 226 procesamiento por lotes 224 seleccin del formato de grco 157 archivos de cach 43 archivos de comandos borrado de todos los pasos 230 comandos de denominacin 229 conguracin del nmero de pasos 230 creacin de comandos 229 creacin de macro 229 descripcin 229 deshacer acciones 230 edicin como JavaScript 232 ejecucin 231 ejecucin de comandos 231 ejecucin de pasos 231 formato de archivo 229 archivos de CorelDRAW conversin 51 importacin 51 archivos de FreeHand

conversin 51 importacin 51 archivos de Illustrator conversin 51 importacin 51 arranque de Fireworks 12 Arrastre y colocacin para importar grcos 62 Scriptlets 229 Asistente de vnculos 194 Optimizar tamao 168 Asistente de exportacin 167 Asistentes Exportacin 167 Optimizar tamao 168 Vnculos 194 Aumentar, herramienta 47 aumento 47 100% de aumento 47 basado en seleccin 47 Ayuda de Fireworks 12 emergente 13 B barra de colores eleccin de un color 104 eleccin de un modelo de color 103 barras de herramientas acoplamiento 39 desbloqueo 39 reorganizacin 38 visualizacin y ocultacin 38 barras de navegacin, creacin 196 Biblioteca, panel 94 Blanco y negro, paleta 161 borde listado 120 Borde, comando 126 bordes biselados 143 suavizado 85 visualizacin y ocultacin 67 Borrador Cuchillo, herramienta 57 Borrador, herramienta 57 Borrador, modo 48 botones

254

Index

adicin de estado Abajo 194 adicin de estado Sobre y Abajo 194 adicin de valores URL 194 rea activa 194 Asistente de vnculos 194 barras de navegacin 196 caractersticas 192 conversin del formato Fireworks 2 196 creacin 192 creacin de esquinas redondeadas 58 denicin 192 descripcin 191 edicin 193 edicin de rea activa 194 edicin de texto 195 Editor de botones 192 efectos de bisel 195 estado Abajo 192 estado Arriba 192 estado Sobre 192 estado Sobre y Abajo 192 exportacin 191 insercin desde bibliotecas 197 rollover simple 193 brillo 131 Brillo/Contraste, men Xtra 131 Buscar bordes, men Xtra 137 Buscar y reemplazar colores 223 colores no Websafe 224 documentacin 220 en un proceso por lotes 225 fuentes 223 gestin con el Historial del proyecto 221 panel 222 seleccin del origen para la bsqueda 220 texto 222 usos 220 valores URL 224 varios archivos 221 bsqueda 220

C Caja de herramientas contenido 38 eleccin de herramientas 38 visualizacin 38 cmaras, digitales 53 Cambiar el tamao, comando 75 Cambiar nombre de trazo, cuadro de dilogo 79 cambio de nombre efectos 141 relleno degradado 82 trazos 79 cambio del tamao de imgenes 49 Capa Web mostrar y ocultar 175 ubicacin en el documento 94 visualizacin de objetos con divisiones 175 visualizacin de zonas interactivas 175 capas adicin 93 animacin 209 bloqueo y desbloqueo 93 Capa Web 94 compartidas por varios fotogramas 210 compartir entre fotogramas 94 copiar objetos a 94 creacin 93 denicin 92 denominacin 93 desactivacin de capas compartidas en fotogramas 210 deseleccin de todo 66 duplicacin 93 Editar slo una capa 94 eliminacin 93 enmascaramiento 150 insercin 93 mover 93 mover objetos a 93 Nombre base 169 operaciones con 92 seleccin de activa 93 seleccin de todo 66 visualizacin y ocultacin 93 Capas, panel 92 cierre, vista de documento 47 crculos, dibujo 58

Index 255

clonacin imgenes 127 uso de la herramienta Sello 57 color adicin a transparencia 106 adicin de una paleta 103 adicin desde la pantalla a una paleta 101 almacenamiento de paletas personalizadas 103, 164 aplicar del panel Muestras 100 borrar panel de muestras 102 cambiar predeterminado 76 cambio de relleno 61 cambio del trazo 61 clasicacin del panel Muestras 102 conguracin de preferencias 42 creacin 103 creacin en Mezclador de colores 104 denicin de la opacidad 148 denicin de la profundidad 158 descripcin 99 eleccin de la paleta de trabajo 102 eleccin de paleta personalizada 102 eliminacin del panel Muestras 102 fondo 48 informacin 104 intercambiar el trazo y el relleno 75 inversin de valores 135 mezclar objetos con el fondo 106 modelos de color 103 modo de mezcla 148 muestreo 101 obtener con la herramienta Cuentagotas 101 optimizacin paletas de colores 160 paleta de colores emergente 75 panel Informacin 104 relleno 75 relleno slido 80 rellenos degradados 81 restablecer predeterminado 75 seleccin en la barra de colores 104 seleccin para transparencia 105 sustitucin de una muestra 102 texto 114 tramado con Websafe 84 trazo 75 uso del Mezclador de colores 103

color de fondo 48 color Mate 106 colores bsqueda y reemplazo 223 bsqueda y reemplazo de colores no Websafe 224 comandos almacenamiento 41 anulacin 41 Comandos, men 230 rehacer 41 repeticin 41 Comandos, men adicin de comandos 230 adicin de scriptlets 228 combinacin de trazados 73 Combinar imgenes, comando 120, 121 Comportamientos, inspector asignacin de comportamientos 201 descripcin 40 composicin 148 conguracin de Fireworks 42 Contraer, comando 125 contraste 131 conversin de archivos 52 de CorelDRAW 51 de FreeHand 51 de Illustrator 51 de Photoshop 51 conversin de objetos a imgenes 120 Convertir en alfa, Xtra 137 copia de pxeles 122 copia de seguridad durante Buscar y reemplazar 221 en procesos por lotes 228 copia y pegado cdigo HTML de Fireworks 235 HTML 238 nuevo muestreo de grcos 62 para importar grcos 62 correccin de errores, vase Deshacer corte 72 corte de trazado 72 creacin animaciones 207 archivos de comandos 229 botones 192 capas 93

256

Index

color en Mezclador de colores 104 colores 103 documentos nuevos 46 efectos personalizados 141 instancias 95 mapas de imagen 173 mscaras de imagen 151 mscaras de trazado 150 miniaturas 227 objetos de divisin 182 rollovers 192 Scriptlets de proceso por lotes 228 smbolos 94 zonas interactivas 174 cuadrados dibujo 58 esquinas redondeadas 58 Cubo de pintura, herramienta 127 Cuchillo, herramienta 72 Cuentagotas, herramienta 101 curvas Bzier 68 Curvas, men Xtra 134 D demora de fotogramas, animaciones 214 denominacin automtica de objetos de divisin 186 denominacin de objetos de divisin 186 Depurador de trazados, herramienta 57 desagrupacin de objetos 91 deseleccin objeto 66 todo 66 Desenfocar ms, Xtra 136 Desenfocar, Xtra 136 desenfoque 136 Desenfoque gaussiano, men Xtra 136 Deshacer comandos 41 conguracin de nmero 42 Desperlar mscara, Xtra 138 desplazamiento en documento 46 deteccin de navegador en rollovers 205 dibujo adicin de textura a rellenos 83 adicin de textura al trazo 76 ajuste de rellenos 83 al trazar puntos 60

almacenamiento de rellenos degradados 82 ampliacin de trazos 74 aplicacin de estilos 86 aplicacin de rellenos de patrn 82 aplicacin de rellenos degradados 81 aplicacin de rellenos slidos 80 botones 58 cambiar colores predeterminados 76 cambio de nombre de rellenos degradados 82 cambio de segmentos adyacentes 69 cambio del color de relleno 75 cambio del color de relleno para herramientas de formas bsicas 61 cambio del color de trazo y de relleno 75 cambio del color del trazo 75 cambio del color del trazo en la herramientas de dibujo 61 crculos 58 combinacin de trazados 73 conguracin de trazos para herramientas de dibujo 61 conversin de trazados curvos a rectos 69 conversin de trazados rectos en curvos 69 corte de trazados 72 creacin de trazos personalizados 77 cuadrados 58 denicin de opciones de trazo 78 denicin de punta de pincel 78 denicin de sensibilidad de trazo 78 denicin del tamao de remodelado de rea 72 desplazamiento de un punto 68 distorsin de objetos 90 divisin de trazados 72, 73 doblado de un segmento adyacente 69 edicin de degradado 81 edicin de rellenos 80 edicin de rellenos slidos 80 edicin de trazos 76 eliminacin de porciones de un trazado 73 eliminacin de rellenos degradados 82 elipses 58 empujar trazados 71 en modo objeto 57 escalado de objetos 88 esquinas redondeadas 58 estrellas 59 expansin o contraccin de trazados 75

Index

257

guardar conguraciones de trazo 79 ilusin de transparencia 85 inclinacin de objetos 89 lneas 58 mover rellenos 83 mover trazos 80 polgonos 59 punto a punto 60 recorte de trazados 73 rectngulos 58 reejo de objetos 89 relleno de trama 84 relleno sobre trazos 80 remodelado de trazados 72 remodelar rea 71 reorientacin de trazos 79 restablecer colores predeterminados 75 restriccin de lneas 58 restringir formas centradas 58 reutilizacin del degradado en otro documento 82 rotacin de rellenos 83 rotar objetos 89 seleccin de un punto 68 simplicacin de trazados 74 suavizado 85 tirar trazados 70 transformacin de rellenos de patrn 83 transformacin de rellenos degradados 83 transformar numricamente 90 trazado de objetos 57 trazados de estilo libre 59 tringulos 59 dibujo vectorial 55 Digitalizar, comando 53 distorsin de objetos 90 Divisin poligonal, herramienta 182 Divisin, herramienta 182 documento aadir capas 93 apertura de archivos de Fireworks 1 50 apertura de archivos Photoshop 51 apertura de otra vista 47 aumento 47 aumento al 100% 47 aumento segn seleccin 47 bloqueo y desbloqueo de capas 93 buscar y reemplazar 220

Capa Web 94 cierre de vista 47 coincidencia de tamao del contenido del Portapapeles 46 compartir capas entre fotogramas 94 conguracin de opciones de mapa de imagen 178 conguracin de tamao 48 copiar objetos a otra capa 94 creacin 46 denicin de tamao 48 denominacin de capas 93 descripcin 45 descripcin de la exportacin 165 desplazamiento 46 duplicacin de capas 93 Editar slo una capa 94 eliminacin de capas 93 exportacin de pginas Web 166 exportacin de una parte 169 importacin de archivos PNG 63 importacin mediante Arrastrar y colocar 62 importacin mediante copiar y pegar 62 modo de borrador 48 modo de gama 48 modo de pantalla completa 48 modo predeterminado 56 modos de visualizacin 48 mosaico 47 mover capas 93 mover objetos a otra capa 93 nuevo muestreo durante importacin 62 optimizacin de actualizacin 48 organizar objetos 90 panormica 47 recorte del lienzo 50 reduccin 47 reduccin segn seleccin 47 rotacin 49 seleccin de capa activa 93 uso de rellenos de degradado de otro 82 uso de trazos almacenados 79 vistas mltiples 47 visualizacin y ocultacin de capas 93 Documento nuevo, cuadro de dilogo 46 Dreamweaver descripcin 233

258

Index

edicin de imgenes Fireworks en 239 ejecucin desde Fireworks 239 exportacin de elementos de biblioteca 237 inclusin de imgenes de Fireworks en pginas Web 238 optimizacin de imgenes en Fireworks 240 uso de elementos de biblioteca 236 E edicin adicin de textura a rellenos 83 adicin de textura al trazo 76 ajuste de rellenos 83 ajuste del brillo o contraste 131 ajuste del matiz o saturacin 131 ajuste del rango tonal 132 ajuste del rango tonal mediante cuentagotas 135 ajuste del rango tonal mediante Curvas 134 almacenamiento de ajustes de trazo 79 almacenamiento de rellenos degradados 82 ampliacin de trazos 74 archivo HTML 238 archivos de comandos 232 botones 193 cambiar colores predeterminados 76 cambio de nombre de rellenos degradados 82 cambio de nombre de trazos 79 cambio del color de relleno 75 cambio del color de trazo y de relleno 75 cambio del color del trazo 75 combinacin de trazados 73 corte de trazados 72 creacin de trazos personalizados 77 denicin de opciones de trazo 78 denicin de punta de pincel 78 denicin de sensibilidad de trazo 78 denicin del tamao de remodelado de rea 72 descripcin 65 dibujo de relleno sobre trazos 80 distorsin de objetos 90 efectos 140 eliminacin de porciones de un trazado 73 eliminacin de rellenos degradados 82 empujar trazados 71 escala de objetos 88 estilos 86 expansin o contraccin de trazados 75

ilusin de transparencia 85 inclinacin de objetos 89 mscaras 151 mover rellenos 83 mover trazos 80 Niveles automticos 133 pxeles 127 recorte de trazados 73 reejo de objetos 89 relleno de trama 84 rellenos 80 rellenos de patrn 82 rellenos degradados 81 rellenos slidos 80 remodelado de trazados 72 remodelar rea 71 reorientacin de trazos 79 restablecer colores predeterminados 75 reutilizacin del degradado en otro documento 82 rollovers 193 rotacin de objetos 89 rotacin de rellenos 83 smbolos 95 simplicacin de trazados 74 suavizado 85 suprimir trazos 79 texto 111 texto de botn 195 tirar trazados 70 traer objetos seleccionados hacia adelante 90 transformacin de rellenos de patrn 83 transformacin de rellenos degradados 83 transformacin numrica 90 trazados 68 trazos 76 uso de trazos almacenados en otro documento 79 uso del Editor de texto 111 volver a dibujar un segmento 72 zonas interactivas 178 edicin de imgenes, modo pegado 62 uso de herramientas de dibujo y edicin 56 Editar degradado, cuadro de dilogo 81 Editar slo una capa 94 Editar trazo, cuadro de dilogo 77 Editor de botones 41 Editor de degradados 81

Index 259

Editor de texto 111 efecto de iluminacin 144 Efecto, panel 140 efectos aceleracin de la actualizacin de la pantalla 142 almacenamiento 141 almacenamiento como estilos 142 aplicacin a objetos 140 aplicacin a objetos agrupados 142 aplicacin de ltros como 145 aplicacin de ltros de conexin de Photoshop 145 aplicacin de predeterminados 142 automticos 139 bordes biselados 143 botones 195 bsqueda y reemplazo 223 cambio de nombre 141 creacin de personalizados 141 denicin de la conguracin predeterminada 142 denicin de secuencia 140 desactivacin 142 edicin 140 eliminacin 141, 142 eliminacin de todos 141 ltros de conexin 145 iluminado 144 modicacin 141 paleta de colores 75 reactivacin 142 relieve 143 reordenacin 140 sombra 144 texto 115 Xtras 130 Efectos automticos, vase efectos efectos de sombra 144 ejecucin archivos de comandos 231 Scriptlets 229 eliminacin capas 93 color del panel Muestras 102 efectos 141, 142 estilos 87 halos 106

smbolos 95 Elipse, herramienta 58 elipses, dibujo 58 empujar rea 71 trazados 71 enmascaramiento conversin de mscara de imagen a mscara de trazado 152 conversin de mscara de trazado a mscara de imagen 152 conversin de mscara normal a un grupo de mscara 152 conversin de un grupo de mscara a un grupo normal 152 creacin de mscaras de imagen 151 creacin de mscaras de trazado 150 denicin 147 edicin 151 Enmascarar imagen, comando 151 Enmascarar trayecto, comando 150 entrelazado 159 Escala de grises, paleta 161 escala de imgenes en proceso por lotes 227 opciones de interpolacin 42 escalado de objetos 88 esquinas redondeadas 58 Establecer transparencia, herramienta 105 Estilo libre, herramienta 57 estilos adicin 86 almacenamiento de efectos como 142 ampliar iconos de vista previa 87 aplicacin 86 basados en los existentes 86 denicin 85 edicin 86 eliminacin 87 exportacin 87 importacin 87 nuevos 86 restablecer predeterminados 87 seleccionar vistas previas pequeas 87 texto 115 uso 85 estilos de salida

260

Index

adicin 237 eliminacin 237 Estilos, panel 86 estrellas ngulo 59 dibujo 59 nmero de puntos 59 restriccin al dibujar 59 etiquetas, HTML 241 Exacta, paleta 160 exportacin a un tamao especco de archivo 168 almacenamiento de paletas personalizadas 164 animacin GIF 216 animaciones como varios archivos 216 archivo de suplemento 166 archivos de mapa de imagen 180 reas 169 Asistente de exportacin 167 bloqueo de colores en paleta 162 botones 191 capas como archivos independientes 169 cdigo HTML de Fireworks 235 colores Websafe 163 conguracin del nmero de colores 161 denicin de la profundidad de color en la exportacin 158 descripcin 165 divisiones seleccionadas 170 edicin de colores en paleta 162 elementos de biblioteca de Dreamweaver 237 estilos 87 formatos de archivos HTML 236 fotogramas como archivos independientes 169 GIF imgenes 157 herramienta Exportar rea 169 herramientas Cuentagotas de transparencia 105 imgenes 166 JPEG imgenes 158 mapas de imagen 179 Nombre base 169 objetos de divisin 170 opciones de divisin 170 optimizacin para la Web 153 optimizacin y uso de Presentacin preliminar de la exportacin 168 pginas Web 166

paleta adaptable 160 paleta blanco y negro 161 paleta de escala de grises 161 paleta de sistema 160 paleta exacta 160 paleta uniforme 161 paleta Web 216 160 paleta Web adaptable 160 paletas personalizadas 161 panel Opciones de exportacin 167 para Flash 172 para FreeHand 171 para Illustrator 171 partes de documentos 169 PNG imgenes 158 resultados 166 rollovers 205 trazados 171 trazados seleccionados 172 uso de la presentacin preliminar de exportacin 167 uso de suplementos 170 uso de tablas anidadas 170 uso del color Mate 106 Exportar rea, herramienta 169 Exportar por lotes, cuadro de dilogo 226 Exportar, cuadro de dilogo 166 F ltros 130 aplicacin como efectos 145 ltros de conexin 145 ltros de conexin de Photoshop 130 Fireworks actualizacin de HTML de Fireworks en otro archivo 234 arranque 12 arrastre y colocacin 62 Centro de soporte 13 conguracin 42 conversin de botones de Fireworks 2 196 copia y pegado de cdigo HTML 235, 238 denicin de preferencias 42 descripcin 11 descripcin de funciones 33 descripcin del rea de trabajo 36 edicin de imgenes en Dreamweaver 239

Index

261

ejecucin en Dreamweaver 239 exportacin de cdigo HTML de Fireworks 235 exportacin de elementos de biblioteca de Dreamweaver 237 exportacin y pegado de cdigo HTML de Fireworks 235 formatos de archivos exportados 236 funciones nuevas 13 grupo de noticias 13 inclusin de imgenes en pginas Web 238 insercin del cdigo HTML de Fireworks en otro archivo 234 instalacin 12 instalacin e inicio 12 mtodos de nuevo muestreo 49 operaciones con Dreamweaver 233 planicacin de sitios Web 234 recursos para el aprendizaje 12 Requisitos del sistema 12 tutoriales 13 uso de elementos de biblioteca de Dreamweaver 236 uso del cdigo HTML de Fireworks 234 visita multimedia 12 Flash exportacin de animaciones 216 exportacin para 172 Forma de Editar trazo, panel 78 fotogramas activacin y desactivacin 214 adicin 209 administracin 209 ajuste con estados de rollover 200 capas compartidas para animacin 210 compartir capas 94 conguracin de demora 214 copia 209 demora 208 desactivacin de capas compartidas 210 desactivacin del papel cebolla 211 descripcin de animacin 207 desplazamiento de objetos a otro fotograma 210 distribucin de instancias 213 edicin de varios fotogramas 211 Editar slo una capa 94 eliminacin 210 insercin 209

interpolacin para animacin 213 Nombre base 169 papel cebolla 211 planicacin para uso en una animacin 208 reorganizacin 209 velocidad de animacin 208 visualizacin antes y despus 211 visualizacin de todo 211 visualizacin del fotograma siguiente 211 visualizacin personalizada 211 Fotogramas, panel 209 FreeHand, exportacin para 171 fuentes bsqueda y reemplazo 223 cambio de atributos 110 eleccin 110 seleccin de texto de sustitucin 118 solucionar texto que falte 118 fundido 128 Fundido, comando 128 G Gama, modo 48 GIF denicin 157 denicin de la profundidad de color 158 denicin de prdida 159 eleccin de una paleta de colores 160 entrelazado 159 exportacin 157 optimizacin 158 optimizacin paletas de colores 160 seleccin de una paleta de colores 159 tramado 159 grcos 154 ajustes de optimizacin personalizados 154 almacenamiento de ajustes de optimizacin 155 cambio de conguracin con proceso por lotes 226 cambio de tamao 49 comparacin de diferentes optimizaciones 156 copia de seguridad en procesos por lotes 228 creacin de miniaturas 227 creacin de objetos de divisin 182 creacin de zonas interactivas 174 creacin mapas de imagen 173 divisin 181

262

Index

edicin en Dreamweaver 239 edicin zonas interactivas 178 eliminacin de ajustes de optimizacin 155 estimacin del tiempo de descarga 156 exportacin 166 ltros 130 GIF 157 importacin 120 JPEG 158 mapa de bits 55 optimizacin de controles 154 optimizacin de divisiones 154 optimizacin mediante Fireworks en Dreamweaver 240 optimizacin para la Web 153 PNG 158 presentacin preliminar de la optimizacin 156 presentacin preliminar de rollovers 156 procesamiento por lotes 224 relleno de seleccin 127 salida del modo de edicin 121 vectoriales 55 Xtras 130 grupo de mscara conversin a un grupo normal 152 creacin 150 denicin 147 seleccionar en nivel inferior 152 Guardar trazo, cuadro de dilogo 79 guas de divisin 182 conguracin de color 184 visualizacin y ocultacin 183 guas, divisin 182 H halos, eliminacin 106 herramienta de seleccin directa, vase Seleccionar en nivel inferior, herramienta herramientas Aadir a transparencia 106 Aumentar 47 Borrador 57 Borrador Cuchillo 57 Caja de herramientas 38 cambio de color del trazo 61 cambio de opciones 39 cambio del color de relleno 61

Cubo de pintura 127 Cuchillo 72 Cuentagotas 101 Depurador de trazados 57 Divisin 182 Divisin poligonal 182 eleccin 38 eleccin de herramientas alternativas 38 Elipse 58 en Caja de herramientas 38 Establecer transparencia 105 Estilo libre 57 Exportar rea 169 Lpiz 56 Lazo 56 Lazo poligonal 56 Lnea 56 Mano 47 Pincel 57 Pluma 56 Polgono 59 Puntero 56 Recortar 129 Rectngulo 58 Recuadro 56 Recuadro elptico 56 Remodelar rea 57 reorganizacin de barras de herramientas 38 Seleccionar detrs 56 Seleccionar en nivel inferior 56 Sello 57 Texto 56 Transformar 87 Transformar distorsin 90 Transformar escala 88 Transformar inclinacin 89 Varita mgica 56 visualizacin 38 Volver a dibujar trazado 72 Zona interactiva circular 174 Zona interactiva poligonal 174 Zona interactiva rectangular 174 histograma 133 Historial del proyecto adicin manual de archivos 222 apertura de archivos 222 eliminacin de todas las entradas 222

Index 263

eliminacin de una entrada 222 enumeracin de archivos 222 exportacin de archivos 222 gestin de bsquedas 221 impresin 222 registro de cambios de Buscar y reemplazar 220 visualizacin 222 Historial, panel almacenamiento de comandos 41 creacin de comandos 229 descripcin 41 Deshacer pasos 41 rehacer pasos 41 repeticin de comandos 41 HTML actualizacin de salida de rollover 206 actualizacin del cdigo HTML de Fireworks en otro archivo 234 adicin de avisos al cdigo de salida 237 adicin de estilos de salida 237 conceptos bsicos 241 copia de cdigo HTML para mapas de imagen 239 copia de cdigo HTML para objetos de divisin 239 copia de JavaScript 238 copia y pegado de cdigo HTML 238 copia y pegado de cdigo HTML de Fireworks 235 creacin de zonas interactivas 174 descripcin 241 eleccin de grcos origen para mapas de imagen 174 eliminacin de estilos de salida 237 etiquetas comunes 241 exportacin de cdigo HTML de Fireworks 235 exportacin de mapas de imagen 179 exportacin y pegado de cdigo HTML de Fireworks 235 formatos de archivos exportados 236 insercin del cdigo HTML de Fireworks en otro archivo 234 operaciones con Dreamweaver 233 planicacin de sitios Web 234 uso de elementos de biblioteca de Dreamweaver 236 uso de Fireworks HTML 234 uso de mapas de imagen 180

I Illustrator, exportacin para 171 ilusin de perspectiva 89 ilusin de transparencia 85 imgenes ajuste de la saturacin 131 ajuste del brillo 131 ajuste del contraste 131 ajuste del matiz 131 ajuste del rango tonal 132 ajuste del rango tonal mediante cuentagotas 135 ajuste del rango tonal mediante Curvas 134 ajustes de optimizacin personalizados 154 almacenamiento de ajustes de optimizacin 155 apertura de archivos GIF animados 217 borde listado 120 borrado de pxeles 129 buscar bordes 137 cambio de conguracin con proceso por lotes 226 cambio de tamao 48 cambio del tamao 49 clonacin 127 comparacin de diferentes optimizaciones 156 comprobacin del rango tonal 133 conversin a escala de grises 137 conversin a partir de objetos 120 conversin de mscara de imagen a mscara de trazado 152 conversin de mscara de trazado a mscara de imagen 152 conversin de mscara normal a un grupo de mscara 152 conversin de un grupo de mscara a un grupo normal 152 copia de seguridad en procesos por lotes 228 corte 129 creacin de mapas de imagen 173 creacin de mscaras de imagen 151 creacin de mscaras de trazado 150 creacin de miniaturas 227 creacin de objetos de divisin 182 creacin de zonas interactivas 174 desenfoque 136 desperlar mscara 138 divisin 181 edicin de zonas interactivas 178 edicin en Dreamweaver 239

264

Index

eliminacin de ajustes de optimizacin 155 enmascaramiento 150 escala durante proceso por lotes 227 exportacin 166 ltros 130 ltros de conexin de PhotoShop 130 fundido 128 GIF 157 histograma 133 importacin 120 inclusin en pginas Web 238 inversin de los valores de color 135 JPEG 158 mapa de bits 55 mscara alfa 137 Niveles automticos 133 ocultacin del cuadro delimitador 68 optimizacin de controles 154 optimizacin de divisiones 154 optimizacin mediante Fireworks en Dreamweaver 240 optimizacin para la Web 153 optimizaciones preestablecidas 154 perlado 138 pintura 130 PNG 158 presentacin preliminar de la optimizacin 156 procesamiento por lotes 224 recorte 129 relleno de seleccin 127 resolucin 48 salida del modo de edicin 121 seleccin 122 seleccin de pxeles 122 seleccin en modo objeto 68 Xtras 130 imgenes de cmaras digitales 53 imgenes de escner 53 imgenes de mapa de bits 55 imgenes desunidas 203 imgenes en miniatura 227 imgenes JPEG progresivas 160 importacin animaciones GIF 53 archivos ASCII 118 archivos de CorelDRAW 51 archivos de Fireworks 1 50

archivos de FreeHand 51 archivos de Illustrator 51 archivos de Photoshop 51 archivos PNG 63 conversin de archivos 52 descripcin 45 estilos 87 imgenes 120 imgenes de cmaras digitales 53 imgenes de escner 53 mediante Arrastrar y colocar 62 mediante copiar y pegar 62 nuevo muestreo en operaciones de copia y pegado 62 pegado en modo de imgenes 62 pegado en modo de objetos 62 RTF, archivos 117 texto 117 texto de Photoshop 117 importacin Twain 53 impresin, Historial del proyecto 222 inclinacin de objetos 89 Informacin, panel 104 Inspector de objetos ajuste de la opacidad 148 aplicacin de modos de mezclas 148 inspectores combinacin 40 Comportamientos 40 Comportamientos, asignacin de comportamientos 201 eleccin de opciones 39 eliminacin de cha 40 introduccin de informacin 40 Objeto 148 reorganizacin 39 uso 39 uso de cuadros emergentes 40 visualizacin y ocultacin 39 instalacin ltros de conexin de Photoshop 145 Fireworks, Windows 12 instancias animacin 212 colocacin en documento 95 creacin 95 denicin 94

Index 265

distribucin 213 interpolacin para animacin 213 modicacin 96 interlineado 112 interpolacin instancias para animacin 213 smbolos para animacin 213 interpolacin, escala 42 Intersectar, comando 73 introduccin de texto 110 Invertir, men Xtra 135 J JavaScript adicin de avisos al cdigo de salida 237 copia 238 JPEG denicin 158 exportacin 158 optimizacin 159 perlado de bordes de color 160 progresivo 160 reduccin de calidad 160 suavizado 160 justicacin de texto 114 L Lpiz, herramienta 56 Lazo poligonal, herramienta 56 Lazo, herramienta 56 lienzo denicin de tamao 48 denicin del color 48 recorte 50 rotacin 49 lnea de base 112 Lnea, herramienta 56 lneas dibujo 58 restriccin al dibujar 58

M Macintosh Requisitos del sistema 12 Selector de colores Apple 104 Mano, herramienta 47 mapas de imagen adicin a un sitio Web 180 archivos para 180 conguracin de opciones 178 copia de cdigo HTML para 239 descripcin 173 eleccin del grco origen 174 exportacin 179 ubicacin en el sitio Web 180 uso en archivos HTML 180 mscara 150 mscara alfa 137 mscara de capa 150 mscara de grupo, vase grupo de mscara matiz 131 Matiz/Saturacin,men Xtra 131 men de acceso directo 42 Mezclador de colores 103 creacin de colores 104 modelo de color CMA 103 modelo de color Escala de grises 103 modelo de color Hexadecimal 103 modelo de color MSB 103 modelo de color RVA 103 modelos de color CMA 103 eleccin en la barra de colores 103 Escala de grises 103 Hexadecimal 103 MSB 103 panel Informacin 104 RVA 103 modicacin instancias 96 smbolos 95 trazados 72 modo activacin del modo de edicin de imgenes 121 introduccin de objetos 56 modo de edicin de imgenes activacin 121 comportamiento del modo de mezcla 130 conguracin 121

266

Index

denicin 120 descripcin del comportamiento de los modos de mezcla 150 ocultacin del borde listado 121 salida 121 modo de mezcla Aclarar 149 Borrar 149 Color 149 color de base 148 color de mezcla 148 color resultante 148 comportamiento 150 comportamiento en el modo de edicin de imgenes 130 denicin 148 denicin del valor predeterminado 149 Diferencia 149 ejemplos 149 Invertir 149 Luminosidad 149 Matiz 149 Multiplicar 149 Normal 149 opacidad 148 Oscurecer 149 Pantalla 149 Saturacin 149 Tinta 149 modo objeto comportamiento del modo de mezcla 130 descripcin del comportamiento de los modos de mezcla 150 mover capas 93 trazos 80 movimiento en documento 46 muestra de color Selector de colores Apple 104 Selector de colores del sistema 104 Muestras, panel 100 adicin de una paleta 103 almacenamiento de personalizado 103 borrar 102 clasicacin 102 eliminacin de un color 102 sustitucin de un color 102

N Niveles automticos, men Xtra 133 Niveles, men Xtra 132 Nombre base 169 nuevo muestreo 49 en operaciones de copia y pegado 62 O objeto, modo activacin 56 cambio 56 dibujo 57 empujar y estirar trazados 70 introduccin 56 pegado 62 regreso 56 seleccin de imgenes 68 uso de herramientas de dibujo y edicin 56 volver a dibujar trazados 72 objetos adicin de textura a rellenos 83 adicin de textura al trazo 76 agrupacin 91 ajuste de rellenos 83 almacenamiento de efectos 141 almacenamiento de efectos como estilos 142 almacenamiento de rellenos degradados 82 ampliacin de trazos 74 animacin 208 aplicacin de efectos 140 aplicacin de efectos a grupos 142 aplicacin de efectos automticos 139 aplicacin de estilos 86 aplicacin de ltros como efectos 145 aplicacin de ltros de conexin de Photoshop 145 aplicacin de la conguracin predeterminada de efecto 142 aplicacin de rellenos de patrn 82 aplicacin de rellenos degradados 81 aplicacin de rellenos slidos 80 bordes biselados 143 buscar bordes 137 cambiar colores predeterminados 76 cambio de nombre de rellenos degradados 82 cambio de nombres de efectos 141 cambio del color de relleno 75

Index

267

cambio del color de trazo y de relleno 75 cambio del color del trazo 75 Capa Web 94 combinacin de trazados 73 conversin a escala de grises 137 conversin a imgenes 120 conversin a smbolos 95 copiar a otra capa 94 corte 72 creacin de efectos personalizados 141 creacin de smbolos 94 creacin de trazos personalizados 77 denicin de la conguracin predeterminada de efecto 142 denicin de la opacidad 148 denicin de opciones de trazo 78 denicin de punta de pincel 78 denicin de sensibilidad de trazo 78 desactivacin de efectos 142 desagrupacin 91 descripcin 55 deseleccin 66 deseleccin de todo 66 desenfoque 136 dibujo de objetos de trazado 57 dibujo de relleno sobre trazos 80 distorsin 90 dividir 72 divisin de trazados 73 edicin de efectos 140 edicin de rellenos 80 edicin de rellenos degradados 81 edicin de trazos 76 editar rellenos slidos 80 efecto de iluminacin 144 efectos de sombra 144 eliminacin de efectos 142 eliminacin de halos 106 eliminacin de porciones de un trazado 73 eliminacin de rellenos degradados 82 eliminacin de todos los efectos 141 eliminacin de un efecto 141 enmascaramiento 150 escala 88 expansin o contraccin de trazados 75 exportacin 166 exportacin de trazados 171

exportacin de trazados seleccionados 172 ilusin de transparencia 85 inclinacin 89 inversin de los valores de color 135 mscara alfa 137 mezcla 148 mezclar con colores de fondo 106 modicacin de smbolos 95 mostrar todos los objetos ocultos 91 mover a otra capa 93 mover rellenos 83 mover trazos 80 opcin de resaltado de seleccin 67 organizacin 90 organizacin en capas 90 reactivacin de efectos 142 recorte de trazados 73 reejo 89 relieve 143 relleno de trama 84 remodelado de trazados 72 remodelar rea 71 reordenacin de efectos 140 reorientacin de trazos 79 restablecer colores predeterminados 75 reutilizacin del degradado en otro documento 82 rotacin 89 rotacin de rellenos 83 seleccin 66 seleccin de grupos 91 seleccin de objetos adicionales 66 seleccin de todo en cada capa 66 seleccin de varios 66 seleccionar objetos detrs de otros 91 simplicacin de trazados 74 suavizado 85 traer hacia adelante 90 transformacin 87 transformacin de rellenos de patrn 83 transformacin numrica 90 transformacin rellenos de patrn 83 transformar al arrastrar 88 visualizacin de contorno 67 visualizacin de puntos 67 visualizacin y ocultacin 91 visualizacin y ocultacin de bordes 67 volver a dibujar un segmento 72

268

Index

objetos de divisin actualizacin 189 adicin de interactividad 185 adicin de rollovers 189 ajustes de optimizacin 154 asignacin de valores URL 185 comparacin con zonas interactivas 182 copia de cdigo HTML para 239 creacin 182 creacin de divisiones de texto 188 denominacin 186 denominacin automtica 186 denominacin automtica predeterminada 187 descripcin 181 exportacin 170 exportacin de seleccionado 170 exportacin mediante tablas anidadas 170 formato de divisiones de texto 188 guas de divisin 182 mezcla de formatos de archivo 188 mostrar en Presentacin preliminar 156 ocultar en Presentacin preliminar 156 opciones de exportacin 170 personalizar denominacin 187 poligonal 183 rectangular 182 simple 185 suplementos 188 sustitucin 189 tablas anidadas 188 texto alternativo 177 uso de suplementos 170 ventajas 181 visualizacin y ocultacin 183 objetos Web denominacin automtica de objetos de divisin 186 denominacin de objetos de divisin 186 exportacin de mapas de imagen 179 organizacin por color 175 ubicacin en documento 94 ocultacin barras de herramientas 38 bordes 67 capas 93 objetos seleccionados 91 paneles 40 Ocultar panele, comando 40

ocultar, inspectores 39 opacidad denicin 148 opacidad alfa 104 opacidad, denicin 148 Opciones de Editar trazo, panel 78 Opciones de herramientas, panel 39 optimizacin ajustes personalizados 154 almacenamiento de ajustes 155 animaciones 215 comparacin de diferentes ajustes 156 conguracin del nmero de colores 161 controles 154 denicin de la profundidad de color 158 denicin de prdida 159 eleccin de una paleta de colores 160 eliminacin de ajustes 155 eliminacin de los colores no utilizados 159 entrelazado 159 imgenes GIF 158 imgenes JPEG 159 objetos de divisin 154 paletas de colores 160 para la Web 153 perlado de bordes de color 160 PNG imgenes 158 presentacin preliminar 156 progresivo 160 reduccin de calidad 160 seleccin de una paleta de colores 159 seleccin del formato de archivo 157 suavizado 160 tramado 159 uso compartido de ajustes 155 uso de archivos de comandos 229 uso de preestablecidos 154 uso del Asistente de exportacin 167 visualizacin de colores en una paleta 161 visualizacin de tabla de color 161 optimizaciones preestablecidas 154 Optimizar, panel 154 orden de apilamiento 90 organizacin capas 92 objetos en una capa 90

Index 269

P pginas Web adicin de rollovers a divisiones 189 conguracin de opciones de mapa de imagen 178 creacin de zonas interactivas 174 creacin objetos de divisin 182 divisin de imgenes 181 exportacin de mapas de imagen 179 mezclar objetos con el fondo 106 paleta de colores cuadro emergente 75 relleno 75 trazo 75 paleta de colores emergente 75 paleta independiente del navegador 160 paleta Websafe 163 paletas adaptables 160 adicin a la paleta actual 103 adicin desde la pantalla 101 almacenamiento 164 almacenamiento de muestras personalizadas 103 almacenamiento de personalizadas 164 blanco y negro 161 bloqueo de colores 162 borrar 102 clasicacin 102 color models 103 colores Websafe 163 conguracin de la transparencia durante la exportacin 105 conguracin del nmero de colores 161 creacin de colores 103 edicin de colores 162 eleccin 100 eleccin de la paleta de trabajo 102 eleccin de paleta personalizada 102 eliminacin de color 102 escala de grises 161 exacta 160 exportacin 164 optimizacin 160 personalizadas 161 Sistema 160 sustitucin de color 102 uniforme 161

Web 216 160 Web adaptable 160 paletas de colores adaptables 160 adicin a la paleta actual 103 adicin desde la pantalla 101 almacenamiento de muestras personalizadas 103 almacenamiento de personalizada 164 blanco y negro 161 bloqueo de colores 162 borrar 102 clasicacin 102 colores Websafe 163 conguracin del nmero de colores 161 creacin de colores 103 denicin de transparencia durante la exportacin 105 edicin 162 eleccin 100 eleccin de la paleta de trabajo 102 eleccin de paletas personalizadas 102 eliminacin de color 102 escala de grises 161 exacta 160 independiente del navegador 160 modelos de color 103 optimizacin 160 personalizadas 161 Sistema 160 sustitucin de color 102 uniforme 161 Web 216 160 Web adaptable 160 paneles Biblioteca 94 Buscar y reemplazar 222 Capas 92 combinacin 40 Comportamientos 40 Efecto 140 eleccin de opciones 39 eliminacin de cha 40 Estilos 86 Forma de Editar trazo 78 Fotogramas 209 Historial 41 Historial del proyecto 221

270

Index

introduccin de informacin 40 Muestras 100 Objeto 148 ocultacin 40 Opciones de Editar trazo 78 Opciones de herramientas 39 Optimizar 154 reorganizacin 39 Sensibilidad de Editar trazo 78 Tabla de color 161 Trazo 76 URL 176 uso 39 uso de cuadros emergentes 40 visualizacin de ocultos 40 visualizacin y ocultacin 39 panormica 47 Pantalla completa, modo 48 papel cebolla denicin 211 desactivacin 211 edicin de varios fotogramas 211 Editor de botones 192 visualizacin de fotogramas antes y despus 211 visualizacin de todos los fotogramas 211 visualizacin del fotograma siguiente 211 visualizacin personalizada 211 pegado en el modo de edicin de imgenes 62 en modo objeto 62 formatos 62 pegar dentro 150 perlado 138 Perlar ms, Xtra 138 Perlar, Xtra 138 Perforar, comando 73 Photoshop importacin de archivos u objetos 51 importacin de texto 117 opciones de importacin 43 Photoshop, ltros de conexin aplicacin 145 instalacin 145 Pincel, herramienta 57 pinceles almacenamiento 79 denicin de punta 78

edicin 78 opciones de trazo 78 pxeles ajuste de rango tonal mediante cuentagotas 135 ajuste de seleccin 124 ajuste del rango tonal 132 ajuste del rango tonal mediante Curvas 134 ampliacin del borde de seleccin 125 borrado 129 cambio de color 127 clonacin 127 contraccin de borde de seleccin 125 copia 122 corte 122 denicin 119 descripcin 119 edicin 127 edicin consecutiva 127 edicin mltiple 127 fundido 128 modo de edicin de imgenes 120 mover 122 Niveles automticos 133 pintura 130 rango tonal 133 relleno 127 seleccin 122 seleccin de rea alrededor de recuadro 126 seleccin de rea de estilo libre 122 seleccin de rea elptica 122 seleccin de rea poligonal 123 seleccin de rea rectangular 122 seleccin de colores similares 123 suavizado de borde de recuadro 126 plantillas adicin de estilos de salida 237 eliminacin de estilos de salida 237 Pluma, herramienta 56 PNG denicin 158 denicin de la profundidad de color 158 eleccin de una paleta de colores 160 entrelazado 159 exportacin 158 importacin 63 optimizacin 158 optimizacin de paletas de colores 160

Index

271

seleccin de una paleta de colores 159 tramado 159 Polgono, herramienta 59 polgonos dibujo 59 nmero de lados 59 restriccin al dibujar 59 preferencias archivos de cach 43 denicin 42 opciones de carpeta 43 opciones de edicin 42 opciones de importacin 43 opciones de interpolacin 42 Pasos de Deshacer 42 valores predeterminados 42 Presentacin preliminar de exportacin, cuadro de dilogo ampliacin y reduccin de la vista 168 comparacin de diferentes optimizaciones 168 exportacin a un tamao especco de archivo 168 exportacin mediante 167 optimizacin y uso 168 panormica de la vista 168 procesamiento por lotes arrastre y colocacin de Scriptlets 229 atributos de Buscar y reemplazar 226 Buscar y reemplazar 225 cambio de conguracin de archivos 226 Conguracin de exportacin 226 copia de archivos originales 228 creacin de Scriptlets 228 ejecucin de Scriptlets 229 formatos de archivo 225 grcos 224 opciones de denominacin 227 opciones de escala 227 profundidad de bits 158 profundidad de color, denicin 158 Puntero, herramienta 56 punto central, dibujo desde 58 punto curvo 68 punto de centrado, transformar 88 punto de esquina 68 puntos cambio del segmento adyacente 69

conversin de curvas a rectas 69 conversin de rectas a curvas 69 curva 68 desplazamiento 68 dibujo con 60 doblado de un segmento adyacente 69 esquina 68 seleccin 68 tiradores 68 R RAM, vase Requisitos del sistema Recortar el lienzo, comando 50 Recortar, comando 74 Recortar, herramienta 129 recorte 129 Rectngulo, herramienta 58 esquinas redondeadas 58 rectngulos dibujo 58 esquinas redondeadas 58 Recuadro elptico, herramienta 56 Recuadro, herramienta 56 recuadros 122 ampliacin 125 deseleccin 122 eliminacin 122 reduccin 125 seleccin del rea circundante 126 suavizado 126 recursos para el aprendizaje de Fireworks 12 reduccin 47 sin basarse en seleccin 47 reemplazo 220 reejo de objetos 89 Rehacer 41 relieve 143 relleno cambio del color para herramientas de formas bsicas 61 relleno de trama 84 rellenos adicin de patrones externos a la lista 83 adicin de textura 83 ajuste 83 almacenar degradado 82 aadir texturas a la lista 84

272

Index

aplicacin de degradado 81 aplicacin de patrones 82 aplicacin de slido 80 bsqueda y reemplazo 223 cambiar colores predeterminados 76 cambio de nombre de degradado 82 cambio del color 75 cambio del color de trazo y de relleno 75 dibujar sobre trazos 80 edicin 80 edicin de degradado 81 edicin de slido 80 eliminacin de degradado 82 ilusin de transparencia 85 mover 83 paleta de colores 75 relleno de trama 84 restablecer colores predeterminados 75 reutilizacin del degradado en otro documento 82 rotacin 83 suavizado 85 texto 115 transformacin de degradado 83 transformacin de patrn 83 rellenos de patrn adicin de externos a la lista 83 ajuste 83 aplicar 82 mover 83 rotacin 83 transformacin 83 rellenos degradados ajuste 83 ajuste de las transiciones de color 81 almacenamiento 82 aadir nuevos colores 81 aplicar 81 cambiar colores 82 cambio de nombre 82 cuadro de dilogo Editar degradado 81 edicin 81 eliminar colores 81 eliminar guardados 82 mover 83 reutilizar en otro documento 82 rotacin 83 transformacin 83

rellenos slidos adicin de textura 83 aplicar 80 remodelado de trazados 72 Remodelar rea, herramienta 57 reorganizacin de fotogramas 209 reproduccin de animaciones 215 Requisitos del sistema 12 Resaltar posicin del ratn, comando 67 restriccin al dibujar desde el punto central 58 al dibujar estrellas 59 al dibujar lneas 58 al dibujar polgonos 59 rotacin 89 tecla Alt, Windows 58 tecla Mays 58 tecla Opcin, Macintosh 58 teclas Mays-Alt, Windows 58 teclas Mays-Opcin, Macintosh 58 rollovers adicin a divisiones 189 adicin de estado Abajo 194 adicin de estado Sobre y Abajo 194 ajuste de estados a fotogramas 200 archivos de origen externo 204 rea activa 194 reas de activacin 203 asignacin de acciones del ratn 201 asignacin de URL 194 asignacin de valores URL 202 barras de navegacin 196 carga previa de imgenes 206 compatibilidad de navegador 205 conversin del formato Fireworks 2 196 creacin 192 denicin 192 denicin de rea de activacin 201 denicin de rea de intercambio 203 denicin de comportamiento de imagen de intercambio 203 denicin de comportamientos 201 denicin de texto de barra de estado 202 denicin del evento de ratn 204 desunido 203 deteccin de navegador 205 edicin 193

Index

273

edicin de rea activa 194 efectos de bisel 195 especicacin de imgenes desunidas 203 estado Abajo 192 estado Arriba 192 estado Sobre 192 estado Sobre y Abajo 192 exportacin 205 formas irregulares 204 insercin desde bibliotecas 197 lista de comportamientos 202 onClick 204 onMouseOut 204 onMouseOver 204 personalizacin de salida HTML 206 presentacin preliminar 156 proceso de creacin 200 superposicin 204 rollovers desunidos 203 rotacin cambiar posicin de eje de rotacin 89 lienzo 49 objetos 89 restriccin 89 RTF, formato 117 S saturacin 131 Scriptlets arrastre y colocacin 229 creacin 228 ejecucin 229 men Comandos 228 seleccin ajuste del recuadro de seleccin 124 ampliacin del borde de recuadro 125 anular la seleccin de un objeto en un grupo 92 rea alrededor de recuadro 126 rea de pxeles de estilo libre 122 rea elptica de pxeles 122 rea poligonal de pxeles 123 rea rectangular de pxeles 122 colores similares 123 contraccin de borde de recuadro 125 desactivacin de recuadro 122 deseleccin de todo 66 deseleccin de un objeto 66

fundido de bordes 128 grupo que contiene el objeto seleccionado 92 imgenes 122 imgenes en modo objetos 68 objeto en un grupo 92 objetos 66 objetos adicionales 66 objetos agrupados 91 objetos dentro de un grupo de mscara 152 objetos detrs de otro 91 ocultacin del cuadro delimitador 68 pxeles 122 puntos 68 relleno 127 resalte de opcin 67 seleccionar en nivel inferior 92 suavizado de borde de recuadro 126 todo en cada capa 66 trazado detrs de otro 66 varios objetos 66 visualizacin de contorno 67 visualizacin de puntos 67 Seleccionar detrs, herramienta 56 Seleccionar en nivel inferior, herramienta 56 Selector de colores Apple 104 Selector de colores del sistema 76 muestras de colores 104 Sello, herramienta 57 clonacin 57 Sensibilidad de Editar trazo, panel 78 Separar del trazado, comando 116 Separar, comando 73 smbolos animacin 212 colocar instancias en un documento 95 conversin de objetos a 95 creacin 94 creacin de instancias 95 denicin 94 duplicacin 95 edicin 95 eliminacin 95 interpolacin para animacin 213 modicacin 95 modicacin de instancias 96 Simplicar, comando 74 Sistema, paleta 160

274

Index

sitios Web conceptos bsicos sobre HTML 241 etiquetas HTML comunes 241 planicacin 234 suavizado objetos 85 texto 115 Suavizar, comando 126 subrayado 111 suplementos archivo 166 exportacin 170 T Tabla de color actualizacin 162 bloqueo de colores 162 desbloqueo de todos los colores 162 desbloqueo de un color 162 edicin de colores 162 eliminacin de ediciones 163 previsualizacin de pxeles 162 seleccin de un color 162 seleccin de un rango 162 seleccin de varios colores 162 visualizacin 161 Tamao de la imagen, cuadro de dilogo 48 tamao de punto 111 texto adaptacin a trazados 115 adicin 110 administracin de fuentes no encontradas 118 ajuste automtico entre caracteres 112 ajuste entre caracteres 112 alineacin 114 alineacin a la derecha 114 alineacin a la izquierda 114 alineacin de bloques 114 aplicacin de efectos 115 aplicacin de estilos 115 aplicacin de rellenos 115 aplicacin de trazos 115 bsqueda y reemplazo 222 cambiar con el men Texto 112 cambio de atributos 110 cambio de estilo de fuente 111 cambio de fuentes 111

cambio de tamao automtico 111 cambio de tamao de fuentes 111 centro 114 colocacin en trazados 116 color 114 conversin a trazados 117 cursiva 111 descripcin 109 desplazamiento respecto a la lnea base 112 direccin del ujo 113 edicin 111 edicin cuando est adaptado a un trazado 116 edicin del trazado adaptado 116 Editor de texto 111 ujo 113 importacin 117 importacin de ASCII 118 importacin de Photoshop 117 importacin de RTF 117 interlineado 112 introduccin 110 justicacin 114 mover 110 mover punto inicial en un trazado 116 negrita 111 negrita cursiva 111 orientacin 113 remodelado como trazados 117 separar del trazados 116 suavizado 115 suavizado de bordes 115 subrayado 111 tamao de punto 111 transformacin 116 ver con tamao predeterminado 112 ver en fuente del sistema 111 texto alternativo 177 texto cursiva 111 texto de barra de estado 202 texto negrita 111 Texto, herramienta 56 textura adicin a rellenos 83 adicin a trazos 76 tiempo de descarga, estimacin 156 tiradores edicin 68

Index

275

mostrar 67 transformacin 88 tirar rea 71 trazados 70 tramado con colores Websafe 84 transformacin al arrastrar 88 numrica 90 objetos 87 texto 116 Transformacin numrica, comando 90 Transformar distorsin, herramienta 90 Transformar escala, herramienta 88 Transformar inclinacin, herramienta 89 Transformar, herramientas Transformar distorsin 90 Transformar escala 88 Transformar inclinacin 89 transparencia adicin de colores 106 animacin 215 composicin 148 denicin durante la exportacin 105 herramientas Cuentagotas 105 ndice 107 seleccin de color 105 Transparencia de ndice 107 trazado de recorte 150 trazados 72 abiertos y cerrados 57 adaptacin de texto 115 adicin de puntos 68 adicin de textura al trazo 76 adicin de texturas externas a la lista 77 ampliacin de trazos 74 cambiar colores predeterminados 76 cambiar nombres de trazos 79 cambio del color de trazo y de relleno 75 cambio del color del trazo 75 cambio del segmento adyacente 69 colocacin de texto 116 combinacin 73 conversin de curvas a rectas 69 conversin de rectas a curvas 69 conversin de texto 117 creacin de personalizados 77

creacin de trazos personalizados 77 denicin de opciones de trazo 78 denicin de punta de pincel 78 denicin de sensibilidad de trazo 78 denicin del tamao de remodelado de rea 72 Descripcin 65 desplazamiento de un punto 68 dibujo 59 divisin 73 doblado de un segmento adyacente 69 edicin 68 edicin al tener texto adaptado 116 edicin de texto adaptado 116 edicin de trazos 76 edicin sin tiradores de punto 70 eliminacin de porciones 73 empujar 71 empujar y estirar 70 expansin o contraccin 75 exportacin 171 exportacin de seleccionado 172 exportacin para Flash 172 exportacin para FreeHand 171 exportacin para Illustrator 171 modicacin 72 mostrar valor 67 mover punto inicial del texto 116 mover trazos 80 punto curvo 68 punto de esquina 68 recorte 73 remodelado 72 remodelado de texto 117 remodelar rea 71 reorientacin trazos 79 restablecer colores predeterminados 75 seleccin de un punto 68 seleccionar detrs 66 simplicacin 74 tiradores 67 tirar 70 uso de trazos almacenados en otro documento 79 visualizacin de puntos 67 volver a dibujar 72 volver a dibujar un segmento 72 trazados abiertos 57 trazados cerrados 57

276

Index

Trazo, panel 76 trazos adicin de textura 76 almacenamiento de ajustes 79 borde 76 bsqueda y reemplazo 223 cambiar colores predeterminados 76 cambio de color 75 cambio de nombre 79 cambio del centrado 79 cambio del color de trazo y de relleno 75 cambio del color en herramientas de dibujo 61 categoras 76 conguracin para herramientas de dibujo 61 denicin de sensibilidad 78 dibujo sobre relleno 80 edicin 76 eleccin de un trazo 76 eliminacin 79 mover 80 nombres 76 paleta de colores 75 presentacin preliminar de pincelada 76 reorientacin 79 restablecer colores predeterminados 75 texto 115 textura 76 uso en otro documento 79 tringulos dibujo 59 restriccin al dibujar 59 tutoriales 13 U Uniforme, paleta 161 Unir al trazado, comando 115 Unir trazados, comando 73 Unir, comando 73 URL, panel 176

V valores URL absolutos 177 adicin a bibliotecas 176 adicin a botones 194 administracin 176 asignacin a objetos de divisin 185 asignacin a rollovers 202 asignacin a zonas interactivas 175 asignacin desde bibliotecas 176 bsqueda y reemplazo 224 creacin de nuevas bibliotecas 176 fondo 179 relativos 177 valores URL absolutos 177 valores URL relativos 177 Varita mgica, herramienta 56 vnculo, vase valores URL visita multimedia 12 vistas mltiples de un documento 47 vistas, mltiples 47 visualizacin barras de herramientas 38 bordes 67 Capa Web 175 capas 93 contorno 67 diferentes ajustes de optimizacin 156 inspectores 39 objetos de divisin 175 objetos seleccionados 91 ocultar bordes 67 paneles 40 paneles ocultos 40 puntos 67 zonas interactivas 175 Volver a dibujar trazado, herramienta 72 volver a dibujar trazados 72 W Web 216, paleta 160 Web adaptable, paleta 160 Windows instalacin e inicio de Fireworks 12 Requisitos del sistema 12

Index

277

X Xtras 130 Brillo/Contraste 131 Buscar bordes 137 como efectos automticos 131 Convertir en alfa 137 Curvas 134 Desenfocar 136 Desenfocar ms 136 Desenfoque gaussiano 136 Desperlar mscara 138 Invertir 135 Matiz/Saturacin 131 Niveles 132 Niveles automticos 133 Perlar 138 Perlar ms 138 Z Zona interactiva circular, herramienta 174 Zona interactiva poligonal, herramienta 174 Zona interactiva rectangular, herramienta 174 zonas interactivas asignacin de valores URL 175 asignacin de valores URL desde bibliotecas 176 circulares 174 comparacin con objetos de divisin 182 conversin a formas bsicas 178 creacin 174 creacin mediante trazado 175 descripcin 173 edicin 178 edicin mediante puntos 178 forma irregular 174 inclinacin 178 poligonal 174 rectangulares 174 transformacin 178 valor URL de fondo 179 valores URL absolutos 177 valores URL relativos 177 vnculos 175 visualizacin 175 visualizacin y ocultacin 184

278

Index