Vectra
Vektorzeichnen, Pfade, Schrift, Booleans und Pathfinder, dazu elf Design-Workspaces für Marke, Logo, Icon, Muster, Verpackung, Infografiken und UX.
In einem Satz#
Scharfe, unendlich skalierbare Formen und Text: das Studio für Logos, Icons, UI-Mock-ups und alles, was bei jeder Größe scharf bleiben muss.
Der Aufbau#
| Menüleiste | File · Edit · Object · Type · Select · View · Plugins |
| Dokument-Tabs | ein Zeichenflächen-Set pro Tab |
| Werkzeugleiste | Rückgängig/Wiederholen, Duplizieren, die SVG-Codeansicht, Boolesche Operationen, Sperre, die Swatches für Fill und Stroke mit der Strichstärke, und die Ausrichten-/Verteilen-Schaltflächen |
| Hilfslinien-Leiste | Raster mit seinem Abstand · Snap · Lineale · ein Logo-Raster · Sicherheitsbereich · Smart Guides |
| Linke Leiste | Auswählen, Direktauswahl, Text, Linie, Rechteck, Zeichenstift, Form, Drehen, Schere, Pinsel, Anker hinzufügen, Zeichenfläche, Hand |
| Rechts | Properties · Layers · Text · Illust |
| Statusleiste | Zeichenfläche, ihre Größe, Objektanzahl, Auswahlanzahl, Verlaufsposition, aktives Werkzeug, Zoom |
Was Sie hier tun#
Zeichnen#
Der Zeichenstift setzt Anker und Griffe; Direktauswahl bearbeitet sie
danach. Formen, Linien und Text sind eigene Werkzeuge. Die Hinweise stehen
auf der Werkzeugleiste und lohnen sich, einmal gelesen zu werden: Shift
schränkt ein, Alt zeichnet von der Mitte aus, die Pfeiltasten schubsen.
Präzise positionieren#
Der Abschnitt Transform nimmt exakte Zahlen (X, Y, Breite, Höhe, Rotation) entgegen, dazu Flip H, Flip V, und ein Reset auf 0°. Die Ausrichten- und Verteilen-Schaltflächen auf der Werkzeugleiste wirken auf eine Auswahl, und Smart-Hilfslinien rasten an anderen Objekten ein, nicht am Raster.
Fill und Stroke#
Beide sind unabhängig voneinander umschaltbar: Eine Form kann eine Füllung ohne Kontur sein, eine Kontur ohne Füllung, oder keins von beidem. Farben sind als Hex bearbeitbar. Unter Appearance: Deckkraft, Mischmodus, und Sichtbarkeit.
Formen kombinieren#
Pathfinder und die booleschen Operationen auf der Werkzeugleiste: Vereinigung, Subtraktion, Schnittmenge, Ausschluss. Eine boolesche Gruppe bleibt bearbeitbar, Release boolean group findet sich in der Befehlspalette, wenn Sie die Einzelteile zurückbrauchen.
Schrift#
Der Tab Text hält die typografischen Regler; das Menü Type hält die Operationen: Text in Konturen umwandeln, und so weiter.
Effekte#
Der Abschnitt Effects wirkt nicht-destruktiv, die Geometrie darunter bleibt also die Geometrie, die Sie gezeichnet haben.
Den SVG-Code lesen#
Die Code-Schaltfläche auf der Werkzeugleiste zeigt das Dokument als SVG. Nützlich, um zu prüfen, was tatsächlich exportiert wird, und um einen Pfad von anderswo einzufügen.
Das rechte Panel: vier Tabs, dann elf Workspaces#
Primäre Tabs, die vier, die Sie ständig nutzen:
| Properties | Transform, Fill, Stroke, Appearance, Effekte, Ausrichten, Pathfinder |
| Layers | jedes Objekt, umsortierbar, ausblendbar, sperrbar |
| Text | die typografischen Regler |
| Illust | die illustrative Seite: Pinsel, mit einer Pinselbibliothek, deren Pinsel je nach Typ bearbeitbar sind |
Darunter blendet ein Akkordeon namens Workspaces elf Szenario-Panels aus, bis Sie sie brauchen. Das ist der Teil von Vectra, der kein Zeichenwerkzeug ist, sondern ein Design-Assistent, und er wird leicht übersehen, weil er standardmäßig eingeklappt ist:
| Workspace | Wofür |
|---|---|
| Brand | eine Markenidentität: die Checkliste der Ergebnisse (primäres, invertiertes und einfarbiges Logo, Icon/Symbol, Markenrichtlinien-PDF), mit Abschnitten, die sich ein- und ausschalten lassen |
| Logo | Logo-Typen, Mockups und Export-Voreinstellungen: die Varianten, in denen ein Logo ausgeliefert werden muss |
| Icon | Icon-Sets: Größen, Keylines, und die App-Plattform-Voreinstellungen |
| Pattern | sich wiederholende Muster: Kacheltypen (Seil, Kette, gestrichelt und der Rest), Tapetengruppen und Motiv-Voreinstellungen |
| Pack | Verpackung: Produktschachteln und die übrigen Stanzform-Vorlagen |
| Infog | Infografiken: Diagrammtypen, Flussdiagramm-Formen (Daten als Parallelogramm, Datenbank als Zylinder …) und Diagrammtypen |
| UX | Bildschirmdesign: Gerätrahmen und Breakpoint-Voreinstellungen |
| DA | Art Direction: Projektmetadaten, Style Tiles, und Design-Token-Export |
| Auto Layout | Figma-artiges Auto-Layout auf dem ausgewählten Frame oder der Gruppe |
| Components | wiederverwendbare Symbole: einmal definieren, mehrfach platzieren |
| Export | ein Formatwähler, der die Optionen je Format steuert |
Das Akkordeon öffnet sich von selbst, wenn ein Workspace-Tab bereits aktiv ist, und die Kopfzeile zeigt, welcher es ist. Fehlt ein Panel, das Sie gestern genutzt haben, steckt es hinter Workspaces.
Exportieren#
Vectra exportiert auf acht Wegen, und das Panel sagt, wofür jeder gedacht ist, statt Sie raten zu lassen:
| Format | |
|---|---|
| PNG | Raster mit Transparenz, Web und UI |
| JPG | komprimiertes Raster, keine Transparenz |
| WebP | modernes Web, klein, mit Transparenz |
| AVIF | beste Kompression, breite Unterstützung |
| SVG | Vektor: skalierbar und weiterhin bearbeitbar |
| universelles Dokument, Druck und Web | |
| EPS | professioneller Druck, Adobe-kompatibel |
| JSON | das Dokument als Daten |
Was Sie exportieren, ist auch eine Wahl: die Auswahl, die Zeichenfläche, alle Zeichenflächen, oder die Slices: Das Slice-Werkzeug zerschneidet die Leinwand in benannte Bereiche und exportiert sie gemeinsam, so verlässt ein UI-Mock als Asset-Set die App, statt als ein einzelnes Bild.
Druckproduktion#
Der Teil von Vectra, der es zu einem Druckvorstufen-Werkzeug macht und nicht nur zu einem Zeichenprogramm. Print Production fügt die Markierungen hinzu, die eine Druckerei erwartet:
| Crop marks | wo geschnitten wird |
| Registration marks | Ausrichtungsmarken für die Druckmaschine |
| Colour bars | der CMYK-Kalibrierstreifen |
| Bleed (mm) | über den Beschnitt hinaus verlängertes Bildmaterial, damit ein Millimeter Drift nicht als weißer Rand sichtbar wird |
| Overprint preview | was tatsächlich passiert, wo sich Farben überlappen |
| Scale bar | für eine im Maßstab gedruckte Zeichnung |
⚠️ CMYK ist hier simuliert. Das Panel sagt das selbst: Die Werte sind eine Vorschau, und exakte Druckfarben brauchen einen kalibrierten Farbmanagement-Workflow. Behandeln Sie die CMYK-Anzeige als Anhaltspunkt, nicht als Beweis, und beachten Sie, dass der CMYK-Export keine Transparenz kennt, eine Eigenschaft des Farbmodells, keine Einschränkung von Vectra.
Dateien, die es liest und schreibt#
| Natives Format | .vectra |
| Importe | .svg |
| Exporte | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Arbeit an andere Module schicken#
Erzeugt Vektorgrafik und Vectra-Objekte: dieselbe Zeichnung in zwei Formen. Nimmt an Vektorgrafik und Bilder.
| Ziel | Was ankommt |
|---|---|
| Inkwell, Composer | Vektorgrafik, weiterhin bearbeitbar |
| Animator | Vectra-Objekte, einzeln animierbar |
| Engine | eine HUD-Hierarchie, kein Bild |
Genau Letzteres ist der Sinn von Vectra für ein Spiel. Ein an die Engine gesendetes Bildschirm-Mock-up kommt als Struktur an, die die Engine anordnen und skripten kann, Schaltflächen, die wirklich Schaltflächen sind, statt als abgeflachtes Bild, das neu aufgebaut werden müsste.
Mit jemand anderem arbeiten#
Vectra synchronisiert Operation für Operation: hinzugefügte, gelöschte, aktualisierte und komplett ersetzte Objekte; Ebenen und ihre Reihenfolge; die Zeichenflächengröße; und die aktive Ebene.
Grenzen und häufige Stolperfallen#
- Ein Panel, das Sie nicht finden, steckt wahrscheinlich unter Workspaces. Nur vier Tabs sind sichtbar; die anderen elf liegen hinter dem eingeklappten Akkordeon.
- Eine Form ohne Füllung und ohne Kontur ist unsichtbar, aber trotzdem da. Die Objektanzahl in der Statusleiste verrät es.
- Smart Guides rasten an Objekten ein, das Raster rastet am Raster ein. Landet etwas nicht dort, wo Sie es wollen, prüfen Sie, welches der beiden aktiv ist.