INTRODUCCIÓN A FIREWORKS MX - ens.uabc.mx · transparencia, efecto especial, estilo de línea o...

Internet, el instrumento esencial de la diplomacia del siglo XXI

Introducción a Fireworks MX - 1 -

INTRODUCCIÓN A FIREWORKS MX

Al entrar a Fireworks nos encontramos, más o menos (puede variar de acuerdo la configuración 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 resolución (que en el caso de diseño Web, suele ser de 72 píxeles); el sistema de medidas que queremos utilizar: píxeles, pulgadas (inches), o centímetros. Nosotros utilizaremos píxeles, por ser el sistema más utilizado en medidas para diseño Web. En la misma ventana podemos ver, además, 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 opción de utilizarlo de color blanco, o transparente. Una vez definidas las propiedades del lienzo, ya estamos listos para trabajar.


Principios básicos del diseño para Web - 2 -

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

Caja de herramientas

Detalle de ventana que aparece al presionar la herramienta de rectángulo Varias de las herramientas indican con una pequeña flecha en la parte inferior derecha, que contienen variantes de la misma herramienta (Ver figura en la parte superior derecha).

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:



En este panel se pueden indicar varias propiedades como tamaño, color de relleno, línea, transparencia, efecto especial, estilo de línea o textura.

En la tabla siguiente, basada en el manual oficial de Fireworks, se describen las funciones básicas de cada herramienta:

Herramienta En el modo de objeto En el modo de edición de imágenes

Puntero Selecciona y mueve trazados en la pantalla.

Mueve la imagen o los píxeles agrupados mediante un recuadro. Haga doble clic en una imagen para editar los píxeles que la componen.

Seleccionar detrás Selecciona un objeto situado detrás del objeto seleccionado.

Mueve la imagen o los píxeles agrupados mediante un recuadro.

Seleccionar en nivel

inferior

Selecciona y mueve recuadros en la pantalla, selecciona un objeto de un grupo o un símbolo. Muestra los puntos de un trazado y selecciona puntos.

Mueve la imagen o los píxeles agrupados mediante un recuadro.

Recuadro o recuadro

elíptico

Activa el modo de edición de imágenes y selecciona un área de píxeles rectangular o elíptica.

Selecciona un área de píxeles rectangular o elíptica.

Lazo o lazo poligonal

Activa el modo de edición de imágenes y selecciona un área de píxeles de estilo libre

Selecciona o mueve un área de píxeles de estilo libre.

Varita mágica Activa el modo de edición de imágenes y selecciona un área formada por píxeles de color similar.

Selecciona un área formada por píxeles de color similar.

Línea y formas

básicas

Dibuja objetos como trazados que se pueden editar.

Pinta pinceladas de píxeles en un objeto de imagen.



Pluma Dibuja objetos como trazados que se pueden editar.

Activa el modo objetos y dibuja objetos como trazados que se pueden editar.

Texto Crea y edita bloques de texto y abre el editor de texto.

Activa el modo de objetos, crea bloques de texto, y abre el editor de texto.

Lápiz Dibuja trazos de lápiz de un píxel como trazados de estilo libre.

Dibuja trazos de lápiz de un píxel.

Pincel Dibuja pinceladas como trazados. Pinta pinceladas como píxeles.

Estilo libre Estira o contrae un trazado seleccionado para cambiar la forma del mismo.

Activa el modo de objeto.

Remodelar área Remodela las partes de un trazado seleccionado que están incluidas en el cursor "remodelar área"


Depurador de trazados

Modifica las características de presión y velocidad de un trazado sin modificar su forma.


Cuchillo/borrador En el modo de objetos esta herramienta se convierte en Cuchillo. Corta un trazado seleccionado para crear varios trazados.

En el modo de edición de imágenes esta herramienta se convierte en Borrador. Borra píxeles de una imagen.

Sello Activa el modo de edición de imágenes y duplica partes de un objeto de imagen.

Duplica partes de un objeto de imagen.

Otras herramientas de trazado:

Lápiz : 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.

Pincel : La herramienta Pincel permite pintar pinceladas de estilo libre, mientras que la herramienta Lápiz dibuja trazos de lápiz de un píxel.

Pluma : Sirve para realizar trazados segmento por segmento. Los nodos resultantes en este trazado, poseen sub-nodos que ayudan a la modificación en la curva de alguno de esos segmentos.



El trazado, color, efecto y otras características, son modificables desde el panel de propiedades.

Edición 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 líneas adyacentes están 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 línea recta.

-Las dos herramientas más convenientes para realizar la modificación de los trazados mediante

la edición de puntos, son las de Pluma y Nivel inferior .

Edición y remodelado de imágenes:

Las imágenes aparecen seleccionadas por defecto con una delgada línea azul. Haciendo clic en

cualquiera de sus nodos con la herramienta de Selección , podemos distorsionar el tamaño, aunque no su forma. Pero si queremos cambiar el tamaño 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 tamaño que se está ejecutando, pero, nótese, este aumento es de modo PROPORCIONAL, tanto vertical como horizontalmente, siempre y cuando los cambios se hagan pinchando en los nodos de las esquinas.



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 tamaño como la FORMA original de las imágenes, es en el de las dibujadas mediante

las herramientas de dibujo, y con la herramienta Nivel inferior

Efectos:

Son aplicables tanto a las imágenes 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 botón 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 pequeña 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 gráfica 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 Librería de Estilos. Si no esta visible se

activa mediante el menú Ventana (Window), y luego Estilos (Styles).



Fireworks también 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 botón 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 imágenes de tipo bitmap.



Ajuste, retoque y balance de fotografías

Antes de optimizar y salvar nuestras imágenes y gráficas 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 continuación veremos los ajustes más comunes en el caso de fotografías.

Ajuste de Niveles

Para ajustar los claro-oscuros de una fotografía, 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 gráfica que representa los valores de sombras, medios tonos y luces de la fotografía. 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, asegúrese de que esté seleccionado el botón de pre-visualización (Preview).

Fireworks le ofrece la posibilidad de hacer este tipo de efecto automáticamente, con el comando de Niveles Automáticos bajo el mismo menú: Filter >Adjust Color > Auto-Levels.

Dentro del menú de Filtros encontrará otras herramientas de corrección 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 definición en su imagen (Sharpen).



Definición de imagen

Fireworks le da la opción de afocar una imagen automáticamente con el filtro de Sharpen, pero en este caso no tiene UD. control de los rangos. Se recomienda usar en vez la opción de Unsharp Mask. La siguiente ventana de opciones aparecerá, haga sus ajustes de acuerdo a la previsualización.

Optimización y exportación de gráficos:

Por defecto, el programa nos brinda opciones de previsualización (Preview) y opciones de optimización. La siguiente gráfica 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 cálculo aproximado del tiempo que tardará en descargar dicha imagen bajo un tipo de conexión. En este caso muestra el tiempo considerando una conexión de MODEM de 56 kbps.



Dentro de la ventana de optimización podemos escoger el formato final de compresión. 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 compresión, y en el caso de GIF, se puede escoger el tipo de paleta de color y número exacto de colores que se quieran incluir en la imagen.

En el caso de gráficos 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 fotografías o de imágenes que contengan una gama de color mayor se aconseja usar JPEG.



Una vez optimizada la imagen, sólo 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.

Creación y organización de capas (Layers)

Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustración 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 añadiéndolas cuando sea necesario. También 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, aparecerán por defecto en la capa 1, pero UD. tiene la posibilidad de agregar más capas mediante el botón Agregar capas.

El hecho de trabajar en capas le dará la posibilidad de trabajar con diversos efectos.

En un documento recién abierto, inserte una foto. Esta aparecerá en una capa independiente de la capa 1. Posiciónese en la capa 1 haciendo clic sobre ella y dibuje una figura geométrica cualquiera (recuerde que estamos probando), y luego colóquela sobre la figura.



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 máscara.

Si hacemos clic en el ojo correspondiente a cada imagen, veremos que esta se o culta o se muestra, según se oculte o aparezca el ojo. Y la presencia del lápiz 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 más recientes que se han realizado en Fireworks, conforme al número especificado en Pasos de deshacer". (Manual de Macromedia)

Con el historial podemos: 1- Deshacer y rehacer comandos frecuentes. 2- Seleccionar un número determinado de comandos realizados para repetirlos. 3- Seleccionar y guardar un grupo de comandos recientemente realizados, para guardarlo como un solo comando.



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 botón Volver a reproducir (Replay), obviamente repetirá esa acción.

Si selecciona una o más acciones y luego presiona el botón Guardar como comando, aparecerá una ventana en donde le pedirá el nombre para el nuevo comando. Posteriormente, cuando vuelva a necesitar esa acción o conjunto de acciones, las encontrará agrupadas en un solo comando dentro del menú Comando.

INTRODUCCIÓN A FIREWORKS MX - ens.uabc.mx · transparencia, efecto especial, estilo de línea o...

Documents

Transcript of INTRODUCCIÓN A FIREWORKS MX - ens.uabc.mx · transparencia, efecto especial, estilo de línea o...