Editor de vetores no Zero Block

Como criar suas próprias imagens vetoriais no Tilda

No editor Zero Block , você pode criar sua própria imagem vetorial no editor de vetores integrado. Para fazer isso, clique no botão de adição para adicionar novos elementos → Add Vector.

Vá para Configurações do elemento e clique no botão "Editar vetor". Você também pode começar a trabalhar com o vetor clicando duas vezes no elemento.
O editor de imagens vetoriais será aberto. Há quatro ferramentas disponíveis: Select Tool (Ferramenta de seleção), Draw Tool (Ferramenta de desenho), Bend Tool (Ferramenta de dobra) e Edit Tool (Ferramenta de edição ) para pontos de ancoragem.
Ferramenta de desenho

A ferramenta Draw permite que você crie um novo vetor adicionando curvas de Bezier com pontos de ancoragem (ao clicar) e ajustando as alças da curva. Com essa ferramenta, você pode criar linhas retas e curvas.


Se você mantiver pressionada a tecla Shift, o próximo ponto de ancoragem será posicionado na horizontal, vertical ou diagonal em um ângulo de 45 graus com relação ao ponto anterior.


Para fechar o caminho, adicione o último ponto sobre o primeiro. Para manter a forma aberta, clique duas vezes no último ponto ou use a tecla ESC.
Selecionar ferramenta
A ferramenta Select permite selecionar, arrastar, dimensionar e girar formas separadas que você criou, bem como definir suas configurações - cor e largura do preenchimento e do traço.
Há quatro modos de dimensionamento:
  • Livre. O elemento é redimensionado livremente e a proporção de aspecto não é mantida.
  • Proporcional ( tecla Shift pressionada). O elemento é redimensionado e a proporção é mantida.
  • Redimensionar a partir do centro ( tecla Alt/Option pressionada). O elemento mantém sua posição em relação ao ponto central. A proporção de aspecto não é mantida.
  • Redimensione proporcionalmente a partir do centro ( teclas Shift + Alt/Option mantidas pressionadas). O elemento mantém sua posição em relação ao ponto central. A proporção de aspecto é mantida.
Exemplos dos 4 modos de dimensionamento
Há duas maneiras de girar elementos:
  • Livre. O elemento pode ser girado arbitrariamente movendo-se o cursor sobre o canto do elemento.
  • Rotação com um passo de 15 graus (Shift mantida pressionada).

Para redefinir rotação, clique com o botão direito do mouse para abrir o menu de contexto do elemento e selecione "Redefinir rotação".
Para espelhar o elemento na vertical ou na horizontal, use as opções do menu de contexto: Flip Horizontal, Flip Vertical.
Ferramenta de dobra
A ferramenta Bend permite que você altere segmentos de curva separados e o ângulo das alças da curva para os pontos de ancoragem depois de criar um vetor.
Ferramenta de edição
A ferramenta Edit permite que você edite pontos de ancoragem (movê-los (movê-los e editar curvas de Bezier) e modificar segmentos entre dois pontos de ancoragem. Para ativar essa ferramenta, clique duas vezes no elemento que deseja editar.
Várias formas em uma única imagem vetorial
Você pode criar várias formas em uma única imagem vetorial. Para colocá-las acima ou abaixo umas das outras (como camadas), abra o menu de contexto clicando com o botão direito do mouse no elemento e selecione a opção "Trazer para frente" ou "Enviar para trás". Você também pode usar o botão ] ou [ atalhos.

Para excluir um elemento, pressione a tecla Backspace ou use o menu de contexto.
Importação de arquivos SVG

Use o menu de contexto, o menu da barra de ferramentas ou Cmd/Ctrl+l para importar uma imagem. Você pode importar qualquer imagem SVG de até 20 KB.

Conversão de um elemento vetorial em uma imagem e vice-versa
Para converter um elemento vetorial em uma imagem no formato SVG, selecione o elemento na prancheta e clique no botão Converter em imagem no painel de configurações à direita.
Após a conversão, o elemento vetorial será exibido na lista de camadas como Imagem, e o título e a extensão do arquivo serão exibidos nas configurações do elemento.

Para editar o arquivo SVG recebido, clique em Edit (Editar) - o editor de vetores será aberto. Quando você sair do editor, o elemento será salvo e convertido novamente em um arquivo SVG.

Para converter o arquivo SVG novamente em um elemento vetorial, selecione o elemento e clique em Vector.
Lista de atalhos de teclado
Para visualizar a lista completa de atalhos de teclado, clique em três pontos → Atalhos no editor.
Os atalhos também são especificados na tabela abaixo.
Visão geral dos principais recursos
Ler
Trabalhar com contêineres e criar elementos responsivos
Ler
Uma lista completa de atalhos para acelerar seu processo de design
Aberto
Fixação de elementos, paralaxe e animação fade-in
Ler
Animação complexa em várias etapas: Princípios básicos, configurações e exemplos
Ler

Como configurar uma animação de elemento ao clicar ou passar o mouse sobre outro elemento

Ler

Como você pode importar automaticamente um layout do Figma para o Zero Block

Ler
Fabricado em
Tilda