FWCS5 Es PDF

Gua de Aprendizaje INICIO | CRDITOS
Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
ndice de tutoriales
0. Introduccin
1. Creacin de un logotipo
2. Creacin de una ilustracin
3. Trabajar con ilustraciones y grficos importados
4. Realizacin de un fotomontaje
5. Realizacin del diseo de la interface de una web
6. Creacin y remaquetacin de un banner
7. Creacin de un grfico interactivo y un minisite
8. Creacin de un portfolio
9. Creacin de prototipos para aplicaciones multimedia

Introduccin
La presente Gua de Aprendizaje tiene como objetivo adquirir el conocimiento del entorno de
INTRODUCCIN
produccin de Fireworks y sus mltiples alternativas de creacin grfica.
OBJETIVOS
Consta de una serie de tutoriales que incluyen explicaciones tericas, ejemplos prcticos y
consejos para que el estudiante aplique los conocimientos adquiridos a casos concretos y se
familiarice con el proceso completo de produccin en Fireworks.
Al finalizar la Gua de Aprendizaje el estudiante ser capaz de crear y desarrollar sus propios
proyectos de creacin grfica, a la vez que habr adquirido los conocimientos necesarios para
profundizar en el aprendizaje de esta herramienta.
Esta Gua de Aprendizaje est basada en Adobe Fireworks CS5, versin Windows,
castellano.
Objetivos
Introducir el conocimiento del entorno de trabajo de Fireworks.

INTRODUCCIN
Conocer las herramientas de creacin de formas bsicas y manipulacin de los elementos. OBJETIVOS
Aprendizaje de las herramientas vectoriales y en el trabajo de mapas de bits
Trabajar conjuntamente con Fireworks y otros programas vectoriales.
Aprender el uso de las herramientas de retoque
Practicar la optimizacin de documentos y la exportacin del archivo optimizado
Compaginar el uso conjunto de Vectores y Pxeles
Practicar el uso de smbolos y la creacin de grficos animados
Practicar la realizacin de procesos automticos
Practicar la interactividad en Fireworks
Exportar archivos de imgen y HTML
Prctica del uso de Fireworks como herramenta de prototipado

Tutorial 1. Creacin de un logotipo

Desarrollo del tutorial: paso 1 de 18
Este primer tutorial consiste en la realizacin
de un logotipo. La realizacin de esta
prctica nos permitir conocer los
fundamentos bsicos del programa.
1
En la imagen de la derecha observamos el

entorno de trabajo de Fireworks CS5 tal 2
como aparece por defecto cuando abrimos 4
por primera vez el programa. Como podemos
observar, est organizado y homogeneizado
con las interface de Adobe. Los usuarios de 3
otras aplicaciones de Adobe podrn
reconocer claramente estos elementos
comunes.
Al igual que la mayora de programas de

tratamiento de imagen, consta de una barra
de mens, una paleta de herramientas, una
serie de paneles e inspectores, y la ventana
5
del documento.

1 La barra de mens, en la parte superior de la pantalla, recoge todas las funciones posibles que permite el programa. Debido a la gran variedad
de opciones, estas mismas tambin estn separadas segn su funcin en paneles e inspectores.
2 La paleta de herramientas contiene todas las herramientas necesarias para la creacin y edicin grfica. En total hay 55 herramientas, algunas
de las cuales estn agrupadas. Un grupo de herramientas se identifica por un tringulo negro en el borde inferior derecho de la herramienta.
Para seleccionar una herramienta de un grupo de herramientas basta con dejar pulsado el ratn encima del icono para que se desplieguen el
resto de herramientas. A medida de que avancemos en la Gua de Aprendizaje veremos sus diferentes usos.
3 Este es el espacio dnde se sitan los documentos abiertos.
4 Los paneles e inspectores renen todas las opciones separadas segn su funcin. Estos paneles pueden abrirse, cerrarse y ordenarse,
personalizndolos segn los requerimientos de cada usuario. Los paneles permiten controlar las caractersticas de la herramienta seleccionada
y los inspectores controlan las caractersticas de los objetos seleccionados. Para abrir un panel o inspector basta con seleccionarlo desde el
men Ventana de la barra de mens. Estos paneles e inspectores por defecto estn ordenados en grupos, pero podemos separarlos y
ordenarlos de la manera que nos sea ms cmoda para trabajar. Para ello slo tenemos que seleccionar el comando Agrupar con... en el
men de opciones del panel e indicar el panel con el que queremos formar grupo.
5 Fireworks dispone de un gran nmero de paneles e inspectores para trabajar, es por ello que el programa utiliza este Inspector para contener
todas las funciones de propiedad de los objetos (vectoriales, bitmap, texto, etc.) y las opciones de las herramientas contenidas en el men
Herramientas. As, se reduce el nmero de paneles e inspectores que necesitamos tener abiertos para realizar nuestro trabajo. El hecho de ser
un panel dinmico que cambia segn vamos trabajando y slo nos muestra las opciones necesarias en cada momento, es una de las grandes
ventajas de Fireworks. Por ejemplo, cuando se encuentra seleccionado un objeto vectorial el Inspector de Propiedades muestra todas las
opciones de grficos vectoriales como el trazo y el relleno. Al elegir una herramienta del men Herramientas, el Inspector de Propiedades
visualiza las opciones que la herramienta tiene.

Para crear un documento nuevo en Fireworks podemos utilizar varias opciones:
desde la barra de mens, la caja de herramientas o los comandos abreviados.
Se sigue una de estas tres opciones:

- Seleccionar en la barra de mens Archivo > Nuevo
- Seleccionar en la Caja de Herramientas Principal el
icono de Hoja en blanco
- Pulsar Ctrl + N
Despus de haber seguido uno de los tres pasos anteriores se abrir el cuadro
de dilogo Documento nuevo. En l se deben introducir los valores deseados
para este nuevo documento.
En los campos Anchura y Altura debemos introducir los valores

correspondientes que queramos para la nueva imagen. Estos valores los
En este caso introduciremos los siguientes valores:
podemos introducir en unidades de Pxeles, Pulgadas o Centmetros. Basta con
- Anchura 300 px
seleccionarlo en el men desplegable que acompaa el campo de texto. - Altura 100 px
- Resolucin 72 ppp
- Color del lienzo Blanco
Aparte de la anchura y la altura, tambin tendremos que introducir la resolucin
de la imagen.
Otro valor que hay que aadir a la imagen es el color del lienzo (el color del
fondo).

El resultado de todos estos pasos es un
nuevo documento vaco.
1
Una vez abierto un documento en Fireworks
podemos ver y modificar en cualquier
momento su formato desde el Inspector de
propiedades.
1 En el caso de no tenerla ya visible,

colocaremos la barra de herramientas
Principal desde el panel ventana.
2 Cambiar color de fondo
3 Cambiar tamao del lienzo del documento
4 Cambiar tamao del documento

2 3 4 5
5 Cambiar tamao del lienzo al tamao del
objeto seleccionado

Fireworks permite dibujar cuadrados, rectngulos, crculos, Para dibujar el rectngulo seguiremos los siguientes pasos:
valos, estrellas y cualquier polgono mediante las
1. Pulsar ratn
herramientas de dibujo de formas. Estas herramientas estn
en la paleta de Herramientas, agrupadas en el grupo de 2. Arrastrar ratn
herramientas bsicas. con el botn
presionado
A continuacin veremos cmo crear estas formas bsicas,

comenzando por un rectngulo. 3. Soltar botn
Pulsaremos sobre el icono del grupo para poder visualizar

todas las herramientas que contiene.
Resultado

Como hemos dicho anteriormente, la informacin del Inspector de Propiedades cambia
segn vamos trabajando, y slo nos muestra las opciones necesarias en cada momento.
De esta manera al tener seleccionado el rectngulo, el Inspector de Propiedades muestra

todas las opciones de grficos vectoriales como el trazo y el relleno.
3 4 5 6
1 2
6
1 Alto y ancho 4 Caractersticas del

del rectngulo trazo
2 Situacin del 5 Transparencias y

rectngulo efectos
dentro del lienzo
6 Combinar trazados
3 Caractersticas del
relleno 6 Estilos

Si queremos cambiar el color del rectgulo que hemos
dibujado tendremos que presionar en el icono de color de
relleno, situado en el inspector de propiedad, de este modo
desplegaremos la tabla de colores.
En nuestro caso seleccionaremos un color azul oscuro.
2 4
1 Color actual
2 Previsualizacin del
color seleccionado
3 Seleccionar
1 otro color
4 Si quisisemos un rectngulo sin color de

relleno, seleccionaramos esta casilla

De la misma manera que hemos cambiado el color del 1 El cuadrado blanco con una lnea roja
relleno, cambiaremos el color del contorno del rectngulo. atravesada indica que no existe ningn color
de trazo seleccionado.
Presionaremos el icono de color de trazo y seleccionaremos

Una vez hemos seleccionado un color para el contorno de
el color negro. rectngulo podemos darle un grosor. En este caso de 2 pxeles
2 Subiendo o bajando la barra deslizante

incrementaremos o disminuiremos el grosor del
trazo.
Resultado
1 2

La siguiente herramienta que utilizaremos para la creacin El nmero de lados lo indicaremos en el inspector de
del logotipo ser la herramienta polgono. propiedades.
Con la herramienta polgono podemos dibujar cualquier

clase de figura regular.
Ejemplo 5 lados Ejemplo 10 lados


Con la herramienta Polgonos tambin es posible dibujar Al seleccionar la forma Estrella tambin se activa la opcin
estrellas. Tendremos que seleccionarla como forma de ngulo. Con esta opcin controlamos el ngulo de las puntas
polgono en el Inspector de Propiedades. de la estrella. Si seleccionamos Automtico, se pondr
automticamente el ms apropiado para el numero de lados
que hayamos seleccionado anteriormente.
Ejemplo polgono Ejemplo estrella Ejemplo Automtico (38) Ejemplo 70


Una vez dibujado el polgono podemos ajustar su tamao y
su posicin dentro del lienzo.
Para ello seleccionaremos las herramientas de

transformacin. La herramienta que utilizaremos en este
caso es la herramienta de escala.
Una vez dibujado el polgono podemos ajustar su tamao y

su posicin dentro del lienzo.
Para ello seleccionaremos las herramientas de

transformacin. La herramienta que utilizaremos en este
caso es la herramienta de escala.

Al seleccionar con esta herramienta el objeto queda enmarcado con Nota: Como hemos podido
lo que se denominan asas de transformacin. observar al estirar del punto del
asa, las proporciones del objeto se
han mantenido iguales durante el
Estas asas son las que nos servirn para transformar la figura. Si escalado. Esto es as siempre que
estiramos de uno de sus puntos modificaremos el tamao. los puntos desde los que se
arrastra sean los de las esquinas
As, por ejemplo, desplazando hacia dentro el objeto deviene ms del objeto. Si estirsemos desde
pequeo. un punto del borde, slo se
escalara un eje.
Nota: La herramienta escalar

tambien es la herramienta que
nos permite girar el objeto.
Seleccionando una esquina del

objeto y estirando en diagonal
lo hacemos rotar.
Resultado

Ahora que tenemos el objeto al tamao deseado nos Nota: La diferencia entre la herramienta Puntero (flecha
dispondremos a colocarlo en su lugar correcto. negra) y la herramienta Subseleccin (flecha blanca), es que
con el Puntero seleccionamos el objeto entero, mientras que
Para ello seleccionaremos la herramienta puntero, en la con la herramienta Subseleccin seleccionamos puntos
barra de herramientas. concretos del objeto.
Cuando seleccionais con esta herramienta los puntos del

objeto quedan marcados en blanco.
De esta manera podemos seleccionar un punto concreto del

objeto para moverlo.
Para mover el objeto basta con seleccionarlo con el Puntero

clicando sobre l y arrastrarlo hasta la zona deseada. Es
conveniente arrastrar el objeto desde su centro para evitar
deformarlo.

Nota: Para seleccionar un objeto clicamos sobre l utilizando Cambiaremos el color a la estrella y repetiremos este
la herramienta Puntero. proceso creando varias estrellas de diferentes tamaos y
colores.
Como podemos ver, cuando seleccionamos un objeto este
queda remarcado con sus puntos y un trazo de color azul. Resultado
Estrella seleccionada
Rectangulo seleccionado

Una de las novedades que introdujo Dibujaremos la forma Flecha de la misma
Fireworks 8 fue la creacin de formas manera que dibujamos anteriormente las
automticas. formas simples.
Las formas automticas son objetos

primarios que pueden variar la posicin de
sus puntos y responder de forma
inteligente a medida que se los
transforma.
Para ver su funcionamiento

introducciremos una forma automtica en
la composicin de nuestro logotipo.
Podemos observar como caracterstica de
Seleccionaremos la herramienta Flecha. las formas automticas, que contienen
unos puntos amarillos a parte de los
puntos de seleccin azules ya vistos en
las formas simples.

Mediante estos puntos de control se pueden 1 2
ajustar los parmetros automticos de la
forma, que en el caso de la forma Flecha son
la agudez de la punta, la longitud y anchura
de la cola y la longitud de la punta.
3 1
3 4
1
5 6
4 2
5 6
Resultado

El siguiente paso en la creacin del logotipo es la insercin
de un texto. Con la herramienta
Texto seleccionada 2 11 16 18
clicaremos sobre el
rea de trabajo en la 3 6 9 12 13 17
zona en la que 4 7
1 10 14
queremos insertar el
texto. 5 8 15
Como podemos comprobar, el puntero se transforma y el
Inspector de Propiedades muestra las propiedades de texto, 1 Alto y ancho de la caja de texto, 11 Estilo de fuente
que pueden ser variadas en cualquier momento. y posicin dentro del lienzo
12 Estilo de letra
Clicaremos sobre el lienzo y escibiremos el texto 2 Tipografa utilizada
"Fireworks CS5".
13 Orientacin de texto
3 Ajuste entre caracteres
14 Nivel de suavizado
Para modificar la fuente, el tamao, el estilo y la alineacin
del texto nicamente necesitamos seleccionar el objeto en el 4 Sangrado del prrafo
lienzo y modificar sus atributos desde el Inspector de 15 Ajuste entre caracteres
Propiedades. Modificaremos los atributos del texto desde el
5 Escala horizontal
16 Opacidad
Inspector de propiedades y utilizaremos la herramientas de 6 Interlineado
transformacin para un resultado similar al de la imagen. 17 Alineacin
7 Espacio delante del prrafo
18 Color de letra
8 Espacio despus del prrafo
9 Unidades del Interlineado
10 Desplazamiento lnea base


Llegados a este punto daremos por concluida la creacin del En el transcurso de este primer tutorial hemos realizado una primera
logotipo. vista a las funciones bsicas de Fireworks.
Como resumen diremos que hemos aprendido a:
- Crear elementos sencillos a partir herramientas grficas.

- Transformar los grficos sobre el lienzo.
- Modificar las propiedades desde el inspector de propiedades.
Al haber visto slo una pequea muestra de las herramientas bsicas

y herramientas automticas se propone como prctica la creacin de
otro logotipo, esta vez con el nombre del estudiante, que permitir la
experimentacin con el resto de las herramientas de forma para
conocer todas sus posibilidades.
Guardaremos el documento seleccionando el comando:
Archivo > Guardar
El formato de archivo propio de Fireworks es el formato

PNG. Guardando el documento en este formato podremos
abrirlo posteriormente y realizar las modificaciones que
deseemos.
Tutorial 2. Creacin de una ilustracin

El objetivo de este segundo tutorial ser crear una ilustracin como El primer paso a dar ser crear un documento nuevo. Para esta
la que se muestra. prctica utilizaremos un documento con las siguientes
caracteriaticas:
Esta prctica nos servir para conocer en profundidad el sistema de
trabajo con Fireworks, y veremos con ms detalle las opciones de - Anchura: 250 pxeles
trazos y rellenos de formas vectoriales vistos en el primer tutorial. - Altura: 335 pixeles
- Resolucin: 72 ppp
- Color del lienzo: Blanco
Una vez abierto el documento nos aseguraremos de tener visible el

panel Capas.
Las Capas son un mtodo de organizacin del documento utilizado

en la mayora de programas de edicin grfica y maquetacin.
Este panel visualiza el orden en el que aparecen los objetos dentro

del documento. Como iremos viendo en el transcurso de la
prctica este panel permite crear nuevas capas, ordenarlas,
eliminarlas y ocultar objetos o bloquearlos.
En caso de no tenerlo abierto podemos abrirlo con el comando:
Ventana > Capas


El siguiente paso ser generar un rectngulo que Una vez generado el primer rectngulo crearemos
nos servir como fondo para la ilustracin. Para ello dos ms. Les daremos colores diferentes para
utilizaremos la herramienta correspondiente, tal poder diferenciarlos.
como vimos en el tutorial pasado.

Ahora que tenemos tres elementos en el Como hemos dicho antes, este panel visualiza el orden en el que aparecen los
documento, observemos el panel Capas. objetos dentro del documento.
Los documentos se dividen en diferentes planos y en ellos se sitan los objetos

como si se tratase de un conjunto de hojas transparentes superpuestas.
Podemos observar como cada uno de los tres rectngulos que hemos creado
est situado en un plano.
Nota: Como podemos ver, el objeto que tenemos remarcado de color azul es el
que tenemos seleccionado en el lienzo. La organizacin del panel capas es muy
simple. Los planos superiores en el panel corresponden a los objetos en primer
plano en el lienzo. Para cambiar el orden slo tendremos que arrastrar el plano
para conseguir la disposicin deseada.
Nota: Las capas estn representadas por un icono de carpeta. No hay que
confundir las capas con los planos de los que estn formadas. Cada elemento
que creamos se coloca en un plano dentro de la capa. La disposicin de estos
planos forma a su vez un sistema de sub-capas dentro de la capa. Si somos
usuarios de Photoshop encontraremos algunas diferencias importantes en el
uso del panel Capas. En Fireworks las capas equivalen a los conjuntos de
capas de Photoshop, y las capas de Photoshop equivalen a los planos de
Fireworks.

Seleccionados el rectngulo rojo y le redondearemos las esquinas
introduciendo un valor de 15 puntos en el campo Redondez del
rectngulo en el Inspector de propiedades.
Luego seleccionaremos el rectangulo verde y le redondearemos las

esquinas con un valor de 30 puntos. La esquina del rectngulo
queda fuera del lienzo con lo que no observamos el cambio.

Seleccionaremos nicamente el rectngulo situado en ltimo plano. Al aplicar una textura a un objeto podemos darle un grado de
intensidad para hacer que la textura se vea ms o menos sobre el
Nota: Podemos seleccionar varios objetos a la vez apretando la tecla color de relleno.
<Mayscula>. Cuando tenemos varios objetos seleccionados y
queremos tener slo uno de ellos en este estado, podemos clicar Por defecto se aade un valor del 50%. Podramos cambiar este
sobre el resto apretando la tecla <Mayscula> para deseleccionarlos. nmero utilizando la barra deslizante.
O tambin clicar sobre el lienzo para tenerlos a todos fuera de la
seleccin. Si quisisemos quitar la textura aadida a un objeto nicamente
tendramos que darle un valor de intensidad del 0%.
Ahora le cambiaremos color de relleno y le aplicaremos una textura.
La opcin Transparente da transparencia al color blanco que se
La opcin textura la encontramos en el Inspector de propiedades. encuentra en la textura. Permite as ver los objetos que quedan
Desplegando el campo textura podemos previsualizar todas las debajo.
texturas de las que disponemos.
Seleccionaremos la textura Tartn suelto


Ahora vamos a cambiar el color del relleno. Fijmonos que esta paleta de colores tambin la podemos desplegar
desde la barra de herramientas o desde los paneles Mezclador de
Le daremos un tono azul oscuro. colores y Paletas de colores.
En el tutorial anterior vimos que para cambiar el color de Utilizar un sistema u otro para cambiar el color de relleno de un objeto
relleno a un objeto lo seleccionbamos desplegando la slo depende de nuestra comodidad, ya que la funcin es la misma.
paleta de colores desde el Inspector de propiedades.
Para abrir el panel Mezclador de colores o la paleta de colores
utilizaremos los comandos
Ventana > Mezclador de colores

Ventana > Otros > Paleta de colores

El siguiente paso ser colocar los otros Teniendo la opcin Con el Lienzo marcada,
dos rectngulos al tamao deseado. utilizaremos el rectngulo que forma el
lienzo como un objeto ms a alinear. De
Para ello los seleccionaremos y este modo no slo alinearemos los
utilizaremos las herramientas de rectngulos entre s sino tambin con
transformacin vistas en el tutorial respecto al documento.
pasado.
Abriremos el panel Alinear.
Ventana > Alinear
Este panel nos permite alinear y distribuir

los objetos seleccionados entre s ya sea
vertical u horizontalmente.
Con los dos rectngulos superiores

seleccionados, clicaremos en el icono
Alinear centro vertical en el panel
Alinear. De esta manera se centrarn los
ejes verticales de los dos rectngulos.

Ahora seleccionamos el rectngulo que nos har de fondo en la ilustracin.
Para conseguir un mejor efecto de fondo utilizaremos un color degradado.
Seleccionaremos la opcin de relleno degradado desde el Inspector de

propiedades.
Como podemos observar en el men que se despliega hay varios tipos de

degradados: lineales, radiales, elpticos, rectangulares, etc. Nosotros para
crear el efecto de cielo utilizaremos el degradado lineal.

Una vez aplicado el degradado lo modificaremos para aplicarle Al activar esta opcin vemos los colores que conforman este
los colores deseados. Para ello debemos seleccionar la opcin degradado. Las dos flechas indican los dos colores que lo integran.
Edicin, dentro de las Opciones de relleno.
Clicando sobre las flechas podemos seleccionar otros colores.
Nosotros seleccionaremos un degradado que vaya de un azul

ozcuro a un azul claro.

Nota: Un degradado no tiene Ahora tenemos bien el color del cielo, pero puede
porque estar formado de slo dos que en alguna ocasin nos interesase modificar la
colores. Es posible aadir tantos orientacin del degradado, por ejemplo que el
como se desee. nicamente degradado sea horizontal en lugar de vertical. Una
tenemos que clicar sobre la zona solucin sencilla sera rotar 90 el rectngulo con
de debajo de la barra de color. las herramientas de transformacin, pero
Tambin podemos deslizar las tendramos que volver a escalar el rectngulo para
flechas para variar el inicio de las dejarlo en la misma posicin. La solucin correcta
transiciones entre colores. es rotar slo el degradado, sin modificar el
rectngulo.
Fijmonos que al tener seleccionado el rectngulo

con el degradado, dentro aparece una lnea con
dos puntos.
Esta lnea indica la orientacin del degradado.

Podemos seleccionar estos puntos y moverlos para
cambiar el aspecto del degradado.

Seleccionando el punto redondo,
arrastraremos todo el degradado. El
degradado va desde el punto redondo
hasta el punto cuadrado. En la imagen
vemos que podemos dejar parte del
degradado fuera del objeto.
Seleccionando el punto redondo, Seleccionando desde un punto

modificaremos el largo del degradado. internedio de la linea, cambiaremos el
Haciendo la linea ms corta angulo del degradado.
reduciremos el trozo en el que se pasa
de un color a otro.

Para el tercer rectngulo, el del suelo, utilizaremos un patrn. Una vez aplicado el patrn podemos modificar su orientacin de la
misma manera que seguimos para modificar el degradado,
Un patrn es una pequea imagen de mapa de bits que se utiliza estirando de los tiradores que aparecen al seleccionar el objeto con
para rellenar una figura. el puntero.
Fireworks tiene por defecto una serie de motivos que se encuentran Aunque Fireworks tiene una serie de patrones por defecto,
en el men desplegable Patrn. Seleccionaremos un patrn con podemos importar y aplicar como patrn cualquier imagen en
forma de Burbujas. formato PNG, GIF, JPG, BMP, TIF que tengamos en el disco duro.
Para ello tenemos que seleccionar la opcin Otras en la parte
inferior de la lista del men desplegable Patrn, para luego
seleccionar el archivo de imagen correspondiente.

Resultado
El ltimo paso que daremos en la creacin del fondo de la
ilustracin ser un efecto de borde difuminado en los dos
rectngulos que estan en primer plano.
El efecto de borde fundido es una propiedad de los trazos

vectoriales que permite Fireworks.
Esta propiedad se encuentra en el Inspector de propiedades.
Seleccionaremos el rectngulo del degradado y le daremos la

propiedad de borde fundido con un valor de 30 pxeles para el
grueso del fundido.
Este proceso lo repetiremos para el tercer rectngulo.


Ahora tenemos todos los elementos que forman Seguiremos el proceso de creacin de la Observamos como la nueva capa se
el fondo de la ilustracin. Todos estos ilustracin generando otra capa donde denomina "Capa 1", an siendo la
elementos los hemos creado dentro de la misma colocar los siguientes elementos. segunda capa que contiene el documento.
capa, "Capa 1", ya que forman el fondo de la Esto es debido al sistema de
ilustracin. Cambiaremos el nombre de la capa Para aadir una capa nueva en el panel nombramiento automtico del programa.
a "Fondo". Para ello clicaremos sobre el icono capas utilizaremos el icono de Capa
de carpeta en el panel capas. nueva que aparece en la parte inferior del
panel.
Si obserbamos ahora el panel capas

vemos que contiene una capa nueva.

Como vamos a seguir trabajando en la Clicando en el icono de flecha podemos Una opcin muy til que permite Fireworks es la
capa nueva nos conviene bloquear la contraer o expandir el contenido de la capa. de Editar slo una Capa. Esta opcin la
capa "fondo" para no modificar ningn Ya que la capa fondo la tenemos bloqueada encontramos en el men de opciones del panel
elemento de los que contiene por y no vamos a seguir trabajando con ella la Capas.
error. cerraremos.
Bloquearemos la capa clicando en el

espacio situado en la tercera columna
del panel capas.
Si tenemos esta opcin activada slo podremos

seleccionar en el lienzo los objetos que
contenga la capa seleccionada. Resulta til
activar esta opcin cuando trabajamos con
Vemos que ahora aparece un icono de documentos que contienen muchos objetos en
candado. el rea de trabajo, ya que podemos controlar
mejor los objetos a seleccionar con el Puntero.
Fijmonos que la capa que tenemos

seleccionada es la que aparece marcada en
azul y con un icono de lpiz en la segunda
columna.

Procederemos a crear el siguiente elemento grfico. Como hemos visto al generar elementos con las herramientas bsicas,
Para ello utilizaremos la herramienta pluma. los trazos estn formados a partir de la unin de puntos. Con la Pluma
indicamos los puntos a unir para conseguir el trazo.
La herramienta Pluma no slo conecta los puntos con lneas rectas,

sino que permite dibujar con lo que se conoce como curvas de Bezier.
Se trata de segmentos curvos de derivacin matemtica. Cada punto
determina si las curvas adyacentes son lneas rectas o curvas. Este
tipo de sistema de dibujo es en el que se basan programas de edicin
vectorial como Illustrator.
Nos fijaremos que la herramienta tenga las siguientes
propiedades de relleno:
- Categora de relleno: Slido
- Categora de trazo: 1 pxel blando

- Tamao de pluma: 1
- Textura: 0%

Con la Pluma seleccionada clicaremos sobre Vemos que los dos puntos quedan unidos Para cerrar el trazado clicaremos sobre el
el lienzo para crear el primer punto del trazo. por una lnea. primer punto y as conseguiremos una figura
cerrada.
Para controlar la curva tenemos que mover el
ratn mientras mantenemos el botn Resultado:
pulsado. De este modo se muestran los
tiradores que dan forma a la curva.
Como se observa, mientras ms estiremos

Ahora clicaremos en el lugar donde de los tiradores ms curvo es el trazo entre
queremos situar el segundo punto. Pero, los dos puntos.
esta vez, sin dejar de apretar el botn,
arrastraremos el ratn.
Iremos aadiendo puntos hasta dibujar una

forma similar a la de la imagen.

De la misma manera que hemos creado Igual que la mayora de programas vectoriales, Fireworks permite combinar grupos de objetos
el primer elemento crearemos varios ms. vectoriales para crear una forma compleja a partir de un conjunto de formas ms simples.
A la hora de crearlos nicamente tenemos En el men Modificar > Combinar trazados vemos las posibilidades de combinacin de objetos
que tener en cuenta que en algn tramo vectoriales que permite Fireworks.
del trazo estos elementos se
superpongan. Aproximadamente como se En nuestro caso seleccionaremos las tres formas vectoriales creadas con la Pluma y las
ve en la imagen. uniremos en una sola forma con la opcin Unin.
Nota: Las opciones de combinacin de

objetos tambin las encontramos en el
panel de propiedades.

Ahora definiremos las opciones del trazo.
Si desplegamos el men Categora de trazo en el Inspector de

propiedades veremos todos los tipos de trazo que dispone
Fireworks.
Nosotros seleccionaremos el trazo Antinatural > Pintura viscosa.

Le daremos un grosor de trazo de 20 puntos.
Un tamao de borde de 30 puntos.
Por ltimo de daremos un color lila.

Ahora tenemos que solucionar el problema del
trazo que sobresale del dibujo. Lo
solucionaremos utilizando una mscara.
Una mscara es un objeto que crea un recorte

en otro objeto. Con las mscaras se pueden
perfilar objetos o imgenes, o bien crear efectos
de transparencia y degradados.
Hay que tener en cuenta que las mscaras slo

hacen transparente la parte del objeto que
sobra, pero no la eliminan. Es decir, en cualquier
momento podemos eliminar la mscara y
recuperar el objeto original.
Para aadir una mscara al trazo lo

seleccionaremos en el panel capas y clicaremos
en el icono aadir mscara situado en la parte
baja del panel.

En la mscara podemos dibujar con cualquier Una vez seleccionado lo copiaremos en la Vemos ahora que la mscara contiene el
herramienta de dibujo. memoria del ordenador con el comando: rectngulo y hace que slo sea visible la
zona de trazo que coincide con l.
En las mscaras slo se utiliza la paleta Escala Edicin > Copiar.
de grises. El concepto de las mscaras es que
los colores negros en en ellas dan transparencia Ahora seleccionaremos la mscara del trazo y
en el objeto. Es decir, lo que pintemos de color pegaremos el crculo copiado con el comando:
negro en la mscara en el rea de trabajo ser
transparente, mientras que la zona blanca en la Edicin > Pegar.
mascara har visible la imagen en el rea de
trabajo. De esta manera los tonos grises darn
diferentes grados de transparencia a la imagen.
En nuestro caso nos interesa que la zona visible

del trazo sea la zona que queda dentro del
rectangulo de fondo degradado. Para eso
dibujaremos en la mscara un rectngulo negro
en la misma posicin y tamao que el dibujado
anteriormente.
Primero seleccionaremos el rectngulo en el

panel capas.
Nota: Deberemos desbloquear la capa.


Como ltimo elemento a la ilustracin Como ltimo paso de la ilustracin, les daremos Nota: Los valores de opacidad y la
colocaremos un objeto de texto con el al nmero un poco de transparencia. interaccin de colores tambien los
texto CS5. encontramos en el Inspector de
Para variar la opacidad de un objeto lo haremos propiedades.
indicando un porcentaje en el panel capas.
Tambin es posible variar la interaccin de

colores de dos o ms objetos superpuestos,
utilizando los modos de mezcla. Los modos de
mezcla manipulan los valores de color de los
objetos superpuestos y controlan los efectos de
opacidad.

Daremos la ilustracin por acabada.
En el transcurso de esta prctica hemos visto los diferentes tipos de rellenos y de

trazos que dispone el programa. El uso del panel capas. Y la combinacin con
diferentes elementos para generar un objeto ms complejo.
La prctica a realizar por el estudiante para finalizar el tutorial consiste en la creacin

de una ilustracin de un paisaje que contenga el mayor nmero de pasos vistos
posibles (mltiples capas, elementos agrupados, formas automticas, curvas bezier,
diferentes tipos de rellenos y trazos, opacidades, mscaras)
Tutorial 3. Trabajar con ilustraciones y grficos importados

En este tutorial veremos el proceso de trabajar conjuntamente con Ilustracin realizada con Adobe Illustrator CS5
varios programas de dibujo.
Como hemos visto en los tutoriales anteriores, Fireworks dispone 1 1 Tramas de relleno
de muy buenas herramientas de trabajo vectorial, pero eso no 2 Grosor de trazo
quiere decir que sea el nico programa de dibujo de este tipo.
3 Trazo
Es muy probable que en el transcurso de un proyecto profesional 4 Grupos
2
necesitemos trabajar en Fireworks con documentos creados con
otros programas de dibujo. 3 5 Mscara
4 6 Degradados
Imaginmonos que nos llega una ilustracin realizada con Adobe
Illustrator CS5. Para realizarla se ha utilizado las herramientas 7 Efecto de sombra
vectoriales propias de Illustrator (trazos, rellenos slidos, rellenos 7
degradados, tramas, mscaras, elementos agrupados, capas,
etc...). Ahora necesitamos pasar todo este trabajo a Fireworks para
continuar el proyecto. 5
6

El primer paso es crear un documento nuevo. Esta accin abrir la ventana de seleccin de archivo, donde escogeremos el archivo:
Le daremos los siguientes parmetros: - "Ilustracin.ai"
- Altura: 600 pxeles. Al importar un archivo vectorial se abre el cuadro de dilogo Opciones de archivos
- Anchura 360 pxeles. vectoriales.
- Resolucin 72 ppp.
- Color lienzo Blanco.
Para importar el archivo utilizaremos el comando:
Archivo > Importar
O clicaremos en el icono Importar del men Archivo.


Vemos paso a paso este cuadro de dilogo. Es importante a la hora de trabajar con varios
programas ser consciente del formato final al que se
Los valores de escala, anchura, altura y quiere llegar, por eso al crear la ilustracin en
resolucin son los valores del conjunto de Illustrator se ha trabajado con un documento de
elementos que vamos a importar. Podemos iguales proporciones al de Fireworks.
comprobar que las medidas son diferentes a
las del documento que hemos creado en En caso de no ser as, desde este cuadro de dilogo
Fireworks, eso es debido a la zona de podramos ajustar las proporciones del documento a
imgen oculta de la mscara. importar al documento de trabajo.
Nota:
Suavizado: Esta opcin hace que los
bordes de los objetos vectoriales
estn suavizados, para evitar bordes
dentados.
Texto: Aqu podemos elegir varias

opciones de suavizado aplicable al
texto. Dependiendo del tamao del
texto utilizado ser mejor elegir una u
otra de las opciones.

La opcin Conversin de archivos nos indica como se deben
importar archivos que contengan varias pginas, en el caso de
estar importando antiguos documentos de Freehand o Corel. Se
puede elegir abrir una pgina bien indicando su nmero o
importando las pginas como estados de Fireworks para
posteriormente crear animaciones.
En nuestro caso, como nuestro documento Illustrator slo dispone

de una pgina, solo tendremos la opcin "Abrir una pgina" con el
nmero "1" marcado.
En cuanto a las capas del documento se puede seleccionar Ignorar

capas que, prescindiendo de las capas que contenga el documento,
importa todos los objetos en una nica. La opcin Recordar capas
importa los objetos manteniendo la estructura de capas con la que
se cre.
Nota:
Convertir capas a estados convierte cada capa del documento Incluir capas invisibles: Importa las capas que estuvieran desactivadas
Illustrator en un estado diferente para su posterior animacin. a la hora de guardar el documento vectorial.
Seleccionaremos la opcin Recordar capas y dejaremos Incluir capas de fondo: Importa la capa de fondo del documento. De no
deseleccionadas las otras dos. seleccionar esta opcin la capa de fondo del documento es ignorada.

La ltima opcin es la de Representar como imgenes. Con esta
opcin podemos indicarle a Fireworks que convierta en una sola
imagen de mapa de bits los grupos formados por muchos
elementos vectoriales, a efectos de ahorrar memoria y tiempo de
proceso. Basta con especificar el nmero mximo de objetos que
puede tener un grupo antes de ser convertido en una nica imagen
de mapa de bits.
Como en nuestro caso no nos interesa transformar ninguna parte

de la ilustracin a mapa de bits deseleccionaremos las tres
opciones.
Recordemos los valores que tendramos que haber introducido:
100 en la casilla Escala

Seleccionar la opcin Suavizado
Seleccionar Texto Suave
Seleccionar Abrir una pgina
Seleccionar Recordar capas
Seleccionar Incluir capa de fondo
Deseleccionar las opciones Representar como imgenes
Clicaremos en Aceptar para importar el documento.


Tras apretar el botn de aceptar Vemos que ya tenemos la ilustracin colocada Si nos fijamos en el panel Capas veremos
aparece el cursor de Importar. Vemos dentro de nuestro documento, y que queda que tenemos todos los elementos que
que es como la esquina de un marco. colocada a partir de donde comienza el forman la ilustracin separados y
Nos indica la esquina superior derecha contenido (incluido el interior de la mscara). distribuidos en capas.
del documento a importar.
Deberemos centrar la imagen en el documento.
Seleccionaremos la esquina superior
derecha de nuestro documento.
Hemos de hacer un solo clic a la hora

de seleccionar el punto, ya que
clicando y arrastrando podemos
cambiar la escala del documento que
importamos.

Fijmonos ahora en la imagen que
tenemos en Fireworks y en la imagen
que tenamos en Illustrator Podemos
observar que hay propiedades del
documento de Illustrator que no se han
importado correctamente. Es el caso
de los efectos de sombra que le
habamos aplicado y en el degradado
de la sombra de fondo.
Documento Illustrator Documento Fireworks


Veamos diferentes partes de la ilustracin. Podemos desagrupar este grupo para comprobar que podemos
disponer de todos los elementos igual que si los hubisemos
Si seleccionamos la ilustracin de la buja, podremos comprobar agrupado desde Fireworks.
que est formado por un grupo de elementos.
Fireworks reconoce perfectamente los grupos de elementos que

tiene el documento Illustrator.

Visualmente ya nos habremos dado
Documento Illustrator Documento Fireworks
cuenta que hay diferencias en la
imagen iimportada. Concretamente en
el efecto de sombra aadido en
Illustrator.
Si seleccionamos con la Herramienta

de Subseleccin el grfico de color
gris, veremos que el grfico no tiene
ningn efecto asignado, cuando en
Illustrator le habiamos asignado el filtro
de Resplandor Interior.
Comprobamos que el sistema de

efectos para formas vectoriales que
dispone Illustrator no es del todo
compatible con Fireworks.

Si nos fijamos tambien en el contenido de la capa Fondo,
Por ltimo creamos un rectngulo
veremos otra diferencia respecto a la imagen que
con las mismas dimensiones que
tenamos en Illustrator.
el rectngulo de fondo y creamos
una mscara de recorte para que
Primero explicaremos los pasos que se siguieron para
no se visualizase el trozo de
generar este fondo en Illustrator:
grfico que sobrepasaba las
dimensiones del fondo.
El primer paso fue dibujar el grfico de la sombra, al que
se aplic un degradado opaco. El segundo paso fue
duplicar ese grfico y aplicarle un degradado de negro a Con los dos grficos seleccionados
blanco. seleccionamos la opcin "Mscara
de opacidad" desde el panel de
Transparencia.
Documento Illustrator

Si visualizamos el contenido de la capa Cmo solucionaremos estas diferencias visuales
"Fondo" en Fireworks veremos que el grfico debidas alas incompativilidades entre Fireworks e
de sombra mantiene la mscara de recorte Illustrator?
pero ha eleminado la mscara de opacidad.
No nos queda ms opcin que volver a realizar
Podemos comprobar que las mscaras de esos efectos que no se han importado Ya tendremos el mismo efecto de grfico de
opacidad tampoco son compatibles con correctamente desde el prpio Fireworks. sombra que teniamos en Illustrator.
Fireworks.
Para solucionar la opacidad de la sombra
volveremos a crear la mscara de opacidad desde
Fireworks. Empezaremos creando un rectngulo
con un degradado de negro a blanco.
Nota: Nos aseguraremos que tenemos la

opcin de mscara en Escala de grises.
Seleccionaremos el degradado y el grfico de
sombra y los agruparemos como mscara.
Modificar > Mscara > agrupar como mscara


Solucionaremos ahora el efecto de Si desplazamos esos grficos Eliminaremos esos grficos
sombra interior que habamos aplicado veremos que son grficos que y seleccionaremos los
a la buja. Fireworks ha generado a raz grficos correctos.
de la mala compatibilidad con
Con la herramienta de subseleccin los efectos de Illustrator, y que Una vez seleccionados les
seleccionamos los grficos a los que le en realidad son grficos aplicaremos el filtro de
habamos aplicado el efecto de necesarios sombra interior de
sombra. Fireworks.

Realizado este proceso ya tendremos en Fireworks un documento
grficamente igual al de Illustrator.
Hemos de tener en cuenta este tipo de incompatibilidades entre

programas, si sabemos que un efecto no se importar bien en
Fireworks es mejor no crearlo en el programa original y dejar ese
proceso a realizar una vez lo hayamos importado en Fireworks. As
evitaremos tener que repetir dos veces el mismo trabajo.
Una vez finalizado el proceso de importacin de un documento

vectorial externo a Fireworks, sepamos que Fireworks no slo
permite importar sino que tambin permite exportar sus
documentos a otros programas.
Como prctica a esta primera parte del tutorial est la realizacin de

este mismo proceso, esta vez utilizando una ilustracin realizada
por el estudiante.

Ahora continuaremos viendo las posibilidades de Fireworks como programas de Este archivo que hemos abierto es un pequeo
edicin de imgenes de mapas de bits. Para ello realizaremos un retoque fotogrfico. fotomonteje realizado con Photoshop. Podemos
observar que el documento conserva la
De la misma manera que vimos en la primera parte del tutorial con el trabajo de estructura de capas y las mscaras que
imgenes vectoriales y Macromedia Freehand, en esta segunda parte comenzaremos utilizamos.
el trabajo importando un documento ya empezado en el programa ms generalizado
para este tipo de tareas, en este caso Adobe Photoshop.
Fireworks permite abrir directamente archivos nativos de Adobe Photosop (formato

PSD). Abriremos el archivo:
- "montaje.psd"
Nota: Fijmonos que en Fireworks las capas

equivalen a los conjuntos de capas de
Photoshop, y las capas de Photoshop equivalen
a objetos individuales de Fireworks.

Vemos la estructura del Plano 1 - Imgen 1 Plano 3 - Imgen 2 + mscara
documento. Se han utilizados dos
imgenes fotogrficas para formar
una imagen final utilizando parte de
una y parte de otra.
En el transcurso de este tutorial

finalizaremos el proceso de retoque
fotogrfico dejado a medias en
Photoshop.
Plano 2 - Capa Bitmap Resultado


El primer paso que daremos ser retocar la Fireworks dispone de una amplia variedad de
imgen del dibujo. Para ello seleccionaremos herramientas para retocar las imgenes de
el plano del fondo de la capa y ocultaremos mapa de bits. Estas herramientas permiten
el resto. desenfocar, perfilar, aclarar, oscurecer o
manchar cualquier rea de la imagen.
La herramienta que utilizaremos ser la

herramienta oscurecer. Con esta herramienta
ocureceremos los colores de la imagen.
Al seleccionar la herramienta podemos seleccionar en el Inspector de Propiedades el tamao

del pincel a usar y la intensidad con la que queremos aplicar el efecto.

Utilizaremos esta herramienta sobre la zona de Iremos cambiando de rango para ir igualando toda la gama de azules. Hemos de ir con
color ms clara para intentar igualarlo con la zona cuidado al oscurecer la gama de colores claros (Rango resaltados) ya que si lo
ms oscura. aplicamos sobre las nubes oscureceremos el blanco a gris, provocando un efecto de
sucio.
En el caso de oscurecer en exceso una zona
podemos cambiar a la herramienta aclarar. Al usar estas herramientas es importante tener abierto el panel Historial. Este panel
registra todas las acciones realizadas al documento. De este modo se puede rectificar
una serie de acciones y volver al punto deseado en cualquier momento.
La mejor forma de utilizar estas herramientas es Nota: Para retroceder pasos

con un pincel grueso y con un borde muy suave y arrastraremos la flecha
hasta llegar al ltimo paso
una intensidad baja. Para aplicarla no la
que consideremos correcto.
utilizaremos como si fuese una herramienta de
pintura si no dndo clics sobre la imagen. De esta
manera evitaremos "ensuciar" la imagen creando
zonas de color muy irregulares.

Una vez igualado el color del cielo
ajustaremos el color de la imagen para
conseguir unos colores ms contrastados
entre s. Para ello utilizaremos los filtros
de Fireworks. Los filtros son las
posibilidades que ofrece el programa para
modificar el aspecto de los objetos.
Los filtros de Fireworks permiten aplicar El efecto Niveles queda aplicado a la

filtros como en Photoshop, adems imagen.
podremos aadir bordes, relieves, Podemos observar que el sistema de ajustes de
sombras, y alterar el color y el enfoque. colores y filtros de Fireworks es idntico al de Nota: Al aplicar un filtro de Fireworks
Photoshop. Ajustaremos los niveles de negros y a un objeto no lo alteramos realmente,
Para aplicar un filtro automtico blancos tal como se muestra en la imagen. sino que modificamos slo su
utilizaremos el men despegable Filtros aspecto, de modo que siempre
situado en la parte inferior derecha del podemos reajustar sus propiedades o
Inspector de Propiedades teniendo eliminar el efecto, volviendo al objeto
seleccionado un objeto en el lienzo. original.
El filtro que utilizaremos ser el filtro de

ajuste de Niveles:
Efecto > Ajuste de Color > Niveles


Haremos visible los otros dos planos del documento. El plano "Mapa de bits 2" lo utilizamos para dibujar la sombra de
los lpices, ya que estas quedaron ocultas a la hora de realizar la
mscara a la imagen original.

En el caso de querer retocar estas sombras seleccionaremos
el plano "Mapa de bits 2" y ocultaremos el plano del dibujo.
Utilizaremos la herramienta Pincel para pintar de color

negro dentro del plano.
Conseguiremos un mejor resultado seleccionando un pincel

grueso con mucho suavizado y utilizando una opacidad baja. Podemos borrar un trozo de sombra utilizando la herramienta
Borrador, para redibujarla con ms precisin.

Hagamos visibles todos los planos. Seleccionaremos un color marrn oscuro como
color de relleno desde la barra de herramientas,
y con la herramienta Cubo de pintura clicaremos
en este nuevo plano de mapa de bits para
rellenarla de color.
Seleccionaremos este nuevo plano de mapa de

bits y lo colocaremos en un nivel superior al
plano del dibujo.
Resultado:
Empezaremos el proceso para conseguir una

esttica diferente.
Generaremos un plano de mapa de bits

nuevo dentro de la capa.

Ahora cambiaremos el modo de mezcla de este plano de color. Una vez aplicado el modo de
Los modos de mezcla manipulan los valores de color de los mezcla bajaremos la opacidad al
objetos superpuestos y controlan los efectos de opacidad. plano para hacerlo menos visible.
Seleccionaremos un 50%.
Para modificar el modo de mezcla de un objeto lo
seleccionaremos desde el men desplegable Modos de muestra Resultado:
del panel Capas.
El modo de muestra que nos interesa para este caso es el modo

Matiz. Este modo combina el valor de matiz del color de mezcla
con la luminosidad y la saturacin del color base para crear el
color resultante.
Podemos ir cambiando el modo de mezcla para ir viendo los

diferentes resultados.
Nota: Un modo de mezcla consta de los siguiente elementos:

Color de mezcla, Opacidad, Color base, Color resultante. El
Color de mezcla es el color al que se aplica el modo de mezcla.
La Opacidad es el grado de transparencia con el que se aplica el
modo de mezcla. El Color base es el color de los pxeles
situados debajo del color de mezcla. El Color resultante es el
resultado del efecto del modo de mezcla sobre el color base.

Volveremos a realizar el proceso de creacin de Como modo de mezcla utilizaremos el Resultado:
otro plano de color. Utilizaremos el mismo color de modo de mezcla Multiplicar con una
relleno, pero esta vez al relleno le aplicaremos una opacidad del 30%.
textura de Confeti al 100%.

Slo nos queda dar el ltimo toque a la
fotografa. Oscureceremos un poco los
mrgenes de la imgen.
Fireworks no permite crear una capa de

ajuste de color que afecte a varias capas
a la vez, tal como hace Photoshop. As
que para poder aplicar este efecto de
ajuste de color a toda la imagen
tendremos que tener un nico plano mapa
de bits.
Selecconaremos todos los planos de la

capa y utilizaremos el comando:
- Modificar > Allanar seleccin


El Ajuste de color que aplicaremos a Ahora invertiremos la seleccin para seleccionar el Seleccionaremos el ajuste de color
continuacin no lo aplicaremos a todo el mapa contorno de la imagen. Niveles y modificaremos los valores de
de bits sino solo a una zona concreta. Con la blancos y negros.
herramienta de seleccin Lazo seleccionaremos Seleccionar > Seleccionar inverso
la zona del dibujo.
Con la seleccin ya definida aplicaremos el efecto
ajuste de color. Este efecto no lo podemos aplicar
desde el Inspector de propiedades, tal y como hicimos
anteriormente, ya que de esta manera el efecto afecta
a todo el mapa de bits, y en esta ocasin queremos
aplicar el efecto a una seleccin.
Para aplicar el efecto slo a la zona seleccionada lo La diferencia fundamental entre aplicar
haremos desde el men Filtros. Desde este men un filtro desde el Inspector de
podemos seleccionar los mismos filtros que desde el propiedades y desde el men Filtros, es
Inspector de propiedades, pero no los efectos. que desde el Inspector de propiedades
A esta seleccin le aplicaremos un fundido para podremos modificar posteriormente sus
crear una zona de transicin entre la zona que valores o eliminar el filtro y recuperar el
recibe el ajuste y la que no, para no visualizar un aspecto original del mapa de bits, en
cambio brusco. Utilizaremos el comando: cambio desde el men Filtros el filtro se
aplica directamente al mapa de bits y no
Selecionar > Fundido podremos rectificar a menos que
retrocedamos pasos con el panel
Aplicaremos un fundido de 100 pxeles. Historial.

Damos por finalizado el retoque de la fotografa. Como hemos podido comprobar el uso de Fireworks con mapa de bits es muy similar al de
Solo queda guardar el documento. Lo Adobe Photoshop, e incluso hasta la versin 5.5 de Photoshop se podan compartir los filtros.
guardaremos con el mismo nombre pero en
formato Fireworks (PNG) Si tenemos filtros de esta versin de Adobe Photoshop instalados en nuestro ordenador,
podemos utilizar sus filtros como si fuesen filtros de Fireworks. Para ello tenemos que indicarle
Archivo > Guardar a Fireworks donde se encuentra la carpeta que contiene los filtros. La ruta de la carpeta de
filtros de Photoshop la indicaremos desde el men Edicin:
- "fotografia.png"
Edicin > Preferencias > Filtros de conexin
Como segunda prctica a realizar una vez finalizada esta parte del tutorial, realizaremos otro
fotomontaje. Para su realizacin utilizaremos estas dos mismas fotografas, pero esta vez como
cielo del fotomontaje utilizaremos la fotografa que en el tutorial hemos utilizado para el suelo y
viceversa. Cambiaremos el efecto de fotografa antigua por uno personalizado.

Para acabar este tutorial ensearemos el proceso de optimizacin Para optimizar imgenes en Fireworks seguiremos tres pasos:
de imgenes. Para seguir este proceso utilizaremos la imagen
fotogrfica obtenida en la prctica pasada. Eleccin del mejor formato de archivo. Cada formato de archivo
tiene diferentes formas de comprimir la informacin de color. La
eleccin del formato adecuado para determinados tipos de grficos
puede reducir de forma considerable el tamao de archivo.
Definicin de las opciones especficas del formato. Cada formato

de archivo tiene sus propias opciones de compresin. Por ejemplo,
para compensar el nmero menor de colores en la imagen un
archivo GIF puede utilizar un tramado, y un archivo JPEG puede
utilizar un desenfoque ligero de la imagen.
Ajuste de los colores de la imagen. Podemos limitar el nmero de

colores que conformarn la imagen mediante una paleta de colores.
La reduccin del nmero de colores har que el tamao del archivo
sea menor pero tambin puede reducir la calidad de la imagen, por
lo tanto deberemos probar varias paletas de colores para encontrar
el mejor equilibrio entre calidad y tamao.

Una vez abierta la imagen, podemos ver en la parte superior del
rea de trabajo cuatro fichas, cada una de ellas correspondiente a
un tipo de visualizacin del documento.
En la vista Original se encuentra la imagen PNG con la que trabaja

Fireworks. En esta vista es en la que hemos ido trabajando a lo
largo de los tutoriales ya realizados.
Una vez compuesta la imagen Original, podemos obtener la imagen

final, exportndola al formato de destino, segn sea para su
utilizacin en Web, multimedia o impresin.
Una imagen demasiado grande suele tardar demasiado tiempo en

cargarse y cuanto ms se pueda reducir este tiempo, sin perder
calidad de imagen, mejor ser el resultado final.
A este proceso se lo denomina Optimizacin, y consiste en que

Fireworks calcule la imagen optimizada, es decir la que ocupe el
menor tamao posible manteniendo la mejor calidad de imagen,
aplicndole para ello lo que se denomina un factor de compresin.

La compresin de una imagen consiste Fireworks dispone de una serie de
bsicamente en igualar colores muy similares ajustes de optimizacin
que el ojo humano es incapaz de distinguir, preestablecidos. Podemos elegir entre
de modo que se reduce la informacin estos ajustes para definir rpidamente un
contenida en el fichero y por ende su tamao. formato de archivo.
Adems se elimina la informacin intermedia
(capas, grupos, etc.), dejando slo el mapa Los ajustes de optimizacin
de bits. El resultado es una nueva imagen de preestablecidos los seleccionaremos
menor tamao. desde el men emergente
Configuracin del panel Optimizar.
Si bien Fireworks calcula automticamente el
mejor factor de compresin, tambin permite
variarlo y ajustarlo de manera precisa, segn
nuestras necesidades.
Todas las opciones de optimizacin de las

imgenes las encontramos en el panel
Optimizar.
Desde este panel podemos seleccionar el

formato de la imagen que queremos exportar
as como los ajustes de optimizacin propias
de cada formato.

GIF Web 216 fuerza a que todos los colores sean Websafe, una
paleta de colores que produce resultados bastante similares en
diferentes plataformas y navegadores. La paleta de colores
contiene hasta 216 colores.
GIF WebSnap 256 convierte los colores que no sean Websafe al

color Websafe ms cercano. La paleta de colores puede contener
hasta 256 colores como mximo.
GIF WebSnap 128 convierte los colores que no son Websafe al

color Websafe ms cercano. La paleta de colores contiene hasta
128 colores.
GIF adaptable 256 es una paleta de colores que contiene slo los
colores utilizados en el grfico. La paleta de colores puede contener
hasta 256 colores como mximo.
JPEG - Calidad superior define la calidad en 80% y el suavizado

en 0, creando un grfico de alta calidad pero de mayor tamao.
JPEG - Archivo ms pequeo define la calidad en 60% y el

suavizado en 2, creando un grfico de calidad inferior pero con la
mitad del tamao de fichero del de Calidad superior.

Seleccionaremos la compresin JPEG - Calidad superior. Si cambiamos la vista a Vista previa veremos la previsualizacin de la
imagen final con los valores de compresin que acabamos de introducir.
En la parte baja de la ventana de documento podemos ver el tamao del

archivo con la compresin seleccionada y el tiempo de descarga.

Con la vista 2 copias, podemos Imagen Original sin comprimir Imagen Final comprimida
ver una comparativa de la imagen
original y la imagen optimizada. De
este modo podemos comprobar si
el factor de compresin que
estamos aplicando mantiene la
calidad suficiente respecto a la
imagen original.
Tambien disponemos de la vista 4

copias. En esta vista podemos ver
la imagen original comparada con
tres optimizaciones alternativas.
As, podemos aplicar diferentes
tipos de optimizacin y escoger el
ms adecuado. Para cambiar el
tipo de optimizacin de cada
previsualizacin basta con
seleccionarla, clicando sobre ella, y
cambiar sus valores en el panel
Optimizar.

Teniendo la vista 4 copias selecionemos la segunda
previsualizacin de imagen optimizada clicando sobre ella.
Ahora modificaremos los valores de optimizacin. Bajaremos la

calidad de la imagen JPEG a 30%.
Vemos que el tamao del archivo y el tiempo de descarga se ha

reducido respecto a la primera optimizacin. Pero tambien
observamos la diferencia de calidad de imagen que obtenemos con
cada una.
Nota: Al comprimir una imagen en formato JPEG podemos indicar

el porcentaje de compresin. Evidentemente, como mayor sea el
porcentaje de compresin menor ser el tamao del archivo, pero
menor ser tambin su calidad de visualizacin.
Ajustando el valor Calidad aumentaremos o reduciremos la calidad
de imagen. Reduciendo la calidad de la imagen se consiguen
archivos ms pequeos.
El suavizado difumina los bordes duros, que no se comprimen bien
en los archivos JPEG. Un nmero alto produce un difuminado
mayor en el JPEG exportado, lo que permite crear archivos ms
pequeos. Un valor de 3 reduce el tamao de la imagen y mantiene
una buena calidad.

Fireworks permite elegir las siguientes paletas:
Seleccionemos ahora la tercera
previsualizacin.
Adaptable es una paleta personalizada que se crea a partir de los
colores del documento. Las paletas adaptables permiten producir
En el panel Optimizar seleccionemos
imgenes de alta calidad.
el formato de archivo GIF.
Adaptable WebSnap es una paleta adaptable en la que cada color
se convierte en el color Websafe con el valor ms parecido.
GIF o Graphics Interchange Format, es
Web 216 es una paleta con los 216 colores Websafe comunes a los
el formato de grficos Web ms
sistemas Windows y Macintosh.
comn. Los archivos GIF pueden tener
Exacta contiene exactamente los colores empleados en la imagen.
hasta 256 colores. Este formato ofrece
Solamente pueden utilizar esta paleta las imgenes que tengan 256
una buena compresin de archivo,
colores como mximo. En caso de seleccionar esta paleta en
pero si la imagen original contiene ms
Las imgenes GIF se exportan con imgenes de ms de 256 colores, la paleta cambia automticamente
de 256 colores es posible que la
una profundidad de color de 8 bits a Adaptable.
prdida de calidad sea notable.
que son de hasta 256 colores. La Sistema (Windows) y Sistema (Macintosh) contienen los 256
paleta de colores del documento propios de las plataformas Windows o Macintosh respectivamente.
Los archivos GIF no pierden calidad si
es la lista de los colores que Escala de grises es una paleta compuesta por un mximo de 256
la imagen contiene pocos colores,
componen la imagen. Slo los tonos de gris. Al elegir esta paleta la imagen exportada se convierte a
como en el caso de las ilustraciones
colores que forman la paleta escala de grises.
geomtricas de colores planos. Por lo
aparecen en la imagen. Blanco y negro es una paleta de dos colores que consta slo de
general, los archivos GIF son idneos
blanco y negro.
para crear grficos animados,
Uniforme es una paleta matemtica basada en valores RGB.
logotipos o grficos con reas
Personalizada es una paleta que se modifica o carga desde una
transparentes. Los objetos vectoriales
paleta externa.
se exportan a menudo en formato GIF.

Una vez hemos probado diferentes optimizaciones es
momento de comparar los resultados, y elegir la
optimizacin que ms se adapta a nuestras necesidades.
Al tener visibles cuatro ventanas del documento es

posible que no podamos ver entera la imagen. Podemos
seleccionar la herramienta Mano para poder mover la
zona visible.
Eligiremos la compresin JPEG al 80%, ya que vemos

que con la compresin al 30% la imagen pierde
demasiada calidad, y en formato GIF el peso del archivo
es mayor.
Para exportar el archivo optimizado utilizaremos el

comando:
Archivo > Exportar.


Ya tenemos la fotografa exportada en formato JPEG y lista para
publicar en Web.
Hay que tener en cuenta que al exportar slo se guarda el archivo

optimizado, por lo que si queremos guardar los cambios realizados
al documento (capas, objetos, propiedades...) debemos grabar
tambien el archivo en formato Fireworks (PNG).
Archivo > Guardar.
Una vez visto el proceso de optimizacin de documentos pedimos

como prctica al estudiante optimizar los documentos finales
realizados en los anteriores tutoriales, intentando conseguir el
menor peso de archivo posible sin perder calidad de imagen.
Tutorial 4. Realizacin de un fotomontaje

En este tutorial realizaremos un simple fotomontaje que nos
permitir conocer el sistema de trabajo de Fireworks con grficos
de mapa de bits.
Lo primero que haremos es crear un documento nuevo. Le

daremos las siguientes propiedades:
- Altura: 356 px
- Anchura: 238 px
- Resolucin: 72 ppp
- Fondo: Blanco
Con el documento nuevo creado, fijmonos en la barra de

herramientas. Podemos observar como suceda con las
herramientas de dibujo vectorial, tambin hay unas herramientas
especficas para dibujo de mapa de bits.
Herramienta de seleccin Herramienta Lazo
Herramienta Varita Mgica Herramienta Pincel
Herramienta Lpiz Herramienta Goma de borrar
Herramienta Desenfoque Herramienta Tampn


Empezaremos viendo la diferencia entre los objetos mapa de bits y
los objetos vectoriales, que son los que hemos ido viendo hasta
ahora.
Seleccionemos la herramienta Pincel.
Realizaremos un trazo cualquiera sobre el lienzo.
Al seleccionar la herramienta vemos que en el Inspector de

propiedades podemos seleccionar las propiedades del trazo.
Si nos fijamos en el panel Capas, Aparece este nuevo elemento del
Seleccionaremos las siguientes: documento marcado como "Mapa de bits".
- Color: Negro
- Grosor: 1 pxel.
- Tipo de trazo: Pxel Blando
- Borde: 0
- Textura: 0%

Para ver la diferencia entre este trazo en mapa de bits y los trazos
que hacamos con vectores seleccionemos la herramienta Trazado
de Vectores, y hagamos un trazo similar al realizado
anteriormente.
Fijmonos que en el Inspector de propiedades hemos seleccionado

las mismas propiedades del trazo.
Vemos en el panel Capas que este nuevo elemento lo marca
como Trazado.
- Color: Negro
- Grosor: 1 pxel.
- Tipo de trazo: Pxel Blando
- Borde: 0
- Textura: 0%

Seleccionemos los dos trazos.
Como hemos visto en los tutoriales pasados, los

objetos vectoriales estn formados por puntos cuya
unin entre ellos forma el trazado. Esto lo podemos
observar al tener seleccionado el trazado.
Si nos fijamos en el trazo realizado con mapa de bits al

seleccionarlo no aparecen puntos en el trazo, sino que
aparece marcado el rectngulo que lo contiene. Esto
se debe a que los mapas de bits son imgenes que
estn formadas por pxeles, que son pequeos puntos
de color que conforman la imagen como en un
mosaico.
Una diferencia fundamental entre vectores y mapas de

bits es que, mientras que a los trazos vectoriales les
podemos variar sus propiedades en cualquier
momento (color de trazo, tipo de trazado, grosor de
trazo...) a los trazos de mapa de bits no. A estos slo
les podremos definir las propiedades del trazo antes
de dibujar, una vez dibujado el trazo se convierten en
un conjunto de pxeles.

Veamos otro aspecto importante. Seleccionemos ahora el trazo de Mapa de Si quisiesemos crear otro trazo de mapa de
bits. Vemos que igual que pasaba con el trazo bits en un plano diferente lo haramos
Seleccionemos el trazo vectorial y fijmonos vectorial, el trazo de mapa de bits queda generando primero el plano desde el panel
en el panel Capas. resaltado en color azul. Capas, y luego dibujando dentro de l.
Si seleccionsemos otra vez la herramienta Seleccionemos otra vez la herramienta Pincel.

de Trazo Vectorial y dibujsemos otro trazo
vectorial, ste aparecera como otro Si ahora dibujamos otro trazo, veremos que
elemento dentro de la capa. ste no se crea en un plano nuevo como
pasaba con los trazos vectoriales, sino que el
trazo que dibujamos se aade al mosaico de
pxeles del que hablbamos antes.

Una vez vistas estas diferencias bsicas Seleccionemos la Hagamos una seleccin rectangular dentro del lienzo, tal como
entre pxeles y vectores, empecemos herramienta de Seleccin de muestra la imagen.
nuestro fotomontaje. pxeles.
Borremos todos estos trazos que hemos

dibujado y dejemos el documento en
blanco.
El primer paso que daremos ser dibujar

el rectngulo que nos har de fondo del
fotomontaje.
Como podemos comprobar viendo la

barra de herramientas, no existe niguna
herramienta para generar formas
geomtricas con mapa de bits. Pero eso
no quiere decir que no podamos hacerlo. Vemos que al realizar la seleccin se genera automticamente
Una posibilidad es seleccionar una zona un plano Mapa de bits dentro de la capa en uso.
de pxeles y rellenarla de color.

Seleccionemos ahora la herramienta Cubo de pintura. Al Seleccionaremos las siguientes propiedades de relleno:
tener seleccionada esta herramienta vemos que podemos
introducir las propiedades de relleno en el Inspector de - Color: Un azul oscuro
propiedades. - Tipo de relleno: Slido
- Borde: Suavizado
- Textura: Lnea-Diag 1 50%
Para aplicar el relleno clicaremos con la herramienta

dentro de la zona de seleccin.

Si "deseleccionamos" esta seleccin de pxeles y seleccionamos Cuando clicamos con la herramienta Cubo de pintura sobre la
todo el mapa de bits con la herramienta puntero, podremos imagen lo hacemos sobre un pxel en concreto.
comprobar que el Inspector de propiedades no nos permite cambiar
las propiedades de relleno, tal y como hacamos con los rellenos de
los objetos vectoriales.
La tolerancia es el rango de colores similares al pxel

seleccionado que se colorearn.
Esto es debido a que el objeto que tenemos no est formado a

partir de unas propiedades de trazo y de relleno sino que est
formado por un conjunto de pxeles de colores.
Si seleccionamos otra vez la herramienta Cubo de pintura, Es decir, al clicar con la herramienta sobre la imagen,
escogemos otro color y clicamos sobre el rectngulo, veremos que automticamente se colorearn los pxeles contiguos de color
no estamos cambiando el color de relleno del objeto sino que similar al pxel que ha recibido el clic. Segn el valor de la
estamos cambiando el color de los pxeles sobre los que clicamos. tolerancia, aumentaremos o reduciremos el rango de los
colores seleccionados.

Seleccionemos ahora la herramienta Lazo. Haremos una seleccin creando un rectngulo de lneas onduladas que quede en
Esta es otra de las herramientas de seleccin de el interior del rectngulo de color, tal como se muestra en la imagen.
pxeles que dispone Fireworks.
Con esta herramienta dibujaremos el contorno

de la seleccin como si utilizsemos la
herramienta Lpiz o pincel.
Nota: Como hemos dicho anteriormente, si clicamos con una herramienta de

seleccin de pxeles deshacemos la seleccin que tengamos en uso, pero si al
clicar presionamos el ratn y arrastramos moveremos toda la seleccin.

Si quisiesemos modificar una seleccin para, por ejemplo, 1 Con este comando seleccionamos todos los pxeles del plano.
expandir la zona seleccionda o aplicarle un fundido
utilizaremos los comandos que encontramos en el men 2 Deseleccionar la seleccin que hayamos realizado.
Seleccionar.
3 Seleccionamos los pxeles de un color parecido al conjunto de pxeles

seleccionados. El grado de pxeles seleccionados depende del valor de
1 tolerancia que se tenga aplicado a la herramienta de seleccin.
2
4 Seleccionar los pxeles que quedan fuera de la seleccin actual.
3
4 5 Realiza un fundido en los bordes de la seleccin.
5
6 6 Aade un nmero de pxeles al rea de seleccin.
7
8 7 Resta un nmero de pxeles al rea de seleccin.
9
10 8 Selecciona un nmero de pxeles concretos a partir de la lnea que forma la
11 actual seleccin
9 Hace la lnea que forma la seleccin ms suave, eliminando esquinas.
10 Transforma el contorno de la seleccin en un trazo vectorial
11 Permite guardar en memoria una seleccin para su futuro uso.


Borraremos los pxeles que contiene la zona seleccionada pulsando Nota: Tambin hubisemos podido eliminar los pxeles del
la tecla <Supr> o con el comando: contorno del rectngulo con la herramienta Borrar.
Editar > Borrar
Una vez borrados saldremos del modo de edicin de mapa de bits

pulsando en su respectivo botn.
Aplicaremos a este mapa de bits un efecto de sombra.


Ya tenemos el fondo que utilizaremos para el fotomontaje.
Ahora colocaremos una imagen fotogrfica dentro del documento.

De la misma manera que vimos con los grficos vectoriales y
Illustrator, Fireworks tambin permite importar cualquier archivo
fotogrfico de mapa de bits.
Importaremos los siguientes archivos de imagen JPG:

- "foto1.jpg".
- "foto2.jpg".
Al seleccionar la imagen a importar nos aparece el cursor de

Importar, si pulsamos el ratn y arrastramos podremos indicar la
escala que tendr la imagen. En el caso de que clicsemos
directamente se importara la imagen a la escala propia, en este
caso las imgenes JPG son del mismo que la imagen de Fireworks.
Colocaremos estas dos imgenes importados por debajo de

nuestro mapa de bits.

Para eliminar el contorno del rectngulo de esta imagen de mapa Generaremos la mscara con las herramientas de dibujo vectorial
de bits utilizaremos una mscara que har visible slo el interior de para posteriormente transformarla en un mapa de bits.
la fotografa. Como veremos la utilizacin de mscaras con objetos
vectoriales y objetos de mapas de bits es la misma. Seleccionemos la herramienta vectorial Pluma y dibujemos una
forma triangular ondulada de un tamao ms pequeo que el
El paso a dar ahora es crear el objeto que nos servir de mscara. rectngulo de fondo.
Como hemos podido comprobar al crear el rectngulo de fondo,

dibujar formas geomtricas directamente con las herramientas de
mapa de bits no es muy prctico si lo comparamos con las
posibilidades que permiten los vectores. Buena cuenta de ello es
que Fireworks slo mantiene las herramientas de generacin de
formas para vectores, ignorando estas herramientas para mapa de
bits.
Ya que el punto fuerte de Fireworks es poder combinar vectores y

mapas de bits en el mismo estorno de trabajo vale la pena
aprovecharlo.

Aprovecharemos las posibilidades que permiten los vectores para
cambiarle las propiedades de trazo y relleno a la forma dibujada.
Seleccionaremos las siguientes propiedades:
Relleno
-Color: Slido Negro
-Borde: Fundido 20%
-Textura: 0%
Trazo
Grosor: 30 px
Tipo: Antinatural > Pintura Viscosa
Borde: 30
Textura: 0%

Dibujada la forma que nos servir de mscara solo quedara
aplicarla al mapa de bits.
Previamente a este paso transformaremos este trazado vectorial en

un mapa de bits.
Esto lo podemos hacer seleccionando el trazado y usando el

comando:
Modificar > Allanar Seleccin
Podemos ver que el trazado es ahora un mapa de bits. Es

importante saber que este paso no se puede dar a la inversa, este
mapa de bits no lo podemos convertir otra vez en trazado.

Seleccionaremos este nuevo mapa de bits y el mapa de bits
de la fotografa y crearemos la mscara con el comando:
Modificar > Mscara> Agrupar como mscara


Como puede observarse la mscara est creada pero no se ha
conseguido el efecto deseado. Tenemos que cambiar las propiedades de
la mscara.
Seleccionaremos el icono de mscara en el panel Capas, y cambiaremos

la propiedad de mscara a Canal Alfa.
Nota: Como habamos dicho anteriormente las mscaras funcionan por

escalas de grises. Los tonos negros hacen invisible la imagen, los blancos
la hacen visible, y con los grises se consiguen diferentes opacidades.
Al convertir cualquier objeto (ya sea de mapa de bits o vectorial) en
mscara se convierten todos sus colores en tonos grises. De ah el
resultado que hemos obtenido.
Pero en el caso de las mscaras creadas a partir de mapas de bits,
Fireworks permite generar la mscara no a partir de la imagen en escala
de grises sino a partir de su canal Alfa.
El canal Alfa de una imagen de mapa de bits es el canal que define la
zona transparente. O sea los pxeles transparentes.
Seleccionando esta opcin haremos invisible la zona de imagen que en la
mscara tenga pixeles transparentes.
El canal Alfa es propio de las imgenes de mapas de bits, con lo que este
efecto no lo podramos haber conseguido sin haber convertido el trazado
en mapa de bits.

La importancia de este tutorial es el conocimiento del uso conjunto
de elementos vectoriales y de mapa de bits.
Como prtica sobre este tema se pide al estudiante que realice un

fotomontaje o ilustracin (ms compleja que la realizada en la
prctica) que una elementos vectoriales, con todas sus
posiblilidades, y elementos de mapas de bits.
Tutorial 5. Realizacin del diseo de la interface de una web

En este tutorial vamos a realizar el diseo de
una pgina web. El objetivo de este ejercicio
ser el aprendizaje del uso de los smbolos y
los estilos.
Abriremos un documento nuevo y le daremos

las siguientes propiedades:
- Alto 400 px
- Ancho 700 px
- Resolucin 72 ppp
- Fondo blanco

Empezaremos creando un rectngulo con las mismas
proporciones que el documento (700 x 400 px).
Le aplicaremos un color de relleno degradado en

forma de Olas.
Por ltimo seleccionaremos los colores del degradado,

utilizaremos un azul oscuro y un azul claro.

El segundo elemento grfico que crearemos ser un
rectngulo que ocupe 120 pxeles de alto y 300 pxeles
de ancho. Lo situaremos en la parte izquierda del
documento.
Le aplicaremos un color slido gris claro, y un trazo de

lnea dura de 2 pxeles.
A este elemento le daremos un efecto Sombra con los

siguientes parmetros:
- Distancia 5 px
- Opcidad 65%
- Suavidad: 5 px
- ngulo: 315

Ahora generaremos un marco para En el primer tutorial ya vimos el funcionamiento de las
nuestro documento utilizando las formas automticas. Estirando de los puntos amarillos
formas automticas de Fireworks. modificamos las propiedades de la forma.
Abramos el panel Formas En este caso dejaremos la forma tal como viene por
automticas. defecto. nicamente cambiaremos el color a un color
azul oscuro.
Ventana > Formas automticas
El panel Activos contiene una ficha

Formas en la que se pueden encontrar
ms formas automticas. Estas formas
automticas normalmente son ms
complejas que las que aparecen en el
panel Herramientas. En lugar de
dibujar directamente estas formas
automticas en el lienzo, se colocan
en el dibujo arrastrndolas desde el
panel Activos hasta el lienzo.
Seleccionaremos la forma automtica

Marco y la colocaremos ocupando
todo el contorno del documento.

Ya hemos creado todos los elementos que forman el fondo de la interface Seleccionaremos la opcin Editar slo una capa
de la Web. para evitar modificar por error elementos situados en
otras capas.
Ahora pasaremos a crear el men y el interior de la pgina.
Dejaremos seleccionada la capa "Interior"
Para tener una mayor organizacin dentro del documento generaremos
cada una de estas partes en una capa nueva. Cambiaremos el nombre de
la capa haciendo doble-clic sobre su actual nombre y le introduciremos un
nombre que describa mejor su contenido.

Crearemos el cuadrado que nos servir de marco para las fotografas. Los smbolos se almacenan en el panel Biblioteca, desde donde se
Dibujaremos un cuadrado de color blanco con un trazo rojo de 1 pxel, pueden crear smbolos nuevos, duplicar smbolos, importar
y lo colocaremos sobre el lienzo ms o menos como se muestra en la smbolos existentes y editarlos. Una vez generado un smbolo lo
imagen. podemos utilizar tantas veces sea necesario y a la vez darle un
tratamiento particular a cada uno de ellos, como por ejemplo
El siguiente paso ser dupicar este cuadrado para formar la parrilla de cambiarle la escala, la rotacin, la orientacin, etc. Cada
seis fotografas que contiene la pgina. Llegados a este punto hay que representacin de este smbolo sobre el lienzo se llama Instancia.
pararse a pensar en una cuestin: Cuando se modifica un smbolo, es decir los componentes grficos
del objeto original, todas sus instancias cambian automticamente
Este cuadrado es un elemento que no slo lo vamos a repetir ocho en el rea de trabajo para reflejar las modificaciones efectuadas,
veces en este documento sino que, suponiendo que esta pgina que puesto que son copias de este objeto. En esto reside la potencia de
estamos creando forma parte de una Web completa, lo tendramos la utilizacin de smbolos.
que repetir para todas las pginas de la Web.
Resultara mucho trabajo si una vez colocados todos estos cuadrados

decidisemos (o necesitsemos) hacer un cambio de color de relleno
(por ejemplo), ya que tendramos que ir cambiando cuadrado por
cuadrado y documento por documento todos estos cuadrados. Por
este motivo Fireworks permite generar Smbolos.
Un smbolo representa un objeto o un grupo de objetos, ya sean

vectoriales, de mapa de bits o de texto, que son tratados como un
nico objeto.

Convertiremos este cuadrado en un smbolo. Abramos el panel Biblioteca. Vemos que Si nos fijamos en el lienzo, vemos que
aparece el smbolo creado. en el cuadrado aparece el punto de
Teniendo el cuadrado seleccionado utilizaremos el registro con forma de cruz azul. Esto
comando: nos indica que este elemento ya no es
un grfico sino que es una Instancia
Modificar > Smbolo > Convertir en smbolo de un smbolo.
Al crear el smbolo debemos indicar el nombre y el

tipo. Para este caso generaremos un smbolo
Grfico y le llamaremos "Marco".

Colocaremos las otras siete instancias del smbolo. Pulsaremos sobre Una vez tengamos las ocho instancias sobre el lienzo las
la representacin del contenido del smbolo en el panel Biblioteca y alinearemos con el panel Alinear para dejarlas como muestra
arrastraremos sobre el lienzo. la imagen.

Para ver la utilidad de los smbolos
realizaremos una modificacin en el que
hemos creado.
Los smbolos los editaremos en su

ventana de edicin.
Para abrir esta ventana haremos doble-

clic en el smbolo en el panel Biblioteca o
bien seleccionaremos una Instancia en el
lienzo y utilizaremos el comando:
Modificar > Smbolo > Editar smbolo
Vemos que el smbolo contiene un lienzo

y un sistema de capas independiente al
documento.

En la ventana de edicin del smbolo modificaremos el cuadrado Finalizaremos la edicin del smbolo clicando en la flecha de
dndole un nuevo color de relleno y un mayor grueso en el trazo. "Atrs", situado en la parte superior de la ventana.
- Eliminaremos el trazo.
- Aplicaremos el mismo efecto de sombra utilizado anteriormente.
Podemos comprobar que los cambios realizados se actualizan en

todas las instancias del smbolo.

Seguiremos el mismo mtodo para crear los Introduciremos un nombre para el smbolo. Lo En el estado "Arriba" dibujaremos un
cuadrados de los botones del men. llamaremos "Botn". rectngulo con las siguientes propiedades:
Cambiaremos de capa. Cmo es un botn lo que vamos a dibujar, - Alto: 30 px

seleccionaremos Botn como tipo de smbolo. - Ancho: 100 px
- Relleno: Slido
Vemos que se abre la ventana de edicin del - Color relleno: Gris claro
smbolo vaca. - Trazo: 1 pxel
- Color trazo: negro
Y le aplicaremos un efecto de bisel interior

de 2 pxeles.
Esta vez no generaremos un smbolo a partir de La ventana de edicin de smbolos de botn

un objeto dibujado en el lienzo sino que lo tiene una serie de subventanas donde
generaremos desde cero. podremos editar los diferentes estados del
botn. La utilizacin de smbolos de tipo Botn
Crearemos un smbolo nuevo clicando en el la veremos en prximos tutoriales.
icono Smbolo nuevo situado en la parte baja
del panel Biblioteca.

Colocaremos cinco instancias de este nuevo
smbolo y las distribuiremos en el lienzo tal
como muestra la imagen.
Nota: Al colocar instancias de smbolos de

botn aparecen automticamente las guas
de las zonas de recorte.
El uso de estas zonas de recorte lo veremos

en un prximo tutorial, ahora nos limitaremos
a ocultar la capa Capa de Web para no
verlas.

Ahora colocaremos el texto de Clicando sobre la instancia Generaremos un nuevo elemento de
estos botones. Seleccionaremos que representa el primer texto sobre cada instancia de botn
la herramienta de Texto. botn del men escribimos con las palabras: Mesas, Sofs,
la palabra "Sillas". Armarios y Camas. Estos textos no
los colocamos dentro del smbolo que
hemos generado para el botn ya que
de esta manera todos los botones
hubiesen tenido el mismo texto.

Editaremos el formato de los textos para Abramos el panel Estilos. Vemos que Vemos como se le habrn aplicado una
hacerlos grficamente ms atractivos. Fireworks dispone por defecto de una serie serie de propiedades al elemento de forma
de estilos. Cada icono corresponde a un automtica.
Resultara un poco pesado tener que conjunto de atributos.
editar todos los textos uno por uno. Es
mucho ms prctico realizar el proceso Seleccionemos el texto "Sillas" y
una nica vez y aplicarlo a toda una serie seleccionemos cualquier estilo predefinido
de elementos, tal como hemos visto con de texto.
los smbolos.
Para este caso podemos utilizar los Apliquemos el estilo escogido a todos los
Estilos de Fireworks. textos. Si el estilo tiene un cuerpo de letra
demasiado grande, le aplicaremos a todos
Un estilo es un conjunto de atributos, ya los textos un cuerpo de 15 pxeles.
sean de relleno, trazo, efectos o de texto.
De manera que al aplicar un estilo a un
elemento le aplicamos toda esta serie de
atributos en una sola operacin.

Lo interesante de los estilos es que podemos crear estilos Ahora generemos un elemento de texto debajo de cada caja. El texto que
propios. As podemos guardar todas las propiedades de trazo, escribiremos ser: "modelo" y el nmero de caja
relleno y efectos que hemos dado a un objeto, para luego aplicar
estas mismas propiedades a otros.
Veremos esta posibilidad con los textos de las fotografas.
Seleccionemos la capa "interior".


Seleccionaremos el primer elemento de texto y lo editaremos
con los siguientes valores:
- Tipo: Arial Black

- Cuerpo: 12
- Color: Azul oscuro
- Sin trazado
- Sin estilos

Introduciremos todas las propiedades que hemos
creado dentro de un estilo para poder aplicarlas al
resto de textos de forma automtica.
Con el texto seleccionado en el lienzo activaremos

la opcin Nuevo estilo en el men de opciones del
panel Estilos.
Como nombre de estilo introduciremos "Pie de foto" y clicaremos en Aceptar.

Si nos fijamos en el panel Estilos, aparece este nuevo estilo en la lista.
En el cuadro de dilogo Nuevo estilo debemos

seleccionar las propiedades del objeto que
queremos incluir en el estilo. Es posible elegir unas
propiedades y otras no. En nuestro caso las
seleccionaremos todas.
Ahora aplicaremos el estilo al resto de textos.


Llegados a este punto Para poder editar los botones del
mismo smbolo, no podemos Modificar > Smbolo > Separar
deberamos tener el documento men seleccionaremos la capa
modificar el primer rectngulo sin
tal como muestra la imagen. "Men".
modificar el resto tambin. A Vemos que el icono de instancia
menos que desvinculemos esta desaparece. Ahora los elementos
Un paso que queda por dar es El apartado que estamos
instancia de su smbolo. que formaban la instancia son
marcar en qu apartado de la desarrollando es el apartado
independientes al smbolo.
Web estamos. Esto lo "Sillas", por lo tanto cambiaremos
Teniendo la primera instancia del
indicaremos colocando el botn el color de relleno del primer
smbolo seleccionada utilizaremos Ahora podemos seleccionar el
del apartado con un tono ms rectngulo. Como todos los
el siguiente comando: rectngulo y cambiar el color de
oscuro. rectngulos son instancias del
relleno.

El ltimo paso a dar sera colocar las fotografas de los modelos dentro Finalizado este tutorial sobre el uso de los smbolos y los estilos el
de las cajas. estudiante deber realizar una prctica similar para profundizar en el
tema.
Importaremos el archivo "fotografias-sillas.png", dentro de la capa
"interior". Se deber realizar el diseo de una Web de tipo catlogo de productos
utilizando smbolos y estilos para generar elementos repetitivos. El
Este archivo contiene las ocho fotografas situadas en diferentes proyecto deber constar de al menos tres pginas de productos.
planos. Una vez importadas las distribuiremos correctamente dentro de
la pgina. Nota: Al trabajar con varios documentos, fijmonos que mientras
tengamos el documento que contiene los smbolos abierto podremos
acceder a ellos desde el panel Biblioteca en cualquier documento. En
el caso de no tener abierto dicho documento, desde el men de
opciones del panel Biblioteca podemos importar estos smbolos
indicando el documento de origen.
En el caso de los estilos, una vez creados quedan en memoria del

programa, estando siempre en la lista de estilos. Para no almacenar un
nmero elevado de estilos, una vez acabado el proyecto eliminaremos
los estilos creados. En el caso de volver a necesitarlos, desde el
mismo panel tambin podemos importar los estilos que contiene un
documento en concreto.
Tutorial 6. Creacin y remaquetacin de un banner

Este tutorial consiste en la creacin de un sencillo
Banner. La realizacin de esta prctica nos
permitir conocer las posibilidades de Fireworks
para la animacin de grficos.
Abriremos el archivo "Banner.png"
Este archivo contiene los elementos grficos que

necesitamos para la animacin del banner.

La animacin de una imagen se divide principalmente en estados, En el panel Estados podemos ver el nmero de estados que
que indican los pasos del movimiento de los objetos a travs del contiene el documento en curso. En el caso de trabajar en un
tiempo. Las animaciones se construyen a partir de la secuencia de documento de imagen que an no contiene animacin, como es el
estos estados. caso del documento que hemos abierto, el documento contiene un
nico estado
El contenido de cada uno de estos estados puede verse en el panel
Estados. Desde este panel podemos cambiar de un estado a otro, Para aadir un estado nuevo al documento haremos clic en el botn
y modificar el contenido de cada uno de ellos, ya sea manualmente estado nuevo situado en la parte inferior derecha del panel estados.
o bien mediante las funciones automticas de Fireworks orientadas
a la creacin de animaciones. Para nuestro ejemplo, repetiremos esta accin tres veces ms,
hasta obtener cinco estados dentro del panel Estados..
Con el panel Estados tambin podemos controlar la duracin de
una animacin, definiendo el nmero de estados que contiene y el
tiempo de espera entre cada uno de ellos.

Dentro del panel Estados podemos seleccionar el estado en el que
queremos trabajar. Podemos ver que tenemos activo el estado 5 de
la animacin. Este estado, igual que el resto de los que hemos
aadido, de momento aparece vaco, es decir sin ningn objeto
dentro del rea de trabajo.
Seleccionando cualquier estado, veremos en el rea de trabajo los

objetos que contiene. Seleccionaremos el estado 1, que es el que
contiene los objetos de la imagen inicial.
Al seleccionar un objeto dentro de un estado aparece un circulo

marcado en la parte derecha de la lnea del estado del panel
Estados, que nos indica que tenemos seleccionado un elemento
dentro del estado. Mediante este botn podemos seleccionar
objetos en un estado y trasladarlos a cualquier otro estado de la
secuencia.

Todos los estados de un documento
Fireworks tienen la misma estructura de
capas. Por ejemplo, si creamos una capa
nueva dentro de un estado sta aparecer
en el resto de estados. Sin embargo es
diferente la estructura de capas y el
contenido de las mismas. El contenido de
la capa, o sea los objetos que contiene,
ya sean trazados, textos o bitmaps, es
independiente entre un estado y otro.
Observemos el panel Capas cambiando

de estado, veremos que todos los estados
contienen las capas Fondo, Reloj y
Texto, que es la estructura de capas del
documento original. Sin embargo, las
mismas capas en los estados no
comparten los objetos que contienen. Es
por esta razn que los estados que
hemos aadido no contienen los objetos
que posea el primer estado.

Podemos seleccionar un objeto de una capa y copiarlo en el resto de estados. De este modo
tendremos el mismo objeto en todos los estados, es decir que ste permanecer a lo largo de la
animacin.
Seleccionaremos la forma automtica de la capa reloj, desde el estado 1, y lo copiaremos en el

resto de estados.
Ahora tenemos el mismo elemento en todos los estados, pero de forma independiente en cada
uno de ellos. Es decir, que si modificamos el objeto en un estado, cambindole la posicin
dentro del rea de trabajo, cambindole la escala o deformando su figura, los cambios slo
afectaran al estado en el que los realizamos, quedando el resto de estados con el trazado
original.
De este modo podemos modificar un objeto de forma progresiva a lo largo de varios estados,
por ejemplo variando la posicin de las agujas. La sucesin de estos estados uno detrs del otro
es lo que har el efecto de movimiento del objeto a lo largo de la animacin.

Ahora modificaremos la forma automtica de Fireworks. Cambiaremos las agujas
del reloj en cada estado para que parezca que el tiempo avanza 5 minutos.
Estado 1 Estado 2 Estado 3 Estado 4 Estado 5


Fireworks dispone de una forma automtica de compartir los Seleccionaremos la capa "Fondo" desde el primer estado, y
objetos de una capa a lo largo de todos los estados de la seleccionaremos esta opcin Compartir esta capa. Si ahora cambiamos de
animacin, de modo que no sea necesario seleccionarlos y estado, veremos que el contenido de la capa Fondo, que tenamos en el
copiarlos en cada estado. Esto resulta especialmente til cuando estado 1, ahora es comn a todos los estados.
tenemos objetos que permanecen estticos a lo largo de toda la
animacin, como por ejemplo una imagen de fondo. Es importante saber que los objetos de una capa compartida no son
independientes en cada estado, por lo tanto al modificar un objeto dentro de
Para ello se utiliza la opcin Compartir capa en estados del men una capa compartida los cambios realizados se aplicarn en todos los
de opciones del panel Capas. estados. Por ello, utilizaremos la opcin Compartir capa en estados
solamente en capas que contengan objetos estticos comunes a todos los
estados, es decir que no contengan ninguna animacin.
Nota: El icono en forma de pgina al lado de la capa nos indica que esta
capa se esta compartiendo.

Otro mtodo ms complejo de animacin de objetos Se abre la ventana Propiedades de smbolo, donde indicaremos el nombre del smbolo y que
es convirtindolos en smbolos de animacin. Los se trata de un smbolo de animacin. A este smbolo le llamaremos "Texto animado". Al
smbolos de animacin se guardan de forma crear un smbolo de animacin tambin debemos indicar las propiedades de la animacin en
automtica en el panel Biblioteca, de modo que la ventana Animar.
podemos insertar varias instancias de una animacin
en un mismo documento o reutilizarlas en otros
documentos. Adems podemos variar las propiedades
de cada instancia, como por ejemplo su tamao o su
rotacin. De este modo, tambin podremos modificar
los objetos que componen el smbolo de animacin
para actualizar automticamente estos cambios en
todas las instancias del documento.
En nuestro ejemplo, seleccionaremos el texto de la

capa Texto y los convertiremos en un smbolo de En esta ventana podemos indicar el nmero de estados que tendr la animacin del smbolo
animacin, para animarlo posteriormente. y las caractersticas de la animacin. Podemos indicar el desplazamiento que se le aplicar,
el cambio de escala, de opacidad o la rotacin que tomar. Estas propiedades se pueden
Para convertirlo en smbolo utilizaremos el comando cambiar posteriormente en cualquier momento.
Modificar > Smbolo > Convertir en smbolo.
En nuestro caso indicaremos una duracin de 5 estados. Cabe sealar que en el caso de
indicar un nmero de estados mayor que el nmero de estados del documento, los estados
de ms se aadirn automticamente al documento. El resto de propiedades de animacin
las dejaremos tal como vienen por defecto, ya que en nuestro caso crearemos la animacin
del smbolo posteriormente.

Seleccionemos el smbolo Texto animado en el estado 1 y Este proceso de crear dos estados clave, el primero en la posicin
seleccionando desde el punto rojo que aparece lo desplazamos inicial del objeto y el segundo en su posicin final para que
hacia la izquierda. Fireworks calcule de forma automtica todos los estados
intermedios, se denomina interpolacin. De este modo se crea una
El punto verde indica la posicin inicial, el punto rojo indica la trayectoria del objeto, que luego podremos editar.
posicin final, y los puntos azules indican las posiciones
intermedias.
La interpolacin es un proceso til
para movimientos de un objeto a
travs del lienzo y tambin para
objetos con efectos automticos que
cambian en cada estado de la
animacin.
Cmo podremos observar, el smbolo

"Texto animado" solo est situado el
la capa"Texto" del primer estado pero
est visible en los 5 estados que dura
la animacin.

Una vez creada la animacin podemos previsualizarla con los La duracin del estados indica el tiempo que se va a mostrar el estado actual
controles situados en la parte baja de la ventana del documento. antes de pasar al estado siguiente. En Fireworks este valor se especifica en
centsimas de segundo. Por ejemplo, el valor 50 hace que el estado se
muestre durante medio segundo, mientras que con el valor 200 se muestra
durante 2 segundos.
Para variar la duracin de un estado hay que hacer doble-clic sobre la columna
Como podemos comprobar la animacin est en loop continuo. de la derecha del panel estados en el estado deseado.
Aparece el men de opciones de Demora de estados, donde introduciremos la

duracin deseada. Tambin encontramos la opcin Incluir al exportar, que
indica si este estado se incluir o no en la animacin al exportar el documento.
Para esta animacin daremos una duracin a los estados de 30 a los cuatro
primeros y de 300 al ltimo.
Si nos fijamos en la columna derecha del panel estados

encontramos la duracin del estado dentro de la animacin.

Con el botn Bucle de la animacin podemos definir cuntas veces Para exportar una imagen animada deberemos elegir la opcin de
queremos que se reproduzca la animacin. Seleccionando la formato GIF animado. Cualquier otro formato exportara una nica
opcin Siempre en el men emergente Bucle de la animacin la imagen del primer estado. Por lo tanto seleccionaremos este
animacin se repetir contnuamente. formato.
El resto del proceso de optimizacin de la imagen es el mismo que

si se tratase de una imagen esttica.
Igual que con las imgenes estticas, antes de exportar la

animacin deberemos optimizar la imagen para reducir el tamao
del archivo lo mximo posible.
Para optimizar la animacin utilizaremos el panel Optimizar.


Finalizaremos el proyecto exportando la animacin. Utilizaremos el Desde la ventana de Presentacin preliminar de la exportacin
comando exportar. podemos modificar los ajustes de optimizacin seleccionados
anteriormente en el panel Optimizar. En la ficha Animacin
Archivo > Exportar podemos ver y controlar los estados que contiene la animacin.
Desde esta vista podemos modificar las opciones seleccionadas
Seleccionaremos la opcin "Slo imgenes". anteriormente en el panel estados, como la duracin de cada
estado o el bucle interactivo de la animacin.
Al exportar imgenes (ya sean animadas o estticas) tambin
podemos hacer uso de la Presentacin preliminar de la exportacin. Finalizada la exportacin podemos comprobar el banner que hemos
Esta ventana la abriremos desde el men Archivo > Presentacin creado abrindolo con el explorador web.
preliminar de la imagen.
La prctica a realizar ser la creacin de un banner anunciando la
pgina web personal del alumno.

Esta segunda parte del tutorial consiste en la modificacin de un Archivo original "banner-Fireworks.png"
documento previamente editado.
El documento que modificaremos ser el archivo "banner-

Fireworks.png".
A la derecha podemos observar el documento original y el

documento modificado.
Para agilizar el proceso de edicin, Fireworks dispone del comando

Buscar y Reemplazar. Con este comando podemos buscar y
reemplazar elementos, tales como direcciones URL, ajustes
tipogrficos, color y texto, en uno o varios archivos de forma Documento modificado
automtica.

Para realizar las funciones de bsqueda y Antes de realizar una funcin de bsqueda y La eleccin del mbito de bsqueda la
reemplazo de elementos de uno o varios reemplazo debemos definir el mbito de bsqueda, realizaremos en el men emergente
documentos Fireworks utiliza el panel es decir tenemos que indicar dnde queremos que Buscar en, situado en la parte superior
Buscar y reemplazar. se realice la bsqueda. Fireworks permite efectuar del panel.
las operaciones de bsqueda y reemplazo en cinco
Podemos abrir este panel desde el men mbitos diferentes:
Ventana.
1. Dentro de todo el documento
2. Dentro del estado en uso
3. Dentro de una seleccin
4. Dentro de varios archivos
Buscar seleccin: busca y reemplaza elementos Para nuestro ejemplo seleccionaremos el

solamente en los objetos que estn seleccionados. mbito Buscar en documento.
Buscar estado: busca y reemplaza elementos

solamente dentro del estado en curso. Esto es
vlido para documentos de animacin.
Buscar en documento: busca y reemplaza

elementos en el documento completo.
Buscar archivos: busca y reemplaza elementos

en varios archivos.

Una vez definido el mbito de bsqueda, es decir dnde
queremos realizarla, indicaremos los atributos de bsqueda, osea el
qu queremos buscar y reemplazar.
Fireworks permite efectuar cinco tipos diferentes de operaciones de

bsqueda y reemplazo:
1.Buscar texto
2.Buscar fuente
3.Buscar color
4.Buscar URL El primer cambio que realizaremos a nuestro documento ser
5.Buscar fuera de Web216 cambiar la palabra "perfecta" por "ptima".
La eleccin del Tipo de bsqueda la realizaremos en el men Seleccionaremos la opcin Buscar texto en el men emergente
emergente Buscar Tipo. Buscar Tipo.
Con la opcin Buscar texto del panel Buscar podemos buscar y

reemplazar palabras, frases o cadenas de texto de documentos
Fireworks de un modo similar a los procesadores de texto estndar.

En la opcin Buscar introduciremos el Introduciremos la palabra perfecta en la El prximo paso ser encontrar todos los casos en
texto que queramos seleccionar; en la opcin Buscar del panel Buscar y la palabra que el texto se encuentra en el documento. Para ello
opcin Cambiar por introduciremos el ptima en la opcin Cambiar por. clicaremos en el botn Buscar. Como podemos ver
texto por el que queremos reemplazar el en el rea de trabajo, el texto perfecta del objeto de
texto localizado. Activaremos la opcin Palabra completa. texto queda seleccionado.
La opcin Palabra completa encuentra el

texto exactamente como aparece en la
opcin Buscar, no como parte de
cualquier otra palabra. Utilizaremos el botn Reemplazar para sustituir el
texto encontrado por el texto introducido en la opcin
Coincidir maysculas y minsculas se Cambiar por.
utiliza para distinguir entre letras
maysculas y minsculas.
Expresiones normales busca partes de

una palabra o nmeros segn Nota: En el caso de buscar una palabra o texto que
determinadas condiciones. se repitiese varias veces dentro del documento o
documentos en los que estemos buscando, podemos
volver a clicar en el botn Buscar y accederamos al
siguiente caso en que se encuentre este texto.
Mediante la opcin Reemplazar todo se reemplazan
todos los casos en que se encuentre el texto buscado
en una sla operacin.

Mediante la opcin Buscar fuente Ahora colocaremos el texto de estos botones.
del men emergente Buscar Tipo Seleccionaremos la herramienta de Texto.
podemos buscar y reemplazar las
fuentes del texto y sus Seleccionaremos la tipografa Arial y el estilo Negrita y
caractersticas tipogrficas. Cursiva.
Seleccionaremos esta opcin para En el campo Cambiar por indicaremos las caractersticas de
cambiar la tipografa de la frase la fuente que deseemos utilizar.
"Fireworks CS5".
Seleccionaremos la tipografa Impact y el estilo Mismo estilo.
En la parte superior del panel,
especificaremos las caractersticas Para acabar seleccionaremos un cuerpo de letra de 30
de la fuente que queremos buscar. puntos.
Seleccionaremos la tipografa, el
estilo y el cuerpo de letra. Las De esta manera, le estamos indicando a Fireworks que
opciones Mn. y Mx. permiten busque en todo el documento todos los textos que estn
establecer el tamao mnimo y el escritos con tipografa Arial con los estilos Negrita y Cursiva,
tamao mximo, en puntos, de la y que una vez encontrados los cambie a tipografa Times
fuente que se desea buscar. New Roman, manteniendo el formato de estilo (Negrita y
Dejando estos valores en 1 y 999 Cursiva), pero cambiando el cuerpo de letra a 30 puntos.
respectivamente, Fireworks
buscar en todos los tamaos de Iniciaremos la bsqueda y el reemplazo.
letra.

Otra posibilidad muy interesante de bsqueda y Seleccionaremos la opcin Trazos y rellenos en Nota: Otra opcin de bsqueda y
reemplazo en Fireworks es la de los colores de los el men emergente Aplicar a. reemplazo relacionada con los colores
objetos. Para buscar y reemplazar colores para su uso en la Web es la
seleccionaremos Buscar color en el men Seleccionaremos el color Blanco en la paleta bsqueda y reemplazo de colores
emergente Buscar Tipo. Buscar y un color Amarillo claro en la paleta Websafe. Un color Websafe es un
Cambiar por. Ahora procederemos a la color que est incluido en la paleta de
bsqueda y el reemplazo. colores Web216. Un color no incluido
en esta paleta no es comn en
plataformas Macintosh y Windows.
Seleccionando la opcin Buscar fuera
de Web216 en el men emergente
Buscar Tipo, buscaremos todos los
colores que no sean Websafe y los
reemplazaremos por los colores
La ltima opcin de bsqueda y reemplazo es Websafe ms cercanos. Hay que
la de direcciones URL. En los prximos tener en cuenta que Buscar fuera de
tutoriales veremos cmo en Fireworks Web216 acta en los colores de
En el men emergente Aplicar a indicaremos a qu podemos aadir un vnculo URL a una parte trazo, relleno y efectos de los objetos,
tipo de objetos se aplicarn la bsqueda y el concreta de la imagen, como podra ser un pero no acta en los pxeles de
reemplazo. Podemos escoger que la bsqueda se objeto con forma de botn, para enlazar con objetos de mapa de bits.
realice slo en los colores de Relleno y Trazo, en otra pgina Web. Seleccionaremos Buscar URL
los colores de Relleno, Trazo o Efectos por en el men emergente Buscar Tipo para buscar
separado, o en todas las propiedades de color. y reemplazar las direcciones URL aplicadas a
los objetos.

Trabajando en Fireworks podemos encontrarnos en muchas Una manera muy til de ahorrar tiempo y esfuerzo puede ser grabar
ocasiones que repetimos varias veces una misma operacin en estas operaciones en una Secuencia de comandos. Posteriormente
distintos objetos o documentos. podremos aplicar esta secuencia automticamente en cualquier
otro documento.
Pongamos por ejemplo que este documento forma parte de una
serie de banners de diferentes programas pero todos con el mismo Con las Secuencias de comandos podemos realizar tareas tales
estilo grfico. El realizar estos cambios de tipografa, color y cuerpo como la aplicacin de cambios a texto, colores, trazos y rellenos,
nos llevara a tener que repetir estos procesos para todo el resto de color de lienzo, tamao y resolucin de los documentos, o
documentos. aplicacin de efectos o distorsiones a objetos. Fireworks permite
guardar en una Secuencia de comandos prcticamente cualquiera
de sus opciones disponibles, de modo individual o agrupado.
Para ello, basta con realizar en un documento todos los pasos que
deseemos incluir en la Secuencia de comandos y, a continuacin,
utilizaremos el panel Historial para guardarlos como una Secuencia
de comandos, aplicable en cualquier documento.

Abramos el panel Historial.
Este panel incluye la lista de los pasos realizados

durante una sesin de trabajo con Fireworks. A medida
que vamos realizando pasos, stos se almacenan en
una lnea independiente en el panel Historial.
Por defecto, el panel muestra las 20 ltimas acciones

realizadas al documento. Sin embargo, este valor se
puede modificar en cualquier momento a travs de las
Preferencias en el men Editar. Hay que tener en
cuenta que el panel Historial almacena la informacin
en la memoria, y que una gran cantidad de acciones
puede influir negativamente en el rendimiento del
Podemos guardar grupos de pasos realizados en el panel Historial como un
ordenador.
Comando. De este modo podremos guardar el proceso de cambio de color, de
tamao o de efectos realizados a un objeto y aplicar esta secuencia de pasos a
Nota: Desde el panel Historial podemos deshacer o
cualquier otro objeto de modo automtico.
volver a reproducir los pasos realizados al documento.
Obviamente slo podremos deshacer los pasos
Los Comandos guardados se almacenan como archivos JavaScript en la carpeta
contenidos dentro del panel. Para deshacer un accin
Adobe Fireworks CS5 / Configuration / Commands.
arrastraremos el indicador de Deshacer hacia la parte
superior del panel hasta llegar al paso que deseemos
Los Comandos guardados pueden ejecutarse en cualquier documento de Fireworks y
deshacer o volver a reproducir.
no son especficos del documento en el que se crearon.

Generaremos un comando que contenga Seleccionaremos todos los pasos
todas la modificaciones realizadas al clicando sobre ellos manteniendo
documento "Banner-Fireworks.png". pulsada la tecla Mayscula.
Para guardar los pasos como un Comando Guardaremos la seleccin de los pasos
seleccionaremos en el panel Historial los del panel Historial en un Comando
pasos que queremos guardar. utilizando el botn Guardar situado en la
parte inferior derecha del panel.
Al guardar el comando le tendremos que

dar nombre. Para este caso llamaremos
al comando "cambio de estilo".
El comando guardado ahora aparece en

el men Comandos junto a los
comandos preestablecidos de
Fireworks.

Para reproducir un comando guardado en otro objeto, o sea aplicar Otro mtodo de volver a aplicar una secuencia de pasos a otro
los pasos que contiene el comando, tan slo tenemos que objeto, es hacerlo directamente desde el panel Historial a travs del
ejecutarlo seleccionndolo desde el men Comandos. botn Reproducir.
Para ver el ejemplo cancelaremos todos los pasos realizados al

documento y los volveremos a aplicar a partir del comando.
Seleccionaremos el comando:
Archivo > Descartar Cambios

Con este botn podemos aplicar las acciones que estn
seleccionadas en el panel Historial a otros objetos seleccionados en
Esta opcin devuelve el documento al estado en el que qued la el rea de trabajo.
ltima vez que fue guardado. En el caso de haber guardado los
cambios realizados en el transcurso del tutorial abriramos de nuevo En nuestro documento este tipo de aplicacin de secuencia de
el documento original. pasos no nos es funcional, ya que no tenemos ninguna necesidad
de volver a aplicar una secuencia de comandos de bsqueda y
Ahora que tenemos el documento en el estado original, reemplazo en el mismo documento. Pero esta opcin es muy til
ejecutaremos el comando "cambio de estilo". cuando hemos realizado una secuencia de transformaciones
(cambio de tamao, color, trazo...) a un objeto y queremos repetir el
Podemos observar que se han realizado todos los pasos que dimos proceso en otro objeto dentro del mismo documento.
en el transcurso del tutorial.

Siguiendo con el ejemplo citado anteriormente, si este
documento fuese el primero de una serie en los que
hemos de realizar los mismos pasos que hemos
grabado en el comando, lo que tendramos que hacer
ahora sera abrir estos documentos y ejecutar el
comando en cada uno de ellos. Para procesar archivos por lotes seleccionada a la lista de archivos del
seleccionaremos el comando Procesar por proceso por lotes.
Podra darse el caso que incluso el trabajo de abrir uno lotes en el men Archivo.
a uno todos los archivos para ejecutar el comando nos Con el botn Eliminar eliminamos los
resultase pesado debido al nmero de archivos. Este En la ventana Lote, seleccionaremos los archivos seleccionados de la lista para el
es otro de los procesos que Fireworks permite archivos que deseemos procesar. Podemos proceso por lotes.
automatizar. seleccionar archivos de distintas carpetas o
grupos, segn el tipo de archivo. Mediante la opcin Incluir archivos
El proceso para modificar de forma automtica un actuales aadiremos a la lista todos los
grupo de archivos en una sola operacin, Fireworks lo Con el botn Aadir agregaremos los documentos que tengamos abiertos en
denomina "proceso por lotes". archivos y carpetas seleccionados a la lista ese momento. Estos documentos no
de archivos para procesar por lotes. Si aparecern en la lista de archivos para
Para el proceso por lotes podemos seleccionar un seleccionamos una carpeta, todos los procesar por lotes, pero s que se
grupo de archivos y aplicarles a todos un formato archivos vlidos y legibles contenidos en ella incluirn. Una vez hayamos seleccionado
concreto, aadirles una configuracin de optimizacin, se aaden al proceso por lotes. los documentos a los que quisisemos
escalarlos, Buscar y reemplazar texto, colores, URLs, realizar este proceso por lotes
fuentes o colores que no son Web216, cambiarles de Con el botn Aadir todos aadimos todos seleccionaramos el botn Seguir.
nombre agregando un prefijo o un sufijo, o ejecutar los archivos vlidos de la carpeta
Comandos sobre un grupo de archivos.

En la ventana Procesar por lotes indicaremos
el proceso a realizar. En este supuesto caso
sera el comando guardado "cambio de
estilo".
Continuaramos el proceso pulsando el botn

Seguir.

A continuacin deberemos introducir las La opcin Guardar archivos de comandos, permite guardar todas las acciones
opciones de guardado de los archivos una introducidas en el lote y su configuracin en un archivo JavaScript. De esta
vez aplicadas las acciones seleccionadas en manera podremos volver a utilizar fcilmente los procesos por lotes en el futuro.
los apartados anteriores. Estas opciones las Una vez guardado, podremos volver a aplicar las acciones del proceso por lote
seleccionaremos en la ventana Guardando siempre que lo necesitemos a travs del comando Archivo > Ejecutar archivo
archivos. de comandos, e introduciendo los archivos a los que se desea aplicar este
proceso por lotes.
La opcin Misma ubicacin que el archivo
original guarda el archivo en la misma Pulsando el botn Lote procederamos a la ejecucin de los comandos del
carpeta en la que se encuentra el archivo proceso por lotes.
original y sobrescribe el archivo original si los
nombres y el formato coinciden. La opcin
Ubicacin personalizada permite elegir otra
carpeta para guardar los archivos
procesados.
Tambin podemos crear copias de seguridad

de los archivos originales. Siempre es ms
seguro realizar una copia de seguridad de los
archivos, ya que de esta manera si nos
hemos equivocado al aplicar las acciones en
el proceso por lotes siempre podemos
recuperar los archivos originales.

Finalizado este tutorial sobre procesos automticos queda como
prctica para el alumno la realizacin del ejemplo citado.
Generaremos una serie de banners para 10 programas diferentes,

todos con el mismo estilo (composicin, nmero de elementos...),
pero con elementos personalizados (nombre del programa,
eslgan, colores...).
Una vez generada esta serie de 10 banners, generaremos otra

serie grficamente diferente (otras tipografas, tamaos, posicin
de los elementos, grficos nuevos, animaciones...)
Obviamente, tanto para la realizacin de los cambios a las serie de

banners como para el primer proceso de creacin, el uso de los
comandos, buscar y remplazar y los procesos por lotes es
fundamental para una reduccin considerable del trabajo a realizar.
Por eso se aconseja un estudio previo a la ejecucin del proyecto
sobre qu pasos vamos a dar y cules se pueden realizar de forma
automtica.
Tutorial 7. Creacin de un grfico interactivo y un minisite

En este tutorial y en el siguiente se abordan las capacidades de Archivo "pack-adobe.png"
Fireworks para crear pginas Web interactivas.
Empezaremos realizando un banner interactivo desde el cual

podamos linkar a mltiples pginas web.
Utilizaremos el diseo realizado en el archivo "pack-adobe.png".
Nuestra intencin ser que al clicar sobre cada una de las cajas se
enlace a la pgina web especfica de cada programa.

Abramos el archivo "pack-adobe.png". Comenzaremos por definir una zona interactiva rectangular para el
texto ADOBE CREATIVE SUITE 5.
El primer paso a dar ser definir las zonas interactivas, o Hot
Spots. Seleccionaremos la herramienta Zona interactiva rectangular. Con
esta herramienta dibujaremos un rectngulo sobre el texto.
En general, una zona interactiva es un rea de un grfico que se
vincula a una direccin URL correspondiente a otra pgina web,
para que cuando el usuario clique sobre dicha zona se produzca un
salto hacia esa pgina.
En nuestro ejemplo las zonas interactivas sern el ttulo y las cajas

de los programas.
Podemos definir una zona interactiva dibujndola directamente en

el rea de trabajo con las herramientas de Zona interactiva
rectangular, circular y poligonal.
La zona interactiva queda representada mediante un rectngulo

translcido de color celeste. Esta representacin aparece
nicamente indicada en Fireworks a efectos de su edicin y no ser
visible en la imagen final.

Una vez dibujadas las zonas interactivas podremos moverlas y Una vez creada la primera zona interactiva, crearemos otra para el
acomodarlas tirando de los manejadores igual que con cualquier resto de programas. Iremos con cuidado de no superponer zonas
objeto en Fireworks. interactivas.
Ahora crearemos las zonas interactivas para las cajas de los

programas. Para esta zonas utilizaremos la herramienta Zona
interactiva poligonal.
Con esta herramienta generaremos un polgono que contenga la

caja del pack de Adobe.
Conforme vamos aadiendo vrtices al polgono se va

conformando la zona interactiva poligonal. Para cerrar el polgono,
una vez clicado el ltimo vrtice, hay que volver a clicar en el
primero.

Las zonas interactivas que acabamos de dibujar tienen su Las zonas interactivas son objetos especiales, denominados
correspondiente representacin en el panel Capas. Si ahora Objetos Web, que sirven para definir las instrucciones HTML que
observamos este panel veremos que las cuatro zonas interactivas se generarn automticamente en el momento de exportar la
aparecen como objetos de la Capa de Web. imagen. Es por esta razn que estos objetos se sitan en la Capa
de Web, una capa especial reservada para los Objetos Web.
La Capa de Web y los objetos incluidos en ella se pueden

manipular dentro del panel Capas exactamente igual que cualquier
capa u objeto en Fireworks. Podemos activar o desactivar su
visibilidad, maximizar y minimizar, cambiar el orden, duplicar,
eliminar, etc.

De igual modo que todos los objetos en Fireworks, las zonas Tambin es posible cambiar la forma de una zona interactiva desde
interactivas contienen puntos y trazados que pueden arrastrarse el Inspector de Propiedades.
para cambiar su forma, tamao y posicin. Asimismo se les puede
aplicar las herramientas Transformar e Inclinar, aunque no es
posible aplicarles la herramienta Estilo libre.
Slo hay que tener en cuenta que una zona interactiva rectangular
cambiar de posicin y de dimensiones, pero seguir siendo
rectangular. De igual modo, una zona circular cambiar de posicin
y de dimetro, pero continuar siendo circular.
De este modo, por ejemplo, podemos transformar una zona circular

en una zona poligonal, para luego editar la posicin de sus vrtices.
Otra opcin interesante del Inspector de Propiedades es el Selector

de color, localizado arriba a la derecha del men emergente Forma.
Con l podemos cambiar el color de una o varias zonas interactivas
seleccionadas. Esto resulta muy til para organizar los objetos Web
y para facilitar su visualizacin en el rea de trabajo, especialmente
cuando una imagen contiene muchos objetos Web.

Una vez creadas las zonas interactivas del documento, Vnculo: en este campo se introduce la direccin URL a vincular, o
procederemos a introducirles los vnculos URL. bien se puede escoger una direccin utilizada anteriormente del
men emergente de la derecha.
Para aplicar un vnculo URL y determinar el destino de una o varias
zonas interactivas utilizaremos el Inspector de Propiedades. Alt: en este campo se introduce un texto alternativo, que es el que
aparece en la pgina Web mientras se descarga el grfico o
Al seleccionar una zona interactiva observamos en la parte derecha cuando ste no se descarga correctamente.
del Inspector de Propiedades tres campos de texto en los cuales
definiremos el vnculo. Destino: en este campo se introduce el objetivo del vnculo,
tambin denominado target. El objetivo es la ventana del
navegador Web, o bien el marco de la pgina donde se abre la
pgina de destino. Tambin se pueden escoger destinos
reservados del men emergente de la derecha.
NOTA:
_blank: carga la pgina de destino en una ventana nueva.
_parent: carga la pgina de destino en la ventana del marco que
contiene el vnculo.
_self: carga la pgina de destino en el mismo marco o en la misma
ventana que el vnculo.
_top: carga la pgina de destino en la ventana completa,
eliminando todos los marcos que pudiera contener.

En nuestro ejemplo crearemos un vnculo para la zona interactiva Abramos el panel URL.
correspondiente al texto ADOBE CREATIVE SUITE 4 para que
se dirija a la pgina: Ventana > URL
http://www.adobe.com/es/products/creativesuite/
que se abrir en una ventana nueva del navegador Web.
Podremos modificar un vnculo URL de la zona interactiva en

cualquier momento. Para ello, basta con seleccionar la zona
interactiva y modificar los valores del vnculo en el Inspector de
Propiedades.
El panel URL sirve para almacenar y organizar direcciones de
Para aplicar un vnculo URL a varias zonas interactivas a la vez, Internet de uso frecuente, para aplicarlas como vnculos en
basta con seleccionarlas (con la tecla Maysculas) e introducir los cualquier documento Fireworks. De modo que si vamos a utilizar
valores del vnculo en el Inspector de Propiedades, igual que si se una direccin en varios documentos, conviene guardarla en este
tratara de una zona interactiva individual. panel a modo de biblioteca.

Para poder disponer de una direccin, en primer Observamos que la direccin URL queda Podemos crear tantas bibliotecas como
lugar hay que aadirla a la biblioteca, insertando aadida a la biblioteca de vnculos URL. estimemos necesarias y, en general, resulta
la direccin en el campo Vnculo y clicando el conveniente crear una nueva biblioteca para
botn Aadir Vnculo a biblioteca, a la derecha cada proyecto que realicemos, a efectos de
del campo. tener las direcciones organizadas y no
mezclarlas. Para ello se utiliza la opcin Nueva
Seleccionemos la zona interactiva biblioteca de URL del men de opciones del
correspondiente al texto "ADOBE CREATIVE panel.
SUITE 4".
Vemos que la direccin URL que le aadimos

aparece en el campo Vnculo. Si quisisemos aadir esta direccin a otra
zona interactiva bastara con seleccionar la
Cliquemos ahora en el botn Aadir Vnculo a zona y clicar sobre la lnea correspondiente
biblioteca. en la biblioteca del panel URL.

Una vez creadas las bibliotecas podemos seleccionarlas del men Continuaremos con nuestro ejemplo.
emergente a la derecha del campo Biblioteca segn nuestra
conveniencia, para as disponer del grupo de direcciones que El siguiente paso que daremos ser aadir los vnculos
contenga. al resto de zonas interactivas.
El panel URL tiene ms opciones, en las que destacan las opciones Los vnculos sern los siguientes (de izquierda a derecha):
Borrar URLs no utilizadas y Suprimir URL o su equivalente el icono
de Papelera, que sirve para eliminar URLs de la biblioteca de modo Para el pack Adobe Creative Suite 4 Design Premium
selectivo. http://www.adobe.com/es/products/creativesuite/design/
Tambin es importante saber que si se utilizan URLs de biblioteca, y para el pack Adobe Creative Suite 4 Web Premium
en el caso de modificarlas, stas se modifican automticamente al http://www.adobe.com/es/products/creativesuite/web/
abrir los documentos que las utilicen. Adems, Fireworks dispone
de funciones de bsqueda y sustitucin para cambiar URLs en Para el pack Adobe Creative Suite 4 Production Premium
varios documentos mediante la ventana Buscar y reemplazar. http://www.adobe.com/es/products/creativesuite/production/
Por ltimo, tambin es importante saber que las bibliotecas URL Y para el pack Adobe Creative Suite 4 Master Collection
son pginas web que contienen las direcciones y que se almacenan http://www.adobe.com/es/products/creativesuite/mastercollection/
en la carpeta Configuration/URL Libraries dentro de la carpeta del
programa Fireworks. O sea que tambin podemos importar
cualquier biblioteca de direcciones URL insertando una copia de
una pgina web en dicha carpeta.

Una vez creado el grfico con zonas interactivas procederemos a Aparece el cuadro de dilogo Exportar, donde indicaremos el
exportarlo para su funcionamiento en un navegador Web. destino de los ficheros y las opciones de exportacin.
El resultado sern dos documentos: el grfico propiamente dicho y Para nuestro ejemplo exportaremos los documentos directamente
un documento en formato HTML conteniendo las instrucciones para al escritorio.
cargar el grfico, la definicin de las zonas interactivas y sus
acciones al clicarlas. El resto de las opciones en principio no habra que modificarlas. En
el campo Guardar debera estar seleccionado el valor HTML e
A este tipo de documentos HTML se los denomina Mapas de imgenes. En el campo HTML debera estar seleccionado el valor
Imgenes, o Image Maps, ya que contienen la definicin de todas Exportar Archivo HTML. En el campo Divisiones debera estar
las coordenadas correspondientes a las zonas interactivas para su seleccionado el valor Ninguno.
manejo por parte del navegador Web.
Una vez obtenidos estos dos documentos, ya estarn listos para su

publicacin en la Web.
Procedamos a exportar este documento.
Seleccionamos la configuracin predeterminada JPEG Calidad

superior en el panel Optimizar.
Ahora utilicemos el comando Archivo > Exportar.


Como resultado se crean los dos documentos en el escritorio. Si Tambin podemos abrir este documento con un editor de textos
ahora salimos a Windows veremos los documentos pack- para ver el cdigo HTML. Como se puede apreciar, no es necesario
adobe.htm y pack-adobe.jpg conocer el lenguaje HTML para crear pginas Web en Fireworks.
Llegados a este punto recomendamos experimentar construyendo

una pequea Web de tres o cuatro pginas utilizando zonas
interactivas y vincularlas entre s para poner en prctica los
conocimientos adquiridos. Para vincular pginas residentes en el
disco duro, basta poner su nombre en el vnculo, sin necesidad de
poner el prefijo de bsqueda en Internet http://.
Ahora podemos abrir el documento pack-adobe.htm con un

navegador Web y ver el resultado final, tanto grfico como
interactivo.

En esta segunda parte de tutorial conoceremos el uso de las Resultado final "packs-adobe2.html"
divisiones como mtodo para la creacin de grficos interactivos.
El ejemplo que realizaremos ser la creacin de una pgina web

tipo PopUp.
Para realizar esta prctica utilizaremos el archivo

"pack-adobe2.png"

Empezaremos el ejemplo creando una divisin para el texto La divisin queda representada mediante un rectngulo translcido
"ADOBE CREATIVE SUITE 5". de color verde y una serie de guas rojas que indican los cortes que
se realizarn en la imagen al exportar las divisiones.
Podemos definir una divisin dibujndola directamente en el rea
de trabajo con las herramientas Divisin y Divisin poligonal. Adems, en la parte superior izquierda de la divisin aparece el
texto Divisin: JPEG que se corresponde con el nombre de la
divisin y su configuracin de optimizacin. Estos son los valores
por defecto. El nombre de la divisin es el que le demos a su
representacin en el panel Capas, dentro de la Capa de Web. La
configuracin de optimizacin es la que tiene actualmente el
documento que, como veremos ms adelante, podremos variar
para cada divisin.
Estas representaciones aparecen nicamente indicadas en

Fireworks a efectos de su edicin y no sern visibles en la imagen
final.
Podemos observar que en este caso, de momento, la imagen se

cortar en tres divisiones: la que acabamos de dibujar y las cuatro
divisiones resultantes de este corte que afectan al resto de la
imagen.

De igual modo que las zonas interactivas, Repetiremos el proceso de creacin de Una vez definidas las divisiones resulta
las divisiones tienen su correspondiente divisin para cada una de las cajas de los recomendable revisarlas y retocarlas a efectos
representacin en el panel Capas. programas. de conseguir la menor cantidad de divisiones
posibles.
Cuantos menos ficheros logremos obtener

como resultado de la exportacin final, menos
tiempo requerir su carga en el navegador
Web, ya que cada fichero individual requiere un
mnimo de tiempo para ser localizado en
Internet y ste es un tiempo que podemos
ahorrar.

Podemos observar que, como producto
de las divisiones realizadas, este
documento consta de varias divisiones.
Algunas de ellas son imprescindibles,
pero otras las podramos suprimir. Para
ello podemos desplazar los vrtices de las
divisiones a posiciones ms convenientes
y as obtener menos cortes.
Para modificar las divisiones utilizaremos Este es un ejemplo sencillo y el ahorro conseguido realmente no es demasiado significativo.
las herramientas de Seleccin. Pero en documentos ms complejos podemos conseguir ahorros muy significativos de tiempo a
la hora de descargar las imgenes de la Web

Para aplicar vnculos URL a las divisiones creadas se procede Para el texto "ADOBE CREATIVE SUITE 5":
exactamente igual que con las zonas interactivas. Basta http://www.adobe.com/es/products/creativesuite/
seleccionarlas y aplicarles el vnculo deseado desde el panel URL.
Para el pack Adobe Creative Suite 5 Design Premium
Aadiremos los mismos vnculos que utilizamos en el tutorial http://www.adobe.com/es/products/creativesuite/design/
anterior.
Para el pack Adobe Creative Suite 5 Web Premium
http://www.adobe.com/es/products/creativesuite/web/
Para el pack Adobe Creative Suite 5 Production Premium

http://www.adobe.com/es/products/creativesuite/production/
Y para el pack Adobe Creative Suite 5 Master Collection

http://www.adobe.com/es/products/creativesuite/mastercollection/

Tal como mencionamos anteriormente, las divisiones tambin se Para definir que esta divisin es de formato texto HTML
utilizan para establecer reas de la imagen en las que situar texto editable utilizaremos el Inspector de propiedades.
HTML editable, en lugar de una imagen en formato de grfico. Este
recurso lo utilizaremos en nuestro ejemplo para poner el texto
explicativo del programa.
El primer paso ser generar una divisin de la misma forma que

hemos hecho hasta ahora. La crearemos en la zona derecha de la
divisin del primer programa.

Como resultado el contenido del Inspector
de Propiedades cambia y aparece un
botn de Editar HTML.
Clicando en este botn se abrir la

ventana de edicin de divisin HTML. En
esta ventana introduciremos el texto que
deseamos en formato HTML editable.
En esta divisin introduciremos el texto

que se muestra en la imagen de la
derecha.

Repetiremos este proceso para el resto de packs.
Para el pack Adobe Creative Suite 5 Web Premium:
"Cree una gama completa de experiencias digitales, incluidos sitios

web interactivos, aplicaciones, interfaces de usuario,
presentaciones y contenido para dispositivos mviles gracias a
Adobe Creative Suite 5 Web Premium."
Para el pack Adobe Creative Suite 5 Production Premium:
"Adobe Creative Suite 5 Production Premium es una solucin

fundamental para aquellos profesionales creativos que necesiten
crear medios interactivos, de vdeo y de sonido de categora
mundial (en emisin, en lnea, en dispositivos y siempre a tiempo)."
Para el pack Adobe Creative Suite 5 Master Collection:
"Cree contenido de gran atractivo y sofisticacin para prcticamente

cualquier medio (impreso, web o interactivo, para vdeo, audio o
dispositivos mviles) gracias a las herramientas y servicios
totalmente integrados del software Adobe Creative Suite 4
Master Collection."

Como hemos sealado anteriormente, el uso de Abramos el panel Optimizar. Por defecto todos los objetos del
divisiones resulta especialmente til para documento sern comprimidos con esta
optimizar an ms las imgenes, ya que cada Asegurndonos de que no tenemos ninguna configuracin.
archivo correspondiente a una divisin puede divisin seleccionada escojamos la compresin
optimizarse individualmente con la configuracin GIF WebSnap 128. Esta compresin puede resultar de una
ms adecuada al tipo de imagen que contiene. calidad suficiente para el fondo, pero
quizs es insuficiente para las
De este modo podemos aplicar compresiones fotografas, que incluyen degradados.
de mayor calidad a las reas ms importantes
de la imagen y compresiones de menor calidad
a las reas que lo sean menos, obteniendo un
conjunto de archivos exportados de menos
tamao.
En nuestro ejemplo aplicaremos una

compresin de calidad alta a las divisiones,
excepto la de texto HTML, y una compresin de
menor calidad al resto de la imagen.

Para cambiar la compresin aplicada a las En el panel Optimizar seleccionaremos la optimizacin
divisiones basta con seleccionarlas y escoger la "JPEG - Calidad superior"
configuracin deseada en el panel Optimizar.
Seleccionemos la divisin correspondiente a la

primera caja de pack.
Repetiremos este proceso para las otras divisiones que

contienen las fotografas de los packs.

El ltimo paso a realizar es el de la exportacin del documento. Como opciones podemos seleccionar exportar slo las divisiones
seleccionadas, slo el estado actual o incluir reas sin divisiones. La
Para exportar las divisiones y su correspondiente cdigo HTML se ltima opcin, Colocar imgenes en subcarpeta, guarda las imgenes en
procede de modo similar a la exportacin de zonas interactivas. una carpeta separada de la pgina HTML. Esta opcin aparece
Slo que en este caso el resultado sern varios documentos desactivada por defecto, pero resulta conveniente activarla ya que como
grficos correspondientes a cada corte, adems de la pgina HTML resultado de la exportacin de divisiones se pueden generar muchos
necesaria para el manejo de divisiones por parte del navegador documentos grficos y resulta ms prctico tenerlos en una subcarpeta.
Web. Una vez obtenidos estos documentos ya estarn listos para
su publicacin en la Web. Activaremos la opcin Colocar imgenes en subcarpeta.
Para exportar el documento utilizaremos el comando Por defecto, Fireworks crear una subcarpeta denominada imagenes al
Archivo > Exportar. mismo nivel que el documento HTML. Podemos aceptar esta opcin o
bien modificarla utilizando el botn Examinar para escoger otra carpeta.
Aparece el cuadro de dilogo Exportar, donde indicaremos el En nuestro caso aceptaremos la opcin por defecto.
destino de los ficheros y las opciones de exportacin.
Exportaremos los documentos al escritorio, o a la carpeta que

deseemos. En principio no habra que modificar las opciones que
presenta este cuadro de dilogo, excepto la ltima. En el campo
Guardar como tipo debera estar seleccionado el valor HTML e
imgenes. En el campo HTML debera estar seleccionado el valor
Exportar Archivo HTML En el campo Divisiones debera estar
seleccionado el valor Exportar divisiones. Como pgina debera
estar seleccionada la Pgina actual.

Como resultado se crea el documento HTML en el escritorio y los grficos
correspondientes a las divisiones en la subcarpeta imagenes. Si ahora
salimos a Windows veremos estos documentos.
En la carpeta imgenes veremos que hay

9 documentos grficos, los 8 documentos correspondientes a los cortes
definidos y un documento adicional, llamado spacer.gif, necesario para el NOTA: Cabe sealar que si hubiramos dado nombres especficos
ajuste preciso de los grficos por parte del cdigo HTML. a los objetos Web correspondientes a las divisiones en el panel
Capas, sus ficheros resultantes habran adquirido esos nombres.
Los nombres de estos documentos responden al nombre escogido para el Esto resulta especialmente til para generar documentos de
documento HTML, a los que se aaden unos sufijos numerados a efectos de divisiones que queramos actualizar peridicamente. Al darles
no repetir los nombres de ficheros en Windows. nombres especficos resulta ms fcil localizarlos y reemplazarlos
cada vez que sea necesario actualizarlos. Tambin resulta til para
Tambin podemos observar que hay 4 documentos en formato JPEG, este propsito la opcin Slo divisiones seleccionadas, que nos
mientras que el resto son en formato GIF, tal como hemos definido al permite exportar selectivamente las divisiones necesarias en
optimizar el documento. futuras actualizaciones.

Ahora podemos abrir el documento pack-adobe2.htm con un Volveremos a exportar el documento, pero esta vez
navegador Web y ver el resultado final, tanto grfico como slo exportaremos las imgenes. Es muy importante
interactivo. NO sobreescribir el archivo HTML.
Tambin podemos abrir este documento con un editor de HTML Como resultado obtendremos un nuevo archivo de
como podra ser Dreamweaver para editar los bloques de texto, imagen correspondiente a esta nueva divisin JPEG.
cambiando el tamao, tipografa o color.
Seleccionaremos la primera divisin HTML y la volveremos a

convertir en divisin JPEG.

En Dreamweaver abriremos el archivo HTML y seleccionaremos la Finalizado el tutorial proponemos como prctica construir una
celda correspondiente a la divisin del primer texto y le introduciremos pequea web de tres o cuatro pginas utilizando divisiones y
la imagen de fondo. vincularlas entre s para poner en prctica los conocimientos
adquiridos.
NOTA: Si estamos utilizando Dreamweaver CS5 deberemos asignar la
imagen de fondo a travs de un estilo CSS aplicado a la cleda.
Asignaremos el resto de imgenes de fondo y formatearemos la

tipografa.
Tutorial 8. Creacin de un portfolio

El ejercicio a realizar en este penltimo tutorial ser la realizacin
de un portfolio donde mostraremos las prcticas realizadas a lo
largo de estos tutoriales.
El resultado ser una web como la que muestra la imagen. La

interactividad que introduciremos a esta pgina ser que el usuario
que la visite pueda ver los ejercicios realizados a lo largo de los
tutoriales realizados pulsando sobre los botones de la columna de
la izquierda.
El diseo es orientativo ya que la finalidad del tutorial es el

aprendizaje del panel Comportamiento de Fireworks.
Como base del portfolio utilizaremos la estructura creada en el

documento "portfolio.png".

Abramos el archivo "portfolio.png"
Vemos que este documento esta distribuido en 4

capas:
- Capa fondo: Con los elementos que forman la

grfica de fondo.
- Capa tutoriales: Con los elementos que forman los
botones de la barra izquierda.
- Capa menu: Con los elementos de texto de la barra
superior.
- Capa contenido: Con la imagen del logotipo
realizado en el primer tutorial.
Observamos tambin que el documento contiene una

serie de divisiones. Una para cada elemento de texto
de la barra superior, otra divisin para la zona que
mostrar las imgenes y otra divisin (sta de formato
HTML) donde se ha introducido un texto informativo.

Empezaremos la realizacin de este proyecto Podemos observar que el texto "Prcticas Fireworks"
generando los botones del men superior. aparece resaltado en color rojo. Con esto indicamos al
usuario que la pgina web que est visualizando
A partir de estos botones el usuario podr ir corresponde con ese apartado.
navegando por diferentes pginas en las que podr
visualizar las prcticas realizadas con diferentes Para el resto de textos aadiremos un vnculo URL a
programas. su divisin que llevar al usuario a la pgina web del
programa seleccionado.
Para realizar este ejemplo hemos elegido los
programas Fireworks, Flash, Dreamweaver,
Photoshop y 3D Max.
Podemos observar que ya tenemos creadas las

divisiones que dividen cada uno de los textos.

Un Rollover consiste en variar el aspecto de un grfico al situar el El primer paso ser crear un segundo estado en el panel estados.
cursor sobre l. En un Rollover simple el cambio se produce sobre No lo crearemos de nuevo sino que haremos un duplicado del que
la misma rea del grfico original y en un Rollover desunido el ya tenemos.
cambio afecta a una zona exterior del mismo.
La mecnica en Fireworks para crear un Rollover simple consiste

en dibujar un grfico en un estado y su variante, cuando se site el
cursor encima, en otro estado. Luego se define una zona
interactiva, o bien una divisin, sobre el grfico del primer estado y
se le asocia un comportamiento que le indique que al situar el
cursor sobre el grfico del primer estado se muestre el segundo
estado, y que al quitar el cursor se vuelva a mostrar el primer
estado.
En nuestro ejemplo crearemos un Rollover simple para los botones

de cambio de pgina, de modo que cambie de color cuando se
site el cursor en cada uno.
Como resultado tenemos dos estados con el mismo contenido.


Ahora cambiaremos el color de los textos
en el estado 2 para evidenciar el Rollover.
Seleccionaremos los textos de la capa

"men" en el estado 2 y les cambiaremos
el color a un tono gris claro.
Podemos hacer invisible la capa Web

para que la representacin de las
divisiones no nos impidan ver
correctamente los elementos del
documento.

Para este ejemplo hemos efectuado una variante En el panel Comportamiento, clicaremos sobre el botn
muy simple, evidentemente podramos aplicar a la Aadir accin.
variante cualquier operacin grfica ms compleja
de las disponibles en Fireworks. En el men de comportamientos predefinidos de Fireworks
seleccionaremos el comportamiento Rollover simple.
Una vez creada la variante en el estado 2,
volveremos al estado 1 para aplicarle el
comportamiento necesario para que funcione el
Rollover simple.
Los comportamientos siempre se aplican a objetos

Web, nunca a los grficos propiamente dichos.
Para ello es necesario seleccionar la divisin y
aadir el comportamiento mediante el panel
Comportamientos.
Abriremos el panel Comportamientos desde el

men Ventana.

Como resultado de esta accin podemos Cada comportamiento se compone de un Ahora el Rollover simple ya est acabado.
observar que se ha aadido el nuevo evento que lo activa y de una accin, que se Para verlo en funcionamiento activaremos
comportamiento en el panel Comportamiento realiza como resultado del evento. En este la ficha Vista previa en la ventana del
para las divisiones seleccionadas. caso el evento es onMouseOver (en ingls documento y moveremos el cursor dentro
al situar el cursor encima) y la accin es y fuera de las reas de los botones. Para
Rollover simple, que como hemos dicho en ver mejor el resultado conviene ocultar
Fireworks significa cambiar al estado 2. momentneamente la capa Web.
Podemos ver que los textos cambian de

color negro a color gris, segn situemos el
cursor. Adems, el cursor cambia a la
forma de una mano para evidenciar la
interactividad y as es como se ver el
documento en cuanto lo exportemos y lo
veamos dentro de un navegador Web.
Nota: Tambien podemos previsualizar el

documento desde un navegador web:
Archivo > Vista previa en navegador >

Vista previa en Safari / Firefox

Otra manera de crear un Rollover en Fireworks Los primeros dos estados se utilizan para la Los smbolos de Botn, igual que los
es utilizando los smbolos de Botn. Un creacin de Rollovers simples y Rollovers smbolos grficos o de animacin,
smbolo de Botn es un grfico que contiene desunidos. Los otros dos estados se utilizan tienen todas las ventajas de los
cuatro estados en los cuales podemos definir especialmente para crear Barras de smbolos en cuanto a su versatilidad y
cuatro variantes del grfico, segn el estado del Navegacin. reutilizacin, tanto dentro de un
cursor. documento como en otros
Cabe sealar que los cuatro estados que documentos. Es por esta razn que,
Los cuatro estados son: contiene un smbolo de Botn son intrnsecos al en general, resulta ms aconsejable
mismo, es decir que son independientes del el uso de este mtodo para crear
- Arriba: es el estado normal del botn, cuando nmero de estados que contenga el Rollovers que el mtodo que hemos
no se produce ninguna interaccin. documento. utilizado anteriormente.
- Sobre: cuando se sita el cursor sobre el Adems, la insercin de un smbolo de Botn

botn. en el rea de trabajo supone la creacin
automtica de las divisiones implicadas, de
- Abajo: cuando se clica sobre el botn. modo que no resulta necesario definirlas ni
ajustarlas.
- Sobre y Abajo: cuando se arrastra el cursor
sobre el botn con el ratn pulsado.

En nuestro ejemplo utilizaremos Para convertirlo en smbolo utilizaremos el comando:
este mtodo de creacin de
rollovers en los botones de MODIFICAR > SMBOLO > Convertir en smbolo
tutoriales de la barra izquierda del
portfolio. Se abre el cuadro de dilogo Propiedades de smbolo,
donde seleccionaremos Tipo botn como tipo de
Empezaremos seleccionando el smbolo.
rectngulo y el texto que forman el
botn del primer tutorial. A este smbolo de botn lo llamaremos "bot-tuto1".
Si observamos el panel Biblioteca veremos el nuevo

smbolo creado.
Tambin podemos observar en el rea de trabajo que

ahora el objeto contiene un rea de divisin y que
adems cambi su nombre en el panel Capas por el
nombre Smbolo de botn.

Ahora podemos acceder al Editor de
smbolos para definir el Rollover.
Podemos abrir este editor de dos modos:
haciendo doble-clic sobre el smbolo en el
rea de trabajo, o bien sobre el icono de
smbolo de su representacin en el panel
Biblioteca.
Haciendo doble-clic sobre el smbolo

abriremos el editor con la opcin Editar
en ubicacin, con lo que editaremos el
smbolo viendo de manera translucida el
resto de elementos. Mientras que
abrindolo desde la biblioteca editaremos
el smbolo en una ventana nueva al
margen del resto.

En la parte inferior del panel de Propiedades tenemos un Si ahora observamos el panel estados, veremos que ste nos
desplegable con cinco opciones. Las primeras cuatro fichas sirven ensea los cuatro estados, coincidentes con los cuatros estados
para acceder a los cuatro estados del botn citados anteriormente. mencionados. Estos estados slo son visibles en el panel cuando el
La quinta ficha sirve para definir el rea Activa del botn, es decir Editor de smbolos de Botn est abierto. En cuanto lo cerramos,
el rea que detecta las acciones del cursor, si quisiramos que volvemos a ver en el panel los estados que contiene el documento.
fuera diferente al rea dibujada del botn. Para definir un rea
Activa diferente del rea dibujada del botn, basta dibujar en el rea
de trabajo de esta ficha un rectngulo, una elipse o un polgono,
que incluya el nuevo rea.

Una vez abierto el Editor de smbolos de Botn procederemos a Esta accin copia el grfico original en el rea de trabajo de la ficha
definir el Rollover. Para nuestro ejemplo variaremos el color del Sobre, de igual modo que si la hubiramos copiado y pegado desde
botn en la ficha Sobre para evidenciar el Rollover. el Portapapeles, pero en un solo paso. Una vez copiado el grfico
podemos aplicarle las acciones necesarias para variarlo, utilizando
Seleccionaremos el estado Sobre. las herramientas normales de Fireworks.
Cabe sealar que el grfico copiado es independiente del grfico

original y que si se copia un grfico agrupado, como en este caso,
la copia resultante se compone de los elementos desagrupados.
Ahora variaremos el color del rectngulo para evidenciar el

De momento esta ficha aparece vaca, ya que no hay ningn Rollover. Seleccionaremos un azul ms claro.
Rollover definido. Copiaremos en el rea de trabajo de esta ficha el
grfico original, el del estado Arriba, para utilizarlo como base para
crear la variante.
Clicaremos en el botn Copiar grfico Arriba.


Cerraremos el Editor de botones pulsando el botn "Nivel Anterior". Volveremos a seleccionar la ficha Original en la ventana del
documento
Si ahora seleccionamos el botn Tutorial 1, veremos que en el

panel Comportamientos aparece el comportamiento Rollover
simple, que se ha aplicado automticamente al botn al definir su
Rollover.
Ahora el Rollover simple ya est acabado. Para verlo en Como podemos apreciar, los smbolos de Botn producen idnticos
funcionamiento activaremos la ficha Vista previa en la ventana del resultados que la creacin paso a paso de un Rollover, pero de un
documento y moveremos el cursor dentro y fuera del rea del modo ms automtico y ms prctico.
botn.

Repetiremos este mismo proceso para el segundo botn.
- Seleccionaremos los elementos en el rea de trabajo

- Los convertiremos a smbolo de botn
- Llamaremos al botn "bot-tuto2"
- Editaremos su estado Sobre.
Ahora que tenemos al menos dos botones creados veremos el proceso

de creacin de un Rollover desunido.
Tal como hemos dicho anteriormente, un Rollover desunido es aquel en

el que la imagen que cambia se encuentra fuera del rea de la imagen
que lo activa. Para crear un Rollover desunido tambin se utilizan las
divisiones, los estados y los comportamientos. Veamos un ejemplo.
Utilizaremos este sistema para mostrar las imgenes de nuestro portfolio.


En este ejemplo haremos que al situar el
cursor sobre los diferentes botones de los
tutoriales la imagen del ejercicio realizado
cambie.
Para crear este efecto, colocaremos las

diferentes imgenes en distintos estados y
en la posicin en que aparecern. Luego
aadiremos a las divisiones los
comportamientos pertinentes.
Seleccionaremos el estado 2 de nuestro

documento.
Borraremos la imgen de la prctica

realizada en el primer tutorial y colocaremos
la del segundo. Tendremos en cuenta que la
imgen ha de caber dentro del rectngulo de
la divisin central.

Una vez colocada la imagen a mostrar por el boton Cuando arrastramos a la divisin de la imagen aparece una lnea curva azul
"Tutorial 2" en el segundo estado procederemos a indicndonos que estamos asociando estas dos divisiones para el Rollover
la aplicacin del comportamiento necesario. desunido. Al soltar aparece el cuadro de dilogo Intercambiar imagen, donde
indicaremos el estado a mostrar en respuesta al Rollover.
Colocaremos el cursor sobre la marca de insercin

en el centro de la divisin (el que tiene forma de
mira telescpica) del botn "Tutorial 2" de modo
que el Puntero cambie a la forma de una mano.
Por defecto siempre aparece seleccionado el estado 2, que es precisamente el que
queremos para este botn, as que en este caso aceptaremos esta opcin.
Para ver el resultado en funcionamiento activaremos la ficha Presentacin

preliminar en la ventana del documento y moveremos el cursor dentro y fuera de
los botones de seleccin de tutorial.

Si ahora observamos el panel Comportamientos veremos que se ha Ahora tendramos que crear el resto de pginas, una para cada
aadido automticamente el comportamiento Intercambiar imagen. asignatura.
Este comportamiento predefinido es el que utiliza Fireworks para
crear Rollovers desunidos. El proceso para realizar el resto de pginas sera exactamente el
mismo al realizado anteriormente, pero teniendo en cuenta que el
Fijmonos que al botn del primer tutorial no le hemos aadido el texto resaltado del men izquierdo sera otro, y todas las imgenes
comportamiento para el Rollover desunido. En este botn no es de los estados para mostrar en los rollovers tambin cambiaran.
necesaria su aplicacin ya que la imagen que se ha de mostrar es
la imagen que contiene el estado 1 con lo que es la imagen que se
muestra automticamente al no hacer Rollover en ningn otro
botn.
Para finalizar el proyecto tendramos que repetir el proceso

realizado para el segundo botn en el resto de botones de tutorial.
Iramos aadiendo estados hasta un total de 12 estados y en cada
uno de ellos colocaramos la imagen del tutorial correspondiente.
Creados todos los botones y aplicados todos los comportamientos,

optimizaramos y exportaramos el documento tal y como hizimos Una opcin lgica para realizar todo este trabajo sera duplicar el
en el tutorial pasado, con lo que obtendramos un documento HTML documento PNG y adaptarlo a cada asignatura. Pero Fireworks nos
totalmente funcional y listo para colgar en Internet. permite optimizar este proceso.

Fireworks dispone del panel Pginas que de manera similar al Nota: Una opcin importante del panel Pginas es la de Pgina
panel Estados nos permite tener diferentes versiones del maestra. El contenido de esta pgina ser comn y se visualizar
documento. en todas las pginas actuales y nuevas del documento.
Cada Pgina sera un documento independiente, cada una con sus

capas, objetos, divisiones, comportamientos etc.
Desde el panel podemos crear pginas nuevas vacas o podemos

duplicar la pgina inicial para tener una copia de todo el proceso
realizado.

De esta manera podemos crear una pgina para cada asignatura y Como mostramos en el tutorial pasado, aadimos un vnculo URL a
una divisin desde el Inspector de propiedades. De manera que
adaptar el contenido. aadiremos a cada divisin el enlace a la pgina correspondiente.
Adaptadas todas las pginas exportaremos el documento a HTML Dado que en este ejemplo no hemos realizar todas estas pginas
sino nicamente la que corresponde al apartado "Prcticas
fijndonos de tener seleccionada la opcin Todas las pginas en Fireworks" omitiremos este paso. Pero lo tendramos en cuenta si
el men de exportacin. quisiesemos realizar el proyecto completo
Como prctica para el alumno se propone la realizacin completa

del ejemplo planteado en este tutorial. Cada alumno realizar un
portfolio que muestre los trabajos ms representativos.
Para la creacin de este porfolio se pide no slo basarse en las

posibilidades de los Rollovers mostrados en este tutorial sino
aprobechar todas las posibilidades que ofrece el programa y que se
han ido mostrando a lo largo de la gua.
Veremos que se a generado un archivo HTML para cada pgina del
documento. Podemos observar tambin que el nombre del archivo
HTML corresponde con el nombre asignado a la pgina, de manera
que deberemos tenerlo en cuenta para realizar los enlaces.
Tutorial 9. Creacin de prototipos para aplicaciones multimedia

Fireworks es la herramienta ideal para la creacin rpida y cmoda
de prototipos de aplicaciones, es decir, para la creacin del diseo
de la interfaz de la aplicacin que posteriormente implementaremos
en programas de creacin multimedia como Adobe Flash
Professional o Adobe Flash Builder. En el transcurso de este tutorial
veremos como traspasar el trabajo grfico iniciado en un
documento Fireworks a dichos progamas.
El primer ejemplo que seguiremos ser la creacin de un prototipo

para una aplicacin de telfono mvil basada en Flash Player.
Para el desarrollo de aplicaciones para mviles, el paquete de

Adobe CS5 dispone de Adobe Device Central que nos permite
emular la reproduccin de contenido HTML, SWF y FLV dentro de
un telfono mvil segn sus caractersticas de hardware (resolucin
de pantalla, multitouch, etc) y de software (versin de Flash Player,
cdecs de video, etc)
Echaremos mano de este programa para seleccionar le perfil de

telfono mvil sobre que que queremos trabajar.

Abriremos Fireworks y sin necesidad de crear Esto nos abrir automticamente el programa Adobe Device Central CS5. Como
aun ningn documento nuevo seleccionaremos podemos comprobar Device Central simula la reproduccin sobre un telfono mvil.
Device Central desde el men Archivo.
Archivo > Device Central


En la parte superior izquierda encontramos la Ahora seleccionaremos la opcin CREAR situada en la Nota: En la opcin EXAMINAR
pestaa Dispositivos de prueba en la que parte superior derecha de la pantalla. podremos encontrar y
podemos seleccionar varios perfiles estndar seleccionar diferentes perfiles
de telfonos mviles. personalizados creados por
usuarios y compartidos online.
Para nuestro ejemplo seleccionaremos el De manera que podemos
perfil de telfono mvil con Flash Player encontrar perfiles que se
10.1.3 y resolucin de 320x480. adecuen ms a nuestras
Esto nos cambiar la pantalla al modo de creacin de necesidades. En el caso de no
nuevo documento, donde podremos seleccionar el encontrarlo podemos crearlo y
programa con el que queremos trabajar el nuevo compartirlo nosotros.
proyecto. En este caso seleccionaremos Fireworks.

En la parte inferior derecha clickaremos sobre el botn Crear. Llegados a este punto aplicaremos todos los
Con lo que volveremos a Fireworks de forma automtica viendo conocimientos aprendidos a lo largo de los
que tenemos un documento nuevo con las proporciones adecuadas tutoriales anteriores para trabajar
para nuestro perfil de mvil seleccionado. grficamente nuestro proyecto.
Para seguir con el tutorial utilizaremos el

documento de ejemplo llamado pack-
adobe-mobile.png proporcionado con el
material de la gua.

Dando por supuesto que este es el prototipo Este degradado contiene una textura de trama que no es Nota: Hemos de tener en
del diseo final de la aplicacin que compatible con las opciones de relleno de grficos en cuenta que al rasterizar la capa
queremos desarrollar procederemos a la Flash, con lo que tendremos que resterizarlo para tratarlo el degradado ya no es editable.
exportacin del documento al programa en Flash como una imagen bitmap. Por lo tanto hemos de realizar
Flash Professional CS5. este paso nicamente en el
proceso de exportacin y
Antes de realizar la exportacin realizaremos asegurarnos de tener guardado
unas modificaciones necesarias en el el documento con el grfico
documento. editable para poder realizar
futuras modificaciones.
Seleccionaremos la capa inferior del
documento que contiene el degradado de
fondo.
Para ello seleccionaremos con el botn derecho del ratn

la opcin Allanar seleccin sobre la capa. Veremos que
ahora el fondo degradado es un Mapa de bits.

El siguiente paso ser convertir las imgenes de las cajas de
software en objetos Smbolo.
Este paso lo realizamos dado que los objetos Smbolos del

documento Fireworks se convertirn en objetos Movieclip en el
docuemtno Flash, y ya podemos avanzar nuestra estructura de
clips desde el documento Fireworks.
Para ello utilizaremos el comando Convertir en smbolo.

Acabadas las modificaciones exportaremos el documento
> Modificar > Smbolo > Convertir en smbolo Fireworks a formato FXG (Flash XML Graphics).
Como ltimo detalle aadiremos un efecto de sombra a estos

smbolos. Con esto comprobaremos que los filtros de Fireworks son
compatibles con los filtros de Flash
Lo que nos generar un archivo de texto FXG con la informacin

del documento en formato XML y una carpeta que contendr los
elementos grficos.

Abriremos el programa Flash Professional CS5
para continuar con nuestro proyecto.
Desde el men de Archivo seleccionaremos el

archivo FXG para abrirlo.
> Archivo > Abrir
Nota: Para poder visualizar el archivo FXG en la

ventana de exploracinde ficheros deberemos
seleccionar Todos los archivos en el filtro de
seleccin, ya que el formato FXG no est dentro de
los formatos estndares para documentos Flash.
Podemos comprobar como tenemos todos los

elementos separados y editables.
Nota: Al abrir un documento FXG no se asigna el ancho y alto de la
pelicula Flash, de manera que deberemos proporcionar nosotros
esos valores.

A partir de aqu continuaremos con el proyecto separando los
elementos por capas y realizando las acciones necesarias para
implementar la interaccin deseada.
Dado que en este ejemplo estabamos hablando de un proyecto

para telfono mvil Flash Professional tambien nos permite
previsualizar nuestro documento en Device Central. Para ello
seleccionaremos est opcin desde el men Probar pelcula.
Nota: Fireworks tambin dispone de la opcin

Vista previa en Device Central, pero dado que
en ese caso nicamente visualizaramos una
imagen esttica sera un paso irrelevante.

Otro programa que nos ofrece Adobe Podemos comprobarlo aadiendo algunos de
para la creacin de aplicaciones es Flash estos componentes a nuestro documento anterior,
Builder CS5 (anteriormente Flex builder por ejemplo un componente Panel y un par de
4). botones.
Flex es un formato basado en el lenguaje

de marcas MXML y facilita mucho la
creacin de aplicaciones gracias al uso de
componentes que nos ofrece.
Fireworks tambin es una buena

herramienta para disear aplicaciones
que vayamos a implementar en Flash
Builder ya que dispone de una librera de
objetos especfica para componentes
Flex.
Estos componentes los encontraremos en

la ventana de Biblioteca comn
> Ventana > Biblioteca comn


Fireworks tambin nos permite exportar este documento de diseo Nota: La Suite CS5 tambin trae el programa Flash Catalyst CS5
a formato MXML para usarlo como base en el desarrollo de la cuyo objetivo tambien es el de facilitar el diseo para aplicaciones
aplicacin final desde Flash Builder CS5. Flex. Fireworks tambin tiene buena integracin con Flash Catalyst
gracias al formato FXGvisto anteriormente.
De la misma manera que hizimos con el formato FXG de Flash,
seleccionaremos el formato MXML en el men de exportacin.
Podemos comprobar que se genera un archivo de texto MXML que

podemos importar y editar desde Flash Builder CS5.
Crditos
Coordinacin
Roser Beneito Montagut
Autora
Guillermo de la Iglesia
Fecha de publicacin
25.03.2011
Estudios de Informtica,
Multimedia y Telecomunicacin

FWCS5 Es PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

FWCS5 Es PDF

Transféré par

Droits d'auteur :

Formats disponibles

Gua de Aprendizaje INICIO | CRDITOS

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

2. Creacin de una ilustracin

3. Trabajar con ilustraciones y grficos importados

5. Realizacin del diseo de la interface de una web

6. Creacin y remaquetacin de un banner

7. Creacin de un grfico interactivo y un minisite

9. Creacin de prototipos para aplicaciones multimedia

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Introducir el conocimiento del entorno de trabajo de Fireworks.

Aprendizaje de las herramientas vectoriales y en el trabajo de mapas de bits

Trabajar conjuntamente con Fireworks y otros programas vectoriales.

Aprender el uso de las herramientas de retoque

Practicar la optimizacin de documentos y la exportacin del archivo optimizado

Compaginar el uso conjunto de Vectores y Pxeles

Practicar el uso de smbolos y la creacin de grficos animados

Practicar la realizacin de procesos automticos

Practicar la interactividad en Fireworks

Exportar archivos de imgen y HTML

Prctica del uso de Fireworks como herramenta de prototipado

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

En la imagen de la derecha observamos el

Al igual que la mayora de programas de

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

3 Este es el espacio dnde se sitan los documentos abiertos.

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

Se sigue una de estas tres opciones:

En los campos Anchura y Altura debemos introducir los valores

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

1 En el caso de no tenerla ya visible,

2 Cambiar color de fondo

3 Cambiar tamao del lienzo del documento

4 Cambiar tamao del documento

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

A continuacin veremos cmo crear estas formas bsicas,

Pulsaremos sobre el icono del grupo para poder visualizar

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

De esta manera al tener seleccionado el rectngulo, el Inspector de Propiedades muestra

1 Alto y ancho 4 Caractersticas del

2 Situacin del 5 Transparencias y

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

En nuestro caso seleccionaremos un color azul oscuro.

4 Si quisisemos un rectngulo sin color de

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

Presionaremos el icono de color de trazo y seleccionaremos

2 Subiendo o bajando la barra deslizante

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

Con la herramienta polgono podemos dibujar cualquier

Ejemplo 5 lados Ejemplo 10 lados

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Tutorial 1. Creacin de un logotipo

Ejemplo polgono Ejemplo estrella Ejemplo Automtico (38) Ejemplo 70

Fireworks CS5: gua de maquetacin TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9