Manual de Fi reworks]

LIC. LIZANDRO JINCHUA HUALLPA Este manual CONTIENE LA PARTE PRCTICA.

LI

lLICLIZAKLDFJSDKLFJSDF

INDICE

N 1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11 12 13 14

NOMBRE
DESCRIPCION DE FIREWOKS OBJETIVOS INSPECTOR DE PROPIEDADES PANEL DE HERRAMIENTAS MONTAGE DE UNA IMAGEN SOBRE OTRA COMO HACER UN ESCUDO EDICION DE LA MEDIA LUNA COMO CREAR UN BOTON ANIMADO INTRODUCIR IMAGEN AL BOTON TEXTO EN EL BOTON ROLLOVERS EN DOS OBJETOS MENSAJE EN LA BARRA DE TAREAS MENU EMERGENTE EXPORTAR UNA ANIMACION A DW

pgina

LI

lLICLIZAKLDFJSDKLFJSDF

Descripcin
Fireworks es una herramienta que puede utilizarse para crear, editar y animar grficos web, aadir interactividad avanzada y optimizar imgenes en entornos profesionales. En Fireworks es posible crear y modificar imgenes vectoriales y de mapa de bits en una sola aplicacin. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualizacin que de otra forma exigiran una enorme dedicacin.

Objetivos

Aprender a utilizar fireworks en el diseo, edicin y animacin de grficos web. Integrar los elementos producidos con otras herramientas de diseo de pginas.

Inspector De Propiedades
Es un panel que vara segn el contexto y que muestra las propiedades de la seleccin actual, las opciones de la herramienta seleccionada o las propiedades del documento. De forma predeterminada, el Inspector de propiedades est acoplado en la parte inferior del espacio de trabajo. Como se observa en la figura del entorno. El Inspector de propiedades puede abrirse a media altura con lo que se muestran dos filas de propiedades.

O puede abrirse por completo, con lo que se muestran cuatro filas.

El Inspector de propiedades tambin puede contraerse en su totalidad aunque permanezca en el espacio de trabajo.

LI

lLICLIZAKLDFJSDKLFJSDF

Para expandir el Inspector de propiedades de media altura a altura completa y ver otras opciones:

Haga clic en la flecha de ampliacin situada en el ngulo inferior derecho del Inspector de propiedades. Haga clic en el cono del ngulo superior derecho del Inspector de propiedades y elija Altura completa en el men de opciones del Inspector de propiedades.

Nota: El men de opciones est disponible nicamente cuando el Inspector de propiedades est acoplado. Para contraer el Inspector de propiedades cuando est acoplado:

Haga clic en la flecha de ampliacin o el ttulo del Inspector de propiedades. Elija Contraer grupo de paneles en el men de opciones del Inspector de propiedades.

Panel Herramientas
El panel Herramientas contiene las herramientas necesarias para crear, seleccionar y modificar objetos. Las barras de herramientas Principal y Modificar proporcionan fcil acceso a muchos comandos. El panel Herramientas est organizado en seis categoras: 1.Seleccionar, 2.Mapa de bits, 3.Vector, 4.Web, 5.Colores y 6. Ver. Basta con elegir una herramienta y comenzar a utilizarla. La aplicacin emplea la herramienta correctamente. ElpanelHerramientascontienedocenasde herramientas, algunas de las cuales estn agrupadas, tal como se ilustra. Los grupos de herramientas se identifican por el pequeo tringulo situado en la esquina inferior derecha de la herramienta. Haga clic en una herramienta para seleccionarla. De forma alternativa, puede pulsar las teclas de mtodo abreviado para cambiar rpidamente de herramienta.

Nota: Puede ver el mtodo abreviado de cada tecla si coloca el cursor sobre el cono de la herramienta en el panel Herramientas, y espera a que aparezca el rtulo correspondiente. El mtodo abreviado es la letra que aparece tras el nombre de la herramienta.

LI

lLICLIZAKLDFJSDKLFJSDF Seleccin de una herramienta en un grupo de herramientas

Cuando en el ngulo inferior derecho de una herramienta del panel Herramientas aparece un tringulo pequeo, indica que la herramienta forma parte de un grupo. Por ejemplo, la herramienta Rectngulo forma parte del grupo de herramientas bsicas de forma, que tambin incluye las herramientas Rectngulo Redondeado, Elipse y Polgono.

Para elegir otra herramienta de un grupo de herramientas: 1. Haga clic en el cono de la herramienta y mantenga presionado el botn del ratn. Aparece un men emergente con los conos, los nombres y las teclas de mtodo abreviado de las herramientas. La herramienta actualmente seleccionada lleva una marca de seleccin a la izquierda del nombre. 2. Arrastre el puntero para resaltar la herramienta que desee y suelte el botn del ratn. La herramienta elegida aparece en el panel Herramientas y sus opciones se indican en el Inspector de propiedades.

Nota: La funcin de algunas herramientas cambia segn se editen objetos vectoriales o de mapa de bits.

MONTAGE DE UNA IMAGEN SOBRE OTRA Primera forma:

1. 2. 3. 4.

Elegir pixeles del lienzo del nuevo documento Elegir archivo, de la barra de men y seleccionar importar Seleccionar la imagen que deseamos editar La colocamos en el lienzo y quedar como sigue

LI

lLICLIZAKLDFJSDKLFJSDF

5. Elegimos en el Bloque de Mapa de Bits, la herramienta Herramienta Lazo(L)

6. Luego seleccionamos el contorno de la imagen con la Herramienta Lazo y esta quedar como sigue

LI

lLICLIZAKLDFJSDKLFJSDF

7. Luego pinchamos la pestaa seleccionar y elegimos seleccionar inverso

8. Nos quedar seleccionada la imagen y el cuadro

LI

lLICLIZAKLDFJSDKLFJSDF

9. Luego le presionamos la tecla suprimir, y nos quedar como sigue

10.

Elegimos en las herramientas de Mapa de Bits La Barita Mgica

11.Se da clic en el contorno que queremos eliminar, y la imagen queda como sigue.

LI

lLICLIZAKLDFJSDKLFJSDF

12.Elegimos en las herramientas de Mapa Bits, Borrador y con este quitamos el contorno.

13.

La imagen quedar como sigue:

En el siguiente paso hay que introducir un documento nuevo, importar una imagen que desea que fuese el fondo e insertarla; luego iremos a la pestaa ventana de la barra de men, seleccionar mosaico vertical para arrastrar la imagen diseada y colocarla sobre la ltima imagen importada La imagen quedar de la siguiente manera lLICLIZAKLDFJSDKLFJSDF

LI

10

Segunda forma: 1. Se edita la imagen 2. Se selecciona

3. Selecciona exportar rea

LI

lLICLIZAKLDFJSDKLFJSDF

11

4. Se da clic en Exportar rea

5. Aadir color a la transparencia 6. La imagen queda de la siguiente manera 7. Luego exportar

LI

lLICLIZAKLDFJSDKLFJSDF

12

8. Le asignamos un nombre 9. Lo exportamos como HTML e imagen 10. Clic en exportar

COMO HACER UN ESCUDO Ejercicio N 2

1- Elegir el tamao del lienzo 2- En el bloque de vector seleccionar la opcin elipse. 3- Dibujamos un elipse en el lienzo de manera que quede de la siguiente manera

LI

lLICLIZAKLDFJSDKLFJSDF

13

4- Encima de la elipse, dibujamos lneas con la herramienta lnea, en el bloque de vectores, de manera que se vea de la siguiente forma

5-

Luego encima de las lneas que creamos dibujamos otro elipse ms pequeo que el primero y lo colocamos de modo que quede as

6-

Despus de hacer esto dibujamos una estrella desde el bloque vector.

LI

lLICLIZAKLDFJSDKLFJSDF

14

7-Dibujamos la estrella encima de la elipse que creamos antes as:

8-Despus de crear la estrella la seleccionamos y le damos clic en la opcin puntos y lo movemos hasta que quede de cuatro puntos como la siguiente.

9-Luego de ponerle las cuatro puntas damos clic en la opcin radio y lo movemos de modo que la estrella se vea ms delgada

Como la siguiente:

LI

lLICLIZAKLDFJSDKLFJSDF

15

10-Luego de hacer lo anterior seleccionamos la opcin escala del bloque seleccionar y rotamos la estrella de la siguiente forma.

Despus de haber hecho todos los pasos el escudo debe de quedarnos de la siguiente forma.

EJERCICIOS DEL DIA 18/08/07 PARA HACER LA MEDIA LUNA

EJERCICIO N 2

LI

lLICLIZAKLDFJSDKLFJSDF

16

1. IMPORTAR IMAGEN 2. SELECCIONAR IMAGEN

3. Con un crculo

4. Seleccionar toda la imagen y en edicin cortar y pegar dentro

LI

lLICLIZAKLDFJSDKLFJSDF

17

5. Queda como sigue

6. As quedar

7. En sombrear e iluminar Agregar sombra 8. De la siguiente manera

LI

lLICLIZAKLDFJSDKLFJSDF

18

COMO CEAR UN BOTON ANIMADO *Primero damos clic en Edicin *Despus en Insertar *Luego en la opcin Nuevo Botn *Aparecer una pantalla diferente al lienzo anterior

En la pantalla en blanco que aparece debemos dibujar una forma, la que queramos en esta ocasin un rectngulo.

Luego usamos la herramienta texto y escribamos por ejemplo Home, En el inspector de propiedades le damos color al rectngulo y al texto si lo desea, luego debemos dar clic en la opcin seleccionar y damos clic en la opcin seleccionar todo y luego lo copiamos, luego en la pantalla damos clic en la ficha Sobre, y aparecer otra pantalla en blanco, en esa pantalla debemos pegar lo que copiamos y modificamos la

LI

lLICLIZAKLDFJSDKLFJSDF

19

apariencia del rectngulo y el texto, como se muestra en la imagen siguiente, luego de modificarlo damos clic en el botn Listo. Y aparecer en el lienzo como un botn GIF. Para ver el efecto del botn debemos dar clic en la opcin Vista Previa y pasamos el cursor del mouse y vemos que cambia del color que tenia de primero (azul) al color que colocamos despus (verde).

Rollovers en dos objetos.

Primero dibujamos un rectngulo como un botn en la pgina anterior, luego importamos una imagen de modo que el lienzo quede de la siguiente forma luego en el panel de laderechadela pantalla seleccionamos laopcin Fotograma Historial, damos clic en el botn Nuevo fotograma y se agregar un nuevo fotograma en el panel de fotogramas y luego damos clic en Fotograma 1 y volveremos al lienzo donde tenemos las dos figuras creadas anteriormente.

Luego damos clic en la Barra de herramientas en la parte de Web en la opcin Herramienta divisin y marcamos exactamente el entorno del rectngulo que creamos y luego el de la imagen.

LI

Las imgenes quedaran de la siguiente forma. Sealamos el lLICLIZAKLDFJSDKLFJSDF

20

rectngulo para que cambie el botn blanco a la parte izquierda .

Luego en una de las imgenes qued un punto blanco debemos dar clic en l y arrastrarlo hasta la otra luego nos dar un mensaje donde nos pregunta si queremos Intercambiar una imagen con el fotograma 2, le damos clic en Aceptar.

Despus damos clic en Fotograma 2 y ahora ya no aparecer el lienzo vaco hay como una replica de las imgenes que creamos en el Fotograma 1, bueno ahora hay que seleccionar la herramienta Texto y escribimos Byciclet en el segundo cuadro del lienzo de la siguiente forma:

Luego volvemos al Fotograma 1 y presionamos la tecla F12 para ver los efectos creados.

COMO INTRODUCIR UNA IMAGEN AL BOTON

LI

lLICLIZAKLDFJSDKLFJSDF

21

1. Editar el botn como lo hicimos en los pasos anteriores

2.luego le damos clic en la parte blanca del centro del botn

3.Seleccionamos aadir comportamiento Intercambiar imagen, nos muestra la siguiente ventana

4.Clic en la carpeta amarilla

LI

lLICLIZAKLDFJSDKLFJSDF

22

5.Buscamos la imagen que deseamos colocar y nos aparece la siguiente ventana

LI

6.Damos clic en aceptar y nos queda como sigue lLICLIZAKLDFJSDKLFJSDF

23

7.Presionamos F12 para ver el botn en el explorador

Esta imagen es la que insertamos, y es la que muestra al poner el ratn sobre el botn

COMO PONERLE TEXTO AL BOTN 1. Seguimos todos los pasos anteriores

2. Damos clic en la parte blanca y seleccionamos Aadir men emergente, como sigue

3. Aparecer la siguiente ventana, note que la ventana contiene las siguientes vietas: contenido, aspecto, avanzado y posicin Todas tienen que ser editadas

LI

lLICLIZAKLDFJSDKLFJSDF

24

4. En la parte del texto digitamos lo requerido presionamos siguiente

LI

lLICLIZAKLDFJSDKLFJSDF

25

Cuando ya estamos en posicin, que contiene el lugar donde queremos el texto, presionamos listo, F12 para ver en explorador, nos muestra la siguiente ventana

LI

lLICLIZAKLDFJSDKLFJSDF

26

MENSAJE EN LA BARRA DE ESTADO 1. Hacemos todo igual que el anterior, seleccionamos aadir mensaje de Barra de estado

2. Digitamos lo que queremos que aparezca en la barra de estado

3. F12 para ver en el explorador y nos muestra lo siguiente:

LI

lLICLIZAKLDFJSDKLFJSDF

27

MENU EMERGENTE 1. 2. 3. 4. Editamos la imagen De la barra de men seleccionamos comandos. De comandos seleccionamos web. De web seleccionamos definir texto ALT.

LI

lLICLIZAKLDFJSDKLFJSDF

28

5. Nos aparecer la siguiente ventana

6. Aqu introduciremos el texto que deseamos que aparezca en la imagen.

7. Despus de introducir el texto, damos clic en aceptar; presionamos F12 para ver cmo queda en el explorador.

NOTA: Para exportar la animacin anterior a DW hacer los pasos que estn en la pgina 31.

MENU EMERGENTE CON UNA IMAGEN

Primera forma

LI

1-El primer paso es insertar una imagen en Fireworks. lLICLIZAKLDFJSDKLFJSDF

29

2-Herramienta Divisin, que se encuentra en el panel de herramientas de Fireworks, de modo que nos quede de la siguiente forma.

3-Luego en la pestaa Comandos de la barra de men, seleccionamos Web y despus Definir texto ALT.

4-Aparecer el siguiente cuadro donde escribiremos el Texto ALT. 5-Damos clic en Aceptar.

6-Al presionar F12 veremos en el explorador al pasar el cursor del mouse sobre la imagen el Texto ALT que colocamos a la imagen.

LI

lLICLIZAKLDFJSDKLFJSDF

30

Segunda Forma Al seleccionar la imagen con la Herramienta Divisin, el inspector de propiedades cambia de forma, hay una parte donde dice Alt: all escribimos el texto ALT, presionamos la tecla Enter y lo vemos en el explorador para ver el Texto ALT.

NOTA: El texto que queramos poner en el inspector no tiene limite podemos digitar o pegar todo el texto que queramos y el resultado ser el mismo. Insertar una animacin de Fireworks a Dreamweaver 1 forma: Primero creamos la animacin, en este caso, un botn animado en Fireworks, luego damos clic en Archivo, despus en Exportar y aparecer el siguientecuadrodonde guardaremos la animacin.

En la zona del cuadro que dice debemosseleccionarexportar HTML e imgenes, le ponemos un nombre a la animacin y damos clic en Exportar.

LI

lLICLIZAKLDFJSDKLFJSDF

31

Cuando ya estamos en DW damos clic en el Men Insertar y seleccionamos Objetos de imagen, luego HTML de Fireworks.

Y aparecer el siguiente cuadro donde debemos dar clic en Examinar.

Luegoaparecereste cuadro, donde debemos seleccionar el archivo con la extensin HTML, en este caso animacin1, damos clic en Abrir y luego en Aceptar y ya tenemos la animacin en DW, ahora al presionar F12,veremosla animacinenel explorador.

LI

lLICLIZAKLDFJSDKLFJSDF

32

2 Forma: 1. Editamos la imagen en FW.

2. En la barra de herramientas seleccionar se encuentra Exportar rea.

3. Seleccionamos la imagen y le damos clic derecho sobre la seleccin. 4. Luego seleccionamos Exportar rea.

5. Nos aparece la siguiente ventana.

LI

lLICLIZAKLDFJSDKLFJSDF

33

6. Damos clic en el botn de en medio Aadir color a la transparencia

7. La imagen quedar como sigue:

8. Damos clic en exportar.

9. Nombramos el botn, exportamos como HTML e imgenes. 10.Damos clic en exportar. 11. Es importante que cuando estemos editando la imagen optimicemos.

LI

lLICLIZAKLDFJSDKLFJSDF