Como desenhar formas e exportar gráficos vetoriais (SVG)
Resposta rápida
Pressione U para escolher a ferramenta Forma, escolha uma forma na barra de opções e arraste na tela de pintura; mantenha Shift ou ⇧ pressionada para um círculo ou quadrado perfeito. Cada forma é uma camada própria que continua editável: mude o tamanho, os cantos, o preenchimento e o contorno no painel Propriedades a qualquer momento. Para obter um arquivo vetorial, escolha
- Tempo
- 6 minutos
- Nível
- Iniciante
- Você precisa de
- Nada: você começa num documento novo e vazio
- Funciona com
- Exporta para SVG, PDF, PNG, WebP e outros formatos de imagem; as formas continuam totalmente editáveis nos projetos do Lil Cactus
Grátis, sem cadastro. Seu trabalho fica no seu computador.
Uma camada de forma guarda a forma como uma descrição, por exemplo “um círculo de 600 px de diâmetro em 100, 100, preenchido de verde”, e não como pixels. Você pode redimensioná-la, arredondar os cantos ou mudar a cor sem perder nitidez, e uma exportação em SVG a mantém como vetor, nítida em qualquer tamanho, de um favicon a um pôster.
Neste tutorial, você monta um selo simples com duas formas, um círculo verde com um anel branco (o contorno) e uma estrela branca, e o exporta em SVG.
Desenhe formas e exporte em SVG em sete passos
Crie um documento novo
Acesse lilcactus.app e escolha Digite 800 em Largura e 800 em Altura, clique na amostra quadriculada em Plano de fundo para ter um fundo transparente e clique em Criar.
800 × 800 px com fundo transparente. Desenhe um círculo
Pressione U para escolher a ferramenta Forma. Na barra de opções (a faixa abaixo dos menus), escolha Elipse na lista Forma; o campo Modo deve mostrar Forma. Mantenha Shift ou ⇧ pressionada e arraste por quase toda a tela de pintura: um círculo preto aparece numa nova camada chamada Forma. As formas novas são preenchidas com a cor do primeiro plano.
Forma: Elipse. Defina o tamanho, a posição e a cor exatos
Com o círculo selecionado, o painel Propriedades mostra os ajustes ao vivo da forma. Digite 100 em X (px) e em Y (px) e 600 em Largura (px) e em Altura (px), pressionando Tab depois de cada valor: agora o círculo está centralizado, com uma margem de 100 px.
Mais abaixo, em Preenchimento, clique na amostra de cor, digite 2E7D5B no campo hexadecimal e clique em OK. O círculo fica verde.
Posição e tamanho exatos. 
A cor de preenchimento, #2E7D5B. Desenhe uma estrela branca de pontas arredondadas
Pressione D e depois X para deixar o branco como cor do primeiro plano. Escolha Estrela na lista Forma da barra de opções e defina Pontos 5, Raio interno 50 e Raio do canto 24. Mantenha Shift ou ⇧ pressionada e arraste de cerca de um quarto do círculo até três quartos: aparece uma estrela branca de pontas suaves, numa camada própria. Para posicioná-la exatamente, digite 250 em X (px) e em Y (px) e 300 em Largura (px) e em Altura (px) no painel Propriedades.
Pontos 5, Raio interno 50%, Raio do canto 24 px. 
A estrela sobre o círculo. Altere a estrela depois
As formas continuam ao vivo. Com a camada da estrela selecionada, digite 6 em Pontos no painel Propriedades e pressione Tab: a estrela é redesenhada com seis pontas, no mesmo tamanho e com os mesmos cantos arredondados. Largura (px) e Raio (px) (o raio do canto) funcionam do mesmo jeito.
Pontos: 6. Adicione um anel branco
Clique na camada do círculo (Forma) no painel Camadas. Em Propriedades, na seção Traçado, defina Pintura como Cor, clique na amostra e escolha o branco (FFFFFF). Em Geometria do traçado, digite 16 em Largura (px) e defina Posição como Dentro, para que o anel fique dentro do círculo de 600 px.
Um traçado branco de 16 px, por dentro da borda. 
O selo pronto. Exporte em SVG e salve o projeto
Primeiro oculte a camada vazia Plano de fundo com o ícone de olho no painel Camadas: senão o SVG recebe uma pequena imagem transparente para ela, que outros aplicativos importam como um objeto a mais. Depois escolha e clique em Exportar. O SVG mantém cada forma como um caminho vetorial, então ela fica nítida em qualquer tamanho num site ou em outro aplicativo de design, e o fundo continua transparente.
Para manter as formas editáveis no Lil Cactus, escolha também (Ctrl+Shift+S ou ⇧⌘S); depois disso, atualiza esse arquivo. as mantém como camadas de forma vetoriais, mas quando o PSD é aberto de novo elas viram caminhos editáveis, sem os ajustes ao vivo de cantos e pontas.
Formas e opções
- Retângulo: Raio do canto na barra de opções arredonda os cantos, para botões e cartões.
- Linha: arraste de uma ponta à outra e depois defina a cor do traçado, a largura e as Extremidades da linha (retas, arredondadas ou quadradas) em Propriedades. Uma linha nova recebe o traçado na cor do primeiro plano; se ela não aparecer, essa cor é igual à do documento: escolha outra cor de traçado ali.
- Polígono e Estrela: Lados ou Pontos e, na estrela, o Raio interno, que define a profundidade das pontas.
O campo Modo na barra de opções decide o que um arraste cria: uma camada de forma (Forma), um caminho que você pode transformar em seleção ou em traçado (Caminho) ou pintura na camada atual (Pixels), que deixa de ser editável como forma.
Combine e remodele formas
Para recortar uma forma de outra, selecione a camada de forma e defina Operação como Subtrair na barra de opções antes de desenhar: a forma nova vira um furo na forma selecionada, na mesma camada. Unir soma à forma, Interseção mantém só a sobreposição e Excluir mantém tudo menos a sobreposição. Volte Operação para Nova camada para ter formas separadas.
Para arrastar pontos individuais, clique com o botão direito no botão da caneta na barra de ferramentas, escolha Seleção direta e arraste um ponto da forma selecionada. Uma forma combinada ou remodelada vira um caminho livre: a lista Forma em Propriedades mostra Caminho editável, e ela deixa de ter os ajustes ao vivo de cantos e pontas. Veja como usar a ferramenta Caneta.
O que uma exportação em SVG mantém
- Camadas de forma, com preenchimentos de cor e de gradiente linear, radial e refletido, traçados e tracejados, viram caminhos vetoriais. Uma forma com gradiente Ângulo ou Diamante vira imagem.
- O texto vira contornos vetoriais das letras quando a fonte permite.
- Fotos, estilos de camada como sombras projetadas, e máscaras viram uma imagem só para aquela camada.
- Uma camada visível com um modo de mesclagem diferente de Normal, uma máscara de corte ou uma camada de ajuste transforma o SVG inteiro numa única imagem, sem vetores. O mesmo acontece com um documento Lab ou em Tons de cinza, ou com um documento com perfil de cor diferente do padrão que tenha texto, transparência ou gradientes. A caixa de diálogo de exportação avisa isso antes de você exportar.
Para um arquivo totalmente vetorial, use no design só camadas de forma e texto simples no modo Normal, e oculte as camadas vazias.
Resolva problemas comuns
A forma saiu preta
A cor do primeiro plano era preta. Mude o preenchimento em Propriedades ou defina a cor do primeiro plano antes de desenhar.
Minha forma nova abriu um furo na antiga
O campo Operação na barra de opções está em Subtrair. Desfaça com (Ctrl+Z ou ⌘Z), mude para Nova camada e desenhe de novo.
O círculo saiu oval
Digite o mesmo valor em Largura (px) e em Altura (px) no painel Propriedades.
Se você vem de outro editor
- Photoshop
- As ferramentas de forma (U) e os ajustes de forma ao vivo do painel Propriedades.
Formas e gráficos vetoriais: perguntas e respostas
Qual é a diferença entre uma camada de forma e uma camada de pixels?
Uma camada de forma guarda a forma como uma descrição, então no Lil Cactus você pode redimensioná-la, arredondar os cantos ou mudar a cor a qualquer momento sem perder nitidez. Uma camada de pixels guarda pontos de cor, que ficam borrados quando ampliados.
Como faço um retângulo arredondado?
No Lil Cactus, escolha a ferramenta Forma (U), escolha “Retângulo” na barra de opções, digite um “Raio do canto”, como 20 px, e arraste. Você pode mudar o raio depois no painel Propriedades.
Como exporto um logotipo com fundo transparente?
No Lil Cactus, comece em Arquivo › Novo… com a amostra de fundo transparente e oculte a camada vazia “Plano de fundo” (ou oculte uma preenchida); depois escolha Arquivo › Exportar › SVG… para um arquivo vetorial ou PNG… para uma imagem.
Posso abrir o SVG em outros aplicativos?
Sim. O SVG do Lil Cactus é um arquivo padrão que abre em navegadores, aplicativos de design e no código de sites, com cada forma como um caminho. Um traçado “Dentro” ou “Fora” fica com a mesma aparência, mas num aplicativo de design ele é um traçado com o dobro da largura dentro de um caminho de recorte.
Como centralizo uma forma na tela de pintura?
No Lil Cactus, defina X e Y no painel Propriedades como metade do tamanho da tela de pintura menos metade do tamanho da forma; para um círculo de 600 px numa tela de pintura de 800 px, isso dá 100 e 100.
Meu trabalho é enviado para algum servidor quando desenho formas no Lil Cactus?
Não. Tudo roda no seu navegador, no seu próprio dispositivo. Quando as estatísticas estão ativadas, o editor registra quais ferramentas são usadas, nunca a imagem, como explica a política de privacidade.
Continue aprendendo
Como usar a ferramenta Caneta para recortar um objetoContornos precisos e suaves para recortes, seleções e formas.Intermediário · 8 min
Como adicionar sombra projetada e contorno com estilos de camadaSombras, contornos, brilhos e sobreposições que continuam editáveis.Iniciante · 6 min
Como usar camadas em um editor de fotosEmpilhe, reordene, atenue, oculte e agrupe as partes de uma imagem.Iniciante · 6 min