Vectra
Desen vectorial, trasee, tipografie, operații booleene și pathfinder, plus unsprezece spații de lucru pentru brand, logo, iconițe, pattern, ambalaj, infografice și UX.
Pe scurt#
Forme și text nete, scalabile la infinit: studioul pentru logo-uri, iconițe, mock-up-uri de UI și orice trebuie să rămână clar la orice dimensiune.
Organizarea interfeței#
| Bara de meniu | File · Edit · Object · Type · Select · View · Plugins |
| Tab-uri document | un set de planșe per tab |
| Bara de instrumente | undo/redo, duplicare, vizualizarea codului SVG, operații booleene, blocare, mostrele de fill și stroke cu grosimea liniei, și butoanele de aliniere/distribuire |
| Bara de ghidaje | Grid cu spațierea lui · Snap · Rulers · o grilă de logo · Safe area · Smart guides |
| Bara laterală stângă | select, direct-select, type, line, rectangle, pen, shape, rotate, scissors, brush, add-anchor, artboard, hand |
| Dreapta | Properties · Layers · Text · Illust |
| Bara de stare | planșa, dimensiunea ei, numărul de obiecte, numărul selecției, poziția în istoric, instrumentul activ, zoom |
Ce faci aici#
Desenare#
Pen plasează ancore și mânere; direct select le editează ulterior.
Formele, liniile și textul sunt instrumente proprii. Indiciile stau pe bara de
instrumente și merită citite măcar o dată: Shift constrânge, Alt desenează
din centru, tastele săgeți deplasează ușor.
Poziționare precisă#
Secțiunea Transform preia numere exacte (X, Y, lățime, înălțime, rotație) alături de Flip H, Flip V, și o resetare la 0°. Butoanele de aliniere și distribuire de pe bara de instrumente acționează asupra unei selecții, iar ghidajele Smart se prind de celelalte obiecte, nu de grilă.
Fill și stroke#
Ambele pot fi comutate independent: o formă poate avea fill fără stroke, stroke fără fill, sau niciunul. Culorile sunt editabile ca hex. Sub Appearance: opacitate, mod de amestecare și vizibilitate.
Combinarea formelor#
Pathfinder și operațiile booleene de pe bara de instrumente: uniune, scădere, intersecție, excludere. Un grup boolean rămâne editabil; Release boolean group se află în paleta de comenzi atunci când ai nevoie de piesele înapoi.
Tipografie#
Tab-ul Text deține controalele tipografice; meniul Type deține operațiile: conversia textului în contururi, și altele.
Efecte#
Secțiunea Effects se aplică non-distructiv, astfel încât geometria de dedesubt rămâne geometria pe care ai desenat-o.
Citirea SVG-ului#
Butonul de cod de pe bara de instrumente arată documentul ca SVG. Util pentru a verifica ce va fi exportat de fapt, și pentru a lipi un traseu venit din altă parte.
Panoul din dreapta: patru tab-uri, apoi unsprezece spații de lucru#
Primary tabs, cele patru pe care le folosești constant:
| Properties | transform, fill, stroke, appearance, effects, align, pathfinder |
| Layers | fiecare obiect, reordonabil, ascundibil, blocabil |
| Text | controalele tipografice |
| Illust | partea de ilustrație: pensule, cu o bibliotecă de pensule ale cărei pensule sunt editabile pe tip |
Sub ele, un acordeon numit Workspaces ascunde unsprezece panouri de scenariu până când ai nevoie de ele. Aceasta este partea din Vectra care nu este un instrument de desen, ci un asistent de design, și este ușor de ratat pentru că este restrânsă implicit:
| Workspace | Pentru ce este |
|---|---|
| Brand | o identitate de brand: lista de livrabile (logo principal, inversat și monocrom, iconiță/simbol, PDF cu ghidul de brand), cu secțiuni pe care le activezi sau dezactivezi |
| Logo | tipuri de logo, mockup-uri și presetări de export: variantele în care trebuie livrat un logo |
| Icon | seturi de iconițe: dimensiuni, keylines, și presetările pentru platformele de aplicații |
| Pattern | modele repetitive: tipuri de tile (rope, chain, dashed și restul), grupuri wallpaper și presetări de motive |
| Pack | ambalaj: cutii de produs și celelalte șabloane de die-line |
| Infog | infografice: tipuri de diagrame, forme de flowchart (data ca paralelogram, baza de date ca cilindru…) și tipuri de grafice |
| UX | design de ecrane: rame de dispozitiv și presetări de breakpoint |
| DA | direcție de artă: metadate de proiect, style tiles, și exportul de design tokens |
| Auto Layout | auto-layout în stil Figma pe cadrul sau grupul selectat |
| Components | simboluri reutilizabile: definește o dată, plasează de multe ori |
| Export | un selector de format care controlează opțiunile specifice fiecărui format |
Acordeonul se deschide singur atunci când un tab de workspace este deja activ, iar antetul arată care anume. Dacă un panou pe care l-ai folosit ieri pare dispărut, este în spatele Workspaces.
Exportare#
Vectra exportă în opt moduri, iar panoul spune la ce folosește fiecare, în loc să te lase să ghicești:
| Format | |
|---|---|
| PNG | raster cu transparență, web și UI |
| JPG | raster comprimat, fără transparență |
| WebP | web modern, mic, cu transparență |
| AVIF | cea mai bună compresie, suport larg |
| SVG | vector: scalabil și încă editabil |
| document universal, print și web | |
| EPS | print profesional, compatibil Adobe |
| JSON | documentul ca date |
Ce exporți este și el o alegere: selection, artboard, all planșele, sau slices: Slice Tool taie pânza în regiuni numite și le exportă împreună, ceea ce este felul în care un mock de UI iese ca un set de assets, nu ca o singură imagine.
Producție pentru tipar#
Partea din Vectra care îl transformă într-un instrument de prepress, nu doar de desenat. Print Production adaugă marcajele pe care le așteaptă o tipografie:
| Crop marks | unde se taie |
| Registration marks | ținte de aliniere pentru presă |
| Colour bars | banda de calibrare CMYK |
| Bleed (mm) | grafica extinsă dincolo de linia de tăiere, astfel încât un milimetru de derivă nu apare ca o margine albă |
| Overprint preview | ce se va întâmpla de fapt acolo unde cernelurile se suprapun |
| Scale bar | pentru un desen tipărit la o scară |
⚠️ CMYK-ul de aici este simulat. Panoul spune asta chiar el: valorile sunt o previzualizare, iar culoarea de tipar precisă are nevoie de un flux de lucru calibrat de gestionare a culorii. Tratează valorile CMYK ca pe un ghid, nu ca pe o dovadă, și reține că exportul CMYK nu poartă nicio transparență, ceea ce este o proprietate a modelului de culoare, nu o limitare a Vectra.
Fișiere pe care le citește și le scrie#
| Format nativ | .vectra |
| Importă | .svg |
| Exportă | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Trimiterea lucrului către alte studiouri#
Produce grafică vectorială și obiecte Vectra: același desen în două forme. Acceptă grafică vectorială și imagini.
| Destinație | Ce ajunge |
|---|---|
| Inkwell, Composer | grafică vectorială, încă editabilă |
| Animator | obiecte Vectra, animabile unul câte unul |
| Engine | o ierarhie HUD, nu o imagine |
Acesta din urmă este esența Vectra pentru un joc. Un mock-up de ecran trimis către Engine ajunge ca o structură pe care Engine o poate așeza și scripta, butoane care sunt chiar butoane, nu o imagine aplatizată pe care ar trebui s-o reconstruiești.
Lucrul cu altcineva#
Vectra se sincronizează operație cu operație: obiecte adăugate, șterse, actualizate și înlocuite integral; straturile și ordinea lor; dimensiunea planșei; și stratul activ.
Limitări și probleme frecvente#
- Un panou pe care nu îl găsești este probabil sub Workspaces. Doar patru tab-uri sunt afișate; celelalte unsprezece sunt în spatele acordeonului restrâns.
- O formă fără fill și fără stroke este invizibilă, dar tot există. Numărul de obiecte din bara de stare te dă de gol.
- Smart guides se prind de obiecte, grila se prinde de grilă. Dacă ceva nu ajunge unde vrei, verifică pe care dintre cele două este activ.