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 Leffler. 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 Griffin, 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 sofisticados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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
Configuracin de preferencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
3

CAPTULO 3
Creacin e importacin de documentos . . . . . . . . .45
Configuracin 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 grficos 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 filtros y filtros 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 filtros 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 grficos origen para mapas de imagen . . . . . . . . . . . . . . . .174
Creacin de zonas interactivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174
Asignacin de valores URL a zonas interactivas . . . . . . . . . . . . . . . . . .175
Edicin de zonas interactivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
Configuracin 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
Definicin 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
Planificacin 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
Planificacin 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 grficos 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 Modificar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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 grficos Web

profesionales. Se trata del primer entorno de produccin que permite a los
diseadores y desarrolladores crear los elementos grficos en la Web.
Utilice Fireworks para disear con rapidez elementos grficos, animaciones.
Fireworks combina herramientas de edicin de mapa de bits y de vectores.
En Fireworks, todos los elementos pueden editarse en cualquier momento, el flujo
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 grficas y editores de HTML de su
preferencia, permite obtener una solucin Web global. Es posible exportar grficos
de Fireworks con cdigo HTML y JavaScript personalizado para el editor HTML
que se utilice.

11

Requisitos del sistema

 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.

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.

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

Introduzca el CD-ROM de Fireworks en la

unidad de CD-ROM.

Elija una de las opciones siguientes:

12

Introduccin

 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

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

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/.

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

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

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.

Extensin de Fireworks

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/fireworks/.
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.fireworks.

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 eficaz 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
Planificacin 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.

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 flexibilidad 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.

14

Introduccin

Gestin mejorada de archivos y efectos

de Photoshop
Estas mejoras aumentan la capacidad de trabajar
con archivos Adobe Photoshop en Fireworks:
 Puede modificar los efectos de capas de

Photoshop con el panel Efecto.

 Puede utilizar tantos filtros 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 grficos 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.

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

 El texto de los botones puede modificarse 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.

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
Planificacin 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.

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
filtros y filtros 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

 Los smbolos de botn pueden editarse en

cualquier momento con el Editor de botones.

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 especific.
Para obtener ms informacin, consulte
Introduccin de texto en la pgina 110.

16

Introduccin

Efectos automticos
Pueden verse muchos filtros de otras empresas
como efectos automticos, incluidos filtros de
Photoshop o Alien Skin Eye Candy.
Especifique la carpeta de filtros 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 grficos, trazados y
trazos; y pueden aadirse tantos como se desee.
Tambin pueden modificarse. Si realiza cambios
en el objeto, el efecto se actualiza de forma
automtica. Los parmetros favoritos pueden
guardarse y aplicarse a otros objetos.

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 ficticia. Antes de comenzar, abra el archivo finalizado 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

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.

Botn Ocultar zonas interactivas y

divisiones
3

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.

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

18

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.

Captulo 1

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

Con el rectngulo an seleccionado, haga clic

en la flecha triangular situada junto a la paleta
de colores para abrirla.
Paleta de
colores de
relleno

De manera predeterminada, los mens

emergentes de colores presentan los 216
colores de la paleta Websafe.

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.

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 figura siguiente.

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.

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 flecha en el
ngulo inferior izquierdo. El relleno no ha
cambiado. En realidad, el verde claro
representa un objeto de divisin. La flecha
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 Modificar > Smbolo > Editar
smbolo. Con el editor de botones puede crear
los elementos grficos que desee utilizar en cada
estado del botn. La primera modificacin 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.

Elija una fuente (o tipo) en el men emergente

de fuentes del cuadro de dilogo Editor de
texto, especifique 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

Con la herramienta Puntero, seleccione el

rectngulo y a continuacin presione Mays
mientras hace clic en el texto.

Elija Modificar > Alinear > Centrar

verticalmente y, a continuacin,
Modificar > Alinear > Centrar
horizontalmente.

10

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 ficha Sobre del Editor de

botones y a continuacin en el botn Copiar
grfico Arriba. La imagen de la ficha Sobre es la
que debe aparecer cuando el puntero pase
sobre el botn en la pgina Web ya terminada.

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.

Todos los botones creados deben vincularse a

una direccin Internet, como un valor URL.
11

Haga clic en la ficha rea activa del editor de

botones y, a continuacin, en el Asistente de
vnculos (en el ngulo inferior derecho).

12

Haga clic en la ficha 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.

13

Haga clic en Aceptar.

14

Cierre el Editor de botones.

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.

Tutorial

21

Duplicacin del botn

Haga clic en la ficha 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.

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.

Rollovers sofisticados
2

Si el Inspector de objetos no est visible, elija

Ventana > Objeto.

En el cuadro de texto de Texto de botn,

escriba gifts y presione Intro (Windows) o
Retorno (Macintosh).

Adems de crear botones, Fireworks permite crear

efectos sofisticados 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

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).

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.
4

Haga clic en Actual.

Haga clic en el botn Asistente de vnculos del

inspector Objeto.

22

Captulo 1

Botn Fotograma
nuevo/Duplicar
fotograma

Haga clic en el botn Fotograma nuevo/

Duplicar fotograma, en la parte inferior del
panel Fotogramas.

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.

Haga clic en Swap text en la lista de elementos.

En la parte superior del panel Biblioteca
aparece una presentacin preliminar de la
ilustracin.

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.

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.
5

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.

Para ahorrarle tiempo, hemos creado el

elemento grfico 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 grficos 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.

12

Seleccione el botn Gifts.

13

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.

Fireworks inserta un rectngulo verde claro

transparente encima de la imagen para reflejar
la divisin.

Aparece el cuadro de dilogo Intercambiar

imagen.

11

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.

15

Haga clic en el botn Ocultar zonas

interactivas y divisiones de la Caja de
herramientas. Haga clic en la ficha
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.

En el Inspector de objetos (si no est visible,

elija Ventana > Objeto), anule la seleccin de la
opcin Denominacin automtica de
divisiones y especifique text_slice en el cuadro
de texto de la parte inferior del panel. Al
denominar de forma diferente a las divisiones
le ayudar a identificar las imgenes de divisin
a la hora de identificar y actualizar un sitio
Web.

Asignar un comportamiento (cdigo

JavaScript predefinido) al botn Gifts que
utiliza esta divisin como el rea que debe
cambiar cuando el puntero se desplace sobre el
botn.

24

Captulo 1

La ficha Presentacin preliminar muestra la

imagen, los botones y los comportamientos
JavaScript tal como aparecern en el navegador
Web.
16

Haga clic en la ficha Original y guarde la

imagen.

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

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 definicin del bisel.

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).

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.

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

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
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

Seleccione el rectngulo que contiene el texto

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

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.

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

Utilice la herramienta Puntero y arrastre el

rectngulo blanco sobre la taza de caf.

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 Modificar > 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.

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 Configuracin, en la

parte superior del panel Optimizar, elija JPEG
- Archivo ms pequeo.

Haga clic en la ficha 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.

En primer lugar, confirme 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

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
configuracin de la seleccin activa. En este
caso, dado que no hay nada seleccionado,
muestra la configuracin del documento.

Compruebe que est seleccionado GIF

WebSnap 128 en el men emergente
Configuracin, 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 ficha Optimizar y observe
cmo cambia la imagen de la derecha.

Guarde el archivo.

Si desea modificar 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

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

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.

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 especificar
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 modificacin.
Si lo desea, realice una presentacin preliminar
del documento en un navegador Web para ver
cmo queda y probar sus botones.

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.
9

Cuando haya probado el HTML exportado,

vuelva a Fireworks y cierre el archivo.

Abra el panel Capas y haga clic en el botn

Capa nueva / Duplicar capa, en la parte
inferior del panel.

Ahora desplazar las miniaturas para colocarlas

en la capa nueva.
3

Animacin

Para seleccionar las cuatro miniaturas,

mantenga presionada la tecla Mays mientras
hace clic en cada una de las imgenes con la
herramienta Puntero.

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

Abra el documento Animated_Start.png que se

encuentra en la subcarpeta Tutorial de la
carpeta de la aplicacin Fireworks.

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.
4

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 flecha triangular situada
en la parte superior del panel) y elija
Compartir capa. Observe el icono de cinta
cinematogrfica que aparece a la derecha del
nombre de capa para indicar que se trata de
una capa compartida por fotogramas.

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.

A continuacin, distribuya las miniaturas en

distintos fotogramas para crear la animacin.

30

Captulo 1

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.

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).

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 especficas para realizar una
tarea especfica. Los efectos automticos de carcter no destructivo evitan la
frustracin que acarrea tener que volver a crear los grficos Web desde el principio
despus de realizar una simple modificacin. Fireworks genera JavaScript facilitando
la creacin de rollovers. Adems, las funciones de optimizacin permiten comprimir
el tamao del archivo de grficos Web sin perjudicar la calidad.
A continuacin se describen algunas de las operaciones que puede realizar en
Fireworks:
 Puede crear grficos utilizando algunas de las mejores funciones de las

aplicaciones de grficos vectoriales y de mapa de bits en una sola aplicacin.

Puede realizar la edicin con la flexibilidad caracterstica de los objetos vectoriales
y aplicar efectos de mapa de bits; incluidos biseles, iluminacin, sombras y, ahora,
filtros de Photoshop, que permiten volver a dibujar mientras se edita.
 En Fireworks puede optimizar los grficos 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 grficos Web en objetos interactivos

con el fin 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
configuraciones 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.

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.

 Fireworks es, ante todo, una aplicacin de

diseo de grficos en pantalla. Sin embargo,

gracias a la posibilidad de exportar los grficos
a aplicaciones tales como FreeHand e
Illustrator, puede volver a utilizar los grficos
diseados en Fireworks para imprimirlos.

Perfeccionamiento de los
sitios Web con Fireworks
Es posible que Fireworks se haya presentado
como un optimizador de grficos 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.

34

Captulo 2

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.

Anuncios en titulares animados

Botones y rollovers de JavaScript

Utilice fotogramas, smbolos y la funcin de

optimizacin para crear anuncios en titulares
animados GIF o Flash compactos.

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 grfico
en un mapa interactivo. Site zonas interactivas
en las reas del grfico 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 grfico y, a continuacin, utilice
divisiones para exportarlo como un grupo de
grficos ms pequeos con valores URL nicos.

Conceptos bsicos de Fireworks

35

Desarticulacin de rollovers

Pginas Web completas

Cree rollovers que desencadenen un cambio en

otra parte de la pgina Web. Por ejemplo, es
posible conseguir que un grfico se reemplace por
otro al hacer clic en un botn de una barra de
navegacin.

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 eficaz. 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 flotantes
que disponen de varias fichas. 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 grfico en un navegador, lo
que permite comparar el mismo grfico
optimizado de cuatro maneras distintas.
Tambin puede ver y ajustar la configuracin
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.

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.

 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 grficos

y de botn. Las copias de la biblioteca pueden

arrastrarse fcilmente hasta el documento.

La ficha Original y las tres fichas 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 ficha

Original.

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

Haga clic en la ficha Presentacin preliminar,

2-arriba o 4-arriba de la ventana de documento.
Utilice los paneles Optimizar y Tabla de color
para modificar la configuracin 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 grficos en
Fireworks, consulte Optimizacin en el rea de
trabajo en la pgina 154 y Exportacin de una
imagen en la pgina 166.

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, Modificar y Ver controles
proporcionan fcil acceso a varios comandos. Los
usuarios de Macintosh pueden seleccionar estos
comandos en los mens.

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

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

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
flotante.

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

Uso de paneles e inspectores

Muchos de los controles de Fireworks se
encuentran disponibles en los paneles e inspectores
flotantes 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 fichas. Igualmente, puede
separar un panel o un inspector de un panel
con fichas para colocarlo en el punto que ms
le convenga en el rea de trabajo.
Para mostrar u ocultar un panel o un inspector:

Elija el panel o inspector en el men Ventana.

La mayora de paneles e inspectores disponen de
un men emergente Opciones.

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.

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:

Haga clic en el botn de flecha 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.

 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.

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:

Haga clic en la flecha abajo situada junto al

cuadro.
2 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.

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.

Para combinar dos o ms paneles o inspectores:

1

Arrastre un panel o inspector flotante sobre

otro panel o inspector flotante. Cuando
aparezca el borde resaltado en el panel situado
debajo, suelte el botn del ratn.
Haga clic en una ficha de la ventana para
situarlo delante.

Para eliminar un panel o inspector de un panel

con fichas:

Site el panel o inspector fuera del panel con

fichas arrastrando su ficha correspondiente.
Para ocultar un panel o un grupo de paneles con
fichas:

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:

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.
3 Reinicie Fireworks.
1

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

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.

40

Captulo 2

Para obtener ms informacin sobre los

comportamientos, consulte Asignacin de
comportamientos de rollover en la pgina 201.

Cambio y repeticin del

historial de un documento

Para guardar comandos con el fin de volver a

utilizarlos:

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
especificado en Pasos de deshacer.

 Utilice el marcador de deshacer del panel

Historial para deshacer y rehacer comandos

recientes.

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.
3 Introduzca el nombre de comando y haga clic
en Aceptar para aadir el nombre al submen
Modificar > Comando.
1

 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 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

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.

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 fichas:

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 grfico

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 grficos.
Para obtener ms informacin, consulte Qu es
un botn? en la pgina 192

Utilizacin de los mens

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

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.
2

Elija un comando.

Configuracin de preferencias
Mediante la configuracin 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 configuracin se
aplica tanto al comando Editar > Deshacer como
al panel Historial.
Pasos de Deshacer

42

Captulo 2

La cantidad de memoria que necesita Fireworks

puede aumentar si configuran 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

 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

los iconos de herramientas por el cursor en forma

de cruz.

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

Eliminar objetos al recortar

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

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 grfico con el
comando de Dreamweaver Optimizar imagen en
Fireworks.
Al optimizar de aplicaciones externas

Gestin de carpetas externas y discos

temporales
Las preferencias del panel Carpetas proporcionan
acceso a los filtros de conexin de Photoshop,
a los archivos de texturas y a los archivos de
patrones de origen externo. Asimismo, permiten
especificar si se desea que Fireworks almacene los
archivos de cach temporales.

Los materiales adicionales (filtros de conexin de

Photoshop, Texturas y Patrones) son carpetas de

destino que contienen filtros 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 filtros 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 filtros y filtros de conexin en
la pgina 130 y Utilizacin de filtros 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 especificar 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 definir el disco que tenga
ms espacio libre como disco temporal primario.
Si se agota el espacio en el disco duro primario,
especifique 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.

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 grficos Web en Fireworks,
puede exportarlos a otros formatos grficos para Web conocidos, tales como
JPEG, GIF y GIF animado. Al exportar un grfico en otro formato de archivo, el
archivo PNG original de Fireworks no se modifica, por lo que puede utilizarlo
siempre que quiera.
Mientras que el documento PNG est abierto, es posible ampliar o reducir los
grficos. 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 grfico
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 grficos Web en
Fireworks, primero es preciso configurar un
documento nuevo o abrir un documento
existente. Aunque las caractersticas del
documento se pueden cambiar despus, resulta
ms eficaz 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.

Introduzca las medidas de anchura y altura del

lienzo en pxeles, pulgadas o centmetros.
Es preciso que cualquier grfico 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
especificado un color de fondo ni una textura en la
pgina Web.

46

Captulo 3

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 grfico entero.

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.

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 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 la herramienta Aumentar, mantenga

presionada la tecla Alt (Windows) u Opcin

(Macintosh) y, a continuacin, haga clic en un
documento.

Para desplazarse por el documento:

1

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 Ventana > Nueva ventana.

Para disponer las vistas del documento en
mosaico:

Elija Ventana > Mosaico horizontal o

Ventana > Mosaico vertical.
Para cerrar una vista del documento:

Haga clic en el cuadro de cierre de la ventana.

 Seleccione un nivel de aumento en el men

emergente Aumentar.
 Elija Ver > Nivel de aumento y seleccione una

opcin de aumento.

Creacin e importacin de documentos

47

Control del nuevo dibujo del

documento

Para cambiar el color del lienzo:

Seleccione Modificar > Color del lienzo.

Los modos de visualizacin influyen en la

presentacin en pantalla de un documento, no as
en los datos del objeto ni en la calidad del resultado.

Para cambiar el tamao de una imagen en

Fireworks:

 En el modo de pantalla completa, el

Elija Modificar > Tamao de la imagen. Se abre

el cuadro de dilogo Tamao de la imagen.

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 modificar 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
modificar 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.

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 modifica para mostrar el aspecto del
grfico en otras plataformas. Mientras utiliza la
plataforma Windows, puede ver la presentacin
del grfico en Macintosh y viceversa.
Nota: En el modo de borrador, los objetos
seleccionados se muestran con todo detalle.
Para activar otro modo de visualizacin:

 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

Seleccione Modificar > Tamao del lienzo.

Haga clic en un botn Anclaje para especificar

los lados del lienzo que se van a ampliar o
eliminar en Fireworks y, a continuacin, haga
clic en Aceptar.

48

Captulo 3

Eleccin de un mtodo de nuevo muestreo

Nuevo muestreo en Fireworks

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 modifica, 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.

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 Modificar > 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 Modificar > Rotar lienzo.

Elija una opcin de rotacin.

Recorte del lienzo

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

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 modifica.
Para obtener informacin sobre la importacin de
grficos como objetos de imagen en un
documento de Fireworks abierto, consulte
Incorporacin de imgenes importadas en un
documento en la pgina 62.

Antes de recortar el lienzo

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.

Despus de recortar el lienzo

50

Captulo 3

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.

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.

Crear capas compartidas permite a los fotogramas

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

Convertir en fotogramas

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

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

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.

En el cuadro de dilogo Opciones de archivo

de Photoshop, elija las opciones adecuadas:

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.

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 configuraciones del cuadro de dilogo

Opciones de archivo de Photoshop son idnticas a
las opciones de importacin definidas 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
modificaciones 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.

permite conservar la estructura

de capas del archivo importado.

Mantener capas

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:

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 finales

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

Elija Archivo > Abrir.

Se abre el cuadro de dilogo Opciones de
archivos vectoriales.

En el cuadro Opciones de archivos vectoriales,

elija las opciones adecuadas:

Conversin de archivos permite especificar cmo

debern gestionarse los documentos de varias
pginas al importarlos:

 Abrir una pgina slo permite importar la

pgina especificada.
 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

permite importar los

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

Incluir capas de fondo

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 especificar el porcentaje de escala

del archivo importado.
Escala

permite especificar la anchura y

la altura del archivo importado en pxeles.
Anchura y Altura

permite especificar la resolucin del

archivo importado.
Resolucin

52

Captulo 3

Nota: Para aplicar las funciones Suavizado o

Borde duro a los objetos seleccionados, utilice
Modificar > Borde del trazado despus de importarlos.

Apertura de una animacin GIF

Cuando se abre una animacin GIF, Fireworks
realiza las siguientes operaciones:
 Sita cada uno de los fotogramas de la

Para importar una imagen de un escner o una

cmara digital:
1

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 filtro de
conexin de Photoshop Acquire que
corresponda al dispositivo desde el cual desee
importar una imagen.

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 modificacin de la
imagen se refleja en todos los fotogramas.

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 filtros 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 filtros de conexin de Photoshop
Acquire en Fireworks, es preciso realizar una de
estas acciones durante o despus de la instalacin:

Para la mayora de mdulos TWAIN o filtros

de conexin para adquisicin, Fireworks
presentar un cuadro de dilogo adicional en el
que se solicita que establezca las opciones
correspondientes.
4

Siga las instrucciones y aplique las

configuraciones.
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 filtros de conexin apropiados. Para
obtener instrucciones especficas relacionadas con la
instalacin, las configuraciones y las opciones, consulte
la documentacin del mdulo TWAIN o del filtro de
conexin para adquisicin que est utilizando.

 Instale el filtro de conexin de Photoshop

Acquire en la carpeta Fireworks

3\Settings\Xtras.
 Instale el filtro 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 ficha
Carpetas y elija Filtros de conexin Photoshop.
A continuacin, haga clic en el botn
Examinar y desplcese hasta la carpeta que
contenga los filtros de conexin de Photoshop.

Creacin e importacin de documentos

53

54

Captulo 3

CAPTULO 4

Dibujo de objetos

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Por lo general, los grficos 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 grficos vectoriales.
Mientras dibuja, los trazados vectoriales y sus puntos correspondientes se generan
de forma automtica. Al ampliar el grfico 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 grficos 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 grficos 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 grficas 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 grficas 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

En esta tabla no se incluyen las herramientas cuya

funcin es idntica en ambos modos.

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.

Herramienta En el modo de
objetos

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.

Seleccionar
detrs

Selecciona un objeto
situado detrs del
objeto seleccionado.

Mueve la imagen o
los pxeles
agrupados mediante
un recuadro.

Seleccionar
en nivel
inferior

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.

Mueve la imagen o
los pxeles
agrupados mediante
un recuadro.

Recuadro o
Recuadro
elptico

Activa el modo de
edicin de imgenes y
selecciona un rea de
pxeles rectangular o
elptica.

Selecciona o mueve
un rea de pxeles
rectangular o
elptica.

Lazo o Lazo
poligonal

Activa el modo de
edicin de imgenes y
selecciona un rea de
pxeles de estilo libre.

Selecciona o mueve
un rea de pxeles de
estilo libre.

Para regresar al modo de objetos:

 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.

Cursor de parada y botn Detener

 Utilice una herramienta que slo funcione en






el modo de objetos, como la herramienta

Texto.
Elija Modificar > Salir de edicin de imagen.
Presione la tecla Esc.
En Windows, presione Control+Mays+D.
En Macintosh, presione Comando+Mays+D.

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

Dibuja objetos como

trazados que se
pueden editar.

Pinta pinceladas de
pxeles en un objeto
de imagen.

Pluma

Dibuja objetos como

trazados que se
pueden editar.

Activa el modo de
objetos y dibuja
objetos como
trazados que se
pueden editar.

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.

Lpiz

Dibuja trazos de lpiz Dibuja trazos de

de un pxel como
lpiz de un pxel.
trazados de estilo libre.

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.

56

Captulo 4

En el modo de
edicin de
imgenes

Herramienta En el modo de
objetos

En el modo de
edicin de
imgenes

Pincel

Dibuja pinceladas
como trazados.

Pinta pinceladas
como pxeles.

Estilo libre

Estira o contrae un
trazado seleccionado
para cambiar la forma
del mismo.

Activa el modo de
objeto.

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.

 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 final que no se tocan.

 En el trazado cerrado, el punto inicial y el final

son el mismo punto.

Cuchillo/
Borrador

En el modo de objetos,
esta herramienta se
convierte en Cuchillo.
Corta un trazado
seleccionado para
crear varios trazados.

En el modo de
edicin de imgenes,
esta herramienta se
convierte en
Borrador.
Borra pxeles de una
imagen.

Sello

Activa el modo de
edicin de imgenes y
duplica partes de un
objeto de imagen.

Duplica partes de un
objeto de imagen.

Dibujo en el modo de
objetos
En el modo de objetos, los trazados y los puntos
son los elementos bsicos del diseo grfico. 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 definen y controlan la forma de dicho
objeto. Para obtener ms informacin sobre la
seleccin, consulte Seleccin de objetos en la
pgina 66.

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 finales 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.

Para dibujar objetos de trazado, puede realizar lo

siguiente:

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:

 En Windows, mantenga presionadas las teclas

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

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.

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 configuracin 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:

Para dibujar un cuadrado:

1

Haga doble clic en la herramienta Rectngulo

para abrir el panel Opciones de la herramienta
Rectngulo.

Para dibujar un crculo:

Mantenga presionada la tecla Mays mientras

arrastra la herramienta Elipse.

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 Rectngulo.

Para restringir la orientacin de una lnea a

incrementos de 45 grados:

Mantenga presionada la tecla Mays mientras

arrastra la herramienta Lnea.

58

Captulo 4

Nota: Las esquinas de los rectngulos existentes no se

pueden redondear.

Dibujo de tringulos y otros polgonos

Para dibujar una estrella:

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

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.

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.
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.

Haga doble clic en la herramienta Polgono

para abrir el panel Opciones de la herramienta
Polgono.
2 En el men emergente Forma, elija Estrella.
3 Introduzca el nmero de puntas de la estrella.
4 Establezca el valor de ngulo:
 Elija ngulo automtico.
 Introduzca un valor en ngulo. Cuanto menor
sea el nmero, mayor ser el ngulo.
5 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:

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
grficas de mapa de bits tradicionales; sin embargo,
los objetos dibujados en Fireworks pueden editarse
debido a que son objetos de trazado.

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.

Utilice la herramienta Pluma para dibujar

trazados con una sucesin de puntos. Esta
herramienta funciona de forma similar a las de
FreeHand e Illustrator.

Para pintar trazados o dibujar trazos de lpiz:

1

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.

Elija la herramienta Pluma.

Haga clic para trazar los puntos:

Termine el trazado:

 Si desea dibujar segmentos rectos, haga clic

 Para dejar el trazado abierto, suelte el botn del

ratn en el lugar en el que quiera que termine.

para trazar cada punto.

 Para dibujar segmentos curvos, mantenga

presionado el botn del ratn sobre un punto

y, a continuacin, arrstrelo.

 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

Para continuar dibujando un trazado abierto

existente:

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.

Elija la herramienta Pluma o la herramienta

Volver a dibujar trazado.

Haga clic en el punto final y contine

dibujando el trazado.

Dibujo de trazados mediante el trazado punto a punto.

60

Captulo 4

Para obtener informacin detallada sobre la

edicin de trazados, consulte Remodelado de
trazados editando los puntos en la pgina 68.

Cambio del trazo de las

herramientas de dibujo

Cambio del relleno 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.

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 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.

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

En la paleta de colores de trazo de la Caja de

herramientas, haga clic en la flecha 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.

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 fills" on page 80.
Para cambiar el color de relleno de las
herramientas de formas bsicas:
1

2
3
4

En la paleta de colores de relleno de la Caja de

herramientas, haga clic en la flecha 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

Al pegar en Fireworks un objeto copiado de otra

aplicacin, ste queda centrado en el documento
activo.

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.

Cada modo de edicin gestiona los datos pegados

de manera diferente:

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

 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 grfico vectorial o un objeto de imagen, se

pega una seleccin de pxeles que permanece
flotando hasta que se desactiva. Una vez
desactivada, la seleccin pasa a formar parte de
la imagen.

 Illustrator 7 o posterior
 Microsoft Office 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

Seleccione un grfico 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

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.

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.

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 grficos 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 finas 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 grfico 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 reflejar
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:

Seleccin de objetos

Mantenga presionada Mays y haga clic en el

objeto seleccionado. Los dems objetos
permanecern seleccionados.

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.

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:

Aunque haya trazados apilados, agrupados o

superpuestos que oscurezcan otro trazado, podr
seleccionarlo.
Para seleccionar un trazado detrs de otro:

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

Elija la herramienta Puntero.

Elija la herramienta Seleccionar detrs.

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.

Haga clic en el objeto. Aparecer un trazado de

seleccin que contornea el objeto.

 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 seleccionar varios objetos a la vez:

Para anular la seleccin de todo lo que hay en

cada capa:

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

Haga doble clic en la herramienta de seleccin

para abrir su panel Opciones.

Anule la seleccin de Resaltar posicin del

ratn.

Para visualizar el trazado y los puntos de un

objeto:

 Seleccione el trazado con la herramienta

Seleccionar en nivel inferior.

 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.

Un objeto seleccionado con la herramienta

Seleccionar en nivel inferior presenta el trazado
del objeto con puntos.

Para mostrar el contorno de seleccin de un

trazado, pero no sus puntos:

Para ocultar el contorno de un objeto

seleccionado:

 Seleccione el trazado con la herramienta

Elija Ver > Ocultar bordes.

Puntero o Seleccionar detrs.

Nota: Para identificar 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

 Un punto curvo indica que los segmentos

adyacentes son curvos y se mantienen

transiciones suaves y regulares entre segmentos.

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 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.

Para seleccionar puntos especficos:

1

Elija la herramienta Seleccionar en nivel

inferior.

Seleccione uno o ms puntos:

Nota: Para cambiar al modo de edicin de imgenes,

haga doble clic sobre la imagen.

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
definir por los puntos especificados al dibujar.
El tipo de punto y el aspecto curvo o recto de las
lneas adyacentes estn relacionados directamente:

 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:

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.

Haga clic en un punto curvo para

seleccionarlo.

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

Elija la herramienta Pluma.

Haga clic en un punto de esquina y arrstrelo

alejndolo.
Los tiradores se extendern curvando los
segmentos adyacentes.

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 Seleccionar en nivel inferior.

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.

Las herramientas de edicin del modo de objetos:

Estilo libre, Remodelar rea, Depurador de trazados,
Volver a dibujar trazado y Cuchillo.

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.

Doblado de trazados
Utilice la herramienta Estilo libre para doblar un
trazado sin modificar 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.

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.

Longitud
especificada

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

Elija la herramienta Estilo libre.

Desplace el puntero directamente sobre el

trazado seleccionado.
El cursor cambia al puntero de ampliacin.

La herramienta Estilo libre reduce un segmento de

trazado. El trazado se vuelve a dibujar para reflejar
la ampliacin.

70

Captulo 5

Arrastre el trazado.

Para reducir trazados seleccionados:

1

Elija la herramienta Estilo libre.

El puntero cambia al de reduccin.

Apunte algo alejado del trazado.

Arrastre hacia el trazado para reducirlo.

Presionar ligeramente sobre el trazado
seleccionado para cambiarlo de forma.

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.

Para cambiar el tamao del puntero de reduccin:

 Para aumentar la anchura, presione la tecla de

flecha derecha o presione la tecla nmero 2.

 Para reducir la anchura del puntero de

reduccin, presione la tecla de flecha 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, especifique 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 definirse.
Nota: La herramienta Remodelar rea tambin
responde a la presin de una tableta Wacom u otra
compatible.
Para distorsionar los trazados seleccionados:
1

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:

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.

 Para aumentar el tamao del puntero, presione

la tecla de flecha derecha o presione la tecla

nmero 2.
 Para reducir el tamao del puntero de

reduccin, presione la tecla de flecha 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, especifique 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:

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.

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

Elija la herramienta Cuchillo.

Corte el trazado:

 Arrastre el puntero a travs del trazado

 Haga clic en el trazado
3

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.

72

Captulo 5

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 define 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.

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

Elija la herramienta Seleccionar en nivel inferior.

Seleccione dos extremos en dos trazados abiertos.

Elija Modificar > Unir.

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 definidas por las porciones
superpuestas de otro objeto de trazado
seleccionado situado delante.

Para crear un trazado compuesto:

1

Seleccione dos o ms trazados abiertos o

cerrados.

Elija Modificar > Unir.

Para dividir un trazado compuesto:

1

Seleccione el trazado compuesto:

Para eliminar porciones de un objeto de trazado:

Elija Modificar > Separar.

Seleccione el objeto de trazado que define el

rea que desea eliminar.

Para combinar trazados cerrados en otro trazado

que abarque el rea completa de los originales:

Elija Modificar > Organizar > Poner en primer

plano.

Elija Modificar > Combinar > Unir.

Mantenga presionada Mays y aada a la

seleccin el objeto de trazado del que van a
borrarse partes.

Elija Modificar > Combinar > Perforar.

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 definida 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 Modificar > Combinar > Intersectar.

Edicin de objetos

73

Para recortar un trazado seleccionado:

1

Seleccione el objeto de trazado que define el

rea que va a recortar.

Elija Modificar > Organizar > Poner en primer

plano.

Mantenga presionada Mays y aada a la

seleccin el objeto de trazado que va a recortar.

Elija Modificar > Combinar > Recortar.

Para expandir el trazo de un objeto seleccionado:

1

Elija Modificar > Modificar el trazado > Ampliar

trazo para abrir el cuadro de dilogo Ampliar
trazo.

Establezca la anchura del trazado cerrado de

resultado, aparentando que el trazo del objeto
original se ha ensanchado.

Especifique 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.

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:

Elija Modificar > Modificar el trazado > Simplificar.

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 especificando una cantidad.

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.

Para expandir o contraer el trazado seleccionado:

1

Elija Modificar > Modificar 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.
3

Establezca la anchura entre el trazado original y

el que va a contraer o expandir.

Especifique 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.

Un objeto de trazado ms pequeo o ms grande

con los mismos atributos de trazo y relleno
reemplazar al objeto original.

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:

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

Haga clic en el botn Intercambiar colores del

Mezclador de color o la Caja de herramientas.

Despus de dibujar un objeto de trazado, puede

modificar 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.

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

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.

Se abre el cuadro de dilogo Color (Windows)

o el selector de colores de Apple (Macintosh).
2

Utilice el panel Pincel para cambiar el trazo

aplicado al objeto.
Para editar el trazo de un objeto seleccionado:
1

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.

Modifique 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.

Elija un color en el selector del sistema y haga

clic en Aceptar.

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 finos 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
configuracin 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.

76

Captulo 5

Nota: Algunas categoras de trazos tienen aplicada

una textura predeterminada.

Adicin de textura a un trazo

Las texturas modifican 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.

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 especficas 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.

El men emergente Textura muestra una

presentacin preliminar de la textura resaltada.

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 configuracin.
La presentacin preliminar de un trazo que
tiembla y cambia a izquierda y derecha
proporciona la indicacin de las configuraciones
de sensibilidad y presin actuales.

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 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.

En el panel Opciones, establezca la cantidad de

tinta, el espaciado y la velocidad. Los valores
altos de velocidad crean trazos que fluyen de
manera parecida a un aerosol.

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.

78

Captulo 5

Fireworks tiene configuraciones 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.

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.

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.

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.

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

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

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.

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.

80

Captulo 5

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

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.

Aplicacin de un relleno de degradado

Edicin 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.

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:

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.

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 ajustar la transicin entre los colores del

relleno:

En el men emergente Nombre del relleno

elija una combinacin de colores de relleno,
como Rojo, Verde, Azul o Pasteles.

Arrastre las muestras de color a la izquierda o la

derecha.

El relleno aparecer en el objeto seleccionado,

convirtindose en el relleno activo.

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

Haga doble clic en la muestra de color.

Elija un color en el men emergente de

muestras.

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.

Para cambiar el nombre de un relleno de

degradado:
1

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.

Para suprimir un relleno de degradado guardado:

Almacenamiento y reutilizacin de
rellenos de degradado
Es posible guardar todos los cambios que haga en
las configuraciones 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

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

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
grfico 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.

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.

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.

Para aplicar un relleno de patrn a un objeto

seleccionado:
1

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.
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.

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:

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 modifican 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.
3

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.

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.

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 modificar 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:

Seleccione un objeto que contenga un color

que no sea Websafe.
2 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.
1

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 definir 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 grfico 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 predefinidos 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 predefinidos.

Puede aadir, cambiar y eliminar los estilos.
El CD-ROM de Fireworks y el sitio web de
Macromedia tienen muchos estilos predefinidos
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

Para aadir un estilo nuevo:

Utilice el panel Estilos para almacenar y aplicar

los estilos a objetos o a texto.

Cree un objeto o texto con las configuraciones

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.

3

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.

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:

Para aplicar un estilo a un objeto o bloque de

texto seleccionado:

Aplique el estilo del que va a partir al objeto

seleccionado.

Haga clic en un estilo del panel Estilos.

Edite los atributos del objeto.

Guarde los atributos como el nuevo estilo.

86

Captulo 5

Para suprimir un estilo:

1

Eljalo en el panel Estilos.

Para seleccionar varios estilos y suprimirlos,
mantenga presionada la tecla Mays mientras
los elige.

Haga clic en el botn Suprimir estilo del panel

Estilos.

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:

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:

Seleccione la opcin Iconos grandes otra vez.

Para exportar estilos:

1

Eljalos en el panel Estilos.

Para elegir ms de un estilo, mantenga
presionada Mays mientras hace clic.

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.

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.

Transformacin y distorsin
de objetos
Puede escalar, rotar, reflejar, 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.

Importacin y exportacin de estilos

El CD-ROM de Fireworks y el sitio web de
Macromedia tienen muchos estilos predefinidos
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.

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.

Tiradores de transformacin
2

Arrastre para transformar los objetos.

Punto de centrado

Escalado de objetos

Objeto original

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

Muestre los tiradores de transformacin:

 Elija la herramienta Transformar escala.

Rotado y escalado

 Elija Modificar > Transformar > Escala.

2

Arrastre los tiradores de transformacin:

 Para escalar el objeto tanto horizontal como

verticalmente, arrastre uno de los tiradores de

esquina. Las proporciones se modifican a
medida que se escalan.
 Para escalar el objeto horizontal o

verticalmente, arrastre un tirador central.

Inclinado y distorsionado

Reflejado verticalmente y horizontalmente

88

Captulo 5

Rotacin de objetos

Reflejo 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.

Puede reflejar un objeto sobre su eje vertical u

horizontal sin cambiar su posicin relativa.
Para reflejar un objeto seleccionado:

Para rotar un objeto seleccionado 90 o 180

grados:

Elija Modificar > Transformar > Reflejar

horizontalmente o Reflejar verticalmente.

Elija Modificar > Transformar y seleccione el

comando Rotacin en el submen.

Inclinacin de objetos

Para rotar un objeto seleccionado arrastrndolo:

La inclinacin transforma un objeto tumbndolo

a lo largo del eje horizontal, vertical o ambos. Un
objeto se puede inclinar arrastrndolo.

Elija cualquiera de las herramientas

Transformar.

Para inclinar un objeto seleccionado:

1

Muestre los tiradores de transformacin:

 Elija la herramienta Transformar inclinacin

Mueva el puntero fuera del objeto hasta que

aparezca el cursor de rotacin.

 Elija Modificar > Transformar > Inclinar.

2

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

Muestre los tiradores de transformacin:

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.

 Elija la herramienta Transformar distorsin.

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

 Situar objetos detrs o delante de otros.

La manera de organizar los objetos se

denomina orden de apilamiento.

Arrastre un tirador para distorsionar el objeto.

Transformaciones numricas

 Agrupe objetos individuales.

En vez de arrastrar para escalar, cambiar el tamao

o rotar un objeto, puede transformarlo utilizando
valores especficos.

 Cree y ordene capas.

Para escalar o rotar objetos seleccionados en

medidas especficas:
1

Elija Modificar > Transformar > Transformacin

numrica.
Se abre el cuadro de dilogo Transformacin
numrica.

 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.

En el men emergente, elija el tipo de

transformacin que va a realizar en la seleccin
actual.

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.

Escriba valores numricos para transformar la

seleccin y haga clic en Aceptar.

Para situar un objeto en la pila:

Para mantener las proporciones horizontales y

verticales de un objeto al escalarlo o cambiarlo de
tamao:

Elija Restringir las proporciones en el cuadro de

dilogo Transformacin numrica.

90

Captulo 5

Seleccione el objeto.

Cambie el orden de apilamiento:

 Elija Modificar > Organizar > Traer al frente o

Enviar al fondo para situar el objeto en primer

plano o en el fondo.

 Elija Modificar > 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

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
Agrupe dos o ms objetos si desea fijar 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 modifique el grupo entero.

Agrupacin de objetos seleccionados como un nico

objeto.

Ocultar y mostrar objetos

Los objetos se pueden ocultar temporalmente y
volver a mostrarse ms adelante. Los objetos
ocultos no se exportarn.

Para agrupar dos o ms objetos seleccionados:

Elija Modificar > Agrupar.

Para desagrupar un grupo seleccionado:

Para ocultar de la vista los objetos seleccionados:

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 Modificar > 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 modificar.

Elija Ver > Mostrar todo.

Herramienta Seleccionar en nivel inferior

Edicin de objetos

91

Si se modifican 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.

Seleccin en nivel inferior de un objeto incluido en

un grupo.
Para seleccionar un objeto en un grupo:
1

Elija la herramienta Seleccionar en nivel

inferior.

Haga clic en el objeto.

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.

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.

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

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.

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

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.

Para aadir una capa:

Para mover una capa:

 Seleccione Nueva capa en el men emergente

Desplace el nombre de una capa hacia arriba o

hacia abajo en el panel Capas. Al mover una capa,
cambia su orden de apilamiento.

Opciones del panel Capas.

 Haga clic en el botn Nueva capa.
 Elija Insertar > Capa.
Para activar una capa:

 Haga clic en el nombre de la capa en el panel

Capas.

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.

 Seleccione un objeto en esa capa.

Para mostrar u ocultar una capa:

Los objetos que dibuje, importe o pegue residirn

inicialmente en la capa activa.

Haga clic en el cuadrado situado en la primera

columna a la izquierda del nombre de la capa.

Para nombrar una capa:

El icono de ojo indica que la capa es visible.

Haga doble clic en el nombre de una capa en el

panel Capas.

Nota: Las capas ocultas no se exportan.

Se abre el cuadro de dilogo Opciones de capa.

Para bloquear una capa:

En el cuadro de texto Nombre, escriba el

nuevo nombre de la capa y haga clic en
Aceptar.

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.

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:

 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:

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

Smbolos e instancias
Utilice smbolos e instancias para simplificar 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 modifica el objeto smbolo
(original), las instancias (copia) cambian
automticamente para reflejar las modificaciones
efectuadas en el smbolo.
Puede utilizar smbolos e instancias para
modificar fcilmente ilustraciones complejas que
contienen varias copias de objetos, compartir
componentes a travs de estados de rollover y
crear y modificar animaciones rpidamente
Los smbolos se almacenan en el panel Biblioteca.

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 verificacin 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.

94

Captulo 5

El panel Biblioteca puede guardar tanto smbolos

grficos 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

Para crear un nuevo smbolo:

1

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, Grfico 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

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, Grfico o Botn, y
haga clic en Aceptar.
El objeto seleccionado se convierte en un
smbolo, que aparece en la biblioteca.

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

 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

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.

Haga doble clic en una instancia para abrir el

editor de smbolo.
Realice las modificaciones y cierre la ventana.
Todas las instancias del smbolo se modificarn
para reflejar los cambios.

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 flecha 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 modificar una instancia se
modifica el smbolo y las dems instancias. Sin
embargo, se puede modificar una instancia sin
que tenga efecto en el smbolo u otras instancias,
separando su vnculo con el smbolo.

Para exportar smbolos:

1

Se abre el cuadro de dilogo Exportar

smbolos.
2

En el documento, seleccione la instancia.

Elija Modificar > Smbolo > Romper vnculo.

Seleccione los smbolos que desee exportar y

haga clic en Exportar.
Se abre el cuadro de dilogo Guardar como.

Para separar una instancia de un smbolo:

1

En el men emergente Opciones del panel

Biblioteca, elija Exportar smbolos.

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.

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

Arrastre y suelte un smbolo en el documento

actual.

Puede exportar smbolos y utilizarlos en

documentos de Fireworks, o importarlos de otros
documentos.

Pegue un smbolo en el documento actual.

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
modificarlo 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.

96

Captulo 5

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.

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, modifique 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 grfico. Puede utilizar las muestras de colores predeterminados para
ayudarle a mantener el aspecto de un grfico 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
grfico 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 grficos 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

Para abrir un men emergente de paleta de

colores:

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

Si desea elegir un nuevo color a medida que va

creando un grfico, utilice el panel Muestras. El
panel Muestras contiene muestras de color que se
pueden elegir mientras se dibuja.
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 aplicar un color a un objeto seleccionado:

1

Haga clic en cualquier paleta de colores del

atributo correspondiente para activarlo.

Elija un color:

Para abrir el panel Muestras:

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.

 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.

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

Muestras emergentes de paleta de colores

100

Captulo 6

el cuadro de texto de valor del men emergente

de paleta de colores de trazo o relleno.

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 clasificar 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.

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.

Mantenga presionada la tecla Alt (Windows) u

Opcin (Macintosh) y haga clic en el color que
desee aadir.

 En un Macintosh, haga clic en cualquier parte

de la pantalla.
El color se aplicar al objeto seleccionado.
Nota: Para restringir ese color a Websafe, mantenga
presionada la tecla Mays.

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.

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.

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.

El puntero adopta la forma de un cubo de

pintura.
3

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

Haga clic en la muestra para suprimirla del

panel Muestras.

Para elegir un grupo de muestras:

Para borrar todo el panel Muestras:

Elija Borrar muestras en el men emergente

Opciones del panel Muestras.
Para volver a las muestras de color
predeterminadas:

Elija la Paleta web 216 en el men emergente

Opciones del panel Muestras.
Para ordenar las muestras por color:

Elija Ordenar por colores en el men emergente

Opciones del panel Muestras.

102

Captulo 6

Elija un grupo de muestras en el men emergente

Opciones del panel Muestras.
Para elegir un grupo de muestras personalizado:
1

2
3

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.

Nota: Para obtener informacin sobre la creacin de

grupos de muestras personalizados, consulte
Almacenamiento de paletas en la pgina 164.

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 identifica 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

RVA

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.

Hexadecimal

-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.

MSB

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.

CMA

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.

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.

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.

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.

Para mostrar el selector de colores del sistema:

Nota: Cuando aparece la barra de color del modelo

Hexadecimal, los posibles colores se limitan a los de la
paleta web 216.

 Haga clic en el botn del selector de colores del

 Haga doble clic en una paleta de colores.

sistema en el men emergente de muestras de

la paleta de colores.

Para aplicar un color de la barra al objeto

seleccionado:
1

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 modificaciones 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 Especifique 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

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.

104

Captulo 6

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.

El puntero cambia a un cuentagotas.

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 grfico. Esto
puede hacer que el grfico 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.

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

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.

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 grfico para exportarlo varias
veces con fondos de distinto color, utilice el men
emergente Mate en el panel Optimizar. Esto es
muy til si el grfico 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:

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.

Eliminacin de halos de
grficos de web
Al visualizar un grfico suavizado con un lienzo
transparente en un navegador web, a veces aparece
un anillo o halo descoloreado de pxeles alrededor
de los bordes del grfico.
Al hacer que el color del lienzo sea transparente,
los pxeles del suavizado no se modifican.
Si coloca un grfico 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
grfico.

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 sofisticadas. 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 grficos.
La capacidad de editar el texto en cualquier momentoincluso despus de aplicar
efectos automticos como sombras o biselessignifica que pueden corregirse
fcilmente los errores ortogrficos, 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

Para escribir texto:

Introduzca, asigne formato y edite el texto de los

grficos utilizando la herramienta Texto y el
Editor de texto.

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:

Herramienta Texto

 Elija la opcin de aplicacin automtica en el

Editor de texto.

 Haga clic en Aplicar.

7

El Editor de texto

Haga clic en Aceptar.

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

Para volver a abrir el Editor de texto:

Todo el texto de un documento de Fireworks

aparece en un rectngulo con tiradores que se
denomina bloque 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
modificar 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

Para cambiar el tamao de un bloque de texto,

arrastre un tirador de cambio de tamao.

Editor de texto.
 Haga clic en Aplicar.
5

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.

Haga clic en Aceptar.

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

Anule la seleccin de Mostrar fuente en el Editor

de texto.

Al editar texto, sus atributos de trazo, relleno y

efecto tambin se actualizan segn los cambios.

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.

En el Editor, seleccione los caracteres que desee

cambiar.

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.

Para cambiar la fuente, elija otra en el men

emergente Fuentes.

Utilice el Editor de texto para establecer la lnea

de base y el interlineado.

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.

Para cambiar la fuente, su tamao y su estilo con

el Editor de texto:

Para establecer la lnea de base y el interlineado:

1

En el Editor, seleccione los caracteres que desee

cambiar.

Para cambiar la fuente, su tamao y su estilo con

el men Texto:

En el men emergente Interlineado, elija un

valor. 100% es el interlineado predeterminado.

Seleccione el bloque o los bloques de texto.

Puede cambiar los atributos de ms de un
bloque a la vez.

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, elija Texto > Fuente y

seleccinela en el submen.

Definicin del ajuste entre caracteres

Haga clic en Aceptar.

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.

112

Captulo 7

El ajuste entre caracteres aumenta o reduce la

separacin entre determinados pares de letras, con
el fin 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.

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.

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.

Para desactivar el ajuste automtico de

caracteres:

Anule la seleccin de Ajuste de caracteres

automtico.

Para establecer el ajuste entre caracteres:

1

Seleccione los caracteres en el Editor de texto:

Orientacin horizontal y vertical

 Para ajustar el espaciado entre dos caracteres,

haga clic entre ellos.

 Para el ajuste entre los caracteres, resalte los que

desea cambiar.
2

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 fluye
de derecha a izquierda o de izquierda a derecha.
De forma predeterminada, el texto fluye de
izquierda a derecha.

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 configuraciones se aplican slo a bloques de
texto completos.

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 fluye 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.

Para establecer la direccin utilizando el Editor de

texto:

Haga clic en el botn De izquierda a derecha o

De derecha a izquierda.

Utilice el men Texto o el Editor de texto para

establecer la alineacin. Puede definir la
alineacin de los distintos prrafos dentro de un
bloque de texto

Para establecer la alineacin con el Editor de

texto:
1

Seleccione texto dentro de un bloque de texto.

Haga clic en el botn de alineacin Izquierda,

Centrado, Derecha, Justificado 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 (justificacin
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

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.

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.

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 fluye 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:

Para editar la forma del trazado:

Seleccione un bloque de texto y un trazado.

Elija Texto > Separar del trazado.

Seleccione Texto > Unir al trazado.

Edite el trazado.

Tambin puede elegir Texto > Orientacin, y

despus una opcin de orientacin en el
submen:

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:

Texto girado alrededor de un trazado, vertical,

inclinado verticalmente e inclinado
horizontalmente
Para editar el texto unido a un trazado:

 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

Seleccione el objeto de texto en trazado.

En el Inspector de objetos, escriba un valor en

el cuadro de texto Desplazamiento del texto.

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

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.

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.

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

Elija un comando Archivo:

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.

 Elija Archivo > Abrir.

Abra la carpeta que contiene el archivo.

Para convertir el texto seleccionado en trazados:

Elija el archivo y haga clic en Aceptar.

 Elija Archivo > Importar.

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)

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.

 Alineacin (izquierda, derecha, centrada,

justificada)
 Interlineado
 Lnea de base

Tambin puede abrir o importar un archivo de

texto completo en Fireworks.

 Ajuste entre caracteres

Fireworks puede importar los siguientes formatos

de texto:

 Color del primer carcter

 RTF (Rich Text Format)

 Escala horizontal

Todos los dems datos RTF no se tienen en

cuenta.

 ASCII (slo texto)

Uso de texto

117

Para importar texto RTF:

1

Elija un comando Archivo:

Para seleccionar una fuente de sustitucin:

1

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.

 Elija Archivo > Abrir.

 Elija Archivo > Importar.
2

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.

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.
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.

118

Captulo 7

Haga clic en No modificar.

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 filtros, duplicacin
de elementos de la imagen con la herramienta Sello y fundido de los bordes de la
imagen. Incluso puede aplicar filtros 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 ocultar temporalmente el borde listado:

Para convertir los objetos seleccionados en una

imagen de mapa de bits:

Para evitar que el borde listado aparezca

alrededor de todo el documento:

Seleccione Modificar > Combinar imgenes.

Elija Archivo > Preferencias, haga clic en la ficha

Edicin y desactive Expandir para rellenar el
documento.

Para crear un objeto de imagen nuevo al dibujar y

pintar:
1

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.

Seleccione Ver > Ocultar bordes. Al salir del

modo de edicin de imgenes, la opcin Ocultar
bordes se desactiva.

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 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

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:

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).

Cursor de parada y botn Detener

 Haga doble clic en la imagen con la

herramienta Puntero.
 Seleccione el objeto de imagen y elija

Modificar > 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.

 Elija Modificar > 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.

Edicin y pintura de pxeles

121

Seleccin de pxeles

Para seleccionar un rea rectangular de pxeles:

Al realizar una seleccin en el modo de edicin de

imgenes, se seleccionan pxeles.

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.

Mediante el desplazamiento de los pxeles

seleccionados se crea una seleccin flotante 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 elptica de pxeles:

Herramientas Recuadro

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 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:

 Dibuje otro recuadro o haga clic fuera de la

seleccin actual con la herramienta Recuadro o

Lazo.

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.

 Elija Editar > Anular seleccin.

Para seleccionar un rea de pxeles de estilo libre:

 Salga del modo de edicin de imgenes.

122

Captulo 8

Elija la herramienta Lazo.

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 poligonal de pxeles:

1

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 definir el contorno de la

seleccin.

Cierre el polgono:

Para seleccionar un rea de pxeles de colores

similares:
1

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 afines.

 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 definido en el panel
Opciones de la herramienta Varita mgica
determina el rango de colores similares que se
selecciona.

Eleccin de opciones de herramientas

Despus de elegir una herramienta Recuadro,
Lazo o Varita mgica, las opciones especficas 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 definido.
 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 fija limita la altura y la anchura a los

valores definidos.
 Tamao fijo limita la altura y la anchura

conforme a las dimensiones establecidas.

124

Captulo 8

Ajuste de una seleccin con

recuadro
Despus de seleccionar los pxeles con la
herramienta Recuadro o Lazo, puede editar el
recuadro. Las teclas de modificacin 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 especificado,
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 modificacin,
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:

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.

Para seleccionar los pxeles situados en la

interseccin de los bordes de dos recuadros:
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.

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

Despus de dibujar el recuadro, elija

Editar > Modificar 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 > Modificar 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

Para seleccionar un rea situada alrededor de un

recuadro existente:

Es posible crear un recuadro adicional que incluya

el recuadro existente y que tenga una anchura
especfica. Esto permite crear efectos grficos
especiales, como el fundido de los bordes de una
seleccin de pxeles.

Despus de dibujar un recuadro, elija

Editar > Modificar 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 > Modificar recuadro > Suavizar.

Se abre el cuadro de dilogo Seleccin suave.

Despus de enmarcarlo en un recuadro adicional

126

Captulo 8

Introduzca un radio de muestra para especificar

el grado de suavizado que se quiere aplicar y
haga clic en Aceptar.

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

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.

Edicin de pxeles con la herramienta

Lpiz o Pincel
Es posible cambiar los pxeles de forma secuencial
o varios pxeles simultneamente. Tambin puede
eliminarlos.

Herramienta Cubo de pintura

Para aplicar el color de relleno a los pxeles
seleccionados:

Herramientas Lpiz y Pincel

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.

Para editar un pxel cada vez:

1

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 editar varios pxeles a la vez:

1

Seleccione un rea de pxeles.

Elija un color de la paleta de colores de relleno.

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.

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.

Cursores con forma de sello

Para clonar partes de una imagen de mapa de
bits:

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.

Haga clic en la herramienta Sello.

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.

En el panel Opciones de herramientas, elija

una opcin Origen:

Fundido de los bordes de la imagen

 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.

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

Recorte de una imagen

Utilice la herramienta Borrador para eliminar

pxeles, o para pintar los pxeles con un color
diferente.

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

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.

Herramienta Recortar
Para recortar una imagen:
1

Aparecen los tiradores de recorte.

2

 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.

Elija Editar > Recortar la imagen seleccionada.

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 flecha.

 Color del lienzo permite seleccionar el color

del lienzo del documento.

3

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.

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 modifican 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

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.

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

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

flotante de pxeles.
 Un modo de mezcla afecta a los pinceles y

rellenos de los pxeles que se dibujen

posteriormente, si no existe una seleccin
flotante.
Para obtener ms informacin sobre los modos de
mezcla, consulte Descripcin de los modos de
mezcla en la pgina 148.

Uso de filtros y filtros de

conexin
Los filtros del men Xtras sirven para mejorar y
perfeccionar las imgenes. Fireworks incluye
varios filtros 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 filtros permiten desenfocar o
perfilar 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 filtros, ya que puede aadir los
filtros de conexin de Photoshop al men Xtras.
Los filtros del men Xtras se utilizan
principalmente en imgenes de mapa de bits,
como en fotografas. Sin embargo, tambin puede
aplicar estos filtros a objetos de trazado. Al aplicar
un filtro del men Xtra a un objeto de trazado,
ste convierte en una imagen.

El efecto de los filtros y filtros de conexin aplicados

mediante el men Xtras slo puede anularse si el
comando Deshacer est disponible. Utilice el men
Xtras para aplicar filtros si est seguro de que no
desea editar o anular la accin de los filtros. Por
ejemplo, si ajusta el brillo y el contraste para mejorar
una imagen, es poco probable que necesite editar o
eliminar la accin del filtro.
Uso de filtros y filtros de conexin
como Efectos automticos
En Fireworks 3, puede aplicar los filtros
incorporados del men Xtras y los filtros 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 filtros y los filtros de conexin de
Photoshop como efectos automticos, consulte
Utilizacin de filtros 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 filtro Brillo/Contraste permite modificar 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 filtro 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 configuracin. 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.

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.

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 filtro Niveles define 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
definidos en todos sus pxeles.

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 grficamente 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.

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.

Pxeles ms oscuros
Medios tonos
Pxeles con ms brillo

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

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.

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.

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 filtro Niveles automticos se pueden
definir automticamente los pxeles ms claros y
ms oscuros de una imagen. Este filtro es
exactamente igual que el filtro 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 la imagen en el modo de objetos o

en el modo de edicin de imgenes.

Seleccione Xtras > Ajustar color > Niveles

automticos.

Seleccione Xtras > Ajustar color > Curvas. Se

abre el cuadro de dilogo Curvas.

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.

Elija Presentacin preliminar para ver los

cambios efectuados en el rea de trabajo. La
imagen se actualiza automticamente
conforme se realizan cambios.
4 En el men emergente Canal, determine si
desea aplicar los cambios a colores separados o
a todos los canales de color.
5 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.
3

Para ajustar un punto especfico del rango tonal:

1

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:

Arrastre el punto fuera de la cuadrcula.

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

Ajuste del rango tonal con los cuentagotas

 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.

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).

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.

Original

Para ajustar el rango tonal mediante un

cuentagotas:
1

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 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.

Seleccione una imagen en el modo de objetos o

en el modo de edicin de imgenes.

Seleccione una opcin de desenfoque:

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.

 Xtras > Desenfocar > Desenfocar ms

 Xtras > Desenfocar > Desenfocar

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.

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.

Antes de utilizar el desenfoque gaussiano

Despus de utilizar el desenfoque gaussiano

136

Captulo 8

Uso del filtro Convertir en alfa

El filtro 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 identificar
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 confiere la
apariencia de un esbozo a la imagen.

Original

Original

Despus de la conversin en alfa

Para convertir un objeto en un alfa:
1

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

Seleccione un objeto o una imagen.

Seleccione Xtras > Otro > Buscar bordes.

Edicin y pintura de pxeles

137

Perfilado de una imagen

Para perfilar una imagen:

El filtro Perfilar permite corregir imgenes que

estn borrosas. El comando Perfilar incluye tres
opciones: Perfilar, Perfilar ms y Desperfilar
mscara.

Perfilar permite ajustar el foco de una imagen

borrosa mediante el incremento del contraste de
los pxeles adyacentes. Perfilar ms permite
aumentar el contraste de los pxeles adyacentes
casi tres veces ms que Perfilar. Desperfilar
mscara permite perfilar 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 perfilar una imagen.

Seleccione la imagen en el modo de objetos o

en el modo de edicin de imgenes.
2 Elija una opcin de perfilado:
 Xtras > Perfilar > Perfilar
 Xtras > Perfilar > Perfilar ms
Nota: Si perfila demasiado la imagen, puede
estropearla.
Para perfilar una imagen mediante la funcin
Desperfilar mscara:
1
2

3
4

Original

Despus de perfilar
7

138

Captulo 8

Seleccione la imagen en el modo de objetos o

en el modo de edicin de imgenes.
Seleccione Xtras > Perfilar > Desperfilar
mscara. Se abre el cuadro de dilogo
Desperfilar mscara.

Elija Presentacin preliminar para ver cmo

afectan los cambios a la imagen.
Arrastre el deslizador Cantidad de perfilado
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 perfilan 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 perfilan todos los
pxeles de la imagen.
Haga clic en Aceptar.

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 grficos 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 suficiente, en
Fireworks 3 puede utilizar filtros Xtras, por ejemplo, Desenfoque gaussiano y
Perfilar, como Efectos automticos. Una gran cantidad de filtros de conexin de
Photoshop tienen ahora la flexibilidad de los Efectos automticos.

139

Aplicacin de un efecto
automtico

Edicin de Efectos
automticos

Utilice el panel Efecto para aplicar Efectos

automticos. Al aplicar un efecto, aparece en el
panel Efecto.

Utilice el botn Informacin que aparece junto a

un efecto del panel Efecto para editar el efecto
aplicado a un objeto.

Es posible aplicar varios efectos a un objeto Cada

vez que aada un efecto al objeto, aparecer al
final 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.

Botn Informacin
Para editar un Efecto automtico:
1

Seleccionar una
categora de
efecto.

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 modificarse, el botn
Informacin aparecer atenuado. Por ejemplo, no
puede editar Niveles automticos.

Ver lista de
efectos.

Panel Efecto
Para aplicar un Efecto automtico a un objeto
seleccionado:
1

El efecto se aade al panel Efecto.

Ajuste los valores del efecto.

Segn el efecto elegido, aparecer una ventana

de edicin o cuadro de dilogo que permite
personalizar la configuracin del efecto.

Al finalizar, 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.

La ventana emergente de edicin de Sombra

En el panel Efecto, elija un efecto en el men

emergente.

Repita los pasos 1 y 2 para aplicar ms de un

efecto automtico.

140

Captulo 9

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.

Normalmente, los efectos que modifican el

interior de un objeto, como el efecto Bisel
interior, deben aplicarse antes que los efectos que
modifican 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:

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.

Creacin de efectos
personalizados
Utilice el men emergente Opciones del panel
Efecto para guardar la configuracin 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 configuracin 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

Seleccione Guardar efecto como en el men

emergente Opciones del panel Efecto.

Para quitar un efecto aplicado a un objeto

seleccionado:
1
2

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.

Para quitar todos los efectos aplicados a un

objeto seleccionado

En el panel Efecto, elija Ninguno en el men

emergente Efecto.

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 cambiar el nombre de una configuracin de

efecto personalizado:
1

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.

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.

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:

Deseleccione la casilla que aparece junto al efecto

en el panel Efecto. El efecto desaparecer del
objeto.
Para reactivar un efecto desactivado:

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.

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.

Para guardar una configuracin de efecto como

predeterminada:
1

Seleccione el objeto que contiene la

configuracin 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
configuracin del efecto puede modificarse en
cualquier momento.
Al elegir los efectos Bisel, Relieve, Sombra o
Iluminado, aparece una ventana emergente de
edicin en el panel Efecto para configurar 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

Ventana emergente de edicin Bisel interior

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.

2

Edite la configuracin en la ventana emergente

de edicin.
Al finalizar, 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.

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:

Para aplicar una sombra o una sombra interior:

Abra el men emergente de la parte superior

del panel Efecto para ver una lista de los efectos
disponibles.

Abra el men emergente de la parte superior

del panel Efecto para ver una lista de los efectos
disponibles.

Elija un efecto Relieve:

Elija una opcin de sombra:

 Bisel y Relieve > Relieve hundido

 Sombrear e iluminar > Sombra

 Bisel y Relieve > Relieve elevado

 Sombrear e iluminar > Sombra interior

Aparece la ventana emergente de edicin.

Aparece la ventana emergente de edicin.

Edite la configuracin en la ventana emergente

de edicin.

Edite la configuracin en la ventana emergente

de edicin.

Al finalizar, haga clic fuera de la ventana de

edicin o pulse Intro para cerrarla.

 Arrastre el deslizador de distancia para definir

la distancia de la sombra respecto al objeto.

 Arrastre el deslizador Opacidad para definir el

grado de transparencia en la sombra.

Aplicacin de sombras e iluminados

Fireworks facilita la aplicacin de sombras,
sombras interiores e iluminados a objetos. Puede
especificar el ngulo de la sombra para simular el
ngulo de la luz brillando sobre el objeto.

 Seleccione Slo sombra para ocultar el objeto y

mostrar slo la sombra.

4

Al finalizar, haga clic fuera de la ventana de

edicin o pulse Intro para cerrarla.

Para aplicar una iluminacin:

1

Abra el men emergente de la parte superior

del panel Efecto para ver una lista de los efectos
disponibles.

Elija Sombrear e iluminar > Iluminado.

Efectos Sombra y Sombra interior

Aparece la ventana emergente de edicin.

3

Efecto Iluminado

Edite la configuracin 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 definir el

grado de transparencia del iluminado.

4

144

Captulo 9

Al finalizar, haga clic fuera de la ventana de

edicin o pulse Intro para cerrarla.

Utilizacin de filtros de
conexin de Photoshop
como efectos automticos
Al instalar un filtro de conexin de Photoshop en
Fireworks, se aade al men Xtras y al panel
Efecto. Utilice el men Xtras para aplicar filtros
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 filtros de
conexin de Photoshop como efectos
automticos. Algunos de filtros de conexin de
Photoshop no pueden utilizarse como efectos
automticos.
Nota: Al compartir un archivo de Fireworks en el que
se ha aplicado un filtro de conexin de Photoshop como
efecto automtico, el receptor del archivo debe tener
instalado el filtro 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

En el men emergente Opciones del panel

Efecto, seleccione Localizar filtros de conexin.
Aparece el cuadro de dilogo Seleccione la
carpeta de filtros de conexin de Photoshop.

Abra la carpeta en que se encuentran los filtros

de conexin de Photoshop y haga clic en
Aceptar.

Debe reiniciar Fireworks para cargar los filtros

de conexin.

Para aplicar un filtro de conexin de Photoshop a

un objeto seleccionado como un efecto
automtico:

Elija el filtro 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 filtros
del men Xtras como efectos automticos
mediante el panel Efecto. De esta forma podr
editar o quitar el filtro de un objeto en cualquier
momento. Tambin puede editar objetos a los que
aplic los filtros.
Utilice el men Xtras para aplicar filtros slo
cuando seguro de que no va necesitar quitar o
editar el filtro. Para obtener informacin sobre la
utilizacin del men Xtras para aplicar filtros
Xtras, consulte Uso de filtros y filtros de
conexin en la pgina 130.
Nota: Si se aplica un filtro Xtra mediante el men
Xtras, el filtro es editable slo en el caso de que
Deshacer est disponible. Despus de guardar o de
volver a abrir la imagen, el filtro ya no se puede quitar.

Nota: Si mueve los filtros de conexin a otra carpeta,

debe repetir los pasos anteriores o seleccionar
Archivo > Preferencias y hacer clic en la ficha Carpetas
para cambiar la ruta de acceso a los filtros 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 infinitas.

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.

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.

Descripcin de los modos de mezcla

Seleccionar un
modo 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 difieran 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

Ajustar la
opacidad.

Definicin 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.

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.

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:

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.

Ejemplos de modos de mezcla

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.

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.

 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 flotante de

pxeles.
 En el modo de edicin de imgenes sin una

seleccin flotante, 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.

Enmascaramiento de
imgenes

Imagen y trazado de recorte

Mscara de trazado

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
definir una transparencia de degradado para un
objeto situado en un nivel inferior.

150

Captulo 10

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:

 Seleccione Modificar > 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.

Edicin de grupos de mscara

Fireworks permite editar un grupo de mscara de
cualquier momento. Es posible modificar 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.

Para centrar objetos de mscaras dentro del

objeto superior de mscara:

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 Modificar > Grupo de

mscara > Enmascarar imagen.

Grupo de mscara original

El objeto superior se convierte en un objeto

alfa cuyos valores de escala de grises se
emplearn para enmascarar los objetos
inferiores.
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 Modificar > 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 Modificar > 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 Modificar > Grupo de

mscara > Enmascarar imagen.

 Seleccione Modificar > 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 final del diseo de grficos 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:
 Eleccin del mejor formato de archivo. 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 grficos puede
reducir en gran medida el tamao de archivo.
 Definicin de las opciones especficas del formato. 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.
 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 significa 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

Para especificar el ajuste de optimizacin para

una imagen:
1

Los controles de Fireworks para la optimizacin se

encuentran en diferentes paneles del rea de
trabajo:

Para obtener informacin adicional, consulte

Seleccin del formato de archivo ms
adecuado en la pgina 157.

 El panel Optimizar contiene los controles clave

para optimizar las imgenes en Fireworks.

 El panel Tabla de color muestra los colores de

 La ventana Presentacin preliminar presenta

una vista previa del aspecto final del grfico.

Es posible elegir diferentes ajustes de

optimizacin para definir rpidamente un
formato de archivo y aplicar ajustes especficos de
un formato. Es posible modificar 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 Configuracin

del panel Optimizar.

154

Captulo 11

Defina las opciones especficas 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.

la paleta de colores actual.

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.

En el panel Optimizar, seleccione un formato

de archivo.

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 especificar un ajuste de optimizacin
diferente para cada divisin de un documento.
Por ejemplo, es posible que desee hacerlo cuando
una parte de su grfico contiene una imagen
fotogrfica 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 especificar 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.

Para definir los ajustes de optimizacin para una

divisin:
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.

Para guardar ajustes de optimizacin como un

preestablecido:
1

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 Configuracin 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

El archivo de preestablecidos se guarda en la

carpeta Fireworks 3\Settings\Export Settings.

Introduzca el ajuste de optimizacin del panel

Optimizar.

Para compartir los ajustes de optimizacin con

otro usuario de Fireworks:

La divisin seleccionada est lista para

exportarse con los ajustes de optimizacin
especificados.

Copie el archivo de preestablecidos de

optimizacin de la carpeta
Fireworks 3\Settings\Export Settings a la misma
carpeta del otro sistema.

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

Para eliminar un preestablecido de optimizacin

personalizado:
1

En el cuadro Configuracin 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.

 La demora de fotogramas elegida en el panel

fotogramas

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:

Haga clic en la ficha 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:

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 grfico bajo
diferentes ajustes de optimizacin, puede dividir
la ventana de documento en dos o cuatro
presentaciones preliminares utilizando las fichas
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 grfico 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 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.

156

Captulo 11

Ventana Presentacin preliminar

Para comparar dos ajustes diferentes de

optimizacin:
1

2
3
4

Haga clic en la ficha 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
especifique otros ajustes de optimizacin para
comparar con la primera.

Para comparar cuatro ajustes diferentes de

optimizacin:

Haga clic en la ficha 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 especifique 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
Configuracin.

Seleccin del formato de

archivo ms adecuado
GIF, JPEG y PNG son formatos de archivo
grfico 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 grfico
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 grfico.
Eleccin del formato GIF
Graphics Interchange Format, o GIF, es el
formato de grfico 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
filas 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
grficos animados, logotipos, grficos con reas
transparentes o animaciones.
Nota: El tramado o sombreado de archivos GIF
produce archivos de mayor tamao.

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 Configuracin

Optimizacin de grficos

157

Eleccin del formato JPEG

JPEG es un formato alternativo al formato GIF lo
desarroll el Joint Photographic Experts Group
especficamente para imgenes fotogrficas.
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 final.
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

La compresin PNG es sin prdida de datos,

incluso con profundidades altas de color.
Comprime filas y columnas de pxeles, ofreciendo
una compresin mejor que GIF, que slo explora
filas.
El formato PNG es adecuado para la creacin de
complejas transparencias activas, grficos con
colores de alta densidad y grficos 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).

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 grfico web ms verstil. Sin embargo, no
todos los exploradores web pueden beneficiarse
completamente de las ventajas del formato PNG
sin recurrir a filtros 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.

158

Captulo 11

Eleccin de la profundidad de color

La profundidad de color es el nmero de colores
de un grfico 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 grficos web. Utilice PNG con
profundidades de color de 24 o 32 bits cuando
desee exportar imgenes fotogrficas con tonos
continuos o mezclas degradadas complejas de
colores.

Eleccin de una paleta de colores

Definicin de reas transparentes

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 definidos
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.

Es posible definir 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 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 fotogrficas
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:

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.

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.

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.

Normalmente, un ajuste de prdida entre 5 y 15

genera los mejores resultados.

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
Defina 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.

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

Perfilado de bordes de color y aumento

del detalle
Elija Perfilar bordes JPEG en el men emergente
Opciones del panel Optimizar para preservar los
bordes finos entre dos colores. Utilice esta opcin
cuando desee exportar archivos JPEG que
contengan texto o gran detalle para preservar el
perfil de dichos elementos.
La opcin Perfilar 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.

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
y Sistema (Macintosh)
contienen cada una los 256 colores definidos por
los estndares de las plataformas Windows o
Macintosh.

Sistema (Windows)
Nota: Algunas aplicaciones antiguas de edicin de
imgenes no pueden abrir archivos JPEG progresivos.

160

Captulo 11

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 modifica o
carga desde una paleta externa o desde un archivo
GIF.

Escala de grises

Para importar una paleta:

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.
2 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.
1

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.

Si define 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 modificar la
paleta de una imagen. Las muestras de color
pueden presentar diversos smbolos que indican
determinadas caractersticas de los colores.

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 modifica 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:

Seleccione Reconstruir tabla de color en el men

emergente Opciones del panel Tabla de color.
Para seleccionar un color:

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:

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

Haga clic en un color.

Mantenga presionada la tecla Mays y haga

clic en un segundo color.

Para ver todos los pxeles del documento que

contienen un determinado color:
1

Haga clic en la ficha 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 desbloquear un color:

1

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.

Para desbloquear todos los colores:

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.

Para editar un color:

1

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.

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 definida en 256
colores.
Fireworks aplica y utiliza los colores Websafe de
diferentes mtodos.

 Haga doble clic en un color del panel Tabla de

color.
 Seleccione un color y elija Editar en el men

Para forzar todos los colores a colores Websafe:

Elija la paleta Web 216.

emergente Opciones.
2

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.

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 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.

Para crear una paleta adaptable que prefiera

colores Websafe:

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

Seleccione un color en el panel Tabla de color.

Cambie el color:

 Haga clic en el botn Adaptar a Web Safe.

 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.

 Seleccione Eliminar edicin en el men

emergente Opciones del panel Tabla de color.

El color vuelve a su estado original, sin
ediciones.

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 grficos en Fireworks, es posible optimizarlos y exportarlos a los

formatos ms comunes de la Web y a los formatos de las aplicaciones de grficos
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 grficos Web,
utilice el Asistente de exportacin. Este asistente le gua en todo el proceso de
exportacin y le sugiere diferentes ajustes.
Puede exportar grficos a otras aplicaciones de grficos 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 grfico 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 especificar

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:
 Genera un archivo HTML que contiene el
Para exportar una imagen:

Seleccione Archivo > Exportar.

2 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.
3 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.
4 Seleccione las opciones de divisin. Consulte
Exportacin de objetos con divisiones en la
pgina 170.
5 Elija un estilo HTML que se corresponda con
el editor HTML.
6 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.
1

166

Captulo 12

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 define el color
de fondo de la pgina Web al color del lienzo o
el color mate del grfico.
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.

Exportacin con el
Asistente de exportacin

Utilice el Asistente de exportacin para recorrer el

proceso de exportacin paso a paso. En l puede
especificar 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 prefiere optimizar hasta un tamao mximo de

archivo, el Asistente de exportacin optimiza el
archivo exportado para ajustarlo dentro de la
restriccin de tamao definida en la opcin
Tamao de archivo de exportacin objetivo.

Optimizacin y
presentacin preliminar
durante la exportacin

Para exportar un grfico con el Asistente de

exportacin:

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 definir valores de
optimizacin personalizados durante un proceso
por lotes o al ejecutar Fireworks desde
Dreamweaver para optimizar o editar una imagen
colocada en Dreamweaver.

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.

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).

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.

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

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).

Presentacin preliminar de la
optimizacin en Presentacin
preliminar de la exportacin
El rea de presentacin preliminar muestra el
grfico 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

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 configuraciones.

168

Captulo 12

Para ver la presentacin preliminar en el cuadro

de dilogo Presentacin preliminar de la
exportacin

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.

Cada ventana de presentacin preliminar

puede mostrar una vista preliminar del grfico
exportado segn determinados valores de
exportacin.
Para optimizar un grfico basado en el tamao
mximo de archivo, haga clic en el botn
Exportar a tamao para abrir el asistente
Optimizar tamao. Especifique el tamao de
archivo.

El asistente Optimizar tamao intenta obtener

un archivo con el tamao solicitado mediante
los mtodos siguientes:
 Ajustando la calidad JPEG
 Modificando el suavizado JPEG

 Alterando el nmero de colores en imgenes de

8 bits
 Cambiando la configuracin 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
especificados en el panel Optimizar. El nombre de
la capa del panel Capas determina el nombre de
archivo de cada archivo exportado.

Exportacin de fotogramas o
capas como varios archivos

Exportacin de una rea

Fireworks puede exportar todas las capas o todos

los fotogramas de un documento como archivos
de imgenes independientes utilizando un solo
comando de exportacin.

Utilice la herramienta Exportar rea para exportar

una parte de un grfico de Fireworks.

Para exportar fotogramas como archivos

independientes:

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
especificados en el panel Optimizar.

Herramienta Exportar rea

Para exportar capas como archivos independientes:

1
2
3

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.

Para exportar una parte de un documento:

1
2

Seleccione la herramienta Exportar rea de la

Caja de herramientas.
Arrastre un recuadro que defina 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 flecha para mover el
recuadro. Mantenga presionada la tecla Mays
mientras utiliza las teclas de flecha 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 definida mediante el recuadro
de seleccin del rea a exportar.
5 Ajuste las configuraciones 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.

Exportacin de objetos con

divisiones
Los diseadores Web a veces crean un grfico 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.

 Divisiones: Fotograma actual exporta divisiones

definidas por los objetos de divisin, pero solo

imgenes a partir del fotograma actual.
 La opcin Dividir siguiendo las guas exporta

divisiones definidas por las guas existentes.

5

Cada divisin se exporta con los ajustes de

optimizacin individuales definidos 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.

Para exportar objetos con divisiones:

1

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 definidas en los objetos de divisin.

170

Captulo 12

En el cuadro de dilogo Exportar, elija un

destino y las opciones HTML, por ltimo,
haga clic en Guardar (Windows) o Exportar
(Macintosh).

Es posible especificar 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

Seleccione Archivo > Propiedades HTML, o

haga clic en el botn Opciones del cuadro de
dilogo Exportar.




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
fija.
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.

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 grficos 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

 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 grficos
impresos o para editarlos con herramientas de
edicin de trazado ms complejas.
Para exportar un grfico para FreeHand o
Illustrator:
1

Seleccione Archivo > Exportacin

especial > Illustrator 7.

Haga clic en el botn Configurar.

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.
4

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 finalizar la

exportacin.

 Opacidad y modos de mezcla

Exportacin

171

Exportacin a Macromedia Flash

Para exportar un grfico a Flash:

Puede exportar trazados de Fireworks a

Macromedia Flash para utilizarlos como grficos y
animaciones de Flash en su sitio Web.

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:

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.

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:

 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.

 Efectos automticos
 Opacidad y modos de mezcla (los objetos con

opacidad se convierten en smbolos con un

canal alfa).
 Grupos de mscara

Seleccione Objetos: Mantener trazados y

Texto: Mantener editabilidad para mantener la
editabilidad de los trazados.

Haga clic en Aceptar para finalizar la

exportacin.

 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.

172

Captulo 12

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

Seleccione Editar > Copiar como trazados.

Cambie a otro documento abierto de otra

aplicacin.

Pegue los trazados en la otra aplicacin.

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 grfico o grupo de
grficos 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
definen 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 grfico 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 grfico origen es la base sobre la que se crea el
mapa de imagen. El grfico origen puede ser una
imagen con reas bien definidas, una fila de
botones con sus etiquetas o una simple lista de
temas. Tambin puede tratarse de un grfico
complejo que incluya todos estos elementos, y
muchos ms.
El grfico origen puede crearse en Fireworks o
importarse. De cualquier manera, siempre debe
elegirse un grfico compuesto por elementos que
todo el mundo pueda reconocer para las zonas
interactivas.
Para establecer un grfico origen para un mapa
de imagen:
1

Cree o importe un grfico.

Elija Modificar > Tamao del lienzo e

introduzca las dimensiones del mapa de
imagen.

Seleccione Archivo > Guardar como para

asignar nombre al documento origen de
Fireworks.

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 grfico exportado y
los archivos HTML.

Creacin de zonas
interactivas
Despus de identificar las reas del grfico 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.

174

Captulo 13

Para volver a dibujar una zona interactiva

rectangular o circular:
1

Abra el grfico 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
grfico origen. Mantenga presionada la tecla
Alt (Windows) u Opcin (Macintosh) para
dibujar rectngulos o crculos a partir de un
punto central.

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

Elija la herramienta Zona interactiva poligonal.

Haga clic en la herramienta para trazar los

puntos, igual que si estuviese dibujando
segmentos rectos con la herramienta Pluma. El
relleno permite definir el rea de la zona
interactiva, sin importar si el trazado est
abierto o cerrado.

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.

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.

Para mostrar u ocultar la capa Web:

 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.

Asignacin de valores URL a

zonas interactivas
Un valor URL (Universal Resource Locator) es
una direccin Internet de una pgina o un archivo
especficos. Para asignar valores URL a cada zona
interactiva, utilice el inspector Objeto.

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

Seleccione uno o varios objetos de zona

interactiva o de divisin.

Para asignar un valor URL a una zona interactiva:

1

Seleccione una zona interactiva en la capa Web.

Elija Ventana > Objeto para abrir el inspector

Objeto.

Elija Ventana > Objeto para abrir el inspector

Objeto.

Elija un color en el men emergente de la

paleta de colores.

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.

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.

 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.

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 grfico.
Las bibliotecas URL pueden gestionarse mediante
los comandos del men emergente Opciones del
panel URL:

Para asignar una direccin URL de la biblioteca

URL a una zona interactiva seleccionada:

 Aadir permite agregar valores URL existentes

en un documento a la biblioteca, o eliminarlos

de sta.

Elija una biblioteca en el men emergente

Biblioteca.

En el panel URL, haga clic en una direccin

URL de la lista.

 Aadir URL permite agregar valores URL a las

bibliotecas, o eliminarlos de stas.

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/fireworks
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:
 file.htm establece un vnculo con un archivo

ubicado en la misma carpeta que el documento

origen.
 ../../file.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/file.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 grfico
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 especificar 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 especificar 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

Para inclinar una zona interactiva seleccionada:

Al igual que los objetos grficos, 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 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.

Para editar una zona interactiva seleccionada

utilizando puntos:
1

Elija la herramienta Puntero o Seleccionar en

nivel inferior.

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

Seleccione la herramienta Transformar.

Arrastre los tiradores de transformacin.

178

Captulo 13

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.

Despus de crear todas las zonas interactivas,

utilice el cuadro de dilogo Propiedades HTML
para configurar 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 grfico 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

grfico, 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.

Especifique 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 definido
mediante objetos de zona interactiva.

Introduzca una descripcin de imagen

alternativa, que aparece cuando la imagen est
desactivada o no est disponible.

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.

Al exportar un mapa de imagen dividida, suelen

generarse varios archivos grficos. 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 grfico con el fin de exportarlo,

debe optimizarlo.
Para obtener ms informacin sobre la
optimizacin de grficos 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 grfico y asigne un nombre al archivo.
Si ya ha creado una estructura de archivos local
para la sede Web, puede guardar el grfico en la
carpeta correcta de esta sede. Por el momento,
no utilice la opcin Divisiones.

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 final 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 grficos 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 grfico 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 grficos 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 especificar 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 grfico 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
finalidad, 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:

Seleccione un objeto.
2 Elija Insertar > Divisin. La divisin es un
rectngulo cuya rea incluye los pxeles ms
externos del objeto seleccionado.
3 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.

Para dibujar un objeto de divisin poligonal:

1

Elija la herramienta Divisin poligonal.

Nota: Puede arrastrar y colocar objetos de divisin en

otros documentos de Fireworks.

Dibujo de divisiones poligonales

La herramienta Divisin poligonal ayuda a evitar
que las divisiones se superpongan al crear un
rollover con elementos grficos 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
define 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

Haga clic para colocar los puntos de las

esquinas del polgono. La herramienta
Divisin poligonal dibuja slo segmentos en
lnea recta.
3 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
grfico de la divisin.
4 Como alternativa, haga clic en el primer punto
para cerrar el polgono.
2

Para realizar una divisin poligonal en funcin de

un objeto seleccionado:
1

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 perfilar cuando se aaden, desplazan
o modifican 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:

 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 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
identificar 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.

Cuando se prepara para optimizar una divisin

seleccionada, las partes que no se editan se muestran
atenuadas.

Para cambiar el color de las guas de divisin:

1

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:

Para establecer las propiedades de objeto de una

imagen dividida simple:
1

Abra el Inspector de objetos.

Elija Imagen en el men emergente Tipo.

Haga clic en la lengeta de la ficha

Presentacin preliminar, 2-arriba o 4-arriba.

Elija Sin URL (no HREF) en el men

emergente Vnculo.

Haga clic en el rea que desee optimizar.

Omita los cuadros de texto Alt y Destino.

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.

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.

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).

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.

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.

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:

En el Inspector de objetos, especifique 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.

Denominacin automtica de divisiones

Si no desea introducir un nombre especfico 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

NombreBase_Fila#_Col#

Miarchivo_r01_c01
Miarchivo_r01_c02
Miarchivo_r02_c01

NombreBase_Nmero

Miarchivo_01
Miarchivo_02
Miarchivo_03

NombreBase_Alfabtico

Miarchivo_a
Miarchivo_b
Miarchivo_c

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.

#Fila_#Columna_NombreBase r01_c01_Miarchivo
r01_c02_Miarchivo
r02_c01_Miarchivo

Fireworks asigna un nombre a cada archivo de

divisin al exportarlo. Puede aceptar los criterios
de denominacin predeterminados, o especificar
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 especfico para cada divisin en el
cuadro de texto Nombre de la divisin.

186

Captulo 14

Numro_NombreBase

01_Miarchivo
02_Miarchivo
03_Miarchivo

Alfabtico_NombreBase

a_Miarchivo
b_Miarchivo
c_Miarchivo

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

y Columna (c##) designan los nmeros

de fila 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.

Fila (r##)

Para asignar un nombre automtico a los archivos

de divisin:
1

Seleccione una o ms divisiones.

En el Inspector de objetos, elija Denominacin

automtica de divisiones.

Cuando exporte la imagen dividida,

especifique 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.

Para cambiar los criterios predeterminados de

denominacin automtica:
1

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 configuracin
predeterminada de los documentos nuevos de
Fireworks, haga clic en Fijar predeterminados.

Denominacin personalizada de
archivos de divisin
Puede ser conveniente utilizar unos nombres
determinados en las divisiones, para identificarlos
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

En el Inspector de objetos, anule la seleccin

de Denominacin automtica de divisiones.

Introduzca un nombre en el cuadro de texto

del nombre de divisin. Si no especifica 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.

Si una divisin tiene ms de un fotograma,

Fireworks aade un nmero a cada archivo de
fotograma. Por ejemplo, si especifica el nombre
personalizado de archivo de divisin principal
para un rollover con tres estados, Fireworks asigna
el nombre principal.gif al grfico del estado
Arriba, principall_f2.gif al grfico del estado
Sobre y principal_f3.gif al grfico 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
definida por la divisin.

Mezcla de formatos de
archivo en una imagen
dividida
Algunos elementos grficos 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 grficos.
Para crear una 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
Definicin de los ajustes de optimizacin para
divisiones en la pgina 154.

Dibuje un objeto de divisin.

En el Inspector de objetos, elija Texto en el

men emergente Tipo.

Especifique 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.
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.

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.

 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.

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.

 Los botones estn encapsulados. Al desplazar el

Cada botn puede tener cuatro estados o aspectos

diferentes. Cada estado representa el aspecto de
un botn en respuesta a una accin del puntero.

 Un botn puede editarse de forma sencilla.

 El estado Arriba es el estado predeterminado o

 Los botones seleccionados tienen un prctico

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.

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

botn por el documento, tambin se mueven

todos los componentes y estados asociados a l.
Es el fin de la complicada edicin en varios
fotogramas.
Haga doble clic en l y modifquelo en el
Editor de botones.
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.

Creacin de botones de rollover simples

El Editor de botones permite crear botones

simples de dos estados.

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.

Para crear un botn de dos estados:

1

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 ficha del
estado Arriba.

En el rea de trabajo del editor, coloque el

elemento grfico que aparecer como estado
Arriba del botn:

 Utilice las herramientas de dibujo y edicin

para crear un elemento grfico.

 Importe o arrastre y suelte un elemento grfico

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.
4

Elija Papel cebolla para poder alinear

visualmente cada elemento grfico de estado
del botn.

Haga clic en la ficha Sobre.

Coloque el elemento grfico que aparecer

como estado Sobre del botn:

 Haga clic en Copiar grfico Arriba para pegar

una copia del elemento grfico del estado

Arriba en la ventana Sobre y edtelo para
cambiar su aspecto.
 Cree una imagen nica para el estado Sobre.
 Importe un grfico a la ventana Sobre.
7

Ignore las fichas Abajo y Sobre y Abajo, ya que

no se utilizan en la creacin de botones de
rollovers simples.

Haga clic en la ficha rea activa.

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.

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 reflejan 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:

 Haga doble clic en una instancia.

 Seleccione un botn y elija

Modificar > Smbolo > Editar smbolo.

Creacin de botones

193

Para editar un smbolo de botn existente:

1

Abra el Editor de botones.

Haga clic en la ficha 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 ficha rea activa de un
botn aparecen en la capa Web del documento.
Para dibujar objetos Web de divisin o de zona
interactiva:
1

Abra el Editor de botones.

Haga clic en la ficha 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.

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

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 ficha Abajo del Editor de

botones.

Elija Incluir estado Abajo en Bar Nav.

Coloque un elemento grfico en el Editor de

botones.

 Haga clic en Copiar grfico Sobre para pegar

una copia de la imagen del estado Sobre en la

ventana de Abajo y edtela.
 Cree un elemento grfico nico para el estado

Abajo.
Para editar la zona activa de un botn:
1

Abra el Editor de botones.

Haga clic en la ficha rea activa.

Utilice las herramientas Puntero, Divisin o

Divisin poligonal para mover, modificar o
volver a dibujar el rea activa actual.

194

Captulo 15

 Importe un elemento grfico en la ventana

Abajo.
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.

Para agregar el estado Sobre y Abajo a un botn:

1

Haga clic en la ficha Sobre y Abajo del Editor

de botones.

Elija Incluir estado Sobre y Abajo Bar Nav.

Coloque un elemento grfico en el Editor de

botones.

 Haga clic en Copiar grfico Abajo para pegar el

elemento grfico 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

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
simplificar 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.

Abajo.
 Importe un elemento grfico en la ventana de

Sobre y Abajo.

Efectos de botn
preestablecidos

Descripcin

Elevado

El bisel aparece
elevado respecto a los
objetos subyacentes.

Resaltado

El color del botn se

ilumina.

Recuadro

El bisel aparece
hundido en los objetos
subyacentes.

Invertido

El bisel aparece
invertido en los objetos
subyacentes y se
iluminan los colores.

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

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.

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.

Por ejemplo, si desea crear un botn de cuatro

estados, puede utilizar Elevado como elemento
grfico para el estado Arriba, Resaltado para el
estado Abajo, etc.

Aparece un mensaje que solicita la

confirmacin para la actualizacin en el resto
de estados del botn.

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.

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

Para crear una barra de navegacin sencilla:

1

Cree un botn slo con los elementos grficos,

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 fichas 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.

Para actualizar los grficos de todos los botones

de una barra de navegacin sencilla:

Utilice el Editor de botones para modificar el

botn original (el botn sin texto).
Fireworks actualiza el resto de los botones para
reflejar 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

En el panel Fotogramas, elija Papel cebolla.

Esto permite seleccionar con facilidad todos los
elementos grficos de los estados del rollover.

Seleccione todos los componentes del rollover.

Elija Insertar > Convertir en smbolo.

Escriba un nombre y elija Tipo: Botn y haga

clic en Aceptar.

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.

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 reflejar 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.
2

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 grficos
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 grfico 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

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 grfico para cada

fotograma.

Cree divisiones para definir 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.
Defina 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.

200

Captulo 16

Establezca vnculos, designe objetivos y

configure 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 grficos.

Para obtener informacin adicional sobre la
optimizacin, consulte el Captulo 11:
Optimizacin de grficos.

Exporte las divisiones para crear los archivos

grficos 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.

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.

 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.

Definicin del rea de

activacin del rollover
Utilice objetos de divisin o de zona interactiva
para definir el rea por la que debe pasar el puntero
para activar el rollover. Las divisiones y zonas
interactivas definen el rea activa del rollover.

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:

Elija un comportamiento en el men emergente

de adicin de acciones (+) del Inspector de
comportamientos.

Elimina el
comportamiento
seleccionado.

Cuando el rollover aparece en un navegador Web,

el desplazamiento del puntero sobre el rea
definida 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.

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
modificar.

En el Inspector de comportamientos,
seleccione el comportamiento.

Junto al nombre de comportamiento resaltado,

elija la actividad del puntero que lo
desencadenar.

 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.

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

cambia el contenido de la
divisin especificada 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 especifica el estado Sobre para la
divisin seleccionada cuando forma parte de una
barra de navegacin y tambin puede especificar
el estado Sobre y Abajo.
Bar Nav Abajo especifica 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
definir el texto que aparece en la barra de estado
de la parte inferior de la mayora de las ventanas
de los navegadores.

202

Captulo 16

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:

 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.

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).

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.

 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.

Para dibujar un rea de activacin:

Dibuje un objeto de zona interactiva o de

divisin, o un smbolo de botn:
 Dibuje un objeto de zona interactiva si el rea

 Haga clic en una divisin en el diagrama de

divisiones. Este diagrama muestra la forma en

que est dividido el documento.

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.

Para dibujar un rea de intercambio:

Dibuje un objeto de divisin en la parte del

documento donde se producir el intercambio.

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 especificado.

 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.

Elija un objeto de divisin para el rea de

intercambio:

 Haga clic en Archivo de imagen y escriba el

nombre o busque el archivo externo que desee

intercambiar al activar el rollover.
5

Elija Restablecer la imagen onMouseOut para

volver a colocar la imagen original en la
divisin cuando el puntero salga del rea de
activacin.

Creacin de rollovers avanzados

203

Elija Precargar imgenes.

Para obtener ms informacin, consulte
Carga previa de estados de rollover en la
pgina 206.

Haga clic en Aceptar.

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.

El ltimo paso es definir la accin del puntero que

activa el comportamiento Intercambiar imagen.

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 definir la accin del puntero que activa un

rollover desunido:

Para seleccionar un archivo externo como origen

de un rollover:

Definicin del evento de ratn que

desencadena el comportamiento

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.

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.

204

Captulo 16

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 simplifica 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 fin de que
funcione correctamente.

Herramienta Divisin poligonal

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.

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.

Para crear rollovers de forma irregular:

1

Utilice la herramienta Divisin poligonal para

dibujar divisiones poligonales que tengan la
misma forma que cada objeto.

Fireworks crea una serie de divisiones y define

de forma automtica varias reas de divisin
rectangulares para los objetos de divisin
irregulares.
2

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.

Asigne comportamientos a cada divisin con

Intercambiar imagen para configurar 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 significa 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 definido 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 grficos animados confieren 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 fijas 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 modificacin 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
sofisticada 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 simplificar la animacin de forma significativa, 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

Puede dibujar o importar los objetos que quiera

utilizar. En muchos casos, ahorrar tiempo si
convierte los objetos en smbolos.

Antes de empezar a crear una animacin, es

importante que planifique los eventos que desea
que ocurran. De lo contrario, puede perderse en
fotogramas y capas y la animacin puede perder
dinamismo al reproducirla.

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.

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

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.

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

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 planifique 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 configuracin
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 planificar 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.

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 aadir un fotograma nuevo detrs del

fotograma actual:

Haga clic en el botn Fotograma nuevo/

duplicado de la parte inferior del panel
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.

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 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.

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.

Adicin, desplazamiento, copia y

eliminacin de fotogramas
El panel Fotogramas permite aadir, copiar,
eliminar y cambiar el orden de los fotogramas.

Introduzca el nmero de duplicados del

fotograma seleccionado que quiera crear y elija
la posicin de insercin de los mismos.

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.

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.

Indica que se ha
seleccionado un
objeto. Arrastre
para moverlo a otro
fotograma.

Para desplazar un objeto a un fotograma

diferente:
1

Seleccione el objeto.

En el panel Fotogramas, arrastre el cuadrado

azul de la derecha del fotograma hasta el nuevo
fotograma.

En este ejemplo, varios fotogramas del documento

comparten la capa Web y el fondo.
Para que varios fotogramas compartan una capa:
1

Haga doble clic en la capa.

El cuadro de dilogo Opciones de capa se abre.

Elija la opcin Compartir en fotogramas.

Para eliminar el fotograma seleccionado:

 Haga clic en el botn Suprimir fotograma del

panel Fotogramas.

 Arrastre el fotograma al botn Suprimir

fotograma.

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

El cuadro de dilogo Opciones de capa se abre.

 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.

210

Captulo 17

Haga doble clic en la capa compartida.

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.

Nota: La capa Web, que contiene objetos de divisin y
de zona interactiva solamente, es la que comparten
siempre todos los fotogramas.

Visualizacin de los fotogramas

situados delante y detrs del fotograma
actual

Para ajustar el nmero de fotogramas situados

delante o detrs del fotograma actual que
quedan visibles:

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 fino y traslcido para ver
secuencias animadas.

En el panel Fotogramas, haga clic en el botn

Papel cebolla.

Elija una opcin de visualizacin:

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.

 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.

 Seleccione Mostrar todos los fotogramas para

ver el contenido de todos los fotogramas.

 Elija Personalizar para establecer un nmero

De forma predeterminada, los objetos atenuados

en otros fotogramas pueden seleccionarse y
editarse sin salir del fotograma actual.

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

En los pasos siguientes, la palabra Cow se ha

convertido en un smbolo.

El proceso de creacin de elementos para una

animacin es el mismo que se utiliza para crear los
objetos de cualquier otro grfico. Asimismo, es
posible importar grficos para utilizarlos en una
animacin.

Por ejemplo, para que la palabra Cow aparezca

animada en varios fotogramas:

Despus de crear o importar los grficos que

quiere utilizar en la animacin, puede crear
smbolos para los objetos que va a utilizar en ms
de un fotograma.

Se abre el cuadro de dilogo Propiedades de

smbolo.

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.

Cree un documento con tres fotogramas.

Elija Insertar > Nuevo smbolo.

Asigne un nombre al smbolo Cow, elija

Grfico 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.

Ejemplo de uso de smbolos e instancias

en la animacin

Haga clic en Aceptar para cerrar el Editor de

texto.

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 reflejar los cambios aplicados al smbolo.
Para obtener ms informacin sobre la creacin y
el uso de smbolos, consulte Modificacin de un
smbolo en la pgina 95.

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.

Los smbolos se almacenan en la biblioteca.

 Seleccione los fotogramas uno a uno en el

panel Fotogramas y arrastre una instancia

desde el panel Biblioteca hasta el lienzo.
8

Un smbolo de la biblioteca

212

Captulo 17

Desplace o transforme la instancia en cada

fotograma, o aplquele efectos automticos, en
funcin de cmo desee que aparezca en la
animacin.

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.

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.

Para abrir el Editor de texto, haga doble clic en

el bloque de texto incluido en el smbolo.

Seleccione Modificar > Smbolos > Entre

instancias.

Utilice el Editor de texto para cambiar el texto

Cow por Llama y haga clic en Aceptar.

Introduzca el nmero de pasos de

interpolacin en el cuadro de dilogo Entre
instancias.

Para distribuir los objetos interpolados con el

fin de separar los fotogramas de la animacin,
elija Distribuir en fotogramas 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.

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.

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

Configuracin del nmero de veces que

se reproduce la animacin

La demora de fotogramas determina el tiempo

durante el cual se va a mostrar el fotograma actual.
Especifique 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.

La configuracin 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.

En el cuadro emergente, elija la cantidad de

veces que quiera repetir la animacin despus
de reproducirla la primera vez.

Para introducir un valor de demora de

fotogramas para cada fotograma:

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.
2 Introduzca un nmero en la opcin Demora
de fotogramas.
3 Presione Intro o haga clic fuera del panel para
cerrar el cuadro de dilogo.
1

Para establecer el valor de demora de fotogramas

para ms de un fotograma:

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.
2 Elija Propiedades en el cuadro emergente
Opciones del panel Fotogramas para abrir el
cuadro de dilogo de propiedades del
fotograma.
3 Introduzca un nmero como demora de
fotogramas.
4 Presione Intro o haga clic fuera del panel para
cerrar el cuadro de dilogo.
1

214

Captulo 17

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.

Elija Siempre en el cuadro emergente.

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.

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 grficos,
consulte Eleccin de los ajustes de optimizacin
para archivos GIF y PNG en la pgina 158.
Para optimizar una animacin:
1

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.

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:

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:

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.

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

configuracin de bucle establecida en el panel
Fotogramas.
 En la ventana de documento Original, la

presentacin preliminar de la animacin

presenta el grfico con una resolucin
completa, en lugar de utilizar la presentacin
optimizada de 8 bits de las animaciones GIF
exportadas.

Creacin de animaciones

215

Para ver una presentacin preliminar de la

animacin en la ventana Presentacin preliminar:
1

Haga clic en la ficha Presentacin preliminar

de la parte superior de la ventana de
documento.
Utilice los controles de fotograma.

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.

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

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.

Para ver una presentacin preliminar de una

animacin en el cuadro de dilogo Exportar
presentacin preliminar:
1

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.

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.

Para exportar una animacin como varios

archivos:
1

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:

216

Captulo 17

Elija Archivo > Exportar especial > Flash SWF.

Haga clic en Opciones para ajustar la

configuracin de exportacin y, a
continuacin, haga clic en Aceptar.

En el cuadro de dilogo Exportar especial,

escriba un nombre para el archivo y especifique
el destino.

Apertura de una animacin

existente

Apertura de varios archivos

como una animacin

Las animaciones GIF existentes se pueden abrir y

editar en Fireworks. Cuando se abre una
animacin GIF, Fireworks realiza lo siguiente:

Fireworks puede crear una animacin a partir de

un grupo de archivos de imagen. Por ejemplo,
para crear un anuncio basado en varios grficos
existente, abra cada grfico y sitelo en un
fotograma separado del mismo documento.

 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 abrir varios archivos como una animacin:

1

El cuadro de dilogo Varios archivos se abre.

2

Para editar una animacin GIF:

1

Elija Archivo > Abrir y abra un archivo GIF

animado.

Elija un fotograma en el panel Fotogramas.

Seleccione un objeto y comience a editarlo.

Nota: Los cambios aplicados a los objetos de una capa

que comparten varios fotogramas afectan a todos los
fotogramas del documento.

Seleccione Archivo > Abrir varios.

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.
3

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 especificaciones. Parte de la funcionalidad de Fireworks
est puesta al servicio de la automatizacin y simplificacin 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 fin 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 configuraciones 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 configuracin de Fireworks
mediante JavaScript utilizando comandos especiales de JavaScript que Fireworks
es capaz de interpretar.

219

Bsqueda y reemplazo

 Buscar accede al siguiente caso del elemento.

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.

 Reemplazar sustituye un elemento encontrado

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.

Los elementos encontrados aparecen

seleccionados en el documento.
por el contenido especificado 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 modificarse; no es posible deshacer el cambio
con Editar > Deshacer.

Men Opciones

Seleccin del origen de la bsqueda

Opcin Buscar

Fireworks puede efectuar operaciones de

bsqueda y reemplazo en cinco ubicaciones
distintas. Seleccione una opcin del men
emergente Buscar para definir el rango de
contenido en el que desea buscar y reemplazar:

Opcin Buscar

 Buscar seleccin busca y reemplaza elementos

solamente en los objetos y texto seleccionados

actualmente.
 Buscar fotograma busca y sustituye elementos

Panel Buscar y reemplazar

slo dentro del fotograma en uso.

 Buscar en documento busca y reemplaza

Para buscar y reemplazar elementos de un

documento:
1

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.

Defina las opciones Buscar y Cambiar por.

Seleccione el tipo de bsqueda y reemplazo que

desea realizar:

220

Captulo 18

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.

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 definir cmo se manejarn varios archivos
abiertos despus de la bsqueda.
Para guardar y cerrar cada archivo despus de
efectuar la bsqueda:
1

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 modificados 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 modificados
reemplazarn a los archivos originales.
 Para crear y guardar una sola copia de seguridad
de cada uno de los archivos modificados 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.
3

 Para guardar todas las copias de seguridad de

los archivos modificados 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 modificado mediante una
operacin de bsqueda y reemplazo queda
registrado en el historial del proyecto.

Utilice Historial del proyecto para desplazarse por

los archivos seleccionados, exportar archivos
seleccionados con su configuracin 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 modificados y se muestra el
fotograma del documento que contiene el
cambio, as como la fecha y hora de la
modificacin.
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

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.

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. Especifique el
texto que se utilizar para reemplazar el texto
encontrado en la opcin Cambiar por.

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 definidas:
 Palabra completa permite encontrar el texto tal

y como aparece en la opcin Buscar y no como

parte de cualquier otra palabra.

Seleccione Borrar todo en el men emergente

Opciones del Historial del proyecto.

 Coincidir mays./mins. se utiliza para

Para exportar uno de los archivos incluidos en el

Historial del proyecto con su configuracin de
exportacin ms reciente:

 Expresiones normales sirve para utilizar

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

distinguir entre letras maysculas y minsculas

en procesos de bsqueda de textos.
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.

Bsqueda y reemplazo de colores

Seleccione Buscar color en el men emergente
Buscar para buscar y reemplazar colores de
documentos de Fireworks.

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.

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.
 Trazos permite buscar y reemplazar colores de

Especifique las caractersticas de la fuente o

fuentes en las reas Buscar y Cambiar por. En el
campo Cambiar por, especifique 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.

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.

 Mx. sirve para establecer el tamao mximo

en puntos de la fuente seleccionada que va a

buscar.

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 definidas:
 Palabra completa permite encontrar el texto tal

y como aparece en el campo Buscar y no como

parte de cualquier otra palabra.

Nota: Buscar fuera de Web216 no se encarga de

buscar ni reemplazar pxeles de los objetos de imagen.

 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.

Procesamiento por lotes

El procesamiento por lotes es un til mtodo para
convertir automticamente un grupo de archivos
grficos. 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 configuraciones 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.

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
especifique los elementos en que debe efectuar la
bsqueda y el reemplazo durante el proceso por
lotes.

 Personalizar muestra el cuadro de dilogo Abrir

varios y permite seleccionar los archivos que se

van a procesar por lotes.
3

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

configuraciones de exportacin, las

convenciones de denominacin y las opciones
de escala aplicadas a los archivos procesados.
4

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 configuracin
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

Seleccione el tipo de atributo de bsqueda y

reemplazo en el men emergente Buscar y elija
las configuraciones.

En la opcin Buscar, escriba o seleccione el

elemento especfico que desee buscar.

En la opcin Cambiar por, escriba o seleccione

el elemento especfico que vaya a utilizar para
reemplazar los elementos encontrados.

Para aadir archivos modificados al Historial

del proyecto a fin de poderlos localizar con
facilidad ms adelante, seleccione Actualizar
historial del proyecto.

Haga clic en Aceptar para guardar la

configuracin de Buscar y reemplazar y
regresar al cuadro de dilogo Procesar por lotes.

Modificacin de la configuracin de
archivos mediante un proceso por lotes
Es posible modificar un tipo de archivo, la
optimizacin de archivo o las configuraciones 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 especifique la configuracin que se
aplicar durante el proceso 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 Configuracin de

exportacin del cuadro de dilogo Exportar
por lotes, elija una opcin:

 Seleccione Utilizar configuracin de cada

archivo para que la configuracin 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
configuracin 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 configuraciones de
exportacin personalizadas para el proceso por
lotes.
 Seleccione una configuracin de exportacin

preestablecida o guardada previamente para

utilizarla en el proceso por lotes. Todas las
configuraciones preestablecidas y guardadas
aparecern en el men emergente
Configuracin de la exportacin.
3

Haga clic en Aceptar para volver al cuadro de

dilogo Procesar por lotes y finalizar el proceso
por lotes.

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 modificados.
 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 especfico. 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.

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:

 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 especificado.

 Seleccione Nombre original para que no se

modifiquen los nombres de los archivos.

 Elija Aadir prefijo y escriba un prefijo en el

cuadro de texto Nombre del archivo para

aadir el texto especificado al principio del
nombre de archivo de cada archivo procesado
por lotes.

Nota: Seleccione Escala para ajustar a rea para

convertir un grupo de imgenes en miniaturas.

 Seleccione Escala segn porcentaje para escalar

imgenes de acuerdo con un porcentaje

concreto.

 Seleccione Aadir sufijo y escriba un sufijo en

el cuadro de texto Nombre del archivo para

aadir el texto especificado al final 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.
3

Haga clic en Aceptar para volver al cuadro de

dilogo Procesar por lotes y finalizar el proceso
por lotes.

Haga clic en Aceptar para volver al cuadro de

dilogo Procesar por lotes y finalizar el proceso
por lotes.

Automatizacin de tareas repetitivas

227

Creacin de copias de seguridad de

archivos procesados por lotes

 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 final del nombre del archivo de la nueva
copia de seguridad.

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.

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.

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 finalizar el proceso
por lotes.

Almacenamiento de procesos por lotes

como Scriptlets
Es posible guardar la configuracin de los
procesos por lotes como Scriptlets para
reutilizar fcilmente los procesos por lotes varias
veces en el futuro.
Para crear un Scriptlet:

228

Captulo 18

Seleccione Archivo > Procesar por lotes.

Seleccione configuraciones en el cuadro de

dilogo Procesar por lotes.

Seleccione las acciones que va a realizar y elija

la configuracin en los cuadros de dilogo
Reemplazar por lotes y Exportar por lotes.
Cada vez que se ejecute el Scriptlet guardado,
Fireworks solicitar que se especifiquen los
archivos que debe procesar por lotes.

Haga clic en Archivo de comandos del cuadro

de dilogo Procesar por lotes.

Especifique un nombre y un destino para el

Scriptlet y haga clic en Aceptar.

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

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 grficos y colocarlos en

Fireworks. Despus de hacerlo, Fireworks
procesa los archivos grficos tantas veces como
Scriptlets se hayan arrastrado y colocado.

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 especfico o
aplicacin de varios efectos o distorsiones a
distintos objetos. Es posible modificar casi
cualquier comando o configuracin 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.

Automatizacin de tareas repetitivas

229

Los comandos guardados pueden ejecutarse en

cualquier documento de Fireworks, ya que no son
especficos de documento.

Para cambiar el nmero de pasos registrados por

el panel Historial:
1

Seleccione Archivo > Preferencias.

Sustituya el nmero de Pasos de Deshacer por

el nmero de pasos que el panel Historial
deber registrar.

Men emergente
Opciones

Nota: El registro de pasos adicionales requiere ms

memoria RAM.
Para borrar todos los pasos del panel Historial:

Volver a reproducir
los pasos.

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 fin de
liberar memoria y espacio en disco.
Al borrar pasos del panel Historial se elimina la
capacidad de deshacer ediciones.

Deshacer y rehacer pasos.

Para guardar pasos como un comando:
Para deshacer los pasos con el panel Historial:

 Arrastre el indicador de Deshacer hacia arriba

del panel hasta llegar al ltimo paso que desee

deshacer.

 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.

 Haga clic en el recorrido del indicador de

Deshacer.
Los pasos deshechos se conservan en el panel
Historial y aparecen resaltados en color gris.

 Presione Control (Windows) o Comando

(Macintosh) para seleccionar pasos no

contiguos.
2

Para rehacer los pasos deshechos:

 Arrastre el indicador de Deshacer hacia la parte

superior del panel hasta llegar al ltimo paso

que desee restablecer.

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.

 Haga clic en el recorrido del indicador de

Deshacer.

Seleccione los pasos que va a guardar como un

comando:

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:

Cambio de nombre y eliminacin de

comandos
Es posible cambiar el nombre de los comandos
que aparecen en el men Comandos, as como
eliminarlos.

Seleccione un objeto, si es necesario.

Para cambiar un nombre de comando:

Elija el comando en el men Comandos.

Para volver a reproducir una seleccin de pasos:

1

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

Seleccione Comandos > Editar lista de

comandos.
Se abre el cuadro de dilogo Editar lista de
comandos.

Seleccione un comando.

Haga clic en Cambiar nombre, introduzca un

nombre nuevo y haga clic en Aceptar.

parte inferior del panel Historial.

 Seleccione Volver a reproducir los pasos

seleccionados en el men emergente Opciones

del panel Historial.

Para eliminar un comando incluido en Fireworks:

1

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

Seleccione un rango de pasos.

Copie los pasos:

Seleccione Comandos > Editar lista de

comandos.
Se abre el cuadro de dilogo Editar lista de
comandos.

Seleccione un comando y haga clic en

Suprimir.

Para eliminar un comando no incluido en

Fireworks:

Elimine el archivo JSF asociado con el comando

de la carpeta Fireworks 3\Settings\Commands.

 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

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
especficos de Fireworks para controlar los
comandos y configuraciones de Fireworks.
Para editar pasos seleccionados como JavaScript
en un editor de texto:
1

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

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 significa 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
simplifica 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 refleje la estructura del sitio
cuando transfiera 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:

Descripcin del cdigo

HTML de Fireworks

Seleccione Archivo > Actualizar HTML.

Localice el archivo HTML que desee actualizar

y haga clic en Abrir.

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 grfico exportado.

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.

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 definen mediante el
inspector de comportamientos. Adems,
Fireworks exporta tablas HTML para recomponer
grficos 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.

234

Captulo 19

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 final.

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

Seleccione Editar > Copiar cdigo HTML.

Siga los pasos del asistente conforme le gua en

el proceso de definicin 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 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 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

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 final.

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.

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 modificar el cdigo HTML
posteriormente.

Operaciones con Dreamweaver y otros editores HTML

235

Exportacin de un archivo HTML

Para exportar cdigo HTML con un archivo:

Al exportar imgenes, puede indicar a Fireworks

que exporte el archivo HTML en uno de los
diferentes formatos:

Seleccione Archivo > Exportar.

Elija un estilo de salida HTML en el men

emergente Estilo de configuracin HTML.

Especifique una ubicacin para el archivo

HTML exportado.

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.

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.

Dreamweaver 3 Library.lbi

FrontPage genera HTML que puede editarse en

Microsoft FrontPage.

genera cdigo HTML que cumple el

estndar bsico HTML sin favorecer a ningn
editor HTML.

Genrico

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

Uso de los elementos de biblioteca de

Dreamweaver 3
Los elementos de biblioteca de Dreamweaver
simplifican 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.

Para exportar un elemento de biblioteca:

1

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 especificar 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.

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.

Si fuera necesario, Fireworks le instar a crear

esta carpeta.
4

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 modificado 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

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.

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.

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 identificar el
comienzo y el final del cdigo de elementos
especficos, 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
finaliza </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
final 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.

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 grfico e informacin <MAP> para
definir 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.

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
definir un editor externo en Dreamweaver.

 Pegar todo en la seccin <MAP> justo a

continuacin del vnculo con el grfico.

Para definir Fireworks como un editor externo de

Dreamweaver 2:

Copia de cdigo HTML en documentos

con divisiones

En Dreamweaver 2, seleccione
Edicin > Preferencias > Editores externos.

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:

Defina Fireworks como Editor de imgenes.

 Pegar toda la seccin <TABLE> incluyendo las

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.

etiquetas, en el lugar donde desee que aparezca

el grfico 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>.

Fireworks 3 aparecer en la lista de editores.

4

 Pegar todas las secciones <MAP>

correspondientes al grfico con divisiones justo

despus de la etiqueta </TABLE>.

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.
3

Como respuesta al mensaje que pregunta si

desea utilizar otro documento Fireworks
existente como origen:

Optimizacin de grficos de
Fireworks en Dreamweaver
Es posible cambiar la configuracin de
optimizacin de una imagen de Fireworks
colocada en Dreamweaver al ejecutar Fireworks
desde Dreamweaver y cambiar la configuracin en
el cuadro de dilogo Presentacin preliminar de la
exportacin.
Para optimizar una imagen de Fireworks colocada
en Dreamweaver:
1

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.

 Haga clic en S, si ya existe un archivo origen

Edite el grfico en Fireworks.

 Haga clic en No, si no existe ningn archivo

Seleccione Archivo > Actualizar.

Cuando Dreamweaver abre y edita un grfico en
Fireworks, Actualizar adopta la funcin de
Guardar en el men Archivo. Al seleccionar
Actualizar se exporta la imagen con la
configuracin 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.

Cierre el documento Fireworks.

Cambie a Dreamweaver.
La imagen colocada se actualiza y refleja los
cambios efectuados en Fireworks

Nota: No ejecute Dreamweaver para modificar 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

Fireworks, localice el archivo PNG origen si

fuera necesario y haga clic en Aceptar.
origen de Fireworks o, si solamente desea
editar la imagen de mapa de bits que se
encuentra en Dreamweaver.
3

En la Presentacin preliminar de la exportacin

de Fireworks, introduzca la configuracin 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
reflejar el cambio.

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>

Al igual que en el ejemplo anterior, la mayora de

etiquetas HTML constan de un smbolo de
apertura y otro de cierre que, juntos, definen el
principio y final del texto afectado. Sin embargo,
algunas etiquetas solamente precisan el smbolo
de apertura. Muchas etiquetas permiten aadir
variables con el fin de controlar el efecto de la
etiqueta sobre el rango del texto seleccionado. Por
ejemplo:
<font color=blue>Fireworks</font>

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 final del

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.

<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>

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>

Estas etiquetas presentan la imagen Explosion.jpg

en la pgina web. Si se hace clic sobre la misma se
accede al sitio www.getfireworks.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 especficas y el uso de las mismas,
consulte alguna de las publicaciones comerciales o sitios
web dedicados a HTML.

Operaciones con Dreamweaver y otros editores HTML

241

242

Captulo 19

APNDICE A

Mtodos abreviados de teclado

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Men Archivo
Comando

Windows

Macintosh

Nuevo

Control+N

Comando+N

Abrir

Control+O

Comando+O

Abrir varios

Control+Mays+O

Comando+Mays+O

Cerrar

Control+W, Control + F4

Comando+W

Guardar

Control+S

Comando+S

Guardar como

Control+Mays+S

Comando+Mays+S

Importar

Control+R

Comando+R

Exportar

Control+Mays+R

Comando+Mays+R

Presentacin
preliminar de
exportacin

Control + Mays + X

Comando+Mays+X

Presentacin
preliminar en
navegador principal

F12

F12

Presentacin
preliminar en
navegador secundario

Mays + F12

Mays + F12

Imprimir

Control+P

Comando+P

Salir

Alt+F4

Comando+Q

243

Men Editar
Comando

Windows

Macintosh

Deshacer

Control+Z

Comando+Z

Repetir

Control+ Mays + Z

Comando + Mays + Z

Cortar

Control+X

Comando+X

Copiar

Control+C

Comando+C

Pegar

Control+V

Comando+V

Pegar dentro

Control+Mays+V

Comando+Mays+V

Pegar atributos

Control + Alt + Mays + V

Comando+Mays+Opcin+V

Seleccionar todo

Control+A

Comando+A

Anular seleccin

Control+D

Comando+D

Seleccionar nivel
superior

Control + flecha arriba

Comando + flecha arriba

Seleccionar nivel
inferior

Control + Down Arrow

Comando + Flecha abajo

Seleccionar inverso

Control + Mays + I

Comando + Mays + I

Duplicar

Control + Alt + D

Comando+Opcin + D

Clonar

Control +Mays + C

Comando + Mays + C

Recortar la imagen
seleccionada

Control + Alt + C

Comando + Opcin + V

Men Ver
Comando

Windows

Macintosh

Aumentar

Control + + (ms), o
Control + barra
espaciadora + arrastrar

Comando + + (ms), o
Comando + Barra espaciadora +
arrastrar

Reducir

Control + (menos)

Comando + (menos)

Encajar seleccin

Control + 0 (cero)

Comando + 0 (cero)

Encajar todo

Control+ Alt + 0 (cero)

Comando + Opcin + 0 (cero)

Pantalla completa

Control + K

Comando + K

244

Apndice A

Comando

Windows

Macintosh

Ocultar la seleccin

Control + M

Comando + M

Mostrar todo

Control + Mays + M

Comando + Mays + M

Ocultar bordes

Control + H

Comando + H

Ocultar paneles

Control + Mays + H, o Tab

Comando + Mays + H, o Tab

Reglas

Control + Alt + R

Comando + Opcin + R

Cuadrcula

Control + (apstrofo)

Comando + (apstrofo)

Guas

Control + ; (punto y coma)

Comando + ; (punto y coma)

Guas de divisin

Control + Alt + Mays + ;

Comando + Mays + Opcin + ;

Submen Nivel de aumento

Para establecer la
visualizacin en

Windows

Macintosh

50%

Control + 5

Comando + 5

100%

Control + 1

Comando+ 1

200%

Control + 2

Comando + 2

400%

Control + 4

Comando + 4

800%

Control + 8

Comando + 8

3200%

Control + 3

Comando + 3

6400%

Control + 6

Comando + 6

Submen Opciones de cuadrcula

Comando

Windows

Macintosh

Ajustar a cuadrcula

Control + Mays +
(apstrofo)

Comando + Mays +
(apstrofo)

Editar cuadrcula

Control + Alt + G

Comando + Opcin + G

Mtodos abreviados de teclado

245

Submen Opciones de guas

Comando

Windows

Macintosh

Bloquear guas

Control + Alt + ;

Comando + Opcin + ;

Ajustar a guas

Control + Mays + ;

Comando + Mays + ;

Editar guas

Control + Alt + Mays + G

Comando+Opcin+Mays+G

Men Insertar
Comando

Windows

Macintosh

Nuevo smbolo

Control + F8

Comando + F8

Convertir en smbolo

F8

F8

Zona interactiva

Control + Mays + U

Comando + Mays + U

Imagen

Control + R

Comando + R

Imagen vaca

Control + Alt + Y

Comando + Opcin + Y

Men Modificar
Comando

Windows

Macintosh

Entre instancias

Control + Alt + Mays + T

Comando+Opcin+Mays+T

Objeto de imagen

Control + E

Comando + E

Salir de edicin de
imagen

Control + Mays + D

Comando + Mays + D

Unir

Control + J

Comando + J

Separar

Control + Mays + J

Comando + Mays + J

Combinar imgenes

Control + Mays + Alt + Z

Comando+Mays+Opcin+Z

Agrupar

Control + G

Comando + G

Enmascarar imagen

Control + Mays + G

Comando + Mays + G

Desagrupar

Control + U

Comando + U

246

Apndice A

Submen Transformar
Comando

Windows

Macintosh

Transformacin libre

Control + T

Comando + T

Transformacin
numrica

Control + Mays + T

Comando + Mays + T

Rotar 90 (s. horario)

Control + 9

Comando + 9

Rotar 90 (s.
antihorario)

Control + 7

Comando + 7

Comando

Windows

Macintosh

Poner en primer plano

Control + F

Comando + F

Traer hacia adelante

Control + Mays + F

Comando + Mays + F

Enviar hacia atrs

Control + Mays + B

Comando + Mays + B

Enviar al fondo

Control + B

Comando + B

Comando

Windows

Macintosh

Izquierda

Ctrl + Alt +1

Comando + Opcin +1

Centrado vertical

Ctrl + Alt +2

Comando + Opcin +2

Derecha

Ctrl + Alt +3

Comando + Opcin +3

Arriba

Ctrl + Alt +4

Comando + Opcin +4

Centrado horizontal

Ctrl + Alt +5

Comando + Opcin +5

Abajo

Ctrl + Alt +6

Comando + Opcin +6

Distribuir anchuras

Ctrl + Alt +7

Comando + Opcin +7

Distribuir alturas

Ctrl + Alt +9

Comando + Opcin +9

Submen Organizar

Submen Alinear

Mtodos abreviados de teclado

247

Men Texto
Comando

Windows

Macintosh

Editor

Control + Mays + E

Comando + Mays + E

Unir al trazado

Control + Mays + Y

Comando + Mays + Y

Convertir en trazados

Control + Mays + P

Comando + Mays + P

Comando

Windows

Macintosh

Regular

Control+Alt+Mays+P, o
F5

Comando+Opcin+Mays+P, o F5

Negrita

Control+Alt+Mays+B, o F6

Comando+Opcin+Mays+B, o F6

Cursiva

Control+Alt+Mays+I, o F7

Comando+Opcin+Mays+I, o F7

Subrayado

Control+Alt+Mays+U, o F8

Comando+Opcin+Mays+U, o F8

Comando

Windows

Macintosh

Izquierda

Control+Alt+Mays+L

Comando+Opcin+Mays+L

Centrado

Control+Alt+Mays+C

Comando+Opcin+Mays+C

Derecha

Control+Alt+Mays+R

Comando+Opcin+Mays+R

Justificado

Control+Alt+Mays+J

Comando+Opcin+Mays+J

Expandido

Control+Alt+Mays+S

Comando+Opcin+Mays+S

Submen Estilo

Submen Alinear

248

Apndice A

Men Ventana
Comando

Windows

Macintosh

Nueva ventana

Control+Alt+N

Comando + Opcin + N

Caja de herramientas

Control + Alt + T

Comando + Opcin + T

Inspector de objetos

Control + I

Comando + I

Panel Trazo

Control + Alt + B

Comando + Opcin + B

Panel Relleno

Control + Alt + F

Comando + Opcin + F

Panel Efecto

Control + Alt + E

Comando + Opcin + E

Panel Muestras

Control + Alt + S

Comando + Opcin + S

Mezclador de colores

Control + Alt + M

Comando + Opcin + M

Opciones de
herramientas

Control + Alt + O

Comando + Opcin + O

Panel Capas

Control + Alt + L

Comando + Opcin + L

Panel Fotogramas

Control + Alt + K

Comando + Opcin + K

Panel Informacin

Control + Alt + I

Comando + Opcin + I

Inspector de
comportamientos

Control + Alt + H

Comando + Opcin + H

Administrador de URL

Control + Alt + U

Comando + Opcin + U

Estilos

Control + Alt + J

Comando + Opcin + J

Comando

Windows

Macintosh

Repetir Xtra

Control+Alt+Mays+X

Comando+Opcin+Mays+X

Comando

Windows

Macintosh

Uso de Fireworks

F1

Ayuda

Men Xtras

Men Ayuda

Mtodos abreviados de teclado

249

Editor de texto
Funcin

Windows

Macintosh

Aumentar acercamiento
o ajuste entre
caracteres

Control + Flecha derecha

Comando + Flecha derecha

Reducir acercamiento o
ajuste entre caracteres

Control + Flecha izquierda

Comando + Flecha izquierda

Aumentar interlineado

Control + Flecha arriba

Comando + Flecha arriba

Reducir interlineado

Control + Flecha abajo

Comando + Flecha abajo

Caja de herramientas
Para cambiar a esta herramienta
Presione
Puntero

v o 0 (cero)

Seleccionar detrs

v o 0 (cero)

Recortar

Exportar rea

Seleccionar nivel inferior

a or 1

Recuadro

Recuadro elipse

Lazo

Lazo poligonal

Varita mgica

Mano

Barra espaciadora o h

Aumentar y reducir

Lnea

Pluma

Rectngulo

Elipse

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

Varios
Funcin

Windows

Macintosh

Restablecer colores de
trazo y relleno a
valores
predeterminados

Intercambiar colores de
trazo y de relleno

Fotograma siguiente

Control + Pgina abajo

Comando + Pgina abajo

Fotograma anterior

Control + Pgina arriba

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
configuracin 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
planificacin de fotogramas 208
planificacin 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
modificacin de la configuracin mediante
proceso por lotes 226
procesamiento por lotes 224
seleccin del formato de grfico 157
archivos de cach 43
archivos de comandos
borrado de todos los pasos 230
comandos de denominacin 229
configuracin 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

254

Index

conversin 51
importacin 51
archivos de Illustrator
conversin 51
importacin 51
arranque de Fireworks 12
Arrastre y colocacin
para importar grficos 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

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
definicin 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
definicin 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
clasificacin del panel Muestras 102
configuracin de preferencias 42
creacin 103
creacin en Mezclador de colores 104
definicin de la opacidad 148
definicin 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

256

Index

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
configuracin 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 grficos 62
para importar grficos 62
correccin de errores, vase Deshacer
corte 72
corte de trazado 72
creacin
animaciones 207
archivos de comandos 229
botones 192
capas 93

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
configuracin de nmero 42
Desperfilar 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
configuracin 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
definicin de opciones de trazo 78
definicin de punta de pincel 78
definicin de sensibilidad de trazo 78
definicin 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 configuraciones 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
reflejo 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
simplificacin 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

258

Index

Capa Web 94
cierre de vista 47
coincidencia de tamao del contenido del
Portapapeles 46
compartir capas entre fotogramas 94
configuracin de opciones de
mapa de imagen 178
configuracin de tamao 48
copiar objetos a otra capa 94
creacin 46
definicin 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

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
definicin de opciones de trazo 78
definicin de punta de pincel 78
definicin de sensibilidad de trazo 78
definicin 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
reflejo 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
simplificacin 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 filtros como 145
aplicacin de filtros 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
definicin de la configuracin
predeterminada 142
definicin de secuencia 140
desactivacin 142
edicin 140
eliminacin 141, 142
eliminacin de todos 141
filtros de conexin 145
iluminado 144
modificacin 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

260

Index

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
definicin 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
definicin 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

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 especfico 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
configuracin del nmero de colores 161
definicin 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
filtros 130
aplicacin como efectos 145
filtros de conexin 145
filtros 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
configuracin 42
conversin de botones de Fireworks 2 196
copia y pegado de cdigo HTML 235, 238
definicin 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
planificacin 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
configuracin 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

262

Index

interpolacin para animacin 213

Nombre base 169
papel cebolla 211
planificacin 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
definicin 157
definicin de la profundidad de color 158
definicin 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
grficos 154
ajustes de optimizacin personalizados 154
almacenamiento de ajustes de optimizacin 155
cambio de configuracin
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

edicin en Dreamweaver 239

edicin zonas interactivas 178
eliminacin de ajustes de optimizacin 155
estimacin del tiempo de descarga 156
exportacin 166
filtros 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
definicin 147
seleccionar en nivel inferior 152
Guardar trazo, cuadro de dilogo 79
guas de divisin 182
configuracin 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 grficos 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
planificacin de sitios Web 234
uso de elementos
de biblioteca de Dreamweaver 236
uso de Fireworks HTML 234
uso de mapas de imagen 180

264

Index

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 configuracin 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
desperfilar mscara 138
divisin 181
edicin de zonas interactivas 178
edicin en Dreamweaver 239

eliminacin de ajustes de optimizacin 155

enmascaramiento 150
escala durante proceso por lotes 227
exportacin 166
filtros 130
filtros 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
perfilado 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 ficha 40
introduccin de informacin 40
Objeto 148
reorganizacin 39
uso 39
uso de cuadros emergentes 40
visualizacin y ocultacin 39
instalacin
filtros de conexin de Photoshop 145
Fireworks, Windows 12
instancias
animacin 212
colocacin en documento 95
creacin 95
definicin 94

Index 265

distribucin 213
interpolacin para animacin 213
modificacin 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
definicin 158
exportacin 158
optimizacin 159
perfilado de bordes de color 160
progresivo 160
reduccin de calidad 160
suavizado 160
justificacin de texto 114
L
Lpiz, herramienta 56
Lazo poligonal, herramienta 56
Lazo, herramienta 56
lienzo
definicin de tamao 48
definicin del color 48
recorte 50
rotacin 49
lnea de base 112
Lnea, herramienta 56
lneas
dibujo 58
restriccin al dibujar 58

266

Index

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
configuracin de opciones 178
copia de cdigo HTML para 239
descripcin 173
eleccin del grfico 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
modificacin
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
configuracin 121

definicin 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
definicin 148
definicin 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
clasificacin 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 filtros como efectos 145
aplicacin de filtros de
conexin de Photoshop 145
aplicacin de la configuracin 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
definicin de la configuracin predeterminada de
efecto 142
definicin de la opacidad 148
definicin de opciones de trazo 78
definicin de punta de pincel 78
definicin 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

268

Index

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
modificacin 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
reflejo 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
simplificacin 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

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
definicin 148
opacidad alfa 104
opacidad, definicin 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
configuracin del nmero de colores 161
controles 154
definicin de la profundidad de color 158
definicin 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
perfilado 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
configuracin 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
clasificacin 102
color models 103
colores Websafe 163
configuracin de la transparencia durante la
exportacin 105
configuracin 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

270

Index

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
clasificacin 102
colores Websafe 163
configuracin del nmero de colores 161
creacin de colores 103
definicin 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 ficha 40
Estilos 86
Forma de Editar trazo 78
Fotogramas 209
Historial 41
Historial del proyecto 221

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
definicin 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
perfilado 138
Perfilar ms, Xtra 138
Perfilar, Xtra 138
Perforar, comando 73
Photoshop
importacin de archivos u objetos 51
importacin de texto 117
opciones de importacin 43
Photoshop, filtros de conexin
aplicacin 145
instalacin 145
Pincel, herramienta 57
pinceles
almacenamiento 79
definicin 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
definicin 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
definicin 158
definicin 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
definicin 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 especfico 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 configuracin de archivos 226
Configuracin de exportacin 226
copia de archivos originales 228
creacin de Scriptlets 228
ejecucin de Scriptlets 229
formatos de archivo 225
grficos 224
opciones de denominacin 227
opciones de escala 227
profundidad de bits 158
profundidad de color, definicin 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

272

Index

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
reflejo 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

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
definicin 192
definicin de rea de activacin 201
definicin de rea de intercambio 203
definicin de comportamiento de imagen de
intercambio 203
definicin de comportamientos 201
definicin de texto de barra de estado 202
definicin del evento de ratn 204
desunido 203
deteccin de navegador 205
edicin 193

Index

273

edicin de rea activa 194

efectos de bisel 195
especificacin 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

274

Index

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
definicin 94
duplicacin 95
edicin 95
eliminacin 95
interpolacin para animacin 213
modificacin 95
modificacin de instancias 96
Simplificar, comando 74
Sistema, paleta 160

sitios Web
conceptos bsicos sobre HTML 241
etiquetas HTML comunes 241
planificacin 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 flujo 113
edicin 111
edicin cuando est adaptado a un trazado 116
edicin del trazado adaptado 116
Editor de texto 111
flujo 113
importacin 117
importacin de ASCII 118
importacin de Photoshop 117
importacin de RTF 117
interlineado 112
introduccin 110
justificacin 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
definicin 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

276

Index

creacin de trazos personalizados 77

definicin de opciones de trazo 78
definicin de punta de pincel 78
definicin de sensibilidad de trazo 78
definicin 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
modificacin 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
simplificacin 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

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
configuracin para herramientas de dibujo 61
definicin 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
Desperfilar mscara 138
Invertir 135
Matiz/Saturacin 131
Niveles 132
Niveles automticos 133
Perfilar 138
Perfilar 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