DIPLOMADO DE PAGINAS WEBFireworks (Clase 1)Ing. Edison David Charry P
2013
CONTENIDO
Modulo 1
• Que es una Imagen ? • Representación grafica ?• Cuales son los formatos que existen• Cuales los más comunes y compatibles con la Web• Que es un Pixel (Picture Element) R,A,V?• Que es Fireworks?• Cuales son las versiones y para que sirve ?• Con que programas es compatible?• Acceso a Fireworks ()
Software de Diseño
Definición• Adobe Fireworks es una aplicación basada en la forma de estudio de
Adobe Flash pero con más parecido a un taller, destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. La aplicación permite crear menús emergentes, rollover o imagenes de sustitución, un efecto muy conocido en donde una imagen existente en la página web es sustituida por otro cuando el puntero del ratón se posa sobre ella, restituyéndose cuando quitamos el puntero de ella. Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems.
• Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. En la Suite de Adobe se identifica por usar el color amarillo, color que venia usando como representación desde que pertenecía a Macromedia.
Modulo 2
• Que es el lienzo ?• Menú superior• Barra de herramientas• Herramientas adicionales• Que son los complementos• Efectos• Como optimizar una Imagen. • Alinear y Justificar• Ejercicio.
ESPACIO DE TRABAJO
Modulo de Herramientas
Modulo de Herramientas
Herramienta Puntero Herramienta Sub selecciónHerramienta RecortarHerramienta Inclinar
Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligonoHerramienta Varita mágica Herramienta Pincel
Herramienta BorradorHerramienta PincelHerramienta Desenfocar Herramienta Sello
Modulo de HerramientasHerramienta de Linea Herramienta Figuras
Herramienta Zona interactiva Herramienta DivisiónOcultar divisiones Mostrar divisiones y zonas
Herramienta de Pluma Herramienta de Texto
Herramienta de Estilo libre Herramienta Cuchilla
Cuentagotas Cubo de PinturaBordes y Fondos
Zoom y vistas
Timeline - Propiedades
Propiedades: Dimensiones, filtros texturas, tonos
Propiedades de Lienzo
Efectos adicionales a utilizar en manejo de imágenes
OPTIMIZAR ALINEAR Y ESTILOS
CONTENIDO
• Fireworks• Dreamweaver• Flash• Promoción de sitios Web /
Mercadeo
Modulo 3
• Que es una Capa ? • Cortar una foto?• Colores degradados • Herramienta de sub selección modificación de
figura (De circulo al ovalo)• Que es un Pixel (Picture Element) R,A,V?• Que es Fireworks?• Cuales son las versiones y para que sirve ?• Con que programas es compatible?• Acceso a Fireworks ()
Definición• Adobe Fireworks es una aplicación basada en la forma de estudio de
Adobe Flash pero con más parecido a un taller, destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. La aplicación permite crear menús emergentes, rollover o imagenes de sustitución, un efecto muy conocido en donde una imagen existente en la página web es sustituida por otro cuando el puntero del ratón se posa sobre ella, restituyéndose cuando quitamos el puntero de ella. Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems.
• Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. En la Suite de Adobe se identifica por usar el color amarillo, color que venia usando como representación desde que pertenecía a Macromedia.
Modulo 4
• Que es el lienzo ?• Menú superior• Barra de herramientas• Herramientas adicionales• Que son los complementos• Efectos• Como optimizar una Imagen. • Alinear y Justificar• Ejercicio.
Modulo de Herramientas
Herramienta Puntero Herramienta Sub selecciónHerramienta RecortarHerramienta Inclinar
Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligonoHerramienta Varita mágica Herramienta Pincel
Herramienta BorradorHerramienta PincelHerramienta Desenfocar Herramienta Sello
Modulo de HerramientasHerramienta de Linea Herramienta Figuras
Herramienta Zona interactiva Herramienta DivisiónOcultar divisiones Mostrar divisiones y zonas
Herramienta de Pluma Herramienta de Texto
Herramienta de Estilo libre Herramienta Cuchilla
Cuentagotas Cubo de PinturaBordes y Fondos
Zoom y vistas
Propiedades: Dimensiones, filtros texturas, tonos
Efectos adicionales a utilizar en manejo de imágenes
OPTIMIZAR ALINEAR Y ESTILOS
Definir el Proyecto
Como Para Que
Que se Va a utilizarElementos gráficos.
Tema
Antes de Dibujar
1. Desarrolle un Story-board del sitio
2. Realice el Modelo E-R del Menú3. Tenga a mano la biblioteca de
medios que posiblemente utilizara para el desarrollo.
Elementos WEB en Fireworks1.Botones: (Estados Arriba, Sobre, Area activa,
Abajo, Acciones (Top,blank,self,parent), componentes Url, Alt,Estado) , utiles al momento de desarrollo del Modelo E – R (Descripción del Mapa del sitio.)
Pueden ser: Dinámicos, Tipo Banner, Estáticos
Elementos WEB en Fireworks
2.Menús : Es un conjunto de Botones, presentados en una lista de opciones que puede desplegar en una pagina Web (Horizontales, Verticales estructura de Árbol Padre – hijo), tipos normales, de verificación y submenú)
Pueden ser: Horizontales, Verticales, Texto, Gráficos, Secciones.
Elementos WEB en Fireworks
3. Manejo de Imágenes : Se presentan como el intercambio de imágenes al pasar el cursor del mouse, entregando información.
Representados como: Slideshows, secciones fijas con cambios de
imágenes
Elementos WEB en Fireworks
4. Interpolaciones o animados : Se presentan como imágenes animadas , estas se presentan en formato Gif
Representados como: Películas, Banners o botones animadosCinemagraph o peliculas graficas en Gif Ver enlace http://www.vueloiv.com/blog/diseno-web-tendencias-2013/
Tecla F8
1. Gráfico: Une los Elementos o Capas, convirtiendo en 1 solo elemento grafico editable sobre el lienzo2. Botón. Une los elementos seleccionados y les habilita las propiedades de Botón con sus estados, activa e elementos principales: URL destino, Alt Anuncio y Estado del Botón3. Animación: Habilita fotogramas para poder un Gif Animado.
Una vez Dibujado ..
1. Realice el corte de las secciones o piezas por desarrollar.
2. Exportelas en Codigo HTML3. Editelas por medio de Dreamweaver4. Elimine la imagen de corte e importe la
pieza desarrollada.Nota: No borre las carpetas objeto de los dibujos exportados, cree nuevas paginas html.
PASOS PARA DESARROLLAR UNA EXCELENTE PAGINA WEB1. Dibujar El Diseño
Etiquetas de HTMLTablas Listas
Etiquetas de HTMLTablas Listas
Etiquetas de HTMLTablas Listas
Etiquetas de HTMLTablas Listas