Descubra cómo importar gráficos SVG en Adobe Muse CC. Puede colocar, copiar e 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.

Procesamiento de archivos SVG antes de colocarlos en Adobe Muse

Nota:

el siguiente procedimiento solo es válido si utiliza Adobe Muse 2015.1 o versiones anteriores.  

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

  1. En Adobe Illustrator, después de diseñar 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)
    Especifique la configuración de SVG en Adobe Illustrator antes de importar SVG en Adobe Muse CC.
  4. Haga clic en OK para guardarlo.

Importación de SVG

Si utiliza la versión 2015.1 de Adobe Muse o una anterior, asegúrese de haber seguido los pasos descritos en Preparación de archivos SVG para colocación en Adobe Muse antes de importar y colocar un archivo SVG en Adobe Muse.  

  1. En Adobe Muse, seleccione Archivo > Colocar (Ctrl + D en Windows y Cmd + 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.

    Panel Activos

Después de colocar el archivo SVG puede continuar con el diseño del sitio. Puede recortar la imagen SVG con la herramienta Recortar, y cambiar el tamaño de la imagen SVG para adaptarlo según las necesidades de su diseño.

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.
    Selección de un grupo o trazado
  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.

    Lienzo de la página web

    El panel Activos muestra el archivo SVG pegado.

    Panel Activos

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.

    Haga clic en Añadir imagen
  3. Defina como corresponda los atributos Encaje y Posición.

    Defina como corresponda los atributos Encaje y Posición

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.

Adición de imágenes SVG a las proyecciones de diapositivas

En Adobe Muse 2015.1 y versiones posteriores puede agregar imágenes SVG a una presentación de diapositivas. Primero, arrastre y coloque un widget de miniaturas de la biblioteca de widgets. A continuación, seleccione las imágenes vectoriales de las bibliotecas de Creative Cloud y colóquelas en la proyección de diapositivas.

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