Edytor wektorowy w Zero Block

Jak tworzyć własne obrazy wektorowe na Tilda

W edytorze Zero Block można utworzyć własny obraz wektorowy we wbudowanym edytorze wektorów. Aby to zrobić, kliknij przycisk plusa do dodawania nowych elementów → Dodaj wektor.

Przejdź do Ustawień elementu i kliknij przycisk "Edytuj wektor". Możesz także rozpocząć pracę z wektorem, klikając dwukrotnie element.
Otworzy się edytor obrazów wektorowych. Dostępne są 4 narzędzia: Select Tool (Narzędzie wyboru ), Draw Tool (Narzędzie rysowania), Bend Tool (Narzędzie zginania) i Edit Tool (Narzędzie edycji punktów kontrolnych).
Narzędzie do rysowania

Narzędzie Rysuj umożliwia utworzenie nowego wektora poprzez dodanie krzywych Beziera z punktami kontrolnymi (po kliknięciu) i dostosowując uchwyty krzywej. Za pomocą tego można tworzyć linie proste i zakrzywione.


Jeśli przytrzymasz klawisz Shift, następny punkt kontrolny zostanie ustawiony poziomo, pionowo lub ukośnie pod kątem 45 stopni w stosunku do poprzedniego punktu.


Aby zamknąć ścieżkę, dodaj ostatni punkt nad pierwszym. Aby zachować otwarty kształt, kliknij dwukrotnie ostatni punkt lub użyj klawisza ESC.
Wybierz narzędzie
Narzędzie Zaznaczanie umożliwia zaznaczanie, przeciąganie, skalowanie i obracanie utworzonych kształtów, a także konfigurowanie ich ustawień - koloru wypełnienia i obrysu oraz szerokości.
Dostępne są cztery tryby skalowania:
  • Dowolny. Rozmiar elementu można dowolnie zmieniać, a proporcje nie są zachowywane.
  • Proporcjonalny ( przytrzymany klawisz Shift ). Rozmiar elementu zostanie zmieniony, a współczynnik proporcji zostanie zachowany.
  • Zmiana rozmiaru od środka ( przytrzymany klawisz Alt/Option ). Element zachowuje swoje położenie względem punktu centralnego. Współczynnik proporcji nie jest zachowywany.
  • Zmień rozmiar proporcjonalnie od środka ( klawisze Shift + Alt/Option wciśnięte). Element zachowuje swoją pozycję względem punktu centralnego. Współczynnik proporcji jest zachowany.
Przykłady 4 trybów skalowania
Istnieją dwa sposoby rotacji elementy:
  • Dowolnie. Element można dowolnie obracać, przesuwając kursor nad jego rogiem .
  • Obrót z krokiem 15 stopni (Shift przytrzymany).

Do reset obrót, kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe elementu i wybierz "Resetuj obrót".
do odbicie lustrzane elementu w pionie lub poziomie służą opcje menu kontekstowego: Odbij w poziomie, Odbij w pionie.
Narzędzie do zginania
Narzędzie Wygięcie umożliwia zmianę oddzielnych segmentów krzywej i kąta kąta uchwytów krzywej dla punktów kontrolnych po utworzeniu wektora.
Narzędzie edycji
Narzędzie Edycja umożliwia edycję punktów kontrolnych (przesuwanie i edycję krzywych Beziera) oraz modyfikowanie segmentów między dwoma punktami kontrolnymi. Aby włączyć to narzędzie, kliknij dwukrotnie element, który chcesz edytować.
Kilka kształtów w jednym obrazie wektorowym
W ramach jednego obrazu wektorowego można utworzyć kilka kształtów. Aby umieścić je nad lub pod sobą (jako warstwy), otwórz menu kontekstowe prawym przyciskiem myszy na elemencie i wybierz opcję "Przenieś do przodu" lub "Wyślij do tyłu". Można również użyć opcji ] lub [ .

Aby usunąć element, naciśnij klawisz Backspace lub użyj menu kontekstowego.
Import plików SVG

Użyj menu kontekstowego, menu paska narzędzi lub Cmd/Ctrl+l aby zaimportować obraz. Można importować dowolny obraz SVG o rozmiarze do 20 KB.

Lista skrótów klawiaturowych
Aby wyświetlić pełną listę skrótów klawiaturowych, kliknij trzy kropki → Skróty w edytorze.
Skróty są również określone w poniższej tabeli.
Przegląd głównych funkcji
Praca z kontenerami i tworzenie responsywnych elementów
Pełna lista skrótów przyspieszających proces projektowania
Mocowanie elementów, paralaksa i animacja zanikania
Złożona animacja wieloetapowa: Podstawowe zasady, ustawienia i przykłady

Jak ustawić animację elementu po kliknięciu lub najechaniu na inny element?

Jak automatycznie zaimportować układ z programu Figma do aplikacji Zero Block

Wykonane na
Tilda