Guia do Usuário Cancelar

Definir traçado, preenchimento, sombra e sombra interna para objetos

Aprenda a definir traçado, preenchimento, sombra e sombra interna, e criar efeitos de mesclagem 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.  
    • 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.
    • Aplicar preenchimentos graduais ao objeto. Para obter mais informações sobre degradês, 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
    • Especificar 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.

Converter traçados em formas usando o Traçado de contorno

Crie formas vetoriais editáveis usando linhas, caminhos, formas, texto, imagens e grupos boolianos com o Traçado de contorno. Depois de criar a forma, você pode modificá-la ainda mais usando controles ou alterando suas propriedades no Painel Propriedades.

Siga estas etapas para criar um ícone conforme exibido aqui com um Traçado de contorno. 

  1. Digite qualquer letra, como S usando a ferramenta Texto na tela.

  2. Selecione a letra S e acesse Objeto > Caminho > Traçado de contorno.
    Você pode exibir duas camadas no painel Camadas: 1. S - Contorno e 2. S.

    Use o traçado de contorno em uma letra.
    Use o traçado de contorno em uma letra.

  3. Clique duas vezes no retângulo para adicionar pontos de ancoragem.

  4. Clique e arraste os pontos de ancoragem para criar uma forma personalizada. 

  5. Depois de criar a forma, você pode modificá-la usando o painel Propriedades, como mudar a cor usando Preenchimentos e Degradês.

    Adicionar cores e estilos para personalizar a forma
    Adicionar cores e estilos para personalizar a forma

Adicionar sombras

Você pode adicionar sombras e sombras internas a objetos como alternadores, botões, controles deslizantes e ilustrações.

  1. Adicione um objeto à prancheta.

  2. Clique no objeto e, depois, clique em Sombra ou Sombra interna no Inspetor de propriedades.

  3. No Seletor de cores,

    a. Para adicionar uma cor à sombra faça uma das ações a seguir:

    • Especifique HSB, RGB ou o valor hexadecimal da cor. Você pode alternar facilmente entre esses modos de cores.
    • Ajustar a cor usando o campo de cor e o controle deslizante de cores. Quando isso é feito, o valor HSB, RGB ou hexadecimal é ajustado automaticamente.  
    • Usar a ferramenta Conta-gotas para selecionar uma cor em uma prancheta.

    b. Defina a opacidade da sombra usando o controle deslizante de opacidade ou inserindo o valor percentual de opacidade.

     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.

  4. Especifique o seguinte no Inspetor de propriedades:

    Deslocamento X e deslocamento Y: especifica a distância do objeto desejada para o deslocamento entre a sombra e o objeto.

    (Desfoque): especifica a distância da borda da sombra a qual você deseja que qualquer desfoque ocorra.

Sombra interna

Aplicar a Sombra interna a um objeto
Aplicar a Sombra interna a um objeto

Sombra

Aplicar a Sombra a um objeto
Aplicar a Sombra a um objeto

Aplicar efeitos de mesclagem

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. Para mais informações, consulte Aplicar efeitos de mesclagem.

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.

Mais itens semelhantes

Receba ajuda com mais rapidez e facilidade

Novo usuário?