Vectra
Desenho vetorial, traçados, tipografia, booleanas e pathfinder, além de onze espaços de trabalho de design para marca, logotipo, ícone, padronagem, embalagem, infográficos e UX.
Em uma frase#
Formas e textos nítidos, infinitamente escaláveis: o estúdio para logotipos, ícones, mockups de UI e qualquer coisa que precise continuar nítida em qualquer tamanho.
O layout#
| Barra de menu | File · Edit · Object · Type · Select · View · Plugins |
| Abas de documento | um conjunto de pranchetas por aba |
| Barra de ferramentas | desfazer/refazer, duplicar, a visualização de código SVG, operações booleanas, travar, as amostras de fill e stroke com a largura do traçado, e os botões de alinhar/distribuir |
| Barra de guias | Grid com seu espaçamento · Snap · Rulers · uma grade de logotipo · Safe area · Smart guides |
| Barra lateral esquerda | seleção, seleção direta, texto, linha, retângulo, caneta, forma, girar, tesoura, pincel, adicionar-âncora, prancheta, mão |
| Direita | Properties · Layers · Text · Illust |
| Barra de status | prancheta, seu tamanho, contagem de objetos, contagem de seleção, posição no histórico, ferramenta ativa, zoom |
O que você faz aqui#
Desenhar#
A caneta posiciona âncoras e alças; a seleção direta as edita depois.
Formas, linhas e texto são ferramentas próprias. As dicas ficam na barra de
ferramentas e vale a pena lê-las uma vez: Shift restringe, Alt desenha a
partir do centro, as setas do teclado deslocam.
Posicionar com precisão#
A seção Transform aceita números exatos (X, Y, largura, altura, rotação), junto com Flip H, Flip V, e uma redefinição para 0°. Os botões de alinhar e distribuir na barra de ferramentas atuam sobre uma seleção, e as guias Smart encaixam nos outros objetos, não na grade.
Fill e stroke#
Os dois podem ser alternados de forma independente: uma forma pode ter fill sem stroke, stroke sem fill, ou nenhum dos dois. As cores são editáveis como hex. Em Appearance: opacidade, modo de mesclagem e visibilidade.
Combinar formas#
Pathfinder e as operações booleanas na barra de ferramentas: união, subtração, interseção, exclusão. Um grupo booleano continua editável; Release boolean group está na paleta de comandos para quando você precisar das peças de volta.
Tipografia#
A aba Text guarda os controles tipográficos; o menu Type guarda as operações: converter texto em contornos, e assim por diante.
Efeitos#
A seção Effects se aplica de forma não destrutiva, então a geometria por baixo continua sendo a geometria que você desenhou.
Ler o SVG#
O botão de código na barra de ferramentas mostra o documento como SVG. Útil para conferir o que realmente será exportado, e para colar um traçado vindo de outro lugar.
O painel direito: quatro abas, depois onze espaços de trabalho#
Abas principais, as quatro que você usa o tempo todo:
| Properties | transform, fill, stroke, appearance, effects, align, pathfinder |
| Layers | cada objeto, reordenável, ocultável, travável |
| Text | os controles tipográficos |
| Illust | o lado de ilustração: pincéis, com uma biblioteca de pincéis cujos pincéis são editáveis por tipo |
Abaixo delas, um acordeão chamado Workspaces esconde onze painéis de cenário até você precisar deles. Esta é a parte do Vectra que não é uma ferramenta de desenho, mas um assistente de design, e é fácil de passar batido porque vem recolhida por padrão:
| Espaço de trabalho | Para que serve |
|---|---|
| Brand | uma identidade de marca: a checklist de entregáveis (logotipo primário, invertido e monocromático, ícone/símbolo, PDF de diretrizes de marca), com seções que você ativa ou desativa |
| Logo | tipos de logotipo, mockups e presets de exportação: as variações em que um logotipo precisa ser entregue |
| Icon | conjuntos de ícones: tamanhos, keylines, e os presets de plataforma de app |
| Pattern | padronagens repetidas: tipos de ladrilho (corda, corrente, tracejado e o resto), grupos de papel de parede e presets de motivo |
| Pack | embalagem: caixas de produto e os outros templates de linha de corte |
| Infog | infográficos: tipos de diagrama, formas de fluxograma (dado como um paralelogramo, banco de dados como um cilindro…) e tipos de gráfico |
| UX | design de tela: molduras de dispositivo e presets de breakpoint |
| DA | direção de arte: metadados do projeto, style tiles, e exportação de design tokens |
| Auto Layout | auto layout no estilo Figma, sobre o frame ou grupo selecionado |
| Components | símbolos reutilizáveis: defina uma vez, use em muitos lugares |
| Export | um seletor de formato que controla as opções específicas de cada um |
O acordeão se abre sozinho quando uma aba de espaço de trabalho já está ativa, e o cabeçalho mostra qual delas. Se um painel que você usou ontem parece ter sumido, ele está atrás de Workspaces.
Exportando#
O Vectra exporta de oito formas, e o painel diz para que serve cada uma em vez de deixar você adivinhar:
| Formato | |
|---|---|
| PNG | raster com transparência, web e UI |
| JPG | raster comprimido, sem transparência |
| WebP | web moderna, pequeno, com transparência |
| AVIF | melhor compressão, ampla compatibilidade |
| SVG | vetorial: escalável e ainda editável |
| documento universal, impressão e web | |
| EPS | impressão profissional, compatível com Adobe |
| JSON | o documento como dado |
O que você exporta também é uma escolha: a seleção, a prancheta, todas as pranchetas, ou os slices: a Slice Tool corta a tela em regiões nomeadas e as exporta juntas, e é assim que um mockup de UI sai como um conjunto de assets em vez de uma imagem só.
Produção gráfica#
A parte do Vectra que o torna uma ferramenta de pré-impressão, e não só de desenho. Print Production adiciona as marcas que uma gráfica espera:
| Crop marks | onde cortar |
| Registration marks | alvos de alinhamento para a impressora |
| Colour bars | a faixa de calibração CMYK |
| Bleed (mm) | arte estendida além da linha de corte, para que um milímetro de desvio não apareça como uma borda branca |
| Overprint preview | o que realmente vai acontecer onde as tintas se sobrepõem |
| Scale bar | para um desenho impresso em escala |
⚠️ O CMYK aqui é simulado. O próprio painel avisa: os valores são uma prévia, e uma cor de impressão precisa de um fluxo de trabalho com gestão de cor calibrado. Trate a leitura de CMYK como um guia, não como uma prova, e note que a exportação CMYK não tem transparência, o que é uma propriedade do modelo de cor, não uma limitação do Vectra.
Arquivos que ele lê e escreve#
| Formato nativo | .vectra |
| Importa | .svg |
| Exporta | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Enviando trabalho para outros estúdios#
Produz arte vetorial e objetos Vectra: o mesmo desenho em duas formas. Aceita arte vetorial e imagens.
| Destino | O que chega |
|---|---|
| Inkwell, Composer | arte vetorial, ainda editável |
| Animate | objetos Vectra, animáveis um por um |
| Engine | uma hierarquia de HUD, não uma imagem |
Esse último é o ponto do Vectra para um jogo. Um mockup de tela enviado ao Engine chega como uma estrutura que o Engine pode organizar e programar, botões que são botões, em vez de uma imagem achatada que você teria que reconstruir.
Trabalhando com outra pessoa#
O Vectra sincroniza operação por operação: objetos adicionados, excluídos, atualizados e substituídos por completo; camadas e sua ordem; o tamanho da prancheta; e a camada ativa.
Limites e problemas comuns#
- Um painel que você não encontra provavelmente está em Workspaces. Só quatro abas ficam visíveis; as outras onze estão atrás do acordeão recolhido.
- Uma forma sem fill e sem stroke está invisível mas ainda ali. A contagem de objetos na barra de status é o sinal.
- As guias Smart encaixam em objetos, a grade encaixa na grade. Se algo não estiver caindo onde você quer, confira qual dos dois está ativo.