Vectra
Dibujo vectorial, trazados, tipografía, booleanas y pathfinder, más once espacios de trabajo de diseño para marca, logo, icono, patrón, packaging, infografía y UX.
En una frase#
Formas y texto nítidos, infinitamente escalables: el módulo para logos, iconos, maquetas de interfaz y cualquier cosa que tenga que verse limpia a cualquier tamaño.
Diseño#
| Barra de menú | File · Edit · Object · Type · Select · View · Plugins |
| Pestañas de documento | un conjunto de mesas de trabajo por pestaña |
| Barra de herramientas | deshacer/rehacer, duplicar, la vista de código SVG, operaciones booleanas, bloquear, las muestras de fill y stroke con el grosor del trazo, y los botones de alinear/distribuir |
| Barra de guías | Grid con su espaciado · Snap · Rulers · una cuadrícula de logo · Safe area · Smart guides |
| Barra izquierda | selección, selección directa, texto, línea, rectángulo, pluma, forma, rotar, tijeras, pincel, añadir ancla, mesa de trabajo, mano |
| Derecha | Properties · Layers · Text · Illust |
| Barra de estado | mesa de trabajo, su tamaño, número de objetos, número de seleccionados, posición en el historial, herramienta activa, zoom |
Qué haces aquí#
Dibujar#
La pen coloca anclas y manejadores; direct select los edita después.
Formas, líneas y texto son herramientas propias. Las pistas están en la barra
de herramientas y vale la pena leerlas una vez: Shift restringe, Alt
dibuja desde el centro, las flechas desplazan.
Posicionar con precisión#
La sección Transform admite números exactos (X, Y, ancho, alto, rotación) junto a Flip H, Flip V, y un restablecimiento a 0°. Los botones de alinear y distribuir de la barra de herramientas actúan sobre una selección, y las guías Smart se ajustan a los demás objetos en lugar de a la cuadrícula.
Relleno y trazo#
Los dos se pueden activar por separado: una forma puede tener relleno sin trazo, trazo sin relleno, o ninguno de los dos. Los colores se editan como hex. Bajo Appearance: opacidad, modo de fusión, y visibilidad.
Combinar formas#
Pathfinder y las operaciones booleanas de la barra de herramientas: unión, resta, intersección, exclusión. Un grupo booleano sigue siendo editable, Release boolean group está en la paleta de comandos para cuando necesitas recuperar las piezas.
Tipografía#
La pestaña Text contiene los controles tipográficos; el menú Type contiene las operaciones: convertir texto a trazados, y demás.
Efectos#
La sección Effects se aplica de forma no destructiva, así que la geometría de debajo sigue siendo la geometría que dibujaste.
Leer el SVG#
El botón de código en la barra de herramientas muestra el documento como SVG. Útil para comprobar qué se va a exportar realmente, y para pegar un trazado que viene de otro sitio.
El panel derecho: cuatro pestañas, y luego once espacios de trabajo#
Pestañas principales, las cuatro que usas constantemente:
| Properties | transformación, relleno, trazo, apariencia, efectos, alinear, pathfinder |
| Layers | cada objeto, reordenable, ocultable, bloqueable |
| Text | los controles tipográficos |
| Illust | el lado de ilustración: pinceles, con una biblioteca de pinceles cuyos pinceles son editables por tipo |
Debajo, un acordeón llamado Workspaces esconde once paneles de escenario hasta que los necesitas. Esta es la parte de Vectra que no es una herramienta de dibujo sino un asistente de diseño, y es fácil pasarla por alto porque viene colapsada por defecto:
| Espacio de trabajo | Para qué sirve |
|---|---|
| Brand | una identidad de marca: la lista de entregables (logo primario, invertido y monocromo, icono/símbolo, PDF de directrices de marca), con secciones que activas o desactivas |
| Logo | tipos de logo, mockups y presets de exportación: las variaciones en las que un logo tiene que salir |
| Icon | sets de iconos: tamaños, keylines, y los presets de cada plataforma de apps |
| Pattern | patrones repetitivos: tipos de tile (cuerda, cadena, discontinuo y el resto), grupos de papel pintado y presets de motivos |
| Pack | packaging: cajas de producto y las demás plantillas de troquel |
| Infog | infografías: tipos de diagrama, formas de diagrama de flujo (datos como un paralelogramo, base de datos como un cilindro…) y tipos de gráfico |
| UX | diseño de pantallas: marcos de dispositivo y presets de breakpoint |
| DA | dirección de arte: metadatos del proyecto, style tiles, y exportación de design tokens |
| Auto Layout | auto-layout al estilo Figma sobre el frame o grupo seleccionado |
| Components | símbolos reutilizables: definir una vez, colocar muchas |
| Export | un selector de formato que controla las opciones por formato |
El acordeón se abre solo cuando ya hay una pestaña de espacio de trabajo activa, y el encabezado muestra cuál es. Si un panel que usaste ayer parece haber desaparecido, está detrás de Workspaces.
Exportar#
Vectra exporta de ocho formas, y el panel dice para qué sirve cada una en lugar de dejarte adivinar:
| Formato | |
|---|---|
| PNG | ráster con transparencia, web e interfaz |
| JPG | ráster comprimido, sin transparencia |
| WebP | web moderna, pequeño, con transparencia |
| AVIF | mejor compresión, amplio soporte |
| SVG | vector: escalable y todavía editable |
| documento universal, impresión y web | |
| EPS | impresión profesional, compatible con Adobe |
| JSON | el documento como datos |
Lo que exportas también es una elección: la selección, la mesa de trabajo, todas las mesas de trabajo, o las slices: la herramienta Slice Tool corta el lienzo en regiones con nombre y las exporta juntas, que es cómo una maqueta de interfaz sale como un conjunto de assets en lugar de una sola imagen.
Producción de impresión#
La parte de Vectra que lo convierte en una herramienta de preimpresión y no solo de dibujo. Print Production añade las marcas que espera una imprenta:
| Crop marks | dónde cortar |
| Registration marks | objetivos de alineación para la prensa |
| Colour bars | la tira de calibración CMYK |
| Bleed (mm) | arte extendido más allá de la línea de corte, para que un milímetro de desviación no se vea como un borde blanco |
| Overprint preview | lo que va a pasar realmente donde se superponen las tintas |
| Scale bar | para un dibujo impreso a escala |
⚠️ El CMYK de aquí es simulado. El propio panel lo dice: los valores son una vista previa, y un color de impresión preciso necesita un flujo de gestión de color calibrado. Trata la lectura de CMYK como una guía, no como una prueba, y ten en cuenta que la exportación CMYK no lleva transparencia, que es una propiedad del modelo de color, no una limitación de Vectra.
Archivos que lee y escribe#
| Formato nativo | .vectra |
| Importa | .svg |
| Exporta | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Enviar trabajo a otros módulos#
Produce arte vectorial y objetos Vectra: el mismo dibujo en dos formas. Acepta arte vectorial e imágenes.
| Destino | Qué llega |
|---|---|
| Inkwell, Composer | arte vectorial, todavía editable |
| Animator | objetos Vectra, animables uno por uno |
| Engine | una jerarquía de HUD, no una imagen |
Ese último es el sentido de Vectra para un juego. Una maqueta de pantalla enviada a Engine llega como una estructura que Engine puede maquetar y programar, botones que son botones, en lugar de una imagen aplanada que tendrías que reconstruir.
Trabajar con otra persona#
Vectra sincroniza operación por operación: objetos añadidos, eliminados, actualizados y reemplazados por completo; capas y su orden; el tamaño de la mesa de trabajo; y la capa activa.
Límites y problemas habituales#
- Un panel que no encuentras probablemente está bajo Workspaces. Solo se muestran cuatro pestañas; los otros once están detrás del acordeón colapsado.
- Una forma sin relleno y sin trazo es invisible pero sigue ahí. El número de objetos de la barra de estado es la pista.
- Las smart guides se ajustan a los objetos, la cuadrícula se ajusta a la cuadrícula. Si algo no cae donde quieres, comprueba cuál de las dos está activa.