Design

Adobe Parfait – extraia estilos CSS de arquivos PSD no navegador

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Adobe Parfait é uma ferramenta interessante disponível no site da Adobe. Com ela, você pode enviar arquivos no formato nativo do Photoshop (PSD) para obter, no próprio navegador através de uma interface prática, informações diversas como distância entre objetos, valores de cores, famílias e dados de fontes, largura, etc. Principalmente, pode copiar alguns desses dados em estilos CSS, o que é ótimo pra quem cria designs para a web.

Exemplo de uso: você criou um mockup de tema para WordPress ou um site comum, e quer os estilos de fontes e cores de fundo. Envie o arquivo para o Parfait, clique no elemento e na janela da direita terá informações. Clique em “Copy CSS” e copiará tudo sobre o elemento, pronto pra usar na folha de estilos do seu projeto.

Como usar

Comece fazendo login em sua conta da Adobe (Adobe ID), então envie um arquivo PSD. Ele será aberto na janela do Parfait. Como exemplo, peguei esse arquivo com um modelo de janela pop-up de achievements.

Adobe Parfait

A base do meu arquivo é um print screen do game Sonic rodando no computador, portanto uma imagem “chata”. No canto inferior direito, uma janela pop-up desenhada no Photoshop, com letras e mais elementos, como o troféu, o fundo  com transparência e os destaques em verde. Tudo isso pode ser “estilizado” pelo Parfait.

Adobe parfait elementos

É só clicar nos elementos individuais para obter informações. Se clicar na imagem do fundo, surgirá um balão com a largura e altura da imagem, além da posição X e Y (em pixels, em relação ao ponto zero horizontal e vertical, o canto superior esquerdo).

Adobe Parfait balão de informação

Assim, a imagem de fundo tem 654 x 539 pixels. Para copiar isso em CSS, clique em “Copy CSS” e terá:

width: 1366px;
height: 768px;

Esse foi um elemento simples, vamos ver com o objeto de texto. Clicando então no título da janelinha, “Results: Green Hill Act 1“, o balão terá as informações básicas, e mais um item ativo, o “Copy Text” (que como é óbvio, serve para copiar o texto).

Mas é na janela na barra lateral direita que está tudo mais completo:

Adobe Parfait sidebar

Na primeira guia, os estilos CSS completos: família da fonte, cor do texto, etc. Na guia Layers, você pode navegar pelas camadas do arquivo como faria no próprio Photoshop. Mais abaixo, outros dados captados como cores usadas e outros.

Também dá pra salvar elementos como imagens – é só clicar no ícone da seta para baixo e escolher o formato do arquivo.

Adobe Parfait download imagem

Mas ele não é baixado em seguida – vai para a guia de Assets. Olha ali o ícone do troféu já como asset depois que fiz a conversão. Se quiser baixar, é só clicar nele.

Adobe Parfait assets

Outro recurso é medir a distância entre elementos: clique no primeiro, segure Shift e clique no outro, e verá a distância exata entre eles.

Adobe Parfait distancia entre objetos
O balão preto mostra a distância entre os objetos selecionados: 0 horizontal e 33 pixels na vertical

A ferramenta funciona nos principais navegadores em suas versões mais atualizadas (não funciona no Internet Explorer 8 e inferior), e conta com fórum caso precise de ajuda ou queira discutir (em inglês). Você pode enviar até 2 GB de arquivos para o Adobe Parfait.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin