Exportações raster
Tamanhos de PNG de logo para sites, e-mail e entrega ao cliente
Escolha dimensões úteis de exportação com base em aplicações reais e torne a entrega ao cliente clara.
A resposta curta
Escolha as dimensões em pixels do PNG de um logo com base no tamanho de exibição pretendido e na densidade de pixels que deseja atender. Um logo exibido em 200 × 50 pixels CSS precisa de um PNG de 400 × 100 pixels para uma versão 2×. Mantenha as proporções, confira as regras de envio do destino e gere o arquivo a partir da arte mestre vetorial quando disponível.
Comece pela aplicação
Não existe um único tamanho de PNG que sirva para todos os sites, assinaturas de e-mail e apresentações de clientes. Uma entrega útil informa ao destinatário qual arquivo usar e em que tamanho exibi-lo.
Para um site, peça o tamanho CSS renderizado do logo nas larguras relevantes do layout. Um logo de cabeçalho de 200 pixels no computador pode ser menor no celular. Para e-mail, confira o modelo ou editor de assinatura em vez de copiar a configuração de um site. Para apresentações, combine uma aplicação útil e inspecione o slide exportado na resolução pretendida.
SVG pode ser uma boa opção para logos vetoriais quando o sistema de destino o aceita. PNG é útil quando você precisa de uma imagem de tamanho fixo com transparência. Nosso guia de formatos de logo explica as opções mais amplas.
Antes de exportar, registre quatro coisas:
- Onde o logo aparecerá e quais formatos de arquivo são aceitos
- Sua largura e altura de exibição, incluindo qualquer margem transparente
- Se é necessária uma versão raster de maior densidade
- O limite de tamanho do arquivo enviado e qualquer redimensionamento aplicado pela plataforma
Calcule as dimensões do PNG
Para uma aplicação raster, use esta regra de planejamento:
Largura de exportação = largura exibida × densidade de pixels desejada.
Aplique o mesmo multiplicador à altura. Uma exportação 2× dobra ambas as dimensões, resultando em quatro vezes mais pixels no total. Isso não significa que o logo deva aparecer duas vezes maior na página. A proporção de pixels do dispositivo do navegador descreve a relação entre os pixels físicos da tela e os pixels CSS.
Para o exemplo de site abaixo, uma versão 3× teria 600 × 150 pixels. Essa é uma exigência separada a combinar com o desenvolvedor, não um motivo para exportar todos os tamanhos possíveis.
Para sites responsivos, um desenvolvedor pode fornecer várias opções de imagem usando srcset. Isso permite que o navegador selecione um recurso apropriado. Os arquivos exportados e as configurações de exibição do site precisam estar alinhados.
Estes são cálculos exemplificados para um logo fictício Morrow Quay com área de proporção 4:1. São escolhas ilustrativas de projeto, não exigências de plataformas nem resultados reais de clientes.
| Destino de exemplo | Tamanho de exibição pretendido | PNG 1× | PNG 2× |
|---|---|---|---|
| Cabeçalho de site | 200 × 50 px | 200 × 50 px | 400 × 100 px |
| Assinatura de e-mail | 180 × 45 px | 180 × 45 px | 360 × 90 px |
| Aplicação em slide do cliente | 480 × 120 px | 480 × 120 px | 960 × 240 px |
1× exportar
Arquivo PNG: 200 × 50 px
Exibição: 200 × 50 CSS px
2× exportar
Arquivo PNG: 400 × 100 px
Exibição: 200 × 50 CSS px
3× exportar
Arquivo PNG: 600 × 150 px
Exibição: 200 × 50 CSS px
Leitura complementar: MDN: devicePixelRatio · MDN: imagens responsivas
Confira as dimensões do e-mail no editor real
Um PNG de 360 × 90 é um arquivo inicial adequado para o exemplo de assinatura de 180 × 45 apenas se a configuração do e-mail limitar a imagem ao tamanho de exibição pretendido. Insira-o, confira as configurações de tamanho e envie um e-mail de teste. Revise o resultado nos clientes de e-mail usados pelo seu público, incluindo dispositivos móveis quando relevante.
A largura total do modelo de e-mail é diferente da largura do logo. O Mailchimp, por exemplo, documenta recomendações de imagem diferentes para seus construtores novo e legado e recomenda imagens de maior resolução com dimensões limitadas para telas de alta densidade. Também recomenda imagens RGB e PNG quando é necessária transparência. São orientações do Mailchimp, não uma especificação universal de assinatura.
Use uma versão do logo adequada ao fundo. Um logotipo branco transparente pode parecer vazio em uma mensagem branca. Um logotipo escuro pode ficar difícil de ver se o cliente de e-mail do destinatário mudar o fundo. Confira o resultado real antes de considerar o arquivo pronto.
Leitura complementar: Mailchimp: recomendações de imagem
Conte os pixels do logo dentro da área da imagem
As dimensões em pixels incluem o espaço vazio. Suponha que um PNG de 400 × 100 contenha um logo visível de 320 × 80, centralizado com 40 pixels de margem à esquerda e à direita e 10 acima e abaixo. Ao exibir a imagem inteira em 200 × 50, o logo visível ocupa apenas 160 × 40.
Isso pode ser uma área de proteção intencional. Se for uma margem acidental, corrija o limite de exportação na origem. Preserve qualquer regra aprovada de área de proteção e informe ao desenvolvedor se esse espaço está incorporado ao arquivo ou deve ser adicionado pelo layout. Ampliar a imagem inteira para compensar altera novamente o tamanho aparente.
Exporte os tamanhos no Figma ou Illustrator
O Figma oferece exportações raster nativas personalizadas. Selecione o logo ou quadro preparado, adicione uma exportação PNG e insira uma largura como 400w no campo Scale. Você também pode inserir uma altura fixa com h ou usar um multiplicador como 2x. Um multiplicador segue as dimensões do objeto selecionado, então confira os pixels resultantes.
Os fluxos Export for Screens e Asset Export do Illustrator também aceitam várias escalas e formatos. Prepare o arquivo ou a prancheta correta, escolha PNG e as escalas necessárias e verifique as dimensões dos arquivos baixados.
Para uma entrega completa no Figma, siga nosso fluxo de exportação de logos.
Leitura complementar: Figma: formatos e configurações de exportação · Adobe: reunir arquivos e exportar em lotes
Torne a entrega compreensível
Adicione uma nota breve: “O PNG do site é um arquivo 2× destinado à exibição em 200 × 50 pixels. Preserve suas proporções.” Guarde a arte mestre vetorial aprovada para que tamanhos futuros possam ser gerados diretamente.
Para trabalhos repetidos de preparação de pacotes, o logopack.app Pro acrescenta tamanhos personalizados de exportação PNG e JPG. Comece com um SVG aprovado, escolha os tamanhos para os destinos e inspecione os arquivos baixados. Exportações nativas do editor continuam sendo uma opção válida; o fluxo de preparação de pacotes é útil quando você quer esses arquivos personalizados junto com o restante da entrega.
Antes da entrega, abra os arquivos reais, confira suas dimensões em pixels e transparência e coloque o arquivo prioritário no destino real. Se um arquivo de tamanho correto ainda parecer pouco nítido, use nosso guia de solução de problemas de PNG borrado.
Nomeie os arquivos com as informações de que o cliente precisa. Neste exemplo:
- MorrowQuay_Primary_Web_400x100.png
- MorrowQuay_Primary_Email_360x90.png
- MorrowQuay_White_Slides_960x240.png
Leitura complementar: Prepare um pacote de logos com logopack.app
COLOQUE EM PRÁTICA
Pronto para preparar seu pacote?
O logopack.app transforma arte SVG existente em um pacote de logos organizado. Visualize seus arquivos, escolha as opções de exportação disponíveis e confira o resultado antes da entrega. Exportar seus próprios arquivos de logo ou ícone exige Pro.
Comece com o gerador de pacotes de logos, explore o ZIP de exemplo, ou compare os planos atuais.
Abrir gerador