Aprenda a definir traçado, preenchimento e sombra projetada para objetos no Adobe XD.

Aplicar uma cor de preenchimento a um objeto

  1. Selecione o objeto.

  2. Clique no retângulo ao lado de Preenchimento. O seletor de cores é exibido.

    Seletor de cores
    Seletor de cores

    Observação:

    Você também pode usar a ferramenta Conta-gotas para preencher com cores. A tecla [ i ] ativa o Conta-gotas para preenchimento.

    • Aperte a tecla uma vez para abrir o Conta-gotas para preenchimento.
    • Aperte a tecla novamente para fechar o Conta-gotas para preenchimento.

  3. Você pode:

    • Especificar os valores HSBA, RGB ou hexadecimais se você souber os valores exatos das cores. Você também pode alternar entre os diferentes modos de cores.
    • Ajustar a cor usando o campo de cor e o controle deslizante de cores. Quando isso é feito, os valores HSBA numéricos, RGB e hexadecimais são ajustados de acordo.  
    • Você pode definir o preenchimento e a opacidade do preenchimento usando o controle deslizante de cores ou especificando um valor em porcentagem.
    • Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.
    • Você também pode aplicar preenchimentos graduais ao objeto. Para obter mais informações sobre gradientes, consulte Criar e modificar degradês.

    À medida que você modifica as opções no seletor de cores, é possível visualizar as alterações na prancheta.

    Observação:

    O Adobe XD também é compatível com abreviação de códigos hexadecimais. Por exemplo, se você digitar 0 e pressionar Return, o XD exibirá automaticamente a cor com o código #000000.

  4. Você pode salvar uma cor como uma amostra para uso futuro. Para salvar uma cor como uma amostra, clique no ícone + na parte inferior do seletor de cores. 

    Adicionar amostras
    Adicionar amostras

    Você pode reorganizar amostras no seletor de cores arrastando uma amostra para o novo local. Para excluir uma amostra, arraste-a para fora do seletor de cores.

Aplicar preenchimento de imagem a objetos

Primeiro, ative o preenchimento, se ainda não estiver ativado (conforme descrito em Aplicar uma cor de preenchimento a um objeto). Em seguida, arraste a imagem para o objeto do local em que você a salvou (por exemplo, Finder ou Windows Explorer).

Cortar e colocar preenchimentos de imagem

Agora você pode clicar duas vezes em imagens colocadas em contêineres (Objeto > Máscara com forma) para cortar e reposicionar as imagens (quando arrastadas do desktop) nos preenchimentos de imagem. Use o modo Cortar em um preenchimento de imagem para:

  •      Clicar duas vezes e inserir um modo de corte para um preenchimento de imagem
  •      Reposicionar a imagem no modo de corte ou
  •      Mover a imagem para qualquer lugar no modo de corte

Esse aprimoramento também é aplicável para arquivos importados do Photoshop e do Sketch. Os arquivos importados mantêm os preenchimentos da imagem e o corte executado no aplicativo de origem.

Colar imagem da área de transferência

Você também pode copiar uma imagem fora do Adobe XD para a área de transferência do sistema operacional, selecionar uma forma e colar a imagem como um preenchimento de imagem da área de transferência do sistema operacional. As imagens também preencherão uma forma se uma forma for selecionada e um usuário selecionar Arquivo > Importar.

Criar traçados e especificar a cor do traçado

  1. Selecione o objeto.

  2. A largura do traçado padrão é 1. Para especificar um valor diferente, altere o valor Borda.

  3. Clique no chip de cor retangular ao lado da Borda. O seletor de cores é exibido.

    Seletor de cores
    Seletor de cores
  4. Você pode:

    • Especificar os valores HSBA, RGB ou hexadecimais se você souber os valores exatos.
    • Ajustar a cor usando o campo de cor e o controle deslizante de cores. Quando isso é feito, os valores HSBA numéricos, RGB e hexadecimais são ajustados de acordo.  
    • Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.
    • Definir a opacidade da borda usando o controle deslizante de cores ou digitando um valor em porcentagem.
    • Editar o tamanho da borda e criar linhas pontilhadas
    • Especifique os arremates (limitados, arredondados, projetados) e junções (de mitra, arredondada, chanfrada) e traçados internos e externos.

    À medida que você modifica as opções no seletor de cores, é possível visualizar a cor do traçado no objeto.

  5. Você pode salvar uma cor como uma amostra para uso futuro. Para salvar uma cor como uma amostra, clique no ícone + na parte inferior do seletor de cores. 

    Adicionar amostras
    Adicionar amostras

    Você pode reorganizar amostras no seletor de cores arrastando uma amostra para um novo local. Para excluir uma amostra, arraste-a para fora do seletor de cores.

  6. Se o objeto for um demarcador fechado, você poderá especificar a largura do traçado. Para alinhar o traçado ao longo do demarcador, escolha uma das seguintes opções listadas na próxima ilustração.

    Por padrão, o XD alinha o traçado interno em um demarcador fechado.

    Estilos de traçado
    Estilos de traçado

    A. Traçado interno B. Traçado externo C. Traçado interno e externo D. Arremate limitado E. Arremate arredondado F. Arremate projetado G. Junção de mitra H. Junção arredondada I. Junção chanfrada 

    Observação:

    Alterar a largura do traçado ou o alinhamento do traçado não altera o tamanho real do objeto (em termos da caixa delimitadora). Contudo, ao exportar o objeto, há a possibilidade de que as dimensões do objeto sejam alteradas dependendo do tipo de traçado usado.

    O SVG permite apenas traçados internos e externos. Se você exportar um objeto com traçados internos ou externos como SVG, o tamanho da imagem exportada aparecerá como se tivesse um traçado central.

Criar uma sombra projetada

  1. Selecione o objeto.

  2. Para escolher uma cor para a sombra, clique em Sombra no Inspetor de propriedades. O seletor de cores é exibido.

    Você pode:

    • Especificar os valores HSBA, RGB ou hexadecimais se você souber os valores exatos. Você também pode alternar facilmente entre os diferentes modos de cores.
    • Ajustar a cor usando o campo de cor e o controle deslizante de cores. Quando isso é feito, os valores HSBA numéricos, RGB e hexadecimais são ajustados de acordo.  
    • Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.
    • Definir a opacidade da sombra usando o controle deslizante de cores ou digitando um valor em porcentagem.
  3. Especifique as seguintes opções:

    Deslocamento X e deslocamento Y

    Distância desejada para o deslocamento entre a sombra projetada e o objeto.

    D

    (Desfoque) Especifiquea distância a partir da borda da sombra na qual o desfoque deve ocorrer.

    Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.
    Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.
    Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.
    Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.

    Especificação da sombra projetada
    Especificação da sombra projetada

    Para salvar uma amostra, clique no ícone + na parte inferior do seletor de cores. Você pode reorganizar amostras no seletor de cores arrastando uma amostra para um novo local. Para excluir uma amostra, arraste-a para fora do seletor de cores.

Remover um preenchimento, sombra ou traçado de um objeto

Selecione o objeto. Em seguida, clique na caixa de seleção ao lado de Borda, Preenchimento ou Sombra no Inspetor de propriedades. Se você quiser preencher, traçar ou sombrear, clique na caixa de seleção novamente.

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