Você pode desenhar rapidamente ícones e gráficos simples no Adobe XD CC usando as ferramentas de desenho na barra de ferramentas esquerda, as ferramentas Retângulo, Elipse, Linha e Caneta. A ferramenta de seleção ajuda a selecionar uma linha específica, formas ou objetos para editá-los.
Você pode combinar estas formas de diferentes maneiras para criar formas e objetos compostos ou mascarar partes da forma. Para obter mais informações sobre técnicas de mascaramento e combinação, consulte Combinar objetos usando operações booleanas e mascarar objetos com formas.
-
Para desenhar um retângulo arredondado, desenhe um retângulo e, depois, clique nele para ver as alças de edição do raio. Clique em qualquer alça e arraste-a para o centro do retângulo. Você também pode usar o Inspetor de propriedades para inserir um valor específico do raio de um ou mais cantos.
Desenhar retângulos e quadrados arredondados
-
- Para ajustar o raio de apenas um canto, faça o seguinte:
- Pressione Option + clique, clique na alça do canto e arraste o mouse.
- Edite o valor dos raios dos cantos individualmente depois de selecionar
no Inspetor de propriedades.
- Para ajustar o raio de todos os cantos simultaneamente, faça o seguinte:
- Clique em um raio do canto e arraste o mouse.
- Edite o valor dos raios depois de selecionar
no Inspetor de propriedades.
Ajustar os quatro cantos simultaneamente
Ajustar os cantos individualmente
- Para ajustar o raio de apenas um canto, faça o seguinte:
.
.
.
Observação:
Tutorial: desenhar ícones e formas para o seu design.
Saiba como usar a ferramenta Caneta para desenhar imagens no Adobe XD CC.
O demarcador mais simples que você pode desenhar com a ferramenta Caneta é uma linha reta, feita com a seleção da ferramenta Caneta para criar dois pontos de ancoragem. Ao continuar clicando, você cria um demarcador feito de segmentos de linha reta conectados por pontos de vértice.
-
Observação:
Para converter um ponto de ancoragem de reto em curvado e vice-versa, clique duas vezes no ponto de ancoragem.
-
- Para deixar o demarcador aberto, clique em Esc.
- Para fechar o demarcador, posicione a ferramenta Caneta sobre o primeiro ponto de ancoragem (vazio). Clique ou arraste para fechar o demarcador.
- Para selecionar e arrastar o ponto inicial sem fechar o demarcador, segure a tecla Cmd/Ctrl.
Desenhar linhas retas usando a ferramenta Caneta.
.Você cria uma curva adicionando um ponto de ancoragem onde uma curva muda de direção e arrastando as linhas de direção que formam a curva. O comprimento e a inclinação das linhas de direção determinam a forma da curva.
As curvas são mais fáceis de serem editadas e seu sistema pode exibi-las e imprimi-las mais rápido se elas forem desenhadas usando o menor número de pontos de ancoragem possível. O uso de muitos pontos também pode gerar saliências indesejadas em uma curva. Em vez disso, desenhe pontos de ancoragem bem espaçados e pratique a formatação das curvas ajustando o comprimento e os ângulos das linhas de direção.
-
Posicione a ferramenta Caneta no local em que deseja que o segmento curvado termine e execute um dos procedimentos a seguir:
- Para criar uma curva em forma de C, arraste em uma direção oposta à linha de direção anterior. Em seguida, solte o botão do mouse.
- Para criar uma curva em forma de S, arraste na mesma direção da linha de direção anterior. Em seguida, solte o botão do mouse.
Desenhar curvas usando a ferramenta Caneta.
Para alternar os modos de desenho e de edição, pressione a tecla Esc.
Você também pode inserir o “modo de edição de demarcador” clicando duas vezes na forma ou no demarcador. Nesse modo, os pontos de ancoragem da forma são visíveis, mas o movimento do mouse não desenha nada. Você pode manipular os pontos de ancoragem/controle ou inserir novos pontos de ancoragem nos segmentos existentes no demarcador.
Ao desenhar com a ferramenta Caneta, você pode executar todas as edições descritas acima, além de desenhar novos segmentos.
Ao selecionar a ferramenta Caneta, todos os demarcadores da prancheta abaixo do ponteiro do mouse exibem alças nos pontos de início e fim. Clique em uma das alças para continuar desenhando o demarcador a partir deste ponto.
Estender um demarcador fechado vai reabri-lo e colocar a ferramenta Caneta no modo de desenho para ele.
Clique duas vezes no desenho para exibir os pontos de ancoragem. Clique em um ponto de ancoragem para selecioná-lo. Para selecionar vários pontos de ancoragem, segure a tecla Shift e selecione os pontos de ancoragem ou marque-os e selecione-os usando a ferramenta Seleção.
Ajuste os pontos de ancoragem selecionados usando o teclado, arraste-os usando o mouse ou edite suas propriedades (coordenadas x e y) no inspetor de propriedades.
Quando você coloca um novo ponto de ancoragem ou arrasta um existente, as linhas de ajuste são exibidas quando uma âncora está vertical ou horizontalmente próxima a outro ponto de ancoragem. Mantenha a tecla Cmd/Ctrl pressionada para desabilitar o ajuste de pontos de ancoragem.
Clique duas vezes no desenho para selecioná-lo e exibir os pontos de ancoragem. Clique no demarcador para adicionar novos pontos de ancoragem no local do cursor.
| Ferramenta de desenho | Atalho de teclado no MacOS | Atalho de teclado no Windows |
|---|---|---|
| Selecionar | V | V |
| Retângulo | R | R |
| Elipse | E | E |
| Linha | L | L |
| Caneta | P | P |
| Zoom |
Entrar no modo Zoom: Z
Para ativar temporariamente a ampliação e a redução de zoom:
|
Entrar no modo Zoom: Z
Para ativar temporariamente a ampliação de zoom:
|
| Aplicar zoom na seleção | ⌘3 | Ctrl + 3 |
Clique na ferramenta de texto e depois no local onde deseja que o texto comece. Digite o texto e pressione Return.
Quando você digita texto selecionando um ponto na tela, uma linha de texto horizontal é exibida no local onde você clicou e é expandida conforme os caracteres são digitados. Cada linha de texto é independente: a linha aumenta ou diminui à medida que é editada, mas não há quebra para a próxima linha. A inserção de texto desse modo é útil para a adição de algumas palavras à arte-final.
Você pode digitar texto sobre outros objetos e organizar o texto para ser exibido à frente usando as opções Objeto > Organizar.
Clique na ferramenta de texto e depois no local onde deseja inserir o texto na tela e arraste para definir a área de texto. Em seguida, clique dentro da área para começar a digitar o texto.
Quando você define a área de texto, os limites de um objeto controlam o fluxo de caracteres, horizontal ou verticalmente. Quando um texto atinge um limite, ele é quebrado automaticamente para se ajustar em uma área definida. Essa maneira de inserir texto é útil quando você deseja criar um ou mais parágrafos, como em um folheto.
Você pode incluir com facilidade texto pré-escrito na sua prancheta usando um dos seguintes métodos:
- Arrastar um arquivo de texto para a prancheta.
Você pode incluir com facilidade texto pré-escrito em seu design simplesmente arrastando um arquivo de texto sem formatação para a prancheta. Essa ação cria uma área de texto na prancheta com o conteúdo do arquivo de texto.
- Arrastar um arquivo de texto para uma repetição de grade.
Você também pode arrastar um arquivo de texto (com novas linhas) e, depois, arrastá-lo sobre um componente de texto em uma repetição de grade. Todos os elementos de texto são preenchidos com o texto do arquivo em questão.
Para obter mais informações, consulte Adicionar texto de um arquivo de texto a uma repetição de grade.
- Copiar e colar o texto na prancheta.
Você também pode copiar e colar texto na prancheta criando um elemento da área de texto que pode ser movido e editado com facilidade no Adobe XD.
Clique no texto e arraste a alça para alterar o tamanho da fonte. Este recurso está disponível somente para texto expansivo.
Clique no texto e, em seguida, especifique a fonte, o tamanho da fonte e o alinhamento do texto usando o Inspetor de propriedades.
Você também pode selecionar palavras ou caracteres individuais em um bloco de texto e formatar essas seções individualmente.
Para alterar o espaçamento de caracteres, clique no objeto de texto e especifique o espaçamento usando a opção Espaçamento de caracteres no Inspetor de propriedades.
Para alterar o espaçamento de caracteres em um subconjunto de texto, clique no texto e especifique o espaçamento em mili-ems usando o Inspetor de propriedades.
Para alterar o espaçamento entre linhas, clique na área de texto e especifique o espaçamento usando a opção Espaçamento entre linhas no Inspetor de propriedades.
Para restaurar a altura da linha para o padrão, insira 0 na opção Espaçamento entre linhas no Inspetor de propriedades.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.