Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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.
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 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:
Página 2 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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.
Bueno, es obvio que estas herramientas son para dibujar distintas formas.
Herramienta de bordes.
Herramienta de relleno.
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)
En el recuadro azul ubicado sobre la barra de herramientas, encontramos las herramientas que nos permiten
trabajar con formas vectoriales.
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.
Página 5 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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.
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.
Página 7 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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.
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.
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.
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.
Página 10 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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
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.
Página 12 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
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.
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.
Página 13 de 14
Colegio Jesús María. Carrasco. Uruguay
Material de Apoyo Nro 12.Diseño Gráfico en Fireworks
Página 14 de 14