Guia do Usuário Cancelar

Extract no Dreamweaver

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

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

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
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:
  1. Clique em Fazer upload do PSD no painel do Extract.
  2. Na janela do Finder, clique em Opções e selecione *.psd no menu suspenso exibido.
  3. 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.

  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 do Extract, recarregue o PSD (menu pop-up > Recarregar PSD).

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

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

  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 do Extract
    Opção Copiar CSS no painel do Extract

    Para copiar o 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 do 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 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.

Copiar texto no painel do Extract
Copiar texto no painel do 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 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.

  1. No painel do 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 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. 

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

  1. 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
    Medidas no painel do 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 do Extract, você pode extrair as propriedades CSS de fontes, cores ou degradês usados na composição PSD.

  1. No painel do 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 do 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

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online