Trabajo con objetos en Adobe Muse

Los objetos de Adobe Muse incluyen elementos de diseño creados internamente o importados de fuentes externas. Las imágenes, el texto y los marcos de imágenes, entre otros, pueden añadirse a la página web y manipularse con varias herramientas en Adobe Muse.

Uno de los flujos de trabajo más habituales consiste en crear e importar un botón de Adobe Photoshop. Por este motivo, Adobe Muse reconoce las capas y las composiciones de capas creadas en Photoshop. Adobe Muse permite establecer estas capas como estados de botón dentro del sitio web.

En el caso de los objetos colocados en el lienzo de la página web, puede añadir transformaciones para adaptarlos a las necesidades de diseño del sitio web. También puede aislar un objeto para añadir las propiedades de relleno y medianil adecuadas a fin de tratar los elementos anidados de espaciado.

Colocación de marcos de imagen en proyectos de Adobe Muse

Para colocar marcos de imagen directamente en los proyectos de Adobe Muse, haga clic en la herramienta Marco de imagen. En el panel Herramientas, haga clic en la herramienta Marco de imagen y, a continuación, en la ubicación del proyecto que desee.

Colocación de una única imagen en la página

El espacio de trabajo de Muse funciona de forma similar a los de Illustrator e InDesign, en los que la imagen colocada se carga en primer lugar y, a continuación, se hace clic en la página donde desea que aparezca. Para añadir un archivo de imagen colocándolo directamente en la página, haga lo siguiente:

1. Seleccione Archivo > Colocar o utilice el método abreviado de teclado: Comando-D (Mac) o Control-D (Windows) para abrir el cuadro de diálogo Importar.
2. Seleccione el archivo denominado made-with-muse.png ubicado en la carpeta de archivos de ejemplo. Haga clic en Abrir para seleccionarlo y cerrar el cuadro de diálogo Importar.

Haga clic una vez por la parte inferior de la página para colocar la imagen. En este caso, debe colocar la imagen a tamaño completo, así que simplemente tiene que hacer clic. Sin embargo, si deseara cambiar el tamaño de la imagen colocada, puede hacer clic y arrastrar el puntero para escalar la imagen a un tamaño específico. 

Mediante la herramienta Selección, arrastre la imagen hacia el centro vertical del rectángulo del pie de página en mosaico y observe cómo aparecen brevemente guías rojas y cuadros de medida turquesa para ayudarle a centrarla.

Después de realizar estos cambios, casi habrá completado el apartado de pie de página.

Cómo optimiza Muse las imágenes cuando se publica o exporta un sitio

También puede colocar imágenes preparadas para impresión en Adobe Muse, que las convertirá a un formato más compatible con la red. Sin embargo, a menudo la creación de imágenes compatibles con la red supone comprimir la imagen y sacrificar un poco de su calidad. En Muse, la colocación de imágenes que no estén preparadas para la red supone la compresión automática. Si publica o exporta un sitio y no le satisfacen los resultados automáticos, pruebe a crear y optimizar sus propias imágenes compatibles con la red de forma manual en el software de Photoshop o Adobe Fireworks®. Elimine las imágenes originales y sitúe las nuevas imágenes optimizadas en las páginas y, a continuación, publique o exporte de nuevo su sitio.

Tenga en cuenta que otras alteraciones que realice en una imagen en Muse (como recortar, cambiar de tamaño o aplicar biseles, sombras y brillos) provocan que Muse vuelva a crear la imagen y la comprima automáticamente. Si desea tener un mayor control sobre el proceso de optimización, puede añadir efectos a las imágenes con Photoshop o Fireworks, optimizar el archivo en un programa de edición de imágenes y, a continuación, colocar la imagen en Muse para ajustar por su cuenta el nivel de compresión. Puede colocar archivos PSD de Photoshop directamente en Muse, en lugar de exportar archivos PNG, JPG o GIF, pero también provocará que Muse genere automáticamente un archivo nuevo de imagen con sus propios algoritmos de compresión automática.

Optimización de imágenes para mostrarlas en Internet

Pueden producirse errores de exportación y ralentizarse las operaciones de exportación al aplicar una resolución muy alta a un archivo vinculado y, en consecuencia, escalarlo con un tamaño mucho menor en la página. No se recomienda este flujo de trabajo. Los problemas se hacen más evidentes cuando se colocan repetidamente imágenes de tamaño completo (más de 2.000 píxeles) y, a continuación, se escalan para que se ajusten a un diseño.

Si coloca un archivo de imagen muy grande, Muse limita automáticamente el tamaño y cambia la escala de la anchura de la imagen a 2048. Si pasa el puntero del ratón por encima del nombre de un activo en el panel Activos, una sugerencia muestra el tamaño original de la imagen colocada frente al tamaño de la imagen remuestreada (escalada para ajustarse al límite de tamaño máximo).

Es una práctica recomendada para redimensionar y optimizar los gráficos web de un sitio en un programa de edición de imágenes antes de colocarlos en las páginas. Colocar imágenes de dimensiones muy grandes puede aumentar el tamaño del archivo .muse muy por encima de lo necesario. El archivo .muse debe procesar los datos de píxeles adicionales que no son necesarios para mostrar la imagen en Internet. Esto puede alargar el tiempo de procesamiento durante la exportación y publicación de sitios. En algunos casos, es posible que se agote el tiempo de espera de un archivo .muse muy grande al intentar redimensionar y optimizar todos los archivos durante el proceso de exportación o publicación. Es posible que se produzcan errores de tiempo de espera.

Para solucionarlo, puede hacer clic con el botón derecho del ratón en los nombres de activos y elegir Optimizar tamaño de activo para quitar los datos que no son necesarios para mostrar la imagen escalada.

Si escala una imagen optimizada para que aparezca más grande en un diseño, es posible que vea un error que indica que el activo está muy sobremuestreado. Para solucionarlo, puede elegir Importar tamaño más grande para recuperar los datos de imagen adicionales necesarios para mostrar la imagen escalada de manera aceptable.

Dibujo de formas de marcador de posición

Las formas de marcador de posición pueden ser elipses, rectángulos o polígonos, y se pueden rellenar con imágenes, texto o color.

Colocación de un archivo de Photoshop como un botón de rollover

El botón Share (Compartir) muestra los estados del modo esperado. En la siguiente sección aprenderá a alinear el botón Share (Compartir) con la imagen de la gota en el lado derecho de los elementos de navegación del sitio.

En la parte siguiente, aprenderá a definir las áreas de encabezado y pie de página de la página maestra.

Fijación de objetos a la ventana del navegador

Al colocar una imagen o utilizar otros métodos para añadir ilustraciones a una página, se usa la herramienta Selección y las teclas de flecha para volver a colocarla. Al desplazarse por la imagen, ésta se mueve en relación con los otros elementos (imágenes, texto y multimedia) que también existe en esta página. Tiene la posibilidad de mover los otros elementos también, pero toda la página se comporta como un folleto o un póster. Los elementos de la página existen en un solo plano. Si una página es larga (contiene una gran cantidad de contenido vertical) y el visitante se desplaza hacia abajo, ya no ve las imágenes de la parte superior de la página.

Es probable que ya haya fijado los objetos al visualizar sitios web; son elementos "persistentes" que siempre se muestran en la misma ubicación. Parece que flotan encima el resto del contenido de la página.

Cuando se utiliza la herramienta de fijación, básicamente está eliminando una imagen del flujo de la página. En lugar de diseñarla en relación con los otros elementos de la página, la define en una ubicación específica en relación con el navegador. Las imágenes fijadas son como "pegatinas": siempre permanecen en un solo punto (como, por ejemplo, la esquina superior derecha o al situarse cerca de la parte inferior), independientemente de otros elementos con desplazamiento de la página. Si el visitante cambia el tamaño de su navegador, las imágenes fijas permanecen siempre en su posición fija en relación con la ventana del navegador.

Se puede considerar la fijación como un modo de "separar la imagen" del diseño de una página y acercarla al navegador en su lugar, como fijar una nota a un tablero de corcho. El elemento que tenga fijado se moverá para mantener su posición fija en relación con el navegador, si el visitante cambia el tamaño de la ventana del navegador; sin embargo, no se puede mover el elemento que tenga fijado, si el visitante desplaza el contenido de la página horizontal o verticalmente.

Siga estos pasos para usar la herramienta de fijación:

1. Mientras la A-Página maestra está abierta en la vista Diseño, seleccione el icono de Facebook con la herramienta Selección.
2. Haga clic en la posición de fijación superior derecha en la interfaz Fijar del panel de control. Esta configuración "fija" el elemento de acuerdo con la ubicación actual de su esquina superior derecha.

3. Repita los pasos 1 y 2 para fijar los botones de icono de Google+ y Twitter a sus posición derecha superior, de forma que no se muevan dentro de la ventana del navegador cuando el resto de la página se desplace.
4. Haga clic en Plan para ver las miniaturas de página. Tenga en cuenta que todas las páginas incluyen ahora los tres iconos de redes sociales, ya que se añadieron a la página maestra.
5. En la vista Plan, haga doble clic en la página de comida para abrirla en la vista Diseño. O si ya está abierta, haga clic en la ficha de página de comida para que se active. Seleccione Archivo > Vista previa de página en navegador para ver la página en un navegador.
6. Haga clic en el elemento del menú de postres para saltar la página larga hasta la sección de menú de postres. Tenga en cuenta que mientras el resto de los elementos de la página se desplazan, los tres iconos de redes sociales permanecen posicionados a lo largo de la parte derecha de la página porque están fijos.

Continúe con el sexto capítulo de Creación de su primer sitio web con Muse, donde verá cómo se agrupan los conjuntos de objetos, de manera que se comporten como un elemento. También deberá completar la página de visitas mediante la adición de un mapa de Google integrado que muestra las ubicaciones de Katie's Café a los visitantes. Y tras finalizar el sitio, verá lo fácil que es cargarlo a un servidor de alojamiento (de Business Catalyst) para publicarlo en línea, de manera que puede compartir los trabajos en curso con sus clientes y colegas.

En el cuarto capítulo de Creación de su primer sitio web con Muse, ha aprendido a añadir etiquetas de anclaje y vincularlas a los elementos del widget de menú horizontal manual. También ha aprendido a fijar elementos a la página para evitar que se desplacen. Y ha visto cómo añadir vínculos a archivos para que los visitantes puedan descargarlos.

También verá cómo agrupar objetos y trabajar con grupos para que pueda pegar grupos de contenido en las páginas. También podrá trabajar con más HTML incorporado. En esta ocasión, añadirá un mapa interactivo de Google a la página de visitas. Y por último, verá cómo dar los últimos toques a su sitio añadiendo un icono de favorito y, a continuación, publicando el sitio de prueba en los servidores de alojamiento incluidos.

Agrupación de objetos y pegado de grupos como una sola unidad

Al igual que InDesign y otros programas de diseño, puede combinar varios objetos en un grupo para que se consideren como una sola unidad. En esta sección, podrá crear un diseño compuesto por varios elementos (imágenes y marcos de texto colocados) y, a continuación, ver cómo agruparlos para que sea más fácil colocarlos o copiarlos como un elemento. Siga estos pasos:

1. En la vista Plan, haga doble clic en la miniatura de la página de inicio para que se abra en la vista Diseño.
2. Seleccione Archivo > Colocar. Busque y seleccione el archivo en la carpeta de archivos de ejemplo llamado panel-open-bottom.png. Haga clic en Abrir para cerrar el cuadro de diálogo Importar y, a continuación, haga clic una vez en la parte inferior de la página de inicio (debajo del widget de composición de caja de iluminación y encima del pie de página) para colocar el gráfico a tamaño completo.

El archivo PNG se estableció en una opacidad inferior, por lo que el diseño de flor semitransparente permite a la imagen de fondo de mosaico mostrarse a través.

3. Seleccione de nuevo Archivo > Colocar. En esta ocasión, busque y seleccione la imagen denominada spoon-map.png. Haga clic en Abrir y, a continuación, haga clic una vez en el centro superior del pétalo para colocarla.
4. Mientras que la imagen de cuchara está seleccionada, mantenga pulsada la tecla Opción (Mac) o Alt (Windows) para duplicar la imagen de cuchara y arrastrarla al pétalo justo a la derecha del centro. Repita esta acción una vez más para duplicar la imagen de la cuchara central y arrastrar la copia duplicada al pétalo de la izquierda. Utilice la herramienta Selección para colocar las tres cucharas, tal como se muestra en la siguiente imagen.

5. Con la herramienta Texto, dibuje un marco de texto en el pétalo central y escriba lo siguiente:

Katie's Café

Noe Valley

123 Elizabeth Street

LUN-VIE de 6 a 22

SÁB-DOM de 7 a 22

6. En el panel de texto, aplique la siguiente configuración para dar formato al texto:
   • Fuente: Droid Serif (o cualquier otra fuente serif)
   • Tamaño de fuente: 14
   • Color de fuente: #222222  (en la quinta parte se cambió el nombre de este color a negro katie)
   • Alineación de fuente: centro
   • Interlineado: 120%

7. A continuación, seleccione solo las últimas dos líneas (que comienzan con los días de la semana) y establezca el color de la fuente en rojo (#A6342A).
8. Seleccione el marco de texto con la herramienta Selección. Mantenga pulsada la tecla Opción (Mac) o Alt (Windows) para duplicar el marco de texto y arrástrelo al pétalo justo a la derecha, encima de la imagen de cuchara. Repita esta acción una vez más, para duplicar el marco de texto central y arrastrar la copia duplicada al pétalo de la izquierda. Utilice la herramienta Selección para colocar los tres cuadros de texto de forma que se alineen por encima de las tres cucharas, como se muestra en la siguiente imagen.

9. Cambie a la herramienta Texto. Seleccione el texto de la dirección de la izquierda y cámbielo a:

Katie's Café

Laurel Heights

800 Spruce Street

LUN-VIE de 5 a 12

SÁB-DOM de 9 a 1

10. Seleccione el texto de la dirección de la derecha con la herramienta Texto y cámbielo a:

Katie's Café

Cole Valley

301 Carmel Street

LUN-VIE de 7 a 22

SÁB-DOM de 9 a 22

Ahora que el diseño se ha completado, deberá seleccionar los elementos y agruparlos.

11. Utilice la herramienta de selección para hacer clic y arrastrar el puntero sobre todo el diseño de flores, asegurándose de seleccionar tanto la imagen de la flor colocada, como las tres imágenes de cuchara, y los tres cuadros de texto. Haga clic con el botón derecho del ratón y elija Grupo en el menú contextual que aparece. Si lo prefiere, también puede elegir Objeto > Grupo.

Tenga en cuenta que una vez que haya agrupado el conjunto de objetos, el indicador de selección de la esquina superior izquierda del panel de control muestra la palabra: Grupo.

12. Copie el grupo seleccionado. Haga clic en Plan para volver a la vista Plan y, a continuación, haga doble clic en la miniatura de página de visitas para abrirla en la vista Diseño. Elija Editar > Pegar en contexto, para colocar todo el grupo de elementos en la misma ubicación.

Como se puede ver en este ejemplo, los grupos son útiles, siempre que haya completado un diseño y desee trabajar con él como un solo elemento, para colocarlo en una página o copiarlo y pegarlo en una página diferente.

Además de agrupar, también puede encontrar útiles las funciones de bloqueo una vez que finalice un diseño. Haga clic con el botón derecho del ratón en un grupo o conjunto de elementos seleccionados y elija la opción Bloquear en el menú contextual que aparece para bloquearlos. (Como alternativa, puede elegir Objeto > Bloquear). Con el bloqueo se garantiza que no se moverá o eliminará accidentalmente ninguno de los elementos terminados de una página, porque ya no se pueden seleccionar. Si más tarde necesita actualizar los elementos bloqueados, elija Objeto > Desbloquear todo en la página.

Después de pegar el diseño de flor en la parte inferior de la página de visitas, el contenido de la página está parcialmente finalizado. En la siguiente sección, deberá continuar editando la página de visitas para agregar una interfaz de mapa interactiva que ayude a los clientes a encontrar el café más cercano.

Incrustación de contenido multimedia para añadir animación

Uso del panel de Espacio

El panel Espaciado le permite aprovechar las propiedades de relleno y medianil de CSS. El relleno borra un área alrededor del contenido (dentro del borde) de un elemento. El relleno se ve afectado por el color de fondo del elemento.

El relleno superior, derecho, inferior e izquierdo puede cambiarse de forma individual utilizando propiedades independientes. También se pueden igualar todas las propiedades de relleno seleccionando editarlas uniformemente.

1. En Adobe Muse, seleccione Ventana > Espaciado para abrir el panel Espaciado.

2. Especifique los valores para las propiedades de relleno izquierdo, derecho, superior e inferior. Si desea introducir valores diferentes, anule la selección del botón .

3. También puede especificar propiedades horizontales y verticales del medianil.

Escalado y rotación de objetos con el panel Transformar

Adobe Muse le permite aplicar la transformación 2D a objetos. Puede cambiar la posición, escalar y rotar objetos en los ejes X e Y.

La opción de alternar el 100% de anchura en el panel Transformar le permite configurar los objetos con una anchura del 100%. También puede definir objetos escalables que abarquen todo el ancho del navegador y se ajusten a la pantalla.

Para aplicar transformaciones a un objeto seleccionado, haga lo siguiente:

1. En Adobe Muse, seleccione Ventana > Transformar.

2. Con el objeto seleccionado, aplique las siguientes transformaciones:
   • Posición: introduzca los valores X e Y para colocar los objetos en la posición deseada de la página web.
   • Escala: introduzca valores de anchura y altura para el objeto. También puede optar por escalar el objeto con una anchura y altura uniformes haciendo clic en el botón .
   • Rotación (): introduzca el ángulo de rotación del objeto.
   • Anchura (100%) (): puede definir el objeto con una anchura del 100% y permitir el escalado y ajuste a la anchura del navegador.