En el panel Herramientas, haga clic en Herramienta de marco de rectángulo o en Herramienta de marco de elipse.
Descubra cómo organizar, gestionar y transformar los distintos objetos de Adobe Muse. Siga leyendo sobre cómo optimizar imágenes para Adobe Muse.
Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte las preguntas frecuentes sobre el fin de servicio de 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.
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.
En el panel Herramientas, haga clic en Herramienta de marco de rectángulo o en Herramienta de marco de elipse.
Haga clic en la herramienta de marco de imagen y arrastre para colocar el marco de imagen en el proyecto.
Puede seguir haciendo clic e insertando marcos de imagen en el proyecto. También puede cambiar el tamaño y mover los marcos de imagen según las necesidades del diseño.
Puede rellenar el marco de algún color o colocar una imagen dentro del marco. Para colocar una imagen, arrastre y suelte una imagen dentro del marco. El tamaño de la imagen cambiará para adaptarse al marco.
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:
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.
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.
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.
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.
En el panel Herramientas, seleccione la herramienta Rectángulo o Elipse.
Arrastre para colocar la forma rectangular o elíptica en el proyecto de Adobe Muse.
Puede rellenar las formas con gráficos, texto o color.
Para definir las propiedades de encaje del objeto, seleccione el rectángulo o la elipse y haga clic en Objeto > Encaje.
Puede seleccionar una de las siguientes opciones de encaje:
Elija Archivo > Colocar botón de Photoshop. En el cuadro de diálogo Opciones de importación de Photoshop, busque el archivo PSD. Haga clic en Seleccionar (Mac) o Abrir (Windows) para elegir el archivo.
Aparece el cuadro de diálogo Opciones de importación de Photoshop. Dedique unos minutos a investigar cómo se ha aplicado la configuración. Puede usar los menús para especificar qué capa del archivo de Photoshop se mostrará como el Estado normal del botón (la forma en la que el botón aparece cuando la página se carga por primera vez), el Estado de rollover (la forma en la que el botón aparece cuando los visitantes pasan el cursor por encima de él) y el Estado de ratón pulsado (la forma en la que el botón aparece cuando los visitantes hacen clic en él). Los tres menús de estado muestran los nombres de las capas de Photoshop y las imágenes en miniatura muestran visualmente cómo aparecerá cada capa seleccionada.
En este ejemplo, las capas de Photoshop ya se han ordenado correctamente para mostrar los estados de botón. No es necesario cambiar la configuración del menú. Haga clic en OK para aceptar los estados a medida que se organizan de forma predeterminada.
Haga clic una vez en el área superior derecha del encabezado de la página maestra A para colocar el archivo de Photoshop con su tamaño original.
Haga clic en el vínculo Vista previa para utilizar el emulador de interpretación basado en Webkit. Revise la visualización de página maestra A. La primera vez que se ve la página, aparece el Estado normal del botón. Si se pasa el cursor sobre el botón, cambia ligeramente la apariencia (el color de la gota marrón se hace más claro), y si se hace clic en el botón, el texto blanco se vuelve marrón claro y permanece así mientras se mantiene pulsado el botón del ratón.
Haga clic en Diseño para volver a editar la página maestra A en la vista Diseño.
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.
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:
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.
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:
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.
Katie's Café
Noe Valley
123 Elizabeth Street
LUN-VIE de 6 a 22
SÁB-DOM de 7 a 22
Katie's Café
Laurel Heights
800 Spruce Street
LUN-VIE de 5 a 12
SÁB-DOM de 9 a 1
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.
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.
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.
En la vista Plan, haga doble clic en la miniatura de MasterFlash para abrirla y editarla en la vista Diseño. Tenga en cuenta que, al haber duplicado anteriormente la página maestra A, la imagen de logotipo estático aún está allí. Resulta útil utilizar la imagen estática para que coincida con la colocación del rectángulo de animación, pero no olvide eliminar la imagen de logotipo estático colocada después de incrustar el elemento multimedia enriquecido.
Seleccione Archivo > Colocar. En el cuadro de diálogo Importar, navegue por la carpeta Kevins_Koffee_Kart y seleccione el archivo denominado logo.swf.
Coloque el archivo SWF en la esquina superior izquierda de forma que coincida con la ubicación del archivo de imagen del logotipo existente.
Cuando haya alineado la nueva ventana de SWF que acaba de colocar con el anterior logotipo estático, seleccione el logotipo estático y pulse la tecla Supr para eliminarlo.
Para revisar la forma en que aparece todo el sitio con los nuevos cambios realizados en la página principal, seleccione Archivo > Vista previa de sitio en navegador para probar la visualización del logotipo en diferentes páginas. Sin publicar el sitio, puede trabajar localmente en el equipo y después ver la vista previa del sitio en un navegador para hacer clic por las páginas en los elementos de navegación del sitio. Tenga en cuenta que la animación (archivo SWF) aparece una vez y luego se detiene en la página principal. Si hace clic en otras páginas, solo aparece el logotipo estático.
si elige Archivo > Vista previa de sitio en navegador, la nueva ventana del navegador se cargará más rápido para mostrar la página principal, pero solo verá la vista previa de la página activa (página principal). Elija esta opción si desea comprobar una página del sitio, en lugar de todo el sitio web.
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.
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:
Inicia sesión en tu cuenta