Aprenda a colocar, copiar o importar gráficos SVG en Adobe Muse.

Nota:

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 Página de fin de servicio de Adobe Muse.

Con Adobe Muse, puede utilizar gráficos vectoriales, creados con herramientas como Adobe Illustrator, en el diseño del sitio. Actualmente, Adobe Muse admite de forma nativa el formato de gráficos vectoriales escalables (SVG). Puede utilizar el formato SVG para crear logotipos, iconos, rellenos de fondo, rellenos del navegador y mucho más, y colocarlos directamente en el lienzo de la página web de Adobe Muse.

Los gráficos guardados con formato SVG son ligeros y no dependen de la resolución. Por lo tanto, se pueden cambiar las dimensiones de dichos gráficos sin que ello afecte al tiempo de carga ni a la apariencia del sitio. Los archivos SVG también son compatibles con las pantallas HiDPI. 

Dado que no dependen de la resolución, Adobe Muse tratará los archivos SVG de la misma forma en los sitios web estándar y en los de alta resolución. La resolución de los archivos SVG no se reduce al 50 % de su tamaño cuando estos se colocan en el lienzo de una página web en la vista Diseño.

Configuración de SVG en Adobe Illustrator

Haga lo siguiente con los archivos SVG creados en Adobe Illustrator:

  1. En Adobe Illustrator, tras haber diseñado el gráfico, seleccione Archivo > Guardar como.

  2. Seleccione SVG en el menú desplegable Tipo de Guardar como. Haga clic en Examinar para buscar la ubicación en la que desea guardar el archivo y haga clic en Guardar.

  3. En el cuadro de diálogo de opciones de SVG, establezca los siguientes atributos:

    • Ubicación de la imagen: Incrustar
    • Perfil SVG: SVG 1.1
    • Fuentes: Tipo: Convertir en contorno
    • Propiedades CSS: Atributos de presentación
    • Decimales: 3
    • Codificación: Unicode (UTF-8)
    SVGOptions
  4. Haga clic en OK para guardarlo.

Importación de SVG

Antes de importar y colocar un archivo SVG en Adobe Muse, asegúrese de haber seguido los pasos descritos en Preparación de archivos SVG para colocación en Adobe Muse.

  1. En Adobe Muse, seleccione Archivo > Colocar (Ctrl + D en Windows y Comando + D en Mac).

  2. Busque la ubicación del archivo SVG, selecciónelo y haga clic en Abrir.

  3. En Adobe Muse, aparece una previsualización en miniatura del SVG que se desplaza junto con el puntero. Haga clic en la ubicación adecuada del lienzo de la página web para colocar el archivo SVG. En el panel Activos se mostrará el archivo que ha colocado.

    Splash

Después de colocar el archivo SVG puede continuar con el diseño del sitio. No se puede recortar la imagen SVG con la herramienta Recortar. Sin embargo, puede cambiar su tamaño para que se adapte a sus necesidades de diseño.

Puede vincular un archivo SVG importado a una imagen rasterizada. También puede volver a vincular imágenes importadas a archivos SVG.

Copia de SVG de Adobe Illustrator

Adobe Muse le permite copiar contenido de Adobe Illustrator en un lienzo de página web. Copiar contenido es especialmente útil si no desea guardar y utilizar en el diseño del sitio todo el contenido de una ilustración.

Al copiar partes de una ilustración, Illustrator convierte la selección a SVG y la coloca en el portapapeles para utilizarla en Adobe Muse. Adobe Muse trata el contenido copiado como SVG incrustado, permitiendo cambiar el tamaño del gráfico para adaptarlo a las exigencias del diseño.

  1. En Adobe Illustrator, realice una de las acciones siguientes:

    • Aislamiento del grupo o trazado seleccionado: haga clic con el botón derecho en el grupo o trazado que desee copiar y seleccione Aislar grupo/trazado seleccionado del menú contextual.
    • Selección manual del grupo o trazado: seleccione el grupo o trazado que desee copiar.
    IsolatedGroup-1
  2. Utilice los comandos Ctrl + C (Windows) o Comando + C (Mac) para copiar el grupo o trazado seleccionado.

  3. En Adobe Muse, utilice los comandos Ctrl + V o Comando + V para pegar el grupo o trazado seleccionado en el lienzo de una página web, en la vista Diseño.

    PasteIsolatedGroup

    El panel Activos muestra el archivo SVG pegado.

    AssetsPanelWithPastedSVG

Importación de SVG para rellenos de fondo y del navegador

  1. Dependiendo de si desea añadir relleno de fondo o relleno del navegador, seleccione Relleno o Relleno del navegador, respectivamente. Para obtener más información, consulte Uso de las opciones Relleno y Relleno del navegador.

  2. Haga clic en Añadir imagen. Busque la ubicación del archivo SVG, selecciónelo y haga clic en Abrir.

    BrowserFill
  3. Defina como corresponda los atributos Encaje y Posición.

    BrowserFillWithFittingAndPosition

Nota:

al añadir los archivos SVG al relleno de fondo o del navegador, la imagen aparece rasterizada en la vista Diseño cuando el atributo Encaje está definido como Escalar para encajar o Escalar para rellenar. Sin embargo, cuando se previsualiza desde Adobe Muse o un navegador, la imagen se procesará como se espera.

Tutorial de vídeo

Tutorial de vídeo
Danielle Beaumont

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea