Los filtros se pueden aplicar a objetos vectoriales, imágenes de mapa de bits y texto. Estos filtros realizan ajustes automáticos, por lo que reciben el nombre de filtros automáticos. Entre ellos podemos citar los biseles y relieves, sombras sólidas, sombras difuminadas e iluminados, ajustar color, desenfocar y perfilar. Los filtros se aplican a los objetos seleccionados. Si lo hace a través del menú, el objeto se convierte en mapa de bits antes de aplicar el filtro y ya no podrá editarlo. Si lo aplica a través del inspector de propiedades, haciendo clic en el botón Añadir

efectos , se aplica el filtro como un efecto dinámico y lo puede editar o desactivar cuando lo desee. Por lo tanto es

mejor utilizar este segundo método. Utilizando el Inspector de propiedades es posible aplicar uno o más filtros automáticos a los objetos seleccionados. Cada vez que se añade un filtro nuevo, se incluye en la lista del menú emergente Añadir efectos del Inspector de propiedades. Cada filtro de la lista se puede activar o

desactivar. Para ello haga clic en la marca de verificación situada junto al filtro en la lista

de filtros del Inspector de propiedades. Observe en la figura de la izquierda como la aplicación de un borde biselado a un objeto le añade un relieve. En la figura de la derecha puede ver un relieve elevado y otro hundido. Cada filtro automático se puede personalizar para obtener un aspecto determinado. Si se eligen filtros de corrección de color, se abren cuadros de diálogo que contienen controles para ajustar las características de los colores, como por ejemplo los niveles automáticos, el brillo y el contraste, el matiz y la saturación, la inversión de los colores, las curvas y el relleno de color. Al elegir los filtros Bisel, Desenfocar, Relieve, Iluminado, Sombreado o Perfilar, aparece un cuadro de diálogo o un menú emergente en los que se pueden ajustar los parámetros del filtro. Cuando se elige un filtro de desenfoque o perfilado, se aplica directamente al objeto. Puede aplicar un filtro automático que afecte una selección de píxel es dentro de una imagen. Para ello, corte y pegue la selección en el mismo lugar para crear una nueva imagen de mapa de bits, selecciónela y aplique el filtro automático. El orden en que se aplican los filtros automáticos afecta al resultado final. Arrastre los filtros en la lista para cambiar su orden de aplicación. Desenfocar Es muy útil para limpiar imágenes con manchas y arañazos. El desenfoque gaussiano es apropiado para áreas grandes. En la figura puede ver un desenfoque radial aplicado a un rectángulo.

Perfilar Al contrario que desenfocar, se emplea para corregir imágenes desenfocadas. Hay tres opciones de perfilado:

Perfilar ajusta el foco de una imagen borrosa mediante el incremento del contraste de los píxeles adyacentes.

Perfilar más, aumenta el contraste de los píxeles adyacentes casi tres veces más que Perfilar.

Desperfilar máscara, perfila la imagen al ajustar el contraste de los bordes de los píxeles. Es la opción que ofrece el mayor control para perfilar imágenes. La cantidad de perfilado va de 1 a 500. El Radio del píxel va de 0,1 a 250. Al incrementar el radio, aumenta el área de gran contraste alrededor de cada borde del píxel. El Umbral selecciona un umbral de 0 a 255. Los valores de utilización más frecuentes son los comprendidos entre 2 y 25. Al incrementar el umbral, sólo se perfilan los píxeles de la imagen que presentan más contraste. Al reducir el valor de umbral, también se incluyen los píxeles de menor contraste. Si el valor de umbral es 0, se perfilan todos los píxeles de la imagen.

Una imagen desenfocada se puede mejorar con la opción Perfilar pero una foto mal hecha no se convierte en una foto perfecta con esta opción. La foto de la derecha es el resultado de perfilar más la foto original situada a la izquierda. Observe como se ha conseguido una ligera mejora. La foto del centro se perfiló con la opción Desperfilar máscara con Cantidad 200, Radio del píxel 27 y Umbral 0. En la imagen de la figura que sigue a continuación puede apreciar la diferencia entre una foto algo desenfocada y la misma foto después de aplicar un filtro Desperfilar máscara con valores: cantidad de perfilado 100, radio del píxel 27 y umbral 2.

Ejercicio (perfilar)

1. Descargue una foto de alguna ciudad y guárdela en su carpeta de trabajo. 2. Aplique un filtro Desperfilar máscara para mejorar el enfoque. 3. Guarde el trabajo. Tipo de archivo Fireworks PNG. De esta forma puede retocar los filtros

si es necesario. Nombre valencia.png Ejercicio (desenfocar y perfilar)

1. Descargue una imagen de su preferencia y guárdela en su carpeta de trabajo.

2. Abra la imagen con Fireworks. Verá una serie de puntitos blancos debido a la suciedad del cristal del

acuario. Amplíe con la lupa para ver mejor los desperfectos. Utilice la herramienta recuadro

oval para seleccionarlos. Mantenga pulsada la tecla mayúscula para una selección múltiple.

3. Cuando haya seleccionado todos los puntitos blancos que estropean la foto, haga clic en Edición > Copiar. Pulse Esc para eliminar la selección. Haga clic en Edición > Pegar para tener una imagen independiente de los puntitos blancos.

4. La imagen de los puntitos aparece en primer lugar en el panel capas. Seleccione la imagen de los puntitos y aplique un filtro Desenfocar >

Desenfoque gaussiano. Si utiliza un radio muy pequeño empeoran los resultados. Utilice un valor 5.

5. Guarde la imagen como peces1.jpg. No es necesario conservar el archivo en formato png. Cierre el documento.

6. Cargue peces1.jpg. Es posible que aún le queden desperfectos. Repita la operación si es necesario y guarde la imagen como peces2.jpg. Cierre el documento y cargue de nuevo peces2.jpg.

7. Aplique un filtro Desperfilar máscara para mejorar el enfoque. 8. Guarde el trabajo. Tipo de archivo Fireworks PNG. De esta forma puede retocar los filtros

si es necesario. Nombre peces.png

CAPAS Las capas dividen los documentos de Fireworks en planos. Es como si los componentes de una ilustración se dibujasen en distintas hojas transparentes superpuestas. Un documento puede estar compuesto por muchas capas y cada una contener diversos objetos. El panel Capas muestra una lista de las capas del documento, así como los objetos que contiene cada capa. Trabajar con capas tiene enormes ventajas porque podemos aislar parte de un diseño y hacer modificaciones sin dañar otras partes. El panel Capas muestra el orden en el que están apilados los objetos y las capas del diseño. Las capas u objetos situados en la parte superior del panel, irán en el lienzo, sobre los objetos que están situados debajo. Es posible reorganizar el orden de apilamiento de las capas, así como el de los objetos dentro de las capas. Al cambiar el orden de las capas o de los objetos dentro de una capa, cambia la forma de taparse unos objetos con otros. Es posible crear las capas antes de dibujar o añadirlas conforme se vayan necesitando. El lienzo está situado debajo de todas las capas y no es una capa en sí. El nombre de la capa activa aparece resaltado. Puede expandir una capa, utilizando su control de

expansión , para ver una lista de todos los objetos que contiene. Los objetos se muestran como

miniaturas. Igualmente puede utilizar el control de contracción de la capa, cuando lo crea conveniente. Además de los objetos, se utilizan máscaras. Las máscaras ocultan o muestran partes de un objeto o imagen. Hay varias técnicas de enmascaramiento con los que conseguir efectos en los objetos muy interesantes y creativos. Las máscaras también se muestran en el panel Capas. En la parte superior del panel Capas se sitúan los controles de opacidad o transparencia y de los modos de mezcla. La capa de Web es una capa especial que aparece como la capa superior de cada documento. En ella se sitúan objetos Web, como divisiones y zonas interactivas. No es posible suprimir, duplicar, mover, cambiar de nombre ni dejar de compartir la capa de Web. Para practicar el manejo de capas haga lo siguiente:

1. Cree un lienzo. 2. Cree tres capas. 3. Para que los trazados se incorporen a una capa debe tenerla seleccionada en el panel

Capas. En la primera capa dibuje tres rectángulos de diferentes colores pero de que se solapen en parte.

4. Seleccione la segunda capa y dibuje en ella tres óvalos con colores diferentes solapándose ligeramente.

5. En la tercera dibuje dos estrellas con colores diferentes.

6. Conforme avance por las explicaciones, haga pruebas de lo que lea para aprender a manipular las capas perfectamente.

7. Para asignar un nombre a una capa u objeto: Haga doble clic en una capa u objeto en el panel Capas. Escriba un nombre nuevo para la capa o el objeto y pulse Intro. Ponga nombre a cada una de las capas que creó: rectángulos, óvalos y estrellas.

8. Para mover una capa o un objeto: Arrastre la capa o el objeto a la posición que desee en

el panel Capas. También puede arrastrar el indicador de selección azul que aparece junto al nombre de la capa. Practique el movimiento de capas y de objetos dentro de una capa.

9. Para mover todos los objetos seleccionados de una capa a otro lugar: Arrastre el

indicador de selección azul de la capa a otra capa. Todos los objetos seleccionados en la capa se mueven simultáneamente a la otra capa. Seleccione todos los elementos de una capa y muévalos a otra.

10. Para copiar en otro lugar, todos los objetos seleccionados de una capa: Mantenga

pulsada la tecla Alt y arrastre el indicador de selección azul de la capa, a otra capa. Fireworks hace una copia en la nueva capa de todos los objetos seleccionados. Practique la copia de objetos de una capa en otra.

11. Por último recuerde que una forma muy fácil de seleccionar un objeto del lienzo, es seleccionarlo en el panel de Capas. Seleccione un objeto en una capa y vea como aparece seleccionado en el lienzo.

Ejercicio Se trata de construir un titular publicitario o banner Aprenderá a importar imágenes, trabajar con capas, formas, máscaras y texto, y optimizar y exportar el trabajo terminado. Debe realizar las siguientes tareas: 1) Preparación del trabajo Durante las fases de planificación del proyecto, se discutieron diferentes diseños posibles para un titular publicitario. De este trabajo previo, surgió un boceto que aprobó el cliente. Se utilizó una fotografía y un texto como logotipo. Ahora ya puede crear una carpeta de trabajo y emplear el material necesario en esa carpeta. 2) Incorporación del fondo y el logotipo

a. Cree un nuevo archivo. Para ello, seleccione > Nuevo. El lienzo debe tener 700 píxeles de Anchura y 92 de Altura. Color de lienzo personalizado y negro. Ahora guarde el documento con el nombre banner.png.

b. El fondo del titular publicitario es una fotografía. Primero se importa la foto y luego se ajusta. Seleccione Archivo > Importar y localice la imagen foto.jpg. Haga clic en Abrir. Alinee el puntero de inserción con el ángulo superior izquierdo del lienzo, y haga clic para insertar la imagen.

c. La imagen aparece seleccionada en el lienzo. La imagen es más grande que el lienzo, como indica su contorno azul. Para ajustarla de manera adecuada, debe cambiar la escala y la posición de la foto. Si no ve la imagen completa, utilice la

lupa para aumentar o con la lupa seleccionada, mantenga pulsada la tecla Alt

para usar la lupa de reducción . d. Con la imagen seleccionada, haga clic en la

herramienta Escala . Reduzca el tamaño de la foto aproximadamente un 25%. Para ello, pinche el punto de selección del ángulo inferior derecho de la fotografía y arrastre el ratón hacia arriba.

e. Seleccione la herramienta

puntero , haga clic en la foto

y arrástrela para componer una imagen interesante para el fondo del titular publicitario.Cuando quede satisfecho con la imagen, guarde el documento. Haga clic en Ver > Ajustar todo, para tener una buena visión del trabajo realizado.

f. Ahora importe el gráfico vectorial del logotipo. El archivo que va a importar se creó como un gráfico vectorial en Fireworks y se guardó en formato de Adobe Illustrator (como archivo AI), un formato que se utiliza con frecuencia en diseño gráfico. Seleccione Archivo

> Importar y, a continuación, seleccione Logo.ai. Haga clic en Abrir. Obtendrá un cuadro de diálogo Opciones de archivos vectoriales. En este cuadro de diálogo puede elegir cómo se importará el archivo vectorial. Haga clic en Aceptar para importar con las opciones predeterminadas. Sitúe el punto de inserción en el ángulo superior izquierdo del titular y haga clic para insertar el gráfico. Por el momento, el logotipo no se ve claramente porque es negro y transparente sobre la imagen de fondo oscura. Más adelante lo resaltará para que se vea mejor.

g. Guarde el documento. 3) Organización de los objetos en capas La organización en capas se hace para poder manipular los elementos con más facilidad. Utilice

tres capas: una para el fondo, una segunda para el logotipo y una tercera para los demás gráficos. Para identificar mejor las capas, debe asignarle a cada una un nombre, que indique claramente qué contiene.

a. Si el panel Capas no está abierto, elija Ventana > Capas.

b. El titular publicitario, por ahora, sólo contiene una capa con el nombre Capa 1. En la parte inferior del panel,

haga clic en el botón Capa nueva/duplicada para crear dos capas nuevas.

c. Cambie el nombre de las capas haciendo doble clic en cada una de ellas y escribiendo los nombres siguientes:

Gráficos (capa 3), Logotipo (capa 2), Fondo (capa 1). d. Cambie el orden de apilamiento haciendo clic en la capa Gráficos y arrástrela debajo de la

capa Logotipo. e. Arrastre la imagen del logotipo desde la capa Fondo hasta la capa Logotipo.

El panel Capas debería presentar el aspecto mostrado en la figura. 4) Creación de un fondo que contraste El logotipo no se ve claramente porque es negro y transparente, sobre una imagen de fondo oscura. Para que resalte, debe colocar un rectángulo de color más claro, detrás del logotipo, .

a. Seleccione la capa Logotipo en el panel Capas. Seleccione la herramienta Rectángulo en el panel Herramientas. En el Inspector de propiedades, defina un relleno Degradado > Lineal.. Primer color de degradado #F7EFE3. Segundo color del degradado, blanco. Haga

clic en el botón Opacidad para el segundo color del degradado y aplique un 50%. Pulse Intro para aceptar la configuración y, a continuación, dibuje un rectángulo sobre el logotipo. Cuando suelte el botón del ratón, aparecerá un rectángulo semitransparente sobre el logotipo.

b. El rectángulo oculta el logotipo que se encuentra debajo. Debe cambiar el orden de apilamiento de los dos objetos de forma que el rectángulo quede debajo del logotipo. Para ello arrastre, en el panel capas, el

objeto rectángulo para que quede debajo del objeto logotipo. El logotipo aparece ahora correctamente y el rectángulo lo resalta, en lugar de ocultarlo.

c. Guarde el documento. En la figura puede ver el resultado de lo realizado hasta el momento.

5) Creación de un contorno alrededor del titular publicitario Este punto es muy importante porque enseña a crear una máscara vectorial. Recuerde que una máscara es una forma geométrica que oculta parte de un objeto o de una imagen. Ahora crearemos, mediante una máscara, un contorno negro alrededor del titular publicitario. Para crear este efecto, utilizaremos un rectángulo redondeado que aplicaremos como una máscara vectorial. Una máscara vectorial recorta los objetos con la forma de su trazado. La manera de hacerlo es muy sencilla, se crea la forma geométrica que servirá como máscara (por ejemplo un rectángulo redondeado), se corta, se selecciona la imagen y se le pega como máscara la forma que se ha cortado.

a. Seleccione la capa Fondo en el panel Capas. Seleccione la herramienta Rectángulo redondeado. En el Inspector de propiedades, defina las propiedades de la herramienta:

relleno ninguno ; color de trazo gris claro, por ejemplo, #666666; tamaño de punta de trazo 1 y categoría 1 píxel blando. Dibuje el rectángulo redondeado dentro del titular publicitario. El área que cae fuera del rectángulo redondeado será negra y formará el contorno del titular publicitario.

b. Utilice los puntos de selección azules para ajustar el tamaño de la forma. Utilice los

puntos de control con forma de rombo para aumentar el redondeado de las esquinas. c. Con el rectángulo redondeado seleccionado, seleccione Edición > Cortar. En el panel

Capas, seleccione la foto de fondo (mapa de bits) en la capa Fondo. Desea aplicar la máscara

a este objeto.

d. Seleccione Edición > Pegar como máscara para aplicar la máscara a la fotografía. En el lienzo, se puede ver el área cubierta por el rectángulo redondeado. El área situada fuera, está oculta.

En el panel Capas, aparece una miniatura de la máscara junto a la fotografía del fondo. El resaltado verde alrededor de la miniatura, indica que está seleccionada.

e. Guarde el trabajo. 6) Creación de un efecto de borde ladeado Podemos conseguir el mismo efecto que con una máscara utilizando un cuadrilátero que tape parte del diseño sin necesidad de incorporarlo como máscara.

a. Seleccione la capa Gráficos en el panel Capas. Seleccione la herramienta Pluma en el panel Herramientas. En el Inspector de propiedades, defina la siguientes propiedades para

la herramienta Pluma: Color de trazo ninguno (transparente). Seleccione un relleno Sólido negro.

b. En la ventana de documento, fuera del lienzo, haga clic cuatro veces para dibujar un cuadrilátero parecido al de la figura. Para cerrarlo, debe terminar con un clic en el primer punto. El rectángulo debe ser un poco más alto que el gráfico del titular publicitario y su longitud, debe ser aproximadamente una tercera parte la del gráfico. Haga el lado derecho inclinado.

c. La forma está en la capa Gráficos, por lo que tapa la imagen de fondo, pero no el logotipo. Esto se debe al orden de apilamiento de las capas; la capa Logotipo está sobre la capa Gráficos, mientras que la capa Fondo se encuentra debajo.

d. Si es necesario, utilice la herramienta Subselección , para arrastrar algún punto de anclaje para llevarlo a la posición deseada.

e. Guarde el trabajo. 7) Incorporación de un eslogan al titular publicitario Hay que añadir un eslogan de la empresa, Nouveau World Cuisine, al titular publicitario.

a. Seleccione la capa Gráficos en el panel Capas. Seleccione la herramienta Texto en el panel Herramientas. En el Inspector de propiedades, defina las siguientes propiedades para la herramienta: Seleccione Arial en el menú emergente Fuente. Escriba 14 para el tamaño de fuente. Haga clic en el botón Negrita. Color, #F7EFE3. Haga clic en el botón

Alinear a la izquierda . Haga clic debajo del gráfico del logotipo y escriba: Nouveau World Cuisine.

b. Haga clic una vez, fuera del bloque de texto para aplicar el texto introducido. Fireworks crea un nuevo objeto de texto en la capa Gráficos, que tiene como nombre predeterminado el texto que ha introducido. Como puede comprobar la organización por capas es muy útil para identificar rápidamente los objetos de texto utilizados en la composición.

8) Exportación de un archivo de imagen optimizada El último paso es optimizar y exportar la imagen como un archivo JPG. El objetivo final del diseño de gráficos Web es la creación de imágenes atractivas que se descarguen lo más rápidamente posible. Para ello, debe reducir el tamaño del archivo de la imagen manteniendo en lo posible la misma calidad. Este equilibrio es la optimización, es decir, se busca la proporción correcta de color,compresión y calidad. Por lo tanto, antes de exportar un documento de Fireworks, debe optimizarlo primero y hágalo siempre. La optimización garantiza que la imagen se exportará con el mejor equilibrio posible entre compresión y calidad.

a. Si el panel Optimizar no está abierto, seleccione Ventana > Optimizar, para abrirlo.

b. Elija JPEG -- Calidad superior en el menú emergente Configuración. Las opciones del panel cambian, para reflejar la nueva configuración. Estos ajustes pueden modificarse, pero utilizamos los valores predeterminados.

c. Haga clic en el botón Vista previa de la parte superior izquierda de la ventana de documento. Fireworks muestra el documento como aparecerá cuando se exporte con la configuración actual. En la parte inferior izquierda de la ventana se muestra el tamaño del archivo exportado y el tiempo aproximado que tardará en mostrarse la imagen en la Web.

d. Tras elegir la configuración de optimización, exporte la imagen como un archivo JPEG. Seleccione Archivo > Exportar. El nombre de archivo aparece con la extensión .jpg. Fireworks elige este formato de archivo porque es el seleccionado en el panel Optimizar. Desplácese a la carpeta de trabajo Asegúrese de que el menú emergente Tipo, indica Sólo imágenes y haga clic en Exportar.

e. Recuerde que el archivo PNG, es el archivo de origen o archivo de trabajo. Aunque ha exportado el documento en formato JPEG, también debe guardar el archivo PNG por si necesita hacer modificaciones. Seleccione Archivo > Guardar para guardar los cambios en el archivo PNG.