A Creative Cloud Extract é um novo recurso gratuito da Creative Cloud Assets que ajuda a explorar um PSD diretamente em seu navegador, incluindo camadas e composições de camada. Ela beneficia especialmente Web designers e desenvolvedores da Web que podem compartilhar PSDs, desbloquear informações de design e baixar ativos prontos para produção. Com o serviço Extract você realiza as seguintes operações em um arquivo PSD no navegador:

  • Copia texto e CSS
  • Extrai informações de cor, gradiente e fonte
  • Mede a distância entre dois elementos
  • Salva ativos de imagem otimizada para a produção

Se você é Web designer ou desenvolvedor que trabalha com arquivos PSD, a Creative Cloud Extract simplifica radicalmente o processo de design até o código, reduzindo o número de etapas tediosas e minimizando a troca de comunicações desnecessárias.

Observação:

o Extract é um serviço somente leitura; você não pode usá-lo para editar arquivos PSD.

Informações do estilo Extract

  1. Inscreva-se no site da Creative Cloud.
  2. Vá para a seção Ativos da sua conta da Creative Cloud.
  3. Faça upload de um arquivo PSD arrastando-o e soltando-o em Arquivos ou usando a opção Selecionar arquivo. Você também pode navegar até um arquivo PSD cujo upload foi feito anteriormente.
  4. Clique na miniatura do arquivo PSD para abri-lo na exibição do Extract.
O arquivo abre na exibição do Extract

Nessa exibição do Extract, é possível explorar um design PSD inteiro no navegador. Você conseguirá explorar a hierarquia de camadas, exibir diferentes composições de camada e extrair partes do PSD como novos arquivos de imagem. Se você clicar em qualquer elemento na visualização do PSD, isso selecionará uma camada e oferecerá informações sobre a camada. Assim que uma seleção for feita, você conseguirá:

Exibição e cópia das coordenadas e dimensões do elemento

Quando você clicar em um único elemento no arquivo PSD, uma caixa de diálogo pop-up azul é exibida. Essa caixa de diálogo exibe as dimensões de largura e altura do elemento, bem como as posições x e y da camada do elemento no design.

Exibição das coordenadas e dimensões de um elemento de design (px)
Exibição das coordenadas e dimensões de um elemento de design exibido como porcentagem (%)

Observação:

Clique em qualquer valor, como W, H, X ou Y para copiá-lo para a área de transferência.

As medidas no Extract podem ser exibidas em pixel ou porcentagem. Se um elemento estiver selecionado, as medidas em porcentagem da largura e altura serão proporcionais à largura e altura do design do PSD. Se dois elementos forem selecionados, em que um é totalmente incluído por outro, a largura e a altura do elemento interno serão proporcionais às dimensões do elemento externo.

As medições de elementos internos são exibidas de forma proporcional às medidas do elemento delimitador

Observação:

Clique em qualquer valor para copiá-lo para a área de transferência.

Exibição da distância entre dois elementos

Para exibir a distância entre dois elementos, pressione a tecla Shift e clique nos elementos. Conhecer as distâncias entre elementos é muito útil ao determinar as informações de margens ou preenchimento.

Distância entre dois elementos

Cópia do código CSS

Quando um elemento é selecionado no design PSD, copie a CSS do elemento clicando em Copiar CSS no painel de informações azul. Você também pode exibir e copiar o código CSS no CSS Inspector.

Exibição do código CSS

Observação:

o Extract é compatível com pré-processadores. Na guia Estilos, clique em (seta para baixo) ao lado de CSS para exibir as opções para usar pré-processadores CSS.

Opção para usar pré-processadores CSS

Cópia de texto

Se o elemento selecionado contiver texto, clique em Copiar texto para copiá-lo para a área de transferência.

Cópia do texto selecionado para a área de transferência

Cópia e exibição de informações de fonte, cor e gradiente

Exiba e copie informações relacionadas a fontes, cores e gradientes usadas no documento de design (PSD) abrindo o painel Estilos. Ao exibir as informações, clique em um tamanho de fonte, cor ou gradiente para copiar o seu valor para a área de transferência.

Exemplo de valor de gradiente de cor

Quando você seleciona um elemento, os estilos de texto e cores em uso são destaque no painel Estilos.

Observação:

Por meio da integração com o Adobe Typekit, o Extract fornece acesso a milhares de fontes de alta qualidade. O ícone Typekit () é exibido ao lado das fontes do Typekit no painel Estilos. Ao clicar neste ícone Typekit, o Extract abre a página correspondente à fonte no Typekit.

Depois de encontrar uma fonte segura da Web que você deseja usar, adicione a um kit no Typekit e conecte em seu código de produção.

Informações de cor e fonte do elemento selecionado

Uso da ferramenta seletor de cores

A ferramenta Seletor de cores () permite que você descubra rapidamente a cor de um elemento no design.

  • Selecione a ferramenta Seletor de cores e clique em qualquer lugar em seu design. A ferramenta Seletor de cores detecta e adiciona a cor como uma amostra de cores no painel Estilos. Agora você pode facilmente exibir e copiar informações CSS da cor.
Use a ferramenta Seletor de cores

Extração de ativos de imagem

Na Creative Cloud Extract, é possível selecionar uma ou mais camadas do PSD e extrair um ativo de imagem. Os ativos podem ser extraídos como imagens PNG de 8 bits ou 32 bits, JPG e SVG.

Extração de ativos de imagem

No painel de informações azul de um elemento, clique no ícone e:

  1. Revise as configurações do ativo de imagem. Se necessário, selecione outro formato de imagem compatível (PNG, JPG ou SVG).
  2. Se você estiver gerando um ativo JPG, ajuste a qualidade dos ativos de imagem.
  3. Se necessário, selecione a opção Escala. Por exemplo, selecione Escala a 2×. O arquivo pode ser dimensionado de 0,1× a 5×.
  4. Clique em Salvar.
  5. Encontre o ativo gerado no painel Ativos. Os ativos também estão disponíveis em uma pasta recém-criada ao lado do arquivo PSD na exibição Creative Cloud Assets . A pasta criada é nomeada como -assets. Por exemplo, se o arquivo for aventura.psd a pasta de ativos será nomeada como aventura-assets.

    Ao clicar em uma miniatura da imagem no painel Ativos, o ativo é baixado para o computador local.
O painel Ativos

Observação:

quando estiver conectado e exibindo o arquivo PSD na Creative Cloud Assets, você terá acesso aos recursos avançados de extração de ativos. Toda vez que você baixa um ativo, ele é adicionado ao painel Ativos e à pasta .psd_assets em Creative Cloud Assets. Você pode clicar na miniatura da imagem no painel Ativos para baixar o ativo localmente em seu computador.

O painel Ativos não está disponível quando você clica em um link de outro usuário para exibir um arquivo PSD. Você pode usar o Extract neste caso, mas os ativos serão imediatamente baixados para o seu computador quando clicar no ícone . Use o gerenciador de download do seu navegador para encontrar os ativos no seu disco local.

Trabalho com favoritos

O painel Camadas exibe todas as camadas e grupos de camadas no projeto PSD. Como a Creative Cloud Extract é um recurso apenas leitura, quaisquer alterações nas camadas não serão salvas no arquivo PSD.

O painel Camadas permite alternar a visibilidade, selecionar elementos de camada e extrair ativos. 

Extração de camadas/grupos de camadas como ativos de imagem

É possível extrair uma camada ou um grupo de camadas do arquivo PSD como um ativo de imagem. Faça o seguinte:

  1. Clique no painel Camadas para ver a hierarquia de camadas no arquivo PSD.
Hierarquia de camadas

Observação:

Você pode selecionar várias camadas na hierarquia e exportá-las como um único ativo de imagem novo que combina todas as camadas selecionadas. 

  1. Examine e navegue a hierarquia de camadas. 
    • Para expandir um grupo de camadas, clique no ícone da pasta () ao lado.
    • Clique em um elemento no painel esquerdo para realçar a camada/grupo de camadas correspondente no painel Camadas.
  2. Selecione a camada/grupo de camadas que deseja extrair como um ativo de imagem. Mantenha a tecla Command (Mac) ou a tecla Ctrl (Windows) pressionada para selecionar várias camadas. Se vários objetos forem selecionados, eles serão extraídos como um único ativo com as camadas ou grupos selecionados.
  3. Clique no ícone  ao lado da camada/grupo de camadas. Se você tiver selecionado várias camadas/grupos de camadas, clique no ícone  ao lado de qualquer uma das camadas selecionadas.
  4. Insira um nome para o novo ativo de imagem.
  5. Selecione um formato de ativo de imagem (PNG 8 Alpha, PNG 32, JPG ou SVG).
  6. (Opcional) Se você estiver gerando um ativo de imagem JPG, otimize a sua qualidade.
  7. Clique em Salvar
  8. Encontre o ativo gerado no painel Ativos. Os ativos também estão disponíveis em uma pasta recém-criada ao lado do arquivo PSD na Creative Cloud Assets.

Observação:

a opção Redefinir camadas redefine a visibilidade da camada ao seu estado original no projeto.

Ocultação de camada ou grupo de camadas

Para ocultar/mostrar uma camada ou um grupo de camadas, selecione o ícone do olho () ao lado dela no painel Camadas.

Trabalho com composições de camada

A Creative Cloud Extract permite que você visualize várias composições de camadas do Photoshop. Se você fizer o upload de um arquivo PSD que inclui composições de camadas para o Extract, verá um menu pop-up na parte superior do PSD. Esse menu pop-up inclui todas as composições de camadas no PSD e uma seleção chamada Último estado do documento. O Último estado do documento é o ultimo estado no Photoshop antes de o arquivo ser salvo e enviado para a Creative Cloud. Esse estado pode ou não ser uma composição de camada.

Trabalho com composições de camada no Extract

Compartilhamento de arquivos

Ao visualizar um arquivo PSD na guia Extract, você poderá compartilhá-lo usando a funcionalidade de compartilhamento da Creative Cloud. Os usuários com os quais você compartilha o arquivo podem extrair ativos e medições dele mesmo que não estejam conectados à Creative Cloud.

Para obter detalhes, consulte Compartilhamento de arquivos e pastas.

Comentários

Se tiver dúvidas, problemas a reportar ou qualquer outro comentário, publique uma mensagem em nosso Fórum do Extract para PSD.

Perguntas frequentes

O Extract é compatível com tags do Photoshop Generator?

Sim. Na medida do possível, durante a extração de um ativo de imagem, as configurações serão retornadas para as tags do Generator especificadas no nome da camada correspondente.

Posso editar um arquivo PSD usando o Extract?

Não. O Extract é somente leitura.

Existem caracteres que não têm suporte nos nomes dos arquivos PSD ou dos ativos?

Os caracteres especiais |, ", ?, <, >, /, \, ;, * e : não têm suporte nos nomes dos arquivos PSD ou nos nomes dos ativos de imagem.

Quem pode acessar os arquivos PSD dos quais eu fiz upload?

Todos os arquivos para os quais você faz upload no Extract são acessíveis apenas por meio de sua conta da Creative Cloud.

Se quiser compartilhar um arquivo PSD, você pode torná-lo público e compartilhar o link. Se a opção Extract está habilitada ao compartilhar, qualquer pessoa que tenha o link pode ver o seu PSD no Extract e extrair ativos dele.

O Extract funciona com arquivos PSD que usam o espaço de cores CMYK?

Não. Converta arquivos CMYK PSD para o espaço de cor RGB antes de fazer o upload deles no Extract.

Há compatibilidade para formatos de arquivo que não sejam PSD?

Não. Atualmente, apenas arquivos PSD são compatíveis.

Existem limitações sobre os arquivos PSD que o Extract pode manipular?

O serviço Extract foi desenvolvido para arquivos PSD criados no Photoshop. Usar o Extract com arquivos PSD com mais de 2 GB ou que tenham mais de 1000 camadas não é recomendado.

Qual é a diferença entre o Extract e o Adobe Generator para Photoshop CC?

O Generator e o Extract foram desenvolvidos para remover o atrito entre designers e desenvolvedores no processo de composição até o código. Enquanto o Generator extrai ativos de imagem na Photoshop CC, o Extract funciona diretamente no seu navegador como um serviço da Creative Cloud. O Extract não requer o Photoshop para ser instalado ou executado.

No Extract, você também pode criar um único ativo a partir de múltiplas camadas.

Preciso de uma assinatura da Creative Cloud para usar o Extract?

Qualquer pessoa com uma conta grátis ou paga da Creative Cloud pode fazer upload de um arquivo PSD na Creative Cloud Assets e utilizar o Extract.

Se você compartilha um link do Extract, o destinatário não precisa estar conectado a uma conta da Creative Cloud para extrair os ativos e as medições do seu arquivo PSD.

Por que algumas cores ou gradientes não estão incluídos no painel Estilos do Extract?

Na maioria dos casos, cores ou gradientes são preenchimentos baseados em pixel e não são compatíveis com o Extract. Se o seu arquivo PSD usa esses tipos de preenchimentos, use o seletor de cores para selecionar as cores e adicionar as amostras de cores para o painel Estilos.

Existem limitações no CSS que o Extract fornece para gradientes?

Sim, alguns tipos de gradientes não podem ser gerados no CSS sem alguns truques. O Extract atualmente não fornece CSS preciso para os tipos de gradientes Angle, Reflected, Diamond, ou Shapeburst. No entanto, os tipos de gradientes Linear and Radial são suportados.

Por que a minha pré-visualização do PSD no Extract não coincide com o que vejo no Photoshop?

Podem existir diferenças de renderização entre a exibição do Extract e o que você vê no Photoshop. Se você encontrar diferenças, gostaríamos que nos informasse.

Publique uma mensagem sobre o problema no nosso fórum descrevendo o que você vê. Melhor ainda, publique uma imagem da diferença e vamos tentar resolver isso para você.

Posso usar o Extract em dispositivos móveis?

Em dispositivos móveis, você conseguirá ver uma visualização do PSD e exibir alguns estilos, incluindo cores, fontes e gradientes. Não será possível interagir com o PSD da mesma forma como no desktop.

Posso baixar todos os meus ativos ao mesmo tempo?

Atualmente, o Extract não suporta o download de todos os seus ativos de uma só vez. Você deve extrair e baixar os ativos individualmente.

Eu posso baixar todo o código CSS de um design de uma só vez?

Neste momento, o Extract não suporta o download de todo o código CSS de um projeto de uma só vez. Você deve selecionar itens individuais e copiar o CSS para o seu código de produção.

Se você estiver interessado neste recurso, publique uma mensagem no nosso fórum descrevendo como você espera que a saída do CSS seja organizada.

Compartilhei meu arquivo PSD, mas o destinatário não consegue ver a guia Extract. Por quê?

Se você compartilhou um arquivo PSD antes do lançamento do Extract no final de agosto de 2014, o arquivo PSD não terá a guia Extract ativada. Para ativá-la, faça o seguinte:

Esta opção habilita o Extract sem alterar seu URL compartilhado publicamente.

  1. Abra Opções avançadas na caixa de diálogo Enviar link.
  2. Verifique se a opção Permitir Extract está ativada.

Qual é a diferença entre o Project Parfait e o Extract?

O Project Parfait foi o serviço que a Adobe lançou em fase beta para apresentar os fluxos de trabalho que você vê agora no Extract. O Extract tem todos os recursos do Project Parfait e muito mais. Agora que o Project Parfait foi oficialmente introduzido na Creative Cloud, o serviço Project Parfait para extrair informações e ativos de um PSD será desativado. 

O que acontece com os PSDs cujo upload foi feito no Project Parfait?

Se você usou o Project Parfait e gostaria de baixar os arquivos nos quais trabalhou, poderá fazer isso até o final de 2014. 

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online