Guia do Usuário Cancelar

Aplicar efeitos de mesclagem

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
    14. Fazer backup ou transferir ativos do XD
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

Aprenda a melhor maneira de trabalhar com efeitos de mesclagem para aprimorar seus designs.

Ao trabalhar com imagens em seus designs, você pode ir além de uma simples foto para criar efeitos únicos e interessantes. Você pode, por exemplo, adicionar a cor da sua marca como um efeito em suas imagens para criar um design visual atraente. 

Os modos de mesclagem permitem criar automaticamente ativos de imagem composta combinando uma camada de imagem com outra camada usando um conjunto de modos predefinidos. 

Aqui estão algumas amostras de efeitos criados usando os modos de mesclagem Multiplicar, TelaLuz direta, Exclusão e Luminosidade.

Modos de mesclagem
Use efeitos de mesclagem para dar encanto às cores.

Quer conhecer a terminologia de cor de mesclagem?

  • cor de mesclagem é a cor original do objeto, do grupo ou da camada selecionada.

  • cor de base é a cor subjacente na ilustração.

  • cor resultante é a cor que resulta da mesclagem.

A mistura das cores de base e de mesclagem depende do modo de mesclagem selecionado.

Termos de mesclagem

A. Cor de mesclagem B. Cor de base C. Cor resultante 

Grupos Modo de mesclagem Resultados
Normal Normal Este é o modo padrão sem nenhum modo de mesclagem aplicado.
Escurecer Escurecer Examina as informações de cor em cada imagem e seleciona a cor de base ou de mesclagem (a que for mais escura) como cor resultante. Os pixels mais claros que a cor de mesclagem são substituídos, e os mais escuros não são alterados.
  Multiplicar Examina as informações de cor em cada imagem e multiplica a cor de base pela cor de mesclagem. A cor resultante é sempre mais escura.
  Superexposição de cor Examina as informações de cor em cada imagem e escurece a cor de base para refletir a cor de mesclagem, aumentando o contraste entre as duas. 
Clarear Clarear Examina as informações de cor em cada imagem e seleciona a cor de base ou de mesclagem (a que for mais clara) como cor resultante.
  Tela Examina as informações de cor em cada imagem e multiplica o inverso das cores de base e de mesclagem. A cor resultante é sempre mais clara. 
  Subexposição de cor Examina as informações de cor em cada imagem e clareia a cor de base para refletir a cor de mesclagem, diminuindo o contraste entre as duas.
Contraste Sobrepor Multiplica ou reticula as cores, dependendo da cor de base. Padrões ou cores se sobrepõem aos pixels existentes, preservando os realces e as sombras da cor de base. 
  Luz indireta Escurece ou clareia as cores, dependendo da cor de mesclagem. O efeito é semelhante ao de iluminar a imagem com um ponto de luz difuso.
  Luz direta Multiplica ou reticula as cores, dependendo da cor de mesclagem. O efeito é semelhante ao de iluminar a imagem com um ponto de luz direto. 
Inversão Diferença Examina as informações de cor em cada imagem e subtrai a cor de mesclagem da cor de base ou a cor de base da cor de mesclagem, dependendo de qual tiver o maior valor do brilho. 
  Exclusão Cria um efeito semelhante ao do modo Diferença, mas com menor contraste.
Componente Matiz Cria uma cor resultante com a luminosidade e a saturação da cor de base e com o matiz da cor de mesclagem.
  Saturação Cria uma cor resultante com a luminosidade e o matiz da cor de base e com a saturação da cor de mesclagem. 
  Cor Cria uma cor resultante com a luminosidade da cor de base e com o matiz e a saturação da cor de mesclagem. 
  Luminosidade Cria uma cor resultante com o matiz e a saturação da cor de base e com a luminosidade da cor de mesclagem.

Deseja criar um efeito de mesclagem?

  1. Antes de começar, use estas regras simples para entender como os objetos são manipulados ao aplicar ou modificar modos de mesclagem:

    • Aparência: aplica-se a todo o objeto.
    • Componente mestre: aplica-se a todas as instâncias no projeto de design. Por exemplo, se você alterar a cor de um objeto no componente principal, a alteração será distribuída em cascata em todas as instâncias do projeto de design.

    • Instância do componente: substitui os modos de mesclagem aplicados nas instâncias do componente.
    • Repetição de grade: aplica-se a todas as células.
    • Interoperabilidade: preserva o efeito de mesclagem ao trabalhar com o Photoshop, o Illustrator, o Sketch e o After Effects.
  2. Selecione uma imagem ou um objeto (incluindo formas, camadas de texto, grupos, máscaras ou componentes) na tela de design. No Inspetor de propriedades, selecione e aplique o modo de mesclagem de sua escolha. 

    Você também pode usar as teclas Option Shift + / -  no Mac e Alt Shift + / - no Windows para alternar entre os níveis de aparência dos modos de mesclagem aplicados.

  3. Para visualizar o efeito de modo de mesclagem aplicado, selecione .

Limitações

Os modos de mesclagem não são compatíveis nestes comportamentos de objeto:

  • Efeitos de mesclagem usados em animação automática mudam no início da transição sem nenhuma animação.
  • Não é possível aplicar efeitos de mesclagem em preenchimentos, bordas ou sombras.

Exemplos e arquivos de amostra

Deseja criar um pôster com efeitos de mesclagem? Selecione uma imagem na tela e, no Inspetor de propriedades, selecione e aplique as seguintes opções de mesclagem para criar estes resultados impressionantes:

  • Luz direta
  • Diferença
  • Tela
  • Superexposição de cor
Imagem original
Superexposição de cor Luz direta
Diferença Tela

Tutoriais

Assista a este vídeo para aprender a mesclar a cor de um objeto com a cor do fundo de uma prancheta ou mesclar as cores de vários objetos em camadas sobrepostas. 

Duração do vídeo: 1 minuto e 6 segundos.

O que vem por aí?

Agora você já conhece os modos de mesclagem no Adobe XD. Como a interface do Adobe XD é bastante intuitiva, será fácil dar asas à sua criatividade com cores, desfoques e muito mais.

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Receba ajuda com mais rapidez e facilidade

Novo usuário?