1. 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.
2. 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.
3. 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 >
4. 5.
6.
7.
8.
Desenfoque gaussiano. Si utiliza un radio muy pequeño empeoran los resultados. Utilice
un valor 5.
Guarde la imagen como peces1.jpg. No es necesario conservar el archivo en formato png.
Cierre el documento.
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.
Aplique un filtro Desperfilar máscara para mejorar el enfoque.
Guarde el trabajo. Tipo de archivo Fireworks PNG. De esta forma puede retocar los filtros
si es necesario. Nombre peces.png
5. 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. 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.
7. 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.
la
f.
e. Seleccione
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.
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
8. > 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ángu
lo 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
9. 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
Sólido negro.
(transparente). Seleccione un relleno
10. b. En la
venta
na de
docu
ment
o,
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
anclaje para llevarlo a la posición deseada.
e. Guarde el trabajo.
, para arrastrar algún punto de
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.
11. 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.