Exportar SVG e PNG com fundo transparente no Gradiently

Para exportar SVG do Gradiently, abre um design no Studio, escolhe Exportar e seleciona SVG. O texto continua texto, nos seus tipos de letra incluídos no ficheiro; formas, ícones, gráficos e tabelas continuam vetores; o Mark e as fotografias entram como imagens lá dentro. Para um PNG transparente, escolhe PNG e ativa Fundo transparente: ficas só com os teus elementos sobre fundo limpo, com o Mark de fora. Ambos fazem parte do Pro.

SVG, PNG ou PNG transparente

A diferença geral entre os dois formatos está em SVG ou PNG. Este guia é sobre o que o Gradiently põe em cada ficheiro.

O que fica vetorial numa exportação SVG

Por isso um SVG é perfeito para um título que tem de ficar nítido num ecrã 4K, ou para um esquema que um programador vai construir numa página, e menos útil se esperas ampliar o fundo até ao tamanho de um outdoor. O Mark é desenhado como imagem no tamanho do próprio design; para um fundo maior, exporta antes um PNG num tamanho superior. Um Mark é um desenho vivo e não um conjunto fixo de formas vetoriais, e é por isso que não pode tornar-se um traçado.

Como exportar um SVG

1. 1

   Escolhe a página

   Um SVG contém uma página. Num carrossel ou numa apresentação, escolhe a página em Exportar; repete para as outras.

2. 2

   Escolhe SVG

   Abre Exportar e escolhe SVG, descrito como escalável, com o texto a continuar texto. A pré-visualização mostra o tamanho da página.

3. 3

   Descarrega

   Escolhe Descarregar SVG. O ficheiro fica onde o teu navegador guarda os descarregamentos.

4. 4

   Usa-o na web

   Coloca-o com uma etiqueta img para um gráfico fixo, ou incorpora-o no HTML quando quiseres estilizar o texto com CSS.

<!-- As an image: simplest, cached, text is not selectable -->
<img src="/images/summer-launch.svg" width="1200" height="630" alt="Summer launch: new colours from 1 June">

<!-- Inline: text is real, selectable and readable by search engines -->
<div class="hero-art">
  <!-- paste the contents of summer-launch.svg here -->
</div>

Um SVG também abre em ferramentas de design como o Figma e o Illustrator, que leem o texto e as formas vetoriais como camadas editáveis. Isso faz dele o ficheiro certo para entregar a quem precisa de adaptar um esquema a um formato que o Gradiently não cobre, como um letreiro impresso com o seu próprio modelo, ou um programador a construir uma secção de página a partir do teu design. Envia o PNG ao lado como referência visual, para verem exatamente como o Mark deve ficar.

Como exportar um PNG transparente

Escolhe PNG em Exportar e ativa Fundo transparente. Tudo o que colocaste, texto, logótipo, formas, fotografias, fica; o Mark fica de fora e o espaço à volta dos elementos é transparente. Escolhe um tamanho até 4K. Letras, um logótipo e um lema exportados assim podem ficar sobre uma fotografia de produto, um vídeo noutro editor ou um slide colorido.

• Confirma a tinta face ao destino. Texto claro exportado para um Mark escuro desaparece numa página branca. Passa para tinta escura antes de exportar se o destino for claro.
• Ajusta a página ao conteúdo. Um PNG transparente mantém o tamanho total da página. Reduz primeiro a página aos teus elementos se quiseres um ficheiro justo.
• Guarda as duas versões do logótipo. Exporta uma para fundos escuros e outra para claros, tal como um kit de marca guarda ambas. Logótipo sobre fundo em gradiente mostra porquê.
• Usa PNG, não JPEG. O JPEG não tem transparência; um design transparente guardado como JPEG fica com fundo sólido.

Colocar um PNG transparente na web

Um PNG transparente sobrepõe-se limpamente a qualquer fundo CSS, o que dá jeito quando o texto é fixo mas o fundo muda por secção ou por tema. Empilha-o com um gradiente por trás e a tua arte fica por cima.

.launch-banner {
  aspect-ratio: 1200 / 600;
  background:
    url("/images/launch-words.png") center / contain no-repeat,
    linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f0abfc 100%);
}

Para o caso inverso, um gradiente que se desvanece até à transparência em CSS, vê gradiente CSS transparente. E quando precisares de todos os formatos num só sítio, exportar designs cobre PNG, JPEG, PDF, vídeo e GIF em conjunto.