Macro Media Fireworks 8

Tabla de Contenido

Introducción 5Introducción................................................................................................................................. 5Escenario.actual.del.Web............................................................................................................ 6Las.imágenes.en.computadora.................................................................................................... 6Imágenes.de.mapa.de.bits............................................................................................................ 7Objetos.vectoriales...................................................................................................................... 7Diseño gráfico frente al Web....................................................................................................... 7

El espacio de trabajo de Fireworks 9Requisitos.del.Sistema................................................................................................................. 9Conceptos.básicos....................................................................................................................... 9Ingresar.a.Fireworks................................................................................................................. 10Página.de.Inicio.de.Macromedia.Fireworks............................................................................. 10El.espacio.de.Trabajo.de.Fireworks.......................................................................................... 11Apertura.de.archivos.en.Fireworks........................................................................................... 13Creación.de.nuevos.archivos.en.Fireworks............................................................................... 14Ventajas.de.crear.un.archivo.PNG............................................................................................ 16Visualización.y.navegación.por.el.documento.......................................................................... 16Utilización de las fichas de documento..................................................................................... 16Aumento.y.desplazamiento.de.un.documento............................................................................ 16Modos.de.visualización.para.gestionar.el.espacio.de.trabajo.................................................. 18Cambiar.el.modo.de.visualización............................................................................................ 18Visualización.de.vistas.múltiples.de.un.documento................................................................... 19Control.de.la.actualización.en.pantalla.del.documento............................................................ 19Presentación.preliminar.del.documento.................................................................................... 20Panel.Herramientas................................................................................................................... 20Utilización.del.Inspector.de.propiedades.................................................................................. 22Administración.de.paneles........................................................................................................ 23Uso.del.panel.Historial.para.deshacer.y.repetir.varias.acciones............................................. 25Menús.emergentes..................................................................................................................... 26Definición de los principales Paneles....................................................................................... 26Configurar preferencias............................................................................................................. 27Restaurar preferencias.............................................................................................................. 28

TrabajandoconObjetosBitmap 29Mapas.de.bits............................................................................................................................. 29Utilización.de.mapas.de.bits..................................................................................................... 30

Programa Nacional de Informática i

Creación.de.objetos.de.mapa.de.bits......................................................................................... 30Herramienta.Pincel................................................................................................................... 32Herramienta.Lápiz.................................................................................................................... 32Eliminación.de.píxeles.en.objetos.de.mapa.de.bits................................................................... 33Edición.de.objetos.de.mapa.de.bits........................................................................................... 34Utilizando.las.herramientas.de.Selección.de.Píxeles................................................................ 34Opciones.comunes.de.las.herramientas.de.selección.de.mapa.de.bits..................................... 35Herramienta.Recuadro.............................................................................................................. 36Herramienta.Recuadro.oval...................................................................................................... 37Herramienta.Lazo...................................................................................................................... 39Herramienta.Lazo.polígono...................................................................................................... 39Herramienta.Varita.mágica....................................................................................................... 40Modos.de.selección.................................................................................................................... 42Selección.nueva......................................................................................................................... 42Adición.de.píxeles.a.una.selección............................................................................................ 42Sustracción.de.píxeles.de.una.selección.................................................................................... 43Creación.de.una.selección.a.partir.de.la.intersección.de.otra.existente.................................. 43Creación.de.una.selección.de.píxeles.inversa........................................................................... 44Fundido.de.selecciones.de.píxeles............................................................................................. 44Perfeccionamiento del mapa de bits.......................................................................................... 45Desenfoque de una imagen........................................................................................................ 45Herramienta Desenfocar........................................................................................................... 45La herramienta Perfilar............................................................................................................. 46Aclarado.y.oscurecimiento.de.píxeles....................................................................................... 47Herramienta Difuminar............................................................................................................. 48Herramienta.sello...................................................................................................................... 49Herramienta.Reemplazar.color................................................................................................. 51Ejemplo.desarrollado................................................................................................................ 52

TrabajandoconObjetosVectoriales 53Objeto.vectorial......................................................................................................................... 53Uso.de.objetos.vectoriales......................................................................................................... 53Dibujo.de.objetos.vectoriales.................................................................................................... 54Herramienta.Línea.................................................................................................................... 54Herramienta.Rectángulo........................................................................................................... 55Herramienta.Elipse................................................................................................................... 55Ajustar la posición de una forma básica mientras la dibuja ................................................... 56Cambio.de.tamaño.de.una.línea,.un.rectángulo.o.una.elipse.seleccionadas............................ 56Herramienta.Rectángulo.redondeado.básico............................................................................ 57Herramienta.Polígono............................................................................................................... 58Principales.herramientas.de.Formas.Automáticas................................................................... 60Flecha........................................................................................................................................ 60Rectángulo.redondeado............................................................................................................. 61Rectángulo.biselado.................................................................................................................. 62

ii Programa Nacional de Informática

Rectángulo con chaflán............................................................................................................. 63Ajuste de las formas automáticas de rectángulo redondeado, biselado y con chaflán............. 63Línea.de.conexión...................................................................................................................... 64Donut......................................................................................................................................... 65Ajuste de las formas automáticas de donut............................................................................... 65Forma.de.L................................................................................................................................ 66Polígono.inteligente................................................................................................................... 67Sección....................................................................................................................................... 69Espiral....................................................................................................................................... 69Estrella....................................................................................................................................... 70Dibujo.de.Formas.Libres........................................................................................................... 72Herramienta.Pluma................................................................................................................... 72Dibujo.de.segmentos.de.trazado.rectos..................................................................................... 72Dibujo.de.segmentos.de.trazado.curvos.................................................................................... 73Edición de la forma de un segmento de trazado recto.............................................................. 74Ajuste de la forma de un segmento de trazado curvo................................................................ 74Conversión.de.segmentos.de.trazado.rectos.en.curvos.y.viceversa.......................................... 75Herramienta.Trazado.de.Vectores............................................................................................. 78Edición.de.trazados................................................................................................................... 79La.herramienta.Estilo.libre....................................................................................................... 80Herramienta.Remodelar.área.................................................................................................... 81Herramienta.Volver.a.dibujar.trazados..................................................................................... 82Herramienta.Cuchilla................................................................................................................ 82Aplicación.de.colores,.trazos.y.rellenos.................................................................................... 83Rellenos.degradados................................................................................................................. 84Rellenos.de.patrón..................................................................................................................... 87Transformación y distorsión de rellenos degradados y de patrón............................................ 87Establecimiento de bordes de relleno duros, suavizados o fundidos......................................... 88Texturas.de.rellenos................................................................................................................... 89Utilización.de.trazos.................................................................................................................. 90Creación.de.trazos.personalizados............................................................................................ 92Organización.de.objetos............................................................................................................ 94Edición.con.operaciones.de.trazado......................................................................................... 98Ejemplo.desarrollado.............................................................................................................. 101Ejemplo.desarrollado.............................................................................................................. 102

ManejodelTexto 103Utilización.de.texto.................................................................................................................. 103Introducción.de.texto............................................................................................................... 104Conversión.de.texto.en.trazados.............................................................................................. 118Importación.de.texto................................................................................................................ 118Administración de fuentes no disponibles............................................................................... 118Inserción.de.caracteres.especiales.......................................................................................... 119Revisión ortográfica................................................................................................................ 119

Programa Nacional de Informática iii

Ejemplo.desarrollado.............................................................................................................. 120

ManejodeFiltros 121Empleo de filtros automáticos................................................................................................. 121Ajuste.del.color.y.el.tono.de.un.mapa.de.bits.......................................................................... 122Ajuste.del.brillo.y.contraste..................................................................................................... 122Curvas..................................................................................................................................... 123Invertir.los.valores.de.color.de.una.imagen............................................................................ 125Matiz.y.saturación................................................................................................................... 125Niveles.automáticos................................................................................................................. 127Niveles..................................................................................................................................... 127Relleno.de.color....................................................................................................................... 129Bordes.biselados...................................................................................................................... 129Relieve..................................................................................................................................... 130Desenfoque.............................................................................................................................. 131Buscar.bordes.......................................................................................................................... 135Convertir en alfa..................................................................................................................... 135Perfilar..................................................................................................................................... 136Añadir.ruido............................................................................................................................ 137Sombras.e.iluminaciones......................................................................................................... 138Edición de filtros automáticos................................................................................................. 141Cambio de orden de los filtros automáticos............................................................................ 141Eliminación de filtros automáticos.......................................................................................... 141Creación de filtros automáticos personalizados...................................................................... 142Almacenamiento de filtros automáticos como comandos........................................................ 143Ejemplo.desarrollado.............................................................................................................. 144

Capasymáscaras 145Capas.y.máscaras.................................................................................................................... 145Mezclas.................................................................................................................................... 146Uso.de.capas........................................................................................................................... 146Activación.de.capas................................................................................................................. 147Agregar.y.eliminar.capas........................................................................................................ 147Agregar.una.capa.................................................................................................................... 147Eliminar.una.capa................................................................................................................... 147Duplicar.una.capa................................................................................................................... 148Duplicar.un.objeto................................................................................................................... 148Visualización.de.capas............................................................................................................ 148Organización.de.las.capas...................................................................................................... 148Protección.de.capas.y.objetos................................................................................................. 149Fusión.de.objetos.en.el.panel.Capas....................................................................................... 150Utilización.compartida.de.capas............................................................................................. 151

iv Programa Nacional de Informática

Empleo.de.la.capa.de.Web....................................................................................................... 151Enmascaramiento.de.imágenes............................................................................................... 152Acerca.de.las.máscaras........................................................................................................... 152Máscaras.vectoriales............................................................................................................... 152Máscaras.de.mapa.de.bits....................................................................................................... 153Creación.de.una.máscara.a.partir.de.un.objeto.existente....................................................... 154Enmascarar.objetos.por.medio.del.comando.Pegar.como.máscara....................................... 154Enmascaramiento.de.objetos.con.el.comando.Pegar.dentro.................................................. 155Uso.de.texto.como.máscara..................................................................................................... 156Enmascarar.objetos.por.medio.del.panel.Capas.................................................................... 157Enmascarar.objetos.usando.los.comandos.Mostrar.y.Ocultar............................................... 157Agrupar objetos para formar una máscara............................................................................ 159Edición.de.máscaras................................................................................................................ 160Selección.de.máscaras.y.objetos.enmascarados.por.medio.de.las.miniaturas.de.máscara.... 160Selección.de.máscaras.y.objetos.enmascarados.por.medio.de.la.herramienta.Subselección.161Desplazamiento.de.máscaras.y.objetos.enmascarados........................................................... 161Modificación del aspecto de una máscara.............................................................................. 162Modificación de la forma en que se aplican las máscaras...................................................... 163Adición.de.objetos.a.una.selección.enmascarada................................................................... 164Sustitución,.desactivación.y.eliminación.de.máscaras............................................................ 164Mezcla.y.transparencia........................................................................................................... 165Modos.de.mezcla..................................................................................................................... 165Elementos.de.los.modos.de.mezcla.......................................................................................... 165Modos.de.mezcla.de.Fireworks............................................................................................... 166Ajuste.de.la.opacidad.y.aplicación.de.mezclas....................................................................... 167

ManejodeEstilos,símbolosyUrl 169Utilización.de.estilos,.símbolos.y.URL.................................................................................... 169Uso.de.estilos........................................................................................................................... 170Aplicación.de.un.estilo............................................................................................................ 170Creación.y.eliminación.de.estilos............................................................................................ 170Edición.de.estilos..................................................................................................................... 172Exportación.e.importación.de.estilos...................................................................................... 172Uso.de.los.estilos.predeterminados......................................................................................... 172Aplicación.de.atributos.sin.crear.estilos................................................................................. 173Manejo.de.símbolos................................................................................................................. 173Creación.de.símbolos.............................................................................................................. 174Ubicación.de.instancias.......................................................................................................... 174Edición.de.símbolos................................................................................................................. 175Edición.de.instancias............................................................................................................... 176Eliminación.de.vínculos.de.símbolo........................................................................................ 176Edición.de.propiedades.de.instancia....................................................................................... 176Importación.y.exportación.de.símbolos.................................................................................. 177Importación.de.símbolos......................................................................................................... 177

Programa Nacional de Informática v

Exportación.de.símbolos......................................................................................................... 178Utilización.de.URL.................................................................................................................. 178Creación.de.una.biblioteca.de.URL........................................................................................ 179Edición.de.direcciones.URL.................................................................................................... 179Acerca.de.URL.absolutas.y.relativas....................................................................................... 179Importar.y.exportar.URL......................................................................................................... 180

Usodedivisionesyrollover 181Divisiones,.rollovers.y.zonas.interactivas............................................................................... 181Creación.y.edición.de.divisiones............................................................................................. 182Creación.de.objetos.de.división............................................................................................... 182Creación.de.divisiones.HTML................................................................................................. 183Creación.de.divisiones.no.rectangulares................................................................................. 183Visualización.de.las.divisiones.y.de.las.guías......................................................................... 184Visualizar.y.ocultar.divisiones................................................................................................. 185Cambio.del.color.de.la.división.y.de.las.guías.de.división..................................................... 185Edición.de.divisiones............................................................................................................... 186Desplazamiento.de.guías.para.editar.divisiones..................................................................... 186Utilización.de.herramientas.para.editar.objetos.de.división.................................................. 187Incorporación.de.interactividad.sencilla.en.las.divisiones..................................................... 187Acerca.de.los.rollovers............................................................................................................ 187Creación.de.un.rollover.sencillo............................................................................................. 188Creación.de.un.rollover.desunido........................................................................................... 188Aplicación.de.varios.rollovers.a.una.división......................................................................... 190Utilización.del.panel.Comportamientos.para.añadir.interactividad.en.las.divisiones........... 190Asociación.de.comportamientos.............................................................................................. 191Edición.de.comportamientos................................................................................................... 191Utilización.de.imágenes.externas.como.imágenes.de.intercambio......................................... 192Preparación.de.las.divisiones.para.la.exportación................................................................. 193Asignación.de.URL.................................................................................................................. 193Asignación.de.un.marco.destino.............................................................................................. 193Denominación.personalizada.de.archivos.de.división............................................................ 194Modificar los criterios predeterminados de denominación automática.................................. 194Definición de la exportación de tablas HTML........................................................................ 196Utilización.de.zonas.interactivas.y.mapas.de.imagen............................................................. 197Creación.de.zonas.interactivas................................................................................................ 197Ejemplo.desarrollado.............................................................................................................. 198

Generacióndebotonesymenúemergente 199Creación.de.botones.y.menús.emergentes............................................................................... 199Creación.de.símbolos.de.botón............................................................................................... 200Acerca.de.los.estados.de.botón................................................................................................ 200

vi Programa Nacional de Informática

Uso.del.Editor.de.botones....................................................................................................... 201Creación.de.un.botón.sencillo.de.dos.estados......................................................................... 201Creación.de.un.botón.con.tres.o.cuatro.estados...................................................................... 202Uso de filtros biselado para dibujar estados de un botón....................................................... 203Insertar.botones.en.un.documento.......................................................................................... 203Importación.de.símbolos.de.botón.......................................................................................... 204Edición.de.símbolos.de.botón.................................................................................................. 205Edición.de.las.propiedades.de.símbolo................................................................................... 205Edición.de.las.propiedades.de.instancia................................................................................. 205Definición de las propiedades interactivas de botón............................................................... 206Modificación del área activa de un símbolo de botón............................................................. 206Definición de la URL de un símbolo de botón o instancia...................................................... 207Configuración del destino de un botón.................................................................................... 208Definición del texto alternativo (alt) para un símbolo de botón o instancia........................... 209Creación.de.barras.de.navegación.......................................................................................... 209Creación.de.menús.emergentes............................................................................................... 210El.Editor.de.menú.emergente.................................................................................................. 210Creación.de.un.menú.emergente.básico.................................................................................. 211Creación.de.submenús.en.un.menú.emergente........................................................................ 212Diseño.del.aspecto.de.un.menú.emergente.............................................................................. 213Adición.de.estilos.de.menú.emergente..................................................................................... 214Definición de las propiedades avanzadas de menú emergente............................................... 215Posición.de.los.menús.y.submenús.emergentes....................................................................... 216Edición.de.menús.emergentes.................................................................................................. 217Exportación.de.menús.emergentes.......................................................................................... 218

Animación 219Generación.de.animaciones.................................................................................................... 219Creación.de.una.animación..................................................................................................... 220Uso.de.símbolos.de.animación................................................................................................ 221Creación.de.símbolos.de.animación........................................................................................ 221Edición.de.símbolos.de.animación.......................................................................................... 222Cambio.de.las.propiedades.de.animación............................................................................... 222Eliminación.de.animaciones.................................................................................................... 223Edición.de.imágenes.de.símbolo............................................................................................. 223Edición.de.trazados.de.movimiento.de.símbolos..................................................................... 224Utilización de fotogramas....................................................................................................... 224Configuración de la demora de fotogramas............................................................................ 224Mostrar u ocultar fotogramas durante la reproducción......................................................... 225Asignación de nombres a fotogramas de animación............................................................... 225Adición, desplazamiento, copia y eliminación de fotogramas................................................ 226Desplazamiento.de.objetos.seleccionados.en.el.panel.Fotogramas....................................... 227Utilización compartida de capas entre fotogramas................................................................ 227Visualización de objetos dentro de un fotograma específico................................................... 227

Programa Nacional de Informática vii

Utilización.de.papel.cebolla.................................................................................................... 228Interpolación........................................................................................................................... 228Presentación.preliminar.de.una.animación............................................................................ 229Exportación.de.la.animación................................................................................................... 229Configuración de animación repetida..................................................................................... 230Configuración de transparencia.............................................................................................. 230Optimización.de.una.animación.............................................................................................. 230Formatos.de.exportación.de.animación.................................................................................. 231Uso.de.animaciones.existentes................................................................................................ 231Uso.de.varios.archivos.como.una.única.animación................................................................ 231

viii Programa Nacional de Informática

Introducción“REnovaRsE paRa ganaR”. Esta frase se cumple exactamente tal como es, en Internet. No se trata solamente de tener alojado un sitio Web, debemos mejorarla y administrarla frecuentemente. Es un consejo que le damos constantemente a nuestros alumnos, por que en Internet todo “pasa de moda” muy rápido.

En la actualidad, las personas que se conectan a Internet en busca de productos, o servi-cios, como los que su sitio Web brinda, no se dedican a búscar y analizar entre los miles de sitios que pueden encontrar en Internet, para poder quedarse al final con la mejor oferta, ahoRa los usuarios adquieren los productos y/o servicios en base a lo que los sitios web encontrados les transmiten, de aquel sitio Web que nos ofrece mejor y ma-yor seguridad, mayor garantía y lo que es mejor aquellos sitios web donde los usuarios se sienten más comodos, de aquellos diseños de sitios Web que le han impactado. En Internet también se refleja la famosa frase de “todo IngREsa poR El ojo“.

La oferta que colocamos en nuestro sitio Web tal vez puede ser una de las mejores pero si su web no transmite seriedad, confianza, eficacia y elegancia. ¿Qué se puede esperar de una posible relación comercial con una empresa que descuida lo que es el primer punto de contacto con sus nuevos clientes?.

“sólo una web bien construida y con un diseño personalizado sabrá retener sus visitas y transformarlas en clientes”.

Con Macromedia Fireworks 8 el proceso creativo de sitios Web resulta más facil y divetido, Fireworks es la solución definitiva para el diseño y producción de gráficos Web profesionales. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos Web. Además nos permite una mejor integración con programas como Flash y Dreamweaver.

IntroducciónEnestecapítulo

Aprenderá a conocer el tratamiento de imágenes en computadoras.

Objetivos específicos:

Al finalizar este capítulo usted podrá:

Reconocer al escenario actual del Web.

Identificar los conceptos básicos acerca del tratamiento de imágenes en com-putadora.

Diferenciar entre imágenes bitmap y vectoriales.

Programa Nacional de Informática �

Capítulo I

Escenario actual del WebEn la actualidad los sitios Web deben de manejar los siguientes aspectos:

Mejoradeldiseño

Los diseñadores Web permanentemente deben mejorar la ImagEn CoRpoRatIva dE una EmpREsa En la WEb, es muy importante para los usuarios que visitan constantemente su sitio web ver las mejoras en el aspecto del diseño de su sitio Web. Hoy en día los visitantes de nuestra Web distinguen perfectamente si es interesante o no, son muy exigentes y hay mucha competencia. Imagínese que usted está buscando información sobre un producto en Internet, se encuentra una página que comparada con otras, se ve muy pasada de moda. No dudamos que usted se irá a mirar otra Web, porque realmente esa no le ofrece mucha confianza, por lo tanto la empresa tampoco le inspirará confianza. Esto es la realidad en las Web actuales.

Mayorusabilidad

Entendemos por usabilidad, a la forma cómo podemos desplazarnos libremente por una Web sin dificultad alguna. Podemos tener la Web más impresionante y atractiva del mundo pero si para el usuario le resulta complicado navegar y encontrar información, el resultado es que hemos invertido mal en nuestra Web ya que no nos da el éxito esperado. Debemos de tener en cuenta que la página Web es una forma de ComunICaRnos con el mercado, con clientes, proveedores, con todos los usuarios.

Mayorseguridad

Algo muy importante en la actualidad es la seguridad que debe de tener todo sitio Web, para dar confianza a los usuarios finales. Se deben revisar los posibles problemas de seguridad de los datos y de la integridad de la página Web, dar solución inmediata para evitar problemas.

Mejoraccesibilidad

Resulta un poco paradójico que estemos en la era de la información, de traspasar fronte-ras desde nuestro ordenador, y al mismo tiempo hagamos de Internet algo no accesible para un sector importantísimo de la sociedad mundial. Accesibilidad en la Web significa que un sitio Web sea accesible para todos los usuarios, ya sean discapacitados, usuarios con problemas de poca velocidad en conexión, etc.

las imágenes en computadoraLas imágenes digitales bidimensionales se dividen en dos tipos: Imágenes vectoriales y de mapa de bits. Fireworks nos permite trabajar con ambos tipos de imágenes y lo que es mejor puede integrar ambos tipos. Con Fireworks se pueden incrustar imágenes de mapa de bits dentro de un objeto vectorial y viceversa.

Introducción

� Programa Nacional de Informática

Imágenes de mapa de bitsLas imágenes de mapa de bits están formadas por puntos, llamados píxeles, organiza-dos en una cuadrícula. La pantalla del equipo es una gran cuadrícula de píxeles. La imagen está determinada por la posición y el valor de color de cada píxel de la cuadrícula. Cada punto tiene asignado un color. Cuando se presentan con la resolución adecuada, los puntos encajan entre sí como las teselas de un mosaico y forman la imagen. Cuando se edita una imagen de mapa de bits, se modifican los píxeles, no las líneas y curvas. Las imágenes de mapa de bits dependen de la resolución, es decir, los datos que las definen están fijos en una cuadrícula que tiene un tamaño determinado. Cuando se aumenta el tamaño de un elemento gráfico de mapa de bits, los píxeles se redistribuyen en la cuadrícula, lo que puede dar lugar a que sus bordes queden desiguales. La visualización de un elemento gráfico de mapa de bits en un dispositivo de salida con menor resolución que la propia imagen también puede reducir su calidad.

objetos vectorialesLos elementos gráficos vectoriales representan las imágenes mediante líneas y curvas, denominadas vectores, que incluyen información de color y posición. Los vectores se defininen por medio de un conjunto de puntos que forman un trazado. Cuando se edita

una imagen vectorial, se modifican las pro-piedades de las líneas y curvas que describen su forma. Las imágenes vectoriales son inde-pendientes de la resolución, lo que significa que es posible desplazar, cambiar el tamaño, alterar la forma y modificar el color de una imagen vectorial, así como visualizarla en dispositivos de salida de diferente resolución, sin que cambie la calidad de su aspecto.

Diseño gráfico frente al WebEl diseño gráfico es un medio de comunicación visual. Se ocupa de organizar imagen y texto para comunicar un mensaje. Puede aplicarse a muchos medios de comunicación, ya sean impresos, digitales, audiovisuales, u otros

El diseño web está orientado a la comunicación visual de nuestros productos o servicios empleando la tecnología de internet, con la ventaja de que hay millones de usuarios en el mundo que pueden observar los productos o servicios que ofrecemos.

Capítulo I : Introducción


Requisitos del sistemaPlataforma Microsoft Windows™

Procesador Intel Pentium III de 800 MHz (o equivalente) y versiones pos-teriores

Windows 2000, Windows XP

256 MB de RAM (se recomienda 1 GB para ejecutar más de un producto de Studio 8 de forma simultánea)

Pantalla de 16 bits de 1024 x 768 (se recomienda de 32 bits)

880 MB de espacio en disco disponible

Conceptos básicosmacromedia Fireworks 8 es la solución definitiva para el diseño y producción de gráficos Web profesionales. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos Web.

Utilizamos Fireworks 8 para crear, editar y animar gráficos Web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible

El espacio de trabajo de Fireworks

En este capítulo

Conocerá y personalizará el entorno de trabajo de macromedia Fireworks.



Conocer el entorno de trabajo Fireworks.

Emplear los elementos del entorno de trabajo.

administrar el entorno de trabajo.

personalizar el entorno de trabajo.

administrar los modos de visualización.

Configurar las preferencias.


Capítulo II

crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfa-cer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación.

Fireworks 8 se integra fácilmente con otros productos de Macromedia, como drea-mweaver, Flash, Freehand y director, y con otros editores HTML y aplicaciones gráficas de uso frecuente para ofrecer una solución Web global. Los gráficos de Fi-reworks pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se emplee.

Ingresar a FireworksPara iniciar macromedia Fireworks 8 realice los mismos pasos que se emplean para ejecutar cualquier aplicación Windows. Podemos iniciar el programa mediante el botón Inicio, opción todos los programas, nos dirigimos sobre la carpeta macromedia y damos clic sobre macromedia Fireworks 8.

También podemos ingresar a macromedia Fireworks 8 mediante la Opción Ejecutar que se encuentra dentro del botón Inicio, en el cuadro de texto de la etiqueta abrir digitamos Fireworks.

página de Inicio de macromedia FireworksAl iniciar macromedia Fireworks sin ningún documento abierto, por cualquiera de las dos formas explicadas en líneas arriba, aparece la página de inicio de Fireworks

Ilustración: Ingresar a macromedia Fireworks 8.

Espacio de trabajo de Fireworks

10 Programa Nacional de Informática

en el entorno de trabajo. La página de inicio le ofrece un acceso rápido a los tutoriales de Fireworks, archivos recientes y Fireworks Exchange, en el que podemos añadir nuevas capacidades a algunas funciones de Fireworks. El empleo de la página de inicio es muy semejante a la de una página Web. Dé clic en cualquiera de los elementos que aparecen para utilizarlos.

Desactivarlapáginadeinicio

Ejecute Fireworks sin abrir ningún documento. Aparecerá la página de inicio.

Dé clic en no volver a mostrar este mensaje.

El espacio de trabajo de FireworksLa pantalla inicial de Fireworks, similar a las aplicaciones Windows, contiene los ele-mentos propios del mismo. Revisemos cada una de las partes de la pantalla:

barra de titulo, en esta barra usted puede observar el nombre de la aplicación Macro-media Fireworks 8 y el nombre del documento activo de Fireworks, si todavía no ha guardado el documento por defecto aparece Sin titulo-1.png y el zoom actual.

barra de Control, si usted pulsa clic sobre este botón aparece un menú que le permite cerrar, maximizar, minimizar, restaurar, mover o cambiar el tamaño de la ventana de Fireworks, Al dar doble clic sobre este, se cierra la aplicación no si antes preguntarle si desea guardar el documento actual. Su icono es un círculo con las letras fw que sim-boliza a la aplicación.

1.

2.

Ilustración:página de inicio de macromedia Fireworks.

Capítulo II : Espacio de trabajo de Fireworks

Programa Nacional de Informática 11

barra de menús, en esta barra podemos observar a todos menús disponibles en Fi-reworks 8, al dar clic sobre cualquiera de ellas se visualizan sus respectivas opciones que contienen cada uno de ellos.

panel herramientas, este panel contiene todas las herramientas de diseño de Fireworks. Cuando en el ángulo inferior derecho de una herramienta aparece un triángulo pequeño, indica que la herramienta forma parte de un grupo, si damos un clic se visualiza el grupo de herramientas. Está organizado en seis categorías: Seleccionar, Mapa de bits, Vector, Web, Colores y Ver. Este Panel es personalizable, es decir que podemos agregar más botones o quitar algunos de los botones existentes, además podemos colocarlo flotante en el Entorno de trabajo, mediante un arrastre en las dos líneas punteadas ubicadas sobre seleccionar.

Inspector de propiedades, nos permite editar las propiedades de la selección, herra-mienta o documentos actuales. De forma predeterminada, el Inspector de propiedades está acoplado en la parte inferior del área de trabajo. El Inspector de propiedades puede abrirse a media altura, mostrando dos filas de propiedades, o por completo, mostrando cuatro filas.

paneles, los paneles ayudan a modificar aspectos de elementos u objetos seleccionados en el documento. Los paneles están inicialmente acoplados en grupos a lo largo de la parte derecha de la pantalla. Con los paneles se puede trabajar en fotogramas, capas, símbolos y otros. Los paneles pueden arrastrarse por separado, por lo que es posible agruparlos en función de las necesidades del diseñador. Algunos paneles no se agrupan con otros paneles de forma predeterminada, pero puede agruparlos si lo desea. Para

Ilustración: Espacio de trabajo de Fireworks.



ocultar o mostrar dé clic en la flechita horizontal ubicado al lado izquierdo del grupo de paneles.

botón Exportación Rápida, este botón nos permite exportar y/o enviar los archivos de Fireworks a varias aplicaciones de Macromedia, como Dreamweaver, Flash, Direc-tor y Macromedia FreeHand MX. Además, es posible exportar archivos a Photoshop, FrontPage, Adobe GoLive e Illustrator o visualizar en el navegador seleccionado.

botones de presentación preliminar, los botones de vista previa muestran la imagen tal como aparecería en un navegador Web, conforme a los parámetros de optimización. Puede ver el comportamiento de los rollovers y las barras de navegación, además de las animaciones. Las vistas 2 y 4 copias muestran datos adicionales que varían en función del tipo de archivo seleccionado.

Área de dibujo o lienzo, en esta área creamos todos los diseños en Fireworks, se puede cambiar a un lienzo transparente, modificar color de fondo, cambiar el tamaño o ajustar al contenido.

Reglas, puede visualizar opcionalmente las reglas para organizar disposición del tra-bajo.

barra de estado, en esta barra podemos visualizar el peso del archivo, la velocidad de conexión a Internet del archivo, el formato del documento, los controles de animación, el zoom, etc.

apertura de archivos en FireworksEn Fireworks 8 es fácil abrir y editar gráficos vectoriales y de mapa de bits.

Abrirunarchivo

Nos dirigimos al menú archivo y seleccionamos la opción abrir.

En el cuadro de diálogo abrir, seleccione el archivo y dé clic en abrir.

El cuadro de dialogo abrir tiene varias opciones las que describimos a continuación:

buscar en, podemos abrir este cuadro de lista dando clic en el o también en la flechita hacia abajo que se muestra en parte derecha. En él se ve un listado de carpetas alojadas en el Escritorio ordenadas en forma de árbol.

lista de archivos, en este cuadro se muestran los archivos contenidos en la carpeta que este seleccionada en el cuadro de lista buscar en. Cada archivo aparece en la lista con su respectivo nombre y precedido del icono de Fireworks.

nombre, en este cuadro de texto se muestra el nombre de archivo que se ha seleccio-nado, también podemos escribir el nombre del archivo que deseamos aperturar.

1.

2.



tipo, este cuadro de lista muestra todos los tipo de archivos que podemos abrir.

abrir como “sin título”, esta casilla de verificación la activamos si deseamos abrir un archivo sin sobrescribir la versión anterior, una vez abierto el archivo podemos guardarlo con un nombre diferente y en una ruta diferente si deseamos. Por defecto la barra de titulo muestra sin titulo-1.

abrir como animación, esta casilla de verificación la activamos cuando deseamos abrir un archivo como animación, en la barra de titulo de Fireworks se muestra sin título-1.png donde png es la extensión nativa de Firework.

subir un nivel, este botón nos permite dirigirnos a una carpeta de nivel superior en el cuadro de lista buscar.

Crear nueva carpeta, esta opción nos permite crear una nueva carpeta en la ruta de-seada sin tener la necesidad de abandonar el cuadro de dialogo abrir.

menú ver, despliega un menú con cinco opciones para elegir la forma como se van a mostrar los archivos en el cuadro de dialogo Abrir. Dichas opciones son: Vistas en minia-tura, Mosaicos, Iconos, Lista y Detalles, tal como se muestra en la siguiente figura.

vista previa, en este recuadro se visualiza una imagen previa del archivo que hemos seleccionado en la lista de archivos. Dicha previsualización se realiza siempre, inde-pendiente del tipo de vista que este seleccionado en el menú ver del cuadro de dialogo abrir

Creación de nuevos archivos en FireworksAl crear un nuevo archivo o documento en macromedia Fireworks, se crea un archivo PNG. png es el formato de archivo nativo de Fireworks. Este archivo se puede con-

Ilustración: Cuadro de diálogo abrir.



vertir fácilmente a otros formatos de gráficos Web, como JPEG, GIF o GIF animado.

También se pueden ex-portar o guardar imá-genes en muchos otros formatos frecuentemen-te utilizados fuera de la Web, como TIFF y BMP.

Sean cuales sean los parámetros de optimiza-ción elegidos, el archivo PNG de Fireworks se conserva para facilitar ediciones posteriores.

Para crear un gráfico Web en Fireworks, primero es preciso configurar un documento nuevo o abrir uno existente. Las opciones de configuración pueden ajustarse después en el Inspector de propiedades.

Crearunarchivonuevo

Nos dirigimos al Menú archivo y damos clic en la opción nuevo.

Se abre el cuadro de diálogo nuevo documento.

anchura, este cuadro de texto nos permite ingresar el ancho que va a tener nuestro lienzo. Por defecto para el diseño de interfaces o entornos web, trabajamos con el sis-tema de medidas Píxeles.

altura, este cuadro de texto nos permite ingresar la altura que va a tener nuestro lienzo. Se trabaja con el mismo sistema de medidas de la anchura

Resolución, en este cuadro de texto ingresamos la resolución que va a tener nuestro lienzo. Para internet la resolución adecuada es �2 píxeles/pulgada como mínimo y �� píxeles/pulgada como máximo. La cantidad de píxeles de altura y anchura de una ima-gen de mapa de bits se denomina dimensiones en píxeles de la imagen. El número de píxeles por pulgada (ppi) mostrado en un lienzo determina la resolución de imagen.

Color del lienzo, en el cuadro de grupo color de lienzo podemos seleccionar entre las opciones: Blanco, transparente y personalizado. Si deseamos preparar la imagen solo con la silueta de uno o varios objetos sin color de fondo, para emplearlo en otras apli-caciones compatibles con Fireworks es recomendable elegir Transparente, si deseamos

Ilustración: Cuadro de diálogo nuevo documento.



emplear un color personalizado damos clic en la ventana emergente del cuadro de colores personalizados que por defecto aparece como negro, para elegir el color deseado.

ventajas de crear un archivo png.El archivo de origen PNG siempre se puede modificar. Es posible seguir introduciendo cambios incluso después de exportar el archivo para utilizarlo en la Web.

En el archivo PNG es posible dividir imágenes complejas en porciones y después exportarlas en archivos distintos de formato diferente y diversos parámetros de opti-mización.

visualización y navegación por el documentoPodemos controlar el aumento o reducción del zoom en el documento, el número de vistas y su modo de visualización. Además, es fácil desplazarse por el documento para ver otras partes del mismo, lo cual resulta útil si éste se amplía y el lienzo ya no está visible en su totalidad.

Utilización de las fichas de documentoCuando el documento activo está maximizado, podemos elegir fácilmente cualquiera de los documentos abiertos utilizando las fichas de documento que aparecen en la par-te superior de la ventana de documento. Todos los documentos abiertos muestran su nombre en una ficha que aparece encima de los botones de vistas.

Seleccionarotrodocumentocuandoelactualestámaximizado

Dé clic en la ficha del documento que desee ver.

aumento y desplazamiento de un documentoMacromedia Fireworks nos permite ampliar y reducir en porcentajes de aumento pre-establecidos o definidos por el usuario.

Aumentarenincrementospreestablecidos

Seleccione la herramienta Zoom y de un clic en la ventana del documento para especificar el nuevo punto central. Con cada clic, la imagen se amplía al siguien-

1.

Ilustración: Uso de las fichas de documentos.



te aumento preestablecido.

En el menú emergente Establecer nivel de aumento de la parte inferior de la ventana de documento seleccionamos un nivel de aumento.

Nos dirigimos al menú ver y seleccionamos acercar.

De un clic en el menú ver, opción aumentar y reducir y seleccionamos un nivel de aumento preestablecido.

Alejareldocumentoenincrementospreestablecidos

Seleccione la herramienta Zoom y pulse la tecla alt mientras da clic en la venta-na de documento. Cada clic reduce al siguiente porcentaje preestablecido.

Seleccione un nivel de alejamiento en el menú emergente Establecer nivel de aumento de la parte inferior de la ventana de documento.

Nos dirigimos al menú ver y seleccionamos alejar.

De un clic en el menú ver, opción aumentar y reducir y seleccionamos un nivel de aumento preestablecido.

Ampliarunáreadeterminadasinlosaumentospreestablecidos

En el panel herramientas seleccionamos Zoom.

Arrastramos el puntero por la parte de la imagen que desee ampliar.

El tamaño que indica el cuadro de selección de aumento determina el porcentaje exacto de aumento, que se muestra en el cuadro Establecer nivel de aumento.

Alejareldocumentoapartirdeunáreadeterminada

Pulse la tecla alt mientras arrastra una selección con la herramienta Zoom.

1.

2.

Ilustración: Herramientas Zoom y mano.



Recuperarelniveldeaumentodel100%

Dé doble clic en la herramienta Zoom del panel de herramientas.

Desplazarseporeldocumento

Seleccione la herramienta mano del panel herramientas.

Arrastre el cursor con forma de mano sobre la imagen.

Ajustareldocumentoenlavistaactual

Dé doble clic en la herramienta mano.

Para ajustar el tamaño del zoom al tamaño de la vista actual del documento mediante el método abreviado pulse la tecla CtRl acompañado de la tecla Cero (0) del teclado numérico.

modos de visualización para gestionar el espacio de trabajoLos botones de modo de visualización de la sección ver del panel herramientas se utilizan para controlar la disposición del área de trabajo. Podemos visualizar a pantalla completa con o sin menú o modo estándar.

Se pueden seleccionar tres modos de visualización:

ModoPantallaestándar

Es la vista predeterminada de la ventana de documento. Si ingresamos a los otros modos y luego retornamos a este modo, la ventana del documento actual se restaura.

ModoPantallacompletaconmenús

Mediante esta vista, maximizamos la ventana del documento activo sobre un fondo gris con los menús, barras de herramientas, barras de desplazamiento y paneles visibles. En esta vista se oculta la barra de título.

ModoPantallacompleta

Es la vista maximizada de la ventana de documento sobre un fondo negro sin menús, barras de herramientas ni barras de título visibles.

Cambiar el modo de visualizaciónSi deseamos cambiar el modo de visualización del documento, seguimos unos de estos procedimientos:

1.

2.

Modosdevistas



Cambiaramododepantalla completa con menús.

De clic en el botón modo pantalla completa con menús de la sección ver en el panel herramientas.

Cambiaramododepantalla completa

De clic en el botón modo pantalla completa de la sección ver en panel herra-mientas.

Volveramododepantallaestándar

De clic con el botón derecho del mouse en la ventana de documento y seleccione salir del modo de pantalla completa, o haga clic en el botón modo pantalla estándar de la sección ver del panel herramientas.

visualización de vistas múltiples de un documentoPodemos utilizar varios tipos de vistas para visualizar un documento con diferentes niveles de aumento a la vez. Los cambios introducidos en una vista se reflejan automá-ticamente en las demás vistas del mismo documento. Es recomendable verificar que el documento no está maximizado en el área de trabajo antes de crear vistas múltiples del mismo.

Esto permite mostrar simultáneamente vistas múltiples del documento.

Abrirunavistaadicionaldeundocumentocondistintosvaloresdeau-mento

Nos dirigimos al menú ventana y seleccionamos duplicar ventana.

Elija un valor de aumento para la nueva ventana.

Organizarlasvistasdeldocumentoenmosaico

Ir al menú ventana y seleccionamos mosaico horizontal o mosaico vertical.

Cerrarunavistadeldocumento

Dé clic en el botón Cerrar de la ventana.

Control de la actualización en pantalla del documentoLos modos de visualización influyen en la presentación en pantalla de un documento, no así en los datos del objeto ni en la calidad del resultado.

1.

2.



Controlarlaactualizaciónenpantalladeldocumento

Nos dirigimos al menú ver y seleccionamos pantalla completa.

presentación preliminar del documentoLos botones de vista previa muestran la imagen tal como aparecería en un navegador Web, conforme a los parámetros de optimización. Puede ver el comportamiento de los rollovers y las barras de navegación, además de las animaciones.

Vistaprevia

El botón de vista previa del documento muestra el tamaño total, el tiempo de descar-ga estimado y el formato del archivo. El tiempo de descarga estimado es la media de tiempo que llevará la descarga de todas las divisiones y marcos del documento si se utiliza un módem de ��K.

Lasvistas2copiasy4copias

Estas vistas muestran datos adicionales que varían en función del tipo de archivo y a los parámetros de optimización del documento seleccionados.

panel herramientasEste panel contiene todas las herramientas que Fireworks utiliza para diseñar. Está organizado en seis categorías: Seleccionar, Mapa de bits, Vector, Web, Colores y Ver. Podemos personalizar este Panel, se pueden agregar o quitar más botones, además podemos colocarlo flotante en el Entorno de trabajo, mediante un arrastre en las dos líneas punteadas que se encuentran sobre la categoría Seleccionar.

Ilustración:Vista previa y borrador del documento.

Ilustración: Botón Original y botones de vista previa del documento



Seleccióndeunaherramientaenungrupodeherramientas

Cuando en el ángulo inferior derecho de una herramienta aparece un triángulo pequeño, indica que la herramienta forma parte de un grupo. Por ejemplo la herramienta Rec-tángulo es una formas básicas, que incluye las herramientas de Elipse y Polígono, así como las herramientas de formas automáticas.

Seleccionarotraherramientadeungrupodeherramientas

Realice los siguientes procedimientos.

Dé clic en el icono de la herramienta y mantenga pulsado el botón del mouse.

Se muestra un menú emergente con los iconos, los nombres y las teclas de método abreviado de las herramientas.

Desplace el puntero para seleccionar la herramienta que desee y suelte el botón.

La herramienta aparece en el panel herramientas, mientras que sus opciones aparecen en el Inspector de propiedades.

1.

2.

3.

4.

Ilustración: Herramientas disponibles en el panel herramientas.



utilización del Inspector de propiedadesEl Inspector de propiedades es un panel que varía según el contexto y que muestra las propiedades de la selección actual, las opciones de la herramienta seleccionada o las propiedades del documento.

Desacoplar el Inspector de propiedades:

Arrastre el asa para mover o desplazar del ángulo superior izquierdo a otra parte del espacio de trabajo.

AcoplarelInspectordepropiedadesenlaparteinferiordeláreadetra-bajo

Arrastre la barra lateral del Inspector de propiedades a la parte inferior de la pantalla.

ExpandirelInspectordepropiedadesdemediaalturaaalturacompletaparaverotrasopciones

Realice uno de estos procedimientos

Dé clic en la flecha de ampliación situada en el ángulo inferior derecho del Inspector de propiedades.

Dé clic en el icono del menú de opciones del ángulo superior derecho del Ins-pector de propiedades y elija altura completa.

ReducirelInspectordepropiedadesamediaaltura

Realice uno de estos procedimientos

Dé clic en la flecha de ampliación situada en el ángulo inferior derecho del Ins-pector de propiedades.

Ilustración: Inspector de propiedades.



Dé clic en el icono del menú de opciones del ángulo superior derecho del Ins-pector de propiedades y elija media completa.

ContraerelInspectordepropiedadescuandoestáacoplado

Realice uno de los siguientes procedimientos

Dé clic en la flecha de ampliación o en el título del Inspector de propiedades.

Dé clic en el icono del menú de opciones del ángulo superior derecho del Ins-pector de propiedades y elija Contraer grupo de paneles.

administración de panelesUn panel es un tipo particular de controles flotantes que sirven de gran apoyo en Fi-reworks por que nos permiten modi-ficar aspectos de elementos u objetos seleccionados en el documento. Con los paneles se puede trabajar en fo-togramas, capas, símbolos, muestras de color y otros. Los paneles pueden arrastrarse por separado, por lo que es posible agruparlos en función de las necesidades propias.

Algunos paneles pueden aparecer agru-pados de forma predeterminada y otros no.

Los siguientes paneles pueden contener otros paneles:

Activos

Colores

Fotogramas e Historial

Los paneles Optimizar, Edición de imagen, Capas, Formas, Propiedades de forma automática, Información, Comportamientos, Buscar y Alinear no están agrupados con otros de manera predeterminada, aunque puede agruparlos si lo desea.

Desacoplarodesplazarungrupodepaneles

Nos dirigimos al lado izquierdo de la barra de titulo del panel que deseamos des-acoplar y arrastramos hacia la izquierda para alejarlo del área de acoplamiento de la derecha de la pantalla (Área de paneles).

El panel queda flotante tal como se muestra a continuación

1.

2.

Ilustración: Administración de paneles.

Paradesacoplar



Desacoplar un panel de ungrupodepaneles

Nos dirigimos al menú opcio-nes de la barra de titulo del grupo de paneles, selecciona-mos agrupar con y damos clic en nuevo grupo de pa-neles. (El nombre del coman-do agrupar con cambia en función del nombre del panel activo.) El panel aparece en un nuevo grupo de paneles pro-pio.

Acoplarunpanelaláreadeacoplamientodepaneles

Nos dirigimos al lado izquierdo de la barra de titulo del panel que deseamos acoplar y arrastramos hacia el área de acoplamiento de paneles.

Acoplarunpanelaungrupodepaneles

Nos dirigimos al menú opciones de la barra de titulo del panel que deseamos agrupar, seleccionamos agrupar <<nombre del panel>> con y damos clic en el <<nombre del panel>> que deseamos agruparlo. (El nombre del comando agrupar con cambia en función del nombre del panel activo.). El panel aparece en nuevo grupo de paneles propio con los nombres de los paneles agrupados.

Cerrarunpanelacoplable

Dé clic en el menú ventana y seleccione el nombre del panel a cerra.

También podemos cerrar un panel dando un clic en el menú opciones que se encuentra al lado derecho de la barra de titulo del panel y elegimos Cerrar gru-po de paneles.

Cerrartodoslospaneles

Nos dirigimos al menú ventana y seleccionamos ocultar paneles.

Mediante el método abreviado presionamos la tecla F4.

Contraeroexpandirunpaneloungrupodepaneles

Dé clic en el título del panel o grupo de paneles.

Ilustración: Panel Capas desacoplado.

Paraacoplar



Dé clic en la flecha de ampliación del ángulo superior izquierdo del panel o gru-po de paneles.

uso del panel historial para deshacer y repetir varias acciones El panel Historial permite ver, modificar y repetir las acciones realizadas para crear el documento. En este panel se enumeran las últimas acciones realizadas en Fireworks hasta el número especificado en Pasos de Deshacer en el cuadro de diálogo Preferencias. El panel Historial nos permite realizar lo siguiente:

Deshacer y rehacer rápidamente las acciones más recientes, elegir las últimas acciones realizadas en el panel Historial y repetirlas.

Copiar comandos seleccionados en el Portapapeles como equivalente a texto de JavaScript, guardar un grupo de acciones recientes como comando personaliza-do y seleccionarlo en el menú Comando para volver a utilizarlo como un solo comando.

Deshaceryrehaceracciones

Dirigase al menú ventana y seleccione historial para abrir el panel Historial.

Suba o baje el marcador de deshacer.

Repetiracciones

Realice las acciones que usted desee.

Realice una de las siguientes acciones para resaltar en el panel historial las ac-ciones que se repetirán:

Para resaltar una acción, dé clic sobre ella.

Para resaltar varias acciones, pulse la tecla Control y dé clic sobre ellas.

Pulse la tecla mayús mientras hace clic para resaltar varios comandos consecutivos.

Dé clic en el botón Reproducir de la parte inferior del panel historial.

1.

2.

1.

2.

3.

Ilustración: Creación de dos formas básicas y el resultado al deshacer el elipse mediante el panel historia.


Programa Nacional de Informática 2�

Guardaraccionesparasuutilizaciónposterior

En el panel historial resalte las acciones que desee guardar.

Dé clic en el botón guardar pasos como un comando del panel historial.

Introduzca un nombre para el comando y haga clic en aceptar.

Utilizarelcomandopersonalizadoguardado

Seleccione el nombre del comando en el menú Comandos.

menús emergentesEste menú también denominado contextual aparece cuando pulsamos el botón derecho del mouse sobre le elemento que deseamos, dicho menú contextual cambia de opciones de acuerdo al elemento donde hemos pulsado el botón derecho.

Definición de los principales Paneles

PanelOptimizar

Este panel nos permite administrar los parámetros que supervisan el tamaño, el tipo de archivo, la paleta de colores del archivo o la división que se van a exportar.

PanelEdicióndeimagen

Este panel incluye las herramientas y comandos de transformación, ajuste de colores, filtros y opciones de edición de imágenes más empleadas por Fireworks.

1.

2.

3.

Ilustración: Menú emergente del lienzo.


2� Programa Nacional de Informática

PanelCapas

Permite organizar la estructura de un documento de Fireworks y contiene opciones para crear, eliminar y administrar capas. Contiene además opciones de allanar, fusionar, visualizar u ocultar capas, bloquear y compartir capas.

PanelFotogramas

Contiene opciones para crear y administrar animaciones las cuales son construidas a partir de la creación de varios fotogramas. Podemos crear y eliminar fotogramas, dis-tribuir un archivo en fotogramas, controlar el tiempo y repetición de la animaciones.

PanelPropiedadesdeformaautomática

Este panel nos permite administrar los cambios en las propiedades de una forma auto-mática que se inserte en un documento.

PanelEstilos

Este panel nos permite crear, almacenar y aplicar estilos a objetos o texto. Los estilos son un conjunto de propiedades y atributos almacenados que se pueden aplicar a un objeto o a un texto.

PanelBiblioteca

Este panel contiene símbolos gráficos, de botón y de animación. Es fácil arrastrar ins-tancias de estos símbolos desde el panel Biblioteca al documento. También es posible realizar cambios globales en ellas modificando solamente el símbolo.

PanelURL

Permite crear bibliotecas que contengan valores URL utilizados con frecuencia. En este panel podemos añadir, editar y organizar direcciones URL los cuales pueden ser instanciados varias veces en un objeto.

ElpanelComportamientos

Nos permite controlar los comportamientos, que determinan la reacción que se produce en las zonas interactivas o las divisiones al mover el mouse.

Configurar preferenciasLas preferencias son controles de ajustes que nos permiten administrar el aspecto gene-ral de la interfaz de usuario así como opciones relacionadas con funciones específicas. Entre ellas tenemos los colores predeterminados, las opciones de herramientas, las ubicaciones de las carpetas y las conversiones de archivo.



Configurar las preferencias en Fireworks 8 realizamos los siguientesprocedimientos.

Nos dirigimos al menú Edición y seleccionamos la opción preferencias.

Seleccione el grupo de preferencias que desea modificar: General, Edición, Eje-cutar y editar, Carpetas o Importar.

Realice las modificaciones que desee y dé clic en aceptar.

Restaurar preferenciasSi elimina el archivo de preferencias, se restaurarán las preferencias en sus ajustes originales. La primera vez que se ejecuta Fireworks después de eliminar el archivo de preferencias, se crea un nuevo archivo de preferencias que restaura la configuración original de Fireworks.

Cierre Fireworks.

Localice el archivo de preferencias de Fireworks 8 en su disco duro y bórrelo.La ubicación exacta de este archivo varía de un sistema a otro. En la ilustración que mostramos en la siguiente grafica hacemos referencia a la ubicación del archivo en el sistema operativo Windows Xp.

Reinicie Fireworks.

1.

2.

3.

1.

2.

3.

Ilustración: Ubicación del archivo Preferencias en Windows Xp

Ilustración: Cuadro de diálogo preferencias.



Trabajando con Objetos Bitmap

Enestecapítulo

Aprenderá a trabajar con Objetos Bitmap.



Reconocer un mapa de bits.

Emplear las herramientas de edición de Bitmap.

Generar objetos Bitmap.

En el desarrollo de este capítulo serán realizadas actividades prácticas haciendo uso de los archivos de la carpeta Capítulo3. Solicite los archivos al instructor y cópielos a su carpeta mis documentos. Es importante que lleve acabo las actividades consecutiva-mente pues algunas actividades requieren que las anteriores hayan sido completadas.

mapas de bitsLos mapas de bits son imágenes compuestas por pequeños cuadrados de color de-nominados píxeles, que se combinan en forma de mosaico para crear una imagen. Podemos mencionar como ejemplos de mapas de bits a fotografías, imágenes tomadas

con un escáner y elementos gráficos creados con programas de pintura.

Con Macromedia Fireworks 8 combinamos las ventajas de la edición fotográfica, el dibujo vectorial y las aplicaciones de pintura.

Las imágenes de mapa de bits se crean dibujando y pintando con herramientas de mapa de bits, convirtiendo objetos vec-toriales en imágenes de mapa de bits o abriendo e importando imágenes.


Capítulo III

Fireworks posee un potente conjunto de filtros automáticos para ajustar el tono y el color y numerosos recursos para retocar imágenes de mapa de bits, como el recorte, el fundido y la duplicación o clonación de imágenes. Además, Fireworks incluye herramientas de retoque de imágenes: Desenfocar, Perfilar, Aclarar, Oscurecer y Difuminar.

utilización de mapas de bitsEl panel herramientas, contiene una sección mapa de bits en la cual podemos encon-trar herramientas que nos permiten seleccionar y editar mapas de bits. Las herramientas de esta sección se utilizan para modificar los píxeles de un mapa de bits del documento. A diferencia de versiones anteriores de Fireworks, ahora no es necesario alternar expresamente entre modo de mapa de bits y modo de vector, pero sí es posible trabajar con mapas de bits, objetos vectoriales y tex-to. Cambiar al modo apropiado es tan senci-llo como elegir una herramienta vectorial o de mapa de bits en el panel Herramientas.

Creación de objetos de mapa de bitsPodemos crear imágenes de mapa de bits empleando las herramientas de dibujo y pin-tura de mapa de bits de Fireworks, utilizando las funciones para cortar/copiar y pegar selecciones de píxeles, también mediante la conversión de imágenes vectoriales en objetos de mapa de bits. Otra forma de crear un objeto de mapa de bits es insertando una imagen de mapa de bits vacía en el documento y después dibujar o rellenar en ella.

Crearunnuevoobjetodemapadebits

Realice los siguientes procedimientos:

Nos dirigimos a la sección mapa de bits del panel herramientas y selecciona-mos la herramienta pincel o la herramienta lápiz.

Pinte o dibuje con la herramienta pincel o lápiz para crear objetos de mapa de bits en el lienzo.

Crearunobjetodemapadebitsvacío

Podemos crear un nuevo mapa de bits vacío y después dibujar o pintar píxeles en su interior.

Realice uno de los siguientes procedimientos:

1.

2.

Ilustración: Imagen creada con las herramientas de mapa de bits.

Trabajando con objetos Bitmap


En el panel Capas, dé clic en el botón nueva imagen de mapa de bits

En el menú Edición diríjase a Insertar y dé clic en mapa de bits vacío.

Dibuje un recuadro de selección a partir de un área vacía del lienzo y rellénelo con la herramienta pincel o lápiz.

En la capa actual del panel Capas se añade un mapa de bits vacío. Si se anula la selec-ción del mapa de bits vacío antes de dibujar, importar o colocar píxeles en su interior, el objeto de mapa de bits vacío desaparece automáticamente del panel Capas y del documento.

Cortarocopiarpíxelesypegarloscomounobjetonuevodemapadebits

Realice una selección de píxeles con las herramientas Recuadro, lazo o varita mágica.


Elija el menú Edición > Cortar, luego Edición > pegar.

Elija menú Edición > Copiar, luego Edición > pegar.

Elija menú Edición > Insertar > mapa de bits mediante Copiar para copiar la selección actual en otro mapa de bits.

Convertirobjetosvectorialesseleccionadosenimagendemapadebits

Realice uno de estos procedimientos:

Nos dirigimos al menú Modificar y seleccione allanar selección.

1.

2.

Informaciónadicional


Ilustración: Selección rectangular de un mapa de bits.

Capítulo III : Trabajando con objetos Bitmap


Seleccione allanar selección en el menú de opciones del panel Capas.

herramienta pincelLa herramienta Pincel se emplea para añadir contenidos a sus imágenes o para retocarlas, utiliza el color selec-cionado en el cuadro Color de trazo. La herramienta Pincel cuenta con varias categorías de trazos como: Básico, acei-te, acuarela, aerógra-fo, caligráfico, car-bón, etc., las cuales tienen dentro varios trazos incluidos.

PintarunobjetoconlaherramientaPincel

Seleccione la herramienta pincel.

Defina los atributos del trazo en el Inspector de propiedades.

Arrastre el puntero para pintar.

herramienta lápizPodemos emplear la herramienta Lápiz para dibujar líneas de 1 píxel, de estilo libre o fijo y líneas rectas, como si dibujara líneas de bordes con un lápiz de verdad, con o sin regla. Con la herramienta Lápiz también es posible ampliar un mapa de bits y editar los píxeles por separado.

1.

2.

3.

Ilustración: Herramienta pincel y sus atributos.

Ilustración: Dibujo de un rostro empleando la herramienta pincel.



DibujarunobjetoconlaherramientaLápiz

Seleccionamos la herramienta lápiz del panel herramientas.

Ajuste las opciones de la herramienta en el Inspector de propiedades:

suavizado suaviza los bordes de las líneas dibujadas.

borrado automático aplica el color de relleno cuando se hace clic con el Lápiz en el color del trazo.

preservar transparencia limita el dibujo de trazos del Lápiz a los píxeles exis-tentes de forma que no se permite en las zonas transparentes de la imagen.

Arrastre el mouse por el lienzo para dibujar. Mantenga pulsada la tecla mayús al arrastrar para restringir el trazado a una línea vertical, horizontal o diagonal, .

La diferencia entre el mapa de bits creado con la herramienta pincel y uno creado con la herramienta lápiz radica mayormente en la gama de trazados con la que puede trabajar la herramienta pincel.

Eliminación de píxeles en objetos de mapa de bitsLa herramienta Borrador nos permite eliminar píxeles. De forma predeterminada, el puntero de la herramienta Borrador representa el tamaño del borrador actual, pero es posible cambiar su tamaño y aspecto en el cuadro de diálogo Preferencias.

Eliminarpíxelesdeunobjetodemapadebitsseleccionadoounaselec-cióndepíxeles

Seleccionamos la herramienta borrador.

1.

2.

3.

1.



Ilustración: Dibujo de un rostro empleando la herramienta lápiz.



En el Inspector de propiedades, elija forma cuadrada o redonda del borrador.

Arrastre el deslizador borde para ajustar la suavidad del borde del borrador.

Arrastre el deslizador tamaño para ajustar el tamaño del borrador.

Arrastre el deslizador opacidad del borrador para ajustar el grado de opacidad.

Arrastre la herramienta borrador por los píxeles que desee suprimir.

Edición de objetos de mapa de bitsEn la sección mapa de bits del panel de herramientas encontramos herramientas que nos van a permitir editar objetos de mapa de bits, como por ejemplo seleccionar un área de mapa de bits, retocar, ajustar el color y el tono de un mapa de bits, desenfocar y perfilar mapa de bits.

utilizando las herramientas de selección de píxelesUna de las principales operaciones que realizamos con los objetos de mapas de bits es seleccionar áreas de los respectivos mapas de bits, para ello contamos con las herra-mientas recuadro, recuadro oval, lazo, lazo polígono y varita mágica. Con estas herra-mientas podemos seleccionar un área de píxeles ya sea de forma cuadrada, rectangular, circular, oval y forma libre.

2.

3.

4.

�.

�.

Ilustración: Eliminando píxeles con la herramienta borrador.

Ilustración: Herramientas de selección de mapa de bits.



opciones comunes de las herramientas de selección de mapa de bitsCuando se eligen las herramientas Recuadro, Recuadro oval, lazo, lazo polígono o varita mágica, el Inspector de propiedades muestra tres opciones para cada he-rramienta:

Recuadroautomático

Si activa la casilla de verificación Recuadro automático usted puede cambiar los valo-res del borde y la cantidad de fundido (si se ha especificado Fundido como opción de borde) para la selección de mapa de bits mientras emplea las herramientas Recuadro, Recuadro oval, Lazo, Lazo polígono y Varita mágica.

Bordes

El Inspector de propiedades también muestra tres opciones de bordes para estas he-rramientas:

duro crea una selección de recuadro con un borde definido.

suavizado evita la aparición de bordes dentados en la selección del recuadro.

Fundido permite fundir el borde de la selección de píxeles.

Estilo

Cuando se eligen las herramientas Recuadro o Recuadro oval, el Inspector de pro-piedades también muestra tres opciones de estilo:

normal permite crear un recuadro de altura y anchura interdependientes.

Tasa fija limita la altura y la anchura a los valores definidos.

Tamaño fijo limita la altura y la anchura a dimensiones definidas.

1.

2.

3.

1.

2.

3.

Ilustración: Opción borde presente en las herramientas Recuadro oval, Recuadro y varita mágica.

Ilustración: Opción Estilo presente en las herramientas Recuadro y Recuadro oval.



herramienta RecuadroLa herramienta Recuadro de la sección mapa de bits del panel herramientas nos permite seleccionar áreas de píxeles específicas de una imagen de mapa de bits dibu-jando un recuadro a su alrededor.

Seleccionarunáreadepíxelesrectangular

Seleccione la herramienta Recuadro.

Defina las opciones Estilo y borde en el Inspector de propiedades.

Arrastre el puntero para trazar un recuadro que defina la selección de píxeles.

Si desea puede cambiar los parámetros de su selección mientras utiliza la herramienta Recuadro (este procedimiento también es valido para las herramientas recuadro oval, lazo, lazo polígono y varita mágica), asegúrese de que esté marcada la casilla de ve-rificación Recuadro automático en el Inspector de propiedades antes de realizar la selección. Por ejemplo si usted ha seleccionado un área de píxeles con la opción de borde duro, puede cambiar a borde fundido sin la necesidad crear de nuevo la selección.

Crearunaseleccióncuadrada

Seleccione la herramienta Recuadro.


Mantenga presionada la tecla mayús y arrastre el puntero para trazar un recuadro que defina la selección de píxeles.

1.

2.

3.

1.

2.

3.



Ilustración: Selección rectangular con la herramienta Recuadro.



Para crear una selección rectangular desde un punto central, anule la selección de los demás recuadros activos y después mantenga pulsada la tecla alt mientras arrastra el puntero. Si desea crear una selección cuadrada desde su centro pulse las teclas alt y mayúsc mientras arrastra el puntero.

herramienta Recuadro ovalLa herramienta Recuadro oval de la sección mapa de bits del panel herramientas nos permite seleccionar áreas de píxeles específicas de una imagen de mapa de bits dibujando un selección elíptica o circular a su alrededor.



Ilustración: Selección cuadrada con la herramienta Recuadro.

Ilustración: Selección elíptica con la herramienta Recuadro oval.



Crearunaselecciónelípticadepíxeles

Seleccione la herramienta Recuadro oval.

Defina las opciones de Estilo y los tipos de bordes en el Inspector de propie-dades.

Arrastre el puntero para crear una selección elíptica de píxeles.

Si desea puede cambiar los parámetros de su selección mientras utiliza la herramienta Recuadro oval (este procedimiento también es valido para las herramientas lazo polígo-no y varita mágica), asegúrese de que esté marcada la casilla de verificación Recuadro automático en el Inspector de propiedades antes de realizar la selección.

Crearunaseleccióncircular

Seleccione la herramienta Recuadro oval.


Mantenga presionada la tecla mayús y arrastre el puntero para trazar un recuadro que defina la selección circular de píxeles.

Para crear una selección elíptica desde su punto central, anule la selección de los demás recuadros activos y después mantenga pulsada la tecla alt mientras arrastra el puntero. Si desea crear una selección circular desde su centro pulse las teclas alt y mayúsc mientras arrastra el puntero.

1.

2.

3.

1.

2.

3.





Ilustración: Selección circular con la herramienta Recuadro oval.



herramienta lazoLa herramienta lazo de la sección mapa de bits del panel herramientas nos permite seleccionar un área de píxeles de estilo libre en la imagen. Para crear la selección de estilo libre primero defina el estilo y borde: duro, suavizado o fundido, luego arrastre en forma libre el puntero del mouse sobre el area de la imagen que desee seleccionar.

Crearunaselecciónestilolibredepíxeles

Seleccione la herramienta lazo.

Defina la opción borde en el Inspector de propiedades.

Arrastre el puntero para crear una selección de estilo libre en la imagen.

herramienta lazo polígonoLa herramienta lazo polígono de la sección mapa de bits del panel herramientas nos permite seleccionar un área de píxeles de estilo libre y bordes rectos haciendo clic repetidamente a lo largo del perímetro del área de píxeles que desea seleccionar. Al pulsar clic para trazar puntos por el perímetro del objeto vamos creando el contorno de la selección. Esta herramienta es una de las más empleadas por la versatilidad que posee para crear la selección deseada.

Crearunaselecciónpoligonaldepíxeles

Seleccione la herramienta lazo polígono.

1.

2.

3.

1.

Ilustración: Selección de estilo libre utilizando la herramienta lazo.



Defina una opción de borde en el Inspector de propiedades.

Dé clic para trazar puntos por el perímetro del objeto o el área para crear el con-torno de la selección.

Mantenga pulsada la tecla mayús para restringir los segmentos de la herramienta lazo polígono a incrementos de 45°.

Realice uno de estos procedimientos para cerrar el polígono:

Dé clic en el punto inicial.

Dé doble clic en el espacio de trabajo.

herramienta varita mágicaLa herramienta varita mágica de la sección mapa de bits del panel herramientas nos permite seleccionar áreas de píxeles de color similar. Para controlar el modo de seleccionar los píxeles se utilizan las opciones tolerancia y borde de la herramienta varita mágica en el Inspector de propiedades.

Seleccionar un área de píxeles de una gama similar de colores:

Seleccione la herramienta varita mágica.

Elija una opción de borde en el Inspector de propiedades.

Para ajustar el nivel de tolerancia, arrastre el deslizador en el Inspector de propiedades.

2.

3.

4.

1.

2.

Ilustración: Selección poligonal con la herramienta lazo polígono.



Dé clic en el área cuyo color desee seleccionar. Alrededor de los píxeles selec-cionados aparece un recuadro seleccionado.

tolerancia, define el rango tonal de colores que se seleccionan al dar clic en un píxel con la herramienta varita mágica.

Por ejemplo si introduce el valor 0 y hace clic en un píxel, sólo se seleccionan los píxeles adyacentes que tengan exactamente el mismo tono. Si aumen-tamos la tolerancia, al dar clic en un color nos va a permitir seleccionar una mayor cantidad de píxeles.

3.

Ilustración: Selección por color con la herramienta varita mágica con tolerancia baja.

Ilustración: Selección por color con la herramienta varita mágica con tolerancia alta.



modos de selecciónEmpleando las herramientas de selección de mapa de bits anteriormente vistos, podemos crear una selección nueva, añadir píxeles a una selección, sustraer píxeles de una selec-ción o intersecar de una selección. Para ayudarnos a crear diversos modos de selección, como agregar a la selección, restar de la selección o intersecar con la selección, una de las mejores formas es utilizando el los métodos abreviados con el teclado.

selección nuevaDespués de dibujar un recuadro de selección con cualquier herramienta de selección de mapa de bits (Recuadro, Recuadro oval, Lazo, Lazo polígono o Varita mágica), se puede crear una nueva la selección con la propia herramienta o con otra de la misma clase. Evite seleccionar dentro del área de píxeles ya seleccionado.

Crearunanuevaselección

Elija una de las herramientas de selección de mapa de bits.

Realice la selección sobre la imagen,

Si desea crear una selección nueva, dibuje un nuevo recuadro de selección con cualquiera de las herramientas en otra área de píxeles.

adición de píxeles a una selecciónDespués de dibujar un recuadro de selección con cualquier herramienta de selección de mapa de bits (Recuadro, Recuadro oval, Lazo, Lazo polígono o Varita mágica), es

1.

2.

3.

Ilustración: Selección actual del logo senati y se procede a crear una nueva selección del logo del pni con la herramienta varita mágica.



posible aumentar la selección con la propia herramienta o con otra de la misma clase.

Ampliarunaseleccióndepíxelesexistente

Elija una de las herramientas de selección de mapa de bits.

Mantenga pulsada la tecla mayús y dibuje más recuadros de selección.

Para seguir aumentando la selección, repita los pasos 1 y 2 con cualquier herra-mienta de selección de mapa de bits. Los recuadros superpuestos se unen para formar un recuadro continuo.

sustracción de píxeles de una selecciónPodemos sustraer píxeles o excluir áreas de una selección; para ello se definen áreas de píxeles dentro del recuadro original que desde ese momento dejan de formar parte de la selección.

Sustraerpíxelesdeunaselección

Mantenga pulsada la tecla alt mientras selecciona el área de píxeles que va a excluir con una herramienta de selección de mapa de bits.

Creación de una selección a partir de la intersección de otra existentePodemos seleccionar píxeles de un recuadro existente dibujando otro recuadro que se superponga al original.

1.

2.

3.

Ilustración: Añadir y substraer píxeles de una selección.



Intersecarselecciones

Mantenga pulsadas las teclas alt + mayús mientras crea otro recuadro de selec-ción superpuesto al original.

Suelte el botón del mouse. Sólo se seleccionan los píxeles situados en la inter-sección de los dos recuadros

Creación de una selección de píxeles inversaA partir de la selección de píxeles actual es posible crear otra selección con todos los píxeles que no están seleccionados. Este método es útil, por ejemplo, para seleccionar y después eliminar todos los píxeles que rodean la selección original.

Crear una selección de píxeles inversa:

Cree una selección de píxeles con cualquier herramienta de selección de mapa de bits.

Nos dirigimos al menú seleccionar y dé clic en seleccionar inverso.

También se puede realizar esta operación presionando Ctrl + mayús + I.

Fundido de selecciones de píxelesEl fundido desenfoca los bordes de una selección de píxeles y ayuda a integrar el área seleccionada en los píxeles circundantes. Esta función es útil cuando se copia una se-lección para pegarla en otro fondo.

Fundirlosbordesdeunaseleccióndepíxelesamedidaqueseseleccio-nanlospíxeles

Seleccione una herramienta de selección de mapa de bits del panel herramien-tas.

Elija Fundido en el menú emergente Borde del Inspector de propiedades y arrastre el deslizador para ajustar el número de píxeles que desee desenfocar en el borde de la selección.

Realice una selección.

Fundirlosbordesdeunaseleccióndepíxelesdesdelabarrademenús

Nos dirigimos al menú seleccionar y seleccione Fundido.

Introduzca un valor en el cuadro de diálogo selección de fundido para ajustar el radio de fundido y dé clic en aceptar.

1.

2.

1.

2.

1.

2.

3.

1.

2.



El valor de radio determina el número de píxeles que se van a fundir a cada lado del borde de selección.

perfeccionamiento del mapa de bitsMacromedia Fireworks 8 nos brinda una extensa gama de herramientas para retocar y perfeccionar las imágenes. Permiten cambiar el tamaño de la imagen, reducir o perfilar su enfoque o copiar una parte de ella y “estamparla” en otra área.

desenfoque de una imagenEl desenfoque suaviza el aspecto de una imagen de mapa de bits. Es decir que pode-mos reducir el enfoque de las áreas seleccionadas de los mapas de bits.

herramienta desenfocarEsta herramienta nos permite dar mayor o menor nitidez a determinadas partes de una imagen desenfocando selectivamente los elementos, de forma muy similar a cómo un fotógrafo controla la profundidad del campo.

Usodelaherramientadesenfocar

Seleccione la herramienta desenfocar del panel herramientas.

Defina las opciones de pincel en el Inspector de propiedades:

tamaño define el tamaño de la punta del pincel.

borde especifica la suavidad de la punta del pincel.

Forma define la forma cuadrada o redonda para la punta del pincel.

Intensidad define la cantidad de desenfoque.

Arrastre la herramienta por los píxeles que desee desenfocar.

1.

2.

3.

Ilustración: Selección con bordes fundidos.



Mantenga pulsada la tecla alt para pasar de la herramienta desenfocar a la herramienta Perfilar.

La herramienta PerfilarEsta herramienta se emplea para reparar problemas en imágenes de escáneres o fotogra-fías desenfocadas. Muchas veces necesitamos algunas imágenes pero resulta que dichas imágenes se encuentran muy desenfocadas, es allí donde empleamos Perfilar.

Uso de la herramienta perfilar

Seleccione la herramienta Perfilar del panel herramientas.





Intensidad define la cantidad de desenfoque o perfilado.

Arrastre la herramienta por los píxeles que desee perfilar.

1.

2.

3.

Ilustración: Desenfoque del monitor con la herramienta desenfocar.

Ilustración: Perfilado del monitor con la herramienta Perfilar.



aclarado y oscurecimiento de píxelesFireworks 8 nos proporciona herramientas para aclarar y oscurecer las partes de una imagen. Este procedimiento es parecido a la técnica de añadir o quitar luz durante el revelado de una fotografía.

Aclararpartesdeunaimagen

Seleccione la herramienta aclarar de la sección mapa de bits del panel herra-mientas para dar más luz a partes de una imagen.





Ajuste la exposición en el Inspector de propiedades. La exposición puede ajus-tarse entre 0% y 100%. Especifique un valor porcentual bajo si desea obtener un efecto más suave; si prefiere un efecto más fuerte, especifique un valor alto.

Ajuste el Rango en el Inspector de propiedades:

sombras cambia principalmente las partes oscuras de la imagen.

Resaltados cambia principalmente las partes claras de la imagen.

medios tonos cambia la gama intermedia por canal de la imagen.

Arrastre el puntero por la parte de la imagen que desee aclarar.

Oscurecerpartesdeunaimagen

Seleccionamos la herramienta oscurecer de la sección mapa de bits del panel herramientas para restarle luz a partes de una imagen.

1.

2.

3.

4.

�.

1.

Ilustración: Aclarando los bordes del monitor con la herramienta aclarar.







Ajuste la exposición en el Inspector de propiedades.

La exposición puede ajustarse entre 0% y 100%. Especifique un valor porcen-tual bajo si desea obtener un efecto más suave; si prefiere un efecto más fuerte, especifique un valor alto.

Ajuste el Rango en el Inspector de propiedades:

sombras cambia principalmente las partes oscuras de la imagen.

Resaltados cambia principalmente las partes claras de la imagen.

medios tonos cambia la gama intermedia por canal de la imagen.

Arrastre el puntero por la parte de la imagen que desee oscurecer.

herramienta difuminarEsta herramienta nos permite mezclar colores suavemente, como si creara el reflejo de una imagen. Mueve el color elegido en la dirección que arrastre el puntero sobre la imagen.

Difuminarcoloresenunaimagen

Seleccione la herramienta difuminar de la sección mapa de bits del panel he-rramientas.

Defina las opciones de la herramienta en el Inspector de propiedades:

2.

3.

4.

�.

1.

2.

Ilustración: Oscureciendo los bordes del monitor con la herramienta oscurecer.






presión define la intensidad del trazo.

manchar color permite difuminar con el color especificado al inicio de cada trazo.

utilizar todo el documento mancha con los datos de color de los objetos de todas las capas.

Arrastre la herramienta por los píxeles que desee difuminar

herramienta selloLa herramienta sello nos permite clonar un área de una imagen de mapa de bits para estamparla o grabarla en cualquier otro lugar de la imagen. La clonación de píxeles es muy práctica para arreglar fotografías arañadas o eliminar el polvo de una imagen; se puede copiar un área de píxeles de la fotografía y sustituir por el área clonada.

Clonar partes de una imagen de mapa de bits:

Seleccionamos la herramienta sello del panel herramientas.

Dé clic en un área para convertirla en el área de origen o área que va a clonarse. El puntero de muestreo adopta la forma de una cruz.

Para poder designar un área de píxeles diferente para la clonación, pulse la tecla alt mientras da clic en otra área de píxeles para convertirla en el área de origen, de esta forma elegimos cual va a ser el origen de los píxeles donde se va a clonar.

Desplácese a otro lugar de la imagen y arrastre el puntero. Aparecerán dos punteros. El primero, origen de la clonación, tiene forma de cruz. El segundo puntero tiene

3.

1.

2.

3.



Ilustración: Manchando el borde del monitor con la herramienta difuminar.



forma de círculo azul. Conforme arrastre el segundo puntero, los píxeles situados debajo del primero se copian y se aplican al área situada debajo del segundo.

EstablecerlasopcionesdelaherramientaSello

Seleccione la herramienta sello.

Elija entre las siguientes opciones del Inspector de propiedades:

tamaño determina el tamaño del sello.

borde determina la suavidad del trazo (100% es duro; 0% es suave).

origen alineado afecta a la operación de muestreo. Cuando se ha selec-cionado esta opción, el puntero de muestreo se desplaza vertical y horizon-talmente en línea con el segundo puntero.

utilizar todo el documento toma muestras de los objetos de todas las ca-pas. Cuando esta opción no está seleccionada, la herramienta Sello mues-trea únicamente el objeto activo.

opacidad determina la transparencia del trazo.

modo de mezcla afecta al modo en que la imagen clonada influye en el fondo.

Duplicarunaseleccióndepíxeles


Cree una selección con una de las herramientas de selección de mapa de bits.

Arrastre la selección de píxeles con la herramienta subselección.

Pulse la tecla alt mientras arrastra la selección de píxeles con la herramienta puntero.

1.

2.

Ilustración: Logo de senati clonado con la herramienta sello.


�0 Programa Nacional de Informática

herramienta Reemplazar colorLa herramienta Reemplazar color permite seleccionar un color y colorearlo con otro diferente. Fireworks 8 brinda dos formas distintas de reemplazar un color por otro. Po-demos reemplazar un color que haya especificado en la muestra de color, o reemplazar un color utilizando la herramienta Reemplazar color directamente sobre la imagen.

Reemplazaruncolorporotrodiferente

Elija la herramienta Reemplazar color del panel herramientas.

En el cuadro desde del Inspector de propiedades, dé clic en muestra.

Dé clic en la paleta desde para seleccionar el color, y elija un color del menú emergente para especificar el color que desea reemplazar.

Dé clic en la paleta a del Inspector de propiedades y seleccione un color del menú desplegable.

Defina el resto de atributos del trazo en el Inspector de propiedades:

tamaño nos permite definir el tamaño de la punta del pincel.

Forma con esta opción definimos la forma de la punta del pincel, cuadrada o redonda.

tolerancia determina la gama de colores que se van a reemplazar (0 reem-plaza sólo los colores de la paleta a; 2�� reemplaza los colores similares a la paleta a).

Fuerza esta opción nos permite determinar qué proporción del color se reemplaza.

Colorear esta opción reemplaza el color de la paleta Cambiar color por el de la paleta a. Anule la selección Colorear para mezclar parte del color de la paleta Cambiar con el de la paleta A.

Arrastre la herramienta sobre el color que se va a reemplazar.

1.

2.

3.

4.

�.

�.

Ilustración: Cambiando de color al Isotipo de senati con la herramienta Reemplazar color.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 575 píxeles, Al: 585 píxeles, Resolución: 72 ppp y guardarlo con el nombre pet_site.png.Abrir los archivos Tortuga.jpg, Dog1.jpg, Dog2.jpg, Dog3.jpg y Cat1.jpg de la carpeta Capitulo3, seleccionar las áreas correspodientes y moverlos a pet_site.png.



Trabajando con Objetos Vectoriales

Enestecapítulo

Aprenderá a trabajar con Objetos Vectoriales



Reconocer un vector.

Emplear las herramientas de edición de vectores.

Generar objetos vectoriales.


objeto vectorialUn objeto vectorial es un objeto gráfico cuya forma se crea mediante un trazado. La forma de un trazado de vectores esta determinado por los puntos que atraviesa. El color del trazo de los objetos vectoriales sigue su trazado y su relleno ocupa el área interior del mismo. El trazo y el relleno determinan el aspecto del objeto cuando se imprime o publica en la Web.

uso de objetos vectorialesEn macromedia Fireworks 8 tenemos una gran variedad de herramientas que nos van a permitir dibujar, trazar y editar objetos vectoriales mediante distintas técnicas. Las herramientas de formas básicas permiten dibujar con rapidez líneas rectas, círculos y elipses, cuadrados y rectángulos, estrellas y polígonos equiláteros de 3 a 360 lados.

Se pueden dibujar trazados de vectores de estilo libre con las herramientas Trazado de vectores y Pluma. La herramienta Pluma permite dibujar formas complejas con curvas suaves y líneas rectas punto a punto. Macromedia Fireworks 8 nos brinda una serie de técnicas para editar los objetos vectoriales que se hayan dibujado en el lienzo. Se puede cambiar la forma de un objeto mediante el desplazamiento, la adición o el borrado de puntos. Los tiradores (o selectores) de punto sirven para cambiar la forma de los seg-mentos de trazados adyacentes. Las herramientas de Estilo libre permiten cambiar la


Capítulo Iv

forma de los objetos mediante la edición directa de los trazados. También puede editar formas automáticas utilizando los métodos de edición predefinidos.

dibujo de objetos vectorialesMacromedia Fireworks 8 nos ofrece diversas herramientas que nos van a permitir dibujar objetos vectoriales. Con ellas, podemos dibujar formas básicas, trazados de estilo libre y formas complejas punto a punto.

herramienta líneaCon esta herramienta podemos crear con rapidez líneas rectas horizontales, líneas rectas verticales, líneas diagonales con ángulo restringido o líneas con ángulo libre.

Dibujarunalínea

Seleccione la herramienta línea de la sección vector del panel herramientas.

Establezca los atributos de trazo en el Inspector de propiedades.

Arrastre el ratón por el lienzo para dibujar la línea.

Dibujarunalíneaconrestricciónde45°

Mantenga pulsada la tecla mayús mientras arrastra para restringir el dibujo de líneas a incrementos de 45°.

1.

2.

3.

Ilustración: Diseño vectorial creado con las herramientas vector.

Trabajando con objetos vectoriales


herramienta RectánguloCon esta herramienta crea-mos con rapidez rectángulos y/o cuadrados. Podemos crear rectángulos, cuadrados a partir de un punto central o moverlo mientras se crea.

Dibujarunrectágulo

Seleccione la herramien-ta Rectángulo de la sec-ción vector en el panel herramientas.


Arrastre el ratón por el lienzo para dibujar el rectágulo.

Dibujaruncuadrado

Seleccione la herramienta Rectángulo de la sección vector en el panel herra-mientas.


Mantenga pulsada la tecla mayús mientras arrastra el mouse para crear un cua-drado.

Dibujarunrectánguloapartirdeunpuntocentral

Sitúe el cursor en el que será el punto central y mantenga pulsada la tecla Alt mientras arrastra la herramienta Rectángulo.

Dibujaruncuadradoapartirdeunpuntocentral

Sitúe el cursor en lugar donde se va a ubicar el punto central y mantenga pulsa-das las teclas mayusc + alt mientras arrastra la herramienta Rectángulo.

herramienta ElipseCon esta herramienta creamos fácilmente elipses o circulos. Podemos crear elipses y/o circulos a partir de un punto central o moverlo mientras se crea.

1.

2.

3.

1.

2.

3.

Ilustración: Rectángulo y Cuadrado creado con la herramienta Rectángulo.

Capítulo IV : Trabajando con Objetos Vectoriales

Programa Nacional de Informática ��

Dibujarunelipse

Seleccione la herramienta Elipse del panel herra-mientas.


Arrastre el ratón por el lienzo para dibujar el elipse.

Dibujaruncirculo

Seleccione la herramienta Elipse en el panel herramientas.


Pulse la tecla mayús mientras arrastra el mouse para crear un circulo.

.Dibujarunelipseapartirdeunpuntocentral

Sitúe el cursor en el que será el punto central y mantenga pulsada la tecla alt mientras arrastra la herramienta Elipse.

Dibujaruncirculoapartirdeunpuntocentral

Sitúe el cursor en lugar donde se va a ubicar el punto central y mantenga pulsa-das las teclas mayusc + alt mientras arrastra la herramienta Elipse.

ajustar la posición de una forma básica mientras la dibuja Podemos cambiar la posición de la forma básica (rectágulo, cuadrado, elipse, circulo), mientras se dibuja, para ello realizamos el siguiente procedimiento.

Mantenga pulsado el botón del ratón, pulse y mantenga pulsada la barra espacia-dora y arrastre el objeto a otro lugar del lienzo. Suelte la barra espaciadora para continuar dibujando el objeto.

Cambio de tamaño de una línea, un rectángulo o una elipse selecciona-das

macromedia Fireworks 8 nos permite modificar los tamaños de las formas básicas dibujadas con las herramientas Elipse y Rectángulo, haciendo uso del Inspector de

1.

2.

3.

1.

2.

3.

Ilustración: Elipse y Círculo creado con la herra-mienta Elipse.


�� Programa Nacional de Informática

propiedades, herramienta Escala o mediante el menú Modificar, Transformar y seleccione transformación numérica.

Para ello seleccionamos el objeto y realizamos una de las siguientes acciones.

Nos dirigimos al Inspector de propiedades o al panel Información y luego ingresamos nuevos valores de anchura (an.) y/o altura (al.)

Elija la herramienta Escala en la sección seleccionar del panel herramientas y arrastre un tirador de transformación de una esquina. Así el tamaño del objeto cambia proporcionalmente.

En un rectángulo, arrastre un punto de una esquina.

Nos dirigimos al menú Modificar, transformar y seleccionamos transfroma-ción numérica.

Elegimos la opción Escala o Cambiar tamaño para ingresar el nuevo tamaño del objeto.

herramienta Rectángulo redondeado básicoPodemos tambien dibujar rectángulos con esquinas redondeadas empleando la he-rramienta Rectángulo redondeado, así como ajustar la redondez de las esquinas del rectángulo seleccionado mediante la opción Redondez del rectángulo del Inspector de propiedades. La herramienta Rectángulo redodeado dibuja los rectángulos como ob-jetos agrupados. Para desplazar los puntos de un rectángulo por separado, es preciso desagrupar el rectángulo o utilizar la herramienta Subselección.

Ilustración: Cambio de tamaño de un rectángulo con la herramienta Escala.



Dibujarunrectánguloconesquinasredondeadas

En el menú emergente de la herramienta Rectángulo en la sección vector del panel herramientas, seleccione la herramienta Rectángulo redondeado.

Arrastre el ratón por el lienzo para dibujar el rectángulo.

Redondearlasesquinasdeunrectánguloseleccionado

Introduzca un valor entre 0 y 100 en el cuadro Redondez del rectángulo del Ins-pector de propiedades y pulse Enter, o bien arrastre el deslizador emergente.

herramienta polígonoCon esta herramienta polígono se pueden dibujar todo tipo de polígonos equiláteros o estrellas, desde un triángulo hasta un polígono o estrella de 360 caras.

Dibujarunpolígono

Seleccione la herramienta polígono, que es una de las herramientas de dibujo de formas básicas, desde la sección vector del panel herramientas.

En el Inspector de propiedades, siga uno de estos procedimientos para especificar el número de lados del polígono:

1.

2.

1.

2.

Ilustración: Objeto rectangular con esquinas redondeadas.

Podemos ajustar la redondez de las esquinas conforme va dibujando un rectángulo redondeado, puede pulsar cualquiera de las teclas de flecha o las teclas numéricas 1 y 2 las veces que sean necesarias.



Utilice el deslizador emergente lados para elegir entre 3 y 25 lados.

Introduzca un número entre 3 y 360 en el cuadro de texto lados.

Arrastre el ratón para trazar el polígono.

Si desea restringir la orientación de un polígono a incrementos de 45°, mantenga pulsada la tecla mayús mientras dibuja.

La herramienta polígono dibuja siempre respecto a un punto central.

Dibujarunaestrellabásica

Seleccione la herramienta polígono, que es una de las herramientas de dibujo de formas básicas, desde la sección vector del panel herramientas.

En el Inspector de propiedades, en el menú emergente de la opción Forma elija de estrella.

En el cuadro de texto lados, escriba el número de puntas de la estrella.

En el cuadro de texto Ángulo, seleccione automático o introduzca un valor. Los valores más cercanos a 0 determinan puntas más largas y estrechas; por el contrario, cuanto más próximos a 100, las puntas son más cortas y romas.

Arrastre el ratón por el lienzo para dibujar la estrella.

Para restringir la orientación de una estrella a incrementos de 45°, mantenga pulsada la tecla mayús mientras arrastra el ratón.

La herramienta Polígono dibuja siempre respecto a un punto central.

3.

4.

1.

2.

3.

4.

�.

�.

Ilustración: Creación de un polígono y una estrella mediante la herramienta polígono.



Formas automáticasLas formas automáticas de Fireworks 8 son conjuntos de objetos vectoriales inteligen-tes que simplifican la creación y modificación de los principales elementos visuales comunes. Las herramientas de formas automáticas dibujan grupos de objetos. Al con-trario que otros grupos de objetos, las formas automáticas seleccionadas tienen puntos de control con forma de diamante además de los tiradores del grupo de objetos. Cada punto de control se asocia con una propiedad visual concreta de la forma. Al arrastrar un punto de control sólo se altera la propiedad visual asociada. La mayoría de los puntos de control de las formas automáticas tienen mensajes de ayuda emergente que describen la forma en la que afectan a la forma automática. Coloque el puntero sobre un punto de control para ver un mensaje de ayuda emergente que describe la propiedad que maneja ese punto de control. Las herramientas de formas automáticas crean formas con orientaciones predefinidas.

Por ejemplo, la herramienta Flecha dibuja flechas horizontales. Puede transformar las formas automáticas para cambiar su orientación. Aunque cada herramienta de forma automática del panel Herramientas utiliza el mismo método de dibujo sencillo, los atributos editables de cada forma automática son distintos.

principales herramientas de Formas automáticas

FlechaEsta forma automática nos permite dibujar conjunto o grupo de objetos que aparecen como flechas sencillas de cualquier tamaño. Mediante los puntos de control puede ajus-tar la agudeza de la punta, la longitud y anchura de la cola y la longitud de la punta.

Dibujar una flecha

Dirigase al menú ventana y seleccione propiedades de forma automática.

Se muestra el panel de propiedades de formas automáticas ubicado an la parte derecha del espacio de trabajo de Fireworks.

En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Flecha.

Se crea automáticamente la forma en el lienzo.

Modifique sus propiedades en el panel de propiedades de forma automática.

Ajuste de las formas automáticas de flecha curvada

Las flechas curvadas tienen varios puntos de control. Hay puntos de control para ajustar la agudeza de la punta de la flecha, la longitud de la punta, la longitud y el grosor de la

1.

2.

3.

4.



cola y la redondez de la curvatura de la flecha. Mediante los puntos de control editamos la flecha de acuerdo a la forma de flecha que deseamos.

Ajustar la agudeza de la punta de una flecha doblada

Arrastre el punto de control de la punta de la flecha curvada ubicada en la parte lateral derecha.

Aumentar o reducir la agudeza de la punta de una flecha curvada

Arrastre el punto de control de la punta de la flecha curvada que desee.

Alargar o reducir la cola de una flecha curvada:

Arrastre el punto de control de la longitud del tirador de la flecha curvada.

Ajustar la anchura de la cola de una flecha curvada:

Arrastre el punto de control de la anchura del tirador de la flecha curvada.

Ajustar la redondez de la curva de una flecha curvada:

Arrastramos el punto de control de radio ubicado en la esquina de la flecha.

Rectángulo redondeadoDibuja grupos de objetos que aparecen como rectángulos con las esquinas redondeadas. Mediante los puntos de control, puede editar la redondez de todas las esquinas o cambiar la redondez de cada una individualmente. Empleando los puntos de control editamos el rectángulo redondeado de acuerdo a la forma rectángular que deseamos.

Ilustración: Creación de una Flecha y su edición mediante sus puntos de control.



Dibujarunrectánguloredondeado

Nos dirigimos al menú ventana y seleccionamos propiedades de forma auto-mática. Se muestra el panel de propiedades de formas automáticas ubicado an la parte derecha del espacio de trabajo de Fireworks.

En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Rectángulo redondeado.


Modificamos las propiedades del rectángulo en el panel de propiedades de forma automática.

Rectángulo biseladoEsta herramienta nos permite dibujar grupos de objetos que aparecen como rectángulos con las esquinas biseladas. Empleando los puntos de control podemos editar la cantidad de biselado de todas las esquinas a la vez o cambiar cada una de las esquinas.

Dibujarunrectángulobiselado

Nos dirigimos al menú ventana y seleccionamos propiedades de forma auto-mática. Se muestra el panel de propiedades de formas automáticas ubicado an la parte derecha del espacio de trabajo de Fireworks.

En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Rectángulo biselado.



1.

2.

3.

4.

1.

2.

3.

4.

Ilustración: Creación y edición de un rectángulo Redondeado y biselado.



Rectángulo con chaflánEsta herramienta nos permite dibujar grupos de objetos que aparecen como rectángulos con chaflanes, es decir, esquinas redondeadas hacia el interior del rectángulo.Podemos editar el radio del chaflán de todas las esquinas a la vez o cambiar este radio en cada esquina individualmente.

Dibujar un rectángulo con chaflán

Nos dirigimos al menú ventana y seleccionamos propiedades de forma auto-mática. Se muestra el panel de propiedades de formas automáticas.

En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Rectángulo con chaflán.



ajuste de las formas automáticas de rectángulo redondeado, biselado y con chaflán

Los rectángulos redondeados, biselados y con chaflán tienen cinco puntos de control. El punto de control de cada esquina ajusta todas las esquinas a la vez.

También puede pulsar Alt y arrastrar el ratón para editar una sola esquina. Los puntos de control restantes cambian el tamaño del rectángulo sin afectar a redondeo de las esquinas.

Para editar el radio de la esquina de los rectángulos dibujados con la herramienta Rec-tángulo, utilice el valor Redondez del rectángulo del Inspector de propiedades.

Ajustarlasesquinasdeunaformaautomáticaderectánguloredondeado,biselado o con chaflán

Arrastre un punto de control de esquina de la forma seleccionada.

Ajustarunasolaesquinadeunaformaautomáticaderectánguloredon-deado, biselado o con chaflán

Pulse alt y arrastre un punto de control de esquina de la forma seleccionada.

Cambiareltamañodeunaformaautomáticaderectánguloredondeado,biselado o con chaflán sin afectar a las esquinas

Arrastre el punto de control de cambio de tamaño mediante arrastre.

1.

2.

3.

4.



Cambiar el tipo de esquinas de un rectángulo:

Pulse alt y haga clic en cualquier punto de control de esquina.

Cambiareltipodeunasolaesquina

Pulse mayús+alt y haga clic en cualquier punto de control de esquina.

línea de conexiónEsta herramienta nos permite dibujar grupos de objetos que aparecen como líneas conectoras de tres segmentos, como las utilizadas para conectar los elementos de un diagrama de flujo o diagrama organizativo. Mediante los puntos de control puede edi-tar los extremos de la primera y tercera sección de la línea de conexión, así como la ubicación de la segunda sección, que conecta la primera y la última.

DibujarunaLíneadeconexión


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción línea de conexión.



Ajustedelasformasautomáticasdelíneasdeconexión

Las líneas de conexión tienen cinco puntos de control. Hay puntos de control para co-locar los puntos de inicio y finalización, para ajustar la posición de la barra intermedia y para ajustar la redondez de las esquinas.

Mover el punto de inicio o finalización de una línea de conexión

Arrastre el punto de control al principio o al final de la línea de conexión.

Cambiarlaposicióndelabarraintermediadeunalíneadeconexión

Arrastre el punto de control de posición horizontal.

Ajustar todas las esquinas de la línea de conexión seleccionada:

Arrastre un punto de control de esquina.

1.

2.

3.

4.



Ajustarunaúnicaesquinadelalíneadeconexiónseleccionada

Pulse Alt y arrastre un punto de control de esquina.

donutCon esta herramienta dibujamos grupos de objetos que aparecen como anillos sólidos. Mediante los puntos de control, puede ajustar el perímetro interior o dividir la forma en trozos.

Dibujarunadonut

Nos dirigimos al menú ventana y seleccionamos propiedades de forma auto-mática.

En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción donut.



ajuste de las formas automáticas de donutLas formas automáticas de donut tienen inicialmente tres puntos de control. Hay puntos de control para ajustar el perímetro interior, para anular el perímetro interior y para dividir la forma en trozos similares a los de un gráfico de sectores. Puede añadir tantas secciones como desee utilizando los puntos de control. Para cada nueva sección, Fireworks añade un punto de control para cambiar el tamaño o dividir la nueva sección.

1.

2.

3.

4.

Ilustración: Creación de una línea de conexión y su edición mediante sus puntos de control..



Añadirseccionesaldonutseleccionado

Pulse alt y arrastre un punto de control de adición/división de sector del períme-tro exterior de la forma.

Eliminarunaseccióndeldonutseleccionado

Arrastre el punto de control de adición/división del sector del perímetro exterior de la forma para definir la parte de ésta que desea que permanezca en el lienzo.

Cambiareltamañodelradiointeriordeldonutseleccionado

Arrastre el punto de control de radio interior.

Establecereltamañodelradiointeriordeldonutseleccionadoencero

Dé clic en el punto de control de restablecimiento del radio.

Forma de lDibuja grupos de objetos que aparecen como formas de esquina dobladas hacia la dere-cha. Mediante los puntos de control, puede editar la longitud y anchura de las secciones horizontal y vertical, así como la curvatura de la esquina.

DibujarunaformadeL


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Forma de l.


Utilice propiedades de forma automática para modificar sus propiedades.

AjustedelasformasautomáticasdeformadeL

Las formas de L tienen cuatro puntos de control. Hay puntos de control para ajustar la longitud y la anchura de cada sección de la forma de L y para ajustar la redondez de la curva de la forma de L.

CambiarlalongitudolaanchuradeunaseccióndelaformadeLse-leccionada

Arrastre uno de los dos puntos de control de longitud/anchura.

1.

2.

3.

4.



Ajustar la redondez de las esquinas de una forma de L seleccionada:

Arrastre el punto de control de radio de esquina.

polígono inteligenteMediante esta herramienta podemos dibujar grupos de objetos que aparecen como polígonos equiláteros de entre 3 y 25 lados.

Mediante los puntos de control puede cambiar el tamaño y rotar el polígono, añadir o eliminar segmentos, aumentar o reducir el número de lados o añadir un polígono interior a la forma.

DibujarunPolígonointeligente


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción polígono inteligente.



Ajustedelasformasautomáticasdepolígonointeligente.

Los polígonos inteligentes aparecen inicialmente como pentágonos con cuatro puntos de control.

Hay puntos de control para cambiar el tamaño y rotar, añadir o eliminar segmentos del polígono, aumentar o reducir el número de lados del polígono.

1.

2.

3.

4.

Ilustración: Creación de una donut y una Forma de Ele y su edición mediante sus puntos de control..



Cambiareltamañodelpolígonointeligenteseleccionadoorotarlo,sigaunodelossiguientesprocedimientos

Arrastre el punto de control de escala/rotación.

Pulse Alt y arrastre el punto de control de escala/rotación para rotar solamente.

Añadiroeliminarseccionesdeunpolígonointeligenteseleccionado.

Arrastre el punto de control de secciones.

Cambiarelnúmerodeladosdelpolígonointeligenteseleccionado.

Arrastre el punto de control de lados.

Dividirelpolígonointeligenteseleccionadoensegmentos.

Pulse alt y arrastre el punto de control de lados.

Cambiareltamañodelpolígonointeriordeunpolígonointeligentesigaunodeestosprocedimientos

Si el polígono tiene un polígono interior, arrastre el punto de control del polígo-no inteligente.

Si el polígono no tiene polígono interior, arrastre el punto de control de restable-cimiento de polígono interior.

Ilustración: Creación de un polígono inteligente y su edición mediante sus puntos de control..



Restablecer el polígono interior del polígono inteligente seleccionado:

Dé clic en el punto de control de restablecimiento de polígono interior.

secciónCon esta herramienta dibujamos grupos de objetos que aparecen como gráficos de sec-tores. Mediante los puntos de control podemos dividir la forma en trozos.

DibujarunaSección


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción sección.



Ajustedelasformasautomáticasdesección

Las formas automáticas de sección tienen inicialmente tres puntos de control. Hay puntos de control para dividir la forma en sectores, ajustar el tamaño de los sectores y restablecer el gráfico de modo que sólo tenga un sector. Puede añadir tantas secciones como desee utilizando los puntos de control.

Añadir secciones al gráfico seleccionado

Pulse alt y en el perímetro exterior de la forma, arrastre un punto de control de segmentación mediante arrastre.

Cambiar el tamaño de un sector del gráfico seleccionado

En el perímetro exterior de la forma, arrastre un punto de control de segmenta-ción mediante arrastre.

Restablecer el gráfico de modo que sólo tenga un sector

Dé clic en el punto de control de restablecimiento.

EspiralCon la herramienta Espiral podemos dibujar grupos de objetos que aparecen como espirales abiertas. Mediante los puntos de control puede editar el número de rotaciones de la espiral y establecer si la espiral estará abierta o cerrada.

1.

2.

3.

4.



DibujarunaEspiral


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Espiral.


Modifique sus propiedades empleando el panel de propiedades de forma au-tomática.

Ajustedelasformasautomáticasdeespiral

Las espirales tienen dos puntos de control. Estos puntos de control ajustan el número de giros de la espiral y si ésta es abierta o cerrada.

Ajustarelnúmerodegirosdelaespiralseleccionada.

Arrastre el punto de control de espirales.

Abrirocerrarlaespiralseleccionada

Dé clic en el punto de control de apertura/cierre de la espiral.

EstrellaCon esta herramienta dibujamos grupos de objetos que aparecen como estrellas con un número determinado de puntas que van desde 3 hasta 25. Mediante los puntos de control puede añadir o eliminar puntas y ajustar los ángulos interiores y exteriores.

1.

2.

3.

4.

Ilustración: Creación de una sección y un Espiral y su edición me-diante sus puntos de control..



DibujarunaEstrella


En el cuadro combinado del panel de propiedades de forma automática selec-cionamos la opción Estrella.



Ajustedelasformasautomáticasdeestrella

Inicialmente, las estrellas tienen cinco puntos de control. Hay puntos de control para añadir o eliminar puntas, para ajustar los ángulos interiores y exteriores de las puntas y para ajustar la redondez de las puntas y los valles.

Cambiarelnúmerodeladosdelaestrellaseleccionada

Arrastre el punto de control de puntas.

Ajustarlaspuntasdelaestrellaseleccionada

Arrastre el punto de control de puntas.

Ajustarlaredondezdelaspuntasdelaestrellaseleccionada

Arrastre un punto de control de redondez.

1.

2.

3.

4.

Ilustración: Creación de una Estrella y su edición mediante sus puntos de control..



dibujo de Formas libres

herramienta plumaUna forma de dibujar y editar objetos vectoriales en Fireworks 8 es el de generar trazardo de puntos como si se estuviera dibujando un dibujo de ‘une-los-puntos’. Al hacer clic en cada punto con la herramienta Pluma, Fireworks dibuja automáticamente el trazado del objeto vectorial desde el último punto colocado con el ratón. Además de conectar los puntos con segmentos rectos, la herramienta Pluma permite dibujar lo que se conoce como curvas Bezier, que son segmentos curvos calcu-lados matemáticamente.

Cada tipo de punto, ya sea punto de esquina o de curva, determina si las curvas adyacentes son líneas rectas o curvas. Los segmentos de trazado rectos y curvos se pueden modificar arrastrando sus puntos. Los segmen-tos curvos se pueden editar aún más mediante el arrastre de sus tiradores de punto. Además los segmentos rectos

se pueden convertir en curvos (y viceversa) por la conversión de sus puntos.

dibujo de segmentos de trazado rectosPara poder dibujar segmentos de línea recta con la herramienta pluma basta con hacer clic para colocar los puntos. Con cada clic de la herramienta pluma se traza un punto de esquina. La unión de dos puntos genera un segmento y el grupo de todos los puntos genera un trazado.

Dibujaruntrazadoconseg-mentosdelínearecta

Seleccione la herramienta pluma de la sección vector del panel herramientas.

Si lo desea, elija Edición > preferencias y active cualquiera de las opciones siguientes en la ficha Edición del cuadro de diálogo preferencias:

mostrar vista previa de la pluma muestra una presentación preliminar del segmento de línea que se obtendría con el clic siguiente.

1.

2.

Ilustración: Dibujo vectorial

Ilustración: Creación de trazados rectos con la herramienta pluma.



mostrar puntos sólidos muestra puntos sólidos al dibujar.

Dé clic en el lienzo para colocar el primer punto de esquina.

Desplace el cursor y dé clic para colocar el siguiente punto. Un segmento de lí-nea recta une los dos puntos. Continúe trazando puntos para ir creando la forma deseada. Los segmentos rectos unirán el espacio entre ellos.

Realice una de las siguientes acciones para terminar el trazado, ya sea abierto o cerrado.

Dé doble clic en el último punto para terminar como trazado abierto.

Seleccione otra herramienta para terminarlo como trazado abierto.

Para cerrar el trazado haga clic en el primer punto que dibujó. Los puntos de inicio y finalización de un trazado cerrado son el mismo.

dibujo de segmentos de trazado curvos Para crear dibujos con segmentos de trazado curvos, basta con hacer clic y arrastrar el mouse conforme se trazamos los puntos. Al dibujar, el punto actual muestra ti-radores de punto. Todos los puntos de los objetos vec-toriales, tanto si se han dibujado con la herramienta Pluma o con cualquier otra herramienta de di-bujo de Fireworks, tienen tiradores de punto. Sin embargo, estos tiradores sólo están visibles en los puntos de curva.

Dibujarunobjetoconsegmentoscurvos

Seleccione la herramienta pluma del panel herramientas.

Dé clic para colocar el primer punto de esquina.

Ubiquese en el punto siguiente, haga clic y arrastre para generar un punto de curva. Cada vez que se hace clic y se arrastra, Fireworks extiende el segmento de línea hasta el nuevo punto.

Continúe trazando puntos. Si hace clic y arrastra un punto nuevo, se produce un punto de curva; si sólo hace clic, se crea un punto de esquina.

3.

4.

�.

1.

2.

3.

4.

Ilustración: Crear trazados curvos con la herramienta pluma.



Realice una de las siguientes acciones para terminar el trazado abierto o cerra-do:

Dé doble clic en el último punto para terminar como trazado abierto.

Seleccione otra herramienta para terminar como trazado abierto. Al ele-gir determinadas herramientas y volver luego a la herramienta pluma, Fi-reworks continuará dibujando el objeto la próxima vez que haga clic.

Para cerrar un trazado, haga clic en el primer punto que trazó. Los puntos de inicio y finalización de un trazado cerrado son el mismo.

Edición de la forma de un segmento de trazado rectoMoviendo los pun-tos de un segmento de trazado recto, es posible alargarlo, acortarlo o cambiar su posición.

Para editar los pun-tos de un trazado podemos emplear las herramientas puntero y subse-lección.

Modificar un segmento de trazado recto

Seleccionamos el trazado con la herramienta puntero o subselección.

Dé clic en un punto con la herramienta subselección para seleccionarlo.

Los puntos de esquina seleccionados aparecen como cuadrados azules sólidos.

Arrastre el punto o utilice las teclas de flecha para mover el punto a una nueva ubicación.

ajuste de la forma de un segmento de trazado curvoPodemos modificar la forma de un objeto vectorial curvo arrastrando sus tiradores de punto con la herramienta subselección. Dichos tiradores determinan el grado de cur-vatura entre los puntos fijos. Estas curvas se denominan curvas Bezier.

EditarlacurvaBezierdeunsegmentodetrazado

Seleccionamos el trazado con la herramienta puntero o subselección.

�.

1.

2.

3.

1.

Ilustración: Edición de puntos rectos y curvos empleando la herra-mienta subselección.



Dé clic en un punto de la curva con la herramienta subselección para seleccio-narlo. Un punto de curva seleccionado aparece como un círculo azul sólido. Los tiradores de punto se proyectan a partir del punto.

Arrastre los tiradores a otra posición. Para restringir el movimiento de los tiradores a ángulos de 45°, pulse la tecla mayús mientras arrastra. La presentación preliminar del trazado azul muestra dónde se dibujará el nuevo trazado si se suelta el botón del ratón.

Por ejemplo, si arrastra el tirador de punto de la izquierda hacia abajo, el de la derecha subirá. Mantenga pulsada la tecla alt y arrastre un tirador para moverlo de forma inde-pendiente.

Conversión de segmentos de trazado rectos en curvos y viceversaLos segmentos de trazado rectos quedan intersectados por puntos de esquina. Los seg-mentos de trazado curvos contienen puntos de curva.

Los segmentos de trazado rectos pueden convertirse en segmentos curvos, y viceversa, si se convierten sus puntos.

Convertirunpuntodeesquinaenunpuntodecurva


Dé clic en un punto de esquina de un trazado seleccionado y arrástrelo alejándo-lo de éste. Los tiradores se extenderán curvando los segmentos adyacentes y se muestran los tiradores de puntos los que nos van a pemitir controlar la curva.

2.

3.

4.

1.

2.

Ilustración: Desplazar los tiradores de un punto de curva.

Ilustración: Desplazar un tirador independientemente con alt.



Convertirunpuntodecurvaenotrodeesquina

Seleccionamos la herramienta pluma de la sección vector en el panel herra-mientas.

Dé clic en un punto de curva de un trazado seleccionado. Los tiradores se retraen y los segmentos adyacentes se vuelven líneas rectas, automaticamente desaparecen los puntos de control de la curva

Seleccióndepuntos

La herramienta Subselección permite seleccionar varios puntos. Antes de seleccionar un punto con la herramienta Subselección, hay que seleccionar el trazado usando la he-rramienta puntero o subselección o haciendo clic en su miniatura en el panel Capas.

Seleccionar puntos específicos de un trazado seleccionado

Seleccionamos la herramienta subselección.


Dé clic en un punto, o mantenga pulsada la tecla mayús y haga clic en varios puntos uno a uno.

Arrastre un recuadro alrededor de los puntos que desea seleccionar.

Moverunpunto

Arrástrelo con la herramienta subselección del panel herramientas. Fireworks vuelve a dibujar el trazado para reflejar la nueva posición del punto.

Cambiarlaformadeunsegmentodetrazado

Arrastre un tirador de punto con la herramienta subselección. Mantenga pulsada la tecla alt mientras arrastra un tirador cada vez.

1.

2.

1.

2.

Ilustración: Convertir trazado un recto a curvo y de curvo a rec-to con la herramienta pluma.



Ajustareltiradordeunpuntodeesquina

Seleccione la herramienta Pluma en el panel Herramientas.

Seleccione un punto de esquina.

Mantenga pulsada la tecla alt mientras arrastra el punto para mostrar su tirador y doblar el segmento adyacente.

Arrastre de un tirador de punto con la herramienta Subselección para editar el segmento de trazado adyacente

Inclusiónyeliminacióndepuntosenuntrazado

Podemos añadir puntos a un tra-zado y eliminar los ya existentes. La adición de puntos a un trazado concede control sobre un segmen-to determinado del trazado.

Pueden eliminarse puntos de un trazado para cambiar su forma o para simplificar su edición.

Añadirunpuntoenuntraza-doseleccionado

Seleccionamos la herramienta pluma de la sección vector del panel herra-mientas y dé clic en cualquier lugar del trazado en donde no exista un punto.

Eliminarunpuntodeunsegmentodetrazadoseleccionado

Podemos eliminar uno o varios puntos de un trazado seleccionado ya sea para simplificar el trazado o para modificar la forma del mismo.


Dé clic con la herramienta pluma de la sección vector del panel herramientas en un punto de esquina de un objeto seleccionado.

Dé doble clic con la herramienta pluma en un punto de curva de un objeto o trazado seleccionado.

Seleccione un punto con la herramienta subselección y pulse la tecla suprimir o Retroceso.

1.

2.

3.

4.

Ilustración: Añadir y eliminar puntos con la herramienta pluma.



Continuacióndeuntrazadoexistente

Con la herramienta pluma podemos seguir dibujando un trazado abierto existente ya sea para agregar puntos o modificar el trazado. Realice lo siguiente:


Dé clic en el punto final y continúe dibujando el trazado. El puntero de la herra-mienta pluma cambia para indicar que se está añadiendo a un trazado.

Fusióndedostrazadosabiertos

Es posible conectar dos trazados abiertos para formar uno continuo. Cuando se conec-tan dos trazados, el resultante toma los atributos de trazo, relleno y filtro del trazado situado más arriba.

Combinardostrazadosabiertos

Seleccionamos la herramienta pluma en el panel herramientas.

Dé clic en el punto final de uno de los trazados.

Desplace el puntero hasta el punto final del otro trazado y haga clic.

Uniónautomáticadetrazadosabiertossimilares

Resulta muy sencillo unir un trazado abierto con otro de ca-racterísticas similares en cuanto a trazo y relleno.

Seleccione un trazado abierto.

Seleccione la herramienta subselección y arrastre un punto final del trazado a unos pocos píxeles del punto final del trazado similar.

El punto final se ajusta al otro trazado y los dos se convierten en uno solo.

herramienta trazado de vectoresCon la herramienta trazado de vectores podemos crear trazados vectoriales de estilo libre, casi del mismo modo que se haría con un rotulador o una cera. La herramienta trazado de vectores está ubicada en el menú emergente de la herramienta pluma.

1.

2.

1.

2.

3.

1.

2.

3.

Ilustración: Fusión de dos trazados con la herramienta pluma.



La herramienta trazado de vectores per-mite cambiar los atributos de trazo y relleno de los trazados.

La herramienta trazado de vectores cuen-ta con varias categorías de trazos, como aerógrafo, caligráfico, carbón, cera o an-tinatural. Dentro de cada categoría existen distintos trazos, como Marcador claro y Marcador oscuro, Salpicadura de pintura, Bambú, Cinta, Confeti, 3D, Pasta de dientes y Pintura viscosa.

Aunque los trazos pueden parecer pintura o tinta, cada uno tiene los puntos y traza-dos de un objeto vectorial. Ello implica que se puede cambiar la forma del trazo utilizando cualquiera de las diversas téc-

nicas de edición de vectores. Tras remodelar el trazado, su trazo vuelve a dibujarse automáticamente.

Dibujaruntrazadovectorialdeestilolibre.

En el menú emergente de la herramienta pluma de la sección vector, seleccione la herramienta trazado de vectores.

Si lo cre conveniente, establezca los atributos de trazo y las opciones de la herra-mienta trazado de vectores en el Inspector de propiedades.

Si lo desea, cambie el nivel de precisión del trazado eligiendo un número del menú emergente precisión en el Inspector de propiedades para la herramienta trazado de vectores. Cuanto mayor sea el número que elija, más serán los puntos que aparecerán en el trazado que dibuje.

Arrastre el ratón por el lienzo para dibujar. Para restringir el trazado a una línea ver-tical u horizontal, mantenga pulsada la tecla mayús mientras arrastra el ratón.

Suelte el botón del ratón para terminar el trazado. Para cerrar el trazado, suelte el botón del ratón cuando el cursor haya regresado al punto de inicio del trazado.

Edición de trazadosMacromedia Fireworks 8 ofrece una serie de maneras de editar los objetos vectoriales. Podemos cambiar la forma del objeto moviendo, añadiendo o eliminando puntos; también se pueden mover los tiradores de punto para variar la forma de los segmentos de trazado adyacentes. Las herramientas de Estilo libre permiten cambiar la forma de los objetos mediante la edición directa de los trazados. También se pueden utilizar

1.

2.

3.

4.

�.

Ilustración: Dibujo creado con la herramienta trazado de vectores.



las operaciones de trazado para crear nuevas formas combinando o alterando trazados existentes.

la herramienta Estilo libreEsta herramienta nos permite doblar y remodelar objetos vectoriales directamente, sin necesidad de manipular sus puntos. Es posible empujar o estirar cualquier parte de un trazado con independencia de dónde se encuentren sus puntos. Fireworks añade, mueve o elimina automáticamente puntos situados a lo largo del trazado mientras se cambia la forma del objeto vectorial.

Ampliaruntrazadoseleccionado

Seleccione la herramienta Estilo libre en el panel herramientas.

Sitúe el cursor sobre el trazado seleccionado.

El cursor cambia al cursor de ampliación.

Arrastre el trazado.

Reduciruntrazadoseleccionado

Seleccione la herramienta Estilo libre en el panel Herramientas.

El cursor cambia al cursor de ampliación o reducción.

Separe ligeramente el puntero del trazado.

Arrastre hacia el trazado para reducirlo. Desplace el cursor para cambiar la forma del trazado seleccionado.

Cambiareltamañodelcursordereducción,sigaunadeestasindica-ciones

Mientras mantiene pulsado el botón del mouse, pulse la tecla 2 o la tecla de fle-cha hacia la derecha para aumentar la anchura del cursor.

Mientras mantiene pulsado el botón del mouse, pulse 1 o la tecla de flecha iz-quierda para reducir la anchura del cursor.

Para establecer el tamaño del cursor y la longitud del segmento afectado, anule la selección de todos los objetos en el documento e introduzca un valor de 1 a �00 en el cuadro de texto tamaño del Inspector de propiedades.

Este valor indica el tamaño en píxeles del cursor.

1.

2.

3.

1.

2.

3.



herramienta Remodelar áreaEsta herramienta nos permite ampliar el área de todos los trazados seleccionados dentro del círculo exterior del cursor de esta herramienta. El círculo interior del cursor repre-senta el límite de la herramienta a su máxima potencia. El área situada entre el círculo interior y el exterior remodela los trazados con una fuerza menor. El círculo exterior determina la atracción gravitatoria del cursor. Es posible establecer su fuerza.

Usode laherramientaRemodelaráreaparadistorsionar los trazadosseleccionados

En el menú emergente de la herramienta Estilo libre de la sección vector, selec-cione la herramienta Remodelar área.

Arrastre el mouse por los trazados para volver a dibujarlos, ya sea hacia afuera o hacia adentro. Se muestra un puntero circular de color rojo con doble línea.

CambiareltamañodelpunterodeRemodelarárea

Podemos cambiar el tamaño del puntero de la herramienta Remodelar área mientras realizamos la distorsión de los segmentos de trazados, para ello realice unos de los siguientes procedimientos.

Mientras mantiene pulsado el botón del ratón, pulse 2 o la tecla de flecha derecha para aumentar la anchura del cursor.

Mientras mantiene pulsado el botón del ratón, pulse 1 o la tecla de flecha izquier-da para reducir la anchura del cursor.

1.

2.

Ilustración: Edición y distorsión de segmentos con las herramientas Estilo libre y Remodelar área.



Para establecer el tamaño del cursor y la longitud del segmento afectado, anule la selección de todos los objetos en el documento e introduzca un valor de 1 a �00 en el cuadro de texto tamaño del Inspector de propiedades.

Este valor indica el tamaño en píxeles del cursor.

EstablecerlafuerzadelcírculointeriordelcursordeRemodelarárea

Introduzca un valor de 1 a 100 en el cuadro de texto Fuerza del Inspector de propiedades. Este valor indica el porcentaje de fuerza del cursor. A mayor por-centaje, mayor fuerza.

herramienta volver a dibujar trazados La herramienta Volver a dibu-jar trazado permite redibujar o ampliar un segmento de un trazado seleccionado, conser-vando sus características de trazo, relleno y efectos.

Volver a dibujar o am-pliarunsegmentodeuntrazadoseleccionado

En el menú emergente de la herramienta pluma de la sección vector, seleccione la herramienta volver a dibujar trazado.

Si ud. lo cre conveniente, modifique el nivel de precisión de la herramienta volver a dibujar trazado eligiendo un número del menú emergente del cuadro precisión del Inspector de propiedades. Cuanto mayor sea el número que elija, más serán los puntos que aparecerán en el trazado.

Sitúe el cursor sobre el trazado. El cursor cambiará por el de volver a dibujar trazado.

Arrastre el mouse para volver a dibujar o extender un segmento de trazado. La porción del trazado que se va a volver a dibujar se resalta en color rojo.

Suelte el botón del mouse.

herramienta CuchillaEsta herramienta nos permite dividir un trazado en dos o más trazados. El corte de los trazados pueden ser en varios objetos distintos.

1.

2.

3.

4.

�.

Ilustración: Edición de segmentos con la herramienta vol-ver a dibujar el trazado.



Cortaruntrazado

Seleccionamos el tra-zado.

Seleccione la herra-mienta Cuchilla de la sección vector en el panel herramientas.

Realice uno de los si-guientes procedimien-tos:

Arrastre el cursor a través del trazado.

Dé clic en el trazado.

Anule la selección del trazado y vuelva a seleccionar una de las partes dividi-das.

aplicación de colores, trazos y rellenosmacromedia Fireworks 8 nos provee de una gran diversidad de paneles, herramientas y opciones para organizar, elegir y aplicar colores a las imágenes de mapa de bits y a los objetos vectoriales. En el panel muestras, es posible elegir un grupo de muestras preestablecidas como Cubos de color, Tono continuo o Escala de grises, o crear grupos personalizados que incluyan, por ejemplo, los colores preferidos o los aprobados por un cliente.

La sección Colores del panel herramientas contiene controles de color de trazo y relleno junto con otras opciones. La sección Mapa de bits contiene las herramientas Cubo de pintura, Degradado y Cuentagotas, que permiten aplicar color a selecciones de mapa de bits, a áreas de un color similar y a objetos vectoriales.

AsignarleuncolordeRellenosólidoaunobjeto

Seleccionamos el objeto.

Realice cualquiera de los siguientes procedimientos

En el panel herramentas activamos el menú emergente Color de Relle-no.

En el Inspector de propiedades seleccionamos el cuadro emergente Co-lor de relleno.

En el panel muestras seleccionamos el color deseado.

Seleccionamos la herramienta Cuentagotas y elegimos un color deseado

1.

2.

3.

4.

1.

2.

Ilustración: División de trazados con la herramienta Cuchilla.



de cualquier lugar del espacio de trabajo de Fireworks.

Seleccionamos la herramienta Cubo de pintura y seleccionamos el color de relleno en el Inspector de propiedades.

Elegimos un color deseado en el panel mezclador de colores.

Eliminaruncolorderellenosólidodeunobjeto

Seleccionamos el objeto

Realizamos cualquiera de los siguientes procedimientos

Activamos el botón sin color de trazo o relleno de la sección Colores del panel herramientas.

En el Inspector de propiedades seleccionamos el cuadro emergente Co-lor de relleno y seleccionamos el botón transparente.

En el panel mezclador de colores seleccionamos el botón selector de color del sistema.

Rellenos degradadosLos rellenos degradados permiten mezclar colores para crear distintos efectos. Fireworsk contiene una serie de tipos de rellenos degradados de fácil aplicacióny edición.

Aplicarunrellenodegradadoaunobjeto

Seleccionamos un objeto.

Seleccionamos un degradado en el menú emergente Categoría de relleno del Inspector de propiedades.

1.

2.

1.

2.

Ilustración: Aplicar y eliminar relleno de color sólido a un objeto seleccionado.



Nos dirigimos a la opción degradado y selecionamos el tipo de degradado que deseamos.

El relleno se visualiza en el objeto seleccionado y se convierte automáticamente en el relleno activo.

Ediciónderellenosdegradados

Se puede edita el relleno degradado actual, podemos hacer clic en cualquier cuadro Color de relleno y luego utilizar la ventana emergente Editar degradado. Podemos realizar la edición de rellenos degradados desde el Inspector de propiedades, la sección Colores del panel Herramientas o desde

AbrirlaventanaemergenteEditardegradado

Seleccione un objeto que tenga un relleno degradado o elija un relleno de este tipo en el menú emergente Categoría de relleno del Inspector de propiedades.

3.

4.

1.

Ilustración: Diversos rellenos degradados aplicados a varios objetos.

Ilustración: Edición de rellenos degradados.



Dé clic en el cuadro Color de relleno del Inspector de propiedades o del panel herramientas para abrir la ventana emergente.

Se abre la ventana emergente de edición de degradados con la pendiente de color y la vista previa del degradado

Añadirunamuestradecolorodeopacidadaldegradado

Realice una de estas operaciones:

Para añadir una muestra de color, haga clic en el área situada debajo de la pen-diente de color del degradado.

Para añadir una muestra de opacidad, haga clic en el área situada sobre la pen-diente de degradado de color.

Eliminarunamuestradecolorodeopacidaddeldegradado

Arrastre la muestra fuera de la ventana emergente Editar degradado.

Definir o cambiar el color de una muestra de color

Dé clic en la muestra de color.

Elija un color en la ventana emergente.

Definir o cambiar la transparencia de una muestra de opacidad

Dé clic en la muestra de opacidad.


Arrastre el deslizador para definir el porcentaje de transparencia, corres-pondiendo 0 a totalmente transparente y 100 a completamente opaco.

Introduzca un valor numérico entre 0 y 100 para definir la opacidad. En las áreas transparentes, se muestra un diseño ajedrezado en el gradiente.

Cuando haya terminado de editar el degradado, pulse Intro o haga clic fuera de la ventana emergente Editar degradado.

El relleno degradado aparece en los objetos que estén seleccionados y se convierte en el relleno activo.

Ajustarlatransiciónentreloscoloresdelrelleno

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

2.

1.

2.

1.

2.

3.



Rellenos de patrónUn relleno de patrón es un relleno con un gráfico de mapa de bits que se aplica a un objeto de trazado.

Fireworks provee más de una docena de rellenos de patrón, entre otros, Alfombra be-réber, Hojas, Madera, Luna, Azul pegagozo, etc.

Aplicarunrellenodepatrónaunobjetoseleccionado


Seleccione patrón en el menú emergente Categoría de relleno del Ins-pector de propiedades.

Haga clic en el cuadro Color de relleno del panel herramientas y en opcio-nes de relleno y elija patrón en el menú emergente Categoría de relleno.

Seleccione el patrón en el menú emergente de nombres de patrones. El relleno de patrón aparecerá en el objeto seleccionado y se convertirá en el color de relleno activo.

transformación y distorsión de rellenos degradados y de patrónEs posible mover, rotar, sesgar y cambiar la anchura del relleno de patrón o degradado de un objeto. Cuando se utilizan las herramientas puntero y degradado para seleccionar un objeto que tiene un relleno degradado o de patrón, aparece una serie de tiradores en el objeto o cerca de él.

Estos tiradores se pueden arrastrar para ajustar el relleno del objeto. Utilice los tiradores de relleno para ajustar de forma interactiva un relleno de patrón o degradado.

1.

2.

Ilustración: Diversos rellenos de patrón.



Moverelrellenodentrodeunobjeto

Arrastre el tirador redondo o haga clic en otra posición dentro del relleno con la herramienta degradado.

Rotarelrelleno

Arrastre las líneas que unen los tiradores, aparecerá un tirador arco curvo.

Ajustarlaanchuraeinclinacióndelrelleno

Arrastre un tirador cuadrado.

Establecimiento de bordes de relleno duros, suavizados o fundidosEn Fireworks 8, podemos definir el borde de un relleno como una línea sólida o bien definirlo como un borde suavizado o fundido. De forma predeterminada, los bordes están suavizados.

El suavizado alisa los bor-des dentados que pueden presentar los objetos redon-deados, como elipses y cír-culos, al mezclar sutilmente el borde con el fondo.

El fundido, sin embargo, produce un difuminado visible en ambos lados del borde. De este modo se suavizan y se logra un efecto de iluminación.

Ilustración: Transformación y distorsión de rellenos degradados y de patrón.

Ilustración: Diversos tipos de bordes de rellenos y sus propiedades.



Cambiarelbordedeunobjetoseleccionado.

Realice una de las siguientes acciones para mostrar el menú emergente Borde:

Dé clic en el menú emergente borde del Inspector de propiedades.

Dé clic en el cuadro Color de trazo del panel herramientas, en opciones del trazo y en el menú emergente borde.

Elija una opción de borde: borde duro, suavizado o Fundido.

Para obtener un borde fundido, elija también el número de píxeles que se fundirán a cada lado del borde.

El valor predeterminado es 10. Puede elegir cualquier cifra entre 0 y 100. Cuanto más alto sea el nivel, mayor será el grado de fundido.

texturas de rellenosEs posible crear efectos tridimensionales tanto para los trazos como para los rellenos mediante la adición de textura.Además de las texturas que proporciona Fireworks, pueden utilizarse texturas externas.

Adicióndetexturaaunrelleno

Las texturas mo-difican el brillo de un relleno, aun-que no el matiz, y le dan un aspecto menos mecánico y más orgánico. Es posible añadir una textura a cualquier relleno. Fireworks se suministra con varias texturas en-tre las que elegir, como Gasa, Marea negra o Lija. También se pueden utilizar archivos de mapa de bits como texturas, lo cual permite crear prácticamente cualquier tipo de textura personalizada.

Añadirtexturaalrellenodeunobjetoseleccionado

Realice una de las siguientes acciones para abrir el menú emergente textura de un relleno:

Dé clic en el menú emergente textura de relleno en el Inspector de pro-piedades.

1.

2.

3.

1.

Ilustración: Adición de texturas a rellenos y sus propiedades.



Dé clic en el cuadro Color de trazo del panel Herramientas, en opciones del trazo y en el menú emergente textura.

Siga uno de los siguientes procedimientos:

Seleccione una textura en el menú emergente.

Seleccione otras en el menú emergente y desplácese a un archivo de tex-tura si desea utilizar una textura externa.

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

Seleccione transparente para introducir un grado de transparencia en el relleno. El porcentaje de textura también controla el grado de transparencia.

utilización de trazosMediante el Inspector de propiedades, en el menú emergente opciones de trazo y el cuadro de diálogo Editar trazo, es posible controlar todas las características del pincel, como la cantidad de tinta, el tamaño y forma de la punta, la textura, el efecto de los bordes y el aspecto.

Aplicacióndetrazos

Los atributos de trazo de las herramientas Pluma, Lápiz y Pincel pueden cambiarse con el fin de que el siguiente objeto vectorial que se dibuje tome los nuevos atributos; también es posible aplicar atributos de trazo a los objetos o trazados ya dibujados.

El color de trazo vigente aparece en el cuadro de color de trazo del panel Herramien-tas, del Inspector de propiedades y del Mezclador de colores. El color de trazo de una herramienta de dibujo o de un objeto seleccionado se puede cambiar en cualquiera de estos tres paneles.

El icono de lápiz indica el cuadro de color de trazo en el panel Herramientas, el Inspector de propiedades y el Mezclador de colores.

Cambiarlosatributosdetrazodelosobjetosseleccionados,sigaunadeestasindicaciones

Elija entre los atributos de trazo en el Inspector de propiedades. Para poder seleccionar más atributos elija opciones del trazo en el menú emergente Cate-goría del trazo.

Dé clic en el cuadro de Color de trazo del panel herramientas y, a continua-ción, en opciones del trazo. Elija entre los atributos de trazo en la ventana emergente opciones del trazo.

2.

3.

4.



Utilice las opciones del Inspector de propiedades o de la ventana emergente opciones del trazo para cambiar el trazo aplicado a un objeto.

Cambiarelcolordeltrazodeunaherramientadedibujo

Pulse Control+d para anular la selección de todos los objetos.

Seleccione una herramienta de dibujo en el panel herramientas.

Dé clic en el cuadro Color del trazo del panel herramientas o del Inspector de propiedades para abrir la ventana emergente de color.

Elija un color para el trazo en el conjunto de muestras.

Arrastre el ratón para dibujar el objeto.

Los trazos creados adoptarán el color que aparece en el cuadro Color del trazo.

Quitartodoslosatributosdetrazodeunobjetoseleccionado,sigaunade estas instrucciones:

Elija Ninguno en el menú emergente Categoría del trazo del Inspector de pro-piedades o de la ventana emergente opciones del trazo.

Dé clic en el cuadro Color de trazo del panel herramientas o del Inspector de propiedades y, a continuación en el botón transparente.

1.

2.

3.

4.

�.

Ilustración: Atributos de trazo de objetos.



Creación de trazos personalizadosPodemos emplear el cuadro de diálogo Editar trazo para modificar las características específicas de un trazo. La presentación preliminar del trazo en la parte inferior de cada ficha muestra la pincelada actual con los parámetros actuales. Los valores de sensibilidad de la presión y velocidad se reflejan en la vista preliminar con un trazo que se estrecha o difumina o bien cambia en alguna forma de izquierda a derecha.

AbrirelcuadrodediálogoEditartrazo

Realice unos de los siguientes procedimientos para abrir la ventana emergente opciones del trazo:

Seleccione opciones del trazo en el menú emergente Categoría del trazo del Inspector de propiedades.

Seleccione opciones del trazo en la ventana emergente del cuadro Color del trazo del panel herramientas.

Dé clic en avanzada.

Se visualiza el cuadro de diálogo Edi-tar trazo.

Definir opciones generales de pincelada

En la ficha opciones del cuadro de diálogo Editar trazo, defina la cantidad de tinta, el espaciado y la velocidad. Las velocidades más altas producen pinceladas que fluyen en el tiempo, como con un aerógrafo.

Para superponer pinceladas y lograr trazos densos, elija Concentración.

Para definir la textura del trazo, cambie la opción textura. Cuanto mayor sea el número, más evidente será la textura.

Para establecer la textura en los bordes, introduzca un número en el cuadro de texto textura de bordes y elija un efecto de borde en el menú emergente Efecto de bordes.

Defina el número de puntas que desea que tenga la pincelada. En el caso de va-rias puntas, introduzca un valor en Espacio entre puntas y elija el método de variación del color. Las opciones son aleatorio, uniforme, Complementario, matiz y sombra.

Para elegir una línea punteada o discontinua, seleccione una opción del menú emergente guión.

1.

2.

1.

2.

3.

4.

�.

�.

Ilustración: Cuadro de diálogo Editar trazos.



Para fijar la separación de los guiones y espacios de una línea discontinua, utilice los tres métodos de activación y desactivación de los cuadros de texto para con-trolar el primer, el segundo y el tercer guión respectivamente.

Dé clic en aplicar para que los parámetros actuales se apliquen a los trazos se-leccionados, y haga clic en aceptar.

Modificar la punta del pincel

En la ficha Forma del cuadro de diálogo Editar trazo, seleccione Cuadrada para que la punta sea cuadrada o anule su selección para que sea redonda.

Introduzca valores para el tamaño de la punta, la suavidad de los bordes, el aspecto y el ángulo de la punta del pincel.

Dé clic en aplicar y luego en Aceptar.

Fireworks dispone de parámetros de trazo para ajustar los atributos controlados por la velocidad y la presión cuando se utiliza una tableta y un puntero Wacom sensibles a la presión. Es posible elegir el atributo de trazo que se controla con el puntero de la tableta.

Definir la sensibilidad del trazo

En la ficha sensibilidad del cuadro de diálogo Editar trazo, elija una propiedad de trazo, como tamaño, Cantidad de tinta o saturación, en el menú emergente.

En las opciones afectado por, elija el grado en que los datos de sensibilidad afectan a la propiedad actual del trazo.

Dé clic en aceptar.

Colocacióndelostrazosenlostrazados

Podemos ubicar los trazos de los trazados dentro del trazado, centrado en el trazado o fuera del trazado. De esta forma se puede controlar el tamaño de los objetos trazados y conseguir efectos como los trazos en los bordes de botones biselados.

De forma predeterminada, el trazo (o pincelada) de un objeto aparece centrado en un trazado.

Es posible utilizar el menú emergente de trazo de la ventana opciones del trazo para reorientar las pinceladas.

Situarlostrazosdelpinceldentroofueradeltrazadoseleccionado

Dé clic en el cuadro Color de trazo del panel herramientas o del Inspector de propiedades para abrir la ventana emergente de color.

�.

8.

1.

2.

3.

1.

2.

3.

1.



Seleccione una opción en el menú emergente ubicación del trazo en relación al trazado: Interior, Centrado o Exterior.

También puede elegir Relleno sobre trazo.

Por lo general, el trazo se superpone al relleno. Al seleccionar Relleno sobre trazo, el relleno se dibuja sobre el trazo.

Si selecciona esta opción con un objeto que tiene un relleno opaco, las partes del trazo que caen dentro del trazado se oscurecen.

Los rellenos con un grado de transparencia pueden tintarse o mezclarse con los trazos de pincel incluidos en el trazado.

organización de objetosCuando se trabaja con varios objetos en un único documento, es posible utilizar diversas técnicas para organizar el documento:

Agrupar objetos individuales para tratarlos como si fueran un solo objeto o pro-teger la relación de cada objeto con otros objetos del grupo.

Situar los objetos delante o detrás de otros objetos.

La manera de organizar los objetos se denomina orden de apilamiento .

Alinear los objetos seleccionados respecto a un área del lienzo o respecto al eje horizontal o vertical.

2.

3.

Ilustración: Atributos de trazo de objetos.



Agrupacióndeobjetos

Es posible agrupar objetos individuales seleccionados y, a continuación, ma-nipularlos como si fueran un único ob-jeto. Por ejemplo, una vez dibujados los pétalos de una flor como objetos indivi-duales, éstos pueden agruparse para selec-cionar y mover toda la flor como si fuera un único objeto. Los grupos pueden editarse sin desagrupar. Se puede seleccionar un objeto individual de un grupo y editarlo sin desagruparlo.

Agrupardosomásobjetos

Seleccione los objetos a agrupar.

Nos dirigimos al menú Modificar y seleccionamos la opción agrupar.

Desagruparobjetos

Seleccionamos el objeto agrupado

Nos dirigimos al menú Modificar y seleccionamos la opción desagrupar.

Seleccióndeobjetosincluidosengrupos

Para trabajar por separado con objetos de un grupo, desagrupe los objetos o utilice la herramienta Subselección para seleccionar cada uno de ellos sin que el grupo se vea afectado.

Si se modifican los atributos de un objeto subseleccionado, los cambios afectan sola-mente al objeto seleccionado, no a todo el grupo. Si mueve un objeto subseleccionado a otra capa, el objeto se suprime del grupo original.

Seleccionarunobjetoqueformapartedeungrupo

Elija la herramienta subselección y dé clic en el objeto o arrastre el puntero para crear un área de selección a su alrededor. Para añadir objetos o eliminarlos de la selección, mantenga pulsada la tecla mayús al mismo tiempo que hace clic o arrastra.

Ilustración: Agrupar objetos.



Seleccionarelgrupoquecontieneunobjetosubseleccionado,sigaunodeestosprocedimientos

Dé clic con el botón derecho del mouse en el grupo y elija seleccionar > super-seleccionar en el menú contextual.

Nos dirigimos al menú seleccionar y elegimos superseleccionar.

Seleccionartodoslosobjetosdeungruposeleccionado,sigaunodeestosprocedimientos

Dé clic con el botón derecho del mouse en cualquier lugar del grupo, nos diri-gimos al menú seleccionar y eleh}gimos la opción subseleccionar en el menú contextual.

Nos dirigimos al menú seleccionar y elegimos subseleccionar.

Apilamientodeobjetos

Fireworks apila los objetos en una capa basándose en el orden en que se crearon y sitúa los más recientes al principio de la pila. El orden de apilamiento de los objetos determina la manera en que aparecen los objetos al su-perponerlos. Las capas también influyen en el orden de apilamien-to. Por ejemplo, supongamos que un documento tiene dos capas denominadas Capa 1 y Capa 2. Si la Capa 1 se encuentra debajo de la Capa 2 en el panel Capas, entonces el contenido de la Capa 2 aparece delante del contenido de la Capa 1. Para cambiar el orden de las capas, arrastre la capa del panel Capas a otra posición.

Cambiarelordendeapilamientodeunobjetoogrupoenunacapa

Seleccionamos el menú Modificar nos dirigimos a la opción organizar y elegi-mos traer al frente o Enviar al fondo para situar el objeto o grupo en el primer plano o en el fondo del orden de apilamiento.

Seleccionamos el menú Modificar nos dirigimos a la opción organizar y ele-gimos traer hacia adelante o Enviar hacia atrás para mover el objeto o grupo una posición hacia arriba o hacia abajo en el orden de apilamiento.

Ilustración: Orden de apilamiento de objetos.



Si hay varios objetos o grupos seleccionados, los objetos se sitúan delante o detrás de todos los objetos no seleccionados, pero conservan el orden relativo entre sí.

Alinearobjetosseleccionados

Podemos organizar los objetos seleccionados alineandolos a la derecha, a la izquierda, hacia la parte superior o inferior, centrarlos horizontal o verticalmente.

Para ello realice uno de los siguientes procedimientos:

Nos dirigimos al menú Modificar, opción alinear y seleccionamos Izquierda para alinear los objetos con el objeto seleccionado situado más a la izquierda.

Nos dirigimos al menú Modificar, opción alinear y seleccionamos Centrar verticalmente para alinear los puntos centrales de los objetos en el eje verti-cal.

Nos dirigimos al menú Modificar, opción alinear y seleccionamos derecha para alinear los objetos con el objeto seleccionado situado más a la derecha.

Nos dirigimos al menú Modificar, opción alinear y seleccionamos superior para alinear los objetos con el objeto seleccionado situado más arriba.

Nos dirigimos al menú Modificar, opción Alinear y seleccionamos Centrar hori-zontalmente para alinear los puntos centrales de los objetos en el eje horizontal.

Nos dirigimos al menú Modificar, opción alinear y seleccionamos Inferior para alinear los objetos con el objeto seleccionado situado más abajo.

Distribuirdemanerauniformelasanchurasoalturasdetresomásob-jetosseleccionados

Nos dirigimos al menú Modificar, opción alinear y seleccionamos distribuir anchos o menú Modificar, opción alinear y elegimos distribuir altos.

Ilustración: alineación y distribución de objetos.



Edición con operaciones de trazadomacromedia Fireworks 8 nos provee de diversas operaciones de trazados ubicados en el menú Modificar para crear nuevas formas combinando o alterando trazados existentes.

Combinacióndeobjetosdetrazado

Podemos combinar varios objetos de trazado en un solo objeto. Es posible combinar los extremos de dos trazados abiertos para crear uno cerrado, o unir varios trazados para crear uno compuesto.

Crearuntrazadocontinuoapartirdedosabiertos

Seleccionamos la herramienta pluma en el panel herramientas.

Seleccione dos puntos finales en dos trazados abiertos.

Dirigase al menú Modificar, Combinar trazados y seleccione unir.

Crearuntrazadocompuesto

Seleccionamos dos o más trazados abiertos o cerrados.

Dirigase al menú Modificar, Combinar trazados y seleccione unir.

Dividir un trazado compuesto:

Seleccione el trazado compuesto.

Dirigase al meú Modificar, Combinar trazados y seleccione separar.

Unióndetrazados

Podemos generar la unión de varios trazados cerrados como un solo trazado que abarque el área completa de los objetos originales.

Para ello realice los siguientes procedimientos.

Seleccionamos los objetos que vamos unir.

Dirigase al menú Modificar, Combinar trazados y seleccione unión. El trazado resultante toma los atributos de trazo y relleno del objeto situado más atrás.

Interseccióndetrazados

Podemos crear un objeto a partir de la intersección de otros objetos. Con el comando In-tersección, es posible crear un objeto a partir de la intersección de dos o más objetos.

1.

2.

3.

1.

2.

1.

2.

1.

2.



Para ello realice los siguientes procedimientos:

Seleccionamos todos los trazados a interceptar.

Nos dirigimos al menú Modificar, opción Combinar trazados y seleccionamos Intersección. El trazado resultante toma los atributos de trazo y relleno del objeto situado más atrás.

Perforaciónoeliminacióndeporcionesdeunobjetodetrazado

Podemos perforar diversas partes de un objeto de trazado seleccionado que queden solapadas por otro objeto de trazado seleccionado que esté situado delante de él.

Perforarporcionesdeunobjetodetrazado

Seleccionamos el objeto de trazado que define el área que desea eliminar.

Dirigase al menú Modificar, Organizar y seleccionamos traer al frente.

Mantenga pulsada la tecla mayús y añada a la selección el objeto del trazado cuyas partes desea eliminar.

Dirigase al menú Modificar, opción Combinar trazados y seleccionamos per-foración. Los atributos de trazo y de relleno no se modifican.

Recortedeuntrazado

Es posible recortar un trazado utilizando la forma de otro. El trazado situado más ade-lante define la forma del área recortada.

Recortaruntrazadoseleccionado

Seleccione el objeto de trazado que define el área que va a recortar.

Nos dirigimos al menú Modificar, opción organizar y seleccionamos traer al frente.

1.

2.

1.

2.

3.

4.

1.

2.

Ilustración: unión, intersección y perforación de trazados.



Pulse mayús y añada a la selección el objeto de trazado que va a recortar.

Dirigase al menú Modificar, Combinar trazados y seleccione Recortar. El ob-jeto de trazado resultante toma los atributos de trazo y relleno del objeto situado más atrás.

Simplificación de un trazado

Con Macromedia Fireworks 8 podemos eliminar puntos de un trazado manteniendo su forma general. El comando Simplificar suprime puntos redundantes de un trazado en la cantidad que se especifique.

Simplificar un trazado seleccionado

Dirigase al menú Modificar, Modificar el trazado y seleccione Simplificar.

Introduzca una cantidad de simplificación y acepte.

Expandiruntrazo

Podemos convertir el trazo de un trazado seleccionado en un trazado cerrado. El resultado crea la ilusión de un trazado sin relleno y con un trazo que toma los mismos atributos que el relleno del objeto original. Realice lo siguiente:

Nos dirigimos al menú Modificar, opción Modificar el trazado y seleccionamos Expandir trazo, se visualiza el cuadro de diálogo Expandir trazo.

Establecemos la anchura del trazado cerrado final.

Especificamos un tipo de vértice: en ángulo, redondeado o biselado.

Elegimos el vértice en ángulo, establezca el ángulo mínimo, que es el punto en que un vértice de este tipo se convierte automáticamente en biselado. El ángulo mínimo es la relación entre la longitud del vértice en ángulo y la anchura del trazo.

Seleccionamos una opción de terminación: unida, cuadrada o redonda. Luego, pulse aceptar.

3.

4.

1.

2.

1.

2.

3.

4.

�.

Ilustración: Recortar, simplificar y expandir trazados.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 775 píxeles, Al: 258 píxeles, Resolución: 72 ppp y guardarlo con el nombre site_motorweb.png en la carpeta Capitulo4.

Utilizar las herramientas de la sección vectores y Colores. Abrir los archivos car1.jpg, car2.jpg y fondo1.jpg seleccionar las áreas correspondientes y moverlos hacia site_motorweb.png.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 775 píxeles, Al: 700 píxeles, Resolución: 72 ppp y guardarlo con el nombre site_digital_design.png en la carpeta Capitulo4. Utilizar las herramientas de la sección vectores y colores.Abrir los archivos modelo1jpg, modelo2.jpg, futuro1.jpg, fondo1jpg y fondo2.jpg, seleccionar las áreas correspondientes y moverlos hacia site_digital_design.png.



Manejo del Texto

Enestecapítulo

Aprenderá a emplear la Herramienta Texto y su respectiva edición.



Colocar texto en el documento.

Editar texto en el lienzo.

Adaptar texto a trazado.

Convertir texto en trazados.

En el desarrollo de este capítulo serán realizadas actividades prácticas haciendo uso de los archivos de la carpeta Capítulo5. Solicite los archivos al instructor y cópielos a su carpeta mis documentos.Es importante que lleve acabo las actividades consecutiva-mente pues algunas actividades requieren que las anteriores hayan sido completadas.

utilización de texto

macromedia Fireworks 8 posee una gran varie-dad de funciones de texto que normalmente las encontramos en aplicaciones de autoedición más avanzadas. Podemos generar texto con una gran cantidad de fuentes y tamaños, así como ajustar su acercamiento, espaciado entre caracteres, color de texto, interlineado, desplazamiento de línea de base, alineaciones, niveles de suavizado, sangrias de párrafo, espaciados antes y después del párrafo

y otras propiedades. La mezcla de las funciones de edición de texto de Fireworks con la amplia gama de trazos, rellenos, filtros y estilos permite que el texto se convierta en un elemento importante en el diseño de los elemnetos web. Cuando creamos un objeto de texto, Fireworks almacena el objeto con un nombre relacionado con el contenido del mismo, lo que facilita su ubicación posterior, si deseamos podemos cambiarlo.

La posibilidad de modificar el texto en el momento que deseemos, incluso después de aplicar filtros automáticos como sombras, biseles u otro filtro, facilita la edición del texto.


Capítulo v

También es posible copiar objetos que incluyan texto y cambiar el texto en cada copia. Para aumentar las posibilidades de diseño, se dispone de texto vertical, texto transfor-mado, texto amoldado a un trazado y texto convertido en trazados o imágenes.

Introducción de texto

Empleando la herramienta texto y las opciones del Inspector de propiedades, podemos introducir texto, asignarle formato y modificarlo en los gráficos.

Creacióndebloquesdetexto

El texto de los documentos de Fireworks va incluido en un rectángulo con tiradores denominado bloque de texto.

Introducirtexto

Seleccionamos la herramienta texto de la sección vector en el panel herra-mientas.

En el Inspector de propiedades visualizamos las opciones de la herramienta texto.

Seleccione el color, la fuente, el tamaño, el espaciado y otras características de texto.


Dé clic en el lugar del documento donde desea que empiece el bloque de texto. Así se crea un bloque de texto de tamaño automático.

Arrastre el ratón para dibujar un bloque de texto. Así se crea un bloque de texto de anchura fija.

Para obtener más información sobre los distintos tipos de bloques de tex-to, consulte Utilización de bloques de texto de tamaño automático y de anchura fija.

Escriba el texto. Para introducir un cambio de párrafo, pulse Enter.

Si lo desea, seleccione texto en el bloque de texto después de escribirlo y cambie su formato.

Cuando termine de introducir texto, siga uno de estos procedimientos:

Dé clic fuera del bloque de texto.

Seleccione otra herramienta en el panel Herramientas.

Pulse Esc.

1.

2.

3.

4.

�.

�.

Manejo del Texto


Desplazamientodebloquesdetexto

Es posible seleccionar un bloque de texto y moverlo a cualquier lugar del documento, de manera idéntica a los demás objetos. Los bloques de texto también se pueden mover al arrastrar el ratón para crearlos.

Desplazarunbloquedetexto

Seleccionamos la herramienta puntero de la sección seleccionar en el panel herramientas.

Arrástre el bloque de texto a la nueva ubicación.

Moverunbloquedetextoalarrastrarelratónparacrearlo

Seleccione la herramienta texto de la sección vector del panel herramientas.

Mantenga pulsado el botón del mouse, pulse y mantenga pulsada la barra espa-ciadora, y arrastre el bloque de texto hasta otro punto del lienzo.

Suelte la barra espaciadora para continuar dibujando el bloque de texto.

Utilización de bloques de texto de tamaño automático y de anchura fija

Podemos asignarle un tamaño automático o una anchura fija a los bloques de texto de Macromedia Fireworks 8. Un bloque de texto de tamaño automático se expande en horizontal a medida que se escribe. Si se borra texto, el bloque de texto de tamaño auto-mático se reduce para adaptarse al texto restante. Cuando se hace clic en el lienzo con la herramienta texto y se comienza a escribir, de forma predeterminada se crean bloques de texto de tamaño automático. Los bloques de texto de anchura fija permiten controlar la anchura del flujo de texto. Los bloques de este tipo se crean de forma predeterminada al arrastrar el ratón para dibujar un bloque de texto con la herramienta texto.

Cuando el puntero de texto está activo dentro de un bloque de texto, la esquina superior derecha de éste muestra un círculo hueco o un cuadrado hueco. El círculo indica un

1.

2.

1.

2.

3.

Ilustración: Creación de bloques de texto.

Capítulo V : Manejo del Texto


bloque de texto de tamaño automático mientras que el cuadrado indica un bloque de texto de anchura fija. Haga doble clic en la esquina para cambiar de un tipo de bloque de texto a otro.

Asignar anchura fija o tamaño automático a un bloque de texto

Dé doble clic dentro del bloque de texto.

Dé doble clic en el círculo o cuadrado de la esquina superior derecha del bloque de texto.

El bloque de texto cambia al otro tipo.

Cambiar un bloque de texto seleccionado a anchura fija cambiando su tamaño

Arrastre un tirador de cambio de tamaño.

Esta operación transforma automáticamente el bloque de texto de tamaño auto-mático a anchura fija.

Edicióndetexto

Dentro de un bloque de texto se pueden cambiar todos los aspectos, como el tamaño, la fuente, el espaciado, el interlineado y el desplazamiento de la línea de base. Al editar texto, Fireworks también actualiza sus atributos de trazo, relleno y filtro.

Los atributos de un bloque de texto pueden cambiarse con el Inspector de propiedades. Si el Inspector de propiedades está minimizado, haga clic en la flecha de la esquina inferior derecha para ver todas las propiedades de texto. También se puede utilizar el Editor de texto y los comandos del menú texto para editar texto, pero el Inspector de propiedades ofrece la forma más rápida de cambiar sus atributos y aporta un control de edición más detallado que las otras dos posibilidades. Por lo que respecta al comando deshacer, los cambios realizados durante una sesión de edición de texto constituyen una sola operación. Si se elige el menú Edición, deshacer mientras se edita texto, se cancelarán todas las ediciones de texto realizadas desde que se hizo doble clic en el bloque de texto para modificar su contenido.

1.

2.

3.

1.

2.

Ilustración: Cambiar de anchura fija a tamaño automático o viceversa.

Manejo del Texto


Editartexto

Seleccione el texto que desea modificar:

Dé clic en un bloque de texto con la herramienta puntero o subselección para seleccionar todo el bloque. Para seleccionar varios bloques, mantenga pulsada la tecla mayús mientras selecciona cada uno de los ellos.

Dé doble clic en un bloque de texto con la herramienta puntero o subse-lección y seleccione las palabras que desee editar.

Dé clic dentro de un bloque de texto con la herramienta texto y seleccione las palabras que desee editar.

Realice las modificaciones en el Inspector de propiedades.

Realice uno de los siguientes procedimientos para aplicar los cambios:

Dé clic fuera del bloque de texto o bien presione Esc.

Seleccione otra herramienta en el panel herramientas.

Cambiarunafuente,tamañoyestilodetexto

Selecionamos el texto deseado.

Elijimos una fuente distinta en el menú emergente Fuente para cambiarlo. Las fuentes que se han utilizado recientemente aparecen en la parte superior del menú emergente Fuente.

Para cambiar el tamaño de fuente, arrastre el deslizador emergente tamaño o introduzca un valor en el cuadro de texto.

Para aplicar un estilo de negrita, cursiva o subrayado, dé clic en el botón del estilo correspondiente.

1.

2.

3.

1.

2.

3.

4.

Ilustración: Edición de un texto seleccionado.



Asignarcoloraltexto

Podemos asignar color al texto empelando el cuadro Color de relleno. De forma pre-determinada, el texto es negro y no tiene trazo. Es posible cambiar el color de todo el texto de un bloque seleccionado o sólo del texto resaltado dentro de un bloque. La herramienta texto mantiene el color de texto actual de un bloque a otro.

Unos de los punto importantes es que la herramienta texto mantiene el color de texto actual con independencia del color de relleno de otras herramientas. Cuando se utiliza otra herramienta después de la de texto, los parámetros de relleno y trazo vuelven a los que había activos antes de que se utilizara la herramienta texto.De igual forma, cuando se vuelve a la herramienta texto, el color de relleno vuelve al color de texto más reciente y el trazo se define como ninguno. Fireworks mantiene el color actual de la herramienta texto aunque cambie de documento o cierre y vuelva a abrir la aplicación.

Podemos asignar color a todo el texto de los bloques de texto seleccionados mediante el Inspector de propiedades, con cualquier cuadro Color de relleno o con la herra-mienta Cuentagotas. También se puede utilizar cualquiera de los métodos siguientes para definir el color del texto de la herramienta texto.

Definir el color de todo el texto de un bloque seleccionado


Dé clic en el cuadro Color de relleno del Inspector de propiedades y elija un color en la ventana emergente, o elija un color de muestra en cualquier lugar de la pantalla utilizando el puntero de cuentagotas mientras una de las ventanas emergentes de color está abierta.

Dé clic en el cuadro Color de relleno del panel herramientas y elija un color en la ventana emergente, o elija un color de muestra en cualquier lugar de la pantalla utilizando el puntero de cuentagotas mientras está abierta la ventana emergente del cuadro Color de relleno.

Dé clic en el icono situado junto al cuadro Color de relleno del panel herra-mientas, elija la herramienta Cuentagotas y haga clic en un color de muestra en cualquier lugar de un documento abierto.

El color del cuadro Color de relleno del panel herramientas cambia para refle-jar el color de muestra elegido con el puntero de cuentagotas o con la herramien-ta Cuentagotas; también cambia el color del texto seleccionado.

Aplicacióndecoloratextoresaltadodentrodeunbloquedetexto

Podemos modificar el color del texto resaltado o seleccionado dentro de un bloque de texto utilizando el Inspector de propiedades o empleando cualquier cuadro de Color de relleno.

Manejo del Texto


La herramienta Cuentagotas no se puede utilizar para modificar el color del texto resaltado.

Si intentamos aplicar un trazo a un texto resaltado dentro de un bloque, se seleccionará automáticamente todo el bloque de texto.

Aplicarcolorsóloaltextoseleccionadodentrodeunbloque

Realice uno de los siguientes procedimientos.

Dé clic en el cuadro Color de relleno del Inspector de propiedades y elija un color en la ventana emergente, o elija un color de muestra en cualquier lugar de la pantalla utilizando el puntero de cuentagotas mientras está abierta la ventana emergente del cuadro Color de relleno.

Dirigase al panel herramientas, sección Colores y dé clic en el cuadro Color de relleno, a continuación elegimos un color desde la ventana emergente, o elija un color de muestra en cualquier lugar de la pantalla utilizando el puntero de cuentagotas mientras está abierta el menú emergente Color de relleno.

Definición del ajuste entre caracteres

Esta propiedad ajuste entre caracteres nos permite aumentar o reducir la separación entre determinados pares de letras con el fin de mejorar su presentación. Muchas fuentes in-cluyen información que reduce automáticamente la separación entre determinados pares de letras, como “TA” o “Va”. El ajuste automático entre caracteres de Fireworks utiliza dicha información cuando presenta el texto, pero es posible desactivar esta función en el caso de utilizar tamaños de fuente pequeños o cuando el texto no esté suavizado. El ajuste se mide como un porcentaje. Definir el ajuste entre caracteres, puede utilizar el Inspector de propiedades o el teclado.

Ilustración: Cambio de color a un texto seleccionado, y a un bloque de texto seleccionado.



Desactivarelajusteautomáticodecaracteres

En el Inspector de propiedades, anule la selección de ajuste automático de caracteres.

Establecerelajusteentrecaracteres

Realice uno de los siguientes procedimientos para seleccionar el texto cuyo espacio entre caracteres desea ajustar:

Dé clic entre dos caracteres con la herramienta texto.

Con la herramienta texto resalte los caracteres que desee modificar.

Utilice la herramienta puntero para seleccionar un bloque de texto entero. Pulse la tecla mayús y luego haga clic en otro bloque de texto para selec-cionar varios bloques de texto.


En el Inspector de propiedades, arrastre el deslizador emergente ajuste entre caracteres o introduzca un porcentaje en el cuadro de texto.

Mantenga pulsada la tecla Control mientras pulsa las teclas de flecha iz-quierda o derecha. La tecla de flecha izquierda aumenta el espacio entre las letras en un 1%, y la de flecha derecha lo reduce en un 1%.

Definición del interlineado

Mediante el interlineado determinamos la distancia vertical que hay entre las líneas adyacentes de un párrafo. El interlineado se puede medir en píxeles o como porcentaje de la distancia, en puntos, que separa dos líneas de base consecutivas.

Definir el interlineado del texto seleccionado

En el Inspector de propiedades, arrastre el deslizador emergente Interlineado o in-troduzca un valor en el cuadro de texto. El valor predeterminado es 100%.

Para cambiar el tipo de unidad de interlineado, elija % o px (píxeles) en el menú emergente unidades de interlineado.

Definir el interlineado del texto seleccionado mediante el teclado

Mantenga pulsada la tecla Control mientras pulsa flecha arriba o abajo.

1.

2.

1.

1.

Mantenga pulsadas las teclas Mayús y Control mientras pulsa las teclas de flecha iz-quierda o derecha para modificar el ajuste en incrementos del 10%.

Manejo del Texto


La tecla de flecha arriba aumenta el espacio entre las líneas, y la de flecha abajo las acerca.

Mantenga pulsadas las teclas mayús y Control mientras pulsa las teclas de flecha arriba o abajo para modificar el interlineado en incrementos de 10.

Definición de la orientación del texto

Podemos orientar un bloque de texto en sentido horizontal o vertical. De forma prede-terminada, el texto se orienta en sentido horizontal. El texto también puede discurrir de derecha a izquierda o de izquierda a derecha.Para definir la orientación horizontal o vertical y la dirección del texto utilizamos el Inspector de propiedades. Estas con-figuraciones se aplican sólo a bloques de texto completos.

Establecerlaorientacióndeunbloquedetextoseleccionado

Dé clic en el botón orientación de texto en el Inspector de propiedades.

Seleccione una opción de orientación en el menú emergente:

horizontal de izquierda a derecha es el parámetro predeterminado del texto en Fireworks para la mayoría de idiomas. Orienta el texto en sentido horizontal y presenta los caracteres de izquierda a derecha.

horizontal de derecha a izquierda orienta el texto en sentido horizontal y presenta los caracteres de derecha a izquierda. Es útil para mostrar texto de idiomas en que el texto discurre de derecha a izquierda, como el hebreo o el árabe.

vertical de izquierda a derecha orienta el texto en vertical. Si se aplica esta opción a líneas de texto separadas por retornos manuales o automáti-cos, cada línea de texto se muestra en una columna. Las columnas discu-rren de izquierda a derecha.

2.

1.

2.

Ilustración: Ajuste entre caracteres e interlineado.



vertical de derecha a izquierda orienta el texto en vertical. Las líneas separadas por retornos se muestran como columnas que discurren de dere-cha a izquierda. Esta opción es útil para mostrar texto de idiomas, como el japonés, en que el texto discurre de derecha a izquierda en columnas.

Definición de la alineación del texto

Mediante las alineaciones de texto determinamos la posición de un párrafo en relación con los bordes de su bloque de texto. La alineación de texto horizontal lo sitúa con relación a los bordes izquierdo y derecho de un bloque de texto. La alineación de texto vertical lo sitúa con respecto a los bordes superior e inferior de un bloque de texto. Po-demos alinear el texto horizontal en el borde izquierdo o derecho del bloque, centrarlo o justificarlo totalmente para que se alinee tanto en el borde izquierdo como en el derecho. De forma predeterminada, el texto horizontal se alinea a la izquierda.

Establecerlaalineacióndetexto

Seleccionamos el texto.

Dé clic en un botón de alineación en el Inspector de propiedades.

También podemos alinear el texto vertical en el borde superior o inferior, centrarlo dentro del bloque o justificarlo totalmente entre el borde superior y el inferior.

Para lograr un filtro de estiramiento o encajar el texto en un espacio determinado, se puede establecer la alineación de manera que el texto se expanda horizontalmente (en el caso de texto orientado en esa dirección) o verticalmente (en el caso de texto con orientación vertical).

1.

2.

Ilustración: Diversas orientaciones de texto.

Manejo del Texto


Sangradodeltexto

Podemos asignarle una distancia o margen a la primera línea de un párrafo con respecto al borde izquierdo del bloque de texto mediante la opción sangrado del párrafo del Inspector de propiedades. La sangría se mide en píxeles.

Sangrarlaprimeralíneadepárrafosseleccionados

Nos dirigimos al Inspector de propiedades y arrastramos el deslizador emer-gente sangrado del párrafo o introduzca un valor en el cuadro de texto.

Definir el espacio que precede a los párrafos seleccionados

Nos dirigimos al Inspector de propiedades y arrastramos el deslizador emer-gente Espacio delante de párrafo o introduzca un valor en el cuadro de texto respectivo.

Ilustración: Diversas alineaciones de texto.

Ilustración: Sangría de párrafo y espaciado antes y después del párrafo.



Definir el espacio que sigue a los párrafos seleccionados

En el Inspector de propiedades, arrastre el deslizador emergente Espacio des-pués de párrafo o introduzca un valor en el cuadro de texto.

Suavizadodelosbordesdetexto

Aplicamos la técnica de suavizado para que se alise el borde del texto. De este forma los bordes del texto se funden con el fondo y el texto aparecerá más claro y legible cuando tenga un gran tamaño. Para aplicar el suavizado utilizamos el Inspector de propiedades. El suavizado se aplica a todos los caracteres de un bloque de texto. Si el Inspector de propiedades está minimizado, haga clic en la flecha de la esquina inferior derecha para ver todas las propiedades. Macromedia Fireworks 8 provee de una serie de suavizados, los cuales detallamos a continuación:

sin suavizado, esta opción desactiva el suavizado del texto.

suavizado nítido, al elegir esta opción creamos una transición nítida entre los bordes del texto y el fondo.

suavizado fuerte, esta opción crea una transición muy abrupta entre los bordes del texto y el fondo, conservando las formas de los caracteres del texto y mejorando las áreas detalladas de los caracteres.

suavizado tenue, crea una transición suave entre los bordes del texto y el fondo.

suavizado del sistema utiliza el método de suavizado del texto que ofrece Windows XP o Mac OS X.

suavizado personalizado contiene los siguientes controles avanzados de suavizado:

sobremuestreo determina la cantidad de detalle utilizada para crear la transición entre los bordes del texto y el fondo.

nitidez determina la suavidad de la transición entre los bordes del texto y el fondo.

Fuerza, define la intensidad con la que los bordes del texto se mezclan con el fondo.

Aplicarunbordesuavizadoaltextoseleccionado

En el Inspector de propiedades, elija una de las opciones del menú emergente Suavizado.

EscalaHorizontal

En Fireworks podemos también expandir o contraer la anchura de los caracteres del texto horizontal mediante la opción Escala horizontal del Inspector de propiedades. La escala horizontal se mide en valores porcentuales. 100% es el valor por defecto.

Manejo del Texto


Expandirocontraercaracteresseleccionados

En el Inspector de propiedades, arrastramos el deslizador emergente Escala horizontal o introduzca un valor en el cuadro de texto. Para aumentar la anchu-ra o altura de los caracteres arrastramos el deslizador hasta un valor mayor que 100% o hasta un valor inferior para reducirlas.

Desplazamientodelalíneadebase

Para determinar la ubicación del texto por encima o por debajo de su línea de base natural arrastramos el deslizador desplazamiento de la línea de base ubicado en el Inspector de propiedades. Si no existe tal desplazamiento, el texto se sitúa sobre la línea de base. El desplaza-miento de la línea de base permite crear caracteres de subíndice y de superíndice.

Definir el desplazamiento de la línea de base para texto seleccionado

En el Inspector de propiedades, arrastre el deslizador emergente Desplazamiento de línea de base o introduzca un valor en el cuadro de texto para indicar la altura a la que debe colocarse el texto en subíndice o superíndice.

La introducción de valores positivos crea caracteres en superíndice. La introduc-ción de valores negativos crea caracteres en subíndice.

Ilustración: suavizado y Escala horizontal de un bloque de texto.

Ilustración: Desplazamiento de la línea base.



Unióndetextoauntrazado

Podemos dibujar un trazado y adaptar un texto a dicho trazado. Cuando realizamos esta operación el texto fluye a lo largo de la forma del trazado y se mantiene editable para realizarle alguna modificación. Un trazado al que se adapta texto pierde temporalmente sus atributos de trazo, relleno y filtros. Los atributos de trazo, relleno y filtros que se apliquen posteriormente afectarán al texto, no al trazado. Si luego se separa el texto del trazado, éste recupera sus atributos de trazo, relleno y filtros. La unión de texto que contiene retornos ma-nuales o automáticos a un trazado puede producir resultados imprevistos. Si el tex-to amoldado a un tra-zado abierto excede la longitud de dicho tra-zado, el texto sobrante pasa al principio de una nueva línea de tra-zado y vuelve a repetir la forma del trazado.

Colocartextoenuntrazado

Seleccionamos un bloque de texto y un trazado manteniendo presionada la tecla mayús mientras selecciona.

Nos dirigimos al menú texto y seleccionamos unir al trazado.

Separareltextodeltrazado

Seleccionamos el texto adaptado al trazado con la herramienta puntero.

Nos dirigimos al menú texto y seleccionamos separar del trazado.

Edicióndetrazadosydetextounidoatrazados

El texto que se ha amoldado a un trazado sigue siendo editable. Además, es posible modificar la forma del trazado.

Editartextoadaptadoauntrazado

Realice uno de los siguientes procedimientos.

Dé doble clic en el objeto de texto unido a un trazado con la herramienta pun-tero o subselección.

1.

2.

Ilustración: Diversos textos unidos a trazados.

Manejo del Texto


Seleccione la herramienta texto y seleccione el texto que desea editar.

Cambiarlaformadeltrazado

Empleamos la herramienta subselección y seleccionamos el objeto de texto unido a trazado. Los puntos del trazado están ahora subseleccionados y listos para ser editados.

Desplace los puntos para remodelar el trazado.

Modificación de la orientación y dirección del texto en un trazado

El orden en que se dibuja un trazado determina la dirección del texto que se le adap-ta. Por ejemplo, si dibuja un trazado de derecha a izquierda, el texto amoldado aparece hacia atrás y boca abajo.

Es posible cambiar la orientación o invertir la dirección del texto unido a un trazado. También se puede cambiar el punto ini-cial del texto en el trazado.

Cambiarlaorientacióndeltextoenuntrazado

Seleccionamos el texto adaptado al trazado con la herramienta puntero.

Nos dirigimos al menú texto, orientación y seleccionamos una de las orienta-ciones que se muestra en el submenú.

Invertirladireccióndeltextoenuntrazado.

Seleccione el objeto de texto unido al trazado.

Nos dirigimos al menú texto y seleccionamos Invertir dirección.

1.

2.

1.

2.

Ilustración: Orientaciones de textos adaptados a trazados.

También podemos utilizar la herramienta pluma beizer para editar un trazado. El texto se desplazará automáticamente por el trazado a medida que se modifican o editan los puntos.



Conversión de texto en trazadosCon Fireworks podemos tam-bién convertir texto en traza-dos y editar como cualquier objeto vectorial la forma de las letras. Una vez convertido el texto en trazados ya no podrá editarlo como texto pero si se pueden utilizar todas las herra-mientas de edición de vectores para editarlos.

Convertir un texto entrazados

Seleccionamos el texto con la herramienta puntero.

Nos dirigimos al menú texto y seleccionamos Convertir en trazados.

Editarindividualmentelostrazadosdeloscaracteresconvertidos


Seleccione el texto convertido con la herramienta subselección.

Seleccione el texto convertido y nos dirigimos al menú Modificar y selecciona-mos desagrupar.

Importación de textoPuede arrastrar un texto desde el documento de origen hasta el actual o podemos copiar el texto de un documento de origen y pegarlo en el documento actual de Fireworks Abriroimportarunarchivodetexto

Nos dirigimos al menú archivo y seleccione abrir o menú archivo y seleccione Importar.

Nos desplazamos a la carpeta que contiene el archivo.

Seleccione el archivo y haga clic en aceptar.

administración de fuentes no disponiblesAl abrir un documento en Fireworks que contiene fuentes que no están instaladas en su sistema, Fireworks le pregunta si desea sustituirlas o mantener su aspecto. Esta opción

1.

2.

3.

Ilustración: Convertir un texto a trazado y editarlo.

Manejo del Texto


le resultará útil si comparte archivos con usuarios de otros equipos que pueden tener instaladas fuentes diferentes. Al elegir mantener aspecto, el texto se sustituye por una imagen de mapa de bits que representa el aspecto del texto en su fuente original. Aun así podrá editar el texto, pero al hacerlo, Fireworks sustituye dicha imagen por una fuente que esté instalada en el sistema. Cuando se vuelva a abrir el documento en un sistema que tenga instaladas las fuentes originales, Fireworks lo recordará y las utilizará.

Seleccionarunafuentedesustitución

Abra un documento que contenga fuentes no disponibles. Se abre el cuadro de diálogo Fuentes que faltan.

Elija una fuente no encontrada en la lista Cambiar fuente no encontrada.

Siga uno de estos procedimientos:

Elija una fuente de sustitución en la lista A.

Seleccione que el texto se muestre en la fuente predeterminada del siste-ma.


Inserción de caracteres especialesPodemos insertar caracteres especiales dentro de un bloque de texto directamente desde Fireworks, en lugar de tener que copiar y pegar los caracteres de otra fuente.

Insertarcaracteresespeciales

Crear un bloque de texto y dé clic en la ubicación dentro del mismo donde desea insertar un carácter especial.

Nos dirigimos al menú ventana y seleccionamos Caracteres especiales. En el panel Caracteres especiales, seleccione el carácter que desea insertar.

Revisión ortográficaSe puede comprobar la ortografía de ciertos bloques de texto o de todo el texto de un documento empleando el comando ortografía del menú texto.

Seleccionamos uno o varios bloques de texto. Si no seleccionamos ningún bloque de texto, Fireworks revisa la ortografía de todo el documento.

Nos dirigimos al menú texto y seleccionamos ortografía.

Aparece el cuadro de diálogo Ortografía. Para cada palabra que se encuentre, elija la opción que usted desee.

1.

2.

3.

4.

1.

2.

1.

2.

4.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 775 píxeles, Al: 588 píxeles, Resolución: 72 ppp y guardarlo con el nombre site_sunset_discotek.png en la carpeta Capitulo5.

Utilizar las herramientas de la sección vectores y Colores. Abrir los archivos discotek1.jpg, discotek2.jpg, artista1.jpg y artista2.jpg seleccionar las áreas correspondientes y moverlos hacia site_sunset_discotek.png.

Manejo del Texto



Empleo de filtros automáticosDenominamos filtros automáticos de macromedia Fireworks 8 (en versiones ante-

riores conocidos como efectos automáticos) a las mejoras que se pueden aplicar a los objetos vecto-riales, imágenes de mapa de bits y texto. Entre los filtros automáticos, tenemos a los filtros de ajuste de color, biseles y relieves, desenfocar y perfilar, ruido, sombras sólidas, sombras difuminadas e iluminados. Podemos aplicar los filtros automáticos a los objetos seleccionados, directamente desde el Inspector de propiedades.

Fireworks actualiza estos filtros automáticamente cuando se editan los objetos a los que se han aplica-do. Después de aplicar un filtro automático, es po-sible cambiar sus opciones en cualquier momento o reorganizar el orden de los filtros para experimentar con un filtro combinado. Los filtros automáticos se pueden activar, desactivar o eliminar en el Inspec-tor de propiedades. Cuando se elimina un filtro, el objeto o imagen recupera su aspecto anterior.

Manejo de Filtros

Enestecapítulo

Aprenderá a emplear y editar los Filtros automáticos.



Aplicar filtros a vectores, mapa de bits y texto.

Editar los filtros aplicados a vectores, mapa de bits y texto.

Personalizar y almacanear filtros.


Capítulo vI

También es posible añadir filtros de conexión (“plug-ins”) de terceros para utilizarlos en Fireworks como filtros automáticos. Si se prefiere, estos filtros se pueden usar de la forma tradicional mediante el menú Filtros.

ajuste del color y el tono de un mapa de bitsMacromedia Fireworks 8 incluye filtros de ajuste de color y tono que nos ayudan a me-jorar y realzar los colores de las imágenes de mapa de bits. Permiten ajustar el contraste y el brillo, el rango tonal, el matiz y la saturación del color de las imágenes. Aplicar filtros como filtros automáticos desde el Inspector de propiedades no es irreversible. Los filtros automáticos no alteran permanentemente los píxeles, y es posible eliminarlos o modificarlos en cualquier momento. Si desea aplicar filtros de forma permanente e irreversible, puede hacerlo desde el menú Filtros. No obstante, Macromedia recomienda la utilización de filtros como Filtros automáticos en la medida de lo posible. Si se aplica un filtro a un objeto vectorial seleccionado con el menú Filtros, Fireworks convierte la selección en un mapa de bits.

ajuste del brillo y contrasteLa función Brillo/Contraste modifica el contraste o brillo de los píxeles de una imagen. Este filtro afecta a los resaltados, medios tonos y sombras de la imagen. Brillo/Contraste se utiliza normalmente para corregir imágenes demasiado oscuras o claras.

Ajustarelbrillooelcontraste

Seleccione una o varias imágenes.

Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo brillo/Contraste:

En el Inspector de propiedades, dé clic en el botón Añadir filtros automá-ticos (representado con el simbolo +) y a continuación, en el menú emergen-te Filtros, elegimos ajustar color y seleccionamos brillo/Contraste.

Nos dirijimos al menú Filtros, opción ajustar color y seleccionamos bri-llo/Contraste.

Arrastre los deslizadores brillo y Contraste para ajustar la configuración. El rango de valores es de -100 a 100.


1.

2.

3.

4.

Aplicar un filtro desde el menú Filtros es una operación definitiva que sólo se pue-de deshacer si en el menú Edición la opción de Deshacer está disponible. Para mantener la posibilidad de ajustar, desactivar o eliminar este filtro, aplíquelo como un filtro automático empleando el Inspector de Propiedades.

Manejo de Filtros


CurvasEsta función es similar a niveles, la diferencia está en que nos permite controlar de forma más precisa el rango tonal. Mientras que niveles utiliza resaltados, sombras y medios tonos para corregir el rango tonal, Curvas ajusta cualquier color del rango tonal, en lugar de sólo tres variables, sin afectar al resto de los colores. Por ejemplo, se puede utilizar Curvas para corregir un destello de color producido por las condiciones de iluminación.La cuadrícula del cuadro de diálogo Curvas re-presenta dos valores de brillo:

El eje horizontal repre-senta el brillo original de los píxeles, como se muestra en el cuadro En-trada.

El eje vertical representa los nuevos valores del brillo, cómo se muestran en el cuadro salida.

Al abrir la ventana Cur-vas por primera vez, se muestra una línea diago-nal que indica que no se han realizado cambios, por lo tanto los valores de entrada y salida son los mismos para todos los píxeles.

Ajustar un punto específico del rango tonal

Seleccione una o varias imágenes.1.

Ilustración: Ajuste de brillo y contraste en una imagen seleccionada.

Ilustración: Cuadro de diálogo Curvas.

Capítulo VI : Manejo de Filtros


Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo Curvas:

En el Inspector de propiedades, haga clic en el botón más (+) ubicado al lado derecho de la etiqueta Filtros, y a continuación, en el menú emergen-te Filtros, elija ajustar color y seleccione Curvas.

Si el Inspector de propiedades está parcialmente minimizado, haga clic en el botón Añadir filtros en lugar de en el botón más.

Nos dirigimos al menú Filtros opción ajustar color y seleccionamos Curvas. Aplicar Curvas desde el menú Filtros es definitivo, sólo se podrá deshacer si en el menú Edición la opción deshacer está disponible.

En el menú emergente Canal, elija uno de los canales si desea aplicar los cam-bios a los canales de color por separado o elija RVA si desea aplicar los cambios a todos los colores.

Dé clic en un punto de la línea diagonal de la cuadrícula y arrástrelo a otra posi-ción para ajustar la curva.

Cada punto de la curva tiene valores de entrada y salida propios. Al arrastrar un punto, los valores de entrada y salida se actualizan automáticamente.

La curva muestra valores de brillo entre 0 y 2��, 0 representa las sombras.

También pueden ajustarse de forma automática resaltados, medios tonos y sombras con el botón auto de los cuadros de diálogo Curvas.

2.

3.

4.

Ilustración: Aclarando y oscureciendo una imagen con pérdida y sin perdida del contraste empleando la función Curva.

Manejo de Filtros


Eliminarunpuntodelacurva

Arrastre el punto fuera de la cuadrícula.

Los puntos finales de la curva no pueden eliminarse.

Invertir los valores de color de una imagenLa función Invertir la empleamos para cambiar los colores de una imagen por su color inverso de la rueda de colores. Por ejemplo, al aplicar el filtro a un objeto rojo (R=255, V=0, A=0) el color cambia a azul claro (R=0, V=255, A=255).

Invertircoloresdeunaimagenseleccionada


En el Inspector de propiedades, dé clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija ajustar color y seleccione Invertir.

Nos dirigimos al menú Filtros opción ajustar color y seleccione Invertir.

matiz y saturaciónEsta función la utilizamos para ajustar el tono o matiz, la intensidad o saturación y la luminosidad o brillo de un color de una imagen.

1.

Ilustración: Añadiendo tonalidades de color con la función Curva.



Ajustarelmatizolasaturacióndeunaimagenseleccionada

Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo matiz/saturación:

En el Inspector de propiedades, dé clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija ajustar color y seleccionamos matiz/saturación.

Dirigase al menú Filtros, ajustar color y seleccione matiz/saturación.

Arrastre el deslizador matiz para ajustar el color de la imagen. El rango de valores es de –180 a 180.

Arrastre el deslizador saturación para ajustar la pureza de los colores. El rango de valores es de -100 a 100.

Arrastre el deslizador luminosidad para ajustar la luminosidad de los colores. El rango de valores es de -100 a 100.

Dé clic en el botón aceptar.

CambiarunaimagenRVAporunaimagenbitonaloañadircoloraunaimagendeescaladegrises

Elija Colorear en el cuadro de diálogo matiz/saturación. Cuando se elige Co-lorear, los deslizadores matiz y saturación cambian sus valores. El matiz cam-bia de 0 a 360. La saturación cambia de 0 a 100.

1.

3.

4.

�.

�.

Ilustración: Invertir el color de una imagen y ajuste de matiz y saturación.

Manejo de Filtros


niveles automáticosLos niveles automáticos los empleamos para que Fireworks ajuste el rango tonal automáticamente.

Ajustarresaltados,mediostonosysombrasdeformaautomática

Seleccione una o varias imágenes.

Realice uno de los siguientes pasos para seleccionar niveles automáticos:

En el Inspector de propiedades, dé clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija ajustar color y seleccione niveles automáticos.

Nos dirigimos al menú Filtros opción ajustar color y seleccione niveles automáticos.

También pueden ajustarse de forma automática resaltados, medios tonos y sombras con el botón auto de los cuadros de diálogo niveles o Curvas.

nivelesUn mapa de bits con un rango tonal completo debe contener un número equilibrado de píxeles en todas las áreas. La función Niveles corrige los mapas de bits que tienen una alta concentración de píxeles en resaltados, medios tonos o sombras.

Resaltados corrige los excesos de píxeles claros que provocan que la imagen parezca descolorida.

medios tonos corrige los excesos de píxeles en medios tonos que provocan que la ima-gen parezca apagada.

sombras corrige los ex-cesos de píxeles oscuros que provocan que muchos detalles no se aprecien.

La función Niveles es-tablece el negro para los píxeles más oscuros y el blanco para los más claros para, de esta forma, redis-tribuir los medios tonos proporcionalmente. Esto permite generar una ima-gen con detalles bien defi-nidos en todos sus píxeles.

1.

2.

Ilustración: Ajuste de color en una imagen empleando niveles.



El histograma del cuadro de diálogo Niveles sirve para ver la distribución de píxeles de un mapa de bits. Se trata de una representación gráfica de la distribución de los píxeles en los resaltados, medios tonos y sombras. El histograma sirve para determinar la mejor manera de corregir el rango tonal de una imagen. Una concentración alta de píxeles en las zonas de sombras o resaltados indica que se puede mejorar la imagen mediante la aplicación de las funciones Niveles o Curvas.

El eje horizontal muestra los valores de color del más oscuro (0) al más claro (2��). Observe el eje horizontal de izquierda a derecha: los píxeles más oscuros están a la izquierda, los de medio tono en el centro y los más brillantes a la derecha.

El eje vertical muestra el número de píxeles en cada nivel de brillo. Por lo general, se ajustan en primer lugar resaltados y sombras. El ajuste de medios tonos en segundo lugar permite mejorar los valores de brillo sin que ello afecte a los resaltados ni a las sombras.

Ajustarresaltados,mediostonosysombras

Seleccione la imagen de mapa de bits.

Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo niveles:

En el Inspector de propiedades, dé clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija ajustar color y seleccione niveles.

Nos dirigimos al menú Filtros, opción ajustar color y clic en niveles.

Para ver los cambios en el espacio de trabajo, elija Vista previa en el cuadro de diá-logo. La imagen se actualiza automáticamente conforme se realizan cambios.

En el menú emergente Canal, elija si desea aplicar los cambios a los canales de color por separado (Rojo, Azul o Verde) o a todos los canales de color (RAV).

Arrastre los deslizadores de niveles de entrada situados bajo el histograma y ajuste resaltados, medios tonos y sombras.

El control derecho permite ajustar los resaltados con valores entre 2�� y 0.

El control central permite ajustar los medios tonos con valores entre 10 y 0.

El control izquierdo ajusta las sombras con valores entre 0 y 2��.

Los valores se introducen automáticamente en los cuadros Niveles de entrada conforme se mueven los controles.

El valor de sombra no puede superar el de resaltado; el valor de resaltado no puede ser inferior al de sombra; y los medios tonos deben hallarse entre los de sombras y resaltados.

1.

2.

3.

4.

Manejo de Filtros


Para ajustar los valores de contraste de la imagen, arrastre los deslizadores ni-veles de salida.

El control derecho permite ajustar los resaltados con valores entre 2�� y 0.

El control izquierdo permite ajustar las sombras con valores entre 0 y 2��.

Los valores se introducen automáticamente en los cuadros niveles de salida conforme se mueven los controles.

Relleno de colorFireworks nos provee también de un filtro automático que permite ajustar el color de un objeto alterando la opaci-dad y el modo de mezcla del objeto.

Este filtro automático Relleno de color, produce el mismo resultado que superponer el objeto con otro que tenga otra opacidad y modo de mezcla.

Aplicarrellenodecolor

Seleccione una imagen de mapa de bits.

En el Inspector de propiedades, dé clic en el botón Añadir filtros automáticos y, a continuación, en el menú emergente Filtros, elija ajustar color y seleccione Relleno de color.

En el menú emergente modos de mezcla, elija uno de ellos para combinar con el color elejido en el cuadro Color, el cual es el color al que se aplica el modo de mezcla. opacidad es el grado de transparencia con el que se aplica el modo de mezcla.

bordes biseladosPodemos asignarle el aspecto de un botón en relieve a un objeto empleando bordes biselado. Es posible crear un bisel interior o exterior.

Aplicarunbordebiseladoaunobjeto

Seleccione uno o varios objetos.

�.

1.

2.

3.

1.

Ilustración: Ajuste de Relleno de color.



Dé clic en el botón Añadir filtros automáticos del Inspector de propiedades, bisel y Relieve y elija una de las dos opciones de bisel:

bisel interior.

bisel exterior.

Edite la configuración del filtro en la ventana emergente.

Dé clic fuera de la ventana o pulse Enter para cerrarla.

RelieveEl filtro Relieve permite que una imagen, un objeto o un texto aparezcan elevados o hundidos respecto al lienzo.

Aplicar un filtro de relieve

Dé clic en el botón Añadir filtros automáticos del Inspector de propiedades bisel y Relieve y elija una de las dos opciones de relieve en el menú emergente:

Relieve hundido.

Relieve elevado.

Edite la configuración del filtro en la ventana emergente. Si desea que el objeto original aparezca en el área en relieve, seleccione mostrar objeto.

Cuando haya finalizado, dé clic fuera de la ventana o pulse Enter para cerrarla.

Si deseamos mantener la compatibilidad con versiones anteriores, los filtros automáti-cos de relieve en objetos de documentos anteriores se abren por defecto con la opción mostrar objeto no seleccionada.

2.

3.

4.

1.

2.

3.

Ilustración: Aplicar biseles a textos y objetos vectoriales.

Manejo de Filtros


desenfoqueEl desenfoque suaviza el aspecto de una imagen de mapa de bits, objeto vectorial o texto.

macromedia Fireworks 8 nos provee de seis opciones de desenfoque los cuales pode-mos podemos aplicarlos a los objetos como filtros permanentes e irreversibles o como filtros automáticos.

Desenfocar

Esta función nos permite suavizar el enfoque de los píxeles seleccionados.

Desenfocarmás

Nos permite aplicar el triple de desenfoque que el comando desenfocar.

Desenfoquegaussiano

Con esta función aplicamos una media ponderada de desenfoque a cada píxel, lo que produce un efecto de halo.

Desenfoquedemovimiento

Produce un efecto de movimiento en la imagen.

Desenfoqueradial

Al utilizar esta función generamos un efecto de rotación en la imagen.

Ilustración: Aplicar Relieves a textos y objetos vectoriales.



Desenfoquedezoom

Produce un efecto de movimiento de la imagen, de forma que ésta pareciera acercarse o alejarse del espectador.

Desenfocarunaimagen

Seleccione la imagen de mapa de bits, un objeto vectorial o un texto.

realice uno de los siguientes procedimientos:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija desenfo-car y seleccione desenfocar o desenfocar más.

Nos dirigimos la menú Filtros, opción desenfocar y seleccione desenfo-car o desenfocar más.

DesenfocarunaimagenmediantelaopciónDesenfoquegaussiano


Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo desenfoque gaussiano:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija desenfo-car y seleccione desenfoque gaussiano.

Nos dirigimos la menú Filtros, opción desenfocar y seleccione desenfo-que gaussiano.

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 más pronunciado.

Haga clic en aceptar.

DesenfocarunaimagenmedianteelDesenfoquedemovimiento


Realice unos de los siguientes procedimientos para abrir el cuadro de diálogo desenfoque de movimiento:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija desenfo-car y seleccione desenfoque de movimiento.

1.

2.

1.

2.

3.

4.

1.

2.

Manejo de Filtros


Nos dirigimos la menú Filtros, opción desenfocar y seleccione desenfo-que movimiento.

Arrastre el deslizador Ángulo para definir la dirección del efecto de movimiento.

Arrastre el deslizador distancia para definir la intensidad del efecto de movi-miento.

El rango de valores es de 0 a 100. Cuanto mayor es la distancia, más intenso es el efecto.


DesenfocarunaimagenmedianteelDesenfoquedezoom


Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo desenfoque de zoom:

En el Inspector de propiedades, dé clic en el botón Añadir filtros auto-máticos y, a continuación, en el menú emergente Filtros, elija desenfocar y seleccione desenfoque de zoom.

Nos dirigimos la menú Filtros, opción desenfocar y seleccione desenfo-que de zoom.

Arrastre el control deslizante Cantidad para definir la intensidad del efecto de movimiento.

El rango de valores es de 0 a 100. Cuanto mayor es la distancia, más intenso es el efecto.

3.

4.

�.

1.

2.

3.

Ilustración: desenfoque gaussiano y de movimiento.



Arrastre el control deslizante Calidad para definir la intensidad del efecto de mo-vimiento. El rango de valores es de 1 a 100. Cuanto mayor es la calidad, menos repeticiones de la imagen original se producen con el efecto de desenfoque.


DesenfocarunaimagenmedianteelDesenfoqueradial


Realice uno de los siguientes procedimientos para abrir el cuadro de diálogo desenfoque radial:

En el Inspector de propiedades, dé clic en el botón Añadir filtros auto-máticos y, a continuación, en el menú emergente Filtros, elija desenfocar y seleccione Desenfoque radial.

Dirigase al menú Filtros, desenfocar y seleccione desenfoque radial.

Arrastre el control deslizante Cantidad para definir la intensidad del efecto de movimiento. El rango de valores es de 0 a 100. Cuanto mayor es la distancia, más intenso es el efecto.

Arrastre el control deslizante Calidad para definir la intensidad del efecto de movimiento.

El rango de valores que podemos emplear es de 1 a 100. Cuanto mayor es la calidad, menos repeticiones de la imagen original se producen con el efecto de desenfoque radial.


4.

�.

1.

2.

3.

4.

�.

Ilustración: desenfoque de zoom y desenfoque radial.

Manejo de Filtros


buscar bordesEl filtro buscar bordes nos permite alterar los mapas de bits para que parezcan di-bujos lineales al identificar las transiciones de color de las imágenes y cambiarlas por líneas.

Aplicar el filtro Buscar bordes a un área seleccionada


En el Inspector de propiedades, haga clic en el botón Añadir filtros automá-ticos y, a continuación, en el menú emergente Filtros, elija otro y seleccione buscar bordes.

Nos dirigimos la menú Filtros, opción otro y seleccionamos buscar bordes.

Convertir en alfaEmpleamos el filtro Convertir en alfa para convertir un objeto o texto en una transpa-rencia en función de la transparencia de la imagen.

Aplicar el filtro Convertir en alfa a un área seleccionada


En el Inspector de propiedades, dé clic en el botón Añadir filtros automáticos y, a continuación, en el menú emergente Filtros, elija otro y seleccione Con-vertir en alfa.

Nos dirigimos la menú Filtros, otro y seleccionamos Convertir en alfa.

Ilustración: Ajuste de búscar bordes y Convertir en alfa.



PerfilarUtilizamos la función Perfilar para corregir imágenes desenfocadas. Fireworks nos provee de tres opciones de perfilado:

Perfilar

Esta función nos permite ajustar el foco de una imagen borrosa mediante el incremento del contraste de los píxeles adyacentes.

Perfilar más

Función que nos permite aumentar el contraste de los píxeles adyacentes casi tres veces más que Perfilar.

Desperfilar máscara

Esta función perfila la imagen al ajustar el contraste de los bordes de los píxeles. Esta opción es la que ofrece el mayor control, por lo que suele ser la mejor opción para perfilar imágenes.

Perfilar una imagen con una opción de perfilado

Seleccione una o varias imágenes de mapa de bits.

Realice unos de los siguientes procedimientos para elegir una opción de perfi-lado:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija Perfilar y seleccione Perfilar o Perfilar más.

Nos dirigimos al menú Filtros, opción Perfilar y seleccione Perfilar o Perfilar más.

Perfilar una imagen mediante la función Desperfilar máscara


Realice unos de los siguientes procedimientos para abrir el cuadro de diálogo Desperfilar máscara:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija Perfilar y seleccione Desperfilar máscara.

Nos dirigimos al menú Filtros, opción Perfilar y seleccione Desperfilar máscara.

1.

2.

1.

2.

Manejo de Filtros


Arrastre el control deslizante Cantidad de perfilado para seleccionar la cantidad de este filtro que se va a aplicar, en un porcentaje de 1 a 500.

Arrastre el deslizador Radio del píxel para seleccionar un radio de 0,1 a 250.

Al incrementar el radio, aumenta el área de gran contraste alrededor de cada borde del píxel.

Arrastre el deslizador umbral para seleccionar un umbral de 0 a 2��.

Los valores de empleados con más frecuencia son los comprendidos entre 2 y 25. Al incrementar el umbral, sólo se perfilan los píxeles de la imagen que presentan más contraste. Al reducir el valor de umbral, también se incluyen los píxeles de menor contraste. Si el valor de umbral es 0, se perfilan todos los píxeles de la imagen.


añadir ruidoLa mayoría de las imágenes conseguidas mediante una cámara digital o un escáner no tienen los colores perfectamente uniformes cuando se visualizan con niveles de aumento grande. Los colores que se ven se componen de píxeles de diversos colores distintos. En la edición de imagen “ruido” se refiere a estas variaciones aleatorias del color en los píxeles que componen una imagen.

A veces, por ejemplo, cuando se pega parte de una imagen en otra, la proporción de diferencia aleatoria del color en las dos imágenes puede ser patente, lo cual evita que las imágenes se mezclen de forma óptima. En tal caso, se puede añadir ruido a una o ambas imágenes para crear la ilusión de que las dos proceden de la misma fuente. También se puede añadir ruido a una imagen como un elemento creativo, por ejemplo,

3.

4.

�.

�.

Ilustración: Ajuste de Perfilar, Perfilar más y Desperfilar máscara.



para simular una fotografía antigua o estática en la pantalla de un televisor.

Añadirruidoaunaimagen


Ralice uno de los siguientes procedimientos para abrir el cuadro de diálogo añadir ruido:

En el Inspector de propiedades, haga clic en el botón Añadir filtros au-tomáticos y, a continuación, en el menú emergente Filtros, elija Ruido y seleccione añadir ruido.

Nos dirigimos al menú Filtros, opción Ruido y seleccionamos añadir ruido.

Arrastre el control deslizante Cantidad para definir el nivel de ruido.

El rango de valor es de 1 a 400. Cuanto mayor es el nivel, más píxeles colocados al azar tendrá la imagen.

Seleccione la casilla de verificación Color para aplicar el ruido. Desactive la casilla para aplicar sólo monocromo.


sombras e iluminacionesMacromedia Fireworks 8 nos provee de aplicaciones de sombras sólidas, sombras, sombras interiores y luces para colocar a objetos. Es posible especificar el ángulo de la sombra para simular el ángulo de la luz que incide sobre el objeto.

1.

2.

3.

4.

�.

Ilustración: Ajuste añadir ruido.

Manejo de Filtros


Aplicarunasombra

Selecione uno o varios objetos.

Haga clic en el botón Agregar filtros automáticos en el Inspector de propie-dades, elija sombrear e iluminar y seleccione sombra sólida.

En el cuadro de diálogo sombra sólida, ajuste los parámetros del filtro:

Arrastre el control deslizante Ángulo para definir la dirección de la som-bra.

Arrastre el control deslizante distancia para definir la distancia de la som-bra respecto al objeto.

Active casilla de verificación Color sólido para aplicarle un color sólido a la sombra.

Seleccione el cuadro de Color para abrir la ventana emergente y defina el color de la sombra.

Si no desea ver una vista previa de la sombra sólida, desactive la casilla vista previa.

Cuando finalice, dé clic en aceptar.

Aplicarunasombraounasombrainterior

Selecione uno o varios objetos.

Haga clic en el botón Añadir filtros automáticos del Inspector de propiedades, sombrear e iluminar y elija una opción de sombra:

sombra.

sombra interior.

Edite la configuración del filtro en la ventana emergente:

Arrastre el control deslizante distancia para definir la distancia de la som-bra respecto al objeto.

Seleccione el cuadro de Color para abrir la ventana emergente y defina el color de la sombra.

Arrastre el control deslizante opacidad para definir el porcentaje de trans-parencia de la sombra.

Arrastre el control deslizante suavidad para establecer la nitidez de la sombra.

Arrastre el control deslizante Ángulo para definir la dirección de la som-bra.

1.

2.

3.

1.

1.

2.

3.



Seleccione sólo sombra para ocultar el objeto y mostrar sólo la sombra.

Al finalizar, dé clic fuera de la ventana o pulse Enter para cerrarla.

Aplicarunaluz

Seleccione uno o varios objetos.

Dé clic en el botón Añadir filtros automáticos del Inspector de propiedades, elija sombrear e iluminar y seleccione Iluminado.

Edite la configuración del filtro en la ventana emergente:

Dé clic en el cuadro de Color para abrir la ventana emergente y defina el color de iluminación.

Arrastre el control deslizante anchura para definir la anchura del efecto de iluminación.

Arrastre el control deslizante opacidad para definir el porcentaje de trans-parencia del efecto de iluminación.

Arrastre el control deslizante suavidad para establecer la nitidez de la luz.

Arrastre el control deslizante desplazamiento para indicar la distancia desde la luz hasta el objeto.

Al finalizar, dé clic fuera de la ventana o pulse Enter para cerrarla.

4.

1.

2.

3.

4.

Ilustración: Iluminaciones y sombras aplicados a los objetos vec-toriales y textos.

Manejo de Filtros


Edición de filtros automáticosAl hacer clic en el botón de información de un filtro automático en el Inspector de propiedades, Fireworks abre una ventana emergente con los parámetros actuales del filtro, que se pueden editar.

Editar un filtro automático

En el Inspector de propiedades, dé clic en el botón de información situado junto al filtro que desea editar.

Se abrirá la ventana emergente o cuadro de diálogo correspondiente.

Ajuste los parámetros del filtro.

Si uno de los filtros no se puede editar, el botón de información aparece atenuado. Por ejemplo, uno de los filtros que no se puede editar es niveles automáticos.

Haga clic fuera de la ventana o pulse Enter.

Cambio de orden de los filtros automáticosPodemos cambiar el orden de los filtros aplicados a un objeto. Así se varía la secuencia en que se aplican los filtros, lo cual puede efectar el resultado final del objeto. En general, los filtros que modifican el interior de un objeto, como el filtro bisel interior, deben aplicarse antes que los que modifican el exterior. Por ejemplo, el efecto bisel interior debería aplicarse antes que los filtros bisel exterior, Iluminado o sombra.

Cambiar el orden de los filtros aplicados a un objeto seleccionado

En la lista del Inspector de propiedades, arrastre un filtro hacia arriba o hacia abajo según la posición que desee.

Los filtros del principio de la lista se aplican antes que los situados al final.

Eliminación de filtros automáticosPodemos eliminar filtros individuales o todos los filtros de un objeto.

Eliminar un filtro

Selecionamos uno o varios objetos.

Nos dirigimos al Inspector de propiedades, seleccione el filtro que deseamos eliminar de la lista de filtros y dé clic en el botón Eliminar filtros automáti-cos.

1.

2.

3.



Eliminar todos los filtros

Selecionamos uno o varios objetos.

Nos dirigimos al Inspector de propiedades, dé clic en el botón Añadir filtros automáticos y en el menú emergente, elija ninguno.

Creación de filtros automáticos personalizadosPodemos almacenar o guardar una mezcla determinada de parámetros de los filtros automáticos creando uno personalizado. Los filtros automáticos personalizados se muestran en el menú emergente Añadir filtros del Inspector de propiedades y en el panel Estilos. Estos filtros son en realidad estilos para los que sólo se ha seleccionado la opción de propiedad Filtro.

Se puede crear un filtro automático personalizado mediante el Inspector de propieda-des o empleando el panel Estilos. Podemos aplicar un filtro automático personalizado a los objetos seleccionados, desde el menú emergente Añadir filtros o desde el panel Estilos. Se puede cambiar de nombre o eliminar un filtro automático personalizado mediante el panel Estilos.

Crear un filtro automático personalizado mediante el Inspector de pro-piedades

Aplique los ajustes de filtros automáticos a los objetos seleccionados.

En el Inspector de propiedades, dé clic en el botón Añadir filtros automáticos, luego opciones y seleccione guardar como estilo.

Se visualiza el cuadro de diálogo nuevo estilo.

Coloque un nombre para el estilo y dé clic en aceptar.

El nombre del filtro automático personalizado se añade al menú emergente añadir filtros y un icono de estilo que representa el filtro se añade en el panel Estilos.

Crear un filtro automático personalizado mediante el panel Estilos

Aplique los ajustes de filtros automáticos a los objetos seleccionados.

Seleccione nuevo estilo en el menú de opciones del panel Estilos.

Se visualiza el cuadro de diálogo nuevo estilo.

Anule la selección de todas las propiedades excepto Filtro, introduzca un nombre y dé clic en aceptar.

El nombre del filtro automático personalizado se añade al menú emergente añadir

1.

2.

3.

4.

1.

2.

3.

4.

�.

Manejo de Filtros


filtros y un icono de estilo que representa el filtro se añade automáticamente al panel Estilos.

Si elige alguna otra propiedad en el cuadro de diálogo añadir nuevo estilo, el estilo no se añadirá al menú emergente Añadir filtros del Inspector de propie-dades, aunque sí aparecerá en el panel Estilos como un estilo más.

Aplicar un filtro automático personalizado a los objetos seleccionados


Nos dirigimos al Inspector de propiedades, haga clic en el botón Añadir filtros automáticos y a continuación, seleccione el filtro automático personalizado.

En el panel Estilos, haga clic en el icono del filtro automático personalizado.

Un filtro automático personalizado se puede cambiar de nombre o eliminar de la misma forma que cualquier otro estilo del panel Estilos. No es posible cambiar de nombre ni eliminar un filtro estándar de Fireworks.

Almacenamiento de filtros automáticos como comandosPodemos crear un comando basado en un filtro para así almacenarlo y reutilizarlo las veces que deseamos en el lienzo. Empleando el panel historial podemos automatizar todos los filtros automáticos aplicados a un objeto mediante la creación de un comando que se añade al menú Comandos.

Estos comandos se pueden utilizar en procesos por lotes.

Guardar los parámetros de un filtro como un comando

Aplique los filtros al objeto.

Visualice el panel historial dirigiendose al menú ventana y seleccione histo-rial.

Mantenga pulsada la tecla mayús y dé clic en el grupo de acciones que desea guardar como comando.


Seleccione guardar como comando en el menú de opciones del panel historial.

Dé clic en el botón guardar de la parte inferior del panel historial.

Coloque un nombre para el comando y dé clic en aceptar para añadir el comando al menú Comandos.

1.

2.

1.

2.

3.

4.

�.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 775 píxeles, Al: 588 píxeles, Resolución: 72 ppp y guardarlo con el nombre site_computercenter.png en la carpeta Capitulo6.

Utilizar las herramientas de la sección vectores, Colores y Filtros automáticos. Abrir los archivos modelo1.jpg, modelo2.jpg, laptop1.jpg, fondo1.jpg, mundo1.jpg y pc.jpg seleccionar las áreas correspondientes y moverlos hacia site_computercenter.png.

Manejo de Filtros



Capas y máscarasLas capas fraccionan los documentos de macro-media Fireworks 8 en planos discrecionales, como si los elementos de una ilustración se dibu-jasen en distintas hojas transparentes superpuestas una sobre otras. Los documentos de Fireworks 8 pueden estar compuesto por muchas capas y cada una contener muchos objetos. En Fireworks, el panel Capas muestra una lista de las capas y los

objetos contenidos en cada capa. Las capas de Fireworks son similares a los conjuntos de capas de Photoshop. Las capas de Photoshop equivalen a los objetos individuales de Fireworks.

El empleo de máscaras nos facilita un control creativo sobre las capas y los diversos objetos de Fireworks. Las máscaras y los modos de mezcla se pueden aplicar desde el panel Capas. También podemos crear máscaras mediante las opciones de los menús Seleccionar y Modificar. Es posible utilizar un objeto vectorial o de mapa de bits para tapar parte de la imagen subyacente. Por ejemplo, para ocultar parte de una fotografía

Capas y máscaras

Enestecapítulo

Aprenderá a emplear y editar capas y máscaras de mapa de bits y de objetos.



Utilizar capas sobre el lienzo.

Editar las diferentes capas.

Emplear máscaras sobre imágenes.

Crear máscaras a partir de objetos.

Editar máscaras.


Capítulo vII

de manera que aparezca rodeada por un marco ovalado, es posible pegar una forma elíptica como máscara encima de la fotografía. Todas las áreas situadas fuera de la elip-se desaparecen como si se hubieran recortado, y sólo se muestra la parte de la imagen situada dentro del óvalo.

mezclasLa utilización de mezclas nos ofrece un nivel de control altamente creativo. La mezcla de los colores de objetos superpuestos permite crear efectos únicos. Fireworks dispone de 2� nuevas mezclas para facilitar el resultado satisfactorio del aspecto deseado.

uso de capasCada objeto de un documento de Fireworks se aloja en una capa. Es posible crear capas antes de dibujar o añadirlas cuando se requieran. El lienzo está situado debajo de todas las capas y no es una capa en sí mismo.

Podemos visualizar el orden de apilamiento de las capas y objetos mediante el panel Capas. Se trata del orden de como se muestran en el documento. Por defecto Firewor-ks apila las capas por el orden de creación, colocando la más reciente en la parte superior con respecto a la capa creada anteriormente. El orden de apilamiento determina la manera en que los objetos de una capa se superponen a los de otras. Podemos reorganizar el orden de apilamiento de las capas, así como el de los objetos que se encuentran dentro de las capas.

El panel Capas muestra el estado actual de todas las capas del fotograma actual de un documento. Para ver otros fotogramas, se puede utilizar el panel Fotogramas o elegir una opción en el menú emergente de fotogramas de la parte inferior del panel Capas.

El nombre de la capa activa aparece resaltado en el panel Capas. Es posible expandir una capa para ver una lista de todos los objetos que contiene. Los objetos se muestran como miniaturas. Las máscaras también se muestran en el panel Capas. Para editar una máscara, es posible seleccionar su miniatura. Mediante el panel Capas, se pueden agregar máscaras nuevas.

Los controles de la opacidad y de los modos de mezcla se encuentran en la parte supe-rior del panel Capas.

Ilustración: Panel Capas.

Capas y máscaras


activación de capasPara activar una capa, hacemos clic en una capa o en un objeto situado en ella, automá-ticamente se convierte en la capa activa. Los objetos que se dibujen, peguen o importen se encuentran en un primer momento sobre la capa activa.

Activarunacapa


Dé clic en el nombre de la capa en el panel Capas.

Seleccione un objeto de esa capa.

agregar y eliminar capasMediante el panel Capas, podemos añadir capas nuevas, eliminar las que no se deseen y duplicar las capas y objetos existentes. Al crear una nueva capa, se inserta una capa vacía encima de la que esté seleccionada. La nueva capa pasa a ser la activa y aparece resaltada en el panel Capas. Al eliminar una capa, la que esté situada sobre ella pasa a convertirse en la capa activa.

La creación de una capa duplicada añade una nueva capa que contiene los mismos objetos que la capa seleccionada. Los objetos duplicados conservan la opacidad y los modos de mezcla de los que se copiaron. Se pueden cambiar los objetos duplicados sin que estos cambios afecten a los originales.

agregar una capaRealice uno de los siguientes procedimientos:

Dé clic en el botón Capa nueva/duplicada sin que haya ninguna capa seleccio-nada.

Nos dirigimos al menú Edición, opción Insertar y seleccione Capa.

Elija nueva capa en el menú de opciones del panel Capas y clic en aceptar.

Eliminar una capaRealice uno de los siguientes procedimientos

En el panel Capas, arrastre la capa al icono de cubo de basura.

Seleccione la capa y haga clic en el icono de cubo de basura del panel Capas.

Capítulo VII : Capas y máscaras


duplicar una capaRealice uno de los siguientes procedimientos

Arrastre la capa al botón Capa nueva/duplicada.

Seleccione la capa y elija duplicar capa en el menú de opciones del panel Ca-pas. A continuación elija el número de capas duplicadas que deben insertarse y dónde deben colocarse en el orden de apilamiento:

arriba, sitúa la nueva capa o capas al principio del panel Capas. La capa de Web siempre es la capa superior, por lo que elegir Arriba coloca la capa duplicada debajo de la capa de Web.

antes de la capa actual, coloca la nueva capa(s) delante de la seleccionada.

después de capa actual, coloca la nueva capa(s) debajo de la seleccionada.

abajo, coloca la nueva capa o capas al final del panel Capas.

duplicar un objetoMantenga pulsada la tecla alt mientras arrastra el objeto a la ubicación deseada.

visualización de capasEl panel Capas muestra los objetos y las capas en una estructura jerárquica. Si un do-cumento contiene muchos objetos y capas, el panel puede resultar confuso e incómodo. Para simplificarlo, es posible contraer la visualización de capas. Cuando se necesite ver o seleccionar objetos específicos de una capa, basta con expandirla.

Expandirocontraerlosobjetosdeunacapa

Dé clic en el botón de signo más (+) o menos (-) a la izquierda del nombre de la capa en el panel Capas.

Expandirocontraertodaslascapas

Presione alt y dé clic en el botón de signo más (+) o menos (-) a la izquierda del nombre de la capa en el panel Capas.

organización de las capasPara organizar las capas y objetos de un documento, es recomendable asignarles un nombre y reordenarlos en el panel Capas. Podemos mover los objetos dentro de una capa o entre capas.

Capas y máscaras


Desplazar las capas y objetos en el panel Capas nos permite cambiar el orden en que éstos se muestran en un documento. Los objetos situados en la parte superior de una capa aparecen en el lienzo delante de los demás objetos de dicha capa. Los objetos de la capa superior aparecen delante de los objetos de las capas inferiores. Cuando se sube o se baja una capa o un objeto más allá de los límites del área visible, el panel Capas se desplaza automáticamente.

Asignarunnombreaunacapauobjeto

Dé doble clic en una capa u objeto en el panel Capas.

Escriba un nombre nuevo para la capa o el objeto y pulse Enter.

No podemos cambiar el nombre de la capa Web, sin embargo, sí es posible asignarle un nombre a los objetos Web, como divisiones y zonas interactivas, situados en dicha capa.

Mover una capa o un objeto:

Arrastre la capa o el objeto a la posición que desee en el panel Capas.

Movertodoslosobjetosseleccionadosdeunacapaaotrolugar

Arrastre el indicador de selección azul de la capa a otra capa. Todos los objetos seleccionados en la capa se mueven simultáneamente a la otra capa.

Copiarenotrolugartodoslosobjetosseleccionadosdeunacapa

Mantenga pulsada la tecla alt y arrastre el indicador de selección azul de la capa a otra capa. Fireworks copia en la nueva capa todos los objetos seleccionados de la capa.

protección de capas y objetosEmpleando el panel Capas podemos controlar la accesibilidad de las capas y los objetos. Es posible proteger los objetos de un documento para evitar su selección y modificación accidental. Al bloquear un objeto, se evita que pueda seleccionarse o editarse. Cuando se bloquea una capa se impide que se puedan seleccionar o editar todos los objetos situados en ella. La función Editar sólo una capa impide la selección o edición inadvertidas de los objetos de todas las capas, salvo la activa.

Bloquearunobjeto

Dé clic en el cuadrado de la columna situada inmediatamente a la izquierda del nombre del objeto. Un icono de candado indica que el objeto está bloqueado.



Bloquearunacapa

Dé clic en el cuadrado de la columna situada inmediatamente a la izquierda del nombre de la capa. Se muestra un icono de candado indicando que la capa está bloqueada.

Bloquearvariascapas

Arrastre el puntero por la columna de bloqueo del panel Capas.

Bloquearodesbloqueartodaslascapas

Seleccione bloquear todas o desbloquear todas en el menú de opciones del panel Capas.

ActivarodesactivarlaopciónEditarsólounacapa

Nos dirigimos al menú de opciones del panel Capas y clic en Editar sólo una.Una marca de verificación indica que la opción está activada.

Mostraruocultarunacapaolosobjetosdeunacapa

Dé clic en el cuadrado de la columna central a la izquierda del nombre de la capa u objeto. El icono de ojo indica que una capa está visible.

Mostraruocultarvariascapasuobjetos

Arrastre el puntero por la columna del icono de ojo del panel Capas.

Mostraruocultartodaslascapasyobjetos

Nos dirigimos al menú de opciones del panel Capas y clic mostrar todas u ocultar todo.

Fusión de objetos en el panel CapasSi se trabaja con objetos de mapa de bits, el panel Capas puede terminar abarrotado con facilidad. Es posible fusionar objetos en el panel Capas si el último de los objetos seleccionados está situado justo encima de un objeto de mapa de bits. No es necesario que los objetos y los mapas de bits que se van a fusionar sean contiguos en el panel Capas ni que residan en la misma capa. La fusión provoca que todos los objetos vec-toriales y de mapa de bits seleccionados se allanen sobre el objeto de mapa de bits situado justo debajo del objeto seleccionado en último lugar. El resultado es un solo objeto de mapa de bits.

Capas y máscaras


Una vez fusionados, los objetos vectoriales y de mapa de bits no se pueden editar por separado, y se pierde la posibilidad de editar los vectoriales.

Fusionarobjetos

En el panel Capas seleccione el objeto u objetos que desea fusionar con un objeto de mapa de bits. Mantenga pulsada la tecla mayús mientras hace clic para seleccionar más de un objeto. Es posible fusionar el contenido de una capa seleccionada con un objeto de mapa de bits que sea el objeto superior de la capa situada inmediatamente debajo de la capa seleccionada.


Seleccione Fusionar con inferior del menú opciones del panel Capas.

Nos dirigimos al menú Modificar y seleccione Fusionar con inferior.

Seleccione Fusionar con inferior en el menú contextual que aparece al hacer clic con el botón derecho del mouse en los objetos seleccionados en el lienzo.

El objeto u objetos seleccionados se fusionan con el objeto de mapa de bits. El resultado es un solo objeto de mapa de bits. Fusionar con inferior no afecta a divisiones, zonas interactivas ni botones.

utilización compartida de capasSe puede compartir una capa en todos los fotogramas de un documento. De esta forma, al actualizar un objeto de esa capa se actualizará en todos los fotogramas. Esta posibi-lidad resulta útil cuando ciertos objetos, como elementos de fondo, deben aparecer en todos los fotogramas de una animación.

Compartirunacapaseleccionadaentrefotogramas


Dirigase al menú opciones del panel Capas y seleccione Compartir esta capa.

Dé doble clic en el nombre de la capa en el panel Capas y seleccione Compartir en fotogramas.

Empleo de la capa de WebLa capa de Web es una capa exclusiva que se muestra como la capa superior de cada documento. Contiene objetos Web, como divisiones y zonas interactivas, que nos per-miten asignar interactividad a los documentos de Fireworks exportados.

Esta capa de Web es imposible suprimir, duplicar, mover, cambiar de nombre ni dejar

1.

2.



de compartir la capa de Web. Tampoco se permite fusionar los objetos que residen en ella. Esta capa se comparte siempre en todos los fotogramas y los objetos Web son visibles en todos ellos.

Cambiar el nombre de una división o zona interactiva de la capa deWeb

Dé doble clic en la división o zona interactiva en el panel Capas.

Escriba el nuevo nombre y haga clic fuera de la ventana o pulse Enter. El nuevo nombre se usará cuando la división se exporte.

Enmascaramiento de imágenesLas máscaras ocultan o muestran partes o zonas de un objeto o imagen. Podemos emplear varias técnicas de enmascaramiento para lograr diversos tipos de efectos creativos en los objetos. Podemos crear una máscara que se comporte como un molde de galletas, cortando o recortando los objetos o imágenes que haya debajo. También se puede crear una máscara que logre el efecto de una ventana empañada, mostrando u ocultando partes de los objetos que haya debajo. Este tipo de máscara utiliza la escala de grises para hacer más o menos visibles los objetos seleccionados. También se puede crear una máscara que utilice su propia transparencia para regular la visibilidad. Se puede crear una máscara mediante el panel Capas o también empleando los menús Edición, seleccionar o Modificar.

Una vez creada, se puede ajustar la posición de la selección enmascarada en el lienzo o modificar el aspecto de una máscara editando el objeto de máscara. También se pueden aplicar transformaciones a la máscara como un todo o a sus componentes individual-mente.

acerca de las máscarasPodemos crear una máscara desde un objeto vectorial (máscara vectorial) o de un objeto de mapa de bits (una máscara de mapa de bits). También se puede crear una máscara con varios objetos u objetos agrupados.

máscaras vectorialesLas máscaras vectoriales, también denominadas trazados o máscaras de recorte o “pegar dentro”. El objeto de máscara vectorial recorta los objetos subyacentes con la forma de su trazado, con un efecto de molde para galletas.

Al crear una máscara vectorial, en el panel Capas se muestra una miniatura con un icono de pluma para indicar que se ha creado una máscara de este tipo.

Cuando una máscara vectorial está seleccionada, el Inspector de propiedades muestra

1.

2.

Capas y máscaras


información sobre cómo se aplica. La mitad inferior de este panel presenta propiedades adicionales que permiten editar el trazo y el relleno del objeto de máscara. Por defecto, las máscaras vectoriales se aplican usando su contorno de trazado, pero también se pueden utilizar de las formas que ud. desee.

máscaras de mapa de bitsLas máscaras de mapa de bits de Fireworks se parecen a las de capa en la cual los píxe-les de la máscara afectan la visualización de los objetos subyacentes. No obstante, las máscaras de mapa de bits de Fireworks son bastante versátiles, ya que es fácil cambiar la forma de cómo se aplican, tanto si se utiliza el aspecto de escala de grises o su propia transparencia. Además, el Inspector de propiedades de Fireworks permite un acceso más rápido a las propiedades de las máscaras y a las opciones de las herramientas de mapa de bits, por lo que se simplifica considerablemente el proceso de edición de las máscaras.

Podemos aplicar máscaras de mapa de bits de dos formas:

Por medio de un objeto existente para enmascarar otros objetos. Esta técnica es similar a la aplicación de una máscara vectorial.

Mediante la creación de lo que se denomina una máscara vacía. Las máscaras vacías comienzan totalmente transparentes o totalmente opacas. Una máscara transparente (o blanca) muestra todo el objeto enmascarado, mientras que una opaca (o negra) lo oculta. Las herramientas de mapa de bits permiten dibujar sobre el objeto de máscara o modificarlo, mostrando u ocultando los objetos enmascarados situados debajo.

Al crear una máscara de mapa de bits, el Inspector de propiedades presenta información

Ilustración: Máscara vectorial aplicada con el comando pe-gar dentro, con la propiedad Contorno de trazado activada.



sobre cómo se apli-ca. Si se elige una herramienta de mapa de bits cuando está seleccionada una máscara de mapa de bits, el Inspector de propiedades presen-ta tanto las propieda-des de la máscara como las opciones correspondientes a la herramienta selec-cionada, por lo que se reduce el proceso de edición. De forma predeterminada, las máscaras de mapa de bits se aplican usando su aspecto en escala de grises, pero también se pueden aplicar utilizando su canal alfa.

Creación de una máscara a partir de un objeto existentePodemos crear máscaras a partir de un objeto existente. Cuando se emplea como más-cara, el contorno del trazado de un objeto vectorial puede recortar otros objetos. Si se trata de un objeto de mapa de bits, el brillo de sus píxeles o su transparencia afectan a la visibilidad de otros objetos.

Enmascarar objetos por medio del comando pegar como máscaraEl comando pegar como máscara nos permite enmascarar objetos o grupos con otro objeto. pegar como más-cara crea una máscara vectorial o de mapa de bits. Cuando se utiliza un objeto vectorial como máscara, pegar como máscara crea una más-cara vectorial que recorta los objetos enmascarados usando el contorno de trazado de ese objeto. Si se usa una imagen de mapa de bits, el coman-do crea una máscara de mapa de bits que afecta

Ilustración: Máscara de mapa de bits aplicada con el coman-do pegar dentro, con aspecto de escala de grises activada.

Ilustración: Máscara aplicada a una imagen con el coman-do pegar como máscara.

Capas y máscaras


a la visibilidad de los objetos enmascarados usando los valores de escala de grises del objeto de mapa de bits.

CrearunamáscaraconelcomandoPegarcomomáscara

Seleccionamos el objeto que deseamos utilizar como máscara. Pulse la tecla mayús y dé clic para seleccionar varios objetos. Si se usan varios objetos como máscara, Fireworks siempre crea una máscara vectorial, aunque sean mapas de bits.

Coloque la selección sobre el objeto o grupo de objetos que desea enmascarar. El objeto u objetos que desea utilizar como máscara pueden estar delante o detrás de los objetos o el grupo que va a enmascarar.

Nos dirigimos al menú Edición y seleccionamos Cortar para cortar el objeto u objetos que va a utilizar como máscara.

Seleccione el objeto o grupo que desea enmascarar.

Si desea enmascarar varios objetos, deben estar agrupados.

Realice una de las siguientes acciones para pegar la máscara:

Nos dirigimos al menú Edición y seleccione pegar como máscara.

Nos dirigimos al menú Modificar, máscara y seleccione pegar como máscara.

Enmascaramiento de objetos con el comando pegar dentroEl comando pegar dentro crea una máscara vectorial o de mapa de bits, en función del tipo de objeto de máscara que se utilice. Para ello, rellena un trazado cerrado o un objeto de mapa de bits con otros objetos: gráficos vectoriales, texto o imágenes de mapa de bits. En ocasiones el trazado en sí se denomina trazado de recorte, y los elementos que contiene se llaman contenido o pegado interior. El conteni-do cuya extensión supere la del trazado de recorte queda oculto. El comando pegar dentro de Fireworks pro-duce un efecto similar al de pegar como máscara, pero con dos diferencias:

Con pegar dentro, el objeto cortado y pegado es el que se enmascara. Por el contrario,

1.

2.

3.

4.

�.

Ilustración: Máscara empleando el comando pegar dentro.



con pegar como máscara, ése es el objeto de máscara. Con las máscaras vectoriales, pegar dentro muestra el relleno y el trazo propios del objeto de máscara. De forma predeterminada, el relleno y el trazo de un objeto de máscara vectorial no son visibles con pegar como máscara. Sin embargo, es posible activarlos o desactivarlos en el Inspector de propiedades.

CrearunamáscaraconelcomandoPegardentro

Seleccione el objeto u objetos que desea utilizar como contenido de pegar den-tro.

Coloque el objeto u objetos encima del objeto dentro del que desea pegar el contenido.

El orden de apilamiento no es importante, siempre que permanezcan seleccionados los objetos que se van a utilizar como contenido de pegar dentro. Estos objetos pueden estar encima o debajo del objeto de máscara en el panel Capas.

Nos dirigimos al menú Edición y seleccione Cortar para mover los objetos al portapapeles.

Seleccione el objeto en el que desea pegar el contenido. Este objeto se utilizará como máscara o trazado de corte.

Nos dirigimos al menú Edición y seleccione pegar.

Los objetos pegados parecen estar dentro del objeto de máscara o recortados por la forma de él.

uso de texto como máscaraLas máscaras de texto son un tipo de máscara vectorial y se aplican de la misma forma que otros objetos existentes: basta con utilizar el texto como objeto de máscara. La forma más habitual de apli-car una máscara de texto es por medio de su contorno de trazado, aunque también se puede utilizar su aspecto en escala de grises.

Podemos emplear el coman-do pegar dentro y el co-mando pegar como másca-ra para colocar un contenido dentro de un texto.

1.

2.

3.

4.

�.

Ilustración: texto como máscara aplicado con el comando pegar dentro y/o pegar como máscara.

Capas y máscaras


Enmascarar objetos por medio del panel CapasMediante el panel Capas se puede aña-dir una máscara de mapa de bits trans-parente y vacía de manera más rápida.

Este panel añade una máscara blanca a un objeto que se puede personalizar dibujan-do sobre esta con las herramientas de mapa de bits.

CrearunamáscarademapadebitsenelpanelCapas

Seleccione el objeto que desea enmascarar.

Dé clic en el botón añadir máscara situado en la parte inferior del panel Capas. Fireworks aplica una máscara vacía al objeto seleccionado. El panel Capas muestra una miniatura que representa la máscara vacía.

Si el objeto enmascarado es un mapa de bits, también puede utilizar una de las herramientas de recuadro o lazo para crear una selección de píxeles.

Seleccione una herramienta de pintura de mapa de bits en el panel herramientas, como pincel, lápiz, Cubo de pintura o degradado.

Defina las opciones que desee para la herramienta en el Inspector de propie-dades.

Con la máscara aún seleccionada, dibuje en la máscara vacía. En las zonas que dibuje, el objeto enmascarado subyacente se oculta.

Enmascarar objetos usando los comandos mostrar y ocultarLa opción máscara del menú Modificar tiene varias opciones para aplicar máscaras vacías de mapa de bits a los objetos:

Mostrartodo

Aplicar una máscara transparente vacía a un objeto, de forma que lo muestra entero. Para lograr el mismo efecto, dé clic en el botón añadir máscara en el panel Capas.

1.

2.

3.

4.

�.

�.

Ilustración: Enmascaramiento de objetos con el panel Capas.



Ocultartodo

Permite aplicar una máscara opaca vacía a un objeto, que lo oculta por completo.

Mostrarselección

Sólo se puede utilizar con selecciones de píxeles. Nos permite aplicar una máscara transparente de píxeles que usa la selección actual de píxeles. Los demás píxeles del objeto de mapa de bits se ocultan. Para lograr el mismo efecto, realice una selección de píxeles y, a continuación, haga clic en el botón añadir máscara.

Ocultarselección

Este comando sólo se puede utilizar con selecciones de píxeles. Nos permite aplicar una máscara opaca de píxeles que usa la selección actual de píxeles. Los demás píxeles del objeto de mapa de bits se muestran. Para lograr el mismo efecto, realice una selección de píxeles y, a continuación, pulse alt y dé clic en el botón añadir máscara.

EmplearloscomandosMostrartodoyOcultartodoparacrearunamás-cara

Seleccione el objeto que desea enmascarar.

Realice una de las siguientes acciones para crear la máscara:

Nos dirigimos al menú Modificar, opción máscara y seleccione mostrar todo para mostrar el objeto.

Nos dirigimos al menú Modificar, opción máscara y seleccione ocultar todo para ocultar el objeto.

Seleccione una herramienta de pintura de mapa de bits del panel herramientas, como pincel, lápiz o Cubo de pintura.

Defina las opciones que desee para la herramienta en el Inspector de propieda-des. Si ha aplicado una máscara Ocultar todo, debe elegir cualquier color salvo el negro.

Dibuje en la máscara vacía. En las zonas que dibuje, el objeto enmascarado sub-yacente se oculta o se muestra, dependiendo del tipo de máscara.

UtilizarloscomandosMostrarselecciónyOcultarselecciónparacrearunamáscara

Seleccione la herramienta varita mágica o cualquiera herramienta de recuadro o de lazo en el panel herramientas.

Realice una selección de píxeles en un mapa de bits.

1.

2.

3.

4.

�.

1.

2.

Capas y máscaras


Realice una de las siguientes acciones para crear la máscara:

Nos dirigimos al menú Modificar, opción máscara y seleccione mostrar selección para mostrar el área definida por la selección de píxeles.

Nos dirigimos al menú Modificar, opción máscara y seleccione ocultar selección para ocultar el área definida por la selección de píxeles.

agrupar objetos para formar una máscaraSe pueden agrupar dos o más objetos para crear una máscara. El objeto superior se con-vierte en el objeto de la máscara. Podemos agrupar los objetos como máscaras de mapa de bits o como máscaras de vecto-res. El orden de api-lamiento determina el tipo de máscara que se aplica. Si el objeto superior es vectorial, el resultado es una máscara vectorial. Si es un objeto de mapa de bits, la máscara también es de mapa de bits.

Agruparobjetosqueformenunamáscara

Pulse la tecla mayús y haga clic en dos o más objetos que se solapen.

3.

1.

Ilustración: Enmascaramiento de objetos empleando los co-mandos mostrar y ocultar selección.

Ilustración: Agrupar uno o varios objetos vectoriales o mapa de bits para crear una máscara



Puede seleccionar objetos que estén en capas diferentes.

Nos dirigimos al menú Modificar, opción máscara y seleccione agrupar como máscara.

Edición de máscarasPodemos modificar las máscaras de diversas formas. Cambiando la posición, forma y color de una máscara, se puede variar la visibilidad de los objetos enmascarados. También se puede modificar el tipo de máscara y la forma en que se aplica. Además, es posible sustituir, desactivar o eliminar las máscaras. El resultado de editar una máscara es visible de inmediato aunque el objeto de máscara en sí no se muestre en el lienzo.

selección de máscaras y objetos enmascarados por medio de las minia-turas de máscara

Podemos identificar y seleccionar con facilidad las máscaras y los objetos enmascara-dos mediante las miniaturas del panel Capas. Las miniaturas permiten seleccionar y editar sólo la máscara o los objetos enmascarados, sin afectar a los demás objetos.

Cuando se selecciona la miniatura de una máscara, el icono de máscara aparece junto a ella en el panel Capas y sus propiedades se muestran en el Ins-pector de propiedades, donde se pueden cambiar si así se desea.

Seleccionarunamáscara

Dé clic en la miniatura de la máscara en el panel Capas. El panel Capas muestra un resaltado amarillo alrededor de la miniatura de máscara cuando está seleccio-nada.

Seleccionarobjetosenmascarados

Dé clic en la miniatura del objeto enmascarado en el panel Capas. El panel Ca-pas muestra un resaltado azul alrededor de la miniatura del objeto enmascarado cuando está seleccionado.

2.

Ilustración: miniatura de más-cara en el panel Capas.

Ilustración: Inspector de propiedades con la miniatura de máscara de capa seleccionada.

Capas y máscaras


selección de máscaras y objetos enmascarados por medio de la herra-mienta subselección

Empleando la herramienta subselección podemos seleccionar máscaras y objetos enmascarados individuales en el lienzo sin seleccionar los demás componentes de la máscara. Cuando seleccionamos una máscara o un objeto enmascarado con la herra-mienta subselección, el Inspector de propiedades muestra sus propiedades.

Seleccionarunamáscaraounobjetoenmascaradodemaneraindepen-diente

Dé clic en el objeto en el lienzo con la herramienta Subselección. La máscara seleccionada aparece resaltada en amarillo y los objetos enmascarados en azul.

desplazamiento de máscaras y objetos enmascaradosPodemos cambiar la posición de las máscaras y los objetos enmascarados. Estos se pueden mover de forma conjunta o por separado.

Moverjuntosunamáscaraysusobjetosenmascarados

Seleccione la máscara en el lienzo con la herramienta Puntero.

Arrastre la máscara a otro lugar, pero con cuidado de no arrastrar el control de desplazamiento a menos que quiera mover el objeto enmascarado por separado.

Movermáscarasyobjetosenmascaradosporseparadodesvinculándo-los

Dé clic en el icono de vínculo que aparece en la máscara en el panel Capas.

Así se desvinculan las máscaras de los objetos enmascarados para que se pue-dan mover de manera independiente.

Seleccione la miniatura del objeto que desea mover: la máscara o los objetos enmascarados.

Arrastre el objeto u objetos en el lien-zo con la herramienta puntero. Si hay varios objetos enmascarados, se mueven todos juntos.

Dé clic entre las miniaturas de máscara en el panel Capas.

Así se restaura el vínculo entre los objetos enmascarados y la máscara.

1.

2.

1.

2.

3.

4.

Ilustración: víncular/desvíncular.



Moverunamáscaraporseparadoconsutiradordedesplazamiento

Seleccione la máscara en el lienzo con la herramienta puntero.

Seleccione la herramienta subselección y arrastre el tirador de desplazamiento de la máscara a otro lugar.

Moverlosobjetosenmascaradosindependientementedelamáscarame-dianteeltiradordedesplazamiento


Arrastre el tirador de desplazamiento a otro lugar. Los objetos se mueven sin afectar a la posición de la máscara. Si hay varios objetos enmascarados, se mue-ven todos juntos.

Modificación del aspecto de una máscaraPodemos cambiar la visibilidad de los objetos enmascarados, modificando la forma y el color de una máscara.

La forma de una máscara de mapa de bits se puede modificar dibujando encima de ella con las herramientas de mapa de bits.

Modificar la forma de una máscara seleccionada

Realice una de estas acciones:

Dibuje encima de una máscara de mapa de bits con cualquiera de las herramien-tas de dibujo de mapas de bits.

Desplace los puntos de un objeto de máscara vectorial con la herramienta Sub-selección.

Modificar el color de una máscara seleccionada

Realice una de las siguientes acciones

Con las máscaras de mapa de bits de escala de grises, utilice las herramientas de mapa de bits para dibujar encima de la máscara usando varios valores de color de escala de grises.

En el caso de las máscaras vectoriales de escala de grises, cambie el color del objeto de máscara.Utilice colores más claros para mostrar los objetos enmasca-rados, y más oscuros para ocultarlos.

1.

2.

1.

2.

Capas y máscaras


Alterarunamáscaraañadiendootrosobjetosdemáscara

Menú Edición, Cortar para cortar el objeto(s) seleccionado que desea añadir.

Seleccione la miniatura del objeto enmascarado en el panel Capas.

Menú Edición, pegar como máscara.

Elija Añadir cuando se le pregunte si desea añadir a la máscara existente o reem-plazarla. El objeto u objetos se añaden a la máscara.

Modificar una máscara mediante las herramientas de transformación


Utilice una herramienta de modificación o un comando del menú Modificar opción transformar para aplicar una transformación a la máscara.

La transformación se aplica a la máscara y a sus objetos enmascarados. Para aplicar una transformación sólo al objeto de máscara, primero desvincule la máscara de los objetos de máscara en el panel Capas y entonces realice la transformación.

Modificación de la forma en que se aplican las máscarasMediante el Inspector de propiedades podemos comprobar que se está editando una máscara, así como identificar el tipo de máscara en que se trabaja. Cuando hay una máscara selecciona-da, el Inspector de propiedades permite cambiar la forma en que se aplica la más-cara. Si el Inspector de propiedades está minimizado, haga clic en la flecha de expan-sión para ver todas las propiedades.

Si se aplica una más-cara de mapa de bits por su canal alfa, es posible crear una máscara que parezca una máscara vectorial aplicada por su contorno de trazado.

Aplicarunamáscaravectorialporsucontornodetrazado

Seleccione Contorno de trazado en el Inspector de propiedades cuando esté seleccionada una máscara vectorial.

1.

2.

3.

4.

1.

2.

Ilustración: Diversas formas de aplicar una máscara.



Aplicarunamáscarademapadebitsporsucanalalfa

Seleccione Canal alfa en el Inspector de propiedades cuando esté selecciona-da una máscara de mapa de bits.

Convertirunamáscaravectorialenunademapadebits

Seleccione la miniatura del objeto de máscara en el panel Capas.

Nos dirigimos al menú Modificar y seleccione allanar selección.

adición de objetos a una selección enmascaradaPodemos añadir más objetos a una selección enmascarada existente.

Añadir objetos enmascarados a una selección enmascarada:

Nos dirigimos al menú Edición y seleccione Cortar.

Seleccione la miniatura del objeto enmascarado en el panel Capas.

Nos dirigimos al menú Edición y seleccione pegar. El objeto u objetos se añaden a los objetos enmascarados. El uso del comando pegar dentro en una máscara existente no mostrará el trazo y relleno del objeto de máscara, a menos que la máscara original se hubiera aplicado usando su trazo y relleno.

sustitución, desactivación y eliminación de máscarasEs posible sustituir una máscara por un nuevo objeto de máscara. También se puede desactivar o eliminar. La desactivación de una máscara la oculta temporalmente. La eliminación de una máscara la elimina permanentemente.

Reemplazarunamáscara

Nos dirigimos al menú Edición y seleccione Cortar para cortar el objeto u objetos seleccionados que va a utilizar como máscara.

Seleccione la miniatura del objeto enmascarado en el panel Capas y nos dirigimos luego al menú Edición y seleccione pegar como máscara.

Dé clic en Reemplazar cuando se le pregunte si desea añadir a la máscara existente o reemplazarla. El objeto de máscara existente se sustituye por el nuevo.

Desactivaroactivarunamáscaraseleccionada

Realice una de las siguientes acciones:

1.

2.

1.

2.

3.

1.

2.

3.

Capas y máscaras


Seleccione desactivar máscara o activar máscara en el menú de opciones del panel Capas.

Nos dirigimos al menú Modificar, opción máscara y seleccione desactivar máscara o menú Modificar,opción máscara y seleccione activar máscara. Cuando la máscara está desactivada, se muestra una X roja en su miniatura. Para activarla, puede hacer clic en la X.

Eliminarunamáscaraseleccionada

Realice una de las siguientes acciones para eliminar la máscara:

Seleccione suprimir máscara en el menú de opciones del panel Capas.

Nos dirigimos al menú Modificar, opción máscara y seleccione supri-mir máscara.

Arrastre la miniatura de la máscara al tachito de basura del panel Capas.

Seleccione si desea aplicar o descartar el efecto de la máscara sobre los objetos enmascarados antes de quitar la máscara:

aplicar mantiene los cambios realizados en el objeto, pero la máscara deja de ser editable.

descartar ignora los cambios realizados y restaura la forma original.

Cancelar anula la operación de eliminación y deja intacta la máscara.

mezcla y transparenciaComponer es el proceso de variar la transparencia o la interacción de colores de dos o más objetos solapados. En Fireworks, los modos de mezcla permiten crear imágenes compuestas. Asimismo, amplían el control de la opacidad de objetos e imágenes.

modos de mezclaCuando seleccionamos un modo de mezcla, Fireworks lo aplica a todo el objeto selec-cionado. Los objetos en un documento o capa pueden tener modos de mezcla distintos a los de otros objetos de ese mismo documento o capa. Cuando se agrupan objetos con distintos modos de mezcla, el modo de mezcla del grupo prevalece sobre los modos definidos para cada objeto. Éstos se restablecen al desagrupar los objetos. Los modos de mezcla no funcionan en documentos de símbolos.

Elementos de los modos de mezclaColor de mezcla, es el color al que se aplica el modo de mezcla.

1.

2.



opacidad, es el grado de transparencia con el que se aplica el modo de mezcla.

Color base, es el color de los píxeles situados debajo del color de mezcla.

Color resultante, es el resultado del efecto del modo de mezcla sobre el color base.

modos de mezcla de Fireworksnormal, no aplica ningún modo de mezcla.

multiplicar, multiplica el color base por el color de mezcla, lo cual produce colores más oscuros.

pantalla, multiplica el color inverso del color de mezcla por el color base, lo cual produce un efecto blanqueador.

oscurecer, selecciona el color más oscuro del color de mezcla y el color base para utilizarlos como color resultante. Este modo sólo reemplaza los píxeles que son más claros que el color de mezcla.

aclarar, selecciona el color más claro del color de mezcla y el color base para utilizarlo como color resultante. Este modo sólo reemplaza los píxeles que son más oscuros 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 resta del que tiene más brillo.

matiz, combina el valor de ma-tiz del color de mezcla con la luminancia y la saturación del color base para crear el color resultante.

saturación, combina la satura-ción del color de mezcla con la lu-minancia y el matiz del color base para crear el color resultante.

Color, combina el matiz y la sa-turación del color de mezcla con la luminancia del color base para crear el color resultante y preser-var los niveles de gris para colo-rear imágenes monocromáticas y teñir las imágenes de color. Ilustración: Diversos modos de mezcla.

Capas y máscaras


luminosidad, combina la luminancia del color de mezcla con el matiz y la saturación del color base.

Invertir, invierte el color base.

tinta, añade gris al color base.

suprimir, elimina todos los píxeles del color base, incluidos de la imagen de fondo.

ajuste de la opacidad y aplicación de mezclasPodemos utilizar el Inspector de propiedades o el panel Capas para ajustar la opacidad de los objetos seleccionados y aplicar los modos de mezcla. El valor 100 en opacidad produce un objeto completamente opaco. El valor 0 (cero) produce un objeto totalmente transparente.

Especificar un modo de mezcla y una opacidad antes de dibujar un ob-jeto

Con la herramienta pertinente seleccionada en el panel herramientas, defina las opciones de mezcla y opacidad en el Inspector de propiedades antes de dibujar el objeto.

Definir un modo de mezcla y nivel de opacidad para objetos existentes

Con dos objetos superpuestos, seleccione el objeto superior.

Seleccione una opción de mezcla en el menú emergente modo de mezcla del Inspector de propiedades o del panel Capas.

Elija un valor en el deslizador emergente opacidad o escríbalo en el cuadro de texto.

1.

2.

3.

Ilustración: Aplicación de mezcla y opacidad.




utilización de estilos, símbolos y uRlmacromedia Fireworks 8 nos provee de tres paneles en los que podemos almacenar y recuperar estilos, sím-bolos y direcciones URL. Los estilos se almacenan en el panel Estilos, los símbolos en el panel biblioteca y las direcciones uRl en el panel uRl. Por defecto, los

tres paneles comparten el grupo de paneles activos.

En el panel Estilos encontramos un conjunto de estilos predefinidos de Fireworks. Ade-más, si ha creado combinaciones de trazos, rellenos, filtros y atributos de texto y desea utilizarlos otra vez, puede guardar los atributos como un estilo. En lugar de volver a asignar los atributos una y otra vez, basta con guardarlos en el panel Estilos y aplicar la combinación de atributos a otros objetos. En Fireworks 8 encontramos tres tipos de símbolos: gráficos, animaciones y botones. Cada uno ellos posee características propias para usos específicos.

Empleamos el panel biblioteca para crear símbolos nuevos y duplicar, importar y mo-dificar símbolos. Una uRl (uniform Resource locator) es la dirección en Internet de

Manejo de Estilos, símbolos y Url

Enestecapítulo

Aprenderá a generar, personalizar y editar símbolos, adicionar Url a las páginas Web.



Generar y personalizar estilos.

Editar las diferentes estilos existentes.

Crear símbolos.

Utilizar símbolos en el diseño de la página Web.

Adicionar URL a las páginas Web.


Capítulo vIII

una página o un archivo específicos. Si utiliza la misma dirección URL con frecuencia, puede incluirla en el panel uRl. Las direcciones uRl se pueden organizar y agrupar en bibliotecas de URL.

uso de estilosPodemos guardar y volver a aplicar un conjunto de rellenos, trazos, filtros y atributos de texto predefinidos, creeando un estilo. Al aplicar un estilo, el objeto adopta todas sus características. Fireworks 8 incluye muchos estilos predefinidos. Estos estilos se pueden cambiar y eliminar, y es posible añadirles nuevas características. También es posible exportar estilos y compartirlos con otros usuarios de Fireworks, o importarlos de otros documentos de Fireworks. No podemos aplicar estilos a objetos de mapa de bits.

aplicación de un estiloPara crear, almacenar y aplicar estilos a objetos o texto pode utilizamos panel Estilos. Una vez aplicado un estilo a un objeto, podemos actualizar dicho objeto más adelante sin que el objeto original se vea afectado. Fireworks no registra los estilos aplicados a un ob-jeto. Si se suprime un estilo personalizado, no lo podrá recuperar. Sin embargo, cual-quier objeto que utili-ce el estilo conservará sus atributos. Si se suprime alguno de los estilos suministrados con Fireworks, pue-de recuperarlo junto con los otros estilos mediante el comando Restablecer estilos del menú Opciones del panel Estilos.

Aplicarunestiloaunobjetoobloquedetextoseleccionado

Nos dirigimos al menú ventana y seleccione Estilos, se abre el panel Estilos.

Dé clic en un estilo del panel Estilos.

Creación y eliminación de estilosPodemos crear un estilo con los atributos de un objeto seleccionado. El estilo creado lo visualizamos en el panel Estilos. Los estilos del panel Estilos también pueden eli-minarse.

1.

2.

Ilustración: Aplicar, editar, crear y eliminar Estilos.



En un estilo pueden guardarse los siguientes atributos:

tipo y color de relleno, incluidos patrones, texturas y atributos de degradado vectorial, como ángulo, posición y opacidad.

tipo y color de trazo.

Filtros y atributos de texto, como fuente, tamaño de punto, estilo (negrilla, cursiva o subrayado), alineación, suavizado, ajuste automático entre caracteres, escala horizontal, ajuste de rangos de caracteres e interlineado.

Crearunestilonuevo

Cree o seleccione un objeto vectorial o de texto con los atributos de trazo, relleno, filtro o texto que desee.

Dé clic en el botón nuevo estilo de la parte inferior del panel Estilos.

Seleccione los atributos que desee que formen parte del estilo en el cuadro de diálogo nuevo estilo.

Si desea guardar atributos que no figuran en la lista, como alineación, suavizado, ajuste entre caracteres, escala horizontal, ajuste de rangos de caracteres e interli-neado, elija la opción texto otro.

Asígne un nombre al estilo y haga clic en aceptar. En el panel Estilos se muestra el icono correspondiente al estilo.

Basarunestilonuevoenotroexistente

Aplique el estilo existente a un objeto seleccionado.

Edite los atributos del objeto.

Guarde los atributos creando un nuevo estilo como se ha descrito en el procedi-miento anterior.

Suprimirunestilo

Seleccione un estilo en el panel Estilos.

Dé clic mientras pulsa la tecla mayús para seleccionar varios estilos o la tecla Control si los estilos no son consecutivos.

Dé clic en el botón Eliminar estilo situado en el panel Estilos.

1.

2.

3.

4.

1.

2.

3.

1.

2.

3.

Capítulo VIII : Manejo de Estilos, símbolos y Url


Edición de estilosPodemos cambiar cuando sea necesario los atributos que contiene un estilo empleando el panel Estilos.

Editarunestilo

Nos dirigimos al menú seleccionar y seleccione anular selección para anular la selección de todos los objetos del lienzo.

Dé doble clic en un estilo del panel Estilos.

En el cuadro de diálogo Editar estilo, active o desactive los atributos que prefiera. El cuadro de diálogo Editar estilo contiene las mismas opciones que el cuadro de diálogo nuevo estilo.

Para aplicar los cambios al estilo dé clic en aceptar.

Exportación e importación de estilosMuhas veces deseamos compartir estilos con otros usuarios de Fireworks para ahorrar tiempo y guardar una uniformidad.

Exportarestilos

Seleccione un estilo en el panel Estilos.

Dé clic mientras pulsa la tecla mayús para seleccionar varios estilos o la tecla Control si los estilos no son consecutivos.

Seleccione Exportar estilos en el menú de opciones del panel Estilos.

Ingrese el nombre y ubicación del documento donde vaya a guardar los estilos.

Dé clic en guardar.

Importarestilos

Seleccione Importar estilos en el menú de opciones del panel Estilos.

Seleccione el documento de estilos que desee importar. Todos los estilos del documento de estilos se importan y colocan directamente después del estilo se-leccionado en el panel Estilos.

uso de los estilos predeterminadosPodemos eliminar todos los estilos personalizados del panel Estilos y restablecer los estilos predefinidos eliminados, basta con recuperar el estado predeterminado del panel

1.

2.

3.

4.

1.

2.

3.

4.

�.

1.

2.



Estilos. Se puede cambiar el tamaño de los iconos que aparecen en el panel Estilos.

RestablecerlosestilospredeterminadosenelpanelEstilos

Seleccione Restablecer estilos en el menú de opciones del panel Estilos. Al res-tablecer los estilos predeterminados se eliminan todos los estilos personalizados que tenga guardados.

Cambiareltamañodelosiconosdevistapreviadeestilos

Elija Iconos grandes en el menú de opciones del panel Estilos para alternar entre tamaño grande y pequeño de vista previa.

aplicación de atributos sin crear estilosSe puede copiar atributos de un objeto y aplicarlos a otros sin necesidad de crear un nuevo estilo en el panel Estilos. Podemos utilizar este método para aplicar rápidamente atributos a un objeto si no tiene intención de volver a aplicarlos a otros objetos. Entre los atributos que pueden copiarse y aplicarse a otros objetos se encuentran los rellenos, trazos, filtros y atributos de texto.

Copiaratributosdeunobjetoyaplicarlosaotrosobjetos

Seleccione el objeto cuyos atributos desee copiar.

Nos dirigimos al menú Edición y seleccione Copiar.

Anule la selección del objeto original y, a continuación, seleccione los objetos a los que desee aplicar los atributos nuevos.

Nos dirigimos al menú Edición y seleccione pegar atributos. Los objetos selec-cionados adoptan los mismos atributos que el objeto original.

manejo de símbolosFireworks contiene tres tipos de símbolos: gráficos, animaciones y botones. Cada uno de ellos posee características propias para usos específicos. Las instancias son repre-sentaciones de un símbolo de Fireworks en el documento. Cuando se modifica el objeto de símbolo (original), las instancias (copias) cambian automáticamente para reflejar las modificaciones efectuadas en el símbolo.

Los símbolos son útiles cuando se desea utilizar un elemento gráfico varias veces en el documento. Podemos colocar instancias en varios documentos de Fireworks y conservar su asociación con el símbolo. Los símbolos permiten crear gráficos, botones y objetos de animación en varios fotogramas.

1.

2.

3.

4.



Creación de símbolosUtilizamos el menú Edición, opción Insertar para crear símbolos gráficos, de anima-ción y de botón. Podemos crear símbolos a partir de cualquier objeto, bloque de texto o grupo y después administrarlos y organizarlos en el panel biblioteca. Al arrastrar un símbolo dede la biblioteca hacia el documento estamos generando instancias del símbolo en el documento.

Crearunsímbolonuevoapartirdeunobjetoseleccionado

Seleccione el objeto y nos dirigimos al menú Modificar, opción símbolo y se-leccionamos Convertir en símbolo.

Ingrese el nombre del símbolo en el cuadro de texto nombre del cuadro de diá-logo propiedades de símbolo.

Seleccionamos un tipo de símbolo: gráfico, animación o botón y acepte.

El símbolo aparece en la biblioteca, el objeto seleccionado se convierte en una instancia del símbolo y el Inspector de propiedades muestra las opciones del símbolo.

Crearunsímbolodesdecero


Nos dirigimos al menú Edición, Insertar y seleccione nuevo símbolo.

Seleccione nuevo símbolo en el menú de opciones del panel biblioteca.

Seleccione un tipo de símbolo: gráfico, animación o botón. A continuación, dé clic en aceptar. Según el tipo de símbolo elegido, se abre el editor de símbolos o el editor de botones.

Cree el símbolo con las herramientas del panel herramientas y cierre el editor.

ubicación de instanciasPodemos colocar instancias de un símbolo en el documento actual desde el panel biblioteca, al símbolo colocado en el documento desde la biblioteca se le denomina instancia.

Colocarunainstancia

Nos dirigimos al panel biblioteca y arrastramos un símbolo hacia el documento actual. Al colocar un símbolo en el documento desde el panel biblioteca se crea una instanciamiento del símbolo en dicho documento.

1.

2.

3.

1.

2.

3.



Edición de símbolosPodemos modificar un símbolo en el editor de símbolos, esto genera la actualización automática de todas las instancias asociadas en el documento cuando finalizamos la edición del respectivo símbolo. Con la mayoría de modificaciones, la edición de una instancia afecta al símbolo y a todas las demás instancias.

Editarunsímboloytodassusinstancias

Realice uno de los siguientes procedimientos para abrir el editor de símbolos:

Dé doble clic en una instancia.

Seleccione una instancia y dirigase al menú Modificar, opción símbolo y seleccione Editar símbolo.

Realice los cambios en el símbolo y cierre la ventana. El símbolo y todas sus instan-cias colocados en el documento reflejan automaticamente las modificaciones.

Cambiarelnombredeunsímbolo

Dé doble clic en el nombre del símbolo en el panel biblioteca.

Cambie el nombre en el cuadro de diálogo propiedades de símbolo y acepte.

Duplicarunsímbolo

Seleccione el símbolo en el panel biblioteca.

Nos dirigimos menú de opciones del panel biblioteca y seleccione duplicar.

Cambiareltipodesímbolo

Dé doble clic en el nombre del símbolo en el panel biblioteca.

1.

2.

1.

2.

1.

2.

1.

Ilustración: Creación de un símbolo y colocar instancias en el documento.



Seleccione otro tipo de símbolo.

Suprimirunsímbolo

Seleccione el símbolo en el panel biblioteca.

Nos dirigimos al menú de opciones del panel biblioteca y elija Eliminar.

Dé clic en Eliminar. Se eliminan el símbolo y todas sus instancias.

Edición de instanciasAl dar doble clic sobre una instancia para modificarla, lo que en realidad se modifica es el símbolo propiamente dicho en el editor de símbolos o el editor de botones. Para editar únicamente la instancia actual, es necesario romper el vínculo entre la instancia y el símbolo. La relación entre ambos se rompe definitivamente, por lo que las modi-ficaciones que se realicen en el símbolo a partir de ese momento ya no se reflejarán en esa instancia. Los símbolos de botón poseen varias funciones prácticas que permiten conservar la relación entre símbolo e instancias en un grupo de botones y a la vez asignar texto y URL propias a cada instancia.

Eliminación de vínculos de símboloSi deseamos modificar una instancia sin que afecte al símbolo ni a otras instancias, primero es necesario romper el vínculo entre ella y el símbolo correspondiente.

Separarunainstanciadeunsímbolo

Seleccione la instancia.

Nos dirigimos al menú Modificar, opción símbolo y seleccione separar.

La instancia seleccionada se convierte en grupo. El símbolo en el panel biblioteca deja de estar asociado a ese grupo. Tras desvincularse de un símbolo, las instan-cias de botón pierden sus características de símbolo de botón y las instancias de animación pierden sus características de símbolo de animación.

Edición de propiedades de instanciaEmpleando el Inspector de propiedades podemos modificar las siguientes propiedades de instancia sin que ello afecte al símbolo ni a otras instancias:

Modo de mezcla, Opacidad

Filtros, Anchura y altura

Coordenadas X e Y

2.

1.

2.

3.

1.

2.



Modificar las propiedades de instancia sin afectar al símbolo ni romper elvínculo

Seleccione la instancia.

Modifique las propiedades de la instancia en el Inspector de propiedades.

Importación y exportación de símbolosPodemos almacenar los símbolos gráficos, de animación y de botón creados en el do-cumento actual en el panel biblioteca. Dicho panel también almacena los símbolos que se han importado en el documento actual. El panel Biblioteca es diferente para cada documento, pero es posible utilizar los símbolos de una biblioteca en varios documen-tos de Fireworks mediante los procedimientos de importación y exportación, cortar y pegar o arrastrar y colocar.

Importación de símbolosmacromedia Fireworks 8 contiene bibliotecas de símbolos en el menú Edición opción bibliotecas, desde el que podemos importar símbolos preparados de animación, gráfi-cos y de botón, así como barras de navegación y temas de varios símbolos. Con estos símbolos es posible crear rápidamente elegantes páginas Web con elementos avanzados de navegación sin necesidad de invertir tiempo creando símbolos originales.

ImportarunoovariossímbolospreparadosapartirdeunabibliotecadesímbolosdeFireworks

Abra un documento de Fireworks.

Nos dirigimos al menú Edición opción bibliotecas y seleccione una biblioteca:

animaciones muestra un conjunto de símbolos animados.

marcas muestra un grupo de símbolos gráficos con apariencia de viñetas.

botones muestra un conjunto de símbolos de botón de Fireworks de 2, 3 y 4 estados.

temas muestra una lista de símbolos gráficos, de animación y de botón; cada tema consta de tres símbolos de similar diseño y nombre coordinados entre sí para utilizarse conjuntamente.

otras abre el cuadro de diálogo Abrir, en el que es posible buscar archivos PNG de bibliotecas de símbolos exportados con anterioridad.

Importarsímbolosdeotroarchivoaldocumentoactual


1.

2.

1.

2.

1.



Nos dirigimos al menú de op-ciones del panel biblioteca y seleccione Importar símbo-los.

Nos dirigimos al menú de Edición, bibliotecas y selec-cione otras.

Abra la carpeta que contiene el archi-vo, elija el archivo y abrir.

Seleccione los símbolos que desee importar y dé clic en Importar. Los símbolos importados se muestran en el panel biblioteca.

Exportación de símbolosSi ha creado o importado símbolos en un documento de Fireworks y desea guardarlos para utilizarlos después en otros documentos o compartirlos con otros usuarios, utilice el menú de opciones del panel biblioteca para exportarlos en un archivo png.

Exportarsímbolos

Seleccione Exportar símbolos en el menú de opciones del panel biblioteca.

Seleccione los símbolos que desee exportar y haga clic en Exportar.

Desplácese a una carpeta, escriba un nombre para el archivo de símbolos y dé clic en guardar. Fireworks guarda los símbolos en un archivo PNG.

utilización de uRlCuando asignamos una uRl a un objeto Web, automa-ticamente se crea un vínculo con un archivo, como una página Web. Podemos asignar uRl a zonas interactivas, botones y objetos de división. Cuando se tiene la inten-ción de utilizar una uRl varias veces, es posible crear una biblioteca de uRl en el panel uRl y almacenar allí las direcciones uRl. El panel uRl nos permite añadir, editar y organizar direcciones uRl.

Ejemplo, si un sitio Web contiene varios botones de navegación para volver a la página inicial, puede añadir la dirección uRl de la página inicial al panel uRl. A continua-ción seleccionaría esta URL en la biblioteca de URL para asignarla a cada botón de navegación.

2.

3.

1.

2.

3.

Ilustración: Importar símbolo desde el panel biblioteca.

Ilustración: Panel uRl.



AsignarunaURLaunobjetoWeb

Introduzca la uRl en el cuadro de texto vínculo.

Dé clic en el botón de signo más (+) para añadir la uRl.

Seleccione un objeto Web.

Seleccione la uRl en el panel de vista previa de uRl.

Creación de una biblioteca de uRlPodemos agrupar las uRl en bibliotecas. De esta forma, las uRl relacionadas se encuentran todas en un único lugar, lo que facilita el acceso a las mismas.

CrearunabibliotecadeURLnueva

Seleccione nueva biblioteca de uRl en el menú de opciones del panel uRl.

Escriba el nombre de la biblioteca en el cuadro de texto y dé clic en aceptar.

AñadirunaURLnuevaaunabibliotecadeURL

Seleccione una biblioteca en el menú emergente biblioteca.

Ingrese una uRl en el cuadro de texto vínculo.

Dé clic en el botón del signo más (+) para añadir la uRl actual a la biblioteca.

Edición de direcciones uRlUtilizando el panel uRl es fácil modificar direcciones uRl. Una uRl puede modi-ficarse una de las veces que aparece o a lo largo de todo el documento.

EditarunaURL

Seleccione la uRl que desee modificar en el panel de vista previa de uRl.

Nos dirigimos al menú de opciones del panel uRl y seleccione Editar uRl.

Modifique la uRl. Seleccione Cambiar todos los casos en que aparezca en el documento si desea actualizar este vínculo en todo el documento.

acerca de uRl absolutas y relativasAl momento de ingresar un valor uRl en el panel uRl, puede ingresar un valor ab-soluto o relativo:

1.

2.

3.

4.

1.

2.

1.

2.

3.

1.

2.

3.



Si va a crear un vínculo con una página Web que no pertenece a su sitio Web, debe utilizar una uRl absoluta.

Si va a crear un vínculo con una página Web de su sitio Web, puede utilizar una uRl absoluta o relativa.

Las uRl absolutas son direcciones URL completas que incluyen el protocolo de servidor, que suele ser http:// en el caso de páginas Web.

Por ejemplo, http://www.senati.edu.pe es la dirección URL absoluta de la pági-na Web de senati. Aunque las uRl absolutas son siempre direcciones exactas que no dependen de la ubicación del documento de origen, los vínculos no se establecen correctamente si el documento cambia de destino.

Las uRl relativas están relacionados con la carpeta que contiene el documento de origen. En estos ejemplos se muestra la sintaxis de navegación de URL rela-tivas.

archivo.htm establece un vínculo con un archivo ubicado en la misma carpeta que el documento de origen.

../../archivo.htm establece un vínculo con un archivo ubicado dos niveles por encima de la carpeta que contiene el documento de origen. Cada ../ representa un nivel.

Las uRl relativas suelen ser las más fáciles de utilizar para establecer un vínculo con archivos que van a permanecer en la misma carpeta que el documento actual.

Importar y exportar uRlSi en el panel uRl hay uRl que vamos a utilizar una o varias veces en otros docu-mentos de Fireworks, podemos exportarlas para su utilización posterior. Más tarde, será fácil importarlas a cualquier otro documento de Fireworks para acceder a ellas con rapidez.

ExportardireccionesURL

Dirigase al menú de opciones del panel uRl y seleccione Exportar uRl.

Digite un nombre de archivo y dé clic en guardar. Se crea un archivo html.

ImportardireccionesURL

Dirigase al menú de opciones del panel uRl y seleccione Importar uRl.

Seleccione un archivo html y haga clic en abrir. Se importan todas las uRl de ese archivo.

1.

2.

1.

2.




divisiones, rollovers y zonas interactivasUno de los elementos más importantes para crear elementos interactivos para páginas Web en macromedia Fireworks 8 son las divisiones. Las divisiones no son imágenes,

son objetos Web compuestos de código html. Es posible ver, seleccionar y asignar otro nombre mediante la capa de Web del panel Capas.

Para añadir interactividad en las divisiones tenemos al método rollover de arrastrar y colocar. Gracias a este método pode-mos crear rápidamente efectos de rollover y de intercambio de imágenes en el espacio de trabajo. Los comportamientos asignados pueden verse en el

panel Comportamientos y es posible crear elementos interactivos más complejos mediante este panel.

Uso de divisiones y rolloverEnestecapítulo

Aprenderá a generar, personalizar y editar divisiones y rollover para el entorno Web.



Generar y utilizar divisiones en el diseño de las páginas Web.

Editar divisiones para la Web.

Aplicar interactividad a las divisiones.

Generar rollover para el sitio.

Eliminar un rollover.


Capítulo IX

Las zonas interactivas nos permite incorporar mayor interactividad en páginas Web. Las zonas interactivas se utilizan para crear un mapa de imágenes, que es código html que define un área interactiva en un documento html.

Creación y edición de divisionesLa división nos permite ‘cortar’ un documento de Fireworks en porciones más peque-ñas que se exportan como archivos independientes. Durante la exportación, Fireworks también crea un archivo html que contiene el código de la tabla que recompone el gráfico en un navegador Web.

Existentresrazonesporlasqueresultaútilrealizarestepaso

optimización, una de las exigencias del diseño gráfico para el entorno Web es el de mantener las imágenes lo suficientemente pequeñas para que se descarguen rápidamente sin reducir la calidad de las mismas. Las divisiones permiten optimizar cada división individual con el formato de archivo y los ajustes de compresión más adecuados.

Interactividad, puede crear divisiones para crear áreas que se activen con las acciones del mouse.

actualización de partes de una página Web, empleando las divisiones resulta fácil actualizar partes de una página Web que se modifique con frecuencia. por ejemplo, suponga que una institución tiene un sitio Web con una sección para alumnos los cuales revisan constantemente sus notas de los respectivos cursos que estudian. Las divisiones nos permiten cambiar rápidamente sólo el nombre y la foto del alumno sin tener que reemplazar toda la página.

Creación de objetos de divisiónPodemos crear un objeto de división dibujándolo con la herramienta división que se encuentra en la sección Web del panel herramientas o insertando una división basado en un objeto seleccionado. Cuando creamos divisiones observamos una líneas que se extienden desde el objeto de división, estas líneas son las guías de división, determinan los límites de los distintos archivos de imagen en los que se dividirá el documento.

Insertarunadivisiónrectangularenfuncióndeunobjetoseleccionado

Dirigase al menú Edición, Insertar y seleccione división. La división es un rectángulo cuya área incluye los bordes más externos del objeto seleccionado.

Si selecciona más de un objeto, elija cómo desea aplicar las divisiones:

una creará un único objeto de división que abarcará todos los objetos seleccionados.

varias creará un objeto de división para cada objeto seleccionado.

1.

2.

3.

1.

2.

Uso de divisiones y rollover


Dibujarunobjetodedivisiónrectangular

Seleccione la herramienta división.

Arrastre para dibujar el objeto de división. El objeto de división aparece en la capa de Web y las guías de división aparecen en el documento.

Creación de divisiones htmlUna división html designa el área donde se presenta texto html estándar en el navegador. Una división html no exporta una imagen; exporta el texto html que aparece en la celda de la tabla definida por la división. Las divisiones html son muy útiles para actualizar texto que aparece en el sitio Web sin tener que crear otros elementos gráficos.

CrearunadivisiónHTML

Dibuje un objeto de división y luego selecciónelo.

En el Inspector de propiedades, elija html en el menú emergente tipo.

Dé clic en Edición.

Escriba texto en la ventana Editar división html y asigne el formato que desee mediante etiquetas de formato de texto html.

Podemos añadir etiquetas de formato al código html después de exportarlo utilizando un editor de texto o de html como macromedia dreamweaver.

Dé clic en aceptar para aplicar los cambios y cerrar la ventana Editar división html.

El texto y las etiquetas html que haya introducido aparecen en el archivo png de Fireworks en el cuerpo de la división como código HTML sin formato.

Creación de divisiones no rectangularesNo siempre las divisiones rectangulares son suficientes al tratar de añadir más interac-tividad a una imagen no rectangular. Por ejemplo, si desea incluir un comportamiento rollover en una división y los objetos de la división se solapan o tienen una forma irregular, una división rectangular podría intercambiar los gráficos de fondo junto con la imagen. Para solucionar este problema, Fireworks permite dibujar divisiones con cualquier forma poligonal gracias a la herramienta división poligonal.

Dibujarunobjetodedivisiónpoligonal

Seleccione la herramienta división poligonal ubicado en la sección Web del panel herramientas.

1.

2.

1.

2.

3.

4.

�.

1.

Capítulo IX : Uso de divisiones y rollover


Dé clic para colocar los puntos de vector del polígono. La herramienta división poligonal dibuja sólo segmentos en línea recta.

Cuando dibuje un objeto de división poligonal alrededor de objetos con bordes suaves, debe incluir todo el objeto para evitar la creación involuntaria de bordes duros en el elemento gráfico de la división.

Si ya no deseamos utilizar la herramienta división poligonal, elegimos otra he-rramienta en el panel herramientas. No es recomendable abusar de las divisiones poligonales, ya que estás requieren más código javascript.

Crearunadivisiónpoligonalounarectangularapartirdeunobjetodevectoresountrazado

Seleccione un trazado vectorial.

Nos dirigimos al menú Edición, Insertar y seleccione Insertar división rectan-gular o Insertar división poligonal (dependiendo de la forma que desee).

visualización de las divisiones y de las guíasPodemos administrar la visibilidad de las divisiones y de otros objetos Web del docu-mento mediante el panel Capas y el panel herramientas. Cuando desactiva la visibili-dad de las divisiones para todo el documento, también se ocultan las guías de división. Empleando el Inspector de propiedades puede organizar las divisiones asignando un color diferente a cada objeto de división.

VisualizaryseleccionarunadivisiónenelpanelCapas

Nos dirigimos al menú ventana y seleccione Capas para abrir el panel Capas.

Expanda la Capa de Web dando clic en el signo más (+).

2.

3.

4.

1.

2.

1.

2.

Ilustración: Creación y edición de divisiones.



La capa de Web muestra la lista completa de objetos Web presentes actualmente en el documento.

Dé clic en un nombre de división para seleccionarla. La división aparece resaltada en la capa de Web y se selecciona en el lienzo.

visualizar y ocultar divisionesAl momento de ocultar una división, ésta se hace invisible en el archivo png de Fi-reworks. Podemos desactivar todos o algunos de los objetos Web. Las divisiones son objetos Web y aparecen enumerados en la capa de Web y del panel Capas; en dicha capa puede activar y desactivar la visibilidad de una división seleccionada.

Ocultarymostrarunasdivisionesyzonasinteractivasdeterminadas

Dé clic en el icono de ojo junto a cada objeto Web individual del panel Capas.

Dé clic en la columna ojo para volver a visualizar el objeto. El icono de ojo vuelve a aparecer cuando los objetos Web son de nuevo visibles.

Ocultaromostrartodaslaszonasinteractivas,divisionesyguías


Dé clic en el botón ocultar/mostrar divisiones adecuado de la sección de he-rramientas Web del panel herramientas.

Dé clic en el icono de ojo junto a la capa de Web del panel Capas.

Ocultar/mostrarlasguíasdedivisiónentodaslasvistasdedocumento

Dirigase al menú ver y seleccione guías de división.

Cambio del color de la división y de las guías de divisiónEn muchas ocasiones los colores utilizados en un documento son similares al color de la división, por lo que puede resultar difícil ver las divisiones en estos objetos del docu-mento. Para mejorar la visualización, podemos asignar un color diferente a las divisiones seleccionadas. Cada división puede tener un color exclusivo para organizarlas mejor. También es posible modificar el color de las guías de división. En la vista previa, las divisiones no seleccionadas aparecen con una superposición de color blanco.

Cambiarelcolordeunobjetodedivisiónseleccionado

En el Inspector de propiedades elija un nuevo color en el cuadro de colores.

3.

1.

2.



Cambiarelcolordelasguíasdedivisión

Dirigase al menú ver, opción guías y seleccione Editar guías.

Seleccione un nuevo color en la sección Color división del cuadro de diálogo guías y dé clic en aceptar.

Edición de divisionesEn Fireworks un diseño de divisiones podemos manipularlo como una tabla en un procesador de textos. Cuando arrastre una guía para cambiar el tamaño de una divi-sión, Fireworks también cambiará automáticamente de tamaño todas las divisiones rectangulares adyacentes. Además, puede utilizar el Inspector de propiedades para cambiar el tamaño y transformar divisiones como lo haría con los objetos vectoriales y de mapa de bits.

desplazamiento de guías para editar divisionesLas guías de división nos permiten definir el perímetro y la ubicación de las divisiones. Las guías de división que se extienden más allá de los objetos de división definen cómo se dividirá el resto del documento durante la exportación. La forma de un objeto de división rectangular puede cambiarse arrastrando las guías que lo rodean. No es posible cambiar el tamaño de los objetos de división no rectangulares al mover las guías de división.

Al arrastrar las guías de división que rodean un botón de Fireworks en la ventana de documento, Fireworks cambia el tamaño de la división que define el área activa de dicho botón. Sin embargo, no se puede eliminar el área activa de un botón de Fireworks arrastrando las guías de división que lo rodean.

Cambiareltamañodeunaovariasdivisiones

Sitúe la herramienta puntero o subselección sobre una guía de división.

Automaticamente el cursor adopta la forma del puntero de movimiento de guías.

Arrastre la guía de división hasta la ubicación deseada.

Se cambiará el tamaño de las divisiones y todas las divisiones adyacentes también cambiarán de tamaño automáticamente.

Cambiarlaposicióndeunaguíadedivisiónhastaelbordedellienzo

Utilice la herramienta puntero o subselección para arrastrar la guía de división fuera del borde del lienzo.

1.

2.

1.

2.

1.



Desplazarguíasdedivisiónadyacentes

Arrastre, manteniendo pulsada la tecla mayús, una guía de división a lo largo de otras guías de divisiones adyacentes.

Libere la guía de división en la ubicación que desee. Todas las guías de división que ha arrastrado se desplazarán hasta esta ubicación.

utilización de herramientas para editar objetos de divisiónUse las herramientas puntero, subselección y transformar para modificar la forma o el tamaño de una división. Sólo se pueden sesgar y distorsionar las divisiones poligonales. Al emplear estas herramientas para cambiar el tamaño y la forma de las divisiones, es posible que se creen divisiones superpuestas, debido a que el tamaño de los objetos de división adyacentes no se ajusta automáticamente.

Editarlaformadeunadivisiónseleccionada


Seleccione la herramienta puntero o subselección y arrastre los puntos de es-quina de la división para modificar su forma.

Utilice una herramienta de transformación para realizar la transformación que desee. Al transformar una división rectangular puede cambiar su forma, posición o tamaño, pero la propia división sigue siendo rectangular.

Incorporación de interactividad sencilla en las divisionesPodemos crear efectos de rollover y de intercambio de imagen usando el método de rollover de arrastrar y colocar. El método de rollover de arrastrar y colocar permite de-terminar lo que sucede en una división cuando el puntero del mouse pasa sobre ella. El resultado final se denomina imagen de rollover. Las imágenes de rollover son gráficos cuyo aspecto cambia en un navegador Web al mover el puntero sobre ellas.

Cuando se selecciona una división visualizamos el tirador de comportamiento el cual es un círculo con una cruz en el centro. Podemos crear fácilmente efectos de rollover y de intercambio de iamgen, al arrastrar el tirador de comportamiento desde una división de activación y colocarlo en una división de destino. El elemento activador y el de destino pueden ser la misma división. Las zonas interactivas también incluyen tiradores de comportamiento para incorporar efectos de rollover.

acerca de los rolloversUn gráfico activa la visualización de otro cuando se sitúa el puntero sobre el primero. El elemento activador siempre es un objeto Web: una división, zona interactiva o un

1.

2.



botón. Todos los rollovers trabajan del mismo modo. El rollover más simple de crear intercambia una imagen en el Fotograma 1 con una imagen que se encuentra justo debajo en el Fotograma 2. También puede crear rollovers más complejos. Los rollo-vers pueden intercambiar una imagen de cualquier fotograma; los rollovers desunidos intercambian imágenes de una división diferente de la división de activación.

Creación de un rollover sencilloUn rollover simple intercambia el fotograma que se encuentra justo debajo del fotograma superior y requiere sólo una división.

Incluirunrolloversimpleenunadivisión

Verifique que el objeto de activación no se encuentra en una capa compartida.

Nos dirigimos al menú Edición, Insertar y seleccione división para crear una división sobre el objeto de activación.

Cree un nuevo fotograma en el panel Fotogramas haciendo clic en el botón Fotograma nuevo/duplicado.

Cree, pegue o importe una imagen para utilizarla como imagen de intercambio en el nuevo fotograma.

Sitúe la imagen debajo de la división que creó en el paso 2, que está aún visible aunque ahora esté en el Fotograma 2. Las divisiones son visibles en todos los fotogramas.

Seleccione el Fotograma 1 en el panel Fotogramas para volver al fotograma que contiene la imagen original.

Seleccione la división y coloque el puntero sobre el tirador de comportamiento. Automaticamente cambia el puntero a una mano.

Dé clic en el tirador de comportamiento y elija Rollover simple en el menú emergente.

Dé clic en la ficha vista previa o pulse F12 para verlo en un navegador.

Creación de un rollover desunidoCuando ubicamos el puntero sobre un objeto Web un como rollover desunido, este intercambia una imagen bajo un objeto Web. En respuesta a la acción de colocar el cursor o puntero sobre el área o a la acción de hacer clic en la imagen de activación, aparece otra imagen en una ubicación distinta de la página Web. la imagen sobre la que se sitúa el cursor se considera elemento activador; la imagen que cambia se considera elemento destino.

1.

2.

3.

4.

�.

�.

�.

8.



Incluirunrolloverdesunidoenunaimagenseleccionada

Nos dirigimos al menú Edición, Insertar y seleccione división o Zona interac-tiva para incluir una división o zona interactiva en la imagen de activación.

Este paso no es necesario si el objeto seleccionado es un botón o si ya existe una división o una zona interactiva en la imagen.

Cree un nuevo fotograma haciendo clic en el botón Fotograma nuevo/duplicado del panel Fotogramas.

Coloque una segunda imagen, que se utilizará como elemento destino, en el nuevo fotograma y en la posición que desee en el lienzo. Puede colocar la imagen en cualquier punto salvo debajo de la división que creó en el paso 1.

Seleccione la imagen y dirigase al menú Edición, opción Insertar y seleccione división para incluir una división en la imagen.

Seleccione el Fotograma 1 en el panel Fotogramas para volver al fotograma que contiene la imagen original.

Seleccione la división, zona interactiva o botón que cubre el área de activación (la imagen original) y coloque el puntero sobre el tirador de comportamiento. El puntero cambia a una mano.

Arrastre el tirador de comportamiento de la zona activa o división de activación a la división de destino que creó en el paso 4.

La línea de comportamiento se extiende desde el centro del objeto activador hasta la esquina superior izquierda de la división de destino y se abre el cuadro de diálogo Intercambiar imagen.

En el menú emergente Intercambiar imagen de, seleccione el fotograma que creó en el paso 2 y dé clic en aceptar.

Dé clic en el botón vista previa para ver una presentación preliminar y probar el rollover desunido.

1.

2.

3.

4.

�.

�.

�.

8.

�.

10.

Ilustración: Creación de un Rollover desunido.



aplicación de varios rollovers a una divisiónPodemos arrastrar más de un tirador de comportamiento desde una división para crear varios comportamientos de intercambio. Por ejemplo, es posible activar un rollover normal y otro desunido a partir de la misma división.

Aplicarmásdeunrolloveraunadivisiónseleccionada

Arrastre un tirador de comportamiento desde la división seleccionada hasta el borde de la misma división o sobre otra división.

Al arrastrar el tirador hasta el borde superior izquierdo de la misma división, se crea una imagen de intercambio, si la arrastra hasta otra división se crea un rollover desunido.

Seleccione el fotograma de la imagen de intercambio y dé clic en aceptar.

Cree más rollovers repitiendo los pasos 1 y 2 tantas veces como lo desee.

EliminarunrolloverdearrastrarycolocardeunobjetoWebobotónseleccionado

Dé clic en la línea azul de comportamiento que desee eliminar.

acepte para eliminar el comportamiento de intercambio de imagen.

utilización del panel Comportamientos para añadir interactividad en las divisiones

Podemos incluir otros tipos de interactividad en las divisiones empleando el panel Comportamientos. Puede crear sus propias interacciones personalizadas si edita los comportamientos existentes.

Fireworks tiene disponibles los siguientes comportamientos:

Rollover simple, nos permite insertar un comportamiento de rollover a la división seleccionada utilizando el Fotograma 1 como estado arriba y el Fotograma 2 como estado sobre. Una vez seleccionado este comportamiento, debe crear una imagen en un segundo fotograma, en la misma división, para crear el estado sobre. Esto nos in-dica que la opción Rollover simple es un grupo de comportamientos que contiene los comportamientos Intercambiar imagen y Restaurar imagen de intercambio.

Intercambiar imagen, permite reemplazar el contenido de la división especificada por el de otro fotograma o el de un archivo externo.

Restaurar imagen intercambiada, devuelve el objeto destino a su aspecto predeter-minado del Fotograma 1.

1.

2.

3.

1.

2.



EstablecerimagendeBarNav

Este comportamiento determina si una división es parte de una barra de navegación de Fireworks. Todas las divisiones que forman parte de la barra de navegación deben tener este comportamiento. En realidad, la opción Establecer imagen de barra de navegación es un grupo de comportamientos que contiene los comportamientos bar nav sobre, bar nav abajo y Restaurar bar nav. Este comportamiento se define automáticamente de forma predeterminada cuando empleamos el Editor de botones para crear un botón que incluya los estados Incluir estado sobre y abajo o mostrar imagen abajo después de cargar.

Al crear un botón de dos estados, se asigna un comportamiento rollover simple a la división. Al crear un botón de tres o cuatro estados, se asigna un comportamiento Es-tablecer imagen de barra de navegación a la división.

bar nav sobre, especifica el estado sobre para la división seleccionada cuando forma parte de una barra de navegación y también puede especificar los estados precargar imágenes e Incluir estado sobre y abajo.

bar nav abajo, especifica el estado abajo para la división seleccionada cuando forma parte de una barra de navegación.

Restaurar bar nav, restaura las otras divisiones de la barra de navegación a su estado arriba.

Establecer menú emergente, asocia un menú emergente a una división o zona inte-ractiva. Al aplicar un comportamiento de menú emergente, se puede utilizar el Editor de menús emergentes.

Establecer el texto de la barra de estado, define el texto que aparecerá en la barra de estado de la parte inferior de las ventanas de la mayoría de los navegadores.

asociación de comportamientosMediante el panel Comportamientos asociamos un comportamiento a una división.

Asociar un comportamiento a una división seleccionada mediante elpanelComportamientos

Dé clic en el botón añadir comportamiento (+) del panel Comportamientos.

Seleccione un comportamiento en el botón añadir comportamiento.

Edición de comportamientosMediante el panel Comportamientos podemos también editar comportamientos existentes. Puede especificar el tipo de evento de ratón (como onClick) que activa el

1.

2.



comportamiento. No podemos cambiar el evento de Rollover simple ni de Establecer imagen de barra de navegación.

Cambiareleventoderatónqueactivaelcomportamiento

Seleccione la división de activación o zona interactiva que contiene el compor-tamiento que desee modificar. Todos los comportamientos asociados con dicha división o zona activa aparecen en el panel Comportamientos.

Seleccione el comportamiento que desee editar.

Dé clic en la flecha que se encuentra junto al evento y elija un nuevo evento en el menú desplegable:

onmouseover, activa el comportamiento cuando el puntero se encuentra sobre el área de activación.

onmouseout, activa el comportamiento cuando el puntero abandona el área de activación.

onClick, activa el comportamiento cuando se hace clic en el objeto de activa-ción.

onload, activa el comportamiento cuando se carga la página Web.

utilización de imágenes externas como imágenes de intercambioPuede utilizar una imagen externa al documento actual de Fireworks como origen para una imagen de intercambio. Las imágenes de origen pueden estar en formato GIF, GIF animado, JPEG o PNG. Si elige un archivo externo como origen del rollover, Firewor-ks intercambia dicho archivo con la división de destino cuando se activa la imagen de intercambio en un navegador Web. El archivo debe tener la misma altura y anchura que la división en que se va a colocar. En caso contrario, el navegador acomoda el archivo para encajarlo dentro del objeto de división. Este cambio de tamaño puede reducir la calidad, especialmente si se trata de un GIF animado.

Seleccionarunarchivodeimagenexternocomoorigendeunaimagendeintercambio

Elija archivo de imagen y haga clic en el icono de carpeta en los cuadros de diálogo Intercambiar imagen, bar nav sobre o bar nav abajo. Si no aparece esta opción en el cuadro de diálogo Intercambiar imagen, elija más opciones y realice el paso 1.

Localice el archivo que desee utilizar y dé clic en abrir.

Si fuera necesario, no seleccione la casilla precargar imágenes (si el archivo externo es un archivo GIF animado).

1.

2.

3.

1.

2.

3.



El caché previo puede interrumpir la visualización de los archivos GIF animados como estados de rollover. No seleccione la casilla precargar imágenes cuando defina el rollover para evitar este problema.

preparación de las divisiones para la exportaciónUtilizando el Inspector de propiedades podemos crear divisiones interactivas a las que se pueden asignar vínculos y destinos. Asimismo puede especificar texto alternativo que aparecerá en un navegador conforme se carga una imagen. También puede elegir un formato de exportación de archivo para optimizar una división seleccionada. Utilice el Inspector de propiedades o el panel Capas para asignar diferentes nombres a las divisiones. Fireworks utiliza el nombre que especifique para asignar nombres a los archivos que se generarán a partir de la división durante la exportación.

Si no introduce un nombre de división en el Inspector de propiedades, Fireworks asig-nará de forma automática nombres para las divisiones durante la exportación. Fireworks exporta un do-cumento de Fi-reworks con di-visiones como un archivo html y varios archivos de imagen.

asignación de uRlUn valor uRl (uniform Resource locator) es una dirección específica de Internet para una página o un archivo. Cuando se asigna un valor uRl a una división, el usua-rio puede ir directamente a la dirección cuando haga clic en el área definida dentro del navegador Web.

AsignarunvínculoURLaunadivisiónseleccionada

Introduzca un valor uRl en el cuadro de texto vínculo del Inspector de pro-piedades. Si desea volver a utilizar los mismos valores uRl, puede crear una biblioteca de vínculos en el panel uRl para guardar estos valores.

asignación de un marco destinoUn destino es un marco de página Web alternativo, o una ventana de navegador Web, en donde se abre el documento vinculado.

Especificar un destino de una división o zona interactiva seleccionada enelInspectordepropiedades

Introduzca un nombre de marco html en el cuadro de texto destino o elija un

Ilustración: Configurar las divisiones para Exportar.



destino reservado en el menú emergente destino:

_blank, carga los documentos vinculados en una ventana de navegador nueva sin nombre.

_parent, carga el documento vinculado en el conjunto de marcos relacionados o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se carga en la ventana de na-vegador completa.

_self, carga el documento vinculado en el mismo marco o en la misma ventana que el vínculo. Normalmente no es necesario especificar el destino.

_top, carga el documento vinculado en la ventana de navegador completa y, por consiguiente, se eliminan todos los marcos.

denominación personalizada de archivos de divisiónEn algunos casos conviene asignar nombres a las divisiones para identificar fácilmente los archivos de división en la estructura de archivos de su sitio Web. Si tiene un botón en una barra de navegación que retorna a la página Inicio, puede denominarlo Inicio.

Introducirunnombrepersonalizadodedivisión


Seleccione la división en el lienzo, asigne un nombre en el cuadro nombre de objeto del Inspector de propiedades y pulse Enter.

Dé doble clic en el nombre de la división de la capa de Web, escriba un nuevo nombre y pulse Enter.

Modificar los criterios predeterminados de denominación automáticaLa ficha Específico del documento del cuadro de diálogo Configuración de HTML nos permite cambiar los criterios de denominación de las divisiones.

Fireworks permite especificar su propio criterio de denominación que utilice una amplia variedad de opciones para asignar nombres. Puede crear un criterio de denominación que tenga hasta ocho elementos. Un elemento puede constar de cualquiera de las opciones siguientes de denominación automática.

Por ejemplo, si el nombre del documento es titular, el criterio de denominación nombre.titular + “división” + División nº. (A,B,C...) creará una división denominada titulardivisióna.

Es probable que nunca necesite un criterio de denominación que utilice los ocho ele-



mentos. Si una división tiene más de un fotograma, Fireworks añade, de forma prede-terminada, un número a cada archivo de fotograma.

Por ejemplo, si especifica el nombre personalizado de archivo de división inicio para un botón con tres estados, Fireworks asigna el nombre “inicio.gif” al gráfico del esta-do arriba, “inicio_f2.gif” al gráfico del estado sobre y “inicio_f3.gif” al gráfico del estado abajo.

Fireworks permite crear su propio criterio de denominación para las divisiones con varios fotogramas mediante el cuadro de diálogo Configuración de HTML.

opción descripción Ninguna No se aplica ningún nombre al elemen-

to. nombre.doc El elemento utiliza el nombre del do-

cumento. “división” Inserta la palabra “división” en el crite-

rio de denominación.Nº de división (1,2,3...)

Nº de división (01,02,03...)

Nº de división (A,B,C...)

Nº de división (a,b,c...)

El elemento se enumera de forma nu-mérica o alfabética, según el estilo que elija.

fila/columna (r3_c2, r4_c7...) Fila (r##) y Col (c##) designan las filas y las columnas de la tabla que utilizarán los navegadores Web para reconstruir una imagen dividida. Puede utilizar esta información en el criterio de de-nominación.

Subrayado, Punto, Espacio, Guión

El elemento utiliza cualquiera de estos caracteres, normalmente, como sepa-radores entre otros elementos.

Cambiarloscriteriospredeterminadosdedenominaciónautomática

Nos dirigimos al menú archivo y seleccione opción Configuración de HTML para abrir el cuadro de diálogo Configuración de HTML.

Dé clic en la ficha Específico del documento.

En la sección nombres de archivo, cree el criterio que desee seleccionando elementos en las listas.

(opcional). Para definir esta información como valor predeterminado en los nuevos documentos de Fireworks, haga clic en Fijar predeterminados.

1.

2.

3.

4.



Definición de la exportación de tablas HTMLAl crear divisiones definimos cómo se mostrará la estructura de la tabla html cuando exportemos un documento Fireworks para utilizarlo en la Web. Cuando exportamos un documento con divisiones de Fireworks como html, dicho documento se vuelve a ensamblar mediante una tabla html.igo html.

los espaciadores, son imágenes que permiten alinear correctamente las celdas de tabla al mostrarse en un navegador.

una tabla anidada, es una tabla dentro de otra tabla. Las tablas anidadas no utilizan espaciadores. Pueden tardar más en cargarse en un navegador, pero la edición del código html resulta más fácil al no haber espaciadores.

Definir la forma en que Fireworks exporta tablas HTML

Nos dirigimos al menú archivo, opción Configuración de HTML o dé clic en el botón opciones en el cuadro de diálogo Exportar.

Dé clic en la ficha tabla.

Seleccione una opción de espaciado en el menú emergente Espacio con:

tablas anidadas - sin espaciadores genera una tabla anidada sin espa-ciadores.

tabla única - sin espaciadores genera una sola tabla sin espaciadores. Esta opción puede provocar que las tablas aparezcan incorrectamente en algunos casos.

Espaciador transparente de 1 píxel utiliza un archivo gIF transparente de 1x1 píxeles como espaciador cuyo tamaño puede cambiarse conforme sea necesario en el código HTML.

Seleccione un color de celda para las divisiones html:

Active usar color del lienzo para que las celdas tengan el mismo color de fondo que el lienzo del documento.

Si desea elegir otro color, no seleccione usar color del lienzo y elija un color en la ventana emergente Color.

Del menú emergente Contenido, elija lo que va a colocar en las celdas vacías:

ninguno hace que las celdas permanezcan vacías.

Imagen espaciadora coloca un pequeño archivo de imagen transparente denominado spacer.gif en las celdas vacías.

Espacio indivisible coloca una etiqueta html de espacio en las celdas vacías. La celda aparece hueca.

1.

2.

3.

4.

�.



Las celdas vacías sólo se producen si no se selecciona Incluir áreas sin divisiones en el cuadro de diálogo Exportar.


Es posible especificar valores diferentes de exportación de tabla para cada objeto dividido de cada documento.

utilización de zonas interactivas y mapas de imagenFireworks nos brinda la facilidad de utilizar pequeñas zonas interactivas en imágenes más grandes, vinculando áreas de gráficos Web a una uRl. En Fireworks es posible crear un mapa de imagen exportando html de un documento que contenga zonas interactivas.

Creación de zonas interactivasLuego de identificar las áreas del gráfico origen que podrían servir como zonas inte-ractivas, podemos crear estas zonas y asignarles vínculos uRl, menús emergentes, mensajes de barra de estado y texto alt.

Existen dos formas de crear zonas interactivas:

Dibujando un área de destino en el gráfico, utilizando las herramientas Zona interactiva rectangular, circular o poligonal (forma irregular).

Selecionando un objeto e insertamos en él la zona interactiva.

Crearunazonainteractivarectangularocircular

Seleccionamos la herramienta Zona interactiva rectangular o Zona interactiva circular de la sección Web del panel herramientas.

Arrastre la herramienta Zona interactiva para dibujar una zona interactiva sobre un área del gráfico. Mantenga pulsadas las teclas alt+mayús para dibujar a partir de un punto central.

Crearunazonainteractivadeformairregular

Seleccione la herramienta Zona interactiva poligonal de la sección Web del panel herramientas.

Dé clic en la herramienta para trazar los puntos de vector, tan igual como si estu-viese dibujando segmentos de línea recta con la herramienta pluma.

�.

1.

2.

1.

2.



Ejemplo desarrolladoCrear un documento nuevo con las siguientes dimensiones: An: 575 píxeles, Al: 585 píxeles, Resolución: 72 ppp y guardarlo con el nombre pet_site.png.Abrir el archivo site_car_center.png e importe las imágenes car1.jpg, car2.jpg, car3.jpg y car4.jpg en los forogramas respectivos según la secuencia que se detalla a continuación:




Creación de botones y menús emergentesCon macromedia Fireworks 8 podemos crear diferentes botones javascript y menús emergentes Css o javascript sin la necesidad de que el usuario conosca el código javascript ni Css. El editor de botones de Fireworks es muy importante por que nos sirve como guía través del proceso de creación y además podemos automatizar muchas

de las tareas. El resultado es un práctico símbolo de botón a partir del cual se pueden crear instancias fácilmente para diseñar una barra de navegación o bar nav.

Fireworks también nos provee del Editor de menú emergente que nos permite crear rápida y fácilmente menús emer-

Generación de botones y menú emergente

Enestecapítulo

Aprenderá a crear y editar botones y menús emergentes.



Crear un botón para la Web.

Editar botones.

Importar símbolos para botones.

Crear un menú emergente para el sitio Web.

Editar el menú emergente del sitio Web.


Capítulo X

gentes horizontales y verticales. La ficha avanzado del Editor de menú emergente nos ofrece un control creativo sobre el espaciado, relleno y bordes de celdas, la sangría del texto y otras propiedades. Cuando exportamos un botón o menú emergente, Firewor-ks genera de forma automática el código Css o javascript necesario para mostrarlo en un navegador Web. En macromedia dreamweaver, puede insertar fácilmente el código Css, html y javascript de Fireworks en las páginas Web o cortar y pegar el código en cualquier archivo html.

Creación de símbolos de botónMediante los botones los usuarios pueden navegar o enlazarses con otras páginas Web dentro del mismo sitio u otro sitio Web Los botones constituyen los elementos princi-pales de navegación de una página Web. Los botones creados en el Editor de botones tienen las características siguientes:

Se puede convertir fácilmente cualquier gráfico u objeto de texto en un botón.

Podemos crear un botón nuevo o convertir un objeto existente en un botón además de importar otros ya creados.

Un botón es un tipo especial de símbolo. Es posible arrastrar instancias del res-pectivo botón desde la biblioteca de símbolos al documento.

De este modo puede cambiar el aspecto gráfico de un botón y actualizar automá-ticamente el aspecto de todas las instancias del botón en una bar nav.

Es posible editar el texto, la uRl y el elemento destino de una instancia de botón sin afectar al resto de las instancias del mismo botón y sin romper la relación símbolo-instancia.

Las instancias de botón están encapsuladas. Al arrastrar la instancia de botón hacia el documento, Fireworks desplaza todos los componentes y estados asociados, por lo que no es necesario editar los distintos fotogramas.

Un botón puede editarse de forma sencilla. Solo basta con dar doble clic en la instancia del lienzo y podrá modificarlo en el Editor de botones o el Inspector de propiedades.

acerca de los estados de botónPodemos colocar dentro de botón hasta cuatro estados diferentes. Cada estado representa el aspecto del botón en respuesta a una acción del ratón:

Estado arriba, es el estado de reposo o predeterminado del botón.

Estado sobre, este estado se visualiza cuando movemos o desplazamos el pun-tero del mouse sobre el botón. Este estado avisa al usuario de que al hacer clic es probable que se produzca una acción.

1.

2.

3.

4.

�.

�.

�.

1.

2.



Estado abajo, este estado corresponde cuando hacemos clic en el botón. A me-nudo se utiliza una imagen cóncava del botón para indicar que se ha pulsado. Este estado representa normalmente la página Web actual en las barras de navegación con varios botones.

Estado sobre y abajo, este estado se presenta cuando movemos el puntero sobre un botón que se encuentra en estado abajo. Este estado de botón normalmente indica que el puntero está sobre el botón correspondiente a la página Web actual en las barras de navegación con varios botones.

Utilizando el Editor de botones podemos crear todos estos estados, así como el área para la activación de la acción del botón.

uso del Editor de botonesUtilizamos el Editor de botones de Fireworks para crear y editar un símbolo de botón javascript. Las fichas ubicadas en la parte superior del Editor de botones se corres-ponden con los cuatro estados del botón y el área activa. Las sugerencias que puede observar en cada opción del Editor de botones le ayudan a tomar decisiones en cuanto al diseño de los cuatro estados de botón.

Creación de un botón sencillo de dos estadosUtilizando el Editor de botones podemos crear botones personalizados dibujando formas, impor-tando imágenes o arras-trando objetos desde la ventana de documento. El Editor de botones nos sirve de guía de los pasos que permiten controlar el comportamiento del botón.

CrearunestadoArriba

Dirigase al menú Edición, Insertar y seleccione nuevo botón para abrir el Editor de botones. Por defecto se abre el Editor de botones con la ficha del estado arriba.

Importe o cree el gráfico del estado arriba, realice uno de los siguientes proce-dimientos:

Arrastre y coloque o importe el gráfico que aparecerá como el estado arri-ba del botón en el área de trabajo del Editor de botones.

3.

4.

1.

2.

Ilustración: Creación de un botón de dos estados.

Capítulo X : Generación de botones y menú emergente


Utilice las herramientas de dibujo para crear un gráfico o utilice la herra-mienta texto para crear un botón a partir de texto.

Dé clic en Importar un botón y seleccione un botón editable ya creado en la biblioteca Importar un botón.

Si lo desea, elija la herramienta texto y cree el texto del botón.

CrearunestadoSobre

Dé clic en la ficha sobre del Editor de botones.

Siga uno de los procedimientos siguientes para crear el estado sobre del botón:

Dé clic en Copiar gráfico Arriba, pegue la copia del botón en estado Arri-ba en la ventana del estado Sobre y modifique el aspecto o texto.

Importe, dibuje o arrastre y coloque un gráfico.

Creación de un botón con tres o cuatro estadosCuando creamos un botón, podemos añadir el estado abajo y sobre y abajo además de los estados arriba y so-bre. Estos estados nos per-mite presentar indicaciones visuales extra a los usuarios de páginas Web. Podemos crear una barra de navega-ción que utilice dos o incluso tres botones de estado, pero sólo un botón con los cuatro estados puede considerarse un verdadero botón de barra de navegación en Fireworks. Fireworks incluye varios comportamientos de bar nav para que los botones actúen como si estuvieran relacionados unos con otros. Por ejemplo, puede crear botones de barra de navegación que actúen como pulsadores de una radio de un coche antiguo: al hacer clic en un botón, permanece pulsado hasta que se haga clic en otro.

CrearelestadoAbajo

Abra un botón de dos estados en el Editor de botones con doble clic y luego dirigase a la ficha abajo.

Realice uno de los siguientes procedimientos para crear el estado abajo del botón:

3.

1.

2.

1.

2.

Ilustración: Creación de un botón de cuatro estados.



Dé clic en Copiar gráfico Sobre para pegar una copia del elemento grá-fico del estado Sobre en la ventana del estado abajo y modifíquelo para cambiar su aspecto.


CrearunestadoSobreyAbajo

Abra un botón de tres estados en el Editor de botones y haga clic en la ficha sobre y abajo.

Siga uno de los siguientes procedimientos para crear el estado sobre y abajo del botón:

Dé clic en Copiar gráfico Abajo para pegar una copia del elemento gráfi-co del estado abajo en la ventana del estado sobre y abajo y modifíquelo para cambiar su aspecto.


Uso de filtros biselado para dibujar estados de un botónCuando creamos gráficos para cada estado de botón, podemos aplicar filtros automáticos preestablecidos y/o personalizados para conseguir el aspecto común y personalizado de cada estado. Por ejemplo, si se deseamos crear un botón de tres o cuatro estados.

Aplicar un filtro automático preestablecido a un símbolo de botón

Mediante el Editor de botones abra el símbolo de botón que desee y seleccione el gráfico en el que desea añadir un filtro automático.

Dé clic en el botón Añadir filtros automáticos del Inspector de propiedades.

En el menú emergente, realice uno de los siguientes procedimientos:

Opción bisel y Relieve y seleccione bisel interior.

Opción bisel y Relieve y seleccione bisel exterior.

En la ventana emergente, elija un filtro preestablecido de botón.

Repita los pasos del 1 al 4 para el resto de los estados de botones, incluya en cada estado un filtro preestablecido de botón diferente.

Insertar botones en un documentoTambién podemos insertar instancias de símbolos de botón en un documento desde el panel biblioteca.

1.

2.

1.

2.

3.

4.

�.



ColocarinstanciasdeunsímbolodebotónenundocumentodesdelaBilbioteca

Dirigase al menú ventana y dé clic en biblioteca. Se abre el panel biblioteca.

Arrastre el símbolo de botón al documento.

Colocarinstanciasadicionalesdeunsímbolodebotónenellienzo


Seleccione una instancia y dirigase al menú Edición y seleccione Clonar para colocar otra instancia delante de la seleccionada. La nueva instancia se convierte en el objeto seleccionado.

Arrastre otra instancia de botón desde el panel biblioteca hasta el documento.

Pulse la tecla alt mientras arrastra una instancia en el lienzo para crear otra ins-tancia de botón.

Copie una instancia y pegue instancias adicionales.

Importación de símbolos de botónToodos los símbolos de botón del panel biblioteca son específicos del documento. de Fireworks. Si ha abierto un documento con símbolos en el panel biblioteca y crea uno nuevo, el panel biblioteca del nuevo documento estará vacío. No obstante, existen varios métodos para importar símbolos de botón en el panel biblioteca de un documento, ya sea desde una biblioteca o desde otro documento de Fireworks.

ImportarsímbolosdebotónenelpanelBibliotecadeundocumento


Corte y pegue una instancia de botón de otro documento de Fireworks en el documento actual.

Arrastre y coloque una instancia de botón de otro documento de Fireworks en el documento actual.

Importe símbolos de botón desde un archivo png de Fireworks.

Dirigase al menú Edición y seleccione bibliotecas e importe los símbolos de botón en el panel Biblioteca del documento desde las bibliotecas de botones del submenú. Estas bibliotecas contienen una amplia variedad de símbolos de botón predefinidos preparados por macromedia.

1.

2.



Edición de símbolos de botónLos símbolos de botón de Fireworks son de un género especial y presentan dos tipos de propiedades: los que cambian en todas las instancias cuando se edita una instancia del símbolo y otros que sólo afectan a la instancia actual.

Edición de las propiedades de símboloPara editar un símbolo de botón utilizamos el Editor de botones. Las propiedades de instancia que podemos modificar son las que normalmente son consistentes en los botones de una barra de navegación:

Filtros automáticos, opacidad o el modo de mezcla aplicado a objetos indepen-dientes dentro del símbolo de botón.

Las modificaciones del aspecto gráfico como el color y tipo de trazo, el color y tipo de relleno, forma del trazado y las imágenes.

Vínculo URL.

Tamaño y posición del área activa.

Comportamiento principal de un botón.

Configuración de optimización y de exportación.

Marco destino (también disponible como una propiedad a nivel de instancia).

Editarlaspropiedadesdeunbotóncomosímbolo

Realice uno de los siguientes procedimientos para abrir el botón en el Editor de bo-tones:

Dé doble clic en una instancia del botón en el espacio de trabajo.

En el panel biblioteca, dé doble clic en la vista previa del botón o en el icono de símbolo que se encuentra junto al símbolo de botón.

Modifique las características del botón y haga clic en listo.

Los cambios se aplican a todas las instancias del símbolo de botón.

Edición de las propiedades de instanciaSe puede editar las propiedades de instancia utilizando el Inspector de propiedades cuando seleccionamos una única instancia. Esta edición no afecta a los símbolos aso-ciados o a ninguna otra instancia del símbolo en particular.

1.

2.



Estas propiedades normalmente son diferentes de un botón a otro en una serie de bo-tones:

Un nombre de objeto de instancia, que se muestra en el panel Capas y que se utiliza para asignar nombres a las divisiones de la instancia de botón durante la exportación.

Filtros automáticos y opacidad aplicados a toda la instancia.

Vínculo uRl (prevalece cualquier URL que sea una propiedad de símbolo).

Texto alternativo (alt) con la descripción de imagen y los caracteres de texto, su formato, como fuente, tamaño, orientación y color.

Fotograma destino (prevalece cualquier fotograma destino que sea una propie-dad de símbolo).

Comportamientos adicionales asignados a una instancia mediante el panel Com-portamientos y la opción Mostrar imagen Abajo después de cargar del Inspector de propiedades para las instancias de una barra de navegación

En Fireworks 8, no necesitamos elejir la opción mostrar imagen abajo después de cargar cada instancia de botón de una barra de navegación. La sección Específico del documento del cuadro de diálogo Configuración HTML contiene la opción Exportar varios archivos. Al escoger esta opción y exportar una barra de navegación, Fireworks 8 exporta las páginas html con el estado abajo correspondiente del botón.

Editarlaspropiedadesdeinstanciadeunaúnicainstanciadesímbolodebotón

Seleccione la instancia de botón en el área de trabajo.

Defina las propiedades en el Inspector de propiedades.

Definición de las propiedades interactivas de botónFireworks 8 nos permite controlar los elementos interactivos de un botón, incluidos el área activa, uRl, elemento destino y texto alternativo (alt) con la descripción de la imagen.

Modificación del área activa de un símbolo de botónA la zona en la que se activa la interactividad cuando un usuario desplaza el cursor por encima o hace clic en un navegador Web se le denomina Área activa de un símbolo de botón, La cuál es una propiedad de símbolo que sólo lo tienen los símbolos de botón.

1.

2.



Cuando crea un símbolo de botón, Fireworks crea de forma automática una división lo suficientemente grande como para abarcar todos los estados del botón. Sólo puede editar una división de botón en la ficha Área activa del Editor de botones. Cada botón sólo puede tener una división.

Editarunadivisiónozonainteractivaeneláreaactivadelsímbolodebotón




Dé clic en la ficha Área activa.


Utilice la herramienta puntero para mover o modificar la forma de divi-sión y desplazar una guía de división.

Utilice cualquiera de las herramientas de división o de zona interactiva para dibujar la nueva área activa.

Definición de la URL de un símbolo de botón o instanciaPodemos crear un vínculo a otra página Web, sitio Web o punto de anclaje en la mis-ma página Web con una uRl (uniform Resource locator) . La uRl puede ser una propiedad de símbolo o de instancia.

Puede incorporar una uRl a una instancia de botón seleccionada en el Inspector de propiedades o en el panel uRl. Se puede incorporar una uRl a un símbolo, de este modo, para cada instancia, aparecerá la misma uRl en el cuadro de texto vínculo del Inspector de propiedades. Esto resulta útil cuando introduce uRl absolutas en un sitio, ya que, para vincular las instancias de botón, sólo necesita modificar la última parte de la uRl en el cuadro de texto vínculo de cada instancia en el Inspector de propiedades.

Definir la URL de un símbolo de botón en el Editor de botones

Realice uno de los siguientes procedimientos para abrir el botón en el Editor de botones:



1.

1.

2.

1.



Dé clic en la ficha Área activa del Editor de botones.

Seleccione la división o zona interactiva de área activa.


Ingrese la uRl en el cuadro de texto vínculo del Inspector de propie-dades.

Elija la uRl en el panel uRl.

Si cambia la uRl de un símbolo de botón no se cambiará la uRl de las instancias de botón de dicho símbolo que ya tengan uRl exclusivas asignadas. Igual ocurre con las modificaciones realizadas en el destino de un símbolo de botón y el texto alt.

Configurar la URL de una instancia de botón seleccionada en el espacio detrabajo


Ingrese la uRl en el cuadro de texto vínculo del Inspector de propiedades.

Elija la uRl en el panel uRl.

Configuración del destino de un botónSe le denimina elemento destino a la ventana o fotograma en la cuál aparece la página Web al hacer clic en una instancia de botón. Si no introduce un elemento destino en el Inspector de propiedades, la página Web aparecerá en el mismo fotograma o ventana que el vínculo. El valor de destino puede ser una propiedad de símbolo o de instancia. Podemos definir el destino de un símbolo de forma que todas sus instancias tengan la misma opción de destino.

Configurar el valor destino de una instancia de botón en el espacio de trabajo

Seleccione la instancia de botón en el espacio de trabajo.

Realice uno de los siguientes procedimientos en el Inspector de propiedades:

Seleccione un destino preestablecido en el menú emergente destino.

ninguno o _self, carga la página Web en el mismo fotograma o ventana que el vínculo.

_blank, carga la página Web en una ventana nueva sin nombre del nave-gador.

2.

3.

4.

1.

2.



_parent, carga la página Web en el conjunto de marcos primario o en la ventana del marco que contiene el vínculo.

_top, carga la página Web en la ventana completa del navegador eliminando todos los marcos.

Introduzca un valor de destino en el cuadro de texto destino.

Definición del texto alternativo (alt) para un símbolo de botón o instan-cia

El texto alt (alternativo) se muestra sobre el marcador de posición de la imagen o cerca mientras ésta se descarga de la Web, también se visualiza en lugar del gráfico cuando la imagen no se descarga correctamente. También aparece en lugar de los gráficos si el usuario a definido en su navegador que no se muestren imágenes. El texto alt puede ser una propiedad de símbolo o de instancia. Es posible definir el texto alternativo para un símbolo de botón o instancia en el Inspector propiedades.

Configurar el texto alt de una instancia de botón dentro del espacio de trabajo

Seleccione la instancia de botón en el espacio de trabajo.

Ingrese la descripción en el cuadro de texto alt del Inspector de propiedades.

Creación de barras de navegaciónUna barra de navegación, también conocida como bar nav, esta compuesto por un grupo de botones que ofrece vínculos a otras áreas de un sitio Web. Usualmente, no cambia de aspecto en el sitio de modo que ofrece un método coherente de navegación sin importar el lugar en que se encuentre el usuario en el sitio Web. La barra de nave-gación tiene el mismo aspecto de una página Web a otra, pero los vínculos pueden ser específicos para el funcionamiento de cada página. Con Fireworks 8, podemos crear una bar nav generando un símbolo en el Editor de botones y colocando instancias de dicho símbolo en el espacio de trabajo.

Crearunabarnavbásica

Cree un símbolo de botón.

Arrastre una instancia (copia) del símbolo desde el panel biblioteca hasta el área de trabajo.


Seleccione la instancia de botón, dirigase al menú Edición y seleccione Clonar.

1.

2.

1.

2.

3.



Mantenga pulsada la tecla alt mientras arrastra la instancia de botón.

Pulse la tecla de mayúsculas y arrastre el botón para alinearlo en horizontal o vertical. Para mover las instancias de forma más precisa, mantenga pulda también la tecla mayús.

Repita los pasos 3 y 4 para crear instancias de botón adicionales.

Seleccione cada instancia y asígnele un texto único, una uRl y otras propiedades en el Inspector de propiedades.

Creación de menús emergentesVisualizamos los menús emergentes en el navegador cuando el usuario mueve el pun-tero o si hace clic sobre un objeto Web como un botón, una división o zona interactiva. Los elementos de estos menús pueden incluir vínculos uRl para la navegación. Por ejemplo, podemos utilizar los menús emergentes para organizar diferentes opciones de navegación que estén relacionadas con un botón de una barra de navegación. Además, puede crear tantos submenús como desee.

Cada elemento de un menú emergente aparece como una celda html o de imagen, con un estado arriba, un estado sobre y texto en ambos estados. pulsamos la tecla F12 para ver una presentación preliminar de un menú emergente en un navegador. Las vistas previas del área de trabajo de Fireworks no muestran los menús emergentes.

El Editor de menú emergentePodemos fácilmente crear un menú emergente utilizando el cuadro de diálogo Editor de menú emergente, el cuál contiene fichas que le guiarán durante el proceso de creación de un menú emergente. Este cuadro de diálogo contiene muchas opciones para controlar las características de un menú emergente y están organizadas en cuatro fichas:

Contenido, tiene opciones que determinan la estructura básica del menú, así como el texto, vínculo URL y el valor de destino de cada elemento de menú.

aspecto, alberga opciones que determinan el aspecto de cada celda de estado arriba y de estado sobre del menú, así como la orientación vertical y horizontal del mismo.

avanzado, nos provee de opciones que determinan las dimensiones de celda, relleno y espaciado; la anchura del borde de la celda y el color; la demora de menú y el sangrado del texto.

posición, contiene opciones que definen la ubicación del menú y del submenú:

La opción menú ubica el menú emergente en relación con la división. La opción preestablecido lo incluye en la parte inferior, inferior derecha, superior y superior derecha de una división.

4.

�.

�.

1.

2.

3.

4.



El ajuste submenú ubica el submenú emergente en la parte derecha o in-ferior derecha del menú principal, o debajo del mismo.

Creación de un menú emergente básicoUtilizando la ficha Con-tenido del Editor de menú emergente se crea la estructura básica y el contenido del menú emergente. Cuando crea un menú se aplican los ajustes actuales o prede-terminados de las diver-sas fichas del Editor de menú emergente.

Crearunmenúemergentesencillo

Seleccione cualquier zona interactiva o división que corresponda al área de acti-vación del menú emergente.

Realice uno de los siguientes procedimientos para abrir el Editor de menú emergente:

Dirigase al menú Modificar, opción menú emergente y seleccione aña-dir menú emergente.

Dé clic en el tirador de comportamiento de la división y elija añadir menú emergente.

Si la ficha Contenido no está visible, dé clic en ella.

Dé clic en el botón añadir menú para añadir un elemento vacío de menú. Se pueden añadir, eliminar y editar celdas en cualquier momento.

Dé doble clic en cada celda e introduzca o elija la información adecuada:

texto especifica el texto para el elemento de menú.

vínculo determina la URL del elemento de menú. Puede introducir un vín-culo personal o elegir uno del menú emergente Vínculo, si hubiera alguno disponible. Si ha introducido direcciones URL para el resto de los objetos Web del documento, éstas aparecerán en el menú emergente Vínculo.

destino designa el elemento destino de la URL. Puede introducir un ele-mento destino personal o elegir un valor en el menú emergente Destino.

Al añadir texto en la última línea de la ventana se agrega una línea vacía debajo

1.

2.

3.

4.

�.

Ilustración: Creación de un menú emergente mediante el Editor.



de la misma. Para ir de una celda activa a otra celda pulse la tecla de tabulador para desplazarse por las distintas celdas y las teclas Flecha arriba y abajo para desplazarse verticalmente.

Repita los pasos 4 y 5 hasta añadir todos los elementos de menú.

Si lo prefiere, para eliminar un elemento de menú, resáltelo y haga clic en el botón suprimir menú.


Dé clic en siguiente para ir hasta la ficha aspecto o elija otra ficha para continuar con la creación del menú emergente.

Cree entradas de submenú para el menú emergente.

Dé clic en listo para finalizar el menú emergente y cerrar el Editor de menú emergente.

En el área de trabajo, la zona interactiva o división utilizada para crear el menú emergente muestra una línea azul de comportamiento unida a un contorno del nivel superior del menú emergente. Para visualizar el menú emergente en un navegador pulse F12. Las vistas previas del área de trabajo de Fireworks no muestran los menús emergentes.

Creación de submenús en un menú emergentePara crear submenús emergentes que aparecerán cuando se mueva el puntero o se haga clic sobre el elemento de menú emergente correspondiente, utilizamos los botones sangrar menú y menú con sangría inversa de la ficha Contenido del Editor de menú emergente. Podemos crear tantos niveles de submenús como desee.

Crearunsubmenúemergente

Nos dirigimos a la ficha Contenido del Editor de menú emergente y cree ele-mentos de menú. Cree los elementos de menú que desee utilizar para el submenú, colóquelos directamente bajo el elemento de menú que activará el submenú.

Dé clic para resaltar un elemento de menú emergente que desee convertir en elemento de submenú.

Dé clic en el botón sangrar menú para convertir el elemento resaltado en una opción de submenú del elemento que le sigue por arriba en la lista.

Para añadir el elemento siguiente del submenú, resáltelo y haga clic en el botón sangrar menú.

Todos los elementos que están sangrados de forma contigua en el mismo nivel componen un submenú emergente.

�.

�.

8.

1.

2.

3.

4.



De forma opcional, resalte un elemento de menú o submenú y haga clic en añadir menú para insertar un nuevo elemento justo debajo del elemento resaltado.

Siga uno de estos procedimientos:

Dé clic en siguiente para ir hasta la siguiente ficha o elija otra ficha para continuar con la creación del menú emergente.

Dé clic en listo para cerrar el Editor de menú emergente.

diseño del aspecto de un menú emergentePara que nuestro menú emergente tenga el aspecto deseado se le puede asig-nar formato al texto, apli-car estilos de gráfico para los estados sobre y arri-ba y elegir la orientación vertical u horizontal en la ficha aspecto del Editor de menú emergente.

Orientación de unmenúemergente

Abra el menú emer-gente que desee en el Editor de menú emergente y dé clic en la ficha aspecto.

Seleccione vertical u horizontal en el menú emergente orientación.

EstablecersiunmenúemergentesebasaenHTMLoenimágenes

Abra el menú emergente que desee en el Editor de menú emergente y dé clic en la ficha aspecto.

Elija una opción de Celdas:

html define el aspecto del menú utilizando sólo códigos HTML. Esta configuración produce páginas con el menor tamaño posible.

Imagen le permite seleccionar un estilo de imagen que se utilizará como fondo de celda. Esta configuración produce páginas de mayor tamaño.

Puede añadir opciones a esta selección de estilos creando estilos persona-lizados de menús emergentes. Para más información, consulte Adición de estilos de menú emergente.

�.

�.

1.

2.

1.

2.

Ilustración: aspecto de un menú emergente.



Asignarformatosaltextodelmenúemergenteactual

Abra el menú emergente que desee en el Editor de menú emergente y dé clic en la ficha aspecto.

Elija un tamaño preestablecido en el menú emergente tamaño o introduzca un valor en el cuadro de texto tamaño.

Si en la ficha avanzado del Editor de menú emergente se establece la anchura y altura de celda en automático, el tamaño del texto determina el tamaño de los gráficos asociados con el elemento de menú.

Elija un grupo de fuentes del sistema en el menú emergente Fuentes o introduzca el nombre de una fuente. Tenga cuidado al escoger una fuente. Si los usuarios que vean su página Web no tienen instalada la fuente que ha elegido, se utilizará una fuente de sustitución en su navegador Web.

Si desea puede dar clic en un botón de estilo de texto como negrita o cursiva.

Dé clic en un botón de justificación para alinear el texto por la izquierda, la de-recha o centrarlo.

Elija un color de texto en el cuadro Color de texto.

Establecerelaspectodelasceldasdemenú

Abra el menú emergente que desee en el Editor de menú emergente y haga clic en la ficha aspecto.

Elija los colores del texto y de la celda para cada estado.

Si ha seleccionado Imagen como tipo de celda, elija un estilo gráfico para cada estado.


Dé clic en siguiente para ir hasta la ficha avanzado o elija otra ficha para continuar con la creación del menú emergente.


adición de estilos de menú emergentePodemos agregar estilos de celda personales en el Editor de menú emergente. Los estilos de celda personalizados están disponibles junto con las opciones preestablecidas en la ficha aspecto. Cuando elegimos la opción Imagen como tipo de celda (las celdas de los menús emergentes utilizan fondos gráficos).

1.

2.

3.

4.

�.

�.

1.

2.

3.

4.



AñadirunestilodeceldapersonalizadoalEditordemenúemergente

Seleccione un objeto y aplique cualquier combinación de trazos, rellenos, texturas y filtros automáticos, guárdelo como un estilo utilizando el panel Estilos.

Seleccione el nuevo estilo en el panel Estilos, después, elija Exportar estilo en el menú de opciones de dicho panel.

Abra la carpeta nav menu del disco duro, cambie el nombre del estilo si lo desea y haga clic en guardar.

Definición de las propiedades avanzadas de menú emergenteUtilizando la ficha avanzado del Editor de menú emergente podemos controlar opcio-nes adicionales como el tamaño de celda, relleno y espaciado; el sangrado del texto; el tiempo de visualización del menú y la anchura del borde, color, sombra y resaltado.

Definir las propiedades de celda avanzadas del menú emergente actual

Abra el menú emergente del obejto Web que desee en el Editor de menú emer-gente y haga clic en la ficha avanzado.

Seleccione una restricción de anchura o de altura en el menú emergente auto-mático/píxeles:

automático restringe la altura de la celda al tamaño del texto definido en la ficha aspecto del Editor de menú emergente y la anchura al del ele-mento de menú con el texto de mayor longitud.

píxeles permite introducir medidas específicas en píxeles en los cuadros de texto anchura de celda y altura de celda.

Ingrese un valor en el cuadro de texto Relleno celda para fijar la distancia que habrá entre el texto del menú emergente y el borde de la celda.

Ingrese un valor en el cuadro de texto Espacio entre celdas para asignar el espacio que habrá entre las celdas de menú.

Ingrese un valor en el cuadro de texto sangría de texto para definir el sangrado del texto del menú emergente.

Introduzca un valor en el cuadro de texto demora de menú para asignar los milisegundos que el menú permanecerá visible luego que el puntero se aleje del botón.

Especifique las propiedades del borde de un menú emergente:

mostrar bordes permite mostrar u ocultar los bordes de un menú emer-gente.

1.

2.

3.

1.

2.

3.

4.

�.

�.

�.



ancho del borde, nos permite definir la anchura del borde del menú emer-gente.

Color del borde, sombra y Resaltado permite modificar el color del bor-de de los menús emergentes.

Muchas de estas opciones están desactivadas si se ha seleccionado el tipo de celda Imagen en la ficha aspecto.

Realice uno de los siguientes procedimientos para finalizar el menú emergente:

Dé clic en el botón siguiente para ir hasta la ficha posición o elija otra ficha para continuar con la creación del menú emergente dentro del respec-tivo Editor de menú emergente.


posición de los menús y submenús emergentesEmpleando la ficha posición del Editor de menú emergente podemos especificar la posición de un menú emergente. También es posible situar un menú emergente de ni-vel superior arrastrando su contorno en el área de trabajo cuando la capa de Web está visible.

Definir la posición de un menú emergente utilizando el Editor de menú emergente

Abra el menú emergente que desee en el Editor de menú emergente y haga clic en la ficha posición.

Siga uno de estos procedimientos para definir la posición del menú:

8.

1.

2.

Ilustración: propiedades avanzadas del menú emergente.



Dé clic en un botón posición del menú para situar el menú emergente en relación con la división que lo activa.

Ingrese las coordenadas x e y. Las coordenadas 0,0 permiten alinear la esquina superior izquierda del menú emergente con la esquina superior izquierda de la división o zona interactiva que lo activa.


Si tiene submenús, sitúelos tal como se describe en el procedimiento si-guiente.

Dé clic en el botón atrás para modificar las propiedades de otras fichas.


Definir la posición de un menú emergente arrastrándolo

Realice uno de los siguientes procedimientos para ver a la capa de Web:

Dé clic en el botón mostrar divisiones y zonas interactivas de la sección Web del panel herramientas.

Dé clic en la columna del ojo del panel Capas.

Con la heramienta puntero seleccione el menú emergente.

Arrastre el contorno de menú emergente hacia otra posición del lienzo.

Edición de menús emergentesUitlizando el Editor de menú emergente podemos editar o actualizar el contenido de un menú emergente, reorganizar sus elementos y cambiar otras propiedades en cual-quiera de las cuatro fichas.

3.

1.

2.

3.

Ilustración: posición de un menú emergente.



Editarunmenúemergenteeneleditordemenúsemergentes

Si fuera necesario, siga uno de los procedimientos siguientes para ver a la capa de Web:

Dé clic en el botón mostrar divisiones y zonas interactivas del panel herramientas.

Dé clic en la columna del ojo del panel Capas.

Seleccione la división a la que el menú emergente se encuentra asociado o rela-cionado.

En el espacio trabajo, dé doble clic en el contorno azul del menú emergente.

Se abre el Editor de menú emergente mostrando las respectivas entradas del menú emergente.

Realice las modificaciones que desee en cualquiera de las cuatro fichas y haga clic en listo.

Desplazarunaentradaenelmenúemergente

Abra el menú emergente que desee en el Editor de menú emergente y dé clic en la ficha Contenido.

Arrastre la entrada de menú hacia arriba, hacia bajo o hasta una posición distinta en la lista.

Dé clic en listo.

Exportación de menús emergentesmacromedia Fireworks 8 crea todo el código Css o javascript necesario para ver menús emergentes en navegadores Web.

Si elegimos emplear código Css para sus menús emergentes, se exporta a html un documento Fireworks con menús emergentes utilizando código Css. Puede escribirse el código Css en un archivo .css externo y exportarlo junto con un archivo mm_css_menu.js a la misma ubicación que el archivo html.

Si elegimos no emplear Css para los menús emergentes, se utilizará javascript. En ese sentido, se exporta a html un documento Fireworks que contiene menús emer-gentes y un archivo javascript denominado mm_menu.js en la misma ubicación que el archivo html.

Cuando transfiera los archivos, el archivo mm_css_menu.js (o mm_menu.js, para javascript) debe transferirse al mismo directorio que la página Web que contenga al menú emergente.

1.

2.

3.

4.

1.

2.

3.




generación de animacionesCon macromedia Fireworks 8 pode-mos crear animaciones como publici-dad en los titulares, logotipos, viñetas y objetos en movimiento, lo que le da un aspecto más interesante y sofisticado a los sitios Web. Por ejemplo, podemos crear que el logotipo, slogan y otros ele-mentos de la imagen institucional de su empresa se desplacen por la página.

La mejor forma de crear animaciones en Fireworks es creando símbolos y modifican-do sus propiedades en el tiempo de animación para crear la ilusión del movimiento. Un símbolo es como un actor del que se registran sus movimientos. La acción de cada símbolo es almacenada en un fotograma. La animación se consigue al reproducir todos los fotogramas en secuencia.

Podemos emplear distintas configuraciones al símbolo para cambiar de forma gradual el contenido de los fotogramas sucesivos. Es posible crear un símbolo que se mueva por el lienzo, que aparezca o desaparezca de forma paulatina, que aumente o disminuya de tamaño, que gire, etc. Puesto que un archivo puede contener varios símbolos, se pueden crear animaciones complejas en las que sucedan varias acciones a la vez.

AnimaciónEnestecapítulo

Aprenderá a generar y editar una animación.



Generar una animación.

Reconocer los elementos de una animación.

Insertar una animación en una página Web.


Capítulo XI

Mediante el panel optimizar podemos establecer las opciones de optimización y ex-portación para controlar el modo de creación del archivo. Fireworks 8 puede exportar animaciones en archivos con formato gIF animado o Flash sWF. También puede importar directamente las animaciones de Fireworks en macromedia Flash para modificarlas.

Creación de una animaciónEn Fireworks, pode-mos crear animaciones asignando propiedades a objetos llamados sím-bolos de animación. La animación de símbolos se divide en fotogra-mas, que contienen las imágenes y objetos que conforman cada movi-meinto de la respectiva animación. Una anima-ción puede contener más de un símbolo y cada uno de ellos puede reali-zar una acción diferente. Los distintos símbolos pueden tener un número diferente de fotogramas. La animación finaliza cuando acaba la acción de todos los símbolos.

CrearunaanimaciónutilizandosímbolosenFireworks

Cree un símbolo de animación; puede crearlo desde cero o convertir un objeto existente en un símbolo.

Utilice el Inspector de propiedades o dirigase al menú Modificar, opción ani-mación y seleccionamos animar selección, ingresamos los valores del símbolo. Podemos asignar lo siguiente:

El grado y la dirección de movimiento.

La escala.

La opacidad (aparición o desaparición paulatina).

El ángulo y la dirección de rotación.

Las opciones para el grado y la dirección de movimiento sólo se encuentran en el cuadro de diálogo animar.

Utilice los controles demora de fotogramas en el panel Fotogramas para esta-

1.

2.

3.

Ilustración: Generación y edición de una animación.

Animación


blecer la velocidad de movimiento de la animación.

Emplee el panel optimizar y optimice el documento como un archivo gIF animado.

Puede exportar el documento como un archivo gIF animado o sWF, o guardar-lo como png de Fireworks e importarlo después en macromedia Flash para modificarlo.

uso de símbolos de animaciónUn símbolo de animación puede ser cualquier objeto generado o importado incluso pueden guardarse varios en un único archivo. Cada símbolo tiene sus propiedades par-ticulares y su animación es independiente de los otros. Se pueden crear símbolos que se desplacen por la pantalla mientras otros desaparecen o disminuyen de tamaño.

Creación de símbolos de animaciónCuando terminamos de crear un símbolo de animación, podemos establecer propiedades que determinen el número de fotogramas de la animación y el tipo de acción, como cambio de escala o rotación. De forma predeterminada, el símbolo de animación nuevo tiene cinco fotogramas, cada uno con una demora de 0,07 segundos.

Crearunsímbolodeanimación

Nos dirigimos al menú Edición, opción Insertar y seleccione nuevo símbolo.

En el cuadro de diálogo propiedades de símbolo, ingrese un nombre para el símbolo nuevo.

Seleccione animación y dé clic en aceptar.

En el editor de símbolos, utilice las herramientas de texto o de dibujo para crear un objeto nuevo.

Podemos dibujar objetos vectoriales o de mapas de bits.

Cierre la ventana del editor de símbolos.

Fireworks guarda el símbolo en la biblioteca y coloca una copia en el centro del documento.

Se pueden añadir fotogramas nuevos al símbolo con el control deslizante Fotogramas del Inspector de propiedades.

Dirigase al menú ventana y seleccione propiedades para abrir el Inspector de pro-piedades, si es que no está abierto.

4.

�.

1.

2.

3.

4.

�.

Capítulo XI : Animación


Convertirunobjetoenunsímbolodeanimación

Seleccionamos el objeto.

Dirigase al menú Modificar, animación y seleccione animar selección.

Ingrese el valor deseado en el cuadro de diálogo. Aparecen controles de animación en el recuadro delimitador del objeto y se añade una copia a la biblioteca

Edición de símbolos de animaciónPodemos modificar las propiedades de los símbolos de animación para que su sitio Web se muestre más impactante. Se pueden cambiar varias de las propiedades de un símbolo, desde la velocidad de animación a la opacidad y rotación. Modificando estas propiedades podemos conseguir que un símbolo gire, acelere, aparezca o desaparezca de forma gradual, o cualquier combinación de todo lo anterior.

Cambio de las propiedades de animaciónLas propiedades de la animación pueden cambiarse a través del cuadro de diálogo animar o desde el Inspector de propiedades. Es posible editar cualquiera de las propiedades siguientes de un símbolo de animación:

Fotogramas, nos indica el número de fotogramas que deben incluirse en la ani-mación. Aunque el control deslizante establece un máximo de 250, en el cuadro de texto Fotogramas puede ingresar cualquier número. El valor por defecto es �.

mover, se refiere a la distancia en píxeles que debe recorrer cada objeto. Esta opción sólo está disponible en el cuadro de diálogo animar. Aunque el valor predeterminado es 72, en el cuadro de texto mover puede introducir cualquier número. El movimiento es lineal y no existen fotogramas clave a diferencia de macromedia Flash y director.

dirección, es la dirección, en grados, en la que se debe mover el objeto. El rango de valores es de 0 a 360º, sólo está disponible en el cuadro de diálogo animar. También puede modificar los valores de mover y dirección si arrastra los tira-dores de animación del objeto.

Escala, es la transformación de tamaño del objeto, en porcentajes, desde el prin-cipio hasta el final. Aunque el valor predeterminado es 100%, en el cuadro de texto Escala puede introducir cualquier número. Para escalar un objeto de 0 al 100%, el objeto original debe ser muy pequeño; es recomendable emplear objetos vectoriales.

opacidad, es el grado de aparición o desaparición paulatina de principio a final. Los valores están comprendidos entre 0 a 100, el valor predeterminado es 100%. Para crear un fundido se requieren dos instancias del mismo símbolo: una para que aparezca y otra para que desaparezca.

1.

2.

3.

1.

2.

3.

4.

5.

Animación


Rotación, es el giro del símbolo, en grados, de principio a final. El rango de va-lores es de 0 a 360º. Se pueden introducir valores más altos para realizar más de una rotación. El valor predeterminado es 0º. Rotar hacia la derecha y rotar hacia la izquierda son las direcciones en que rota el objeto. A la derecha equivale al sentido de las agujas del reloj y a la izquierda equivale al sentido contrario a las agujas del reloj.

Cambiarlaspropiedadesdesímbolodeanimación

Seleccione un símbolo de animación.

Nos dirigimos al menú Modificar, opción animación y seleccione Configuración para abrir el cuadro de diálogo animar o menú ventana opción propiedades para abrir el Inspector de propiedades, si es que no está abierto.

Realice las modificaciones que desee cambiando las propiedades.

Dé clic en aceptar para aceptar los cambios.

Eliminación de animacionesEs posible eliminar animaciones al suprimir el símbolo de animación de la biblioteca o al eliminar la animación del símbolo.

Eliminarunsímbolodelabiblioteca

En el panel biblioteca, seleccione el símbolo de animación que desea eliminar.

Arrastre el símbolo hasta el icono de Eliminar símbolo (papelera) .

Eliminarlaanimacióndeunsímbolodeanimaciónseleccionado

Nos dirigimos al menú Modificar, opción animación y seleccione Eliminar animación.

El símbolo automáticamente se convierte en símbolo gráfico y deja de estar ani-mado. Si desea más adelante se vuelva a convertirlo en animación, el símbolo recupera la configuración anterior.

Edición de imágenes de símboloPodemos cambiar la imagen gráfica en la cuál se basa un símbolo, así como sus pro-piedades. Las imágenes de símbolo se modifican en el Editor de símbolos. El Editor de símbolos permite utilizar herramientas de dibujo, texto y color para modificar el gráfico. Mientras trabaja en el Editor de símbolos sólo podemos modificar el símbolo seleccionado. El símbolo es un elemento que se lamacena en la biblioteca. Por lo tanto, si modificamos el aspecto de una de las instancias, el resto también cambia.

6.

1.

2.

3.

4.

1.

2.

1.

2.



Cambiar los atributos gráficos de un símbolo seleccionado

Realice uno de los siguientes procedimientos para abrir el Editor de símbolos:

Dé doble clic en el objeto de símbolo.

Nos dirigimos al menú Modificar, opción símbolo y seleccione Editar símbolo.

Dé clic en el botón Edición del cuadro de diálogo animar.

Modifique el símbolo de animación y cambie el texto, trazo, relleno y efectos.

Cierre el Editor de símbolos.

Edición de trazados de movimiento de símbolosAl seleccionar un símbolo de animación, se meustra un recuadro delimitador y un trazado de movimiento que nos indica la dirección de desplazamiento del símbolo.El punto verde del trazado de movimiento indica el punto de partida y el rojo el final. Los puntos azules representan los fotogramas. Por ejemplo, un símbolo con cinco fo-togramas debe contar con un punto verde, tres puntos azules y uno rojo en su trazado. La posición del objeto en el trazado indica el fotograma actual.Si el objeto aparece en el tercer punto, el fotograma actual es el 3.

Cambiarelmovimientooladirección

Arrastre alguno de los tiradores de inicio o de final de animación del símbolo a una posición nueva. El punto verde nos indica el punto de partida y el rojo el punto final.

Si desea restringir la dirección de movimiento a incrementos de 45º, mantenga pulsada la tecla mayús mientras arrastra.

utilización de fotogramasLas animaciones las generamos partir de la creación de varios fotogramas. Los objetos, textos o imágenes de cada uno de ellos puede verse en el panel Fotogramas. El panel Fotogramas nos permite crear y organizar los fotogramas. Podemos asignar un nombre a cada fotograma, reorganizarlos, establecer de forma manual los tiempos de animación y mover objetos de un fotograma a otro.

Configuración de la demora de fotogramasEl tiempo de demora de fotogramas nos indica el tiempo durante el que se va a mostrar cada fotograma. Se especifica en centésimas de segundo. Por ejemplo, con el valor 100 el fotograma se muestra durante 1 segundo, mientras que con el valor 300 se muestra durante tres segundos.

1.

2.

3.

1.

Animación


Establecer el valor de demora de fotogramas:

Seleccione uno o varios fotogramas:

Si desea seleccionar un rango contiguo de fotogramas, mantenga pulsada la tecla mayús y dé clic en los nombres del primer y último fotograma.

Si desea seleccionar un rango no contiguo de fotogramas, mantenga pulsa-da la tecla Control y dé clic en cada nombre de fotograma.


Seleccione propiedades del menú de opciones del panel Fotogramas.

Dé doble clic en la columna demora de fotogramas.

Aparece la ventana emergente propiedades de fotograma.

Ingrese un valor para la demora de fotogramas.

Presione Enter o haga clic fuera del panel para cerrar la ventana emergente.

mostrar u ocultar fotogramas durante la reproducciónPodemos mostrar u ocultar fotogramas durante la reproducción. Si se oculta un foto-grama, éste no aparece durante la reproducción y tampoco se exportará.

Mostraruocultarunfotograma


Seleccione propiedades del menú de opciones del panel Fotogramas.

Dé doble clic en la columna demora de fotogramas.

Desactive la opción Incluir al exportar.

Aparece una X roja en lugar del tiempo de demora de fotograma.

Pulse Enter o clic fuera de la ventana emergente propiedades de fotograma.

asignación de nombres a fotogramas de animaciónConforme se configura una animación, Fireworks crea el número de fotogramas adecuado y los muestra en el panel Fotogramas. Por defecto, a los fotogramas se les asigna el nombre Fotograma 1, Fotograma 2, etc. Cuando se mueve un fotograma en el panel, Fireworks modifica el nombre del resto para reflejar el cambio. Es recomen-dable colocarle un nombre personalizado a los fotogramas para facilitar la referencia, edición y seguimiento.

1.

2.

3.

4.

1.

2.

3.

4.



Cambiarelnombredeunfotograma

En el panel Fotogramas, dé doble clic en el nombre del fotograma.

En el cuadro de texto que aparece, digite un nombre nuevo y pulse Enter.

adición, desplazamiento, copia y eliminación de fotogramasEn el panel Fotogramas podemos agregar, copiar y eliminar fotogramas así como también cambiar su orden.

Añadirunfotogramanuevo

Dé clic en el botón Fotograma nuevo/duplicado en la parte inferior del panel Fotogramas. Automaticamente se crea un nuevo fotograma y se ubica debajo del fotograma actual.

Añadirfotogramasenunpuntoconcretodelasecuencia

Seleccione añadir fotogramas en el menú de opciones del panel Fotogramas.

Ingrese el número de fotogramas que desee añadir.

Defina el punto de inserción: antes del fotograma actual, después del mismo, o al principio o final de la secuencia. Luego, dé clic en aceptar.

Copiarunfotograma

Arrastre un fotograma existente hacia el botón Fotograma nuevo/duplicado de la parte inferior del panel Fotogramas.

Copiarunfotogramaseleccionadoycolocarloenunasecuencia

Seleccione duplicar fotograma del menú de opciones del panel Fotogramas.

Ingrese el número de duplicados, el lugar dónde deben insertarse y acepte.

Volveraordenarlosfotogramas

Arrástrelos uno a uno hasta una posición distinta de la lista.

Eliminarelfotogramaseleccionado


Dé clic en el botón Eliminar fotograma en el panel Fotogramas.

1.

2.

1.

2.

3.

1.

2.

Animación


Arrastre el fotograma hacia el botón suprimir fotograma.

desplazamiento de objetos seleccionados en el panel FotogramasPodemos emplear el panel Fotogramas para mover objetos de un fotograma a otro. Los objetos que aparecen en un único fotograma dan la sensación de desvanecerse cuando se reproduce la animación. Puede mover objetos para que aparezcan y desaparezcan en distintos puntos de la película.

Moverunobjetoseleccionadoaunfotogramadistinto

En el panel Fotogramas, arrastre el indicador de selección (el cuadrado azul a la derecha del tiempo de demora) hasta el fotograma nuevo.

utilización compartida de capas entre fotogramasPodemos dividir un documento de Fireworks en capas los cuáles so comportan como planos velados, como si se tratase de hojas de papel vegetal superpuestas. En las ani-maciones, utilizamos las capas para organizar los objetos que forman parte del deco-rado o del fondo de la animación, dichas capas nos proporcionan fácilidad para poder editar o modificar objetos en una capa de modo que no interfieran con el resto de la animación.

Compartirunacapaentrevariosfotogramas

Dé doble clic en la capa.

Seleccione Compartir en fotogramas. El contenido de una capa compartida aparece en cada fotograma.

Anularlaposibilidaddequevariosfotogramascompartanunacapa

Dé doble clic en la capa compartida.

Desactive Compartir en fotogramas.

Seleccione una de las siguientes opciones para copiar objetos en fotogramas:

Deje o ubique el contenido de la capa compartida sólo en el fotograma actual.

Copie el contenido de la capa en todos los fotogramas.

Visualización de objetos dentro de un fotograma específicoSe pueden visualizar fácilmente los objetos dentro de un fotograma específico utilizando el menú emergente Fotograma del panel Capas.

1.

2.

1.

2.

3.



Ver objetos dentro de un fotograma específico

Seleccione el fotograma que desee en el menú emergente Fotograma que se encuentra en la parte inferior del panel Capas. Todos los objetos dentro del foto-grama seleccionado se enumeran en el panel Capas y aparecen en el lienzo.

utilización de papel cebollaEl término papel cebolla procede de una técnica de animación tradicional que consiste en utilizar papel de calcar fino y translúcido para visualizar las diversas secuencias ani-madas. Cuando activamos el papel cebolla, los objetos de los fotogramas situados delante o detrás del actual aparecen atenuados, para poder distinguirlos los demás objetos.

Ajustarelnúmerodefotogramasvisiblesantesydespuésdelactual

Dé clic en el botón papel cebolla del panel Fotogramas.

Elija una opción de visualización:

sin papel cebolla, desactiva el papel cebolla; sólo se muestra el contenido del fotograma actual.

mostrar fotograma siguiente, muestra el contenido del fotograma actual y también el siguiente.

anterior y posterior, muestra el contenido de los fotogramas situados delante y detrás del actual.

mostrar todos los fotogramas, muestra el contenido de todos los fotogramas.

personalizar, establece un número personalizado de fotogramas y controla la opacidad del papel cebolla.

Editar varios fotogramas, permite seleccionar y modificar todos los objetos visibles.

InterpolaciónInterpolación es una denominación de la animación tradicional que representa el proceso por el que un animador jefe dibuja sólo los fotogramas clave (fotogramas que contienen cambios de cierta importancia) mientras que los asistentes dibujan los foto-gramas intermedios.

Interpolarinstancias

Seleccione dos o más instancias del mismo símbolo gráfico en el lienzo. No se-leccione instancias de símbolos diferentes.

1.

2.

1.

Animación


Dirigase al menú Modificar, opción símbolo y seleccione Entre instancias.

En el cuadro de diálogo Entre instancias, introduzca el número de pasos de interpolación que se insertan entre el par original.

Para distribuir los objetos interpolados en fotogramas independientes, elija dis-tribuir en fotogramas y haga clic en aceptar.

presentación preliminar de una animaciónPodemos observar una presentación preliminar de una animación mientras se trabaja, para apreciar el resultado de la animación. También es posible visualizar una presenta-ción preliminar de una animación después de la optimización y ver el aspecto final en un navegador Web para comprobar la animación.

Ver una presentación preliminar de una animación en el espacio detrabajo

Utilice los controles de fotogramas que aparecen en la parte inferior de la venta-na del documento.

Debe tenerse en cuenta lo siguiente cuando vea una presentación preliminar de una animación:

Para establecer la duración de cada fotograma en la ventana del documen-to, ingrese los valores de demora de fotogramas en el panel Fotogramas.

Los fotogramas que hans sido excluidos de la exportación no aparecen en la presentación preliminar.

En la ventana de vista original, la vista previa de la animación presenta las imágenes con resolución completa, en lugar de utilizar la presentación optimizada del archivo exportado.

VerunapresentaciónpreliminardelaanimaciónenlaVistaprevia

Dé clic en el botón vista previa en el margen superior izquierdo de la ventana del documento.

Utilice los controles de fotogramas. No es recomendable ver presentaciones pre-liminares de animaciones en las vistas 2 copias ni 4 copias.

Exportación de la animaciónCuando ya se tienen definidos los símbolos y los fotogramas que componen la secuen-cia animada, ya podemos exportar el archivo como una animación. Antes de exportar archivos deben configurarse una serie de valores para simplificar la carga de la ani-mación y facilitar su reproducción. Puede establecer valores de reproducción, como

2.

3.

4.

1.

2.



reproducciones indefinidas y transparencias, y utilizar la optimización para reducir el tamaño del archivo exportado y facilitar su descarga.

Configuración de animación repetidaEl valor de reproducción indefinida, en el panel Fotogramas, nos permite determinar el número de veces que se repite la animación. Con esta función, los fotogramas se repiten una y otra vez, lo que permite minimizar el número de ellos necesario para crear la animación.

Establecerlarepeticióndelaanimaciónseleccionada

Dirigase al menú ventana y seleccione Fotogramas.

Dé clic en el botón bucle de animación gIF de la parte inferior del panel Fo-togramas.

Elija el número de repeticiones de la animación que deben seguir a la primera.

Configuración de transparenciaAl momento de detallar el proceso de optimización, se pueden definir uno o más colores de un archivo gIF animado para que se muestren transparentes en el navegador Web. Resulta útil cuando se quiere que una imagen o el color de fondo de una página Web se vea en la animación.

Mostrar un color como transparente en un navegador Web:

Dirigase al menú ventana y seleccione optimizar.

En el menú emergente transparencia del panel optimizar, seleccione trans-parencia de índice o transparencia alfa.

Utilice las herramientas de transparencia del panel optimizar para seleccionar los colores transparentes.

optimización de una animaciónOptimizar nos permite comprimir el archivo hasta el tamaño más pequeño posible para permitir una carga y exportación rápida y acelerar el tiempo de descarga en el sitio Web.

Optimizarunaanimación

Si piensa exportar la animación como un archivo gIF animado, elija gIF ani-mado como formato de exportación en el panel optimizar.

1.

2.

3.

1.

2.

3.

1.

Animación


Si el panel no está visible, dirigase al emnú ventana y seleccione optimizar.

Establezca las opciones de paleta, trama o transparencia.

En el panel Fotogramas, establezca la demora de fotogramas.

Formatos de exportación de animaciónUna vez creada y optimizada una animación estará lista para ser exportarla. Los archivos gIF animados ofrecen los mejores resultados en animaciones tipo ilustración o dibujos animados. Puede exportar la animación como un archivo Flash sWF, e importarla en macromedia Flash. O bien, puede omitir este paso e importar el archivo original png de Fireworks directamente en Flash.

uso de animaciones existentesPodemos importar un archivo gIF animado yu que forme parte de una animación de Fireworks. Existen dos maneras de utilizar el archivo: puede importar en archivo gIF en un archivo de Fireworks existente o puede abrirlo como un archivo nuevo. Al importar un archivo gIF animado, Fireworks lo convierte en símbolo de animación y lo coloca en el fotograma seleccionado. Si el número de fotogramas de la animación es superior a los existentes en la película actual, pueden añadirse más fotogramas de forma automática.

ImportarunarchivoGIFanimado

Dirigase ale menú archivo y seleccione Importar.

Ubique el archivo y dé clic en abrir.

Dé clic en la opción sí para añadir nuevos fotogramas en la animación.

uso de varios archivos como una única animaciónPodemos crear una animación a partir de un grupo de archivos de imagen. Por ejemplo, para crear un anuncio basado en varios gráficos existente, abra cada gráfico y sitúelo en un fotograma separado del mismo documento.

Abrirvariosarchivoscomoanimación

Dirigase al menú archivo y seleccione abrir.

Pulse la tecla mayús y dé clic para seleccionar varios archivos.

Seleccione abrir como animación y dé clic en aceptar.

2.

3.

1.

2.

3.

1.

2.

3.



PROPIEDAD INTELECTUAL DEL SENATI PROHIBIDA SU REPRODUCCIÓN Y VENTA

SIN LA AUTORIZACIÓN CORRESPONDIENTE

AÑO DE EDICIÓN 2006 CODIGO DEL MATERIAL MP0602

Macro Media Fireworks 8

Documents

Transcript of Macro Media Fireworks 8