FIREWORKS

Rubén Darío Lozano Ortega

FIREWORKS

DISEÑO GRÁFICO

DISEÑO WEB

DISEÑO GRÁFICO

1. Creación y almacenamiento de un documento nuevo

2. Entorno de trabajo3. Tipos de objetos4. Creación de objetos vectoriales5. Mapas de bits6. Utilización de capas y objetos7. Creación y modificación de una máscara8. Creación y modificación de texto9. Exportación del documento

1. Creación y almacenamiento de un documento nuevo

Archivo>Nuevo Tamaño del lienzo

Ancho Alto Resolución

Color del lienzo Blanco Transparente Personalizado

Archivo>Guardar Como. Extensión .png

2. Entorno de trabajo

Ventana de documento (Centro) Original Vista Previa 2-arriba 4-arriba

Barra de menús (Arriba) Panel de herramientas (Izquierda) Inspector de propiedades (Abajo). Presenta las

propiedades de un objeto o herramienta seleccionada. Paneles (Derecha)

Capas Optimizar Archivos Fotogramas e Historial Respuestas

3. Tipos de objetos

Podemos crear dos tipos de imágenes: Objetos vectoriales Imágenes de mapa de bits

Objetos vectoriales. Es una descripción matemática de una forma geométrica, se definen con puntos. Su calidad no se degrada cuando cambian de escala

Imágenes de mapa de bits. Compuestas por una cuadrícula de píxeles de color. Su calidad si se degrada cuando cambian de escala.

4. Creación de objetos vectoriales

Creación de rectángulos. Herramienta Rectángulo(U). Arrastrar con el ratón en la pantalla

Herramienta puntero. Selecciona el rectángulo y lo desplaza.

Inspector de propiedades (propiedades de la herramienta): Relleno Color de trazo Tamaño de la punta Alto y Ancho del rectángulo Opacidad Textura Efectos

5. Mapas de bits

Importación de un mapa de bits. Archivo>Importar

Creación de una selección de pixeles Visualización de la imagen. Zoom y Mano Herramientas Lazo y Lazo poligonal

Delimitar la zona a seleccionar.

Editar>Copiar. Editar>Pegar. La imagen seleccionada se

pega como un nuevo objeto de mapa bits

5. Mapas de bits

Adición y modificación de efectos automáticos

Hacer clic en el botón añadir efectos Elegir efecto (aparecerá el efecto elegido en la lista de

efectos)

Suprimir efecto Modificación de efectos. Pulsar el icono de información y variar

las propiedades del efecto.

6. Utilización de capas y objetos

Las capas dividen los documentos en planos distintos

Panel Capas. Ventana>Capas

Fusión de mapas de bits (fusiona dos objetos de mapa de bits) Elegir el mapa de bits que se encuentre en un nivel superior Pulsar el icono del menú emergente de opciones del panel crear Escoger Fusionar con inferior

6. Utilización de capas y objetos

Asignación de nombre a los objetos Hacer doble clic en las palabras que figuran

junto a la imagen en el panel Capas. Escribir en el cuadro de nombre de objeto

del Inspector de propiedades. Seleccionar objetos pulsando el icono

del panel Capas Cambiar el orden de apilamiento de los

objetos. Desplazar los objetos en el panel Capas, los objetos en líneas superiores se superponen a los inferiores

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

En Fireworks es posible aplicar dos tipos de máscaras: máscaras vectoriales y máscaras de mapa de bits.

Añadir máscara. Hacer clic en el botón Añadir máscara situado en la parte inferior del panel Capas.

Añadir Relleno degradado Seleccionar la miniatura de la máscara Seleccionar la Herramienta degradado (G) Hacer clic en el cuadro de relleno del

Inspector de propiedades Arrastrar el puntero de degradado en el

objeto a aplicar.

8. Creación y modificación de texto

Seleccionar la Herramienta texto en el panel de herramientas.

Hacer clic en el documento para escribir, o trazar un rectángulo donde se ajustará el texto.

Modificar las propiedades en el Inspector de propiedades. Podemos añadir efectos al texto.

9. Exportación del documento Optimización de la imagen. Garantiza que

la imagen se exporte con el mejor equilibrio posible entre compresión y calidad. Panel Optimizar. Ventana>Optimizar

Escoger las opciones deseadas. En la ventana de documento en Vista previa podemos ver

como se exportará la imagen con las opciones actuales.

9. Exportación del documento Exportación de la imagen

Archivo>Exportar Aparece la extensión escogida en

optimizar Archivo > Guardar para guardar los

cambios en el archivo PNG.

DISEÑO WEB

1. División del documento2. Creación de un rollover3. Creación y edición de botones para

generar una barra de navegación4. Creación y edición de un menú

emergente5. Optimización del documento6. Exportación de HTML

1. División del documento

División para desmembrar los documentos web. Añade interactividad Descarga de la página más rápida (las imágenes pequeñas

se cargan de forma más rápida) Podemos optimizar cada división de forma diferente.

Método para crear una división: Seleccionamos la imagen en la que queremos insertar la

división. Editar>Insertar>División Podemos editar varias divisiones a la vez.

Seleccionar las zonas a dividir (pulsando Mayús) Pulsar Editar>Insertar>División Pulsar Varios en el mensaje emergente.

Si las guías de división no se muestran; pulsar Ver>Guías de división.

Las divisiones creadas aparecen en Panel Capas.

2. Creación de un rollover Hay dos clases de rollovers:

rollovers simples rollovers desunidos.

Un rollover simple muestra una imagen diferente cuando el puntero se coloca sobre él en un navegador web.

Un rollover desunido provoca el cambio de imagen en otro lugar de la pantalla cuando el puntero se coloca sobre él.

2. Creación de un rollover Seleccionar la división que contiene la

zona donde queremos la interactividad Pulsar el símbolo de comportamiento

Tenemos los siguientes: Comportamiento de rollover simple Comportamiento de intercambiar imagen Mensaje de barra de estado Barra de Navegación Menú emergente

2. Creación de un rollover Podemos realizar un rollover de forma muy sencilla:

Arrastrar el símbolo de comportamiento a la división donde queremos que se intercambie la imagen

Soltar el botón , aparece el cuadro de diálogo Intercambiar Imagen

Escoger el fotograma donde se encuentre la imagen a intercambiar. Si tenemos sólo uno, escoger Fotograma 2.

Panel Fotogramas. Ventana>Fotogramas. Haga clic en el botón Fotograma nuevo/duplicado

Tenemos un segundo fotograma con las mismas divisiones del anterior

Importamos en la zona donde queremos el intercambio la imagen a intercambiar.

3. Creación y edición de botones para generar una barra de navegación

Los botones son objetos web que conducen a otras páginas web. Su aspecto suele variar según el movimiento del ratón u otras acciones del usuario, como un clic.

Una barra de navegación (o Bar Nav) es un conjunto de botones que aparece en una o varias páginas de un sitio web.

3. Creación y edición de botones para generar una barra de navegación

Crear el símbolo que será base del botón. Modificar > Símbolo > Convertir en

símbolo Se abre el cuadro de diálogo Propiedades de

símbolo

Dar nombre al símbolo y pulsar la opción de Botón

El símbolo aparece en la biblioteca.Ventana>Biblioteca

3. Creación y edición de botones para generar una barra de navegación

Creación de estados del botón (los estados de botón son los diferentes modos en que aparece un botón cuando el puntero se desplaza sobre él o cuando se hace clic en él en un navegador web). Doble click en la instancia de botón creada o en la vista

previa del botón en el panel Biblioteca y modificar los estados.

Crear los distintos estados: Arriba Sobre Abajo Sobre y Abajo Área activa Hacer clic en Listo

Copiar el botón y probar los efectos.

3. Creación y edición de botones para generar una barra de navegación

Creación de varias instancias de botón Seleccionar el botón. Editar > Clonar. Aparece una nueva instancia de botón. Desplazarla al sitio deseado.

En el Inspector de propiedades se pone el nuevo texto.

Asignamos valores URL a los botones en el campo Vínculo del Inspector de propiedades.

Alinearlo con cuidado: Modificar> Alinear

4. Creación y edición de un menú emergente

Menú emergente es el menú que aparece al desplazar el puntero sobre una imagen de activación en un navegador. Contiene una lista de opciones que conducen a otras páginas web.

Creación de las opciones del menú emergente. Modificar>Menú emergente>Añadir menú

emergente Doble clic en el cuadro de Texto para insertar el nombre Doble clic en el cuadro de Vínculo para insertar la

dirección URL o el enlace a otra página. Doble clic en el cuadro Destino para insertar cómo se va a

abrir la página del enlace o URL especificada. Pulsar Listo

Comprobar el menú emergente. Archivo>Vista previa en el navegador>Navegador

4. Creación y edición de un menú emergente

Personalización del menú emergente Doble clic en el contorno del menú

emergente. Clic en Siguiente. Patilla Aspecto. Cambia

las fuentes y los colores utilizados en menús emergentes.

Clic en Siguiente. Patilla Avanzado. Cambia varias propiedades de celda y borde.

Clic en Siguiente. Patilla Posición. Especifica la posición de la pantalla donde debe aparecer el menú emergente.

4. Creación y edición de un menú emergente

Edición del menú emergente Doble clic en el contorno del menú

emergente. Patilla Contenido. Clic el botón Añadir menú. Añade

una línea en blanco. Seleccionar una entrada y hacer clic en

el botón Sangrar menú. La opción sangrada emergerá de la entrada anterior

Desplazar de posición las entradas desplazándolas con el ratón.

5. Optimización del documento

Antes de exportar un documento, primero siempre hay que optimizarlo

Panel Optimizar.Ventana>Optimizar Escoger las opciones más convenientes

Ventana de documento ficha 2-arriba, permite ver los resultados de los parámetros de optimización y compararlos con el original

6. Exportación de HTML

Definición de las preferencias en HTML Archivo>Configuración de HTML Se abre el cuadro de diálogo Configuración de HTML.

Las opciones que se definan afectarán a todos los documentos que creemos en el futuro, excepto a las opciones de la ficha Específico del documento. Ficha General, elegimos un estilo de HTML Ficha Tabla, cambia las propiedades de tablas HTML Ficha Específico del documento, permite elegir varias

preferencias para cada documento.

Exportación del documento. Archivo>Exportar Tipo HTML e Imágenes Exportar divisiones Sólo divisiones seleccionadas