Vectra
Векторное рисование, контуры, типографика, булевы операции и pathfinder, плюс одиннадцать рабочих пространств для бренда, лого, иконок, паттернов, упаковки, инфографики и UX.
Коротко#
Чёткие, бесконечно масштабируемые формы и текст: студия для логотипов, иконок, UI-макетов и всего, что должно оставаться резким при любом размере.
Интерфейс#
| Строка меню | File · Edit · Object · Type · Select · View · Plugins |
| Вкладки документов | один набор монтажных областей на вкладку |
| Панель инструментов | undo/redo, дублирование, просмотр кода SVG, булевы операции, блокировка, образцы fill и stroke с толщиной обводки, и кнопки выравнивания/распределения |
| Панель направляющих | Grid со своим шагом · Snap · Rulers · сетка логотипа · Safe area · Smart guides |
| Левая панель | select, direct-select, type, line, rectangle, pen, shape, rotate, scissors, brush, add-anchor, artboard, hand |
| Справа | Properties · Layers · Text · Illust |
| Строка состояния | монтажная область, её размер, количество объектов, размер выделения, позиция в истории, активный инструмент, масштаб |
Что вы делаете здесь#
Рисование#
Pen размещает якоря и рычаги; direct select потом их редактирует.
Shapes, lines и text: отдельные инструменты. Подсказки живут на панели
инструментов, и их стоит прочитать хотя бы раз: Shift ограничивает
пропорции, Alt рисует от центра, стрелки подталкивают выделение.
Точное позиционирование#
Раздел Transform принимает точные числа (X, Y, ширина, высота, поворот) наряду с Flip H, Flip V и сбросом в 0°. Кнопки выравнивания и распределения на панели инструментов работают с выделением, а Smart guides привязываются к другим объектам, а не к сетке.
Fill и stroke#
Оба переключаются независимо: у формы может быть fill без stroke, stroke без fill, или ни того ни другого. Цвета редактируются как hex. В разделе Appearance: opacity, blend mode и visibility.
Комбинирование форм#
Pathfinder и булевы операции на панели инструментов: union, subtract, intersect, exclude. Булева группа остаётся редактируемой; Release boolean group находится в палитре команд на случай, если нужно вернуть отдельные части.
Type#
Вкладка Text хранит типографские элементы управления; меню Type хранит операции: преобразование текста в outlines и так далее.
Effects#
Раздел Effects применяется недеструктивно, поэтому геометрия под ним остаётся именно той геометрией, которую вы нарисовали.
Просмотр SVG#
Кнопка кода на панели инструментов показывает документ в виде SVG. Полезно, чтобы проверить, что на самом деле будет экспортировано, и чтобы вставить контур откуда-то ещё.
Правая панель: четыре вкладки, затем одиннадцать рабочих пространств#
Основные вкладки, четыре, которыми вы пользуетесь постоянно:
| Properties | transform, fill, stroke, appearance, effects, align, pathfinder |
| Layers | все объекты, с изменением порядка, скрытием и блокировкой |
| Text | типографские элементы управления |
| Illust | сторона иллюстрации: brushes, с библиотекой кистей, которые редактируются по типу |
Под ними аккордеон Workspaces прячет одиннадцать сценарных панелей, пока они не понадобятся. Это та часть Vectra, которая не является инструментом рисования, а является ассистентом дизайна, и её легко пропустить, потому что по умолчанию она свёрнута:
| Рабочее пространство | Для чего |
|---|---|
| Brand | фирменный стиль: чек-лист поставки (primary, reversed и monochrome logo, icon/symbol, PDF с гайдлайнами бренда), с секциями, которые можно включать и отключать |
| Logo | типы логотипа, мокапы и пресеты экспорта: вариации, в которых логотип должен поставляться |
| Icon | наборы иконок: размеры, keylines и пресеты под платформы приложений |
| Pattern | повторяющиеся паттерны: типы плиток (rope, chain, dashed и остальные), группы обоев и пресеты мотивов |
| Pack | упаковка: коробки для продукта и остальные шаблоны высечки |
| Infog | инфографика: типы диаграмм, формы блок-схем (данные в виде параллелограмма, база данных в виде цилиндра…) и типы графиков |
| UX | дизайн экранов: рамки устройств и пресеты breakpoint |
| DA | арт-дирекшн: метаданные проекта, style tiles и экспорт дизайн-токенов |
| Auto Layout | автолейаут в стиле Figma на выбранном фрейме или группе |
| Components | переиспользуемые символы: определи один раз, размести много раз |
| Export | селектор формата, управляющий параметрами для каждого формата |
Аккордеон открывается сам, если вкладка рабочего пространства уже активна, а заголовок показывает, какая именно. Если панель, которой вы пользовались вчера, кажется пропавшей, она находится за Workspaces.
Экспорт#
Vectra экспортирует восемью способами, и панель прямо говорит, для чего нужен каждый, а не оставляет вас гадать:
| Формат | |
|---|---|
| PNG | растр с прозрачностью, для web и UI |
| JPG | сжатый растр, без прозрачности |
| WebP | современный web, компактный, с прозрачностью |
| AVIF | лучшее сжатие, широкая поддержка |
| SVG | вектор: масштабируемый и всё ещё редактируемый |
| универсальный документ, печать и web | |
| EPS | профессиональная печать, совместимо с Adobe |
| JSON | документ в виде данных |
То, что именно экспортировать, тоже выбор: selection, artboard, все монтажные области, или slices: Slice Tool нарезает холст на именованные области и экспортирует их вместе, и именно так UI-макет выходит набором ассетов, а не одной картинкой.
Подготовка к печати#
Часть Vectra, которая делает её препресс-инструментом, а не только инструментом рисования. Print Production добавляет метки, которые ожидает типография:
| Crop marks | где резать |
| Registration marks | метки совмещения для печатной машины |
| Colour bars | калибровочная полоса CMYK |
| Bleed (mm) | изображение, продлённое за линию обреза, чтобы миллиметр смещения не проявился белым краем |
| Overprint preview | что на самом деле произойдёт там, где краски перекрываются |
| Scale bar | для чертежа, напечатанного в масштабе |
⚠️ CMYK здесь симулируется. Панель сама об этом сообщает: значения это предпросмотр, а точный цвет печати требует калиброванного процесса управления цветом. Относитесь к показаниям CMYK как к ориентиру, а не как к доказательству, и учтите, что экспорт в CMYK не несёт прозрачности: это свойство самой цветовой модели, а не ограничение Vectra.
Файлы, которые он читает и пишет#
| Нативный формат | .vectra |
| Импорт | .svg |
| Экспорт | .svg · .pdf · .eps · .png · .jpg · .webp · .avif · .json |
Передача работы в другие студии#
Создаёт векторную графику и объекты Vectra: один и тот же рисунок в двух формах. Принимает векторную графику и изображения.
| Куда | Что приходит |
|---|---|
| Inkwell, Composer | векторная графика, по-прежнему редактируемая |
| Animator | объекты Vectra, анимируемые по отдельности |
| Engine | иерархия HUD, а не картинка |
Именно в этом смысл Vectra для игры. Макет экрана, отправленный в Engine, приходит как структура, которую Engine может выстроить и озвучить скриптом: кнопки, которые являются настоящими кнопками, а не сведённая картинка, которую пришлось бы собирать заново.
Совместная работа#
Vectra синхронизируется операция за операцией: добавление, удаление, обновление и полная замена объектов; слои и их порядок; размер монтажной области; и активный слой.
Ограничения и типичные проблемы#
- Не можете найти панель? Она, скорее всего, под Workspaces. Показаны только четыре вкладки; остальные одиннадцать находятся за свёрнутым аккордеоном.
- Форма без fill и без stroke невидима, но всё ещё существует. Выдаёт её количество объектов в строке состояния.
- Smart guides привязываются к объектам, а сетка привязывается к сетке. Если что-то не встаёт туда, куда нужно, проверьте, которая из двух функций включена.