Guia do Usuário Cancelar

Extract no Dreamweaver

Pesquisar

Última atualização em 13 de fev de 2023

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:

A partir de 1º de julho de 2022, os recursos do painel Extract serão descontinuados no Dreamweaver 21.2 e versões anteriores. Você pode usar o Adobe Photoshop para extrair informações de estilo e ativos de componentes PSD e reutilizá-los no Dreamweaver.

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 alternar entre o Photoshop e o Dreamweaver.

Com o painel do 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:

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 contextual 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

Extrair CSS

Definir preferências do Extract

Copiar texto

Extrair imagens

Extrair fontes, cores e degradês

Extrair medidas

Introdução ao Extract

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

Painel e área de trabalho do 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 do 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 de 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 do Extract exibe um tutorial interativo para ajudar você 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 do 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 do 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

Para fazer upload de um arquivo PSD em sua Creative Cloud, escolha Janela > Extract e clique em Fazer upload do PSD. 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 do Extract no Dreamweaver.

Observação:

Se você estiver usando o Dreamweaver 21.2 ou versões posteriores em um dispositivo macOS, habilite o tipo de arquivo PSD na janela do Finder e carregue seu arquivo.

Para macOS

Siga as etapas abaixo para habilitar e fazer upload do arquivo PSD:

Clique em Fazer upload do PSD no painel do Extract.
Na janela do Finder, clique em Opções e selecione *.psd no menu suspenso exibido.
Selecione o arquivo PSD e clique em Abrir para fazer upload do arquivo.

Abrir arquivos PSD no painel do Extract

Clique na imagem em miniatura do arquivo PSD requerido no painel do 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 do 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 do 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.

Selecione Editar > Preferências (Win) ou Dreamweaver > Preferências (Mac).
Selecione Extract na lista Categoria.
(Opcional) Altere o formato padrão em que as imagens devem ser extraídas.

Formato de imagem extraída
(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
(Opcional) Clique em Limpar cache para excluir os dados em cache relacionados ao uso do Extract.
Clique em Aplicar e feche a caixa de diálogo Preferências.
Para ver as alterações no painel do Extract, recarregue o PSD (menu pop-up > Recarregar PSD).

Recarregar PSD no painel do 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.

No painel do Extract (Janela > Extract), clique no arquivo PSD requerido. A visualização de miniatura do PSD expande, permitindo que você exiba a composição claramente.
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 do Extract

Para copiar o CSS, selecione as propriedades que você deseja copiar e clique em Copiar CSS.
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:

Abra uma origem CSS anexada ao documento ou alterne para a Visualização de código de um documento HTML.
No painel do Extract, clique no arquivo PSD requerido e no elemento requerido na composição.
No documento, coloque o ponto de inserção no local requerido no código.
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
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

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 do 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.

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 do 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.

No painel do Extract, clique no arquivo PSD do qual deseja baixar as imagens.
Clique na imagem requerida no arquivo PSD.

Observação:

Use a guia Camadas e a lista suspensa Composições de camada no painel do 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.
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.
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
- Arraste a imagem na Visualização dinâmica do documento. Os guias dinâmicos aparecem na Visualização dinâmica para ajudar você 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 do 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

Extrair medidas de arquivos PSD

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

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

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

Medidas no painel do Extract

Observação:

Para exibir as medidas em unidades de porcentagem, clique em qualquer elemento e clique em porcentagem.
Clique no valor necessário para copiá-lo para a área de transferência.
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 do Extract, você pode extrair as propriedades CSS de fontes, cores ou degradês usados na composição PSD.

No painel do Extract, clique em Estilos.
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 do Extract para ver as alterações.
  
  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
3. Cole o valor da cor onde for necessário, por exemplo, no código ou no CSS Designer.
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