Colegio Jesús María. Carrasco.

Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Tutorial Básico de Diseño Gráfico en Fireworks

1. Creación y almacenamiento de un archivo nuevo

a. En Fireworks MX, elija Archivo > Nuevo.
b. Se abre el cuadro de diálogo Nuevo documento en el cual podemos editar el ancho, alto, resolución y color
del lienzo, el cual será el espacio en blanco donde desarrollaremos la composición en Fireworks.
c. Luego de abrir el archivo nuevo, podemos visualizar mejor nuestro entorno de trabajo aumentándolo o
disminuyéndolo con el atajo de teclado (ctrl + +) (ctrl. +-).
d. Elija luego Archivo > Guardar como, para guardar el archivo de Fireworks modificable (.png). Más adelante
vemos la diferencia entre guardar un archivo y exportar una imagen.

2. Elementos del Entorno de Trabajo

En el centro de la pantalla se encuentra la ventana de documento. En el centro de la ventana de documento

se encuentra el lienzo (recuadro amarillo en la imagen). Aquí es donde se muestra el documento de Fireworks
y las imágenes creadas.

En la parte superior de la pantalla hay una barra de menús. La mayoría de los comandos de Fireworks son
accesibles desde la barra de menús.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 1 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

En la izquierda de la pantalla se encuentra el panel Herramientas. Si el panel Herramientas no está visible,

elija Ventana > Herramientas. El panel Herramientas contiene las herramientas para seleccionar, crear y
modificar diversos elementos gráficos y objetos Web.

En la parte inferior de la pantalla se encuentra el Inspector de propiedades. Si el Inspector de propiedades no

está visible, elija Ventana > Propiedades. El Inspector de propiedades presenta las propiedades del objeto o
la herramienta seleccionados. Estas propiedades pueden cambiarse. Si no se ha seleccionado ningún objeto
ni herramienta, indica las propiedades del documento. El Inspector de propiedades muestra dos o cuatro filas
de propiedades. Si está a media altura, es decir, si sólo muestra dos filas, es posible hacer clic en la flecha de
ampliación del ángulo inferior derecho para ver todas las propiedades.

En la derecha de la pantalla hay varios paneles, como Capas y Optimizar. Éstos y otros paneles pueden
abrirse desde el menú Ventana.

Desplace el puntero por los distintos elementos de la interfaz. Si detiene el puntero sobre un elemento de la
interfaz durante unos segundos, aparecerá un mensaje de la ayuda emergente. Los mensajes de la ayuda
emergente identifican herramientas, menús, botones y otros rasgos de la interfaz en todo el programa.
Desaparecen al retirar el puntero de los elementos en cuestión.

Veremos en esta primera parte las herramientas básicas para empezar a trabajar:

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 2 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Herramienta de selección: incluye también la herramienta de "subselección", que sirve

para seleccionar elementos que están "tapados" por otros cuando estás trabajando con
muchos elementos.
Herramienta para escalar: sirve para modificar proporcionalmente el tamaño de los
elementos. Las herramientas de Skew y Distort sirven para distorsionar la forma del
elemento seleccionado.

El Crop sirve para seleccionar un área que será cortada, y la herramienta que lo
acompaña sirve para seleccionar un área determinada y exportarla independientemente
del resto de una imagen.
Las herramientas de Marquee sirven para seleccionar un área determinada de la
imagen, ya sea para copíarla, ya sea para trabajar en ella sin modificar el resto de la
imagen.
Las herramientas de Lasso y Polygon Lasso son variantes de Marquee, y sirven para
seleccionar áreas a mano alzada o poligonales respectivamente.

La herramienta Paint Bucket es simplemente la herramienta de relleno, y su variante, la

Gradient Tool, es para rellenos degradados. Las opciones de ese degradado se
configuran luego desde el panel de propiedades.
La herramienta Pen sirve dibujar elementos con sólo hacer clic y trazar sus lados.
Esta acompañada por la Vector Path, que sirve para trazos de distintos tipos (bambú,
cinta, aerógrafo, etc); y la Redraw Path Tool, que permite redibujar o agrandar un
dibujo, conservando las características de trazo o configuración.

Bueno, es obvio que estas herramientas son para dibujar distintas formas.

Eraser Tool: para borrar.

Brush Tool: para dibujar trazos.

Line Tool: para dibujar líneas rectas.

Pencil Tool: para dibujar líneas a mano alzada

Subselection Tool: para trabajar con los nodos de trazos vectoriales.

Text Tool: herramienta de texto.

Herramienta de bordes.

Herramienta de relleno.

3. Creación y modificación de objetos vectoriales

Un objeto vectorial es una descripción matemática de una forma geométrica. Los trazados de vectores se
definen con puntos. Su calidad no se degrada cuando se amplía, se reduce o cambia la escala de la imagen. A

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 3 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

su vez la imagen mapa de bits está compuesta por píxeles de color. Esta imagen se diferencia de la vectorial
en que al editarse en su escala puede perder propiedades (se píxela)

Creación de objetos vectoriales

Estas son las herramientas vectoriales con las cuales podemos contar en fireworks MX

En el recuadro azul ubicado sobre la barra de herramientas, encontramos las herramientas que nos permiten
trabajar con formas vectoriales.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 4 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Herramientas Vectoriales
Línea: permite crear líneas vectoriales en cualquier dirección. A esta línea le puedo determinar un ancho, un
estilo, un color… desde la barra de herramientas ubicada en la parte inferior del entorno de trabajo.
Pluma: permite crear curvas, señalándose de ancla en ancla, es decir haciendo un clic sostenido en
coordenadas determinadas del lienzo podemos dibujar una forma irregular circular.
Rectángulo: es una de las formas geométricas vectoriales. Miremos que algunas herramientas habilitan una
opción de desplegar otras herramientas al hacer clic sostenido sobre ellas. En este caso, se habilita la forma
vectorial rectángulo redondeado, elipse y polígono. Al igual que las anteriores herramientas permite editar el
formato de línea y de fondo de la imagen vectorial en la paleta de propiedades (fondo degradado, por
ejemplo)
Texto: es la inserción tradicional de texto. También se puede editar en la paleta de propiedades.
Estilo libre: modifica libremente los trazos vectoriales.
Cuchilla: permite recortar formas vectoriales a partir de la eliminación de anclas o puntos de fijación.

Aquí utilizamos la herramienta línea, pluma y texto, por ejemplo

Definición de las propiedades de objeto:

Desde la paleta propiedades podemos modificar cada uno de los elementos vectoriales. Dependiendo de la
forma vectorial podemos editar los colores, los estilos de fondo y borde, suavizado de líneas, texturas y
aplicar efectos (que veremos más adelante)

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 5 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

4. Importación de un mapa de bits y selección de píxeles

Importar una imagen
a. Elegimos Archivo > Importar y seleccionamos de algún directorio o carpeta la imagen mapa de bits que
queremos esté ubicada en el lienzo. Recuerden que es importante que se trate de ubicar imágenes que
queden en su tamaño original o haya que disminuirla. No es recomendable aumentarla de tamaño.

b. Luego de seleccionar la imagen la ubicamos de acuerdo al puntero que se habilita al importar una imagen,
hacemos clic en el lugar deseado y vemos como la imagen es importada al lienzo. Luego hacemos clic en
cualquier punto externo a la imagen para anular su selección.

Creación de una selección de píxeles

A continuación vamos a seleccionar los píxeles que componen la imagen y mirar que cambios, ediciones y
efectos podemos hacer con ellos.

a. Primero utilizaremos la herramienta zoom, con la cual podemos ampliar o disminuir la sección de píxeles
con la cual vamos a trabajar.
b. Para seleccionar una porción de imagen ubicamos en el panel de herramientas, el grupo de herramientas
de mapa de bits y escogemos la herramienta lazo polígono.
c. La herramienta lazo polígono permite seleccionar píxeles a través de varias líneas rectas. Podemos ajustar
el borde de estas líneas en la barra de propiedades (duro – suavizado – fundido).
d. Luego hacemos clic en el píxel inicial que queremos seleccionar y vamos seleccionando de píxel en píxel
hasta completar la selección que queremos hacer terminando en el píxel inicial (cerrando la selección)
Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 6 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

e. Para seleccionar el grupo de píxeles (la porción de imagen) seleccionamos Edición > Copiar y luego Editar
> Pegar. Así la selección se ubica por encima de la imagen original en una capa nueva (más adelante
hablaremos de las capas). Por ejemplo si necesitamos sólo la porción que seleccionamos, sólo es que
eliminemos la capa de la imagen original.

Aplicar efectos automáticos

Podemos aplicar efectos automáticos a una imagen mapa de bits.
a. Seleccionamos la imagen a la cual le queremos aplicar el efecto.
b. Luego en la barra de propiedades la opción efectos, en su opción añadir efectos (el que tiene el signo +)
c. Entre todos los efectos podemos seleccionar Ajustar color, en el cual podemos ajustar el matiz y la
saturación. Por ejemplo si seleccionamos la opción colorear, podemos convertir la imagen en escala de grises
d. El efecto se agrega automáticamente a la imagen, pero también lo podemos eliminar a través de la opción
suprimir efectos (el que tiene el signo -), seleccionando el efecto que queremos eliminar de la lista.
e. Para modificar el efecto, también podemos hacer doble clic sobre este y podemos seguir editándolo.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 7 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Otros efectos automáticos que podemos aplicar:

Bisel y relieve: permite crear efectos de relieve, borde y repujado a la imagen o al vector
Desenfocar: permite desenfocar la imagen de forma homogénea (desenfoque gaussiano)
Sombrear e iluminar: permite crear efectos de sombra a la imagen vectorial o mapa de bits
Convertir en alfa: generar efectos de transparencia
Eye Candy: efecto de repujado e iluminación para imagen vectorial o mapa de bits
Alien Skin: efectos de perfilado de imagen vectorial o mapa de bits

5. Utilización de capas y objetos

Las capas dividen los documentos de Fireworks en planos distintos. Un documento puede estar compuesto
por muchas capas y cada una contener muchos objetos. En Fireworks, el panel Capas muestra una lista de las
capas y los objetos contenidos en cada capa.

Mediante el panel Capas es posible asignar nombre, ocultar, ver y cambiar el orden de apilamiento de capas
y objetos, así como fusionar mapas de bits y aplicar máscaras de mapa de bits. En el panel Capas también es
posible añadir y eliminar capas.

En esta parte del tutorial va a utilizar el panel Capas para fusionar las dos imágenes de mapa de bits.
Después asignará nombre a los objetos del documento. También va a utilizar el panel Capas para cambiar el
orden de apilamiento de los objetos.

Fusión de Mapa de Bits

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 8 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Después de aplicar efectos a imágenes mapa de bits ubicadas en diferentes capas, las puede fusionar para
tener sólo un mapa de bits. Recuerde que cada elemento que agregue en el lienzo se va apilando en capas,
que se muestran en los paneles derechos del entorno de trabajo.

a. Para fusionar dos capas, se seleccionan la primera capa que hará parte de la fusión y luego con clic
sostenido seleccionamos la otra capa que hará parte de la fusión.
b. Luego en el menú de opciones del panel capas, seleccionamos fusionar con interior lo que hará que las
capas se fusiones y queden como una única imagen mapa de bits en una sola capa.

Asignación de nombres a los objetos y cambio de orden de los objetos

Es aconsejable nombrar cada uno de los elementos que se van acumulando en las capas. Así, sólo hacemos
doble clic en el nombre al frente de cada ícono de la capa y le cambiamos el nombre.

De igual forma se puede cambiar el orden de los objetos, arrastrando hacia arriba y hacia abajo las capas que
tiene el documento de fireworks. Sólo es hacer clic sostenido en la capa que queremos cambiar de posición y
la arrastramos al orden de apilamiento de capas que queremos, donde soltamos el botón del ratón.

6. Creación y modificación de una máscara

Con Fireworks podemos aplicar dos tipos de máscara: para mapa de bits y para formas vectoriales. De igual
forma, veremos que a través de las máscaras podemos generar degradados en las imágenes mapa de bits.

Aplicación de una máscara

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 9 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Una máscara blanca muestra el objeto o imagen seleccionados, mientras que una máscara de píxeles negros
los oculta
a. Con la herramienta puntero seleccionamos el mapa de bits
b. Hacemos clic en el botón Añadir Máscara situado en la parte inferior del panel Capas.
c. A la imagen seleccionada se le añade una máscara transparente vacía. Se comprueba que la máscara se
ha agregado por el borde amarillo alrededor de la imagen.
d. Utilizamos la máscara para generar el efecto degradado alfa o transparencia. Para ello seleccionamos la
miniatura de la máscara ubicada en la capa de la imagen (recuadro amarillo) y luego en el panel de
herramientas mapa de bits, seleccionamos el relleno degradado.
e. Luego arrastre el cursor encima de la imagen, de acuerdo a donde quiera que comience la transparencia.

Aplicación de una máscara que oculta parte de la imagen

Este tipo de máscara, permite seleccionar una parte de la imagen y mostrarla, ocultando la porción de la
imagen que no ha sido seleccionada.
a. Con la herramienta puntero seleccionamos el mapa de bits.
b. Insertamos una forma vectorial (una elipse, por ejemplo) la cual representará la porción de imagen que
queremos que se visualice.
c. Hacemos clic sobre la imagen vectorial y por Editar > Cortar, eliminamos temporalmente esta forma
vectorial
d. Luego seleccionamos la imagen mapa de bits y por Editar > Pegar como Máscara podemos hacer que sólo
se visualice la parte representada por el gráfico vectorial.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 10 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

7. Creación y modificación de texto

Recuerden que la opción de agregar texto, permite crear bloques de texto, títulos, a los cuales se les podrá
aplicar efectos.

Herramientas de texto en la barra de propiedades

Propiedades del texto

Suavizado: permite suavizar los bordes de texto para que se vean más o menos nítidos, dependiendo del
tamaño y tipo de la fuente.
Color: el color de fuente lo podemos determinar a partir de la barra de propiedades. Recordemos que todos
los colores que manejamos aquí se establecen en colores hexagesimales. (ejemplo: #000000 es negro)

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 11 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Color hexagesimal

Efectos automáticos para texto:

Adición de una sombra: seleccionamos el texto al que queremos aplicarle el efecto. Recordemos que lo
debemos seleccionar como el bloque de texto, no desde la selección interna. Para ello, hacemos clic en el
puntero y luego sobre el texto.
a. Hacemos clic en el botón Añadir Efectos de la barra de propiedades y configuramos la intensidad y el
ángulo de la sombra.
Efecto bevel boss (repujado de texto): de igual forma a través del botón efectos, seleccionamos el efecto
Eye Candy y su opción Bevel Boss, con la cual podremos conseguir el efecto de repujado de texto. También
opera este efecto para formas vectoriales y mapa de bits. Este último no es recomendable, por el efecto poco
estético que genera.

8. Exportación del documento

Hemos creado un objeto vectorial y hemos modificado sus propiedades. Hemos importado una imagen mapa
de bits y hemos alterado sus pixeles y hemos creado y modificado texto. A continuación procedemos a
optimizar en documento y a exportarlo para su posterior utilización en multimedia o web.

Optimización de la imagen
Antes de exportar un documento desde fireworks primero tenemos que optimizarlo, garántizándose el
equilibrio entre compresión y calidad de imagen.
a. Nos ubicamos en el panel Optimizar (recordemos que si alguno de los paneles no está visible, podemos
verlo a través de Ventana > Optimizar
b. Elegimos JPEG calidad superior en el menú emergente configuración
c. En la parte superior de la ventana del documento aparecen 4 pestañas. Seleccionamos la que dice 4-arriba,
la cual nos permite ver cuatro versiones de la misma imagen, para compararla con varios tipos de
compresión. Luego seleccionamos la que quedará definitivamente y procedemos a exportarla.
d. Podemos leer claramente en cada una de las versiones de la imagen el peso en kb de esta, al igual que el
tiempo de descarga que tendrá aproximadamente.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 12 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Optimizar una imagen a partir de 4 opciones de imagen

Exportación de la imagen
Una vez optimizada la imagen procedemos a:
a. Seleccionar Archivo > Exportar
b. El nombre del archivo aparece con la extensión .jpg, ya que es el formato que seleccionamos en la
optimización.
c. Es importante tener en cuenta que la imagen se debe guardar en una carpeta raíz, principalmente para el
trabajo con web.
d. De igual forma, debemos guardar el archivo png de fireworks, el cual nos permitirá modificar el documento
exportado para ediciones posteriores.
e. Para guardar, seleccionamos Archivo > Guardar o el atajo de teclado (ctrl + S) para guardar el
documento .PNG.

El archivo exportado se puede visualizar de nuevo abriéndolo directamente en Fireworks. Seleccionamos

Archivo > Abrir y buscamos el directorio donde exportamos el documento .JPEG. Recordemos que después de
exportado, el documento queda en un sola imagen mapa de bits, por lo cual se reitera la importancia de
guardar el documento .PNG.

También es útil poder ver el documento que estamos creando, permanentemente, durante la edición en
fireworks. Para ello podemos recurrir a la tecla FUNCIÓN 12 (F12), para ver como está quedando la imagen
real.

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 13 de 14
 Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks

Fuente: Curso Medios Interactivos. Profesor Alejandro Cárdenas.

alcardenas07@gmail.com.2006

Edmundo Bianchi 2228 | Montevideo | 600 1500 * | colegio@jesusmaria.edu.uy | www.jesusmaria.edu.uy

Página 14 de 14