Ejercicio Fireworks 8

CUADERNO DE EJERCICIOS FIREWORKS.

CUADERNO DE EJERCICIOS FIREWORKS 8Pgina 1

Contenido

EJERCICIO 13

EJERCICIO 24

EJERCICIO 36

PRACTICA 19

PRACTICA 210

EJERCICIO 411

PRACTICA 3 MAPA DE BITS12

EJERCICIO 513

PRACTICA 4 Uso de objetos vectoriales16

EJERCICIO 618

PRACTICA 5 Trabajo con texto y vectores19

PRACTICA 6 Convertir texto en trazados21

EJERCICIO 722

EJERCICIO 823

PRACTICA 724

PRACTICA 825

EJERCICIO 926

EJERCICIO 1029

EJERCICIO 1131

EJERCICIO 1233

EJERCICIO 1336

PRACTICA 9 Creacin de botones39

PRACTICA 10 Creacin de rollovers40

EJERCICIO 1442


EJERCICIO 1

Objetivo: Aprender el entorno IDE 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.

Abrir Fireworks 8

Crear un archivo nuevo con 640 x 400 pixels De la barra de herramientas Vector, crear un rectangulo

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

OBJETIVO: Usar las herramientas de mapa de bits: Varita Magica, Desenfocar y Sello.

Abrir Fireworks 8

Crear un archivo nuevo con 640 x 480 pixeles y fondo blanco

Importar una imagen. Menu Archivo, Importar. Seleccionar la imagen de ejemplo indicada en el curso o cualquier otra personalizada.

Redimensionar si es necesario.

Siguiendo las indicaciones dadas en el segundo videotutorial, seleccionar la herramienta de VARITA MAGICA y eliminar todo el fondo azul de la imagen.


Usar la herramienta desenfocar y difuminar para crear una imagen mas artistica de nuestra imagen.

7. Prueba tu creatividad!


EJERCICIO 3

OBJETIVO: Manejo de las herramientas basicas de vector: Linea, Pluma, Formas, Texto y Estilo Libre.

Abrir Fireworks 8

Crear un documento nuevo con las caracteristicas estandares. Seleccionar la herramienta de linea (vector) Seleccionar el color amarillo Seleccionar el tamao de la punta en 20 Seleccionar la categoria del trazo como ANTINATURAL\PINTURA VISCOSA Seleccionar la textura como GASA.

Trazar una segunda linea diagonal con las mismas caracteristicas haciendo una cruz. Seleccionar la herramienta pluma y dibujar un trazo parecido al videotutorial. Usar la opcion de relleno para que quede de color azul:


Ahora de las opciones de relleno, usa la opcion de DEGRADADO, para que tenga dos colores.

Usa el que mas te guste

Y selecciona la herramienta de puntero para que modifiques el tamao y ubicacin de tu degradado. Mas o menos asi:

Ahora selecciona la herramienta de cuadrado y dibuja uno cerca del centro Y seleccionamos el color en Degradado y Ondas. Y la opcion de LINEA\RESALTADO.


Crea otra figura, por ejemplo un circulo. Para que quede de manera perfecta puedes usar la tecla SHIFT+EL MOUSE para que lo dimensiones del tamao deseado.

A esta ultima figura ponle un patron de relleno Onda Azul. Y el color del borde o linea ponlo amarillo Puedes practicar con alguna otra figura de tu eleccion.

Ahora seleccin la herramienta de texto y posiciona el cursor en un area disponible. Ah comenzaremos a escribir. Teclea: MI WEB

Ahora selecciona la herramienta de puntero para activar todas sus propiedades. Selecciona un tipo de fuente (o letra) como Bauhaus 93. Selecciona el tamao de la letra a 70 Ponle el color de fondo a la letra como #66CC66. El contorno o linea de la letra en azul solido normal


PRACTICA 1

OBJETIVO: Practica de forma recuadro y objeto texto

Abrir Fireworks

Crear un nuevo archivo con las dimensiones de 300 x 300 y un fondo personalizado a su gusto.

Crear un recuadro blanco que cubra totalmente el lienzo. Usa la herramienta escala si no te quedo del mismo tamao.

A continuacion de la paleta de colores, eliminar el relleno del cuadro. Poner el color de la linea de borde de color amarillo y que se vea en el lienzo Hacer el borde mas grueso a 5 Poner la categoria del trazo como ANTINATURAL y CHAPOTEO. Seleccionar la herramienta Texto Escribir UNIVERSIDAD. El color del texto queda en blanco. El tamao esta a 30 Hay que seleccionarlo para moverlo y centrarlo en el recuadro Repetir los pasos 8 al 12 poniendo el texto: DE y luego MATAMOROS.

Seleccionar las tres cajas de texto (mediante el uso de SHIFT y un click del raton) para centrarlos de manera correcta.

Tambien podemos seleccionar el menu MODIFICAR, ALINEAR y CENTRAR VERTICALMENTE (o CTRL+ALT+2)

Sobre esa seleccin, escogemos FILTROS (ver videotutorial para recordar) y ponemos SOMBREAR E ILUMINAR e ILUMINADO

Cambiar el color del iluminado de rojo a amarillo

Ponerle un contorno o borde de linea gris a las letras para que resalte el amarillo de la iluminacion


PRACTICA 2

OBJETIVO: Crear un display o avatar para nuestro MSN.

Abrir Fireworks 8

Crear un nuevo documento con las propiedades de 150 x 150 con color de lienzo personalizado (lo dejaremos en blanco)

Crear un marco para nuestra nueva imagen. (Ver los pasos de la practica anterior). Seleccionar herramienta cuadro de la seccion vector Poner la linea de borde de color azul oscuro Poner el color de relleno de color mostaza El grosor del borde quedara en 5

Opcional, la categoria del trazo puede quedar en ANTINATURAL y BRILLANTE 3D

Para mejorar el color de fondo, podemos seleccionar un degradado como CONTORNO.

Ahora selecciona la herramienta de texto y escribe: MSN. Centra el texto Pon un tamao de 70 Utilizar un filtro de SOMBRAR E ILUMINAR e ILUMINADO INTERIOR. Usamos un color en variacion azul para el iluminado

Ahora debemos exportar la imagen para ser usada en nuestro mensajero.

Ir al panel optimizar del lado derecho del entorno FIREWORKS

Se va a seleccionar el formato de exportacion JEPG. Lo seleccionamos del panel Ahora vamos al menu ARCHIVO y la opcion EXPORTAR

Se abrira una caja de dialogo, indicandonos a que carpeta lo vamos a grabar. Seleccionamos la de nuestra preferencia

Y damos el boton de exportar.


EJERCICIO 4

OBJETIVO: Aprender a realizar recortes de fotos

Abrir Fireworks 8

Crear un documento con las propiedades de 640 x 480. Y fondo blanco. Abrir la imagen ejercicio04_imagen.bmp

Usar la herramienta Lazo de Poligono de la seccion MAPA de bits para recortar el contorno de la imagen

Una vez terminado, dar doble click para la seleccin Copiar la imagen con CTRL+C Pegar la imagen en nuestro lienzo del primer archivo creado Usar la herramienta desenfocar al gusto

Ahora crear una forma de rectangulo que cubra todo el lienzo de color de relleno azul

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

Ajustar el color del rectangulo cambiando de solido a degradado (al gusto) Aplicamos un filtro DESENFOQUE GAUSIANNO al rectangulo

Despues seleccionamos la imagen recortada y aplicamos un filtro de SOMBRA e ILUMINACION y SOMBRA, marcando una distancia de 40


PRACTICA 3 MAPA DE BITS

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 ejercicio1.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.

Importa 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 1 con cuatro elementos. Cambia el nombre a todos los elementos por el del cantante correspondiente. Modifica tambin el nombre de la carpeta Capa 1 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

OBJETIVO: Uso de colores

Abrir Fireworks

Crear un archivo nuevo de 640x480 pixels. Y fondo blanco Importar una imagen de prueba. O usar la imagen ejercicio05_imagen.jpg

Con la imagen seleccionada, nos vamos al menu principal y seleccionamos FILTRO, AJUSTAR COLOR y BRILLO Y CONTRASTE

Cambiamos los valores al gusto para mejorar la imagen. Ejemplo Brillo -6 y contraste

Puedes ajustar los valores que mas te agraden. Cuando finalices dale ACEPTAR. Ahora prueba del mismo menu de Filtro, AJUSTAR COLOR, CURVAS.

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: 167, Salida: 131 Puedes probar otras curvaturas a tu gusto. Cuando termines dale ACEPTAR. Ahora selecciona nuevamente el menu FILTRO, AJUSTAR COLOR, INVERTIR Veras que se crea un negativo de la imagen o colores contrarios. Una vez aplicado, dale CTRL+Z para deshacer. Ahora selecciona el menu FILTRO, AJUSTAR COLOR, MATIZ Y SATURACION. Prueba a cambiar los valores , y veras que se modifican los 3 colores primarios. Ajusta a tu gusto. Como ejemplo: pon los siguientes valores: Matiz -167 Saturacion -100 Luminosidad 35 Veras que obtienes una imagen en tonos grises Graba tu trabajo


PARTE II

Elimina ahora la imagen porque vamos a trabajar con texto. Selecciona la herramienta de texto. Posiciona el cursor en el lienzo Escribe: Universidad El color de la letra puede ser #003366 El tamao es 50 El tipo de fuente Bauhaus 93 Centra el texto

Ahora selecciona de las propiedades del texto seleccionado SOMBREAR E ILUMINAR, SOMBRA

Prueba a cambiar la distancia de la sombra para que quede a tu gusto Crea un nuevo texto escribiendo: de Agrega el filtro de SOMBRAR E ILUMINAR, SOMBRA INTERIOR. Cambia el tipo de color interno para que se ajuste a tu gusto Ahora crea una nuevo texto escribiendo: Matamoros Agrega el filtro BISEL Y RELIEVE, BISEL INTERIOR. Ajusta a tu gusto. Tambien puedes usar Bisel exterior (opcional)


PRACTICA 4 Uso de objetos vectoriales

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.


EJERCICIO 6

OBJETIVO: Agregar mas efectos a los TEXTOS

Abrir Fireworks

Crear un nuevo archivo con 640x200 pixels Fondo Blanco Crear el siguiente texto: UNIVERSIDAD DE MATAMOROS Usa el color, fuente y tamao que gustes para que quede centrado. Aplicamos FILTRO, BISEL Y RELIEVE, BISEL INTERIOR Aplicamos FILTRO, SOMBREAR E ILUMINAR, SOMBRA Aplicamos FILTRO, SOMBREAR E ILUMINAR, ILUMINADO Cambiamos el color del iluminado a celeste claro ( #99CCFF) Cambiamos el desplazamiento a 1 Cambiamos la suavidad a 3

Con el texto seleccionado lo copiamos y lo pegamos inmediatamente en la parte inferior (crearemos un reflejo del texto)

Ahora seleccionamos el menu MODIFICAR, TRANSFORMAR, VOLTEAR VERTICALMENTE

Ahora, en el panel de capa, en su opacidad, cambiamos a 30 Volvemos a seleccionar el texto original, lo copiamos y volvemos a pegar. Y modificamos el tamao del texto a 300 En la seccion de capas, la movemos hacia abajo Y cambiamos la opacidad a 20


PRACTICA 5 Trabajo con texto y vectores

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 ejercicio31.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:

Incorpora 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 19

En ModificarTransformarDistorsionar, modificaremos las esquinas de la seleccin de texto para que nos quede algo as:


PRACTICA 6 Convertir texto en trazados

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 DRIP tal y como se muestra a continuacin?

CUADERNO DE EJERCICIOS FIREWORKSPgina 21

EJERCICIO 7

OBJETIVO: Creacion de un GIF ANIMADO

Abrir Fireworks 8

Crear un nuevo documento de 100x100 y fondo blanco

Abrimos del lado derecho en el area de paneles, FOTOGRAMAS Y HISTORIAL

Importar una imagen ejercicio07_imagen.png

Crear 11 fotogramas de la misma imagen.

En el primer fotograma se queda como esta

El segundo bajaremos la opacidad a 80

En tercero bajamos opacidad a 60

En el cuarto a 40 El quinto a 20 El sexto la opacidad aumenta a 0 El septimo a 20 El octavo a 40 El noveno a 60 El decimo a 80 Y el undecimo a 100 Ahora desde el panel de optimizacion, seleccionamos GIF ANIMADO. Colores 256 Despues nos vamos a ARCHIVO, EXPORTAR Le damos un nombre y lo guardamos Abrimos la ubicacin para ver nuestro gif animado


EJERCICIO 8

OBJETIVO: Creacion GIF Animado

Abrir Fireworks

Crear documento 100x100 fondo blanco

Dibujamos un circulo, en la esquina superior izquierda.

Copiamos esto a un segundo fotograma

En este segundo, selecciono el circulo y copio y pego un segundo circulo en la esquina superior derecha.

Vuelvo a copiar este fotograma para crear el numero 3

Nuevamente, selecciono el circulo, copio y pego el tercero circulo en la esquina inferior derecha

Repetimos los pasos anteriores para crear el cuarto fotograma Copio otro circulo para pegarlo en la esquina inferior izquierda Creo un nuevo fotograma basado en el anterior Ahora tecleo un texto en el centro del cuadro con la palabra: YO Como sugerencia poner el color de la letra en rojo y posiblemente el tamao en 30 Le ponemos la opacidad en 0 Nuevamente copiamos el fotograma para crear el sexto Ahora seleccionamos el texto y la opacidad incrementara a 20

Repetiremos los pasos de copiado de fotogramas y seleccin de texto hasta que la opacidad alcance 100

Crear un ultimo fotograma totalmente en blanco


PRACTICA 7

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:

Imgenes de mapas de bits

Creacion de objetos de vector

Texto

Filtros y colores segn tu gusto.

Este es un ejemplo:


PRACTICA 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 12 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?calendarId=monthLSf1&sid=QCJXHqSF

Tu crea el resto de los meses si es mensual o solo uno si es anual.


EJERCICIO 9

OBJETIVO: Crear una pagina web indice

Abrir Fireworks 8

Crear un documento con 640x480, resolucion 200, fondo blanco

Dibujamos un rectangulo del tamao del lienzo

El color de fondo sera azul

Ademas, llevara un patron de fondo HILOS3

Despues crearemos un logotipo de la siguiente forma

Creamos un circulo perfecto

El color de relleno sera DEGRADADO, RECTANGULO

Los colores a manejar seran negro y blanco El color de linea sera negro El tipo de linea sera ANTINATURAL, CHAPOTEO El tamao sera a 10

Cambiamos los colores del degradado: el primero en azul y el segundo en negro: #006666 y #000000

Crearmos una copia menor del mismo circulo Quitaremos el borde de linea Y cambiamos el color de relleno: gris y celeste: #999999 y #006666 Tambien cambiamos la opacidad al 50% Creamos el texto que ira dentro del circulo: UNIMAT La fuente sera Kristen ITC El tamao sera 45 El color de la letra sera blanco Ahora crearemos el boton de entrar. Se dibujara un objeto de flecha Modifiquemos la flecha para que quede asi:

El color de relleno de la flecha sera blanco Sin borde de linea Ahora pongamos texto dentro de la flecha: ENTRAR

Seleccionamos las primeras dos letras y la pondremos en un tamao 14 o menos de tal forma que se ajuste al grueso de la linea

Luego seleccionamos las letras restantes que queden dentro de la flecha y pondremos un tamao mas grande, por ejemplo a 30

A todo el texto pongamosle iluminado interior en color gris Y tambien el efecto de sombra 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 MODIFICAR la opcion AGRUPAR.

Nos iremos al panel de fotogramas y creamos una copia de este objeto

Seleccionado el segundo fotograma, aplicamos un filtro de AJUSTE DE COLOR, INVERTIR

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)

Despues damos un click dentro del area con boton derecho y del menu que aparece, seleccionamos AADIR COMPORTAMIENTO DE ROLLOVER SIMPLE

Para verlo pulsamos F12 y veremos su comportamiento en el Internet Explorer.

Ahora sigue los mismos pasos para que realices otra version de este ejercicio y quede mas o menos asi:



EJERCICIO 10

OBJETIVO: Crear una pagina de entrada a un sitio web

Abrir Fireworks 8

Crear un documento 300x300 con fondo blanco

Crear un texto: [ENTRAR]

La fuente sera AGENCY FB

El color de la letra amarillo claro

En modo ITALICO

Ahora, teclea el nombre de la empresa creando un nuevo texto: UNIVERSIDA DE MATAMOROS

Ahora crear un circulo perfecto con relleno negro Y crear un segundo circulo mas pequeo, de color gris claro

Arreglamos las capas de tal forma que las letras queden en primer plano mas o menos asi:

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 Vamos al panel de fotograma y duplicaremos este, copiandolo

Ahora en el primer fotograma, agregaremos un efecto de sombra a la palabra ENTRAR

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 SIMPLE

Podemos probar nuestro diseo pulsando F12 para verlo en el Internet Explorer.

Una vez concluido, procedemos a exportarlo para ser usado por la pagina web

Usaremos el boton de EXPORTACION RAPIDA que esta en la parte superior derecha de la ventana de trabajo


De ah seleccionamos DREAMWEAVER, EXPORTAR HTML

Nos preguntara en donde vamos a grabarlo. Seleccionamos la carpeta deseada

Y de la caja de dialogo marcaremos la opcion COLOCAR IMGENES EN SUBCARPETA

Y le damos el boton de EXAMINAR

Aparecera una segunda caja de dialogo e indicaremos la ubicacin de la subcarpeta. Es recomendable crearla si no existe con el nombre de IMGENES

Y damos un click en ABRIR Ahora ya podemos dar un click en el boton EXPORTAR

Para verlo, podemos irnos a la carpeta donde se guardo y abrirlo con cualquier navegador.

PARTE II

Ahora podemos editar los archivos generados por fireworks, abriendo el programa de DREAMWEAVER

Abrimos nuestro archivo HTML que hemos creado

Seleccionamos la tabla que contiene la imagen y de las propiedades de la parte inferior, lo centramos

Ahora damos un click en cualquier parte de la pagina y de sus propiedades seleccionamos el boton PROPIEDADES DE LA PAGINA para cambiar algunos aspectos

En la categoria de ASPECTO, el MARGEN SUPERIOR lo ponemos a 0 El color de fondo sera gris #CCCCCC

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 VINCULO. Ah teclearemos la direccion URL a la pagina donde queremos ir. Como ejemplo pondremos: http://www.yahoo.com.mx


EJERCICIO 11

OBJETIVO: Crear un menu para una pagina web

Abrir Fireworks 8

Crear un nuevo documento 400x1000

Seleccionamos la herramienta RECTANGULO REDONDEADO de la seccion VECTOR

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

El color de relleno del objeto sera azul oscuro

Crearemos 5 botones que seran las opciones del menu de nuestra pagina web. Asi que copiaremos y pegaremos el objeto hacia abajo

Ahora escribiremos el primer texto para nuestro primer boton: HOME. Tipo de fuente Arial, a 30, color amarillo medio

Continuaremos poniendo texto en cada uno de los botones, ajustando el tamao por si no estuviera dentro del cuadro de boton. Las opciones son:

QUIENES SOMOS SERVICIOS QUE HACEMOS UBICACIN LINKS CONTACTO

Ahora tenemos que alinear todo el texto. Se selecciona cada uno de los textos manteniendo la tecla SHIFT presionada y nos vamos al menu MODIFICAR, ALINEAR, IZQUIERDA

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

Ahora seleccionamos cada uno de los recuadros redondeados y pondremos el relleno como degradado SATEN

Ahora seleccionamos cada uno de los textos y aplicamos el filtro ILUMINADO El color del iluminado sera negro Y todavia con la seleccin, aplicamos el contorno de la linea de las letras en azul A cada recuadro de boton aplicamos el filtro ILUMINADO, color negro y suavidad 4 Hay que crear un area de division para cada uno de los botones. Creamos un segundo fotograma en el panel correspondiente

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 Seleccionamos todos los cuadros de texto nuevamente

Cambiamos el color de la letra a azul

Y el color de la linea lo ponemos en amarillo

Seleccionamos cada uno de los cuadros de boton y cambiaremos el degradado por uno llamado RECTANGULO

Volvemos a hacer visible la capa web Regresamos al fotograma 1 y haciendo click en el circulo blanco, aplicamos AADIR


ROLLOVER SIMPLE en cada uno de los cuadros de boton 25. Pulsamos F12 para verlo en nuestro explorador


EJERCICIO 12

OBJETIVO: Otra forma de realizar index para la web, exportarlo, agregar una animacion flash y vincularlo con otra pagina web

NOTA: PARA ESTE EJERCICIO SE UTILIZARAN LOS SIGUIENTES PROGRAMAS: FIREWORKS 8, FLASH 8 y DREAMWEAVER 8. ASEGURATE DE TENERLOS INSTALADOS

BASADO EN VIDEOTUTORIAL 13

Abrir Fireworks 8

Crear un nuevo documento 640x480 y fondo blanco

Comenzamos creando un texto con letra negra, tamao 40, fuente COMIC SANS MS que sera el nombre de nuestra empresa: UNIVERSIDAD DE MATAMOROS

Lo centramos.

Despues creamos otro texto: BIENVENIDOS, insertando caracteres especiales (que se encuentran en uno de los paneles:

Creamos un tercer texto que sera nuestro boton para poner en la parte inferior con el texto: ENTRAR

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


Para nuestro boton de entrar tambien necesitaremos crear una region de division con la misma herramienta

Y aadimos en nuestro boton un comportamiento de ROLLOVER SIMPLE.

Ahora necesitamos EXPORTAR nuestro trabajo a DREAMWEAVER, usando el boton de exportacion rapida.

Recordemos que tenemos que publicar a una carpeta y crear una subcarpeta para las imgenes que contenga nuestro diseo

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

Cerramos fireworks

PARTE II

Abrimos Flash 8

Creamos un documento nuevo, y especificaremos el tamao de este de acuerdo a la region previamente definida

Creamos un objeto de texto y escribiremos: www.unimat.com El tipo de fuente puede ser VGAROUNDED, tamao 40, y un filtro de ILUMINADO

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 INTERPOLACION DE MOVIMIENTO


Ahora selecciono el fotograma 10

Pulso F6

Ahora moveremos nuestro texto desde la parte superior al centro e inferior para que tenga ese efecto de movimiento

Podemos pulsar CTRL+ENTER para ver el efecto

Guardamos y exportamos nuestra pelicula a formato SWF.

PARTE III

Abrimos Dreamweaver

Abrimos nuestro archivo HTML que creamos en fireworks

Damos un click en el centro de nuestro archivo que es donde teniamos la region de divison.

Una vez que aparece el recuadro de seleccin, le damos ELIMINAR (tecla DEL) para quitarlo y poder insertar el flash

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

De la caja de dialogo que se abrira, seleccionaremos nuestro archivo flash que debe terminar con la extension .SWF

Al hacerlo, tambien nos pidre un titulo o referencia del archivo. Es bueno para cuando la pagina se vaya cargando. Teclearemos BIENVENIDA

Ahora hay que insertar el hipervinculo a nuestro boton de entrar. Seleccionamos la palabra ENTRAR

En la parte inferior de propiedades, seleccionamos la opcion VINCULO, y tecleamos: http://www.google.com

Tambien podemos centrar nuestra tabla para que quede correctamente al verse en el navegador. Seleccionamos la tabla y le damos la alineacion al CENTRO

Presionamos F12 para ver la vista previa en el navegador


EJERCICIO 13

OBJETIVO: Crear una imagen rollover

Abrir Fireworks 8

Crear un nuevo documento de 640x480, fondo blanco

Comenzamos creando un recuadro redondeado y lo colocamos en la parte superior de nuestro lienzo

El relleno del objeto anterior sera negro

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 Ahora creamos las siguientes palabras: Silla Pelota PC

Seleccionamos cada objeto de texto (usando SHIFT) y luego del menu superior: MODIFICAR, ALINEAR, CENTRAR HORIZONTALMENTE. Quedara mas o menos asi:

Ahora, debemos usar la herramienta de DIVISION para marcar cada palabra (boton) de nuestro menu.

Para que cambien de color las letras, necesitamos copiar el fotograma donde estamos trabajando en el panel correspondiente

Ahora ocultamos la capa WEB para poder editar nuevamente cada palabra

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

Cambiaremos el color de la letra a NEGRO

Aunque de momento no se vera, ahora aplicaremos el FILTRO, ILUMINADO, y el color de este se pondra en BLANCO para que resalte. La opacidad la pondremos en 100%

Volvemos a mostrar la capa WEB

Y en cada una de las divisiones, haremos click para mostrar el submenu y ASIGNAR COMPORTAMIENTO DE ROLLOVER SIMPLE

Podemos probar nuestro avance pulsando F12 y verlo en nuestro Internet Explorer.

Ahora crearemos 4 fotogramas (1 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

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)

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.

Haremos lo mismo con el siguiente fotograma que corresponde a la Silla Y el resto de las palabras

Una vez concluido, regresamos al fotograma 1, y volvemos a seleccionar la region de division de la primer palabra o boton CASA. Abrimos el submenu y seleccionamos la opcion: AADIR COMPORTAMIENTO DE INTERCAMBIAR IMAGEN Aparecera una caja de dialogo:


De esta seleccionamos la region a donde aparecera la imagen (centro) y el numero de fotograma que correspondera, en este caso el numero 3

Repetimos lo mismo con la palabra SILLA Igualmente para el resto de las palabras. Probamos pulsando F12 Grabamos


PRACTICA 9 Creacin de botones

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 100 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 EdicinInsertarNuevo 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: Inicio, 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.


PRACTICA 10 Creacin de rollovers

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 12 imgenes para 12 reas sensibles al ratn, aadiremos

12 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 1:


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 Internet 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

OBJETIVO: Crear menus emergentes o submenus para Web

Abrir Fireworks 8

Crear un nuevo documento con 640x480, fondo blanco

Comenzamos creando un encabezado mediante un rectangulo posicionado en la parte superior, con un color de relleno solido de azul celeste: #336699

Un segundo rectangulo en la parte inferior de este de color gris. Este sera de un tamao mas pequeo en anchura que el primero

En la parte superior donde (primer rectangulo) creamos un texto: UNIVERSIDAD DE MATAMOROS, y le daremos un efecto de sombra. El color de la letra sera blanco. La fuente sera ARIAL y el tamao puede ser 45

Y un segundo filtro de ILUMINADO, con color gris oscuro

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

Escribiremos el siguiente texto para cada boton: Home Productos Videos Tutoriales Contacto

Quedara mas o menos asi:

Ahora creamos un recuadro de division por cada boton de nuestro menu, usando la herramienta de la seccion WEB

Ahora seleccionamos el primer boton, y abrimos el submenu de la division para seleccionar la opcion: AADIR UN MENU EMERGENTE

Aparecera un cuadro de dialogo, donde indicaremos las subopciones para este menu:


Ahora nos vamos a la pestaa ASPECTO para cambiar un poco el diseo De estas opciones seleccionaremos que las CELDAS sean IMAGEN La fuente se quedara como esta El tamao a 14 y NEGRITA El color del texto sera BLANCO El color de la celda sera NEGRO Y el estilo al gusto Despues, en el estado SOBRE seleccionamos el color del texto NEGRO

Y el color de la celda BLANCO

El estilo sera el mismo seleccionado anteriormente Ahora pasamos a la pestaa POSICION

De los cuatro iconos que se presenta, en este caso seleccionaremos el segundo para que el menu se despliegue hacia abajo.

Damos click en el boton LISTO Probamos pulsando F12. Y quedara mas o menos asi:


Ahora crearemos los siguientes submenus para las demas opciones principales. En productos pondremos:

Software

Hardware

Accesorios

Para videos pondremos: Macromedia Flash Macromedia Fireworks Macromedia Dreamweaver Codigo HTML Para tutoriales pondremos: ABCDATOS MUNDO TUTORIALES CRISTALAB Y para contacto: VIA WEB VIA EMAIL

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 VINCULO, los siguientes:

http://www.abcdatos.com http://www.mundotutoriales.com http://www.cristalab.com Grabamos y probamos con F12


Ejercicio Fireworks 8

Documents

Transcript of Ejercicio Fireworks 8