Material de Apoyo:Tutorial de Fireworks

Colegio Jesús María. Carrasco. UruguayMaterial 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 * | [email protected] | www.jesusmaria.edu.uy

Página 1 de 14

http://www.jesusmaria.edu.uy/

mailto:[email protected]


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:


Página 2 de 14




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


Página 3 de 14




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.


Página 4 de 14




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)


Página 5 de 14




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


Página 6 de 14




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)

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.


Página 7 de 14




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.


Página 8 de 14




Fusión de Mapa de Bits

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.


Página 9 de 14




Aplicación de una máscara

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


Página 10 de 14




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.

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)


Página 11 de 14




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.


Página 12 de 14




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.


Página 13 de 14




Fuente: Curso Medios Interactivos. Profesor Alejandro Cárdenas. [email protected]


Página 14 de 14




Material de Apoyo:Tutorial de Fireworks

Documents

Transcript of Material de Apoyo:Tutorial de Fireworks