Guia do Usuário Cancelar

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

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
    14. Fazer backup ou transferir ativos do XD
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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?