Инструменты векторного редактора
Векторная графика строится из точек и кривых между ними, поэтому фигура остаётся чёткой при любом масштабе. В Morfa векторы лежат в том же файле, что фреймы, текст и компоненты: иконку можно нарисовать прямо в макете и сразу сделать из неё компонент (⌥⌘K).
| Инструмент | Клавиша | Что делает |
|---|---|---|
| Перо | P | Ставит точки контура: клик — острый угол, клик с протяжкой — плавная кривая |
| Карандаш | ⇧P | Рисует от руки, штрих сглаживается в плавную кривую |
| Прямоугольник, эллипс | R, O | Фигуры, которые потом можно править по точкам |
| Линия, стрелка | L, ⇧L | Отрезки; у стрелки на конце наконечник |
| Многоугольник, звезда | — | Выбираются в группе «Фигуры» на панели инструментов |
| Кисть | B | Штрих от руки с профилем толщины, режим «Рисование» |
| Текст по контуру | — | Пускает текст вдоль фигуры или кривой |
Клавиши те же, что в Figma, и работают на русской раскладке. Полный список — в шпаргалке горячих клавиш.
Как рисовать пером
Перо строит контур из точек. Первый же клик создаёт вектор и открывает его редактирование, поэтому поставленные точки можно двигать, не переключая инструмент.
Выберите перо
Нажмите P или выберите «Перо» в группе «Перо и карандаш» на панели инструментов внизу.
Поставьте точки
Клик ставит острый угол, клик с протяжкой — плавную точку с симметричными ручками. С зажатым ⌥ ведущая ручка двигается отдельно, с ⇧ направление меняется с шагом 45°.
Замкните или закончите
Клик по первой точке замыкает контур. Enter или Esc заканчивают незамкнутый путь, ⌫ убирает последнюю точку.
Продолжите путь
Клик пером по открытому концу вектора продолжает его, а не начинает новый.
Как изменить точки готового контура
Чтобы поправить контур или фигуру, дважды кликните по слою или выделите его и нажмите Enter. Откроется редактирование контура: панель инструментов внизу сменится панелью с инструментами «Выделение», «Перо», «Изгиб» и кнопкой «Готово».
Так открываются векторы, прямоугольники, эллипсы, линии, многоугольники и звёзды. Фигура остаётся фигурой, пока вы не сдвинете первую точку, а после правки становится вектором.
| Задача | Как сделать |
|---|---|
| Выделить точки | Клик, клик с ⇧ или рамка; ⌘A выделяет все точки |
| Сдвинуть точку или ручку | Перетащить; стрелки сдвигают на 1 px, с ⇧ — на 10 px |
| Изогнуть сегмент | Потянуть за сам сегмент, взять «Изгиб» или удерживать ⌘ |
| Сделать угол плавным или острым | Дважды кликнуть по точке |
| Вытянуть ручки из острого угла | Потянуть точку с зажатым ⌘ |
| Добавить или удалить точку | С «Пером»: клик по сегменту добавляет точку, клик по точке удаляет её; ⌫ удаляет выделенные |
| Закончить | «Готово», Enter или Esc |
Булевы операции: объединение, вычитание, пересечение, исключение
Булева операция собирает две фигуры и больше в одну форму. Исходные фигуры не пропадают: они лежат внутри операции в панели «Слои», и если сдвинуть одну из них, форма пересчитается.
| Команда | Клавиша | Что получится |
|---|---|---|
| «Объединение» | ⌥⇧U | Общий силуэт всех фигур |
| «Вычитание» | ⌥⇧S | Нижняя фигура с вырезами по форме верхних |
| «Пересечение» | ⌥⇧I | Только область, где фигуры перекрываются |
| «Исключение» | ⌥⇧X | Всё, кроме областей перекрытия |
| «Сгладить» | ⌘E | Один вектор вместо операции, группы или фигур; его можно править по точкам |
Результат берёт заливку и обводку верхнего слоя, а у вычитания — нижнего, как в Figma. Если выделить готовую булеву операцию и нажать клавишу другой операции, сменится её тип, а новая группа не создастся. Текст в булевых операциях не участвует: контуры букв недоступны.
Обводка, профиль толщины и «Обводку в контур»
Обводку ставят внутри, по центру или снаружи контура. «Обводка по сторонам» задаёт свою толщину каждой стороне, у линий есть пунктир, концы, соединения и стрелки на концах.
«Профиль толщины» меняет толщину вдоль линии. Он есть у линий и незамкнутых контуров; у замкнутых фигур толщина обводки ровная.
- Профили: «Равномерный», «Клин», «Сужение», «Сужение к концу», «Линза» и «Сужение с двух сторон».
- «Обводку в контур» (⌥⌘O) превращает обводку в залитый вектор: его можно объединять с другими фигурами и править по точкам.
- «Поменять заливку и обводку» (⇧X) меняет их местами в один шаг.
- «Режим контуров» (⌘Y) показывает только линии контуров без заливок — удобно, когда фигуры перекрывают друг друга.
SVG-редактор онлайн: как открыть, изменить и сохранить SVG
SVG здесь не картинка, а набор слоёв: каждый контур можно выделить, перекрасить и поправить по точкам. Так удобно чинить иконки, менять цвета логотипа или собирать набор иконок в одном файле.
Добавьте SVG
Перетащите SVG-файл на холст, вставьте SVG-код из буфера обмена (⌘V) или выберите «Поместить изображение…» (⇧⌘K). Размер файла — до 2 МБ.
Найдите слои
SVG становится фреймом с названием из тега
<title>или «SVG». Внутри — группы, векторы, фигуры и текст.Поправьте
Меняйте заливку и обводку во вкладке «Дизайн», двигайте точки после двойного клика, объединяйте фигуры булевыми операциями.
Сохраните в SVG
Выделите фрейм и добавьте формат SVG в разделе «Экспорт» вкладки «Дизайн» или откройте «Экспорт…» (⇧⌘E). Чтобы вставить код в другое место, выберите «Копировать как» → «SVG».
| В SVG | В редакторе |
|---|---|
svg | Фрейм: viewBox задаёт масштаб содержимого, всё за краями обрезается |
g, use, вложенный svg | Группа или копия элемента |
path, line, polyline, polygon | Вектор |
rect, circle, ellipse | Прямоугольник или эллипс; если трансформация их искажает — вектор |
text | Текст |
image со встроенной картинкой | Прямоугольник с заливкой-картинкой |
clipPath, mask | Маска |
Цвета и обводки читаются из атрибутов, атрибута style и простых правил <style>. Внешние файлы по ссылкам не загружаются. В экспортированном SVG картинки встроены в файл, текст остаётся текстом, а масштаба у SVG нет — подробнее на странице экспорт.
Во вкладке «Код» и в проекте React векторы становятся компонентами-иконками в папке src/icons: как это устроено, описано на странице дизайн в код.
Режим «Рисование»: кисть и лассо
Режим «Рисование» — аналог Figma Draw. Его включают переключателем режимов справа на панели инструментов, а клавиши B и Q сами переключают панель в этот режим. В нём каждый инструмент на своей кнопке: выделение с лассо, фигуры, перо, карандаш, кисть и текст.
Кисть B
Сглаженный штрих с профилем толщины. Профиль берётся последний выбранный в «Профиле толщины», сначала — «Сужение с двух сторон». Нажим пера планшета кисть не учитывает.
Лассо Q
Выделяет слои, которых касается петля произвольной формы; с ⇧ добавляет их к выделению. Точки вектора лассо пока не выделяет.
Чего в векторном редакторе пока нет
Эти ограничения лучше знать заранее, особенно если вы переходите из другого векторного редактора.
- Перевода текста в кривые — ни отдельной командой, ни при экспорте в SVG.
- Лассо для точек вектора, кистей stretch и scatter, правки толщины по точкам прямо на холсте.
- Открытия файлов .ai, .eps, .cdr и PDF: из векторных форматов редактор принимает только SVG.
- Цветов CMYK: всё рисуется и выгружается в sRGB.
- Импорта из Sketch, Adobe XD и Penpot. Векторы и булевы операции переносятся только из Figma — по ссылке, как описано в гиде перенос из Figma.