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

Última atualização em 08/06/2021

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

Selecione o objeto.

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

Seletor de cores
Seletor de cores

Nota

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.

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.

Nota

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.

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

Selecione o objeto.

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

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

Seletor de cores
Seletor de cores

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.

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.

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 

Nota

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 a partir de linhas, caminhos, formas, texto, imagens e grupos booleanos usando Contorno de traçado. Após criar a forma, você pode modificá-la ainda mais usando controles ou alterando suas propriedades no Painel de propriedades.

Siga estas etapas para criar um ícone usando o Contorno de traçado

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

Selecione a letra S e escolha Objeto > Caminho > Contorno de traçado.
Você pode visualizar 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.

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

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

Após criar a forma, você pode modificá-la usando o painel Propriedades, como alterar a cor usando Preenchimentos e Gradientes.

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

Tutorial

Com o recurso Contornar traçado no Adobe XD, você pode personalizar facilmente caminhos, bordas e formas, dimensionando objetos e exportando-os para SVG para a Web sem nenhum esforço. Assista a este tutorial de Dani Beaumont, gerente de produto principal do Adobe XD, para saber como usar o recurso Contornar traçado.

Duração: 2 minutos e 50 segundos.

Aplicar efeitos de sombra a objetos e componentes

Sombras internas e sombras projetadas fazem com que os objetos de design pareçam mais realistas ao simular efeitos de iluminação.

Sombra interna

Sombras internas podem ser usadas para simular profundidade 3D em uma imagem 2D. Por exemplo, sombras internas podem ajudar a simular o estado pressionado de um botão.

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

Sombra

Sombras, além de fornecer um efeito 3D aos objetos, também podem oferecer uma sensação de contorno sem aplicar um traçado de borda.

Aplicar Sombra a um objeto
Aplicar Sombra a um objeto

Siga estas etapas para aplicar uma sombra interna ou sombra a um objeto de design:

Adicione um objeto à prancheta.

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

No seletor de cores, adicione uma cor e defina a opacidade da sombra:

a. Para adicionar uma cor à sombra, faça uma das seguintes opções:

  • Especifique HSB, RGB ou o valor hexadecimal da cor. Você pode alternar facilmente entre esses modos de cores usando o menu.
  • 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. Para definir a opacidade da sombra: use o controle deslizante de opacidade ou digite o valor de opacidade em porcentagem.

Para salvar uma cor e opacidade escolhidas como uma amostra de cor, clique no ícone + na parte inferior do seletor de cores. Você pode reorganizar amostras no seletor de cores arrastando-as. Para excluir uma amostra, arraste-a para fora do seletor de cores.

Especifique o seguinte no Inspetor de propriedades:

  • Deslocamento em X e Y: especifique a extensão da borda do objeto até onde você deseja que a sombra seja deslocada.
  • B (Desfoque): especifique a extensão da borda da sombra até onde você deseja que ocorra o desfoque.

Você pode facilmente copiar as sombras aplicadas a um objeto para outros objetos usando "Colar Aparência".Pressione Ctrl+ C no objeto que tem a sombra aplicada e, em seguida, pressione Ctrl+Alt+V (Colar aparência) no objeto de destino.

Quando você gera especificações de design, as sombras nelas são convertidas para CSS que pode ser prontamente usado pelos desenvolvedores.

Exemplos

Neomorfismos

Exemplo 1 - Neomorfismos

Coleção de objetos com sombras aplicadas

Exemplo 2 - Uma coleção de objetos com sombras aplicadas

Tutorial

Quando você busca adicionar profundidade ao seu design, o recurso Sombra interna no Adobe XD pode ser uma verdadeira mudança de jogo.Assista a este tutorial de Dani Beaumont — gerente principal de produto do Adobe XD — para aprender como usar sombras internas.

Duração: 3 minutos. 

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