FIREWORKS

1. FIREWORKS David Escudero Mancebo Alfonso Pedriza Rebollo

2. FIREWORKS • DISEÑO GRÁFICO • DISEÑO WEB

3. DISEÑO GRÁFICO • Creación y almacenamiento de un documento nuevo • Entorno de trabajo • Tipos de objetos • Creación de objetos vectoriales • Mapas de bits • Utilización de capas y objetos • Creación y modificación de una máscara • Creación y modificación de texto • Exportación del documento

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

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

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

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

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

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

11. 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 icono menú emergente

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

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

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

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

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

17. DISEÑO WEB • División del documento • Creación de un rollover • Creación y edición de botones para generar una barra de navegación • Creación y edición de un menú emergente • Optimización del documento • Exportación de HTML

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

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

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

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

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

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

24. 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 Bibliotecay 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.

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

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

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

28. 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. • Seleccionaruna 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.

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

30. 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. • FichaGeneral, elegimos un estilo de HTML • FichaTabla,cambia las propiedades de tablas HTML • FichaEspecí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