illustrator i

Ad o b e Fi rew o rk s CS3

I.E INDEPENDENCIA - MIRAFLORES

Adobe

Fir ewor ks CS3

INTRODUCCION A ADOBE FIREWORKS CS3

Adobe Fireworks CS3 es uno de los programas más avanzados para diseñar y producir

elementos gráficos para las páginas Web. Con él podrás crear de manera rápida y

sencillo cualquier gráfico para una página Web, utilizando elementos visuales que harán

que tu diseño sea atractivo visualmente.

En esta sesión conocerás los elementos del entorno de trabajo, las diferentes secciones

de herramientas que se pueden utilizar, la ventana del documento, los paneles y el

inspector de propiedades.

INGRESAR AL PROGRAMA ADOBE FIREWORKS CS3

Para que puedas ingresar a trabajar al programa Adobe Fireworks CS3 debes completar los siguientes pasos:

Haz clic en el botón Inicio y luego en la opción To do s los pro gram as .

Finalmente selecciona Ad ob e Firew o rks CS3

Adobe Fireworks CS3 2

CREAR UN NUEVO ARCHIVO

Para crear un nuevo archivo realiza lo siguiente:

1. En la Ventana de Adobe Fireworks CS3 cargada inicialmente haz clic en:

Crear Nuevo > Do cu m en to d e Firew ork s (PNG).

2. Observa que aparece la ventana Nuevo documento. Debes configura las

propiedades (ancho, alto y color) del lienzo y hacer clic con el botón aceptar.


ENTORNO DE TRAB AJ O

Cuando ingreses a trabajar con el programa encontrarás los siguientes elementos:

1. El Men ú Princip al: Contiene las opciones principales para que puedas controlar

el funcionamiento adecuado de Fireworks.

2. La Barra d e Herr amientas: Contiene los botones y menús emergentes que te

permiten seleccionar objetos, trabajar con objetos de mapas de bits y vectores,

diseñar áreas Web y aplicar colores.

3. La Ven tana de Documento : Muestra el documento actual mientras lo estás

creando y editando.

4. La Reg la Hor izont al y Verti cal: Permite trabajar con medidas exactas dentro

del documento.

5. Lo s Paneles Ac op lables : Contienen fichas que permiten abrir y cerrar los

inspectores y paneles que se utiliza con mayor frecuencia.

6. El Panel d e Prop iedades: Muestra propiedades del objeto o texto seleccionado

y permite modificar dichas propiedades.

1

4

2 3 5

6

EL L IENZO

Cuando ingresas a trabajar con Fireworks, lo primero que debes hacer es definir el

espacio para un nuevo documento. Este espacio se denomina Lienzo. Para ello realiza lo siguiente:

1. En la ventana de Fireworks haz clic en la opción Arc hivo de Firew ork s

ubicada bajo el título Crear nu evo .


2. En la ventana Nuevo d oc um ento indica el Anc ho , Al to, Resolu ción y el Co lor

del lienzo como se muestra en la imagen y haz clic en el botón Acept ar.

3. Te aparecerá la pantalla de trabajo de Fireworks con el Lienzo en la parte

central.

LA BARRA DE HERRAMIENTAS

El panel herramientas está organizado en seis categorías: Seleccionar, Mapa de bits,

Vector, Web, Colores y Ver.

Cuando eliges una herramienta, el Inspector de propiedades muestra sus opciones.

Algunas opciones permanecen en pantalla mientras trabajas con la herramienta.

PANELES

Los paneles son elementos adicionales del área de trabajo de Fireworks que se

organizan en grupos y te proporcionan acceso a características especiales para realizar el trabajo de diseño.

Para mostrar un panel debes seguir los siguientes pasos:

1. Haz clic en el menú Ventana.

2. Selecciona el nombre del panel que deseas activar.

Recu erd a: Si quieres ocultar / mostrar todos los paneles de la pantalla puedes presionar la tecla F4 o ingresas al menú Ven tana y seleccionas Oc ultar paneles .


....

....................

MANEJ ANDO TRAZOS VECTORIALES

OBJ ETOS VECTORIALES

Los objetos vectoriales son los elementos más importantes de Adobe Fireworks CS3. Un

objeto vectorial consiste en trazos de dos puntos conectados por una línea. Los objetos

vectoriales retienen su calidad de imagen independientemente de su ampliación o

reducción.

Para trabajar con objetos vectoriales, Fireworks te proporciona una serie de

herramientas agrupadas bajo el título Vecto r.

CREAR OBJ ETOS VECTORIALES

A continuación crearás un diseño que incluye una combinación de objetos vectoriales,

para ello realiza lo siguiente:

1. Selecciona la herramienta Rec tán gu lo.

2. En el panel de propiedades haz clic en el botón de color de contorno

y en la paleta de colores escoge el color n egro . Luego haz clic en el botón de

color de relleno . ..y en la paleta de colores haz clic en el b otón trans paren te.


............

3. Arrastra el puntero del mouse (+) para dibujar un rectángulo en la parte superior del lienzo.

4. Escoge la herramienta Pun tero . .. de la

zona selecc io nar en la barra de herramientas y

haz clic fuera del lienzo.

5. Haz clic en el triángulo pequeño ubicado en el

ángulo inferior derecho de la Herrami en ta

Rectáng ul o y escoge la herramienta El ips e.

6. Dibuja una elipse en la parte inferior derecha del rectángulo para que tu gráfico

quede de la siguiente manera:

7. Haz clic en la herramienta Pu ntero y selecciona el rectángulo y la elipse. Para

seleccionar ambos elementos debes presionar Shif t+Clic i zq ui erd o y

seleccionar cada uno de los objetos.

Importante: También puedes seleccionar varios objetos al mismo tiempo dibujando un recuadro alrededor de los objetos utilizando la herramienta Pu ntero.

8. Haz clic en el menú Mod ifi car, selecciona la opción Com binar trazado s y haz

clic en perfo rac ió n. Tus objetos deben verse de la siguiente forma:


Recu erd a: Si deseas observar una vista previa de tu diseño en la Web, presiona la tecla F12 o también activa el menú Archivo y selecciona la opción Vista previa en el navegador.

GUARDAR ARCHIVOS EN FIREWORK S

Los archivos de trabajo realizados en Fireworks son almacenados en formato PNG, lo

que permite que mantengan la mejor calidad posible, especialmente en materia de

diseño Web.

A continuación vas a grabar el archivo que has estado trabajando. Para ello crea una

carpeta Firew o rks en tu carpeta llamada Sitio1 ( C:\Sitio 1 ). Luego completa los

siguientes pasos:

1. Haz clic en el menú Arc h ivo .

2. Selecciona la opción Gu ard ar co mo.

3. En la sección Gu ard ar en selecciona la carpeta Fi rewo rk s y en el cuadro

Nombre dígita " Fw rk01"

4. Finalmente, haz clic en el botón Guardar.

MANEJO DE TEXTOS

Para utilizar textos, Fireworks te proporciona la herramienta Texto que

está ubicada en la zona Vector. Cuando activas esta herramienta, el

puntero del mouse cambia a una forma que te permite trazar un recuadro

en la pantalla donde digitarás tu texto.

Además en el panel de propiedades, se muestran las opciones para

trabajar el texto como el tipo de letra, tamaño, color, etc.

INSERTAR TEXTO

Continuarás trabajando con el documento que creaste inicialmente. Para incluir texto en el diseño realiza lo siguiente:

1. Haz clic en la herramienta Tex to y dibuja un recuadro al centro de tu lienzo.

2. En la barra de propiedades selecciona la fuente Ari al Narrow , tamaño 79, color

negro, estilo Cur siva y selecciona como nivel de suavizado Su avizad o t enue.

3. Digita la palabra Adobe Fireworks CS3 y haz clic en la herramienta puntero.

Luego mueve el objeto a la parte central de tu lienzo.


Tipo de Fuent e Tamaño Estilo Nivel de Suavizado

Color

CONVERTIR TEXTO EN CURVA

1. Dibuja un círculo de tamaño mediano que tenga color de contorno negro y sin

relleno.

2. Coloca el círculo debajo del texto Fireworks.

3. Selecciona ambos objetos.

4. Haz clic en el menú Tex to y selecciona la opción Uni r al trazado.

5. Observa que el texto se adapta a la forma del círculo.

Luego de que el texto está adecuado a la curva, la forma del círculo desaparece v sólo puedes trabajar con el texto.


6. Haz clic en el triángulo debajo de la herramienta Escala y activa la herramienta

In c li nar.

7. Arrastra el nodo inferior derecho hacia abajo para que el objeto se agrande por el

costado derecho.

8. Arrastra el nodo inferior izquierdo hacia arriba para que el objeto se reduzca por

el costado izquierdo. Tu objeto debe quedar con la siguiente apariencia:

Guarda tu documento nuevamente y cierra todos los archivos.


MAPAS DE BITS

OBJ ETOS DE MAPA DE BITS

Los mapas de bits (o imágenes de tramado) son imágenes obtenidas de una cámara

digital o de un escáner. Se basan en píxeles, una determinada cantidad de puntos de

color por pulgada que configuran una imagen. Para una página Web son suficientes 72

puntos por pulgada (72 dpi.).

Para trabajar con objetos de mapa de bits, Fireworks te proporciona una serie de

herramientas agrupadas bajo el título Map a bit s.

IMPORTAR IMÁGENES

Para insertar imágenes en tu documento de Fireworks utilizarás las imágenes que están

en la carpeta ARCHIVOS FIREWORKS.

1. Haz clic en el menú Arc h ivo y luego escoge la opción Im po rtar.

2. Ubica la carpeta ARCHIVOS FIREWORKS en la lista Bus c ar en del cuadro de

diálogo Importar.

3. Selecciona la imagen DRAGON y haz clic en el botón Abri r.

4. Observa que en el lienzo, el cursor toma la forma de "L" invertida.

5. Arrastra el puntero del mouse para dibujar un recuadro de línea punteada que

demarcará el tamaño de tu imagen.

6. Cuando sueltes el botón del mouse, la imagen aparecerá en tu pantalla:


Guarda tu documento con el nombre Frwk03

Ejerc ici o:

Importa las siguientes imágenes a tu documento: CARA FEA, OGRO, TORTUGO, TORO y FEO TIPO para que tenga la siguiente apariencia:

No te olvides de guardar, nuevamente, tu documento.

CORTAR IMÁGENES

Fireworks te da la posibilidad de que puedas recortar una parte de tus imágenes de mapa de bits con forma de Recuadro o forma Oval. Para ello realiza lo siguiente:

1. Haz clic en el triángulo inferior de la herramienta Recuadro y selecciona la

herramienta Recuadro oval en la zona Map a b its .

2. En la primera imagen que insertaste, dibuja un recuadro alrededor de la zona de

la imagen que deseas recortar.


3. Haz clic en el menú Selec cionar y escoge la opción Selec cio nar i nvers o.

4. Observa que aparece otro cuadro con línea punteada alrededor de todo el lienzo.

5. Presiona la tecla Sup r para cortar la imagen y luego para finalizar presiona la

tecla Es c.

Tu documento deberá tener la siguiente apariencia:

EFECTOS ESPECIAL ES

Todos los objetos utilizados en Fireworks, sean vectoriales o mapa de bits, se pueden

resaltar de manera más eficiente aplicando diferentes efectos especiales. El grupo de

efectos especiales los puedes encontrar en la parte inferior del panel de propiedades

cada vez que seleccionas un objeto.


Dentro de los efectos especiales que puedes encontrar están: iluminación, desenfocar, ruido, bisel y relieve.

APL ICAR IL UMINACIÓN

1. Haz clic en la primera imagen.

2. Observa que en el panel de Propiedades se activa la sección de efectos con los

signos (+) y ().

3. Haz clic en el icono (+) y observa que aparecerá la lista con todos los efectos a

aplicar.

4. Selecciona la opción So mbrear e i lu minar y escoge la alternativa i lu minado .

5. En el cuadro de parámetros de iluminado, coloca el nivel de opacidad en 687o y

elige el color Naran ja para la iluminación.

6. Al terminar, haz clic fuera del recuadro de parámetros. Tu imagen quedará de la

siguiente manera.

Anchura Opacidad

Color de la

iluminación

Suavidad


APL ICAR EFECTO DE DESENFOCAR

1. Haz clic en la imagen.

2. En el panel de efectos, selecciona la opción Des en foc ar y escoge la alternativa

Desenfo qu e g aus si ano.

3. En la ventana Des enfoqu e g au ss iano , mueve el manejador Radio de

desenfoque hacia la izquierda hasta alcanzar el valor 2.1 y haz clic en Acept ar.

Tu imagen tendrá la siguiente apariencia.

APL ICAR EFECTO DE RUIDO


2. En el panel de efectos, selecciona la opción Ruido y escoge la alternativa

Añadi r ru ido.

3. En la ventana Añadi r ruido , reduce la cantidad de ruido hasta el valor 24.

4. Haz clic en el cuadro Co lor para que el ruido se visualice en blanco y negro.

Finalmente haz clic en Ac eptar.



APL ICAR EFECTO DE BISEL Y RELIEVE


2. En el panel de efectos, selecciona la opción Bi sel y Rel ieve y escoge la

alternativa B is el in terior.

3. En el cuadro de parámetros de bisel y relieve, coloca la forma del borde del bisel

en Plano y la anchura en 14.

4. Para lograr aplicar sombra al objeto que acabas de modificar selecciona la

opción So mb rear e il umin ar y escoge la alternativa Som bra.

5. Aumenta la distancia a 23 en el cuadro de parámetros de sombra.



AJ USTAR COLOR Y NIVEL DE OPACIDAD

1. Importa el archivo CLIMBER.

2. En el panel de efectos, selecciona la opción Ajus far c olo r y escoge la

alternativa Matiz/Sat uración.

3. En la ventana Mati z/Saturación,

activa la casilla COLOREAR y mueve

el control a Mati z: 276, Saturac ión:

33, Ilumin ación: 50. totalmente

hacia la izquierda hasta que veas el

valor 100 en el recuadro. Luego haz

clic en Aceptar. Observa que la

imagen se visualiza en blanco y

negro.

4. Ahora, cambia el nivel de opacidad hasta 72. El nivel de opacidad lo encuentras

arriba de la palabra Efectos en el panel de propiedades.

Guarda tu archivo y ciérralo al finalizar.

CONVERTIR IMÁ GENES EN UN MAPA DE BITS

Cuando trabajas con muchas imágenes, Adobe Fireworks CS3 te ofrece la posibilidad de agrupar todas tus imágenes y convertirlas en una sola imagen de mapa de bits. La

ventaja de este proceso es que puedes utilizar esta nueva imagen como un fondo para

cualquier página Web que puedas crear posteriormente.

Para convertir las imágenes en un mapa de bits realiza lo siguiente:

1. Selecciona todas las imágenes utilizadas en el archivo (Puedes presionar las

teclas rápidas Ctrl+A)

2. Activa el menú Modi fic ar y selecciona la opción Allanar s elecc ió n.

3. Observa en tu archivo el conjunto de imágenes se vuelve una sola imagen.


COLOR DE RELLENO DEGRADADO

Fireworks te permite trabajar toda una gama de colores de los cuales destacan los

colores de relleno degradado. Las combinaciones de colores las puedes aplicar antes de

insertar el objeto en el lienzo o posteriormente utilizando la herramienta cubo d e pin tu ra.

Los colores de relleno están ubicados tanto en la barra de herramientas como en el

panel de propiedades.

Para trabajar los ejemplos de relleno degradado, crea un nuevo archivo.

1. Dibuja una figura cualquiera.

2. Selecciona el objeto dentro del lienzo y en la barra de propiedades escoge el

color azul (#3399FF) en el panel de colores de relleno.

3. En el cuadro categoría de relleno, escoge la opción Deg radado y en el menú

con los tipos de degradado selecciona Lin eal.

4. Haz clic en el cuadro de color de relleno para que aparezca el cuadro de los

manejadores de relleno.

5. Cambia el nivel de opacidad izquierdo a 85.


Ejerc ici o.

Realizar el siguiente diseño y guárdelo con el nombre de pr incipal.png.


MANEJ ANDO INTERACTIVIDAD

BOTONES

Los botones Fireworks son objetos de tipo símbolo que te permiten establecer algunos

comportamientos o estados que observarás cuando manipules el puntero del mouse

dentro de tu Web.

CREACIÓN DE BOTONES

Ahora vas a convertir a botones algunos objetos de una Web. Para ello, abre el archivo

que creaste en el ejercicio anterior llamado principal.png o ábrelo desde la carpeta con

los archivos de trabajo, y a continuación completa los siguientes pasos:

1. Selecciona el texto “In icio ” y el rectángulo que se halla detrás de el.

2. Presiona la tecla F8, escoge la opción Botón de la ventana Propiedades de

símbolo y haz clic en Aceptar.

3. Observa que ambos objetos quedaron convertidos en un solo botón.


Impo rtante: El slice es el área donde va a aparecer la vinculación y/o comportamiento del botón. Cuando hay varias áreas de slice en una Web, éstas no pueden cruzarse ya que pueden causar comportamientos inesperados en los botones.

Ej e r c i c i o :

Convierte a botón el texto y el rectángulo de la imagen correspondiente de Nosotros, Productos, Contacto y Login.

Tu documento debería tener la siguiente apariencia:

Impo rtante: Si tus áreas de slice estuvieran cruzándose, puedes colocar el puntero del mouse dentro de la zona verde y arrastrar el botón completo hasta separar un área de la otra.

Guarda tu documento nuevamente.

ESTADOS DE UN B OTÓN

Los estados de un botón son los comportamientos que se mostrarán en la pantalla

cuando el puntero del mouse trabaje con el botón. Los estados que puedes trabajar con

un símbolo botón son:

ESTADO DESCRIPCIÓN Arriba El estado normal del botón al cargar la Web

Sobre Aparece cuando el cursor está sobre el botón

Abajo Cuando presionas el botón izquierdo sobre el botón

Sobre y Abajo Cuando el botón está presionado, si se sitúa el cursor sobre el botón

seguirá cambiando de aspecto.

Zona activa La zona de vinculación del botón


Los estados son predefinidos en Fireworks, de tal forma que tu trabajo consiste, realmente, en modificar la apariencia que tendrá el botón en cada uno de los estados.

Ahora vas a crear los estados para los botones de tu archivo. Para ello realiza lo

siguiente:

1. Haz doble clic en el área de slice del botón Estructura metal. Observa que te

aparece el panel del símbolo, el cual contiene los botones para cada uno de los

estados. Automáticamente, Fireworks solamente tiene el botón creado en el estado Arriba. Para todos los demás estados debes copiar el objeto botón.

2. Selecciona la pestaña Sobre y para copiar el objeto haz clic en el botón Copiar

gráfico Arriba. El botón aparece copiado en la pantalla.

3. Selecciona cada ficha y repite el paso número 2.

4. Haz clic en el botón Listo para terminar la definición de este botón.

En el Estado SOBRE, realice las modificaciones que creas convenientes, como por

ejemplo: cambiar el color de fondo del rectángulo y el color del texto.

En el Estado ABAJO, repita el procedimiento y modifique el gráfico.


AGREGAR INTERACTIVIDAD A L OS BOTONES

La interactividad de un botón se ve reflejada, principalmente, por los cambios que se

aprecian en la Web cuando estás navegando a través de ella. Estos cambios se

relacionan con el aspecto del botón en uno o varios de sus estados (arriba, sobre, abajo

y sobre y abajo). Para ello solamente debes agregar a tu botón los efectos que creas necesarios en sus correspondientes estados. A continuación en tu archivo trabajarás con

el botón inicio, cambiarás los efectos del texto exclusivamente para los estados de sobre

y abajo. Para ello, realiza lo siguiente:

1. Haz doble clic sobre el botón In ic io y observa que aparecerán los estados del

botón.

2. En el estado sobre, elimina el efecto iluminado del texto, selecciona el botón y

agrega un efecto sombra de color rojo, con un nivel de opacidad de 95% y una distancia de 9.

3. Haz cite en el botón Listo para aceptar los cambios.

MANEJO DE ZONAS DE DIVISIÓN

Las Zonas de División son áreas especiales en Fireworks en las que puedes establecer

comportamientos específicos de la Web al estar navegando con los botones. Estos

comportamientos pueden estar referidos a presentar imágenes de muestra o colocar

textos que describan la utilidad de cada botón definido en la página.

Fireworks te proporciona, en la barra de herramientas Web, dos tipos de zonas para

definir los comportamientos: Herramienta División y Herramienta División Poligonal. La

diferencia radica en que la Herramienta División te permite crear solamente áreas

rectangulares mientras que la División Poligonal define áreas de cualquier forma.

En tu archivo definirás un área de división para mostrar un texto y una imagen acerca de

cada uno de los tipos de trabajos realizados por el artista. Para ello realiza lo siguiente:

1. Haz clic en la Herramienta División. El puntero del mouse cambia a la forma de

una cruz (+).


2. Ubica el cursor debajo de la barra de navegación y dibuja un rectángulo.

Asegúrate que el área de división no se cruce con ninguna de las áreas de los

botones.

Guarda tu documento nuevamente.

AGREGAR COMPORTAMIENTOS

Para agregar los comportamientos para las Zonas de División es necesario activar el panel de capas (F2) y el panel de fotogramas (Shift+F2). En el panel de capas puedes

observar el área donde está definido cada uno de los objetos que conforman tu Web.

El panel de fotogramas te permite definir la información que estará asociada con cada

uno de los botones. Debes crear un fotograma por cada botón en el que vayas a definir

un comportamiento.


Para definir los objetos para los comportamientos en tu archivo, completa los siguientes pasos:

1. Activa el panel Fotogramas y el panel Capas.

2. El panel fotogramas te proporciona por omisión un fotograma llamado Fotograma

1. Para cambiar el nombre de este fotograma, haz doble clic en la palabra

fotograma 1 y digita la etiqueta "Todo".

3. Haz clic en el botón Fotograma nuevo para insertar un nuevo fotograma.

Notarás que el fondo de la pantalla desaparece.

4. Cambia el nombre de este fotograma por INICIO.

5. Crea dos nuevos fotogramas: NOSOTROS y PRODUCTOS respectivamente.

Tu documento debe tener la siguiente apariencia:


6. Haz clic en el fotograma INICIO para trabajar con él. Activa la herramienta de

texto y dibuja un recuadro de texto dentro del área de división.

7. Haz clic en el fotograma NOSOTROS para trabajar con él.


8. Haz clic en el fotograma PRODUCTOS para trabajar con él.

AÑADIR EL COMPORTAMIENTO AL B OTÓN

1. Selecciona el fotograma TODO para relacionar los botones con los fotogramas.

2. Haz clic en el botón INICIO y ubica el puntero del mouse en el botón de

inspección que aparece en el centro del mismo.

3. Haz clic en dicho botón y en el menú contextual que te aparece, escoge la

opción Añadi r com po rtami en to i nt erc ambiar i m agen.

4. En el cuadro de diálogo Intercambiar imagen verás a la derecha la zona de vista

previa de las áreas de división para intercambio de imágenes.

5. Haz clic en la división que representa el área de los textos e imágenes.


6. En el cuadro de lista fotograma N° selecciona el fotograma INICIO (2) y luego

haz clic en Aceptar.

Observa que ahora aparece una línea azul que va desde el botón hacia el área de división. Esto indica que ya existe un comportamiento definido entre ambos objetos.

7. Ahora, haz clic en el centro del botón NOSOTROS, luego activa el botón de

inspección para que aparezca el menú contextual y repite los pasos 4 y 5.

8. En el cuadro de lista fotograma N° selecciona el fotograma NOSOTROS (3) y

luego haz clic en Aceptar.

9. Ahora, haz clic en el centro del botón PRODUCTOS; luego activa el botón de

inspección para que aparezca el menú contextual y repite los pasos 4 y 5.

10. En el cuadro de lista fotograma N° selecciona el fotograma PRODUCTOS (4) y

luego haz clic en Aceptar.

COPIAR FONDO A UN FOTOGRAMA


Habrás notado que cuando mueves el mouse sobre los botones aparecen los mensajes

y fotos correspondientes, pero el fondo que muestra esa zona es blanco. Esto ocurre

debido a que la capa que trabaja el fondo principal de la Web solamente se encuentra

definida en el fotograma llamado Todo. Si examinas los otros fotogramas, observarás

que su fondo es totalmente en blanco. Para solucionar este problema, solamente debes

copiar el fondo de mapa de bits del fotograma Todo hacia los demás fotogramas. Para

ello completa lo siguiente:

1. Haz clic en el fotograma TODO y selecciona la capa de mapa de bits que

corresponde con el fondo de la Web.

2. En el panel de propiedades, se activan los parámetros X e Y. Recuerda los

números mostrados porque te dan la ubicación exacta del fondo en la pantalla.

3. Activa la opción Copiar del menú Edición (o también las teclas Ctrl+C)

4. Haz clic en el fotograma INICIO y activa la opción Pegar del menú Edición

(Ctrl+V)

5. Cuando el mapa de bits es copiado, mueve la capa a la última posición para que

esté en el fondo de la pantalla. Luego fíjate en los parámetros X e Y del panel de

propiedades y si los números no corresponden con los valores originales, procede a modificarlos.

Guarda tu documento nuevamente y ejecútalo en vista previa. Luego procede a

cerrarlo.

CONVERTIR UNA WEB FIREWORKS EN HTML

Cuando trabajas una Web en Fireworks, los archivos que genera este programa son de

tipo PNG, es decir, una imagen gráfica y solamente al ejecutar el archivo en vista previa, puedes observar temporalmente el funcionamiento de tu diseño como una página Web

realizada en HTML.

Fireworks te proporciona las herramientas necesarias que te permitirán convertir toda tu Web al formato HTML manteniendo el diseño, los botones, comportamientos y todas

aquellas características que hayan sido incluidas en el diseño de la Web.

DEFINIR L AS CARPETAS DE TRAB AJ O

Antes de iniciar el proceso, es importante que definas las carpetas donde se exportará la

información, especialmente una carpeta para guardar todas las secciones de imágenes

que conforman la Web.

Para el ejemplo que has trabajado anteriormente, crea una carpeta llamada CLASE en tu

disco local, luego procede a crear una carpeta Imágenes dentro de la carpeta CLASE.

Para convertir tu Web de, completa los siguientes pasos:

1. Selecciona el menú Archivo y activa la opción Exportar.

2. En la ventana de diálogo que aparece, indica los siguientes parámetros:

3. Guardar en: Ubica la carpeta llamada CLASE.

a. Nombre: Digita el nombre de la Web, en este caso, Principal.

b. Tipo: HTML e imágenes.

c. HTML: Exportar Archivo HTML.

d. Divisiones: Exportar divisiones.

e. Deben estar seleccionadas las opciones Incluir áreas sin divisiones y Colocar imágenes en subcarpeta.

4. Haz clic en el botón Examinar para que puedas seleccionar la carpeta Imágenes

que está ubicada dentro de la carpeta CLASE.

Adobe Fireworks CS3

5. Haz clic en el botón Guardar.

Guarda tu archivo nuevamente y luego procede a cerrar el programa Fireworks.

Si utilizas el explorador de Windows para examinar la carpeta CLASE, notarás que ahora

ya existe un archivo llamado Principal y que es de tipo HTML.

Además, si examinas la carpeta Imágenes, observarás que los objetos han sido

subdivididos para un mejor funcionamiento.


illustrator i

Documents