Веб-Острова Анатолия Куликова

Векторный редактор онлайн

Векторный редактор онлайн

Как-то раз в комментариях к статье про Photopea (это такой фотошоп-онлайн) меня спросили: «А есть ли такая штуковина, только типа Illistrator?». На что я честно ответил, что не знаю такого сервиса. И, отложив в подсознании заметку о том, что неплохо бы было найти такое, продолжил жить дальше. И может быть много ещё времени прошло, пока бы я самостоятельно вспомнил про это, как само провидение натолкнуло меня на поиски — очень было нужно поправить векторный рисунок, а под рукой ничего нет, только браузер.

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

Эта программа работает как онлайн (об этом чуть ниже), так и на персональных компьютерах под управлением Windows, Mac Os, Linux и даже Chromebook — обиженным не уйдет никто. А кому и этого мало, то данная программа встаивается в WordPress в качестве дополнения. По-моему скромному мнению это — шикарно.

Бесплатными программами для векторной графики сейчас удивить сложно — их вполне достаточно, чтобы удовлетворить потребности среднего пользователя. А вот онлайн-редактор — это уже что-то. Давайте вместе попробуем его. Заводить свой логин не будем — мы пока просто знакомимся — а просто нажмём на «Use Online» и погнали!

Для начала нас приглашают пройти быстрое обучение работе с сервисом — если интересно познакомится самостоятельно, то советую. Все тексты и подсказки тут на английском, но всё интуитивно понятно и затруднений не вызовет. А мы пойдём дальше — пропустим обучение, мы сами с усами — и нам открывается пустой проект. Кстати, если вы решите пройти краткое обучение, то после него система настойчиво попросит зарегистрироваться, что можно обойти открытием главной страницы заново.

Настроек, сразу скажу, тут предостаточно. Но давайте начнем с основных — это размеры холста, на котором мы будем рисовать. Параметры размеров указываются в нижнем левом углу — там есть блок «Page Settings«. И сразу же первый подарок — под окошками размеров ширины и высоты есть предустановки на все случаи жизни: тут и по размерам бумаги, и заготовки для шапок социальных сетей, и для экранов устройств и iPhone’ов — просто выбирай и пользуйся.

Прямо над настройками страницы есть вкладки-табы «Pages» и «Layers» — мало того, что здесь поддерживаются слои (что в общем-то ожидаемо), но здесь ещё и возможность создания нескольких страниц возможна. Однозначный вин! И чтобы добить нас окончательно, для каждой страницы можно указывать свой размер.

Но и это ещё не всё — у нас есть выбор, в каких единицах указывать размеры рабочего холста. Кнопка для этого улетела уже в верхний правый угол, она вторая (лист с шестерёнкой) — называется «Page Settings«. Здесь мы можем дать нашему проекту название (но если зарегистрируемся) и установить единицы измерения — пикселы, пункты, сантиметры, миллиметры, дюймы и футы.

Я для себя установил размеры и отцентровал рабочий холст — вот, кстати, не совсем удобно реализованный функционал. Масштабировать вполне себе удобно (зажатием кнопки со значком Windows или Cmd), а вот движения влево-вправо только с помощью ползунков — каких-то других способов мною не обнаружено.

Итак, переключимся в просмотр слоёв и посмотрим, какие инструменты нам предлагает редактор. По большому счёту всё очень традиционно — четырёхугольник, четырёхугольник с закруглёнными краями, эллипс, перо (для рисования кривых по точкам-вершинам), карандаш (то же самое, только просто кривая кривая), а также текстовый блок, несколько заготовленных векторных изображений и возможность загрузить свою.

Поначалу, создав несколько элементов, я зело закручинился, ибо не понял, как работать с вершинами. Оказалось просто — нужно дважды щёлкнуть на объекте и он перейдёт в режим редактирования.

При создании любого элемента у нас оживает правая колонка — там хранятся настройки объектов и именно там можно указать им цвет, границы, установить точные размеры и добавить тени. Кстати, о фоне — фоном объекта можно указать не только цвет или градиент, но также и изображение. Инструментал работы с градиентами впечатляет — можно не просто указать его направление, а указать точки и направления. И для каждой точки задать цвет.

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

Ещё в функционале крайне порадовали две функции:

  1. Первая — это привязка объектов по сетке или по границам/вершинам других объектов (стоит по умолчанию). Данная функция изменяется с помощью кнопки «Snapping & Grid» в правом верхнем углу экрана. Привязку можно отключить совсем.
  2. Группировка элементов — выделяем, зажав левую кнопку мыши, область, в которой находятся нужные объекты, на них кликаем правой и вызываем контекстное меню — там пункт «Group». Разгруппировка производится таким же способом. Минус функции — нельзя работать с элементом внутри группы. Все эффекты и настройки применяются на все элементы группы — будьте внимательными. Хотя здесь работает Ctrl+Z, данный факт может быть неожиданно неприятным.

Мы почти закончили знакомство с сервисом, осталось дело за малым — сначала попробуем импортировать в него что-нибудь. Загрузить изображения можно как через кнопку «Upload Image» на панели слева, так и простым перетаскиванием из окна системы.

Из приятного — сервис может импортировать jpg, png и svg. Поддерживает eps, но путём конвертации оного в svg (хотя у меня так и не смог, хотя сам процесс отображался). Такая же история и с файлами Adobe Illustrator’а — он их грузит и пытается сконвертить в svg, но терпит фиаско. Вполне вероятно, что полноценную поддержку этих двух форматов добавят в будущем.

Что же касается экспорта готового изображения — нам доступны форматы svg, png и jpg (для растровых форматов можно ещё и степень сжатия указать). И возможность печати изображения. А если пользуетесь как зарегистрированный пользователь, то сможете и ссылку на полученное изображение указать. Если логина нет, то ссылку получить всё равно можно (чтобы, например, результат показать), но скорее всего она пропадёт.

У меня же за несколько минут работы с редактором получилось вот такое вполне красивое изображение.

В целом онлайн-редактор порадовал своими возможностями и достаточно простым интерфейсом. Назвать его полноценным Illustrator’ом не получится, но стать неплохой заменой в некоторых моментах он несомненно может.

Рекомендую к использованию 👍.

Всем добра и до встречи на Веб-Островах!

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Домены бывают разные

Домены бывают разные

Про домены сайтов доступно и популярно

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Ахроматический контраст в веб-дизайне

Ахроматический контраст в веб-дизайне

Краткая теоретическая статья о применении ч/б при разработке дизайна
Бесплатный фотошоп в вашем браузере

Бесплатный фотошоп в вашем браузере

Редактируем файлы Photoshop и Sketch онлайн
Классные фотографии для ваших проектов

Классные фотографии для ваших проектов

Где легально и бесплатно взять хороших фотографий
Простая защита фотографий от посторонних посягательств

Простая защита фотографий от посторонних посягательств

Полезная и надёжная программа Image Tuner