Criar e modificar degradês

Crie, edite, importe e use degradês no Adobe XD. Adicione limites de cor e controle a opacidade do degradê usando o painel Degradê.

Um degradê é uma mistura gradual entre duas ou mais cores ou tons da mesma cor ou de cores diferentes. Você pode usar degradês para criar misturas de cores, gráficos de pizza, adicionar volume a objetos vetoriais e adicionar um efeito de luz e sombra aos seus designs.

O XD permite degradês lineares, radiais e angulares.

Degradê linear

O XD muda do ponto inicial para o ponto final em uma linha reta.

Degradê radial

O XD muda do ponto inicial para o ponto final em um padrão circular.

Degradê angular

O XD aplica um preenchimento com degradês de cores ao redor de uma forma a partir do centro de um círculo. 

O seletor de cores Degradê

Para acessar o seletor de cores Degradê no XD, selecione um objeto e clique em Preenchimento no Inspetor de propriedades. É possível criar degradês lineares, radiais e angulares no XD.

Escolha Degradê linearDegradê radial ou Degradê angular na lista suspensa na parte superior do Seletor de cores.

O seletor de cores Degradê
O seletor de cores Degradê

A. Editor de degradê B. Limite de cor C. Controle deslizante de opacidade D. Campo de cores E. Salvar como amostra F. Editor de degradê na tela 

Você pode usar o seletor de cores Degradê para escolher as cores e definir a opacidade dos degradês.

O seletor de cores Degradê possui um editor de degradê que mostra uma visualização rápida de todas as cores usadas em um degradê. Tabuleiros indicam as partes transparentes.

O editor de degradê também exibe os limites de cor em um degradê. Pequenos círculos indicam os limites de cor. As cores mudam e se misturam dependendo do grau de proximidade entre os limites de cor. Os limites de cor também são exibidos no editor de degradê que aparece na tela do objeto ao qual o degradê é aplicado. 

Dois limites de cor estão disponíveis por padrão. É possível adicionar mais limites de cor clicando nos editores de degradê. Você pode arrastar os limites de cor pelos editores de degradê para alterar as posições dos limites de cor e variar a distribuição de cada cor. Para excluir ou remover um limite de cor, arraste-o para fora do editor de degradê no seletor de cores Degradê ou clique no limite de cor no editor de degradê na tela e selecione Excluir.

O editor de degradê na tela ajuda a alterar a direção do degradê.

A alça de canto ajuda a alterar o ponto de origem e o ângulo de um degradê radial.

O controle deslizante à direita do seletor de cores Degradê permite controlar a opacidade do limite de cor.

Aplicar um preenchimento de degradê linear, radial ou angular

  1. Selecione um objeto e clique em Preencher no Inspetor de propriedades.

  2. No Seletor de cores, selecione Degradê linear, Degradê radial ou Degradê angular
    na lista suspensa.

    Seletor de cores

    degradês lineares, radiais e angulares
    degradês lineares, radiais e angulares

  3. Clique nos limites de cor no editor de degradê e selecione as cores necessárias usando o seletor de cores. 

    • Para adicionar mais limites de cor, clique no editor de degradê.
    • Para modificar a cor atribuída a um limite de cor, clique no limite de cor.
    • Para mover os limites de cor, arraste-os pelo editor de degradê.
      Observação: não é possível mover os limites de cor em nenhuma das extremidades do editor de degradê.
    • Para excluir um limite de cor, arraste-o para fora do editor de degradê. Se estiver usando o editor de degradê na tela, clique no limite de cor e pressione Excluir.
    • Para alternar entre os limites de cor, use a tecla Tab.
    • Para alterar o ponto de orientação e o ângulo de degradês radiais, arraste a alça do canto.
    Trabalhar com um degradê radial
    Trabalhar com um degradê radial

  4. Para alterar a direção do degradê, arraste o segmento do editor de degradê na tela (no objeto) conforme necessário.

    Você também pode arrastar os pontos finais do segmento do editor de degradê na tela para fora dos limites do objeto. Se um limite de cor for colocado fora dos limites de um objeto, a cor (associada ao limite de cor) não será mostrada no objeto.

    Observação:

    Você pode mover a extremidade do segmento do editor de degradê na tela usando as teclas de seta e as teclas Shift + seta. Depois de selecionar um limite de cor interno, você pode movê-lo pelo segmento usando as teclas de seta e as teclas Shift + seta.

    Você também pode pressionar Tab para alterar os limites de cor pelo editor de degradê na tela. 

  5. Após a criação de um degradê, você pode salvá-lo para reutilização posterior no painel Ativos. Clique em um objeto com o degradê e clique no ícone + ao lado de Cores no painel Ativos para salvá-lo. 

    Degradês salvos no painel Ativos
    Degradês salvos no painel Ativos

Como usar degradês angulares

Você pode criar discos de cores, gráficos de pizza ou indicadores de progresso usando degradês angulares. Aplique um preenchimento com degradês de cor do ponto inicial ao final no sentido anti-horário. 

Criar um disco de cores
Selecione Degradê angular para preencher o círculo

Criar um disco de cores
Criar um disco de cores usando o Degradê angular

Siga estas etapas para criar um disco de cores conforme exibido aqui com degradês angulares.

  1. Adicione um objeto circular na tela, selecione o círculo e clique em Preencher no Inspetor de propriedades.
  2. Selecione Degradê angular na lista suspensa no Seletor de cores. 
  3. Clique nos limites de cor inicial e final no editor de degradê angular e mova-os para selecionar as cores necessárias. 
  4. Clique no editor de degradê angular para adicionar mais limites de cor. 
  5. Mova os limites para cima ou para baixo clicando e arrastando-os na tela.
  6. Use a alça de rotação na parte superior do círculo para girar o disco de cores.

 Você não pode salvar essas cores em sua biblioteca da Creative Cloud. Como solução alternativa, você pode copiar e colar a cor do degradê angular definida em outro objeto. 

Importar objetos com preenchimento de degradê

  1. Certifique-se de salvar o arquivo como um arquivo .svg antes de importar para o Adobe XD.

  2. Clique em Arquivo > Importar, selecione o arquivo SVG e clique em Importar.

Quando você importa um degradê como um SVG, o seletor de cores exibe a opção Degradê por padrão. Quando você copia e cola um objeto no XD, o preenchimento de degradê também é copiado. Você pode modificar a cor e os limites de cor do degradê que você importa.

Observação:

Degradês radiais importados com pontos de origem descentralizados não são editáveis no XD. 

Mais itens semelhantes

Logotipo da Adobe

Fazer logon em sua conta