Este documento proporciona instrucciones sobre cómo utilizar el software de diseño gráfico Fireworks. Explica cómo crear y guardar nuevos documentos, trabajar con capas y objetos, importar y editar imágenes, aplicar efectos y máscaras, y crear y editar texto, botones y menús emergentes. También cubre la optimización de imágenes y la exportación de archivos a formatos como PNG y HTML.

1. FIREWORKSRubén Darío Lozano Ortega

2. FIREWORKSDISEÑO GRÁFICODISEÑO WEB

3. DISEÑO GRÁFICOCreación y almacenamiento de un documento nuevoEntorno de trabajoTipos de objetosCreación de objetos vectorialesMapas de bitsUtilización de capas y objetosCreación y modificación de una máscaraCreación y modificación de textoExportación del documento

4. 1. Creación y almacenamiento de un documento nuevoArchivo>NuevoTamaño del lienzoAncho AltoResoluciónColor del lienzoBlancoTransparentePersonalizadoArchivo>Guardar Como. Extensión .png

5. 2. Entorno de trabajoVentana de documento (Centro)OriginalVista Previa2-arriba4-arribaBarra de menús (Arriba)Panel de herramientas (Izquierda)Inspector de propiedades (Abajo). Presenta las propiedades de un objeto o herramienta seleccionada.Paneles (Derecha)CapasOptimizarArchivosFotogramas e HistorialRespuestas

7. 3. Tipos de objetosPodemos crear dos tipos de imágenes:Objetos vectorialesImágenes de mapa de bitsObjetos vectoriales. Es una descripción matemática de una forma geométrica, se definen con puntos. Su calidad no se degrada cuando cambian de escalaImá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 vectorialesCreación de rectángulos. Herramienta Rectángulo(U).Arrastrar con el ratón en la pantallaHerramienta puntero. Selecciona el rectángulo y lo desplaza.Inspector de propiedades(propiedades de la herramienta):RellenoColor de trazoTamaño de la puntaAlto y Ancho del rectánguloOpacidadTexturaEfectos

9. 5. Mapas de bitsImportación de un mapa de bits. Archivo>ImportarCreación de una selección de pixelesVisualización de la imagen. Zoom y ManoHerramientas Lazo y Lazo poligonalDelimitar la zona a seleccionar.Editar>Copiar. Editar>Pegar. La imagen seleccionada se pega como un nuevo objeto de mapa bits

10. 5. Mapas de bitsAdición y modificación de efectos automáticosHacer clic en el botón añadir efectosElegir efecto (aparecerá el efecto elegido en la lista de efectos)Suprimir efectoModificación de efectos. Pulsar el icono de información y variar las propiedades del efecto.

11. 6. Utilización de capas y objetosLas capas dividen los documentos en planos distintosPanel Capas. Ventana>CapasFusión de mapas de bits (fusiona dos objetos de mapa de bits)Elegir el mapa de bits que se encuentre en un nivel superiorPulsar el icono del menú emergente de opciones del panel crearEscoger Fusionar con inferioricono menúemergente

12. 6. Utilización de capas y objetosAsignación de nombre a los objetosHacer 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 CapasCambiar 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áscaraEn 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 degradadoSeleccionar la miniatura de la máscaraSeleccionar la Herramienta degradado (G)Hacer clic en el cuadro de relleno del Inspector de propiedadesArrastrar el puntero de degradado en el objeto a aplicar.

14. 8. Creación y modificación de textoSeleccionar 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 documentoOptimización de la imagen. Garantiza que la imagen se exporte con el mejor equilibrio posible entre compresión y calidad. Panel Optimizar. Ventana>OptimizarEscoger 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 documentoExportación de la imagenArchivo>ExportarAparece la extensión escogida en optimizarArchivo > Guardar para guardar los cambios en el archivo PNG.

17. DISEÑO WEBDivisión del documentoCreación de un rolloverCreación y edición de botones para generar una barra de navegaciónCreación y edición de un menú emergenteOptimización del documentoExportación de HTML

18. 1. División del documentoDivisió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ónPodemos editar varias divisiones a la vez.Seleccionar las zonas a dividir (pulsando Mayús)Pulsar Editar>Insertar>DivisiónPulsar 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 rolloverHay 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 rolloverSeleccionar la división que contiene la zona donde queremos la interactividadPulsar el símbolo de comportamiento Tenemos los siguientes:Comportamiento de rollover simpleComportamiento de intercambiar imagenMensaje de barra de estadoBarra de NavegaciónMenú emergente

21. 2. Creación de un rolloverPodemos realizar un rollover de forma muy sencilla:Arrastrar el símbolo de comportamiento a la división donde queremos que se intercambie la imagenSoltar el botón , aparece el cuadro de diálogo Intercambiar ImagenEscoger 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/duplicadoTenemos un segundo fotograma con las mismas divisiones del anteriorImportamos 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ónLos 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ónCrear el símbolo que será base del botón.Modificar > Símbolo > Convertir en símboloSe abre el cuadro de diálogo Propiedades de símboloDar nombre al símbolo y pulsar la opción de BotónEl símbolo aparece en la biblioteca.Ventana>Biblioteca

24. 3. Creación y edición de botones para generar una barra de navegaciónCreació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:ArribaSobreAbajoSobre y Abajo Área activaHacer clic en ListoCopiar el botón y probar los efectos.

25. 3. Creación y edición de botones para generar una barra de navegaciónCreación de varias instancias de botónSeleccionar 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ú emergenteMenú 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ú emergenteDoble clic en el cuadro de Texto para insertar el nombreDoble 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 ListoComprobar el menú emergente. Archivo>Vista previa en el navegador>Navegador

27. 4. Creación y edición de un menú emergentePersonalización del menú emergenteDoble 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ú emergenteEdición del menú emergenteDoble 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 documentoAntes de exportar un documento, primero siempre hay que optimizarloPanel Optimizar.Ventana>OptimizarEscoger las opciones más convenientesVentana 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 HTMLDefinición de las preferencias en HTMLArchivo>Configuración de HTMLSe 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 HTMLFichaTabla,cambia las propiedades de tablas HTMLFichaEspecífico del documento, permite elegir varias preferencias para cada documento.Exportación del documento. Archivo>Exportar Tipo HTML e ImágenesExportar divisionesSólo divisiones seleccionadas