Internet, el instrumento esencial de la diplomacia del siglo XXI

INTRODUCCIN A FIREWORKS MX

Al entrar a Fireworks nos encontramos, ms o menos (puede variar de acuerdo la configuracin que le d el usuario), con la siguiente pantalla:

Para crear un rea nuevo de trabajo necesitamos crear un lienzo (canvas), para esto vamos a Archivo(File)>Nuevo(New), y nos aparece la siguiente ventana, que sirve para configurar precisamente el rea de trabajo:

En ella se nos dan las opciones para determinar el ancho (width) y el alto (height) del lienzo; la resolucin (que en el caso de diseo Web, suele ser de 72 pxeles); el sistema de medidas que queremos utilizar: pxeles, pulgadas (inches), o centmetros. Nosotros utilizaremos pxeles, por ser el sistema ms utilizado en medidas para diseo Web. En la misma ventana podemos ver, adems, las opciones para determinar el color que llevar el "lienzo" o rea de trabajo. Pero es de notar que, aunque definamos un color determinado, aun nos da la opcin de utilizarlo de color blanco, o transparente. Una vez definidas las propiedades del lienzo, ya estamos listos para trabajar.

Introduccin a Fireworks MX

-1-

Internet, el instrumento esencial de la diplomacia del siglo XXI

A la izquierda de la pantalla, encontramos la "caja de herramientas".

Detalle de ventana que aparece al presionar la herramienta de rectngulo

Varias de las herramientas indican con una pequea flecha en la parte inferior derecha, que contienen variantes de la misma herramienta (Ver figura en la parte superior derecha).

Caja de herramientas Por otro lado, en el momento que se selecciona alguna herramienta, el panel de propiedades (Property Inspector) cambia de acuerdo a la herramienta, mostrando las diferentes opciones disponibles para la herramienta seleccionada. Por ejemplo, si estamos utilizando una figura de tipo vector, el panel de propiedades aparece de la siguiente manera:

Principios bsicos del diseo para Web

-2-

Internet, el instrumento esencial de la diplomacia del siglo XXI

En este panel se pueden indicar varias propiedades como tamao, color de relleno, lnea, transparencia, efecto especial, estilo de lnea o textura. En la tabla siguiente, basada en el manual oficial de Fireworks, se describen las funciones bsicas de cada herramienta: Herramienta Puntero En el modo de objeto Selecciona y mueve trazados en la pantalla. En el modo de edicin de imgenes Mueve la imagen o los pxeles agrupados mediante un recuadro. Haga doble clic en una imagen para editar los pxeles que la componen. Mueve la imagen o los pxeles agrupados mediante un recuadro. Mueve la imagen o los pxeles agrupados mediante un recuadro.

Seleccionar detrs Seleccionar en nivel inferior

Selecciona un objeto situado detrs del objeto seleccionado. Selecciona y mueve recuadros en la pantalla, selecciona un objeto de un grupo o un smbolo. Muestra los puntos de un trazado y selecciona puntos. Activa el modo de edicin de imgenes y selecciona un rea de pxeles rectangular o elptica. Activa el modo de edicin de imgenes y selecciona un rea de pxeles de estilo libre Activa el modo de edicin de imgenes y selecciona un rea formada por pxeles de color similar. Dibuja objetos como trazados que se pueden editar.

Recuadro o recuadro elptico Lazo o lazo poligonal

Selecciona un rea de pxeles rectangular o elptica. Selecciona o mueve un rea de pxeles de estilo libre. Selecciona un rea formada por pxeles de color similar. Pinta pinceladas de pxeles en un objeto de imagen.

Varita mgica

Lnea bsicas

y formas

Introduccin a Fireworks MX

-3-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Pluma

Dibuja objetos como trazados que se pueden editar. Crea y edita bloques de texto y abre el editor de texto. Dibuja trazos de lpiz de un pxel como trazados de estilo libre. Dibuja pinceladas como trazados. Estira o contrae un trazado seleccionado para cambiar la forma del mismo. Remodela las partes de un trazado seleccionado que estn incluidas en el cursor "remodelar rea"

Activa el modo objetos y dibuja objetos como trazados que se pueden editar. Activa el modo de objetos, crea bloques de texto, y abre el editor de texto. Dibuja trazos de lpiz de un pxel. Pinta pinceladas como pxeles. Activa el modo de objeto.

Texto

Lpiz

Pincel Estilo libre

Remodelar rea

Activa el modo de objeto.

Depurador de trazados

Modifica las caractersticas de Activa el modo de objeto. presin y velocidad de un trazado sin modificar su forma. En el modo de objetos esta herramienta se convierte en Cuchillo. Corta un trazado seleccionado para crear varios trazados. Activa el modo de edicin de imgenes y duplica partes de un objeto de imagen. En el modo de edicin de imgenes esta herramienta se convierte en Borrador. Borra pxeles de una imagen. Duplica partes de un objeto de imagen.

Cuchillo/borrador

Sello

Otras herramientas de trazado: Lpiz : es para dibujar a mano alzada. El trazo abierto se finaliza normalmente en cualquier lugar. El trazo cerrado, se finaliza en el mismo lugar donde se empez. A la figura resultante se le puede dar relleno. : Sirve para realizar Pluma trazados segmento por segmento. Los nodos resultantes en este trazado, poseen sub-nodos que ayudan a la modificacin en la curva de alguno de esos segmentos.

Pincel : La herramienta Pincel permite pintar pinceladas de estilo libre, mientras que la herramienta Lpiz dibuja trazos de lpiz de un pxel.

Principios bsicos del diseo para Web

-4-

Internet, el instrumento esencial de la diplomacia del siglo XXI

El trazado, color, efecto y otras caractersticas, son modificables desde el panel de propiedades.

Edicin y remodelado de trazados editando los puntos: Los puntos son la estructura de los objetos de trazado en el programa. Cuando se dibuja en el modo de objetos con cualquier herramienta de dibujo, el trazado de resultado se definir por los puntos especificados al dibujar. El tipo de punto y el aspecto curvo o recto de las lneas adyacentes estn relacionados directamente: - Un punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones suaves y regulares entre segmentos. - Un punto de esquina indica que al menos uno de los segmentos adyacentes es una lnea recta.

-Las dos herramientas ms convenientes para realizar la modificacin de los trazados mediante la edicin de puntos, son las de Pluma y Nivel inferior .

Edicin y remodelado de imgenes: Las imgenes aparecen seleccionadas por defecto con una delgada lnea azul. Haciendo clic en , podemos distorsionar el tamao, aunque cualquiera de sus nodos con la herramienta de Seleccin no su forma. Pero si queremos cambiar el tamao conservando las proporciones, debemos utilizar la herramienta Escalar .

Al utilizarla, la imagen aparece seleccionada como muestra la figura. La imagen azul es la original, mientras que el borde punteado que sobresale, muestra el aumento de tamao que se est ejecutando, pero, ntese, este aumento es de modo PROPORCIONAL, tanto vertical como horizontalmente, siempre y cuando los cambios se hagan pinchando en los nodos de las esquinas.

Introduccin a Fireworks MX

-5-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Otra de las opciones que da la herramienta de escalar, es la de girar el objeto. Esto se consigue cuando se coloca el mouse entre dos nodos de la figura, y el cursor adopta la forma de una curva de giro. En el nico caso en que se puede cambiar tanto el tamao como la FORMA original de las imgenes, es en el de las dibujadas mediante las herramientas de dibujo, y con la herramienta Nivel inferior

Efectos: Son aplicables tanto a las imgenes realizadas con las herramientas de dibujo, como a aquellas que insertamos desde fuera del programa. Para aplicarlos debemos tener, en primer lugar, seleccionada la imagen a la que queremos aplicarlos, y luego ir al panel de propiedades, presionar el botn de efectos con el signo de + y seleccionar el tipo de efecto deseado. Cada uno de los efectos a su vez despliega una serie de opciones, por ejemplo al seleccionar el sombreado, una pequea ventana aparece a un lado donde se puede ajustar: la distancia de la sombra a la imagen, el color de sombreado, transparencia, suavidad y ngulo. La siguiente grfica muestra tres tipos de efecto: drop shadow, inner shadow y glow effects.

(Imagen del Manual de Fireworks MX) Otra de las opciones para aplicar efectos es la de utilizar la Librera de Estilos. Si no esta visible se activa mediante el men Ventana (Window), y luego Estilos (Styles).

Principios bsicos del diseo para Web

-6-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Fireworks tambin le da la posibilidad de crear sus propios estilos e incorporarlos a la lista de los que ya existen.Para eso debe partir de un objeto existente a la que UD. le haya aplicado los distintos efectos y estilos que quiera incorporar . 1- Seleccionar el objeto o texto. 2- Haga clic en el botn con el signo de + en la parte inferior de la ventana de estilos. Aparecer la ventana de Estilo nuevo, en la que UD. podr elegir las propiedades que el nuevo estilo tomar de su imagen, y el nombre que tendr este nuevo estilo.

Nota: Los estilos no pueden aplicarse a imgenes de tipo bitmap.

Introduccin a Fireworks MX

-7-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Ajuste, retoque y balance de fotografas Antes de optimizar y salvar nuestras imgenes y grficas para nuestra pagina Web, es recomendable hacer varios ajustes de imagen. En algunos casos no ser necesario, esto depende de la calidad de la imagen. A continuacin veremos los ajustes ms comunes en el caso de fotografas. Ajuste de Niveles Para ajustar los claro-oscuros de una fotografa, vaya al men de Filtros (Filters), seleccione Ajuste de Color (Adjust Color) y dentro de este desplegado seleccione Niveles (Levels). Una ventana aparecer con una grfica que representa los valores de sombras, medios tonos y luces de la fotografa. Es aqu donde puede ajustar cada una de las tres variables al deslizar las flechas respectivamente en la parte inferior de la grafica. Para ver los cambios en tiempo real, asegrese de que est seleccionado el botn de pre-visualizacin (Preview).

Fireworks le ofrece la posibilidad de hacer este tipo de efecto automticamente, con el comando de Niveles Automticos bajo el mismo men: Filter >Adjust Color > AutoLevels.

Dentro del men de Filtros encontrar otras herramientas de correccin de imagen muy tiles como lo son: Balance y Contraste (bajo el men de Ajuste de Color) y el filtro que le ayudar a obtener mayor definicin en su imagen (Sharpen).

Principios bsicos del diseo para Web

-8-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Definicin de imagen Fireworks le da la opcin de afocar una imagen automticamente con el filtro de Sharpen, pero en este caso no tiene UD. control de los rangos. Se recomienda usar en vez la opcin de Unsharp Mask. La siguiente ventana de opciones aparecer, haga sus ajustes de acuerdo a la previsualizacin.

Optimizacin y exportacin de grficos: Por defecto, el programa nos brinda opciones de previsualizacin (Preview) y opciones de optimizacin. La siguiente grfica muestra la interfase con 4 opciones. En la parte inferior de cada recuadro podemos ver el tipo de formato, calidad de imagen y en el caso de formatos Web (JPEG o GIF) podemos ver el peso del archivo y el clculo aproximado del tiempo que tardar en descargar dicha imagen bajo un tipo de conexin. En este caso muestra el tiempo considerando una conexin de MODEM de 56 kbps.

Introduccin a Fireworks MX

-9-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Dentro de la ventana de optimizacin podemos escoger el formato final de compresin. Una vez que se selecciona el formato, las diferentes opciones cambian de acuerdo y en el caso de JPEG, por ejemplo, permite escoger la calidad de compresin, y en el caso de GIF, se puede escoger el tipo de paleta de color y nmero exacto de colores que se quieran incluir en la imagen.

En el caso de grficos simples, que contengan reas de color plano o en el caso de logotipos e iconos, es recomendable usar el formato de GIF, por otro lado en el caso de fotografas o de imgenes que contengan una gama de color mayor se aconseja usar JPEG.

Principios bsicos del diseo para Web

- 10 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Una vez optimizada la imagen, slo falta exportarla a la carpeta que tengamos designada a tal efecto. Para eso vamos a ir al men Archivo (File)> Exportar (Export). Luego seleccionamos la carpeta donde queremos guardar el archivo, le ponemos un nombre, y finalmente aceptar. Creacin y organizacin de capas (Layers) Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustracin que se dibujan en distintas hojas superpuestas transparentes. Cada objeto de un documento reside en una capa. Puede crear todas las capas antes de comenzar a dibujar o ir aadindolas cuando sea necesario. Tambin puede reorganizar el orden de apilamiento de las capas o de los objetos de una sola capa. (Manual Oficial de Macromedia) La ventana que nos permite trabajar con las capas (layers), la podemos visualizar desde el men Ventana (Window)> Capas (Layers) si es que no est a la vista al abrir Fireworks. Por defecto, el lienzo nos aparece con dos capas: la capa Web, en donde posteriormente ubicaremos los objetos de zona interactiva; y la capa 1. Los objetos que UD. vaya dibujando, aparecern por defecto en la capa 1, pero UD. tiene la posibilidad de agregar ms capas mediante el botn Agregar capas. El hecho de trabajar en capas le dar la posibilidad de trabajar con diversos efectos. En un documento recin abierto, inserte una foto. Esta aparecer en una capa independiente de la capa 1. Posicinese en la capa 1 haciendo clic sobre ella y dibuje una figura geomtrica cualquiera (recuerde que estamos probando), y luego colquela sobre la figura.

Introduccin a Fireworks MX

- 11 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

En el men desplegable que se muestra en la imagen, se pueden encontrar los efectos disponibles para trabajar en capas, pero no olvidemos que esto depender del color de la figura que usemos en la capa que actuar de mscara. Si hacemos clic en el ojo correspondiente a cada imagen, veremos que esta se o culta o se muestra, segn se oculte o aparezca el ojo. Y la presencia del lpiz junto a alguna imagen, nos indicar que se est trabajando o que se tiene seleccionada esa imagen.

Historial del documento: "El panel Historial permite ver, cambiar y repetir el historial del documento. En este panel se enumeran las acciones ms recientes que se han realizado en Fireworks, conforme al nmero especificado en Pasos de deshacer". (Manual de Macromedia) Con el historial podemos: 1- Deshacer y rehacer comandos frecuentes. 2- Seleccionar un nmero determinado de comandos realizados para repetirlos. 3- Seleccionar y guardar un grupo de comandos recientemente realizados, para guardarlo como un solo comando.

Principios bsicos del diseo para Web

- 12 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Abra la ventana del historial con el men Ventana (Window)> Historial (History). Ah podr ver las acciones que ha ido realizando, desde la primera a la ltima, de arriba hacia abajo. Si selecciona una de las acciones y luego presiona el botn Volver a reproducir (Replay), obviamente repetir esa accin. Si selecciona una o ms acciones y luego presiona el botn Guardar como comando, aparecer una ventana en donde le pedir el nombre para el nuevo comando. Posteriormente, cuando vuelva a necesitar esa accin o conjunto de acciones, las encontrar agrupadas en un solo comando dentro del men Comando.

Introduccin a Fireworks MX

- 13 -