Manual de Firework

  • View
    66

  • Download
    0

Embed Size (px)

Transcript

ManualdeFireworks]JulioCsarHernndezHernndez Estemanualcontienetodoloqueserecibienel cursodeOperacinRedenelaode2007

2

INDICE N 1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11 12 13 14 NOMBREDESCRIPCION 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

JulioCsarHernndezHernndez

3

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

4

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 HerramientasEl 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. El panel Herramientas contiene docenas de 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.

Seleccin de una herramienta en un grupo de herramientas

5

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.

MONTAGEDEUNAIMAGENSOBREOTRA Primeraforma: 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

6

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

7

7. Luego pinchamos la pestaa seleccionar y elegimos seleccionar inverso

8. Nos quedar seleccionada la imagen y el cuadro

8

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.

9

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

10

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

3. Selecciona exportar rea

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

12

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

COMOHACERUNESCUDO EjercicioN21- 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

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.

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:

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

16

1. IMPORTAR IMAGEN 2. SELECCIONAR IMAGEN

3. Con un crculo

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

17

5. Queda como sigue

6. As quedar

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

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

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 la derecha de la pantalla seleccionamos la opcin 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.

y

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.

Las imgenes quedaran de la siguiente forma. Sealamos el

20

rectngulo para que cambie el botn blanco a la parte