Usar gráficos vetoriais no Adobe Muse

Saiba como importar gráficos SVG na Adobe Muse CC. Você pode inserir, copiar e 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 página de Perguntas frequentes sobre o 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 sites 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.

Processar arquivos SVG antes de inserir no Adobe Muse

Observação:

O procedimento a seguir é válido apenas se você utiliza o Adobe Muse 2015.1 ou versões anteriores.  

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:

    • Local da Imagem: Incorporada
    • Perfil SVG: SVG 1.1
    • Fontes - Tipo: converter em contornos
    • Propriedades de CSS: Atributos de apresentação
    • Casas decimais: 3
    • Codificação: Unicode (UTF-8)
    Especifique as Configurações de SVG no Adobe Illustrator e antes de o SVG na Adobe Muse CC.

  4. Clique em OK para salvar o arquivo.

Importar SVG

Se estiver usando a versão 2015.1 do Adobe Muse ou anterior, certifique-se de seguir as etapas descritas em Preparação de arquivos SVG para inserir no Adobe Muse antes de importar e inserir arquivos SVG 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.

Com o arquivo SVG inserido, você pode continuar a criar seu site. Você pode cortar a imagem SVG usando a ferramenta Corte demarcado e redimensionar a imagem SVG para atender às suas necessidades de design.

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.

  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.

    Os painéis Ativos listam o arquivo SVG colado.

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.

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

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.

Adicionar imagens SVG a apresentações

Nas versões 2015.1 do Adobe Muse e posteriores, é possível adicionar imagens SVG a apresentações. Primeiro, arraste e insira um widget de Miniaturas da biblioteca de widgets. Em seguida, selecione as imagens de vetor das suas bibliotecas da Creative Cloud e insira-as na apresentação.

Tutorial em vídeo

Danielle Beaumont

Logotipo da Adobe

Fazer logon em sua conta