Creación de prototipos para sitios Web e interfaces mediante páginas de Fireworks

Un solo archivo PNG de Fireworks puede contener varias páginas y proporcionar la forma idónea para elaborar prototipos Web e interfaces de aplicaciones. Cada página contiene su propia configuración para el tamaño y el color del lienzo, la resolución de imagen y las guías. Esas opciones se configuran, bien por página o bien globalmente para todas las páginas de un documento. Aparte de la capa Web, cada página contiene también un conjunto único de capas. Para los elementos comunes, no obstante, se puede utilizar una página maestra o compartir capas entre las diversas páginas. (Consulte Compartir capas).

Nota:

Si no se crea ninguna página, todos los elementos del documento residen en una sola página.

Las páginas se visualizan en el panel Páginas, donde los objetos de cada página se muestran en una miniatura contigua al nombre de la página. La página activa se resalta en el panel y se muestra en el menú emergente de las páginas, encima del documento activo.

Para obtener información acerca de la exportación de páginas, consulte Exportación desde el espacio de trabajo.

Vídeo

Creación de prototipos de alta fidelidad con Fireworks o Photoshop (00:01:17)

Obtenga una descripción general breve sobre cómo puede utilizar Fireworks o Photoshop para crear prototipos de alta fidelidad.

Por Jim Babbage

Añadir, eliminar y explorar páginas

El panel Páginas permite añadir páginas nuevas, eliminar páginas innecesarias y duplicar páginas existentes. Cuando se añaden, eliminan o mueven páginas, Fireworks actualiza automáticamente el número que figura a la izquierda de los títulos de las páginas. Esos números automáticos ayudan a dirigirse rápidamente a páginas concretas, cuando se trata de grandes diseños con varias páginas.

Añadir una página

Se inserta una página en blanco al final de la lista de páginas, y se convierte en la página activa.

  1. Siga uno de estos procedimientos:

    • En el panel Páginas, haga clic en el botón Añadir/duplicar página .

    • Haga clic con el botón derecho en el panel y seleccione Nueva página desde el menú emergente.

    • Seleccione Edición > Insertar > Página.

  1. Siga uno de estos procedimientos:

    • En el panel Páginas, seleccione una página.

    • En el teclado, utilice los botones de avance y retroceso de página.

    • Elija la página en el menú emergente Páginas que se encuentra en la parte superior de la ventana del documento o en la parte inferior derecha del panel Páginas.

    Nota:

    Un asterisco junto al nombre de página en el menú desplegable Páginas señala la página maestra.

Duplicar una página

Al duplicar una página, se agrega una nueva página que contiene los mismos objetos y jerarquía de capas que la que está seleccionada. Los objetos duplicados conservan la opacidad y el modo de mezcla de los objetos originales. Se pueden realizar cambios en los objetos duplicados sin que estos cambios afecten a los originales.

  1. Siga uno de estos procedimientos:

    • Arrastre la página al botón Añadir/duplicar página.

    • Haga clic con el botón derecho en la página y seleccione Duplicar página en el menú emergente.

Mover una o más páginas

En el panel Páginas, mueva las páginas con el fin de colocar los diseños relacionados unos cerca de otros y agilizar el proceso de disposición.

  1. (Opcional) Si va a mover varias páginas, puede realizar una de las acciones siguientes:

    • Con la tecla Mayús presionada, seleccione un grupo contiguo de páginas, haciendo clic en ellas.

    • Si va a seleccionar un grupo discontiguo de páginas, haga clic en ellas con la tecla Ctrl pulsada (Windows) o con la tecla Comando pulsada (Mac OS).

  2. Arrastre las páginas seleccionadas arriba o abajo en el panel. Por encima y debajo de otras páginas, aparecerán bordes oscurecidos allá donde pueda soltar el botón del ratón para mover las páginas seleccionadas.

Eliminar una página

La página que está por encima de la página eliminada se convierte en la página activa.

  1. Siga uno de estos procedimientos:

    • En el panel Páginas, arrastre la página hasta el icono de cubo de basura .

    • Haga clic con el botón derecho en la página y seleccione Eliminar página en el menú emergente.

Editar el lienzo de una página

Cada página tiene un lienzo exclusivo, con valores independientes para el tamaño, el color del lienzo y la resolución de la imagen.

  1. Elija una página en el panel Páginas o en el menú emergente Páginas que se encuentra en la parte superior de la ventana del documento.

  2. Seleccione Modificar > Lienzo > Tamaño de la imagen o Modificar > Lienzo > Color del lienzo, o Modificar > Lienzo > Tamaño del lienzo.

  3. Realice los cambios pertinentes. Estos cambios también pueden realizarse en el panel Propiedades cuando el lienzo de una página está seleccionado.

  4. Para aplicar los cambios solamente a la página seleccionada, deje seleccionada la opción Sólo página actual. Para aplicar los cambios a todas las páginas, anule la selección de esta opción.

Utilizar una página maestra

Para utilizar un conjunto de elementos comunes en todas las páginas, utilice una página maestra. Cuando una página normal se convierte en una página maestra, esta se mueve hacia la parte superior de la lista, en el panel Páginas. Cuando se crea una página maestra, se añade una capa de página maestra al final de la jerarquía de capas en cada página.

Crear una página maestra

  1. En el panel Páginas, haga clic con el botón derecho en una página existente y seleccione Definir como página maestra en el menú emergente.

Cualquier capa compartida entre varias páginas se convertirá en una capa normal (no compartida). No obstante, las capas compartidas entre fotogramas seguirán siéndolo. Para ver los fotogramas de la página maestra en una página vinculada, consulte Ver objetos en un estado.

Una vez creada una página maestra, cualquier página nueva heredará automáticamente la configuración de la página maestra. Las páginas existentes no heredan esa configuración, a no ser que se vinculen con la página maestra. Si más tarde cambia la página maestra, todas las páginas vinculadas se actualizarán automáticamente.

Se aplican las siguientes limitaciones a la herencia de objetos y comportamientos de las páginas maestras en otras páginas:

  • Las páginas heredan sólo el estado actual de todos los objetos de una página maestra. Para heredar todos los estados de todos los objetos, en cada página, añada el mismo número de estados o más al objeto con el mayor número de estados. Todos los objetos de esa página heredan todos los estados de la página maestra.

  • Los cambios en el tamaño del lienzo o en el tamaño de la imagen de una página afectan a todas las páginas, incluidas las páginas que no están vinculadas a la página maestra. Para limitar los cambios sólo a la página actual, seleccione Sólo página actual.

  • Sólo las páginas vinculadas heredan los cambios en el color del lienzo de la página maestra.

  1. Siga uno de estos procedimientos:

    • En el panel Páginas, haga clic con el botón derecho en una página y seleccione Vincular con página maestra en el menú emergente.

    • Haga clic en la columna situada a la izquierda de la imagen en miniatura de la página en el panel Páginas. Un icono de vínculo mostrará que la página está vinculada con la página maestra.

      Nota:  si modifica un ajuste de una página vinculada con la página maestra, se impone la nueva configuración pero se rompe el vínculo con la página maestra.

Mostrar u ocultar la capa de la página maestra

Un cambio en la visibilidad se refleja en todas las páginas.

  1. En el panel Capas, haga clic en el icono en forma de ojo que está situado a la izquierda de la capa de la página maestra.

Eliminar capas de páginas maestras

  1. Haga clic con el botón derecho en el panel Capas y seleccione Eliminar capa de página maestra en el menú emergente.

Para volver a añadir la capa de la página maestra en la página, haga clic con el botón derecho en el panel Capas y seleccione Añadir capa de página maestra en el menú emergente.

Convertir una página maestra en una página normal

  1. Haga clic con el botón derecho en el panel Páginas y seleccione Restablecer página maestra en el menú emergente.

Exportación de páginas seleccionadas

En un solo paso es posible exportar varias páginas. Sólo se exportarán las páginas seleccionadas. Cuando se exportan páginas, la configuración de optimización especificada para las páginas individuales se emplea para exportar los archivos.

  1. En el panel Páginas, seleccione las páginas que desee exportar.

  2. Haga clic con el botón derecho del ratón y seleccione Exportar página(s) seleccionada(s).

  3. En el cuadro de diálogo Exportar, seleccione una de las opciones del menú Exportar:

    Capas en archivos

    Exporta capas en las páginas seleccionadas como archivos individuales.

    Estados en archivos

    Exporta estados en las páginas seleccionadas como archivos individuales.

    Páginas en archivos

    Exporta páginas seleccionadas como archivos individuales.

Personalización de nombres de archivos al exportar páginas

  1. En el panel Páginas, seleccione las páginas que desee exportar.

  2. Haga clic con el botón derecho del ratón y seleccione Exportar página(s) seleccionada(s).

  3. En el cuadro de diálogo Exportar, haga clic en Opciones. El botón Opciones se activa en función de la opción seleccionada en el menú Exportar.

  4. En el cuadro de diálogo Opciones de exportación, seleccione Añadir prefijo o Añadir sufijo y seleccione una opción del menú. Puede asignar un nombre a los archivos utilizando cualquiera de las siguientes opciones:

    Nombre del documento

    El nombre del archivo de origen se añade como prefijo o sufijo. Por ejemplo, si se está exportando una página con nombre Index desde el archivo de origen sites.png utilizando la opción Añadir prefijo, se generará un archivo de nombre Sites_Index.gif .

    Numérico (1, 2, 3... o 01, 02, 03...)

    Los archivos se generan en secuencia numérica con los números añadidos al prefijo o al sufijo. Todos los archivos de página exportados se numeran en el orden de aparición en el panel de páginas. Cuando se vayan a exportar varias páginas, utilice la secuencia de doble dígito.

  5. Utilice las opciones del menú Tipo de archivo para optimizar la configuración del archivo exportado.

Exportación de divisiones en páginas seleccionadas

Las divisiones del archivo de origen se omite al exportar un archivo. Para exportar las divisiones, utilice las siguientes opciones del cuadro de diálogo Exportar.

  1. En el menú Exportar, seleccione HTML e imágenes o Sólo imágenes.

  2. En el menú HTML, seleccione Exportar archivo HTML.

  3. En el menú Divisiones, seleccione Exportar divisiones.

  4. Seleccione una de las siguientes opciones:

    Sólo divisiones seleccionadas

    Las áreas marcadas como divisiones se exportan.

    Incluir áreas sin divisiones

    También se exportarán las áreas que no se marcan como divisiones.

Vista previa de varias páginas

Se puede obtener una vista previa de todas las páginas, excepto de la maestra, al importar o abrir archivos. La página seleccionada durante la vista previa se elige cuando se abre el archivo.

Si se inserta una página que contiene objetos de la capa maestra, la página maestra se convierte en una capa normal y se importa.

Activación de la vista previa de varias páginas

Se puede obtener una vista previa de todas las páginas de un archivo al importarlo o abrirlo. La opción de vista previa de varias páginas se encuentra activada de forma predeterminada en el cuadro de diálogo Preferencias.

Para activar la vista previa de varias páginas de los archivos creados en versiones anteriores, ábralos en en la versión actual y guárdelos.

  1. En el cuadro de diálogo Preferencias, seleccione General.

  2. Seleccione Guardar por miniaturas de página para habilitar la vista previa de varias páginas. Si esta opción está desactivada, los nombres de página se almacenan, pero las miniaturas no se generan para estos archivos.

Previsualización de páginas antes de abrirlas o importarlas

  • En Windows, la vista previa se muestra en el cuadro de diálogo Importar o Abrir cuando se importa o se abre un archivo.

  • En Mac, haga clic en Previsualizar en el cuadro de diálogo de apertura o importación. De forma alternativa, puede hacer doble clic en el archivo en el cuadro de diálogo Importar para entrar en el modo de vista previa.

    Al importar archivos, seleccione Insertar tras página actual para añadir páginas importadas tras la página seleccionada actualmente en el documento.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea