Иллюстрируем мобильно

Мы продолжаем начатую в номере 1/2 за текущий год тему мобильных приложений (И. Терентьев. Без отрыва от производства). Там речь шла о программах, полезных полиграфистам, а теперь мы рассмотрим мобильные инструменты для дизайнеров и иллюстраторов, пользующихся Apple iPad.

Когда в 2015 г. мне в руки впервые попал Apple iPad Pro cо стилусом Apple Pencil, я сразу кинулась искать приложения для рисования. Для работы с растром к моим услугам уже были Procreate, разнообразные специализированные инструменты от Adobe и другие «рисовалки», а вот для векторной графики мне тогда не попалось ничего, хотя бы отдалённо напоминающего привычный Illustrator. Разве что приложение Vector Illustration с приемлемым функционалом, но с кошмарным интерфейсом: ярко оранжевые градиентные плашечки и меню на пол-экрана с красными буквами. Буквально «кровь из глаз» для любого дизайнера.

Спустя четыре года ассортимент заметно вырос: появились планшетные версии серьёзных программ векторной графики для ПК, таких как Graphiс от Picta и Affinity Designer, и приложения попроще, но с амбициями, вроде Vectornator, традиционные, как возрождённый Inkpad, и необычные, как векторно-растровый гибрид Concepts, или «заточенные» под определённые задачи, как, например, Imaengine для трассировки растровых изображений. Что касается Vector Illustration, то его я тоже нашла в App Store вместе с целой стаей идентичных клонов, отличающихся только цветом плашечек и жадностью продавцов. Ради исторической справедливости начну обзор именно с этой группы и попробую разобраться, кто же был первым.

Война клонов

Всего я насчитала 14 похожих приложений. Чтобы разобраться в этом однообразии, пришлось составить табличку с датами выпуска и последнего обновления. Самым ранним (март 2014 г.) оказалось бесплатное приложение под названием «Векторное приложение с DropBox» Евгения Егорова. Однако среди положительных отзывов нашелся один, в котором указывалось, что это калька с Inkpad — тоже из моего списка клонов, с авторскими правами, зарегистрированными в 2019 г. на Envoza Ltd. Загадка разрешилась, когда я зашла на сайт приложения www.inkpad.art/about/. Основатели Envoza — супруги Дерек и Линдсей Поллак — честно признаются, что лишь поддерживают новую реинкарнацию приложения компании Taptrix, созданного в 2011 г. Стивом Спрэнгом (он является также автором одного из первых приложений для гаджетов, имитирующих рисование кистью, — Brushes, выпущенного в 2010 г.). В 2013 г. Спрэнг выложил код на GitHub с целью создать сообщество для поддержки проекта, но через три года проект увял, зато код растащили на клоны все, кому не лень. В твиттере Спрэнга можно найти записи, свидетельствующие о его попытках вести войну с клонами, увы, безнадёжную (рис. 1). В конце концов оригинальное приложение затоптали, и оно исчезло из App Store.

Рис. 1. Стив Спрэнг, оригинальный Inkpad и клоны: почувствуйте разницу

Тем не менее ознакомиться с исходным функционалом можно бесплатно, благодаря щедрому Евгению Егорову (или заплатив всего 75 руб., чтобы избавиться от рекламы). К тому же он не поленился, хотя и с ошибками, перевести на русский язык руководство.

Вектор. Начало

В принципе, в старом Inkpad уже было всё необходимое для векторной графики: построение кривых Безье по точкам или рисование от руки с помощью инструмента «Кисть» (на самом деле «Кисть» рисует просто линию, а не мазок заданной формы, как в Adobe Illustrator). Опорные точки можно добавлять или удалять, регулировать кривизну линии и преобразовывать угловые точки в гладкие и обратно двойным касанием. С помощью указателей узлы можно перемещать по одному или группами и трансформировать выделенный участок или кривую целиком относительно выбранного центра с помощью отдельных инструментов масштабирования и поворота.

Есть ластик для стирания части векторного объекта. Имеется и набор базовых геометрических фигур: линия, эллипс, прямоугольник, многоугольник, звезда и спираль. Можно создавать текстовые объекты и располагать надпись вдоль кривой. В стиле текста можно изменить шрифт, размер и выключку, но не более. Для всех объектов можно задать цвет заливки (в том числе линейный или радиальный градиент), толщину и цвет обводки (в том числе пунктирной), прозрачность цвета и тень. Цвет настраивается ползунками в цветовых моделях RGB или HSB; есть ещё редактируемый набор образцов. Можно также скопировать стиль другого объекта с помощью пипетки.

С помощью командного меню объекты можно удалить, копировать, вырезать и вставить, сгруппировать и разгруппировать, перенести уровнем выше или ниже, выравнивать друг относительно друга и распределять, дублировать со сдвигом и без, а также с повтором трансформации. В меню «Пути» есть команда, автоматически добавляющая промежуточные опорные точки, а вот команда «Удалить точки» не упрощает кривую автоматически, а только убирает уже выбранные узлы. Здесь же можно скомбинировать пути и разделить скомбинированные, соединить две разомкнутые кривые (причем кривая, расположенная слоем ниже, будет параллельно перенесена к верхней и присоединена к ней в ближайшей граничной точке). С объектами можно производить логические операции: объединить, вырезать из нижнего объекта верхний, оставить или вычесть области пересечения. Есть команды для преобразования текста или обводки в комбинированные кривые.

Любая кривая (даже разомкнутая) или текст могут быть маской для нижележащих объектов, в том числе импортированных растровых изображений. Текст при этом редактируется прямо в режиме маски.

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

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

Множественный откат/возврат действий выполняется не жестом (сейчас обычно это касание двумя/тремя пальцами), а прикосновением к стрелочкам на панели команд внизу экрана. Рядом с ними — радужный круг, вызывающий меню для корректировки цвета: изменения цветового баланса, насыщенности, оттенка, инверсии цвета. На растровые изображения корректировки не действуют. В этом же меню можно задать переход цвета для нескольких объектов: по горизонтали, вертикали или от нижнего слоя к верхнему.

Готовый рисунок сохраняется в «Галерее» или может быть экспортирован в PNG, PDF или SVG.

Таково полное описание базового набора функционала Inkpad, который практически в неизменном виде воспроизводят большинство клонов. Полларды вычистили ошибки, улучшили интерфейс, добавили новые функции (например, круговую палитру и аксонометрические сетки), расширили географию локализаций (есть русская), обеспечивают поддержку новых версий iPad, Apple Pencil и iOS. За эту работу они просят 529 руб. и добровольные пожертвования на развитие проекта.

Но есть и бесплатная альтернатива.

V for Victory

Виктор Данила, немецкий студент родом из Румынии, основал компанию Linearity, выпустившую приложение Vectornator, когда ему было 17 лет. Ознакомившись с функционалом, нетрудно убедиться, что вдохновение юный программист тоже черпал из проекта Стива Спрэнга на GitHub. Впрочем, оригинал был заметно переработан уже в первой версии приложения: появился инструмент для рисования от руки, имитирующий мазок кисти, слой разворачивался, показывая вложенные него объекты, стало возможным задавать размер и положение объекта численно, а расположение элементов управления на экране больше напоминало Illustrator. Уже через год интерфейс претерпел существенные изменения с целью как можно больше освободить экран (для полного счастья в режиме Magic canvas панели становятся прозрачными, если «наехать» на них, рисуя или трансформируя кривую). В свёрнутом состоянии управляющие панели занимают совсем мало места, при этом, когда они развёрнуты, текст и значки на них достаточно крупные и хорошо читаются, поэтому приложением удобно пользоваться даже на iPhone. Расположение панелей таково, что можно работать, держа устройство на весу.

Весь функционал Inkpad на месте, но везде, где только можно, — значки, кнопки, линейные и круговые ползунки, всё разворачивается и сворачивается, прокручивается и пролистывается. Например, в значке указателя спрятаны опции выбора объектов поочерёдно или с добавлением к выборке, дублирование с повтором трансформации, масштабирование и поворот относительно выбранного центра, для «карандаша» рядом появляется ползунок, регулирующий степень сглаживания кривой, а для ластика — регулировка размера.

Для точности позиционирования есть привязка к сетке, точкам, углам и направляющим, которыми могут быть прямые линии и геометрические формы, нарисованные в специальном слое; можно также включить режим быстрых направляющих. Кроме того, после выбора объекта на экране появляется кружочек-джойстик, пошагово перемещающий объект в любом направлении. Если стукнуть по нему, кружок станет больше и появятся стрелочки для перемещения строго по вертикали и горизонтали. Ещё рядом с джойстиком при перемещении объекта или построении кривой любым инструментом появляется «линза» с увеличенным изображением активного участка и точкой в центре касания.

Для текста можно указать шрифт, начертание, размер букв, отрегулировать кернинг, трекинг и интерлиньяж (расстояние между строчками нельзя сделать меньше определённого порога). Невозможно изменить эти параметры для части текста, разве что выбрать начертание на экранной клавиатуре.

Для объектов в палитре стилей можно задать степень размытия, добавить тень и указать один из 12 режимов наложения, для слоёв можно только поменять прозрачность. В палитре слоёв можно добавлять не только слои, но и новые монтажные листы (Artboards) разного размера. В документ можно вставить шаблонное изображение из готового набора или своего собственного, растровое изображение из «Фото» или загрузить по сети какой-нибудь из 80 000 векторных символов из набора Iconator.

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

Готовая работа автоматически сохраняется в «Галерее», можно экспортировать документ целиком или только отдельный слой в форматах JPEG, PNG, SVG, PDF и, при наличии Adobe ID, в формате Adobe Illustrator. Надо только учитывать, что при экспорте и импорте векторных форматов бывают разные неожиданности, растровые эффекты теряются или искажаются, текст распадается или превращается в кривые.

Можно также поделиться своим произведением в соцсетях или отправить на печать. Оценить, что получится на печати, позволяет режим предварительного просмотра в CMYK, хотя задать цвет в CMYK невозможно.

Хотя приложение довольно сырое и работает не слишком стабильно, у него уже более миллиона скачиваний, Linearity успешно привлекает инвесторов, а разработчики активно общаются с пользователями и совершенствуют свой продукт. В разделе «Новости» публикуются сообщения об изменениях, советы и подсказки, отзывы пользователей и т. д.

Среди последних нововведений — поддержка Split View и функция автотрассировки растровых изображений. Следующая цель — сделать Vectornator удобной платформой для коллективных проектов (пока есть возможность импортировать проекты из Figma).

Приложение бесплатно, нет даже встроенных покупок, и в ближайшее время разработчики обещают не взимать деньги за новые версии. Спустя два года после выпуска Vectornator для iPad его создатели готовы к завоеванию новых территорий и уже сделали программу для macOS, тоже бесплатную. Пока она не очень удобна и часто падает, но лиха беда начало.

Бодрое продвижение Vectornator — пример того, как раскрутить приложение несмотря на недостатки. Но есть и противоположный пример.

Ложка в бочке

Bez — приложение с весьма своеобразной логикой интерфейса. Под значком выравнивания объектов скрываются также изменение порядка их расположения, численная трансформация и группировка/разгруппировка, а значок палитры объединяет параметры стилей, текста и… размер рабочей страницы. Я так и не поняла, что делает команда Clean в меню Path. Экранные подсказки мимолётны, как видения, и руководство не особо помогает, потому что ограничивается только описанием инструментов.

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

Кривые можно строить инструментом «Перо» или рисовать от руки «Карандашом». В последнем случае, нарисовав кривую, можно сразу увеличить или уменьшить число опорных точек, нажимая появляющиеся рядом со значком инструмента кнопки «+» или «-». Если нарисованная от руки линия близка к прямой, треугольнику, прямоугольнику или кругу, то, задержав палец или стилус на экране, вы получаете соответствующую геометрическую фигуру или отрезок прямой. Опорные точки и рычажки касательных можно двигать в процессе построении кривой, а полное редактирование узлов осуществляется с помощью специального инструмента. При этом выбрать сразу несколько узлов, похоже, нельзя (во всяком случае, в руководстве такая возможность не упоминается).

Нельзя отменить/вернуть действие жестом — только стрелочками на экране. Зато есть множественные заливки, сплошные и градиентные, и разнообразные обводки. Правда, при попытке выбрать расположение обводки относительно контура объекта (внутри, вне или симметрично) она ведёт себя непредсказуемо. Для пунктирных линий предусмотрены целых три пары «штрих–пробел»; третья появляется в меню после установки значений для первых двух. И ещё тень можно добавить (рис. 3).

Рис. 3. Множественные заливки и обводки в приложении Bez — всё это один объект

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

Можно импортировать растровые изображения. Каждый объект, векторный или растровый, — это отдельный слой. Слой можно сделать маской для вышележащих слоёв — всех, или выбранных вместе с маскирующим, или находящихся с ним в одной группе.

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

К списку недостающих функций можно добавить, что нет динамической перерисовки при перемещении и трансформации объектов.

Отдельные достоинства не искупают неудобства и несуразности. А окончательно разочаровываешься, когда при попытке экспортировать файл в приличном качестве, а не в виде «гадкого» JPEG получаешь предложение заплатить за это 599 руб.

Серьёзно?!

Кто не любит наклейки?

Приложение Assembly можно было бы отнести к типу «дизайн для чайников», который предполагает сборку макетов из готовых элементов, если бы не возможность менять готовые формы по своему усмотрению в режиме кривых Безье, что делает его пригодным для создания достаточно сложных работ в векторной графике. К сожалению, нарисовать кривую с нуля невозможно, но изобилие готовых форм и символов позволяет с помощью их модификации получить объекты собственной конструкции (рис. 4). Кривую можно замкнуть и разомкнуть, стерев выбранный сегмент, узлы можно перемещать, добавлять и удалять, делать гладкими или угловыми, симметричными или нет, редактировать по одному или группами.

Рис. 4. Редактирование готового объекта по опорным точкам кривой Безье в Assembly

Помимо редактирования опорных точек, векторные объекты можно масштабировать (в том числе с изменением пропорций), поворачивать, копировать, отражать, группировать и разгруппировывать, менять порядок наложения объектов. Кроме того, с ними можно производить логические операции: объединять и вычитать формы или находить их пересечение, совсем как во «взрослых» векторных редакторах.

В режиме «Стили» меняем заливку (градиентных нет), обводку, прозрачность объекта, добавляем тень. Цвет можно выбрать с помощью круговой палитры или из набора красок, одного из готовых или своего собственного, скопировать пипеткой с картинки или задать код цвета в HEX. Можно также изменить прозрачность цвета. Видимая тень может быть и у прозрачного объекта; накладывая размытые тени от невидимых фигур одну поверх другой, можно имитировать градиентные заливки.

Возможности работы с текстом небогаты, но приложение позволяет менять шрифт, выравнивание, кернинг и интерлиньяж, а также задать цвет, обводку надписи и добавить тень, как и для любого другого объекта. В дополнение к прилагаемому набору шрифтов можно добавить свои в набор My Fonts.

Растровое изображение импортируется в макет только в качестве фона, как-либо поменять его внутри программы не получится, кадрировать его тоже нужно до экспорта. Слоёв нет.

Рис. 5. Библиотеки стикеров в Assembly

Зато есть богатые библиотеки готовых кривых, геометрических фигур, силуэтов и составных объектов (стикеров), сгруппированных по темам (природа, лица, транспорт и т. д.) (рис. 5). Можно создавать свои наборы стикеров и сохранять в них объекты собственного дизайна или готовые элементы из других наборов. Можно импортировать объекты, созданные в других векторных редакторах и сохраненные в формате SVG, но следует учесть, что цвета должны быть шестнадцатиричными, толщина обводки не сохраняется, а сгруппированные кривые могут непредсказуемо разъехаться, поэтому лучше их предварительно разгруппировать. Экспорт в формат SVG происходит более корректно, но тени и растровые фоновые изображения не экспортируются, а текст переводится в кривые. Можно также экспортировать готовый макет в формате PNG или PDF.

Интерфейс простой и логичный, есть множественный откат. Умная привязка и функция пошагового перемещения Nudge облегчает конструирование сложных объектов. Приложение не русифицировано, но всё понятно и без слов.

В общем и целом приложение весьма удобное, простое и симпатичное, так что я, хотя и не продлила подписку, всё же не стала его удалять — вдруг пригодится?

Специалист

Если качество автотрассировки в Vectornator не устраивает, можно воспользоваться другим бесплатным приложением, предназначенным специально для этой цели, — Imaengine. Загружаем фотографию, обрезаем до нужного размера, выбираем один из предложенных стилей, регулируем ползунками количество цветов, деталей и штрихов и другие настройки, в зависимости от выбранного стилевого шаблона. (К каждому шаблону есть пояснение, которое включается знаком вопроса возле первого из них.) Глядя на экран, выбираем оптимальный вариант и экспортируем полученное изображение в один из форматов: PNG, JPEG, PDF или SVG. Быстро и качественно (рис. 6).

Рис. 6. Сравнение автотрассировки в Vectornator и Imaengine: а) исходное фото; б) Vectornator; в) Imaengine, шаблон Pure Vector без штрихового слоя

За дополнительную плату (299 руб.) можно сохранить файл в Dropbox, Adobe CC, в галерее другого приложения или экспортировать в формат Adobe Illustrator. Впрочем, у меня и так всё прекрасно сохранялось куда угодно после нажатия кнопочки Open in.

Если, несмотря на обилие стилей и настроек, результат всё же не удовлетворяет, можно доработать векторную картинку прямо в редакторе самого приложения (рис. 7). В зависимости от шаблона получается изображение, состоящее из двух или трёх слоёв: фон, краска, штрих (условно). Слои можно дублировать и добавлять новые, менять местами и удалять, можно также изменить прозрачность слоя. Отдельные объекты в панели слоёв не отображаются. Объекты можно выбирать по одному или группами, масштабировать с сохранением пропорций или без (повернуть не получается) и редактировать в режиме кривых Безье (нельзя только изменить тип опорной точки). Есть «ластик» для векторного стирания, кисть, рисующая замкнутые контуры в виде линий заданной толщины с закруглёнными концами («червячков»), и инструмент для рисования кривых произвольной формы (разомкнутые кривые не поддерживаются, любая кривая замыкается автоматически).

Рис. 7. Режим редактирования в Imaengine

И нарисованные, и полученные в результате трассировки объекты можно перекрасить, залить линейным или радиальным градиентом, добавить обводку, в том числе пунктирную. Цвет настраивается ползунками RGB, регулируется прозрачность цвета. Образец цвета можно взять пипеткой с картинки.

Объекты можно удалять, копировать, вырезать и вставлять из буфера обмена, менять порядок их наложения. Из логических операций есть только объединение кривых, при этом конечный объект перекрашивается либо в цвет большей по площади фигуры (вариант Simple), либо в тот, который программа сочтёт промежуточным (Blend), прозрачность при этом тоже усредняется.

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

Продолжение следует…

Хотя рассмотренные в первой части обзора приложения могут пригодиться дизайнеру в создании макетов полиграфической продукции, использовать их напрямую для подготовки печатных материалов невозможно, поскольку все они не поддерживают цветовую модель CMYK. Пока единственное приложение векторной графики на iPad, в котором можно создавать документы в CMYK и пользоваться цветовыми профилями, — это Affinity Designer. О нём и ещё о двух приложениях, Graphic и Concepts, пойдёт речь в следующем обзоре.