Справочный центрВекторный редактор в Zero Block
Посмотрите видеоурок о том, как работать с векторным редактором или прочитайте подробную инструкцию ниже.
В редакторе Zero Block есть возможность создать свое собственное векторное изображение во встроенном векторном редакторе. Чтобы создать его, нажмите на кнопку добавления нового элемента → Add Vector.
Перейдите в настройки элемента и нажмите на кнопку Edit Vector. Также редактор можно открыть при двойном клике на элемент.
Откроется редактор векторного изображения. В нем есть 4 режима работы — Select Tool, Draw Tool, Bend Tool и Edit Tool для точек.
Draw Tool
Draw Tool позволяет создать новый шейп с помощью добавления кривых Безье с узловыми точками и настройкой углов касательных в этих точках. С помощью этого инструмента можно создавать прямые, ломаные и гладкие кривые.
При зажатой клавише Shift следующую точку можно будет поставить только горизонтально, вертикально и под углом 45 градусов относительно предыдущей.
Чтобы замкнуть контур, нужно поставить последнюю точку там же, где была установлена начальная точка. Чтобы оставить фигуру не замкнутой, нужно сделать двойной щелчок на последней точке или нажать на клавишу Escape.
При зажатой клавише Shift следующую точку можно будет поставить только горизонтально, вертикально и под углом 45 градусов относительно предыдущей.
Чтобы замкнуть контур, нужно поставить последнюю точку там же, где была установлена начальная точка. Чтобы оставить фигуру не замкнутой, нужно сделать двойной щелчок на последней точке или нажать на клавишу Escape.
Select Tool
Select Tool позволяет выбирать, перетаскивать, масштабировать и вращать отдельные созданные шейпы, а также менять их настройки — заливку и цвет и ширину обводки.
Существует четыре режима масштабирования:
- Свободное. Обьект меняет размер без сохранения пропорций.
- Пропорциональное (c зажатой клавишей shift). Объект меняет размер с сохранением пропорций.
- Свободное из центра (с зажатой клавишей alt/option). Объект сохраняет своё местоположение относительно центральной точки. Пропорции не сохраняются.
- Пропорциональное из центра (с зажатыми клавишами shift + alt/option) Объект сохраняет своё местоположение относительно центральной точки. Пропорции сохраняются.
Примеры четырех режимов масштабирования элементов
Также есть два режима вращения объектов:
Чтобы сбросить вращение, нажмите на контекстное меню элемента и выберите Reset rotation.
- Свободное. Объект вращается на любое значение. Для этого наведите на угол объекта.
- Вращение с привязкой по 15 градусов (с зажатым Shift).
Чтобы сбросить вращение, нажмите на контекстное меню элемента и выберите Reset rotation.
Чтобы отразить объект по вертикали или горизонтали, используйте контекстное меню: Flip Horizontal, Flip Vertical.
Bend Tool
Bend Tool позволяет изменять отдельные отрезки кривых и угол касательных в узловых точках после создания шейпа.
Edit Tool
Edit Tool позволяет редактировать точки (перемещать их и редактировать кривые Безье) и перемещать отрезки между двумя точками. Чтобы войти в этот режим, нужно два раза щелкнуть на элементе, который нужно редактировать.
Несколько шейпов в одном векторном изображении
В одном векторе можно создать несколько элементов. Чтобы переместить их выше или ниже в слоях относительно друг друга, нажмите на контекстное меню (правой кнопкой мыши на выбранный элемент) и нажмите Bring to front или Send to back. Или используйте горячие клавиши ] или [.
Чтобы удалить элемент, надо нажать Backspace или использовать контекстное меню.
Чтобы удалить элемент, надо нажать Backspace или использовать контекстное меню.
Импорт SVG
Импорт осуществляется через контекстное меню, меню тулбара или сочетанием клавиш Сmd/Сtrl+I. Импортировать можно любое SVG изображение размером до 20КБ.
Список горячих клавиш
Чтобы перейти к полному списку горячих клавиш, перейдите в редакторе к кнопке с тремя точками → Shortcuts.
Также горячие клавиши указаны в таблице ниже.
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Cоздание единой схемы расположения всех элементов сайта
Справка по простой анимации: фиксации, параллаксу и анимации появления
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
