fireworks l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
FIREWORKS PowerPoint Presentation
Download Presentation
FIREWORKS

Loading in 2 Seconds...

play fullscreen
1 / 30

FIREWORKS - PowerPoint PPT Presentation


  • 283 Views
  • Uploaded on

FIREWORKS. David Escudero Mancebo Alfonso Pedriza Rebollo. FIREWORKS. DISEÑO GRÁFICO DISEÑO WEB. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'FIREWORKS' - ania


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
fireworks

FIREWORKS

David Escudero Mancebo

Alfonso Pedriza Rebollo

fireworks2
FIREWORKS
  • DISEÑO GRÁFICO
  • DISEÑO WEB
dise o gr fico
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
1 creaci n y almacenamiento de un documento nuevo
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
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
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
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
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 bits10
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
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

6 utilizaci n de capas y objetos12
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
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
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
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 documento16
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
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
1 divisi n del documento
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
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 rollover20
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 rollover21
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
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 n23
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 n24
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.
3 creaci n y edici n de botones para generar una barra de navegaci n25
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
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 emergente27
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 emergente28
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.
5 optimizaci n del documento
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
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