Справочный центр

Векторный редактор в Zero Block

Посмотрите видеоурок о том, как работать с векторным редактором или прочитайте подробную инструкцию ниже.

В редакторе Zero Block есть возможность создать свое собственное векторное изображение во встроенном векторном редакторе. Чтобы создать его, нажмите на кнопку добавления нового элемента → Add Vector.

Перейдите в настройки элемента и нажмите на кнопку Edit Vector. Также редактор можно открыть при двойном клике на элемент.

Откроется редактор векторного изображения. В нем есть 4 режима работы — Select Tool, Draw Tool, Bend Tool и Edit Tool для точек.

Draw Tool

Draw Tool позволяет создать новый шейп с помощью добавления кривых Безье с узловыми точками и настройкой углов касательных в этих точках. С помощью этого инструмента можно создавать прямые, ломаные и гладкие кривые.

При зажатой клавише Shift следующую точку можно будет поставить только горизонтально, вертикально и под углом 45 градусов относительно предыдущей.

Чтобы замкнуть контур, нужно поставить последнюю точку там же, где была установлена начальная точка. Чтобы оставить фигуру не замкнутой, нужно сделать двойной щелчок на последней точке или нажать на клавишу Escape.

Select Tool

Select Tool позволяет выбирать, перетаскивать, масштабировать и вращать отдельные созданные шейпы, а также менять их настройки — заливку и цвет и ширину обводки.

Существует четыре режима масштабирования:

Свободное. Обьект меняет размер без сохранения пропорций.
Пропорциональное (c зажатой клавишей shift). Объект меняет размер с сохранением пропорций.
Свободное из центра (с зажатой клавишей alt/option). Объект сохраняет своё местоположение относительно центральной точки. Пропорции не сохраняются.
Пропорциональное из центра (с зажатыми клавишами shift + alt/option) Объект сохраняет своё местоположение относительно центральной точки. Пропорции сохраняются.

Примеры четырех режимов масштабирования элементов

Также есть два режима вращения объектов:

Свободное. Объект вращается на любое значение. Для этого наведите на угол объекта.
Вращение с привязкой по 15 градусов (с зажатым Shift).

Чтобы сбросить вращение, нажмите на контекстное меню элемента и выберите Reset rotation.

Чтобы отразить объект по вертикали или горизонтали, используйте контекстное меню: Flip Horizontal, Flip Vertical.

Bend Tool

Bend Tool позволяет изменять отдельные отрезки кривых и угол касательных в узловых точках после создания шейпа.

Edit Tool

Edit Tool позволяет редактировать точки (перемещать их и редактировать кривые Безье) и перемещать отрезки между двумя точками. Чтобы войти в этот режим, нужно два раза щелкнуть на элементе, который нужно редактировать.

Несколько шейпов в одном векторном изображении

В одном векторе можно создать несколько элементов. Чтобы переместить их выше или ниже в слоях относительно друг друга, нажмите на контекстное меню (правой кнопкой мыши на выбранный элемент) и нажмите Bring to front или Send to back. Или используйте горячие клавиши ] или [.

Чтобы удалить элемент, надо нажать Backspace или использовать контекстное меню.

Импорт SVG

Импорт осуществляется через контекстное меню, меню тулбара или сочетанием клавиш Сmd/Сtrl+I. Импортировать можно любое SVG изображение размером до 20КБ.

Конвертация векторного элемента в изображение и обратно

Чтобы конвертировать векторный элемент в изображение в SVG формате, выделите элемент на артборде и в правой панели настроек нажмите на кнопку Convert to Image.

После конвертации векторный элемент будет отображаться в списке слоев как Image, в настройках элемента отобразится название файла и его расширение.

Чтобы отредактировать полученный svg-файл, нажмите на Edit — откроется векторный редактор. После выхода из редактора элемент будет сохранен и снова конвертирован в svg-файл.

Чтобы конвертировать svg-файл обратно в векторный элемент — выделите элемент и нажмите на to Vector.

Список горячих клавиш

Чтобы перейти к полному списку горячих клавиш, перейдите в редакторе к кнопке с тремя точками → Shortcuts.

Также горячие клавиши указаны в таблице ниже.

S; Переход в Select Tool D; Переход в Draw Tool B; Переход в Bend Tool E; Переход в Edit Tool ⇧ + H; Отразить объект по горизонтали в Select Tool ⇧ + V; Отразить объект по вертикали в Select Tool ⇧ при масштабировании; Пропорциональное масштабирование ⌥ при масштабировании; Свободное масштабирование из центра ⇧ + ⌥ при масштабировании; Пропорциональное масштабирование из центра ⌘/Ctrl + Z; Отменить действие ⌘/Ctrl + ⇧ + Z; Вернуть отмененные изменения ⌘/Ctrl + C; Копировать ⌘/Ctrl + V; Вставить ⌘/Ctrl + A; Выделить все элементы ⇧ при выделении точек или векторных элементов; Выделение нескольких элементов Стрелочки на клавиатуре; Движение элемента на 1 пиксель Стрелочки на клавиатуре с зажатым Shift; Движение элемента на 10 пикселей Backspace или Delete; Удалить элемент ⌘/Ctrl + I; Импортировать SVG [;Переместить элемент векторного изображения выше в слоях ];Переместить элемент векторного изображения ниже в слоях ⌥/Alt + [;Перенести элемент выше в слоях на один шаг ⌥/Alt + ];Перенести элемент ниже в слоях на один шаг ⌥/Alt + перетаскивание мышью в Select Tool; Сделать копию элемента в Select Tool ⌘/Ctrl + перетаскивание мышью в Edit Tool; Без отражения ⌥/Alt + перетаскивание мышью в Edit Tool; Отразить угол Двойной клик в Edit Tool; Переключить режим кривой