Como Converter PSD para PNG (Achatando Camadas Corretamente)
Por que converter PSD para PNG é mais complicado do que parece
Um arquivo PSD não é uma imagem única. É uma receita complexa: uma pilha de camadas, camadas de ajuste, máscaras, objetos inteligentes e modos de mesclagem que só se unem quando um aplicativo competente como o Photoshop os processa. Se você tentar converter um PSD para PNG sem entender isso, as coisas dão errado. Você pode acabar com um fundo branco chapado onde deveria haver transparência, ver textos faltando porque uma camada de fonte não foi renderizada, ou notar estranhas mudanças de cor porque uma camada de ajuste foi ignorada. PNG é um formato raster simples. Ele armazena uma grade de pixels, não uma lista de instruções. A conversão é, na verdade, um trabalho de renderização. Você está colapsando todas aquelas instruções do Photoshop em uma grade de pixels final e, em seguida, salvando essa grade como um PNG sem perdas. A qualidade da sua imagem final depende inteiramente de quão bem essa renderização lida com tudo o que está no arquivo de origem. As falhas mais comuns são fáceis de identificar quando você sabe o que procurar. A transparência muitas vezes é substituída por um preenchimento sólido branco ou preto. Efeitos de camada como sombras projetadas e brilhos podem desaparecer completamente. Objetos inteligentes podem ser renderizados em baixa resolução porque não foram rasterizados primeiro. E perfis de cor removidos podem fazer suas imagens parecerem desbotadas em telas calibradas. Conhecer essas armadilhas com antecedência economiza muita frustração e retrabalho.
Achatando camadas no Photoshop antes de exportar
Se você tem o Adobe Photoshop, achatar e exportar manualmente lhe dá controle total. A escolha crucial é entre 'Flatten Image' (Achatar Imagem) e 'Merge Visible' (Mesclar Visíveis). Eles parecem semelhantes, mas fazem coisas muito diferentes. 'Flatten Image' (Layer > Flatten Image) mescla todas as camadas — até mesmo as ocultas — e preenche todas as áreas transparentes com branco. Para um PNG que precisa de um fundo transparente, essa é quase sempre a escolha errada. Em vez disso, use 'Merge Visible' (Shift+Ctrl+Alt+E no Windows / Shift+Cmd+Option+E no Mac). Este atalho genial carimba uma cópia mesclada de todas as camadas visíveis em uma nova camada no topo da sua pilha, deixando suas camadas originais intocadas abaixo. Você pode então exportar apenas essa nova camada mesclada, com transparência e tudo. Para a exportação em si, não use o antigo comando 'Save As' (Salvar Como). Vá direto para File > Export > Export As (Arquivo > Exportar > Exportar Como). Nessa caixa de diálogo, defina o Formato como PNG e certifique-se de que a caixa 'Transparency' (Transparência) esteja marcada. Para uso em tela, 72 PPI é o padrão. Para qualquer coisa de alta resolução, como para impressão ou telas Retina, use 144 ou 300 PPI. Lembre-se, o valor de PPI é apenas metadados; uma tela de 2000×2000 pixels a 72 PPI exporta um PNG de 2000×2000 pixels. As dimensões físicas não mudam. Uma última dica profissional: se o seu PSD usa um perfil de cor criado para impressão, como CMYK ou Adobe RGB 1998, você deve convertê-lo para sRGB antes de exportar para a web. Vá para Edit > Convert to Profile (Editar > Converter para Perfil), selecione sRGB IEC61966-2.1 e use a renderização Relative Colorimetric (Colorimétrico Relativo) com a opção Black Point Compensation (Compensação de Ponto Preto) marcada. Pular esta etapa é o motivo número um pelo qual designs cuidadosamente elaborados parecem sem vida e desbotados em um navegador da web.
Convertendo PSD para PNG online com o CocoConvert
Nem todo mundo tem uma assinatura do Photoshop e, mesmo que tenha, converter uma pasta cheia de PSDs um por um é uma tarefa maçante. O [conversor de PSD para PNG](/convert/psd-to-png) do CocoConvert resolve isso ao lidar com a renderização em um servidor. Você apenas carrega o PSD e recebe de volta um PNG devidamente achatado, sem precisar de nenhum software de design da sua parte. O conversor mescla de forma inteligente todas as camadas visíveis, preservando o canal alfa. Isso significa que as áreas transparentes no seu arquivo do Photoshop permanecem transparentes no PNG final, sem aquele temido fundo branco. Ele lida de forma confiável com os tipos de camada comuns, incluindo imagens raster, camadas de texto (que são renderizadas na resolução nativa do documento) e camadas de ajuste básicas como Níveis, Curvas e Matiz/Saturação. Usá-lo é simples. Vá para /convert/psd-to-png, arraste seu PSD para a página ou clique em 'Escolher Arquivo' e aperte Converter. A ferramenta suporta arquivos de até 50 MB. O processamento geralmente leva de 5 a 15 segundos para um arquivo típico, após o qual você obtém um link para baixar o resultado em PNG sem perdas. Se você estiver lidando com um lote de arquivos, como um conjunto de ícones ou um kit de interface, pode carregar vários PSDs de uma vez. Cada um é processado individualmente, e você pode baixar os PNGs resultantes um por um ou pegá-los todos em um único arquivo ZIP. É uma enorme economia de tempo.
O que o CocoConvert não consegue fazer (Seja honesto sobre isso)
Ferramentas automatizadas têm limites, e é melhor conhecê-los de antemão do que descobri-los depois de entregar os arquivos para um cliente. Objetos Inteligentes (Smart Objects) são o principal ponto de atenção. Se o seu PSD contém Objetos Inteligentes incorporados ou vinculados, o CocoConvert os renderiza no tamanho que eles têm dentro do documento, não em sua própria resolução nativa. Por exemplo, um gráfico vetorial de 4000px colocado como um Objeto Inteligente em uma tela de 1000px será renderizado com 1000px. Você não perde qualidade em relação à tela, mas também não ganha o benefício da resolução interna mais alta do Objeto Inteligente. Para isso, você precisa rasterizar o Objeto Inteligente no Photoshop primeiro (Layer > Smart Objects > Rasterize). Camadas 3D e camadas de vídeo não são suportadas. Qualquer PSD que contenha esses tipos terá essas camadas específicas omitidas do PNG final, mostrando o que quer que estivesse em camadas abaixo delas. Alguns modos de mesclagem complexos podem ser complicados. Especificamente, Dissolve, Hard Mix e certos modos baseados em luminosidade podem ser renderizados de forma um pouco diferente do que no Photoshop. A diferença geralmente é pequena (alguns valores de cor por canal), mas para trabalhos que exigem perfeição de pixel, você deve sempre verificar o resultado comparando com uma exportação de referência do Photoshop. PSDs em CMYK são convertidos automaticamente para sRGB durante o processamento. Essa conversão usa um perfil ICC padrão, que é preciso para a maioria dos usos em web e tela. No entanto, não corresponderá perfeitamente a um fluxo de trabalho personalizado e calibrado para impressão. Se você está preparando arquivos para impressão offset, realize a conversão de cor você mesmo no Photoshop para ter o máximo de controle.
Escolhendo as configurações de PNG certas: Profundidade de bits e compressão
O PNG vem em duas versões principais, 8 bits e 24 bits (frequentemente chamadas de PNG-8 e PNG-24), e escolher a certa é importante. PNG-24 é a opção de alta qualidade. Ele armazena 16,7 milhões de cores mais um canal alfa completo de 8 bits para transparência suave. É disso que você precisa para fotografias, gradientes complexos e qualquer imagem com variações sutis de cor. O CocoConvert usa PNG-24 por padrão, que é a escolha correta para converter arquivos PSD ricos em detalhes. PNG-8 é a alternativa mais leve. Ele é limitado a uma paleta de 256 cores e produz arquivos muito menores — muitas vezes 60-70% menores. A desvantagem é a formação de faixas de cor visíveis em gradientes e uma transparência do tipo tudo ou nada (um pixel é totalmente transparente ou totalmente opaco, sem meio-termo). O PNG-8 só é adequado para gráficos simples, como ícones de cores chapadas com bordas duras. Para obter um PNG-8, você precisaria processar o PNG-24 resultante em uma ferramenta como o Photoshop ou usar um utilitário de linha de comando como o pngquant. A compressão PNG é sempre sem perdas (lossless), o que significa que nunca reduz a qualidade da imagem. A configuração do nível de compressão é puramente um equilíbrio entre o tamanho do arquivo e o tempo que leva para salvá-lo. O CocoConvert usa um nível de compressão equilibrado automaticamente. Se você é obcecado por desempenho e precisa do menor tamanho de arquivo possível para um projeto web, pode espremer mais 10-20% passando o resultado por um otimizador dedicado como o oxipng ou pngcrush. Essas ferramentas recomprimem os dados de forma mais agressiva sem tocar em um único pixel. Por fim, sempre se pergunte se PNG é mesmo o formato certo. Se você não precisa de transparência, um JPEG de alta qualidade será drasticamente menor. Para uso moderno na web com transparência, WebP e AVIF oferecem compressão superior. Mas para arquivos mestres, entregas de design e qualquer coisa que possa precisar ser editada novamente, o PNG-24 continua sendo o rei.
Lidando com a transparência corretamente: Uma análise mais detalhada
A transparência em PNG funciona através de um canal alfa — um mapa extra em escala de cinza de 8 bits onde cada pixel recebe um valor de transparência de 0 (completamente transparente) a 255 (completamente sólido). É isso que permite sombras projetadas com bordas suaves e textos com serrilhado suave que ficam bem em qualquer fundo. Um dos erros de conversão mais comuns está relacionado ao alfa pré-multiplicado. Em uma imagem pré-multiplicada, os valores de cor já foram mesclados com uma cor de fundo, o que pode levar a halos escuros ou claros ao redor das bordas se o aplicativo de visualização esperar um alfa direto. Qualquer um que já lutou com franjas pretas horríveis em seus ícones conhece essa dor. O CocoConvert gera PNGs com alfa direto, que é o padrão esperado pelos navegadores da web e por quase todos os softwares modernos. Para ter certeza de que sua transparência sobreviveu à conversão, teste o resultado. A maneira mais rápida é abrir o PNG em um navegador da web com um fundo colorido. Basta criar um arquivo HTML super simples com um corpo colorido e uma tag `<img>` apontando para o seu PNG. Se as partes transparentes mostrarem a cor de fundo e as bordas estiverem limpas, você está bem. Se você vir uma caixa branca ou halos escuros, o canal alfa foi mal tratado. Além disso, verifique a camada de Fundo (Background) do seu PSD — a camada padrão com um ícone de cadeado. Essa camada é sempre 100% opaca. Se você precisa de transparência no seu PNG final, deve excluir essa camada de Fundo ou convertê-la em uma camada regular (basta clicar duas vezes nela no painel de Camadas do Photoshop e pressionar OK). O CocoConvert é inteligente o suficiente para verificar isso; se um PSD tiver apenas uma camada de Fundo opaca, o PNG resultante não terá um canal alfa, que é o comportamento correto e mais eficiente.
Um fluxo de trabalho prático para resultados consistentes
Se você converte PSDs regularmente para um kit de interface, biblioteca de marca ou trabalho de cliente, um fluxo de trabalho consistente é seu melhor amigo. Ele economiza tempo e elimina erros bobos. Para arquivos únicos ou pequenos lotes com o Photoshop em mãos, siga o método manual. Use o carimbo de Mesclar Visíveis (Shift+Cmd+Option+E), verifique se o perfil de cor é sRGB e, em seguida, use Exportar Como com a transparência ativada. Leva menos de um minuto por arquivo e lhe dá o máximo de controle. Para grandes lotes ou quando você não tem o Photoshop, use o [conversor de PSD para PNG](/convert/psd-to-png) do CocoConvert. Ele faz o trabalho pesado. Antes de carregar, é uma boa ideia verificar rapidamente seus PSDs em busca de Objetos Inteligentes complexos ou camadas 3D. Se a precisão de pixel perfeita não for negociável, rasterize essas camadas primeiro. Após baixar o lote, verifique alguns dos PNGs resultantes em um navegador para confirmar que a transparência está correta. Para ativos de produção para a web, o tamanho do arquivo é tudo. Após a conversão, passe seus PNGs por um otimizador como o oxipng. Um comando simples como `oxipng -o 4 --strip safe *.png` oferece um ótimo equilíbrio entre compressão e velocidade, e remove com segurança os metadados desnecessários. Finalmente, faça um favor à sua equipe (e ao seu eu futuro): documente suas configurações. Ao entregar os arquivos, inclua uma nota de uma linha sobre o formato. Algo como: 'Todos os PNGs são sRGB, PNG-24, com transparência, otimizados com oxipng -o4'. Este passo simples evita aquela temida conversa de 'por que essas cores estão estranhas na minha tela?' que desperdiça o tempo de todo mundo.