Editor vectorial In Zero Block

Cómo crear tus propias imágenes vectoriales en Tilda

En Zero Block editor, puede crear su propia imagen vectorial en el editor de vectores incorporado. Para ello, haga clic en el botón más para añadir nuevos elementos → Añadir vector.

Vaya a Configuración del elemento y haga clic en el botón "Editar vector". También puede empezar a trabajar con el vector haciendo doble clic en el elemento.
Se abrirá el editor de imágenes vectoriales. Hay 4 herramientas disponibles: Herramienta Seleccionar, Herramienta Dibujar, Herramienta Doblar y Herramienta Editar para puntos de anclaje.
Herramienta de dibujo

La herramienta Dibujar permite crear un nuevo vector añadiendo curvas de Bézier con puntos de anclaje (al hacer clic) y ajustando los tiradores de las curvas. Con esta puede crear líneas rectas y curvas.


Si mantiene pulsada la tecla Mayús, el siguiente punto de anclaje se colocará horizontal, vertical o diagonalmente en un ángulo de 45 grados con respecto al punto anterior.


Para cerrar la trayectoria, añada el último punto sobre el primero. Para mantener la forma abierta, haga doble clic en el último punto o utilice la tecla ESC.
Seleccionar herramienta
La herramienta Seleccionar te permite seleccionar, arrastrar, escalar y girar formas independientes que hayas creado, así como configurar sus ajustes: color y anchura de relleno y trazo.
Hay cuatro modos de escala:
  • Libre. El elemento se redimensiona libremente y no se mantiene la relación de aspecto.
  • Proporcional ( tecla Mayúsculas pulsada). El elemento cambia de tamaño y se mantiene la relación de aspecto.
  • Redimensionar desde el centro ( tecla Alt/Opción pulsada). El elemento mantiene su posición relativa al punto central. La relación de aspecto no se mantiene.
  • Redimensionar proporcionalmente desde el centro ( teclas Mayús + Alt/Opción pulsadas). El elemento mantiene su posición relativa al punto central. La relación de aspecto se mantiene.
Ejemplos de los 4 modos de escala
Hay dos formas de girar elementos:
  • Libre. El elemento puede girarse arbitrariamente moviendo el cursor sobre la esquina del elemento.
  • Rotación con un paso de 15 grados (Mayúsculas pulsada).

A reiniciar rotación, haga clic con el botón derecho para abrir el menú contextual del elemento y seleccione "Restablecer rotación".
A reflejar el elemento vertical u horizontalmente, utilice las opciones del menú contextual: Voltear horizontal, Voltear vertical.
Herramienta de plegado
La herramienta Doblar le permite cambiar segmentos de curva separados y el ángulo de las asas de la curva para los puntos de anclaje después de haber creado un vector.
Herramienta de edición
La herramienta Editar permite modificar los puntos de anclaje (moverlos moverlos y editar curvas de Bézier) y modificar segmentos entre dos puntos de anclaje. Para activar esta herramienta, haga doble clic en el elemento que desee editar.
Varias formas en una imagen vectorial
Puede crear varias formas dentro de una misma imagen vectorial. Para colocarlas unas encima o debajo de otras (como capas), abre el menú contextual con el botón derecho del ratón sobre el elemento y selecciona la opción "Traer al frente" o "Enviar al fondo". También puede utilizar el botón ] o [ accesos directos.

Para eliminar un elemento, pulse la tecla Retroceso o utilice el menú contextual.
Importación de archivos SVG

Utilice el menú contextual, el menú de la barra de herramientas o Cmd/Ctrl+l para importar una imagen. Puedes importar cualquier imagen SVG de hasta 20 KB.

Lista de atajos de teclado
Para ver la lista completa de atajos de teclado, haz clic en tres puntos → Atajos en el editor.
Los accesos directos también se especifican en la tabla siguiente.
Principales características
Trabajo con contenedores y creación de elementos adaptables
Una lista completa de atajos para acelerar el proceso de diseño
Fijación de elementos, paralaje y animación de fundido
Animación compleja de varios pasos: Principios básicos, ajustes y ejemplos

Cómo configurar la animación de un elemento al hacer clic o pasar el ratón por encima de otro elemento

Cómo importar automáticamente un diseño de Figma a Zero Block

Hecho en
Tilda