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.

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
Trabalhar com contêineres e criar elementos responsivos
Uma lista completa de atalhos para acelerar seu processo de design
Fixação de elementos, paralaxe e animação fade-in
Animação complexa em várias etapas: Princípios básicos, configurações e exemplos

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

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

Fabricado em
Tilda