Saiba como inserir, copiar ou importar gráficos SVG no Adobe Muse.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

O Adobe Muse permite que você use os gráficos vetoriais, criados com ferramentas tais como o Adobe Illustrator, no design do site. Atualmente, o Adobe Muse oferece suporte nativo ao formato Scalable Vector Graphics (SVG). Você pode usar o formato SVG para criar logotipos, ícones, preenchimentos de fundo, preenchimento do navegador, entre outros, e inserir esses arquivos diretamente na tela da página da Web no Adobe Muse.

Os gráficos salvos como formato SVG são claros e independentes de resolução. Portanto, esses gráficos podem ser escalados para qualquer dimensão sem afetar o tempo de carregamento da página e a aparência do seu site. Os arquivos SVG são suportados também em telas HiDPI. 

Desde que são independentes de resolução, o Adobe Muse trata arquivos SVG da mesma maneira em websites padrão e de Alta resolução. Os arquivos SVG não diminuem 50% do tamanho quando inseridos na tela da página da Web na Visualização de design.

Configurações de SVG no Adobe Illustrator

Para arquivos SVG criados com o Adobe Illustrator, faça o seguinte:

  1. No Adobe Illustrator, depois que você criou o gráfico, selecione Arquivo > Salvar como.

  2. Selecione SVG na lista suspensa Salvar como tipo. Navegue até o local onde deseja salvar o arquivo, e clique em Salvar.

  3. Na caixa de diálogo Opções de SVG, defina os seguintes atributos:

    • Localização da Imagem: Incorporada
    • Perfil SVG: SVG 1.1
    • Fontes - tipo: Converter em contornos
    • Propriedades CSS: Atributos de apresentação
    • Locais de decimais: 3
    • Codificação: Unicode (UTF-8)
    SVGOptions
  4. Clique em OK para salvar o arquivo.

Importação de SVG

Antes que você importe e coloque um arquivo SVG no Adobe Muse, assegure-se de que você executou as etapas descritas em Preparar os arquivos SVG para colocação no Adobe Muse.

  1. No Adobe Muse, selecione Arquivo > Local (Ctrl + D no Windows e Cmd + D no MAC).

  2. Navegue para o local do arquivo SVG, selecione-o, e clique em Abrir.

  3. No Adobe Muse, uma visualização em miniatura do SVG será deslocada em conjunto com o ponteiro. Clique em um local apropriado na tela da página da Web para colocar o arquivo SVG. O painel Ativos lista o arquivo que você acabou de inserir.

    Splash

Com o arquivo SVG inserido, você pode continuar a criar seu site. Você não pode cortar a imagem SVG usando a ferramenta corte demarcado. Contudo, você pode redimensioná-la para atender suas necessidades de design.

Você pode vincular um arquivo SVG importado a uma imagem rasterizada. Também é possível vincular imagens importadas novamente a arquivos SVG.

Copiar SVG do Adobe Illustrator

O Adobe Muse permite copiar o conteúdo do Adobe Illustrator na tela da página da web. A cópia de conteúdo é útil quando você não deseja salvar e usar o conteúdo de um trabalho artístico do no design do site.

Quando você copia partes de um trabalho artístico, o Illustrator converte a seleção para SVG e a coloca na área de transferência do Adobe Muse para uso. O Adobe Muse trata o conteúdo copiado como SVG incorporado, e você pode redimensionar o gráfico de acordo com as necessidades de design.

  1. No Adobe Illustrator, siga um destes procedimentos:

    • Grupo Isolado ou caminho selecionado: Clique com o botão direito no grupo ou caminho que deseja copiar e selecionar o grupo isolado/caminho selecionado no menu contextual.
    • Selecione manualmente o grupo ou o caminho: Selecione um grupo ou um caminho que deseja copiar.
    IsolatedGroup-1
  2. Use os comandos de Ctrl + C (Windows) ou Cmd + C (MAC) para copiar o grupo ou o caminho selecionado.

  3. No Adobe Muse, use comandos de Ctrl + V ou Cmd +V para colar o grupo ou o caminho selecionado na tela da página da Web na Visualização de design.

    PasteIsolatedGroup

    Os painéis Ativos listam o arquivo SVG colado.

    AssetsPanelWithPastedSVG

Importar SVG para preenchimentos de plano de fundo e navegador

  1. Dependendo de qual você deseja adicionar, selecione o preenchimento de fundo ou o preenchimento do navegador respectivamente. Para mais informações, consulte Opções de preenchimento do navegador e de preenchimento no Adobe Muse.

  2. Clique em Adicionar imagem. Navegue até o local do arquivo SVG, selecione-o e clique em Abrir.

    BrowserFill
  3. Defina os atributos de encaixe e posição apropriadamente.

    BrowserFillWithFittingAndPosition

Observação:

Quando os arquivos SVG forem adicionados ao preenchimento do plano de fundo ou do navegador, a imagem será rasterizada na visualização de design quando o atributo adequado for definido como Redimensionar para encaixe Redimensionar para preenchimento. No entanto, quando visualizado no Adobe Muse ou em um navegador, a imagem é renderizada como esperado.

Tutorial em vídeo

Tutorial em vídeo
Danielle Beaumont

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online