Vectra
Disegno vettoriale, tracciati, testo, operazioni booleane e pathfinder, più undici spazi di lavoro per marchio, logo, icona, pattern, packaging, infografiche e UX.
In breve#
Forme e testo nitidi e scalabili all'infinito: lo studio per loghi, icone, mock-up di interfaccia e tutto ciò che deve restare nitido a qualsiasi dimensione.
Il layout#
| Barra dei menu | File · Edit · Object · Type · Select · View · Plugins |
| Schede documento | un set di tavole da disegno per scheda |
| Barra degli strumenti | annulla/ripeti, duplica, la vista codice SVG, le operazioni booleane, blocco, i campioni di fill e stroke con lo spessore del contorno, e i pulsanti di allineamento/distribuzione |
| Barra delle guide | Grid con la propria spaziatura · Snap · Rulers · una griglia per logo · Safe area · Smart guides |
| Colonna sinistra | selezione, selezione diretta, testo, linea, rettangolo, penna, forma, rotazione, forbici, pennello, aggiungi ancora, tavola da disegno, mano |
| Destra | Properties · Layers · Text · Illust |
| Barra di stato | tavola da disegno, la sua dimensione, numero di oggetti, numero di selezionati, posizione nella cronologia, strumento attivo, zoom |
Cosa si fa qui#
Disegnare#
La penna posiziona ancore e maniglie; direct select le modifica in seguito. Forme, linee e testo hanno strumenti propri. I suggerimenti vivono sulla barra degli strumenti e vale la pena leggerli una volta: Shift vincola, Alt disegna dal centro, le frecce spostano di poco.
Posizionare con precisione#
La sezione Transform accetta numeri esatti (X, Y, larghezza, altezza, rotazione) insieme a Flip H, Flip V, e un reset a 0°. I pulsanti di allineamento e distribuzione sulla barra degli strumenti lavorano su una selezione, e le guide Smart si agganciano agli altri oggetti invece che alla griglia.
Fill e stroke#
Entrambi si attivano indipendentemente: una forma può essere un fill senza stroke, uno stroke senza fill, o nessuno dei due. I colori si modificano in esadecimale. Sotto Appearance: opacità, modalità di fusione, e visibilità.
Combinare le forme#
Pathfinder e le operazioni booleane sulla barra degli strumenti: unione, sottrazione, intersezione, esclusione. Un gruppo booleano resta modificabile, Release boolean group è nella palette dei comandi quando ti servono di nuovo i pezzi.
Testo#
La scheda Text contiene i controlli tipografici; il menu Type contiene le operazioni: convertire il testo in tracciati, e così via.
Effetti#
La sezione Effects si applica in modo non distruttivo, quindi la geometria sottostante resta quella che hai disegnato.
Leggere l'SVG#
Il pulsante codice sulla barra degli strumenti mostra il documento come SVG. Utile per verificare cosa verrà effettivamente esportato, e per incollare un tracciato arrivato da altrove.
Il pannello destro: quattro schede, poi undici spazi di lavoro#
Schede principali, le quattro che usi di continuo:
| Properties | transform, fill, stroke, appearance, effetti, allineamento, pathfinder |
| Layers | ogni oggetto, riordinabile, nascondibile, bloccabile |
| Text | i controlli tipografici |
| Illust | il lato illustrazione: pennelli, con una libreria pennelli i cui pennelli sono modificabili per tipo |
Sotto di esse, una fisarmonica etichettata Workspaces nasconde undici pannelli di scenario finché non ne hai bisogno. È la parte di Vectra che non è uno strumento di disegno ma un assistente di design, ed è facile non notarla perché è chiusa per impostazione predefinita:
| Spazio di lavoro | A cosa serve |
|---|---|
| Brand | un'identità di marchio: la checklist dei deliverable (logo primario, invertito e monocromatico, icona/simbolo, PDF delle linee guida), con sezioni che attivi o disattivi |
| Logo | tipi di logo, mockup e preset di export: le varianti in cui un logo deve essere consegnato |
| Icon | set di icone: dimensioni, keyline, e i preset per piattaforma app |
| Pattern | pattern ripetuti: tipi di tile (corda, catena, tratteggiato e il resto), gruppi wallpaper e preset di motivo |
| Pack | packaging: scatole prodotto e gli altri template di fustella |
| Infog | infografiche: tipi di diagramma, forme di flowchart (dato come parallelogramma, database come cilindro…) e tipi di grafico |
| UX | design di schermata: cornici dispositivo e preset di breakpoint |
| DA | direzione artistica: metadati di progetto, style tile, ed export di design token |
| Auto Layout | auto-layout in stile Figma sul frame o gruppo selezionato |
| Components | simboli riutilizzabili: definisci una volta, posiziona molte volte |
| Export | un selettore di formato che pilota le opzioni specifiche per ciascuno |
La fisarmonica si apre da sola quando una scheda di workspace è già attiva, e l'intestazione mostra quale. Se un pannello che hai usato ieri sembra sparito, è dietro Workspaces.
Esportare#
Vectra esporta in otto modi, e il pannello dice a cosa serve ciascuno invece di lasciarti indovinare:
| Formato | |
|---|---|
| PNG | raster con trasparenza, web e UI |
| JPG | raster compresso, senza trasparenza |
| WebP | web moderno, leggero, con trasparenza |
| AVIF | la migliore compressione, ampio supporto |
| SVG | vettoriale: scalabile e ancora modificabile |
| documento universale, stampa e web | |
| EPS | stampa professionale, compatibile Adobe |
| JSON | il documento come dati |
Anche cosa esportare è una scelta: la selezione, la tavola da disegno, tutte le tavole da disegno, o le slice: lo Slice Tool taglia la tela in regioni con un nome e le esporta insieme, il modo in cui un mock UI esce come un set di risorse invece che come un'unica immagine.
Produzione per la stampa#
La parte di Vectra che lo rende uno strumento di prestampa e non solo di disegno. Print Production aggiunge i segni che una tipografia si aspetta:
| Crop marks | dove tagliare |
| Registration marks | mire di allineamento per la macchina da stampa |
| Colour bars | la striscia di calibrazione CMYK |
| Bleed (mm) | grafica estesa oltre la linea di taglio, così un millimetro di scarto non lascia un bordo bianco |
| Overprint preview | cosa succederà davvero dove gli inchiostri si sovrappongono |
| Scale bar | per un disegno stampato in scala |
⚠️ Il CMYK qui è simulato. Lo dice il pannello stesso: i valori sono un'anteprima, e un colore di stampa accurato richiede un flusso di gestione colore calibrato. Considera la lettura CMYK come un'indicazione, non come una prova di stampa, e nota che l'export CMYK non porta alcuna trasparenza, il che è una proprietà del modello colore, non un limite di Vectra.
File letti e scritti#
| Formato nativo | .vectra |
| Import | .svg |
| Export | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Inviare lavoro ad altri studi#
Produce arte vettoriale e oggetti Vectra: lo stesso disegno in due forme. Accetta arte vettoriale e immagini.
| Destinazione | Cosa arriva |
|---|---|
| Inkwell, Composer | arte vettoriale, ancora modificabile |
| Animator | oggetti Vectra, animabili uno per uno |
| Engine | una gerarchia HUD, non un'immagine |
Quest'ultimo è il punto di Vectra per un gioco. Un mock-up di schermata inviato a Engine arriva come una struttura che Engine può disporre e scriptare, pulsanti che sono pulsanti, invece che come un'immagine appiattita che dovresti ricostruire.
Lavorare con qualcun altro#
Vectra sincronizza operazione per operazione: oggetti aggiunti, eliminati, aggiornati e sostituiti in blocco; livelli e il loro ordine; la dimensione della tavola da disegno; e il livello attivo.
Limiti e problemi comuni#
- Un pannello che non trovi è probabilmente sotto Workspaces. Sono mostrate solo quattro schede; le altre undici sono dietro la fisarmonica chiusa.
- Una forma senza fill e senza stroke è invisibile ma c'è comunque. Il conteggio oggetti nella barra di stato è il modo per accorgersene.
- Le guide smart si agganciano agli oggetti, la griglia si aggancia alla griglia. Se qualcosa non atterra dove vuoi, controlla quale delle due è attiva.