Converter PSD para CSS

Um mockup do Photoshop deve ser transformado em uma interface de navegador quando um designer entrega um arquivo .psd com camadas a um desenvolvedor web. O resultado não é outro formato de imagem: é HTML estilizado com uma folha de estilos .css, além de recursos de imagem ou vetoriais exportados quando necessário.

O que é o formato PSD

PSD é o formato nativo de imagem rasterizada com camadas do Adobe Photoshop. Ele pode armazenar camadas de pixels, texto editável, formas vetoriais, máscaras, camadas de ajuste, guias, efeitos de camada, objetos inteligentes e outros dados de edição em um único documento.

Fotógrafos, ilustradores, designers gráficos, designers de UI e agências web usam arquivos PSD para composições editáveis, mockups de interfaces, artes publicitárias e projetos para impressão. Um PSD pode mostrar uma página completa ou uma tela de aplicativo, mas não define a estrutura HTML, o significado semântico, a interação, a acessibilidade nem o comportamento responsivo.

O que é o formato CSS

CSS é um formato de folha de estilos em texto simples que controla a apresentação e o layout de HTML e SVG. Suas propriedades incluem color, font-family, font-size, margin, padding, display, grid-template-columns, bordas, sombras, transformações e regras de mídia responsivas.

CSS torna o design editável em um site ou aplicativo, permite que textos e layouts se adaptem a diferentes telas e separa a apresentação do conteúdo HTML. Uma folha de estilos não pode armazenar camadas do Photoshop, histórico de ajustes, texto editável do PSD nem dados arbitrários de pixels.

Como converter PSD em CSS

Não existe uma conversão completa e sem perdas de PSD para CSS, pois PSD descreve uma composição visual editável, enquanto CSS descreve regras aplicadas a elementos do documento. A conversão prática consiste na entrega do design e na implementação front-end.

1. Abra o arquivo no Adobe Photoshop e organize as camadas em grupos significativos, como cabeçalho, navegação, cartão e rodapé. Renomeie as camadas para que elas identifiquem os elementos de interface correspondentes.
2. Inspecione dimensões, espaçamento, cores, tipografia, opacidade e efeitos usando as guias, réguas, painel Character e amostrador de cores do Photoshop. Use um sistema consistente de medidas baseado em pixels ou rem.
3. Para camadas compatíveis de texto, forma e imagem, use o comando Copy CSS do menu de contexto da camada. Cole as declarações em um arquivo como styles.css e remova os seletores e as propriedades que não se ajustarem à marcação real.
4. Crie elementos HTML semânticos que representem o design e conecte-os à folha de estilos com classes ou outros seletores adequados. Substitua as coordenadas da tela do Photoshop por Flexbox, CSS Grid, fluxo normal ou outro modelo de layout.
5. Exporte os recursos que o CSS não pode reproduzir diretamente. Use File → Export → Export As para fotografias como .jpg, gráficos rasterizados que dependem de transparência como .png e artes vetoriais simples adequadas como .svg. Faça referência a eles com <img> ou background-image, conforme apropriado.
6. Teste a implementação nos navegadores nos tamanhos de viewport necessários. Compare a tipografia, a quebra de linhas, o espaçamento, o recorte das imagens e os efeitos visuais com o PSD e, em seguida, adicione regras responsivas em vez de forçar uma única tela fixa.

O Adobe Photoshop é a opção para desktop mais direta, pois lê dados PSD nativos e oferece exportação de recursos e cópia de CSS. O Photopea é uma alternativa confiável baseada em navegador para trabalhos ocasionais: ele abre arquivos PSD, expõe propriedades das camadas e pode copiar CSS para camadas compatíveis. Ainda assim, ele exige HTML manual, trabalho de layout, exportação de recursos e testes responsivos.

Ferramentas de inspeção e entrega de design, como o Avocode, podem exibir medidas das camadas, cores, tipografia e trechos de CSS, mas os recursos de importação e exportação de PSD variam conforme o produto e a assinatura. Verifique o suporte atual a PSD antes de depender de uma delas. Conversores online genéricos de “PSD para CSS” geralmente geram apenas declarações básicas ou trechos com posicionamento fixo; não envie arquivos de design confidenciais para um serviço desconhecido.

Limites de qualidade e compatibilidade

O CSS copiado do Photoshop frequentemente representa uma tela fixa com posições absolutas. Ele pode corresponder a uma captura de tela, mas falhar quando o viewport diminuir, o texto mudar de tamanho, o conteúdo aumentar ou os usuários ampliarem o tamanho da fonte. Reconstrua o layout com HTML semântico, Flexbox ou Grid, unidades relativas e media queries.

Estilos de camada, modos de mesclagem, máscaras de recorte, filtros inteligentes, camadas de ajuste e sombras complexas podem não ter um equivalente direto em CSS. Quando for viável, faça uma aproximação usando gradientes, sombras, filtros, pseudo-elementos e propriedades de mesclagem; caso contrário, exporte o resultado afetado como um recurso rasterizado ou vetorial.

A tipografia do navegador depende de uma fonte web-safe disponível, de uma webfont licenciada ou de @font-face. Uma fonte ausente ou substituída altera a quebra de linhas e pode modificar todo o layout. O CSS também não pode preservar o histórico de camadas editável do Photoshop; portanto, mantenha o .psd original como arquivo de origem.