Selecione o objeto.
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
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
-
-
Clique no retângulo ao lado de Preenchimento. O seletor de cores é exibido.
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.
-
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.
-
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.
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.
-
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.
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.
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.
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.
Adicionar sombras
Você pode adicionar sombras e sombras internas a objetos como alternadores, botões, controles deslizantes e ilustrações.
-
Clique no objeto e, depois, clique em Sombra ou Sombra interna no Inspetor de propriedades.
-
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.
Sombra interna
Sombra
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.