Exportar SVG e PNG transparente no Gradiently

Para exportar SVG do Gradiently, abra um design no Studio, escolha Exportar e selecione SVG. As palavras continuam palavras, nas próprias fontes embutidas no arquivo; formas, ícones, gráficos e tabelas continuam vetores; o Mark e as fotos entram como imagens dentro dele. Para um PNG transparente, escolha PNG e ative Fundo transparente: você recebe só os seus elementos sobre fundo transparente, sem o Mark. Os dois fazem parte do Pro.

SVG, PNG ou PNG transparente

O equilíbrio geral entre os dois formatos está em SVG versus PNG. Este guia trata do que o Gradiently coloca em cada arquivo.

O que continua vetor numa exportação SVG

Por isso o SVG é perfeito para um título que precisa continuar nítido numa tela 4K, ou para um layout que um desenvolvedor vai construir numa página, e menos útil se você pretende ampliar o fundo até o tamanho de um outdoor. O Mark é renderizado como imagem no tamanho do próprio design; para um fundo maior, exporte um PNG num tamanho maior. Um Mark é uma renderização viva, não um conjunto fixo de formas vetoriais, e por isso não pode virar um traçado.

Como exportar um SVG

1. 1

   Escolha a página

   Um SVG guarda uma página. Num carrossel ou numa apresentação, escolha a página em Exportar e repita para as outras.

2. 2

   Escolha SVG

   Abra Exportar e escolha SVG, descrito como escalável, com texto que continua texto. A prévia mostra o tamanho da página.

3. 3

   Baixe

   Escolha Baixar SVG. O arquivo é salvo onde o seu navegador salva os downloads.

4. 4

   Use na web

   Coloque com uma tag img para um gráfico fixo ou inclua direto no HTML quando quiser 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 o torna o arquivo certo para entregar a quem precisa adaptar um layout para um formato que o Gradiently não cobre, como uma placa impressa com template próprio, ou a um desenvolvedor que monta uma seção de página a partir do seu design. Envie o PNG junto, como referência visual, para que a pessoa veja exatamente como o Mark deve ficar.

Como exportar um PNG transparente

Escolha PNG em Exportar e ative Fundo transparente. Tudo o que você colocou, palavras, logo, formas, fotos, permanece; o Mark fica de fora, e o espaço em volta dos seus elementos fica transparente. Escolha um tamanho de até 4K. Letras, um logo e um slogan exportados assim podem ficar sobre uma foto de produto, um vídeo em outro editor ou um slide colorido.

• Confira a tinta no lugar onde ela vai cair. Palavras claras exportadas para um Mark escuro somem numa página branca. Troque para tinta escura antes de exportar se o destino for claro.
• Recorte a página no conteúdo. Um PNG transparente mantém o tamanho total da página. Reduza antes a página para perto dos seus elementos se quiser um arquivo justo.
• Guarde as duas versões do logo. Exporte uma para fundos escuros e outra para claros, como um kit de marca guarda as duas. Logo sobre fundo em gradiente mostra por quê.
• Use PNG, não JPEG. O JPEG não tem transparência; um design transparente salvo como JPEG ganha um fundo sólido.

Como colocar um PNG transparente na web

Um PNG transparente se sobrepõe sem problema a qualquer fundo em CSS, o que é útil quando as palavras são fixas, mas o pano de fundo muda por seção ou tema. Empilhe com um gradiente atrás e sua 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 dissolve em transparência no CSS, veja gradiente transparente em CSS. E quando você precisar de todos os formatos num só lugar, exportar designs cobre PNG, JPEG, PDF, vídeo e GIF juntos.