7.

1 Capas
Las capas dividen los documentos de Fireworks en planos. Es como si los componentes de una ilustracin 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 diseo y hacer modificaciones sin daar otras partes. El panel Capas muestra el orden en el que estn apilados los objetos y las capas del diseo. Las capas u objetos situados en la parte superior del panel, irn en el lienzo, sobre los objetos que estn 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 aadirlas 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 expansin , para ver una lista de todos los objetos que contiene. Los objetos se muestran como miniaturas. Igualmente puede utilizar el control de contraccin de la capa, cuando lo crea conveniente. Adems de los objetos, se utilizan mscaras. Las mscaras ocultan o muestran partes de un objeto o imagen. hay varias tcnicas de enmascaramiento con los que conseguir efectos en los objetos muy interesantes y creativos. Las mscaras tambin se muestran en el panel Capas. En la parte superior del panel Capas se sitan 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 sitan 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 simulacin 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 rectngulos de diferentes colores pero de que se solapen en parte. 4. Seleccione la segunda capa y dibuje en ella tres valos con colores diferentes solapndose 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: rectngulos, valos y estrellas. 8. Para mover una capa o un objeto: Arrastre la capa o el objeto a la posicin que desee en el panel Capas. Tambin puede arrastrar el indicador de seleccin 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 seleccin azul de la capa a otra capa. Todos los objetos seleccionados en la capa se mueven simultneamente a la otra capa. Seleccione todos los elementos de una capa y muvalos 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 seleccin 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 fcil 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 imgenes, trabajar con capas, formas, mscaras y texto, y optimizar y exportar el trabajo terminado. Debe realizar las siguientes tareas: 1) Preparacin del trabajo. 2) Incorporacin del fondo y el logotipo. 3) Organizacin de los objetos en capas. 4) Creacin de un fondo que contraste. 5) Creacin de un contorno alrededor del titular publicitario. 6) Creacin de un efecto de borde ladeado. 7) Incorporacin de un eslogan al titular publicitario. 8) Exportacin de un archivo de imagen optimizada. 1) Preparacin del trabajo Durante las fases de planificacin del proyecto, se discutieron diferentes diseos posibles para un titular publicitario. De este trabajo previo, surgi un boceto que aprob el cliente. Se utiliz una fotografa y un texto como logotipo. Vea la siguiente simulacin donde se muestra cmo crear una carpeta de trabajo, cmo obtener el material necesario para hacer la prctica y cmo descomprimir un archivo .zip: . Ahora ya puede crear una carpeta de trabajo y descargar el material necesario en esa carpeta. 2) Incorporacin del fondo y el logotipo Si lo prefiere, vea antes la siguiente simulacin en la que se muestra cmo importar una foto para el fondo del banner, cmo utilizar la herramienta escala vrtice: a. Cree un nuevo archivo. Para ello, seleccione > Nuevo. El lienzo debe tener 700 pxeles 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 fotografa. Primero se importa la foto y luego se ajusta. Seleccione Archivo > Importar y localice la imagen foto.jpg. Haga clic en Abrir. y cmo insertar un grfico vectorial utilizando puntos de

Alinee el puntero de insercin 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 ms grande que el lienzo, como indica su contorno azul. Para ajustarla de manera adecuada, debe cambiar la escala y la posicin 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 reduccin . d. Con la imagen seleccionada, haga clic en la herramienta Escala . Reduzca el tamao de la foto aproximadamente un 25%. Para ello, pinche el punto de seleccin del ngulo inferior derecho de la fotografa y arrastre el ratn hacia arriba. e. Seleccione la herramienta puntero , haga clic en la foto y arrstrel a 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 visin del trabajo realizado. f. Ahora importe el grfico vectorial del logotipo. El archivo que va a importar se cre como un grfico vectorial en Fireworks y se guard en formato de Adobe Illustrator (como archivo AI), un formato que se utiliza con frecuencia en diseo grfico. Seleccione Archivo > Importar y, a continuacin, seleccione Logo.ai. Haga clic en Abrir. Obtendr un cuadro de dilogo Opciones de archivos vectoriales. En este cuadro de dilogo puede elegir cmo se importar el archivo vectorial. Haga clic en Aceptar para importar con las opciones predeterminadas. Site el punto de insercin en el ngulo superior izquierdo del titular y haga clic para insertar el grfico. Por el momento, el logotipo no se ve claramente porque es negro y transparente sobre la imagen de fondo oscura. Ms adelante lo resaltar para que se vea mejor. g. Guarde el documento. 3) Organizacin de los objetos en capas

Si lo prefiere, vea antes la siguiente simulacin que ensea a separar los objetos en capas y a cambiar el orden de apilamiento: La organizacin en capas se hace para poder manipular los elementos con ms facilidad. Utilice tres capas: una para el fondo, una segunda para el logotipo y una tercera para los dems grficos. 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, slo contiene una capa con el nombre Capa 1. En la parte inferior del panel, haga clic en el botn 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: Grficos (capa 3), Logotipo (capa 2), Fondo (capa 1). d. Cambie el orden de apilamiento haciendo clic en la capa Grficos y arrstrela debajo de la capa Logotipo. e. Arrastre la imagen del logotipo desde la capa Fondo hasta la capa Logotipo. El panel Capas debera presentar el aspecto mostrado en la figura. Ha completado el punto 3 del diseo. Vuelva al ndice de esta prctica si quiere ver como lleva el trabajo. 4) Creacin de un fondo que contraste Si lo prefiere, vea antes la siguiente simulacin en la que se ensea 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 rectngulo de color ms claro, detrs del logotipo, . a. Seleccione la capa Logotipo en el panel Capas. Seleccione la herramienta Rectngulo 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 botn Opacidad para el segundo color del degradado y

aplique un 50%. Pulse Intro para aceptar la configuracin y, a continuacin, dibuje un rectngulo sobre el logotipo. Cuando suelte el botn del ratn, aparecer un rectngulo semitransparente sobre el logotipo. b. El rectngulo oculta el logotipo que se encuentra debajo. Debe cambiar el

orden de apilamiento de los dos objetos de forma que el rectngulo quede debajo del logotipo. Para ello arrastre, en el panel capas, el objeto rectngulo para que quede debajo del objeto logotipo. El logotipo aparece ahora correctamente y el rectngulo lo resalta, en lugar de ocultarlo. c. Guarde el documento. En la figura puede ver el resultado de lo realizado hasta el momento. Ha completado el punto 4 del diseo. Vuelva al ndice de tareas para ver como lleva el trabajo. 5) Creacin de un contorno alrededor del titular publicitario Este punto es muy importante porque ensea a crear una mscara vectorial. Recuerde que una mscara es una forma geomtrica que oculta parte de un objeto o de una imagen. Si lo prefiere, vea antes la siguiente simulacin que ensea a crear un mscara que oculta o tapa parte del banner publicitario: Ahora crearemos, mediante una mscara, un contorno negro alrededor del titular publicitario. Para crear este efecto, utilizaremos un rectngulo redondeado que aplicaremos como una mscara vectorial. Una mscara vectorial recorta los objetos con la forma de su trazado . La manera de hacerlo es muy sencilla, se crea la forma geomtrica que servir como mscara (por ejemplo un rectngulo redondeado), se corta, se selecciona la imagen y se le pega como mscara la forma que se ha cortado. a. Seleccione la capa Fondo en el panel Capas. Seleccione la herramienta Rectngulo redondeado. En el Inspector de propiedades, defina las propiedades de la herramienta: relleno ninguno ; color de trazo gris claro, por ejemplo, #666666; tamao de punta de trazo 1 y categora 1 pxel blando. Dibuje el rectngulo redondeado dentro del titular publicitario. El rea que cae fuera del rectngulo redondeado ser negra y formar el contorno del titular publicitario.

b. Utilice los puntos de seleccin azules para ajustar el tamao de la forma. Utilice los puntos de control con forma de rombo para aumentar el redondeado de las esquinas. c. Con el rectngulo redondeado seleccionado, seleccione Edicin > Cortar. En el panel Capas, seleccione la foto de fondo (mapa de bits) en la capa Fondo. Desea aplicar la mscara a este objeto. d. Sele ccio ne E dici n > Pegar como mscara para aplicar la mscara a la fotografa. En el lienzo, se puede ver el rea cubierta por el rectngulo redondeado. El rea situada fuera, est oculta. En el panel Capas, aparece una miniatura de la mscara junto a la fotografa del fondo. El resaltado verde alrededor de la miniatura, indica que est seleccionada. e. Guarde el trabajo. Ha completado el punto 5 del diseo. Vuelva al ndice de tareas para ver como lleva el trabajo. 6) Creacin de un efecto de borde ladeado Si lo prefiere, vea antes la siguiente simulacin en la qu se utiliza un cuadriltero para tapar parte de la imagen: Podemos conseguir el mismo efecto que con una mscara utilizando un cuadriltero que tape parte del diseo sin necesidad de incorporarlo como mscara. a. Seleccione la capa Grficos 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 Slido negro.

b. En la

ventana de documento, fuera del lienzo, haga clic cuatro veces para dibujar un cuadriltero parecido al de la figura. Para cerrarlo, debe terminar con un clic en el primer punto. El rectngulo debe ser un poco ms alto que el grfico del titular publicitario y su longitud, debe ser aproximadamente una tercera parte la del grfico. Haga el lado derecho inclinado. c. La forma est en la capa Grficos, 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 Grficos, mientras que la capa Fondo se encuentra debajo. d. Si es necesario, utilice la herramienta Subseleccin , para arrastrar algn punto de anclaje para llevarlo a la posicin deseada. e. Guarde el trabajo. Ha completado el punto 6 del diseo. Vuelva al ndice de tareas para ver como lleva el trabajo. 7) Incorporacin de un eslogan al titular publicitario Hay que aadir un eslogan de la empresa, Nouveau World Cuisine, al titular publicitario. a. Seleccione la capa Grficos 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 tamao de fuente. Haga clic en el botn Negrita. Color, #F7EFE3. Haga clic en el botn Alinear a la izquierda . Haga clic debajo del grfico del logotipo y escriba: Nouveau World Cuisine. b. Haga clic una vez, fuera del bloque de texto para aplicar el texto introducido. Firewo rks crea un nuevo objeto de texto en la capa Grficos, que tiene como nombre predeterminado el texto que ha introducido. Como puede

comprobar la organizacin por capas es muy til para identificar rpidamente los objetos de texto utilizados en la composicin. Ha completado el punto 7 del diseo. Guarde el trabajo. Vuelva al ndice de tareas para ver como lleva el trabajo. 8) Exportacin de un archivo de imagen optimizada El ltimo paso es optimizar y exportar la imagen como un archivo JPG. El objetivo final del diseo de grficos Web es la creacin de imgenes atractivas que se descarguen lo ms rpidamente posible. Para ello, debe reducir el tamao del archivo de la imagen manteniendo en lo posible la misma calidad. Este equilibrio es la optimizacin, es decir, se busca la proporcin correcta de color,compresin y calidad. Por lo tanto, antes de exportar un documento de Fireworks, debe optimizarlo primero y hgalo siempre. La optimizacin garantiza que la imagen se exportar con el mejor equilibrio posible entre compresin y calidad. a. Si el panel Optimizar no est abierto, seleccione Ventana > Optimizar, para abrirlo. b. Elija JPEG -- Calidad superior en el men emergente Configuracin. Las opciones del panel cambian, para reflejar la nueva configuracin. Estos ajustes pueden modificarse, pero utilizamos los valores predeterminados. c. Haga clic en el botn Vista previa de la parte superior izquierda de la ventana de documento. Fireworks muestra el documento como aparecer cuando se exporte con la configuracin actual. En la parte inferior izquierda de la ventana se muestra el tamao del archivo exportado y el tiempo aproximado que tardar en mostrarse la imagen en la Web. d. Tras elegir la configuracin de optimizacin, exporte la imagen como un archivo JPEG. Seleccione Archivo > Exportar. El nombre de archivo aparece con la extensin .jpg. Fireworks elige este formato de archivo porque es el seleccionado en el panel Optimizar. Desplcese a la carpeta de trabajo Asegrese de que el men emergente Tipo, indica Slo imgenes 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, tambin debe guardar el archivo PNG por si necesita hacer modificaciones. Seleccione Archivo > Guardar para guardar los cambios en el archivo PNG.