Saiba como converter rapidamente seus PSDs em designs da Web baseados em HTML para dispositivos móveis e desktops. Extraia CSS, imagens, medidas, fontes, cores, degradês e muito mais do Photoshop diretamente no Dreamweaver.

Observação:

  O Typekit foi renomeado para Adobe Fonts e está incluído na Creative Cloud e em outras assinaturas. Saiba mais.

A integração do Extract com o Dreamweaver permite que os designers e desenvolvedores da Web apliquem as informações de design e extraiam os ativos otimizados para a Web diretamente no ambiente de codificação. O Extract fornece uma solução completa e independente para a extração de ativos e informações de estilo de composições de PSD, reduzindo a necessidade de intercalar entre o Photoshop e o Dreamweaver.

Com o painel Extract no Dreamweaver, você pode extrair CSS, imagens, fontes, cores, degradês e medidas para a sua página da Web. Além desses recursos básicos do Extract, o Dreamweaver também oferece os seguintes recursos exclusivos:

extract_logo
  • O acesso direto aos arquivos PSD na Creative Cloud e aos arquivos PSD que são compartilhados com você em uma pasta colaborativa
  • Dica de código de contexto para definir facilmente fontes, cores e degradês no CSS
  • Suporte à função Arrastar e soltar para criar tags de imagens de camadas PSD
  • Colagem de estilos diretamente na Visualização dinâmica (por exemplo, CSS Designer e Exibição do elemento)

Introdução ao Extract

O Extract no Dreamweaver permite acessar seus arquivos PSD diretamente no painel Extract do Dreamweaver. Leia os seguintes tópicos para saber mais sobre o painel Extract e a área de trabalho e sobre como carregar os arquivos PSD no painel Extract:

Painel e área de trabalho Extract

A área de trabalho do Extract é projetada para ajudá-lo a usar efetivamente o Extract com o Dreamweaver. Na área de trabalho, o painel Extract aparece à esquerda e a página da Web à direita na Visualização dividida (Visualizações dinâmica e de código). Você pode personalizar a área de trabalho arrastando, encaixando, recolhendo ou expandindo painéis para atender às suas necessidades. Você também pode salvar a área de trabalho personalizada para uso futuro.

Observação:

Se fechar o painel do Extract, use o atalho do teclado Ctrl + K no Windows, Cmd + K no Mac ou selecione Janela > Extract para abrir novamente o painel.

Ao abrir o Dreamweaver pela primeira vez, o painel Extract exibe um tutorial interativo para ajudá-lo a começar a trabalhar com os fluxos de trabalho. Você pode usar a lista suspensa na parte superior do painel para alternar entre diferentes tutoriais.

Após ter usado o tutorial, clique em Introdução para começar a usar o Extract no Dreamweaver. O painel Extract exibe uma visualização de miniaturas de pastas e arquivos PSD na sua conta da Creative Cloud. Esses arquivos são aqueles transferidos ou sincronizados de seu desktop, ou aqueles compartilhados com você por meio de uma pasta colaborativa na Creative Cloud.

Painel Extract exibindo os arquivos PSD salvos na Creative Cloud
Painel Extract exibindo os arquivos PSD salvos na Creative Cloud

Observação:

Para reiniciar o tutorial, clique no menu pop-up no canto superior direito do painel e selecione Iniciar tutorial.

Fazer upload dos arquivos PSD para a Creative Cloud

Você pode fazer o upload do arquivo PSD para a Creative Cloud clicando no ícone Fazer upload do PSD no painel Extract. Se as composições de PSD forem desenvolvidas por outra pessoa ou equipe, elas podem ser compartilhadas na Creative Cloud. Você pode baixar ou fazer upload de arquivos na sua conta diretamente fazendo logon na Creative Cloud ou por meio do painel Extract no Dreamweaver.

Abrir arquivos PSD no painel Extract

Clique na imagem em miniatura do arquivo PSD requerido no painel Extract. Se uma versão atualizada do arquivo PSD se tornar disponível na Creative Cloud depois que você abri-la, recarregue o arquivo PSD no painel Extract. Para fazer isso, clique no nome do arquivo PSD ou clique em Recarregar PSD no menu pop-up no canto superior direito. Para voltar à exibição de miniatura e selecionar um arquivo diferente, clique no ícone da Creative Cloud na parte superior esquerda do painel.

Para ampliar a exibição e colocar foco no design, altere o nível de zoom na parte superior do painel Extract ou use Alt +/-. Use a guia Camadas ou a lista suspensa Composição de camada para mostrar ou ocultar elementos no arquivos PSD.

Você agora está pronto para converter a composição de PSD em um site. 

Definir preferências do Extract

Usando as preferências do Extract, é possível especificar o formato de arquivo padrão em que as imagens devem ser extraídas e também a unidade padrão para fontes que deve ser exibida no painel do Extract.

  1. Selecione Editar > Preferências (Win) ou Dreamweaver > Preferências (Mac).

  2. Selecione Extract na lista Categoria.

  3. (Opcional) Altere o formato padrão em que as imagens devem ser extraídas.

    Formato de imagem extraída no Dreamweaver CC
    Formato de imagem extraída
  4. (Opcional) Na seção Extract para dispositivos, selecione as resoluções necessárias. Essas configurações serão usadas quando você optar por salvar uma imagem em várias versões de resolução.

    • Para salvar as versões com sufixos, clique na linha correspondente na coluna Sufixo e digite o texto. 
    • Para salvar as várias versões de resolução em pastas de saída separadas, clique na linha correspondente na coluna Pasta e especifique o caminho relativo.
    Extrair para dispositivos
    Extrair para dispositivos
  5. (Opcional) Clique em Limpar cache para excluir os dados em cache relacionados ao uso do Extract.

  6. Clique em Aplicar e feche a caixa de diálogo Preferências.

  7. Para ver as alterações no painel Extract, recarregue o PSD (menu pop-up > Recarregar PSD).

    Recarregar PSD no painel Extract
    Recarregar PSD no painel Extract

Extrair CSS dos arquivos PSD

Você pode copiar todas ou propriedades CSS específicas de elementos na composição de PSD e colar diretamente os estilos no CSS Designer, na Exibição do elemento na Visualização dinâmica ou em seu código (origem CSS ou documento HTML).

Além disso, as dicas de código são automaticamente preenchidas com as propriedades CSS do elemento selecionado na composição de PSD. Se preferir codificar, você pode usar essas dicas de código para extrair as propriedades CSS no código.

  1. No painel Extract (Janela > Extract), clique no arquivo PSD requerido. A visualização de miniatura do PSD expande, permitindo que você exiba a composição claramente.

  2. No arquivo PSD, clique no elemento ou ativo requerido. Um pop-up com uma lista de propriedades CSS do elemento aparece e fornece a opção para selecioná-las e copiá-las. É possível ver a largura e a altura do elemento selecionado em pixels ou porcentagem.

    Observação: se optar por porcentagem, as medidas também serão exibidas em unidades de porcentagem.

    Opção Copiar CSS no painel Extract
    Opção Copiar CSS no painel Extract

    Para copiar CSS, selecione as propriedades que você deseja copiar e clique em Copiar CSS. 

  3. Cole o CSS no documento usando um dos seguintes métodos:

    • Para colar o CSS no CSS Designer, clique com o botão direito no seletor requerido e em Colar estilos.
    • Para colar o CSS usando Exibição do elemento, clique com o botão direito do mouse em um seletor e clique em Colar estilos.
    • Para colar o CSS no código, coloque o ponto de inserção no local requerido, clique com o botão direito e clique em Colar.

Para usar dicas de código para extrair o CSS, execute as seguintes etapas:

  1. Abra uma origem CSS anexada ao documento ou alterne para a Visualização de código de um documento HTML.

  2. No painel Extract, clique no arquivo PSD requerido e no elemento requerido na composição.

  3. No documento, coloque o ponto de inserção no local requerido no código. 

  4. Comece a digitar o nome de uma propriedade CSS para ver as dicas de código que contêm as propriedades CSS do elemento selecionado na composição de PSD. Clique na propriedade CSS requerida para inserir o código.

    Dicas de código com uma propriedade CSS de um elemento em um arquivo PSD
    Dicas de código com uma propriedade CSS de um elemento em um arquivo PSD
  5. Para extrair várias propriedades CSS, selecione as propriedades necessárias no painel pop-up do Extract. Em seguida, nas dicas de código, clique em Inserir selecionados.

    Inserir propriedades CSS em lote no Dreamweaver CC
    Inserir propriedades CSS em lote

Copiar o texto dos arquivos PSD

O texto ou o conteúdo nas composições de PSD pode ser inserido em sua página da Web com um único clique. Para copiar o texto da composição de PSD no painel Extract, selecione um elemento de texto e clique em Copiar texto. O texto é copiado para a área de transferência. Você pode colar o texto onde for necessário.

Copiar texto no painel Extract
Copiar texto no painel Extract

Observação:

Depois que você extraiu o texto, você pode extrair as propriedades, como a fonte e as cores que são associadas ao texto. Para obter mais informações, consulte Extrair fontes, cores e degradês de arquivos PSD.

Extrair imagens de arquivos PSD

Você pode simplesmente arrastar qualquer camada nas composições de PSD do painel Extract para um local definido na Visualização dinâmica da página da Web. Auxílios visuais na Visualização dinâmica, como Guias dinâmicos e ícone DOM, ajudam a arrastar e posicionar um elemento. Ao pausar por um tempo antes de soltar o elemento, o ícone DOM (</>) é exibido. A estrutura do DOM é exibida quando você passa o mouse sobre o ícone </>, e você pode soltar o elemento dentro da estrutura. Se preferir codificar, você pode usar a dica de código contextual e extrair imagens. Dicas de código permitem a extração de cores e gradientes como imagens.

Observação:

Se o arquivo PSD contiver várias pranchetas, cada prancheta será exibida como uma pasta no painel camadas. Você pode expandir ou recolher a pasta para exibir ou ocultar seu conteúdo. Para ampliar uma prancheta específica, basta clicar no nome da prancheta. Para aplicar menos zoom, clique em qualquer lugar fora da prancheta e clique em FIT.

Antes de inserir a imagem extraída, o Dreamweaver exibe o nome da imagem, que você pode editar. Por padrão, a imagem é salva na pasta raiz do site. Se desejar salvar a imagem em um local personalizado, você pode incluir o caminho completo de diretório junto com o nome de arquivo.

Observação: se você estiver extraindo uma imagem em um documento que não pertence a um site definido, a imagem será extraída no diretório em que o documento existe. Para documentos não salvos, você será solicitado a salvar primeiro o documento.

Você também pode salvar a imagem em seu disco local e invocá-la em sua página da web posteriormente. Além disso, se estiver criando um site responsivo, você pode salvar várias versões de resolução de uma imagem para dispositivos com um único clique.

  1. No painel Extract, clique no arquivo PSD do qual deseja baixar as imagens.

  2. Clique na imagem requerida no arquivo PSD.

    Observação:

    Use a guia Camadas e a lista suspensa Composições de camada no painel Extract para mostrar ou ocultar imagens na composição de PSD. Se uma imagem consiste em várias camadas, você pode selecionar uma camada individual da imagem para extrair.

    Observe que as dicas de código aparecem na Visualização de código no lado direito da área de trabalho. 

  3. Para importar várias imagens, mantenha a tecla Shift ou Command pressionada e clique nas imagens desejadas. As imagens selecionadas são extraídas como uma única imagem.

  4. Execute uma das seguintes ações:

    • No pop-up que aparece quando você clica na imagem, clique em . Especifique o caminho, o nome de arquivo, o formato de arquivo e o fator de dimensionamento (se for necessário). Depois, execute uma das seguintes ações:
      • Clique em Salvar para salvar a imagem com resolução 1x. Para dimensionar a imagem, selecione Escala em e especifique o fator de dimensionamento.
      • Clique em Salvar várias para salvar várias versões de resolução da imagem. O arquivo PSD não precisa necessariamente conter essas versões; o Dreamweaver pode salvar a imagem em várias resoluções durante a extração.

    Você pode especificar as versões de resolução necessárias e a pasta de saída correspondente em Preferências.

    Extração de imagem usando o ícone Extrair ativo
    Extração de imagem usando o ícone Extrair ativo
    • Arraste a imagem na Visualização dinâmica do documento. Os guias dinâmicos aparecem na Visualização dinâmica para ajudá-lo a posicionar a imagem.

    Quando você solta a imagem, o Dreamweaver exibe o nome da imagem. Você pode editar o nome da imagem e a extensão. Pressione Enter para salvar a imagem. A imagem é salva na pasta raiz do site por padrão. Para salvar a imagem em um local personalizado, insira o caminho junto com o nome do arquivo.

    Opção de edição do nome de arquivo e extensão quando você arrasta uma imagem do painel Extract
    Opção de edição do nome de arquivo e extensão quando você arrasta uma imagem do painel Extract
    • Quando você clica na imagem, dicas de código contextual no Dreamweaver são preenchidas. Na Visualização de código do documento HTML ou no documento CSS, posicione o cursor no ponto de inserção. Depois de digitar o nome da propriedade da imagem de fundo ou a tag <img>, o nome da imagem selecionada aparecerá nas dicas de código. Selecione a imagem, altere o nome e a extensão se for necessário, e pressione Enter.

    Por padrão, a imagem é salva na pasta raiz do site. Para salvar a imagem em um local personalizado, insira um caminho de arquivo personalizado junto com o nome de arquivo.

    Extração de imagens usando dicas de código
    Extração de imagens usando dicas de código

Extrair medidas de arquivos PSD

Usando o painel Extract, você pode facilmente exibir e extrair o valor de medida entre dois elementos na composição de PSD. 

  1. No arquivo PSD no painel Extract, clique nos elementos requeridos mantendo a tecla Shift ou Command pressionada.

    O painel Extract exibe as distâncias horizontal e vertical entre os dois elementos.

    Medidas no painel Extract
    Medidas no painel Extract

    Observação:

    Para exibir as medidas em unidades de porcentagem, clique em qualquer elemento e clique em porcentagem.

  2. Clique no valor necessário para copiá-lo para a área de transferência.

  3. Cole o valor onde necessário, por exemplo, nas propriedades CSS do CSS Designer ou em seu código.

Extrair fontes, cores e degradês de arquivos PSD

Usando o painel Extract, você pode extrair as propriedades CSS de fontes, cores ou degradês usados na composição PSD.

  1. No painel Extract, clique em Estilos.

  2. Para extrair fontes, execute as seguintes ações na seção Fontes.

    1. Expanda o tipo de fonte requerida.

      Para saber mais sobre a fonte, clique no ícone do Adobe Fonts ().

    2. Clique no formato e no tamanho que você deseja copiar, e no pop-up que aparece, clique em Copiar CSS. O Extract marca os elementos de texto que usam a fonte, formato e tamanho que você clicou.

      Observação:

      É possível alterar a unidade da fonte para 'em' ou 'rem' nas preferências do Extract (Preferências > Extract). Clique em Recarregar PSD no menu pop-up no canto superior direito do painel Extract para ver as alterações.

      Extração de fontes
      Extração de fontes
    3. Cole o CSS onde necessário, por exemplo, no código ou no CSS Designer.

    Para extrair cores, execute as seguintes ações na seção Cores:

    1. Clique na amostra de cor desejada. O Extract marca os elementos que usam a cor selecionada.

      Observação: você também pode escolher qualquer outra cor da composição de PSD usando o seletor de cores.

    2. No menu pop-up que aparece ao clicar na amostra de cores, selecione o modelo de cor desejada (RGB, Hex ou HSL) e copie (Ctrl+c; Cmd+c) o valor da cor.

      Extração de cores
      Extração de cores
    3. Cole o valor da cor onde for necessário, por exemplo, no código ou no CSS Designer.

  3. Para extrair degradês, clique em uma amostra de degradê na seção Degradês. No pop-up que aparece, clique em Copiar CSS. Cole o CSS onde necessário, por exemplo, no código ou no CSS Designer.

    Os prefixos do fornecedor selecionados nas preferências (Preferências > Estilos CSS) também são colados com os degradês. Se você extrair um degradê radial, o CSS correspondente será inserido sem um prefixo de fornecedor, pois não há suporte para os degradês radiais.

    Extração de degradês
    Extração de degradês

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