7.1 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.

Vea la siguiente simulación sobre el uso de capas:

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 7.2: 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. 2) Incorporación del fondo y el logotipo. 3) Organización de los objetos en capas. 4) Creación de un fondo que contraste. 5) Creación de un contorno alrededor del titular publicitario. 6) Creación de un efecto de borde ladeado. 7) Incorporación de un eslogan al titular publicitario. 8) Exportación de un archivo de imagen optimizada.

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. Vea la siguiente simulación donde se muestra cómo crear una carpeta de trabajo, cómo obtener el material necesario para hacer la práctica y cómo descomprimir un archivo .zip: . Ahora ya puede crear una carpeta de trabajo y descargar el material necesario en esa carpeta.

2) Incorporación del fondo y el logotipo

Si lo prefiere, vea antes la siguiente simulación en la que se muestra cómo importar una foto para el fondo del banner, cómo utilizar la herramienta escala y cómo insertar un gráfico vectorial utilizando puntos de vértice:

1. 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.
2. 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.
3. 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 .
4. 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.
5. 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.
6. 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.
7. Guarde el documento.

3) Organización de los objetos en capas

Si lo prefiere, vea antes la siguiente simulación que enseña a separar los objetos en capas y a cambiar el orden de apilamiento:

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.

1. Si el panel Capas no está abierto, elija Ventana > Capas.
2. 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.
3. 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).
4. Cambie el orden de apilamiento haciendo clic en la capa Gráficos y arrástrela debajo de la capa Logotipo.
5. 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.

Ha completado el punto 3 del diseño. Vuelva al índice de esta práctica si quiere ver como lleva el trabajo.

4) Creación de un fondo que contraste

Si lo prefiere, vea antes la siguiente simulación en la que se enseña a crear un fondo que contraste con el primer plano:

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, .

1. 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.
2. 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.
3. Guarde el documento. En la figura puede ver el resultado de lo realizado hasta el momento.

Ha completado el punto 4 del diseño. Vuelva al índice de tareas para ver como lleva el trabajo.

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. Si lo prefiere, vea antes la siguiente simulación que enseña a crear un máscara que oculta o tapa parte del banner publicitario:

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.

1. 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.
2. 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.
3. 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.
4. 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.

5. Guarde el trabajo.

Ha completado el punto 5 del diseño. Vuelva al índice de tareas para ver como lleva el trabajo.

6) Creación de un efecto de borde ladeado

Si lo prefiere, vea antes la siguiente simulación en la qué se utiliza un cuadrilátero para tapar parte de la imagen:

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.

1. 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.
2. 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.
3. 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.
4. Si es necesario, utilice la herramienta Subselección , para arrastrar algún punto de anclaje para llevarlo a la posición deseada.
5. Guarde el trabajo.

Ha completado el punto 6 del diseño. Vuelva al índice de tareas para ver como lleva 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.

1. 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.
2. 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.

Ha completado el punto 7 del diseño. Guarde el trabajo. Vuelva al índice de tareas para ver como lleva el trabajo.

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.

1. Si el panel Optimizar no está abierto, seleccione Ventana > Optimizar, para abrirlo.
2. 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.
3. 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.
4. 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.
5. 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.

7.3 Conteste al siguiente cuestionario y repítalo hasta que no falle: