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.

In Zero Block: the "Add Vector" option in the elements menu under the plus button in the upper-left corner.

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.

Zero Block: the "EDIT VECTOR" button in the "ELEMENT SETTINGS" panel on the right.

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.

Vector editor in Zero Block: a duplicated curved vector shape being moved and positioned on the canvas.

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.

Zero Block Vector Editor: context menu for a selected vector shape with options to copy, paste, delete, arrange, and flip.

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.

Vector editor in Zero Block: the top toolbar with drawing tools, "FILL", "STROKE", and "SAVE & CLOSE" button over an edited shape.

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.

Zero Block: vector editor toolbar at the top and an editable curved path with anchor points on the canvas.

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.

Vector editor in Zero Block: the context menu for a selected shape with options like "Bring to front", "Send to back", and flip settings.

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.

Zero Block vector editor: the three-dots menu on the top toolbar with the "Shortcuts" and "Import SVG" options.

The vector editor in Zero Block with a context menu showing the "Paste here", "Import SVG here", and "Save and close" options.

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.

In Zero Block: the "Convert to Image" option in the "VECTOR EDITOR" section of the "ELEMENT SETTINGS" panel.

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.