Vector Editor In Zero Block

Comment créer vos propres images vectorielles sur Tilda

Dans l'éditeur Zero Block , vous pouvez créer votre propre image vectorielle dans l'éditeur vectoriel intégré. Pour ce faire, cliquez sur le bouton plus pour l'ajout de nouveaux éléments → Ajouter un vecteur.

Allez dans Paramètres de l'élément et cliquez sur le bouton "Modifier le vecteur". Vous pouvez également commencer à travailler avec le vecteur en double-cliquant sur l'élément.
L'éditeur d'images vectorielles s'ouvre. Quatre outils sont disponibles : Outil de sélection, Outil de dessin, Outil de pliage et Outil d'édition pour les points d'ancrage.
Outil de dessin

L'outil Dessiner permet de créer un nouveau vecteur en ajoutant des courbes de Bézier avec des points d'ancrage (en cliquant). points d'ancrage (au clic) et en ajustant les poignées des courbes. Avec cet outil, vous pouvez créer des lignes droites et courbes. cet outil, vous pouvez créer des lignes droites et courbes.


Si vous maintenez la touche Shift enfoncée, le point d'ancrage suivant sera positionné horizontalement, verticalement ou en diagonale à un angle de 45 degrés par rapport au point précédent.


Pour fermer la trajectoire, ajoutez le dernier point par-dessus le premier. Pour garder la forme ouverte, double-cliquez sur le dernier point ou utilisez la touche ESC.
Sélectionner l'outil
L'outil Sélection vous permet de sélectionner, de faire glisser, de mettre à l'échelle et de faire pivoter des formes distinctes que vous avez créées, ainsi que de configurer leurs paramètres (couleur et largeur du remplissage et du trait).
Il existe quatre modes de mise à l'échelle :
  • Libre. L'élément est librement redimensionné et le rapport hauteur/largeur n'est pas respecté.
  • Proportionnel ( touche Majuscule maintenue enfoncée). L 'élément est redimensionné et le rapport hauteur/largeur est conservé.
  • Redimensionner à partir du centre ( touche Alt/Option maintenue enfoncée). L'élément conserve sa position par rapport au point central. Le rapport hauteur/largeur n'est pas conservé.
  • Redimensionner proportionnellement à partir du centre ( touches Shift + Alt/Option maintenues enfoncées). L'élément conserve sa position par rapport au point central. Le rapport hauteur/largeur est maintenu.
Exemples des 4 modes de mise à l'échelle
Il y a deux façons d'effectuer la rotation éléments:
  • Libre. L'élément peut être tourné arbitrairement en déplaçant le curseur sur le coin de l'élément.
  • Rotation avec un pas de 15 degrés (Majuscule maintenue enfoncée).

Pour réinitialiser Pour réinitialiser la rotation, cliquez avec le bouton droit de la souris pour ouvrir le menu contextuel de l'élément et sélectionnez "Réinitialiser la rotation".
Pour refléter l'élément verticalement ou horizontalement, utilisez les options du menu contextuel : Retourner horizontalement, Retourner verticalement.
Outil de pliage
L'outil Courbe permet de modifier des segments de courbe distincts et l'angle des poignées de la courbe. l'angle des poignées de courbe pour les points d'ancrage après avoir créé un vecteur.
Outil d'édition
L'outil Édition permet de modifier les points d'ancrage (déplacement les déplacer et modifier les courbes de Bézier) et de modifier les segments entre deux points d'ancrage. Pour activer cet outil, double-cliquez sur l'élément que vous souhaitez modifier.
Plusieurs formes dans une image vectorielle
Vous pouvez créer plusieurs formes à l'intérieur d'une même image vectorielle. Pour les placer les unes au-dessus ou au-dessous des autres (sous forme de calques), ouvrez le menu contextuel en cliquant avec le bouton droit de la souris sur l'élément et sélectionnez l'option "Ramener à l'avant" ou "Renvoyer à l'arrière". Vous pouvez également utiliser les boutons ] ou [ pour supprimer un élément.

Pour supprimer un élément, appuyez sur la touche Espace arrière ou utilisez le menu contextuel.
Importation de fichiers SVG

Utilisez le menu contextuel, le menu de la barre d'outils ou la commande Cmd/Ctrl+l pour importer une image. Vous pouvez importer n'importe quelle image SVG jusqu'à 20KB.

Liste des raccourcis clavier
Pour afficher la liste complète des raccourcis clavier, cliquez sur trois points → Raccourcis dans l'éditeur.
Les raccourcis sont également spécifiés dans le tableau ci-dessous.
Aperçu des principales caractéristiques
Travailler avec des conteneurs et créer des éléments réactifs
Une liste complète de raccourcis pour accélérer votre processus de conception
Fixation des éléments, parallaxe et animation en fondu enchaîné
Animation complexe en plusieurs étapes : Principes de base, réglages et exemples

Comment mettre en place une animation d'un élément en cas de clic ou de survol d'un autre élément ?

Comment importer automatiquement une mise en page de Figma vers Zero Block

Fabriqué le
Tilda