Crie, edite, importe, 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, adicionar volume a objetos vetoriais e adicionar um efeito de luz e sombra aos seus designs.

O XD permite degradês lineares e radiais.

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.

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 ou radiais no XD.

Escolha Degradê linear ou Degradê radial 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 de grau de proximidade entre elas. Os limites de cor também são exibidos no editor de degradê na tela que aparece no 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 pressione 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 ou radial

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

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

    Seletor de cores
    Seletor de cores
    Opções de degradê linear e radial
    Opções de degradê linear e radial

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

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. 

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