Ejercicio Fireworks 8

CUADERNO DE EJERClClOS
FlREWORKS.
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina 1
Contenido
EJERClClO l......................................................................................................3
EJERClClO 2......................................................................................................4
EJERClClO 3......................................................................................................6
PRACTlCA l.......................................................................................................9
PRACTlCA 2.....................................................................................................l0
EJERClClO 4....................................................................................................ll
PRACTlCA 3 MAPA DE BlTS.........................................................................l2
EJERClClO 5....................................................................................................l3
PRACTlCA 4 Uso de objetos vectoriales...........................................................l6
EJERClClO 6....................................................................................................l8
PRACTlCA 5 Trabajo con texto y vectores........................................................l9
PRACTlCA 6 Convertir texto en trazados..........................................................2l
EJERClClO 7....................................................................................................22
EJERClClO 8....................................................................................................23
PRACTlCA 7.....................................................................................................24
PRACTlCA 8.....................................................................................................25
EJERClClO 9....................................................................................................26
EJERClClO l0..................................................................................................29
EJERClClO ll..................................................................................................3l
EJERClClO l2..................................................................................................33
EJERClClO l3..................................................................................................36
PRACTlCA 9 Creacin de botones....................................................................39
PRACTlCA l0 Creacin de rollovers.................................................................40
EJERClClO l4..................................................................................................42
EJERCICIO 1
Objetivo: Aprender el entorno lDE de fireworks, y manejar las herramientas
basicas de dibujo: vectorial y de mapa de bits. (Creacion de formas y uso de lapiz y
pincel). Tambien se debe aprender a usar el cambio de colores; y las herramientas de
seleccin y subseleccion, asi como escala.
1. Abrir Fireworks 8
2. Crear un archivo nuevo con 640 x 400 pixels
3. De la barra de herramientas Vector, crear un rectangulo
4. De la barra de herramientas Seleccionar modificar el rectangulo como una
flecha, usando la herramienta de subseleccion.
5. Usar la herramienta lapiz y pincel con dos colores distintos.
EJERCICIO 2
OBJETlVO: Usar las herramientas de mapa de bits: Varita Magica, Desenfocar y Sello.
2. Crear un archivo nuevo con 640 x 480 pixeles y fondo blanco
3. lmportar una imagen. Menu Archivo, lmportar. Seleccionar la imagen de ejemplo
indicada en el curso o cualquier otra personalizada.
4. Redimensionar si es necesario.
5. Siguiendo las indicaciones dadas en el segundo videotutorial, seleccionar la
herramienta de VARlTA MAGlCA y eliminar todo el fondo azul de la imagen.
6. Usar la herramienta desenfocar y difuminar para crear una imagen mas artistica de
nuestra imagen.
7. Prueba tu creatividad!
EJERCICIO 3
OBJETlVO: Manejo de las herramientas basicas de vector: Linea, Pluma,
Formas, Texto y Estilo Libre.
2. Crear un documento nuevo con las caracteristicas estandares.
3. Seleccionar la herramienta de linea (vector)
4. Seleccionar el color amarillo
5. Seleccionar el tamao de la punta en 20
6. Seleccionar la categoria del trazo como ANTlNATURAL\PlNTURA VlSCOSA
7. Seleccionar la textura como GASA.
8. Trazar una segunda linea diagonal con las mismas caracteristicas haciendo
una cruz.
9. Seleccionar la herramienta pluma y dibujar un trazo parecido al videotutorial.
10. Usar la opcion de relleno para que quede de color azul:
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina
11. Ahora de las opciones de relleno, usa la opcion de DEGRADADO, para que tenga
dos colores.
12. Usa el que mas te guste
13. Y selecciona la herramienta de puntero para que modifiques el tamao y ubicacin
de tu degradado. Mas o menos asi:
14. Ahora selecciona la herramienta de cuadrado y dibuja uno cerca del centro
15. Y seleccionamos el color en Degradado y Ondas.
16. Y la opcion de LlNEA\RESALTADO.
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina !
Crea otra figura, por ejemplo un circulo. Para que quede de manera perfecta puedes
usar la tecla SHlFT+EL MOUSE para que lo dimensiones del tamao deseado.
17. A esta ultima figura ponle un patron de relleno Onda Azul.
18. Y el color del borde o linea ponlo amarillo
19. Puedes practicar con alguna otra figura de tu eleccion.
20. Ahora seleccin la herramienta de texto y posiciona el cursor en un area disponible.
Ah comenzaremos a escribir. Teclea: Ml WEB
21. Ahora selecciona la herramienta de puntero para activar todas sus propiedades.
22. Selecciona un tipo de fuente (o letra) como Bauhaus 93.
23. Selecciona el tamao de la letra a 70
24. Ponle el color de fondo a la letra como #66CC66.
25. El contorno o linea de la letra en azul solido normal
PRAC"ICA 1
OBJETlVO: Practica de forma recuadro y objeto texto
1. Abrir Fireworks
2. Crear un nuevo archivo con las dimensiones de 300 x 300 y un fondo personalizado
a su gusto.
3. Crear un recuadro blanco que cubra totalmente el lienzo. Usa la herramienta escala
si no te quedo del mismo tamao.
4. A continuacion de la paleta de colores, eliminar el relleno del cuadro.
5. Poner el color de la linea de borde de color amarillo y que se vea en el lienzo
6. Hacer el borde mas grueso a 5
7. Poner la categoria del trazo como ANTlNATURAL y CHAPOTEO.
8. Seleccionar la herramienta Texto
9. Escribir UNlVERSlDAD.
10. El color del texto queda en blanco.
11. El tamao esta a 30
12. Hay que seleccionarlo para moverlo y centrarlo en el recuadro
13. Repetir los pasos 8 al l2 poniendo el texto: DE y luego MATAMOROS.
14. Seleccionar las tres cajas de texto (mediante el uso de SHlFT y un click del raton)
para centrarlos de manera correcta.
15. Tambien podemos seleccionar el menu MODlFlCAR, ALlNEAR y CENTRAR
VERTlCALMENTE (o CTRL+ALT+2)
16. Sobre esa seleccin, escogemos FlLTROS (ver videotutorial para recordar) y
ponemos SOMBREAR E lLUMlNAR e lLUMlNADO
17. Cambiar el color del iluminado de rojo a amarillo
18. Ponerle un contorno o borde de linea gris a las letras para que resalte el amarillo de
la iluminacion
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina #
PRAC"ICA 2
OBJETlVO: Crear un display o avatar para nuestro MSN.
2. Crear un nuevo documento con las propiedades de l50 x l50 con color de lienzo
personalizado (lo dejaremos en blanco)
3. Crear un marco para nuestra nueva imagen. (Ver los pasos de la practica anterior).
a. Seleccionar herramienta cuadro de la seccion vector
b. Poner la linea de borde de color azul oscuro
c. Poner el color de relleno de color mostaza
d. El grosor del borde quedara en 5
e. Opcional, la categoria del trazo puede quedar en ANTlNATURAL y
BRlLLANTE 3D
f. Para mejorar el color de fondo, podemos seleccionar un degradado como
CONTORNO.
4. Ahora selecciona la herramienta de texto y escribe: MSN.
5. Centra el texto
6. Pon un tamao de 70
7. Utilizar un filtro de SOMBRAR E lLUMlNAR e lLUMlNADO lNTERlOR.
8. Usamos un color en variacion azul para el iluminado
Ahora debemos exportar la imagen para ser usada en nuestro mensajero.
1. lr al panel optimizar del lado derecho del entorno FlREWORKS
2. Se va a seleccionar el formato de exportacion JEPG. Lo seleccionamos del panel
3. Ahora vamos al menu ARCHlVO y la opcion EXPORTAR
4. Se abrira una caja de dialogo, indicandonos a que carpeta lo vamos a grabar.
Seleccionamos la de nuestra preferencia
5. Y damos el boton de exportar.
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina 1$
EJERCICIO 4
OBJETlVO: Aprender a realizar recortes de fotos
2. Crear un documento con las propiedades de 640 x 480. Y fondo blanco.
3. Abrir la imagen ejercicio04_imagen.bmp
4. Usar la herramienta Lazo de Poligono de la seccion MAPA de bits para recortar el
contorno de la imagen
5. Una vez terminado, dar doble click para la seleccin
6. Copiar la imagen con CTRL+C
7. Pegar la imagen en nuestro lienzo del primer archivo creado
8. Usar la herramienta desenfocar al gusto
9. Ahora crear una forma de rectangulo que cubra todo el lienzo de color de relleno azul
10. Si tapa la primera imagen, nos iremos al panel de capa y moveremos la posicion de
tal manera que quede debajo de la primera imagen
11. Ajustar el color del rectangulo cambiando de solido a degradado (al gusto)
12. Aplicamos un filtro DESENFOQUE GAUSlANNO al rectangulo
13. Despues seleccionamos la imagen recortada y aplicamos un filtro de SOMBRA e
lLUMlNAClON y SOMBRA, marcando una distancia de 40
PRAC"ICA 3 % &APA DE 'I"S
Para realizar este ejercicio crea un rea de dibujo de 700 x 900 pixeles (alto
x ancho) con fondo de color rojo #CC3300 (valor hexadecimal). Graba el proyecto
inicial como "ejerciciol.png"
El trabajo con mapa de bits en Fireworks es una de las tareas ms
importantes cuando se pretende crear una pgina con con ilustraciones. La imagen
(que siempre ser importada) debe ser adaptada al entorno en el que se quiere
ubicar. Esta tarea conlleva fundamentalmente una extraccin del objeto de inters
del entorno original y una modificacin de las condiciones cromticas, iluminacin y
opacidad.
lmporta las imgenes "Lenny", "Madonna", "Alejandro" y "Estopa" en
diferentes zonas de tu rea de dibujo web. El objetivo es eliminar el fondo de todas
ellas. En la seleccin de la zona de inters prueba con diferentes opciones
(recuadro, varita mgica y lazo). Qu diferencias encuentras entre el borde en
modo suavizado y fundido?
Realiza una transformacin de "escalado" en los elementos que lo precisen
para conseguir los tamaos que se muestran a continuacin:
Una vez has realizado esta tarea, deberas observar en la carpeta de
capas, una capa denominada "Capa l" con cuatro elementos. Cambia el nombre a
todos los elementos por el del cantante correspondiente. Modifica tambin el
nombre de la carpeta "Capa l" por el de "Cantantes".
A continuacin, modifica la opacidad de los elementos de la capa
"Cantantes" de la siguiente forma: Estopa: 50%, Alejandro Sanz: 60%, Jenny
Kravitz: 70% y Madonna: 80%.
Antes de finalizar, aade un sombreado a los elementos. Visualiza el trabajo
realizado hasta ahora en los modos "Original" y "Vista previa". Observas diferencias
entre ambos modos? Qu le ocurre a la sombra?
EJERCICIO 5
OBJETlVO: Uso de colores
1. Abrir Fireworks
2. Crear un archivo nuevo de 640x480 pixels. Y fondo blanco
3. lmportar una imagen de prueba. O usar la imagen ejercicio05_imagen.jpg
4. Con la imagen seleccionada, nos vamos al menu principal y seleccionamos
FlLTRO, AJUSTAR COLOR y BRlLLO Y CONTRASTE
5. Cambiamos los valores al gusto para mejorar la imagen. Ejemplo Brillo -6 y contraste
20. Puedes ajustar los valores que mas te agraden. Cuando finalices dale
ACEPTAR.
6. Ahora prueba del mismo menu de Filtro, AJUSTAR COLOR, CURVAS.
7. De la caja de dialogo que aparece, prueba a modificar la curva del canal para
posterizar cambiar la luminosidad de la imagen. Como ejemplo, seleccionaras
el canal RVA (los 3 colores) y con la curvatura de Entrada: l67, Salida: l3l
8. Puedes probar otras curvaturas a tu gusto. Cuando termines dale ACEPTAR.
9. Ahora selecciona nuevamente el menu FlLTRO, AJUSTAR COLOR, lNVERTlR
10. Veras que se crea un negativo de la imagen o colores contrarios.
11. Una vez aplicado, dale CTRL+Z para deshacer.
12. Ahora selecciona el menu FlLTRO, AJUSTAR COLOR, MATlZ Y SATURAClON.
13. Prueba a cambiar los valores , y veras que se modifican los 3 colores primarios.
14. Ajusta a tu gusto. Como ejemplo: pon los siguientes valores:
a. Matiz -l67
b. Saturacion -l00
c. Luminosidad 35
15. Veras que obtienes una imagen en tonos grises
16. Graba tu trabajo
PARTE ll
1. Elimina ahora la imagen porque vamos a trabajar con texto.
2. Selecciona la herramienta de texto. Posiciona el cursor en el lienzo
3. Escribe: Universidad
4. El color de la letra puede ser #003366
5. El tamao es 50
6. El tipo de fuente Bauhaus 93
7. Centra el texto
8. Ahora selecciona de las propiedades del texto seleccionado SOMBREAR E
lLUMlNAR, SOMBRA
9. Prueba a cambiar la distancia de la sombra para que quede a tu gusto
10. Crea un nuevo texto escribiendo: de
11. Agrega el filtro de SOMBRAR E lLUMlNAR, SOMBRA lNTERlOR.
12. Cambia el tipo de color interno para que se ajuste a tu gusto
13. Ahora crea una nuevo texto escribiendo: Matamoros
14. Agrega el filtro BlSEL Y RELlEVE, BlSEL lNTERlOR.
15. Ajusta a tu gusto. Tambien puedes usar Bisel exterior (opcional)
PRAC"ICA 4 U(o de o)*eto( +e,to-ia.e(
Para realizar este ejercicio crea un rea de dibujo de 400x400 pixeles con
fondo blanco #FFFFFF (valor hexadecimal). Graba el proyecto inicial como
"ejercicio2.png"
En clase presencial has aprendido a desarrollar dibujos vectoriales con
Fireworks. Adems de finalizar el proyecto de la guitarra elctrica, te proponemos
ahora realizar un CD de msica. Para tal fin, vamos a crear dos objetos vectoriales
como los que puedes observar en la figura adjunta.
Cada uno de ellos est compuesto de dos elipses (una exterior y otra
interior) que se han combinado en modo "perforar". Con este modo de combinacin
de trazados logramos que el CD tenga un hueco en su interior.
La superficie plateada del CD se ha imitado con un degradado "cono" en
tonos "pastel" como el que puedes observar y que dispones en la versin MX de
Fireworks facilitada en el curso:
Despus de superponer las dos composiciones de elipses perforadas debes
apreciar un CD como el que se muestra a continuacin:
Realiza una "agrupacin" de los dos elementos y asigna, en la carpeta de
capas en la que estn ubicados, el nombre de "CD" al nuevo conjunto.
A continuacin, vamos a posicionar el CD sobre un fondo degradado. La
realizacin de degradados en Fireworks es muy sencilla. Lo primero que debes
hacer es crear una imagen de mapa de bits sobre la que aplicar el degradado. La
imagen de mapa de bits actuar como una transparencia (invisible) hasta que se
rellene con elementos o con tinta (nuestro caso). En la carpeta de capas elige
"nueva imagen". Una vez creada la imagen transparente, realiza sobre ella un
degradado "lineal" de azul a blanco.
Recuerda que la nueva imagen de mapa de bits debe estar situada por
debajo del elemento "CD".
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina 1!
EJERCICIO
OBJETlVO: Agregar mas efectos a los TEXTOS
1. Abrir Fireworks
2. Crear un nuevo archivo con 640x200 pixels
3. Fondo Blanco
4. Crear el siguiente texto: UNlVERSlDAD DE MATAMOROS
5. Usa el color, fuente y tamao que gustes para que quede centrado.
6. Aplicamos FlLTRO, BlSEL Y RELlEVE, BlSEL lNTERlOR
7. Aplicamos FlLTRO, SOMBREAR E lLUMlNAR, SOMBRA
8. Aplicamos FlLTRO, SOMBREAR E lLUMlNAR, lLUMlNADO
9. Cambiamos el color del iluminado a celeste claro ( #99CCFF)
10. Cambiamos el desplazamiento a l
11. Cambiamos la suavidad a 3
12. Con el texto seleccionado lo copiamos y lo pegamos inmediatamente en
la parte inferior (crearemos un reflejo del texto)
13. Ahora seleccionamos el menu MODlFlCAR,
TRANSFORMAR, VOLTEAR VERTlCALMENTE
14. Ahora, en el panel de capa, en su opacidad, cambiamos a 30
15. Volvemos a seleccionar el texto original, lo copiamos y volvemos a pegar.
16. Y modificamos el tamao del texto a 300
17. En la seccion de capas, la movemos hacia abajo
18. Y cambiamos la opacidad a 20
PRAC"ICA 5 "-a)a*o ,on te/to 0 +e,to-e(
Para realizar este ejercicio crea un rea de dibujo de 600x400 pixeles
(ancho x alto) con fondo rojo #CC3300 (valor hexadecimal). Graba el proyecto
inicial como "ejercicio3l.png"
La capacidad de creacin de titulares de texto con Fireworks es
especialmente alta, permitiendo incorporar efectos y modificaciones de prrafo
por encima de otras herramientas de la competencia. Una vez introduzcas texto
en el rea de dibujo, asegrate de haber elegido la opcin "suavizado tenue" en
las herramientas de texto, con esto logrars que el borde del texto no quede
discretizado, sino ms suave.
Crea un rea de objeto vectorial rectangular de color rojo (#932500) en el
centro de la pantalla. Una vez posicionado, adele un efecto de "sombra" con la
configuracin que se muestra a continuacin:
Nuestro objetivo es colocar un titular sobre este rectngulo sombreado.
Una tarea importante es decidir el tipo de letra a emplear. Tal y como habrs
aprendido en clase, el tipo de letra a utilizar siempre debe ir asociado con la
temtica del diseo que quieras desarrollar, y es que no es lo mismo:
Coloca la palabra "Kissme" en el interior del rectngulo. Emplea el tipo de
letra "Monotype cursiva" o similar. A continuacin, aplica un efecto al texto de
"iluminado" con la siguiente configuracin:
lncorpora algn elemento significativo con la palabra kissme, como pueden
ser unos labios diseados como un objeto vectorial.
Antes de finalizar vamos a "distorsionar" el objeto texto para mostrar una
apariencia
ms atractiva a lavista.
CUADERNO DE EJERCICIOS FIREWORKS 8
Pgina
1#
En "ModificarTransformarDistorsionar", modificaremos las esquinas de
la seleccin de texto para que nos quede algo as:
CUADERNO DE EJERCICIOS FIREWORKS 8 Pgina 2$
PRAC"ICA Con+e-ti- te/to en t-a1ado(
Para realizar este ejercicio crea un rea de dibujo de 200x200 pixeles con
fondo rojo #932500 (valor hexadecimal). Graba el proyecto inicial como
"ejercicio32.png"
El objeto texto tiene la caracterstica de ser editable en todo el desarrollo de
nuestro proyecto, es decir, se puede modificar el contenido, el tipo de letra, etc.
Podramos decir que su naturaleza dentro de Fireworks es diferente a la de un mapa
de bits y a la de un trazado vectorial. Esta naturaleza diferente va a limitar su
comportamiento. Por ejemplo, si nuestro proyecto es trasladado a otro PC en el que
no se encuentra disponible la fuente tipogrfica original obtendremos resultados
visuales algo desagradables.
Para evitar limitaciones en nuestro diseo y hacer el titular de texto an ms
personal es importante convertir el texto en trazado "TextoConvertir en trazados".
Ahora, el texto pasa a ser un vector (con lnea y relleno), pudiendo incorporar
texturas, degradados, etc. y lo que es ms importante, puedes modificar los
anclajes de los vectores para crear logotipos o distintivos de empresa.
A partir de un texto con la palabra "web" (tipografa "century gothic") intenta
realizar las modificaciones necesarias de trazado para llegar al siguiente resultado:
Crees que podras modificar la palabra DRlP tal y como se muestra a
continuacin?
CUADERNO DE EJERCICIOS FIREWORKS Pgina 21
EJERCICIO !
OBJETlVO: Creacion de un GlF ANlMADO
2. Crear un nuevo documento de l00xl00 y fondo blanco
3. Abrimos del lado derecho en el area de paneles, FOTOGRAMAS Y
HlSTORlAL
4. lmportar una imagen ejercicio07_imagen.png
5. Crear ll fotogramas de la misma imagen.
6. En el primer fotograma se queda como esta
7. El segundo bajaremos la opacidad a 80
8. En tercero bajamos opacidad a 60
9. En el cuarto a 40
10. El quinto a 20
11. El sexto la opacidad aumenta a 0
12. El septimo a 20
13. El octavo a 40
14. El noveno a 60
15. El decimo a 80
16. Y el undecimo a l00
17. Ahora desde el panel de optimizacion, seleccionamos GlF ANlMADO.
Colores 256
18. Despues nos vamos a ARCHlVO, EXPORTAR
19. Le damos un nombre y lo guardamos
20. Abrimos la ubicacin para ver nuestro gif animado
EJERCICIO 8
OBJETlVO: Creacion GlF Animado
1. Abrir Fireworks
2. Crear documento l00xl00 fondo blanco
3. Dibujamos un circulo, en la esquina superior izquierda.
4. Copiamos esto a un segundo fotograma
5. En este segundo, selecciono el circulo y copio y pego un segundo circulo en
la esquina superior derecha.
6. Vuelvo a copiar este fotograma para crear el numero 3
7. Nuevamente, selecciono el circulo, copio y pego el tercero circulo en la
esquina inferior derecha
8. Repetimos los pasos anteriores para crear el cuarto fotograma
9. Copio otro circulo para pegarlo en la esquina inferior izquierda
10. Creo un nuevo fotograma basado en el anterior
11. Ahora tecleo un texto en el centro del cuadro con la palabra: YO
12. Como sugerencia poner el color de la letra en rojo y posiblemente el tamao en
30
13. Le ponemos la opacidad en 0
14. Nuevamente copiamos el fotograma para crear el sexto
15. Ahora seleccionamos el texto y la opacidad incrementara a 20
16. Repetiremos los pasos de copiado de fotogramas y seleccin de texto
hasta que la opacidad alcance l00
17. Crear un ultimo fotograma totalmente en blanco
PRAC"ICA !
Antes de continuar con la creacion de diseo para paginas web, vamos a repasar
con esta practica algunos de los conocimientos sobre las herramientas que has
aprendido, asi como mostrar tu creatividad.
Disea unas tarjetas de presentacion para ti mismo, usando:
a) lmgenes de mapas de bits
b) Creacion de objetos de vector
c) Texto
d) Filtros y colores segn tu gusto.
Este es un ejemplo:
PRAC"ICA 8
Nuevamente pon a prueba tu creatividad, diseando un calendario anual o
mensual. Si el calendario es anual, necesitaras solamente una fotografia
Si el calendario es mensual necesitaras l2 fotografias que mas te gusten. Puedes
darles el efecto que gustes.
Para que obtengas los calendarios anuales o mensuales, busca en internet las
aplicaciones en linea que hay para ello, haciendo la busqueda en GOOGLE.
Puedes intentar con estas direcciones:
http://www.timeanddate.com/calendar/monthly.html
http://www.calendarsthatwork.com/calendar.php?
calendarld=monthLSfl&sid=QCJXHqSF
Tu crea el resto de los meses si es mensual o solo uno si es anual.
EJERCICIO #
OBJETlVO: Crear una pagina web indice
2. Crear un documento con 640x480, resolucion 200, fondo blanco
3. Dibujamos un rectangulo del tamao del lienzo
4. El color de fondo sera azul
5. Ademas, llevara un patron de fondo HlLOS3
6. Despues crearemos un logotipo de la siguiente forma
7. Creamos un circulo perfecto
8. El color de relleno sera DEGRADADO, RECTANGULO
9. Los colores a manejar seran negro y blanco
10. El color de linea sera negro
11. El tipo de linea sera ANTlNATURAL, CHAPOTEO
12. El tamao sera a l0
13. Cambiamos los colores del degradado: el primero en azul y el segundo
en negro: #006666 y #000000
14. Crearmos una copia menor del mismo circulo
15. Quitaremos el borde de linea
16. Y cambiamos el color de relleno: gris y celeste: #999999 y #006666
17. Tambien cambiamos la opacidad al 50%
18. Creamos el texto que ira dentro del circulo: UNlMAT
19. La fuente sera Kristen lTC
20. El tamao sera 45
21. El color de la letra sera blanco
22. Ahora crearemos el boton de entrar. Se dibujara un objeto de flecha
23. Modifiquemos la flecha para que quede asi:
24. El color de relleno de la flecha sera blanco
25. Sin borde de linea
26. Ahora pongamos texto dentro de la flecha: ENTRAR
27. Seleccionamos las primeras dos letras y la pondremos en un tamao l4 o
menos de tal forma que se ajuste al grueso de la linea
28. Luego seleccionamos las letras restantes que queden dentro de la flecha y
pondremos un tamao mas grande, por ejemplo a 30
29. A todo el texto pongamosle iluminado interior en color gris
30. Y tambien el efecto de sombra
31. Ahora agruparemos el texto y la flecha para que se convierta en un solo objeto:
Seleccionamos el texto y la flecha y pulsamos CTRL+G o bien del menu
superior MODlFlCAR la opcion AGRUPAR.
32. Nos iremos al panel de fotogramas y creamos una copia de este objeto
33. Seleccionado el segundo fotograma, aplicamos un filtro de AJUSTE
DE COLOR, lNVERTlR
34. Ahora creamos un cuadro de division. De la caja de herramientas del lado
izquierdo, en la seccion Web, seleccionamos la herramienta de division y
trazamos un recuadro alrededor del objeto de flecha del primer fotograma.
(Despues de creado veremos un area verde)
35. Despues damos un click dentro del area con boton derecho y del menu que
aparece, seleccionamos AADlR COMPORTAMlENTO DE ROLLOVER
SlMPLE
36. Para verlo pulsamos Fl2 y veremos su comportamiento en el lnternet Explorer.
37. Ahora sigue los mismos pasos para que realices otra version de este ejercicio
y quede mas o menos asi:
CUADERNO DE EJERCICIOS FIREWORKS Pgina 2!
EJERCICIO 1$
OBJETlVO: Crear una pagina de entrada a un sitio web
2. Crear un documento 300x300 con fondo blanco
3. Crear un texto: [ENTRAR]
4. La fuente sera AGENCY FB
5. El color de la letra amarillo claro
6. En modo lTALlCO
7. Ahora, teclea el nombre de la empresa creando un nuevo texto:
UNlVERSlDA DE MATAMOROS
8. Ahora crear un circulo perfecto con relleno negro
9. Y crear un segundo circulo mas pequeo, de color gris claro
10. Arreglamos las capas de tal forma que las letras queden en primer plano mas
o menos asi:
11. Ahora vamos a crear una division para nuestro boton de entrada,
seleccionando la herramienta de division web del menu de herramientas y
haciendo un rectangulo alrededor de la palabra entrar
12. Vamos al panel de fotograma y duplicaremos este, copiandolo
13. Ahora en el primer fotograma, agregaremos un efecto de sombra a la palabra
ENTRAR
14. Y en el cuadro de division (verde) damos un click en el circulo blanco
(centrado) para aparecer el submenu e indicamos que sea un ROLLOVER
SlMPLE
15. Podemos probar nuestro diseo pulsando Fl2 para verlo en el lnternet
Explorer.
16. Una vez concluido, procedemos a exportarlo para ser usado por la pagina web
17. Usaremos el boton de EXPORTAClON RAPlDA que esta en la parte superior
derecha de la ventana de trabajo
CUADERNO DE EJERCICIOS FIREWORKS Pgina 2#
18. De ah seleccionamos DREAMWEAVER, EXPORTAR HTML
19. Nos preguntara en donde vamos a grabarlo. Seleccionamos la carpeta
deseada
20. Y de la caja de dialogo marcaremos la opcion COLOCAR lMAGENES EN
SUBCARPETA
21. Y le damos el boton de EXAMlNAR
22. Aparecera una segunda caja de dialogo e indicaremos la ubicacin de la
subcarpeta. Es recomendable crearla si no existe con el nombre de
lMAGENES
23. Y damos un click en ABRlR
24. Ahora ya podemos dar un click en el boton EXPORTAR
25. Para verlo, podemos irnos a la carpeta donde se guardo y abrirlo con
cualquier navegador.
PARTE ll
1. Ahora podemos editar los archivos generados por fireworks, abriendo el
programa de DREAMWEAVER
2. Abrimos nuestro archivo HTML que hemos creado
3. Seleccionamos la tabla que contiene la imagen y de las propiedades de
la parte inferior, lo centramos
4. Ahora damos un click en cualquier parte de la pagina y de sus propiedades
seleccionamos el boton PROPlEDADES DE LA PAGlNA para cambiar
algunos aspectos
5. En la categoria de ASPECTO, el MARGEN SUPERlOR lo ponemos a 0
6. El color de fondo sera gris #CCCCCC
7. Seleccionamos nuestra area interactiva que es donde esta el texto entrar y de
sus propiedades de la parte inferior, nos vamos a la opcion de VlNCULO. Ah
teclearemos la direccion URL a la pagina donde queremos ir.
8. Como ejemplo pondremos: http://www.yahoo.com.mx
CUADERNO DE EJERCICIOS FIREWORKS Pgina 3$
EJERCICIO 11
OBJETlVO: Crear un menu para una pagina web
2. Crear un nuevo documento 400xl000
3. Seleccionamos la herramienta RECTANGULO REDONDEADO de la seccion
VECTOR
4. Se crea el rectangulo, dejando el borde izquierdo fuera del lienzo, para que
de esa manera solo el lado derecho se vea redondeado y el lado izquierdo
cuadrado
5. El color de relleno del objeto sera azul oscuro
6. Crearemos 5 botones que seran las opciones del menu de nuestra pagina
web. Asi que copiaremos y pegaremos el objeto hacia abajo
7. Ahora escribiremos el primer texto para nuestro primer boton: HOME. Tipo de
fuente Arial, a 30, color amarillo medio
8. Continuaremos poniendo texto en cada uno de los botones, ajustando el
tamao por si no estuviera dentro del cuadro de boton. Las opciones son:
a. QUlENES SOMOS
b. SERVlClOS
c. QUE HACEMOS
d. UBlCAClN
e. LlNKS
f. CONTACTO
9. Ahora tenemos que alinear todo el texto. Se selecciona cada uno de los
textos manteniendo la tecla SHlFT presionada y nos vamos al menu
MODlFlCAR, ALlNEAR, lZQUlERDA
10. Poner en la parte inferior, el nombre o logo de la empresa. Creando un
recuadro de ser necesario con un relleno amarillo y letras azules para que
combine
11. Ahora seleccionamos cada uno de los recuadros redondeados y pondremos
el relleno como degradado SATEN
12. Ahora seleccionamos cada uno de los textos y aplicamos el filtro lLUMlNADO
13. El color del iluminado sera negro
14. Y todavia con la seleccin, aplicamos el contorno de la linea de las letras en
azul
15. A cada recuadro de boton aplicamos el filtro lLUMlNADO, color negro y
suavidad 4
16. Hay que crear un area de division para cada uno de los botones.
17. Creamos un segundo fotograma en el panel correspondiente
18. Posicionados en el segundo fotograma, vamos a cambiar las letras de los
botones para crear su efecto ROLLOVER, para lo cual desactivamos la capa
WEB, marcando el icono de ojo para que desaparezca y poder hacer la
edicion
19. Seleccionamos todos los cuadros de texto nuevamente
20. Cambiamos el color de la letra a azul
21. Y el color de la linea lo ponemos en amarillo
22. Seleccionamos cada uno de los cuadros de boton y cambiaremos el
degradado por uno llamado RECTANGULO
23. Volvemos a hacer visible la capa web
24. Regresamos al fotograma l y haciendo click en el circulo blanco, aplicamos
AADlR
ROLLOVER SlMPLE en cada uno de los cuadros
de boton 25. Pulsamos Fl2 para verlo en nuestro
explorador
EJERCICIO 12
OBJETlVO: Otra forma de realizar index para la web, exportarlo, agregar una
animacion flash y vincularlo con otra pagina web
NOTA: PARA ESTE EJERClClO SE UTlLlZARAN LOS SlGUlENTES
PROGRAMAS: FlREWORKS 8, FLASH 8 y DREAMWEAVER 8. ASEGURATE DE
TENERLOS lNSTALADOS
BASADO EN VlDEOTUTORlAL l3
2. Crear un nuevo documento 640x480 y fondo blanco
3. Comenzamos creando un texto con letra negra, tamao 40, fuente COMlC
SANS MS que sera el nombre de nuestra empresa: UNlVERSlDAD DE
MATAMOROS
4. Lo centramos.
5. Despues creamos otro texto: BlENVENlDOS, insertando caracteres
especiales (que se encuentran en uno de los paneles:
6. Creamos un tercer texto que sera nuestro boton para poner en la parte inferior
con el texto: ENTRAR
7. En la parte central de nuestro lienzo es donde pondremos una animacion
de flash. Para ello usamos la herramienta de division y crearemos un
recuadro o region en dicha parte central
8. Para nuestro boton de entrar tambien necesitaremos crear una region de
division con la misma herramienta
9. Y aadimos en nuestro boton un comportamiento de ROLLOVER SlMPLE.
10. Ahora necesitamos EXPORTAR nuestro trabajo a DREAMWEAVER, usando
el boton de exportacion rapida.
11. Recordemos que tenemos que publicar a una carpeta y crear una subcarpeta
para las imgenes que contenga nuestro diseo
12. Y antes de salir de Fireworks, debemos anotar el tamao de nuestra area de
division marcada para nuestra animacion flash, porque sera importante
definirlo posteriormente en Flash. Como ejemplo, fue de: 479x235
13. Cerramos fireworks
PARTE ll
1. Abrimos Flash 8
2. Creamos un documento nuevo, y especificaremos el tamao de este de
acuerdo a la region previamente definida
3. Creamos un objeto de texto y escribiremos: www.unimat.com
4. El tipo de fuente puede ser VGAROUNDED, tamao 40, y un filtro de
lLUMlNADO
5. Ahora nos vamos a la parte superior donde esta la linea de tiempo y con
el boton derecho en el primer fotograma y marcamos CREAR
lNTERPOLAClON DE MOVlMlENTO
Ahora selecciono el fotograma l0
6. Pulso F6
7. Ahora moveremos nuestro texto desde la parte superior al centro e inferior
para que tenga ese efecto de movimiento
8. Podemos pulsar CTRL+ENTER para ver el efecto
9. Guardamos y exportamos nuestra pelicula a formato SWF.
PARTE lll
1. Abrimos Dreamweaver
2. Abrimos nuestro archivo HTML que creamos en fireworks
3. Damos un click en el centro de nuestro archivo que es donde teniamos la
region de divison.
4. Una vez que aparece el recuadro de seleccin, le damos ELlMlNAR (tecla
DEL) para quitarlo y poder insertar el flash
5. Ahora de la barra de herramientas COMUN, que esta en la parte superior de
nuestra edicion, seleccionamos el septimo icono para insertar nuestro
archivo flash
6. De la caja de dialogo que se abrira, seleccionaremos nuestro archivo flash
que debe terminar con la extension .SWF
7. Al hacerlo, tambien nos pidre un titulo o referencia del archivo. Es bueno para
cuando la pagina se vaya cargando. Teclearemos BlENVENlDA
8. Ahora hay que insertar el hipervinculo a nuestro boton de entrar.
Seleccionamos la palabra ENTRAR
9. En la parte inferior de propiedades, seleccionamos la opcion VlNCULO, y
tecleamos: http://www.google.com
10. Tambien podemos centrar nuestra tabla para que quede correctamente al
verse en el navegador. Seleccionamos la tabla y le damos la alineacion al
CENTRO
11. Presionamos Fl2 para ver la vista previa en el navegador
EJERCICIO 13
OBJETlVO: Crear una imagen rollover
2. Crear un nuevo documento de 640x480, fondo blanco
3. Comenzamos creando un recuadro redondeado y lo colocamos en la parte
superior de nuestro lienzo
4. El relleno del objeto anterior sera negro
5. Ahora creamos dos botones de texto, por lo que comenzamos con el
primero posicionados dentro del rectangulo, con un color de texto blanco
y el tamao de acuerdo al ancho que hayamos dibujado
6. Ahora creamos las siguientes palabras:
a. Silla
b. Pelota
c. PC
7. Seleccionamos cada objeto de texto (usando SHlFT) y luego del menu
superior: MODlFlCAR, ALlNEAR, CENTRAR HORlZONTALMENTE.
Quedara mas o menos asi:
8. Ahora, debemos usar la herramienta de DlVlSlON para marcar cada
palabra (boton) de nuestro menu.
9. Para que cambien de color las letras, necesitamos copiar el fotograma donde
estamos trabajando en el panel correspondiente
10. Ahora ocultamos la capa WEB para poder editar nuevamente cada palabra
11. Desde el panel capas seleccionamos todas las que contienen las palabras
para que al realizar una operacin esta afecte a todas las capas por igual
12. Cambiaremos el color de la letra a NEGRO
13. Aunque de momento no se vera, ahora aplicaremos el FlLTRO, lLUMlNADO,
y el color de este se pondra en BLANCO para que resalte. La opacidad la
pondremos en l00%
14. Volvemos a mostrar la capa WEB
15. Y en cada una de las divisiones, haremos click para mostrar el submenu y
ASlGNAR COMPORTAMlENTO DE ROLLOVER SlMPLE
16. Podemos probar nuestro avance pulsando Fl2 y verlo en nuestro lnternet
Explorer.
17. Ahora crearemos 4 fotogramas (l por cada palabra) para que al pasar el
raton por ellas, nos muestre una imagen correspondiente. Asi, el fotograma
2 lo copiaremos 4 veces mas
18. Ahora nos posicionaremos en el fotograma 3, y dibujaremos un recuadro de
division web que es donde aparecera la imagen deseada. (Como ejemplo
puedes dibujarla al centro del lienzo)
19. Ahora insertaremos las imgenes de ejemplo que tenemos. En este caso la de
casa. Habra que redimensionar el tamao para que quede dentro del area
verde de nuestra
division.
20. Haremos lo mismo con el siguiente fotograma que corresponde a la Silla
21. Y el resto de las palabras
22. Una vez concluido, regresamos al fotograma l, y volvemos a seleccionar la
region de division de la primer palabra o boton CASA. Abrimos el submenu y
seleccionamos la opcion: AADlR COMPORTAMlENTO DE
lNTERCAMBlAR lMAGEN
23. Aparecera una caja de dialogo:
CUADERNO DE EJERCICIOS FIREWORKS Pgina 3!
De esta seleccionamos la region a donde aparecera la imagen (centro) y el
numero de fotograma que correspondera, en este caso el numero 3
24. Repetimos lo mismo con la palabra SlLLA
25. lgualmente para el resto de las palabras.
26. Probamos pulsando Fl2
27. Grabamos
PRAC"ICA # C-ea,i2n de )otone(
Para realizar este ejercicio crea un rea de dibujo de 500x400 pixeles (ancho
x alto) con fondo de color salmn #FDBD84 (valor hexadecimal) y con un rectngulo
rojo superior de altura l00 pixels y color rojo #CC3300. Graba el proyecto inicial
como "ejercicio4.png"
Fireworks proporciona una herramienta de creacin de botones para nuestro
diseo que aumentar la capacidad interactiva de la futura web. Podemos encontrar
esta herramienta en "EdicinlnsertarNuevo botn". Una vez abierta,
disearemos el aspecto de los botones a nuestro gusto. Tal y como has visto en
clase, crea los tres comportamientos grficos del botn (Arriba, Sobre y Abajo), con
el mismo texto.
Recuerda que puedes modificar colores y efectos para que tu botn gane en
interactividad segn pasa el ratn por encima o incluso se clikea. Crea tres botones
con las mismas propiedades pero con diferente texto: "lnicio", "Contenido", "Ayuda".
Si no te has equivocado, todos los botones creados debes ser instancias del mismo
botn original.
Coloca los botones en horizontal tal y como se aprecia en el
ejemplo:
En el modo "Vista previa" puedes observar el comportamiento de los botones
segn el movimiento del ratn.
Te habrs podido dar cuenta que se han creado, de forma automtica, las
primeras divisiones web de tu diseo. Esto es slo el principio, tu web deber tener
muchas ms.
En la versin de Fireworks MX facilitada en el curso, la herramienta de
creacin de botones nos permite importar modelos de botn que nos ayudarn a
agilizar el diseo de nuestra web.
A continuacin, crea o importa nuevos botones de la biblioteca en un diseo
o rea de dibujo ms personal que hayas creado.
CUADERNO DE EJERCICIOS FIREWORKS Pgina 3#
PRAC"ICA 1$ C-ea,i2n de -o..o+e-(
Para realizar este ejercicio emplea el diseo anterior, grbalo ahora como
"ejercicio6.pn"
Los rollovers son zonas de nuestra web (imgenes) que se intercambian por
el paso del ratn. Es decir, interactividad que hace a nuestro diseo an ms
atractivo al navegante.
En el ejercicio anterior ya hemos creado rollovers, aunque de forma
automtica, pues la herramienta de creacin de botones los implementaba por
nosotros. Una consideracin importante es que cada estado de rollover (cada
imagen) deber estar almacenada en un fotograma diferente. En los botones,
Fireworks coloc el estado "Sobre" del botn en el fotograma 2 y el estado "Abajo" en
el fotograma 3.
Elegimos "VentanaFotogramas" para abrir panel de fotogramas. A
continuacin, debemos aadir los fotogramas que consideremos necesarios. Si, por
ejemplo, en nuestro diseo deseamos l2 imgenes para l2 reas sensibles al ratn,
aadiremos
l2 fotogramas a nuestro proyecto (despus del fotograma actual). Podemos
observar como cada fotograma visualiza algo diferente. El primer fotograma es el
principal y mostrar nuestra web con el diseo inicial (y el estado "Arriba" de los
botones). El segundo fotograma, por ahora, muestra el estado "Sobre" de los
botones, mientras que el tercer fotograma ensea el estado "Abajo". El cuarto y los
dems, de momento, estn vacos.
Aade a tu diseo una lista de texto con los meses del ao: Enero, Febrero y
Abril. A continuacin, realiza la divisin web de cada mes (esto es imprescindible
para la creacin de rollovers). Crea otra divisin web en un rea de trabajo en la que
quieras que cambien las imgenes por el paso del ratn segn el mes del ao.
Aydate de las "reglas" y de las "guas" para identificar esa nueva zona interactiva si
no quieres visualizar las divisiones web. De momento seguimos trabajando en el
fotograma l:
CUADERNO DE EJERCICIOS FIREWORKS Pgina 4$
A continuacin, tal y como has visto en clase, importaremos imgenes
diferentes por fotograma, asegurndonos que quedan dentro de la divisin web
central. Elige unas fotografas en lnternet que se asocien a los meses del ao.
Lo que debes hacer ahora es aadir un comportamiento a las divisiones web
de los meses del ao. Arrastra el tirador de comportamientos hasta la divisin central
para crear el rollover independiente. Elige, para cada mes del ao, el fotograma en el
que se sita la imagen deseada del mes (Enero: fotograma2, Febrero: fotograma3..)
Ya puedes visualizar en "Vista previa" el comportamiento de tu web, ocultando
las divisiones, y comprobar la interactividad de tu diseo.
EJERCICIO 14
OBJETlVO: Crear menus emergentes o submenus para Web
2. Crear un nuevo documento con 640x480, fondo blanco
3. Comenzamos creando un encabezado mediante un rectangulo
posicionado en la parte superior, con un color de relleno solido de azul
celeste: #336699
4. Un segundo rectangulo en la parte inferior de este de color gris. Este
sera de un tamao mas pequeo en anchura que el primero
5. En la parte superior donde (primer rectangulo) creamos un texto:
UNlVERSlDAD DE MATAMOROS, y le daremos un efecto de sombra. El
color de la letra sera blanco. La fuente sera ARlAL y el tamao puede ser 45
6. Y un segundo filtro de lLUMlNADO, con color gris oscuro
7. Ahora creamos unas lineas separadores de cada boton de texto, mediante
la herramientas lineas, que tendra el color negro y seran puestas en el area
gris,a intervalos mas o menos regulares segn la cantidad de opciones que
usaremos; en este caso seran 6
8. Escribiremos el siguiente texto para cada boton:
a. Home
b. Productos
c. Videos
d. Tutoriales
e. Contacto
Quedara mas o menos asi:
9. Ahora creamos un recuadro de division por cada boton de nuestro menu,
usando la herramienta de la seccion WEB
10. Ahora seleccionamos el primer boton, y abrimos el submenu de la
division para seleccionar la opcion: AADlR UN MENU EMERGENTE
11. Aparecera un cuadro de dialogo, donde indicaremos las subopciones para este
menu:
12. Ahora nos vamos a la pestaa ASPECTO para cambiar un poco el diseo
13. De estas opciones seleccionaremos que las CELDAS sean lMAGEN
14. La fuente se quedara como esta
15. El tamao a l4 y NEGRlTA
16. El color del texto sera BLANCO
17. El color de la celda sera NEGRO
18. Y el estilo al gusto
19. Despues, en el estado SOBRE seleccionamos el color del texto NEGRO
20. Y el color de la celda BLANCO
21. El estilo sera el mismo seleccionado anteriormente
22. Ahora pasamos a la pestaa POSlClON
23. De los cuatro iconos que se presenta, en este caso seleccionaremos el
segundo para que el menu se despliegue hacia abajo.
24. Damos click en el boton LlSTO
25. Probamos pulsando Fl2. Y quedara mas o menos asi:
26. Ahora crearemos los siguientes submenus para las demas opciones
principales. En productos pondremos:
a. Software
b. Hardware
c. Accesorios
27. Para videos pondremos:
a. Macromedia Flash
b. Macromedia Fireworks
c. Macromedia Dreamweaver
d. Codigo HTML
28. Para tutoriales pondremos:
a. ABCDATOS
b. MUNDO TUTORlALES
c. CRlSTALAB
29. Y para contacto:
a. VlA WEB
b. VlA EMAlL
30. Para hacer los vinculos a las paginas deseadas, regresamos al submenu
deseado para editarlo. Por ejemplo para el submenu de tutoriales,
pondremos en la columna VlNCULO, los siguientes:
a. http://www.abcdatos.com
b. http://www.mundotutoriales.com
c. http://www.cristalab.com
31. Grabamos y probamos con Fl2

Ejercicio Fireworks 8

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicio Fireworks 8

Cargado por

Copyright:

Formatos disponibles

CUADERNO DE EJERClClOS

También podría gustarte