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.

Convertir un elemento vectorial en una imagen y viceversa
Para convertir un elemento vectorial en una imagen en formato SVG, seleccione el elemento en la mesa de trabajo y haga clic en el botón Convertir en imagen del panel de configuración derecho.
Tras la conversión, el elemento vectorial se mostrará en la lista de capas como Imagen, y el título y la extensión del archivo se mostrarán en la configuración del elemento.

Para editar el archivo SVG recibido, haga clic en Editar - se abrirá el editor vectorial. Una vez que salga del editor, el elemento se guardará y se convertirá de nuevo en un archivo SVG.

Para volver a convertir el archivo SVG en un elemento vectorial - seleccione el elemento y haga clic en a Vector.
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
Leer
Trabajo con contenedores y creación de elementos adaptables
Leer
Una lista completa de atajos para acelerar el proceso de diseño
Abrir
Fijación de elementos, paralaje y animación de fundido
Leer
Animación compleja de varios pasos: Principios básicos, ajustes y ejemplos
Leer

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

Leer

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

Leer
Hecho en
Tilda