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

Тем не менее, растет и количество альтернативных инструментов. В этой статье я расскажу о первом браузерном приложении, которое позволяет создавать векторные иллюстрации и UI-дизайны — Gravit.

Для начала немного истории. Я долгие годы был верным поклонником Adobe Fireworks — время от времени использовал его для дизайна интерфейсов, цифровых иллюстраций, создания быстрых макетов или каркасов. (Почитайте раздел по Fireworks в Smashing Magazine, чтобы освежить в памяти информацию об этом продукте. Там действительно много отличных статей и полезных уроков).

Мне нравился Fireworks в большей степени как инструмент для иллюстрации — я пользовался им для создания цифровых иллюстраций в ряде побочных проектов, как, например, сериал Friday Bunny.

“Friday Bunny”, созданная в Adobe Fireworks
Иллюстрация “Friday Bunny”, эпизод 65, созданная в Adobe Fireworks, полностью векторный формат

Свинка с поломанным банджо
Иллюстрация “Свинка с поломанным банджо”, созданная в Adobe Fireworks, и опубликованная как часть проекта Dueling Pigs With Banjos.

Работа в Fireworks казалась мне очень интуитивной, его возможности идеально соответствовали моим потребностям.
Когда Adobe объявил о прекращении разработки Fireworks, для меня это был печальный день, как и для многих других, кому не нужен громоздкий и сложный Photoshop, кто предпочитал ему легковесный, но мощный Fireworks. С тех пор многие дизайнеры пользовательских интерфейсов искали надежную альтернативу, и такой стал Sketch от команды Bohemian Coding. В Smashing Magazine не так давно опубликовали неплохую коллекцию подсказок для людей, которые хотят пересесть с Fireworks на Sketch.

К сожалению некоторых из нас, Sketch работает только на Mac. Если у вас нет Mac, вы не сможете даже протестировать эту программу в деле. И вот тут на помощь приходит Gravit, многообещающее приложение, которое я открыл несколько месяцев назад в попытках найти хорошую альтернативу Fireworks.

Почему Gravit? По большей части потому, что Sketch и Affinity Designer (приложения только под Mac) мне не подходят. (Примечание: пока мой пост готовился к публикации, команда Affinity объявила о релизе версии под Windows, но нужно подождать релиза публичной бета-версии несколько месяцев).

Не поймите меня неправильно — я перечитал массу положительных статей о Sketch, и я уверен, что это стоящая альтернатива Fireworks. Тем не менее, поддержка только Mac — серьезное ограничение, как по мне — а если вы используете и Windows, и Mac, и нужно работать в Sketch на обеих платформах? А что, если вы вообще не пользуетесь Mac? (И я не один, кто задает такие вопросы).

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

Примечание: Некоторые все еще используют Fireworks для иллюстраций и дизайна интерфейсов из-за его прекрасных возможностей. Тем не менее, разработка Fireworks прекратилась более двух лет назад, и я очень рекомендую найти ему замену, если вы еще этого не сделали.

Дизайн иконки ракеты в Adobe Fireworks
Иллюстрация, созданная в Fireworks в 2014 году Fabio Benedetti — иллюстрация взята из статьи “Дизайн иконки ракеты в Adobe Fireworks.”
Иллюстрация, созданная в Fireworks в 2015 году
Иллюстрация, созданная в Fireworks в 2015 году Джеймсом Паркером.

Начнем с основ.

Что такое Gravit?

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

Конечно, инструмент, который работает в браузере, имеет свои плюсы и минусы (об обоих я расскажу далее). Главным плюсом является независимость от платформ — если у вас есть современный десктопный браузер, то неважно, какую операционную систему (Windows, Mac или Linux) вы используете. Недостатком является хранение всех ваших дизайнов на сервере Gravit. Без доступа к интернету вы не сможете никак их использовать. (Примечание: разработчики рекомендуют пользоваться Chrome для работы с Gravit, но он также хорошо работает и в Firefox).

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

Я знаю, что вы думаете: “Дизайн-инструмент, который хорошо работает как веб-приложение? Его функционал, должно быть, очень ограничен”. К моему удивлению, это не тот случай.

Набор возможностей Gravit впечатляет, и некоторые из его функций свободно конкурируют с Fireworks, Sketch и даже с Illustrator. Так как Gravit изначально создавался в духе FreeHand, у них есть немного общего, но многим они и отличаются.

(Если вы интересуетесь историей компьютерной древности: Macromedia FreeHand был векторным иллюстратором на подобие Illustrator, довольно мощным инструментом. Перед тем, как Adobe купил Macromedia, в Macromedia решили остановить разработку из-за того, что очень много возможностей были идентичны возможностям Illustrator. FreeHand также хорошо интегрировался с Fireworks и Flash, которые тоже позже были выкуплены Adobe, и один, как было уже упомянуто, в последствии прекратил свое существование.)

У меня многолетний опыт работы с Fireworks (и Illustrator), и вот уже несколько месяцев я создаю иллюстрации в Gravit. Нужно признать, что мне нравится Gravit. Нескольких важных опций все же не хватает, но темп разработки довольно быстрый, так что надеюсь, их добавят в будущем. (Как минимум, надежда есть!)

Totoro
“Totoro” — иллюстрация, которую я создал в Gravit, исследуя его возможности. (Посмотреть в Gravit)
Plane
“Plane” — еще одна иллюстрация, созданная в Gravit.

Возможности Gravit

Я использую Gravit в большей степени для векторных иллюстраций. Так что в следующем разделе я расскажу о самых интересных функциях в деталях. Эти возможности также должны отлично подойти и для дизайна интерфейсов.

Приятели
“Приятели” — маленькая иллюстрация, которую я недавно нарисовал в Gravit.

Обзор интерфейса

Если вы уже работали в других дизайн-редакторах, таких как Fireworks, Illustrator, Photoshop и Sketch, интерфейс Gravit покажется вам знакомым с первых секунд. Та же панель инструментов вверху, панель слоев слева и панель свойств (в Gravit она называется Format) справа.

Текущая версия пользовательского интерфейса Gravit
Текущая версия пользовательского интерфейса Gravit

Одинокая панель инструментов и две боковые панели придают интерфейсу минималистичность, но (как я понял спустя некоторое время работы в нем) это результат очень разумного планирования и попыток исключить все ненужное. Например, в отличие от Fireworks и Illustrator, в Gravit нет отдельно панели для инструментов выравнивания; тем не менее, как только вы выделили один или более объектов на канвасе, опции выравнивания появляются вверху панели Format. И если этого недостаточно, вы можете получить доступ к более продвинутым опциям, расширив панель в панели. Умно!

Выравнивание объектов в Gravit
Выравнивание объектов в Gravit: Зачем раскрывать отдельную панель, если можно все сделать в одной?

Холст

Начнем с холста, потому что с этого все и начинается. В Gravit канвас может быть фиксированной ширины или иметь бесконечные размеры. Чтобы переключиться с фиксированной ширины на бесконечный размер (или наоборот), просто нажмите 0 (ноль) в поле “Width” или “Height” в панели Format. (В Fireworks мне всегда не хватало безразмерного канваса. В Fireworks можно выбрать только фиксированный канвас до 6000 × 6000 или 10,000 × 10,000 пикселей. В этом смысле Gravit гораздо ближе к Sketch, который также поддерживает бесконечный канвас, и мне это очень нравится).

 

Канвас в Gravit можно сделать прозрачным, залить сплошным цветом или линейным градиентом.

Векторные инструменты

Большая часть задач по дизайну пользовательского интерфейса и иллюстрированию требует работы с векторами. И хотя векторные инструменты — наиболее используемые инструменты в любом серьезном дизайн-приложении, не могу не ответить, что векторный движок в Gravit выше всяких похвал — я испытал его вдоль и поперек, и могу смело сказать, что работает он довольно хорошо. Вот список векторных инструментов, которые сейчас доступны в Gravit:

  • Ручка,
  • Безигон,
  • Текст,
  • Линия,
  • Автофигуры: прямоугольник, эллипс, треугольник, многоугольник и звезда.

Работа с векторами в Gravit интуитивна, возможно, даже более интуитивна, чем в Fireworks или Illustrator. (Я еще вернусь к более детальному обзору векторных возможностей Gravit в этом посте)

Есть также множество опций для выделения и подвыделения объектов, линий и векторных узлов:

  • Например, в дополнение к обычному инструменту указки и инструмента Subselection (подвыделение) есть еще инструмент Layer (слой) для выделения целых слоев прямо на канвасе).
  • Указка и Подвыделение работают примерно так же, как в Fireworks и Illustrator. Тем не менее, здесь добавлены умные помощники. Например, двойной клик на объекте переключает его в режим редактирования. Выделите группу (одинарный клик с помощью указки), и затем можно выделить отдельно любой объект группы без необходимости переключения на инструмент Subselection.

Вот кое-что еще, с чем Gravit справляется хорошо. Если вы выделите прямоугольник с закругленными углами и измените его размер, углы не исказятся. (Fireworks немного скосит углы при трансформации).

Растровые инструменты

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

Помимо обрезки, масок, блендинга, ресайза и добавления фильтров вы особо ничего не сможете сделать с растром в Gravit. Нельзя выделить рамкой, чтобы скопировать или обрезать фрагменты картинки, а также нет инструментов для управления отдельными пикселями. Но вряд ли вам часто будет не хватать растровых инструментов при работе над иллюстрациями или пользовательским интерфейсов. Должен признать, что при работе над цифровой иллюстрацией я очень редко нуждаюсь в каком-либо инструменте для растра.

 

Обрезка объектов в Gravit очень проста
Обрезка объектов в Gravit очень проста — выделите два объекта и нажмите “Clip” на главной панели инструментов. Или же обрежьте первый объект и перейдите в меню “Edit” → “Paste Inside Selection”, чтобы вставить его во второй. Вы можете обрезать и векторные фигуры тоже (Изображение: Jason Parrish, CC)

Новые функции добавляются довольно часто, так что если вы не нашли чего-то, есть очень большой шанс получить эту опцию в следующем релизе. Например, пока я это все писал, я узнал, что в следующем обновлении добавится инструмент Crop (для растра); действительно, через несколько дней этот инструмент добавился.

Новый инструмент Crop
Новый инструмент Crop

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

Ручка

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

Ручка в Gravit работает так, как я ожидал. Вы можете создавать векторные точки (векторные углы), соединять их и создавать как прямые, так и изогнутые линии. При использование ручки можно использовать клавиши Alt или Shift в разных комбинациях для простого переключения между прямыми и кривыми, установки углов наклона 0-, 45- и 90 градусов, и т.д.

Также есть инструмент Bezigon, которые отлично дополняет Pen, позволяя создавать сложные векторные фигуры, давая больше контроля для каждого создаваемого узла. Используя инструмент Bezigon, вы можете с легкостью создавать идеальные круги, эллипсы, волны, спирали и прочие симметричные векторные объекты.

Bezigon в Gravit
Несколько фигур, которые я нарисовал с помощью инструмента Bezigon в Gravit

Совет: Чтобы создать простую прямую с помощью безигона, кликните мышкой (чтобы создать точку), передвиньте мышку и кликните еще раз (нарисуется прямая линия между двумя точками); вы не заметите никакой разницы между этим способом и рисованием ручкой. А так будет уже интереснее: кликните, удерживайте Alt и кликните еще раз; следующий узел будет создан с двумя симметричными ручками, и их угол будет меняться автоматически в зависимости от следующего создаваемого узла.

Посмотрите видео-демо, как я нарисовал идеальную спираль всего в несколько кликов:

Кликните, удерживайте Alt и кликните еще раз — и вы получите идеальную спиральную кривую! (Я включил сетку в Gravit, чтобы было проще располагать узлы на нужных мне расстояниях друг от друга (Посмотреть в большом размере).

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

Нож

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

Например, инструмент Knife а Gravit может вырезать несколько фрагментов сразу (используя как прямые, так и изогнутые линии), можно также вырезать текстовые объекты как простые векторные кривые.

Выберите инструмент Knife, удерживайте Alt и кликните несколько раз для нескольких вырезаний сразу. Чтобы панель слоев была максимально упорядоченной, после многократных вырезок создадутся две группы объектов; при необходимости их можно будет легко разгруппировать (Control/Command + Shift + G) и обрабатывать фигуры индивидуально.

Составные фигуры

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

Но как обстоят дела с составными фигурами? Это динамичные, редактируемые группы объектов. Вы можете комбинировать множество векторов в одну комплексную фигуру, и каждый векторный компонент будет оставаться редактируемым сам по себе.

Разные методы комбинации позволяют пользователю выбирать, объединять фигуры, или вычитать одну из другой. В Gravit есть опция compound shape (составная фигура), которая позволяет объединять векторные объекты в единую группу, не разрушая структуру. Доступно четыре режима:

  • Union (объединить),
  • Subtract (вычесть),
  • Intersection (пересечь),
  • Difference (разница).

Одно важное преимущество комбинированных фигур в Gravit — вы можете переключать фигуру с одного типа на другой сколько нужно раз. Например, фигура в режиме Union может быть изменена на Subtract через выпадающее меню рядом с кнопкой “Merge” на главной панели инструментов. В меню вы найдете те же опции, перейдя в “Modify” → “Create Compound Shape.”

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

Индивидуальные объекты в группе комбинированной фигуры остаются редактируемыми. Чтобы их редактировать, просто выделите конкретный компонент используя инструмент Subselection. Вы можете выделить их, изменить порядок в группе и даже добавить новый объект в уже существующую группу, просто перетаскивая его с другого слоя в слой комбинированной группы.

Конвертация составной фигуры в единый контур (т.е. единый векторный объект) также возможна через меню “Modify” → “Path” → “Convert to Path” (или Control/Command + Shift + P).

Совет: Та же команда в Gravit — “Convert to Path” — также сконвертирует любой объект автофигуры в единый векторный контур.

При работе над более сложными иллюстрациями или дизайном в Gravit вы можете даже использовать вложенные составные фигуры! Можно вставить одну группу составной фигуры в другую. Это очень мощная опция для некоторых случаев, и довольно особенная.

Экспорт, сохранение и импорт

Вы можете чувствовать некую ограниченность в этих возможностях, потому что сейчас Gravit поддерживает экспорт и сохранение только в такие форматы:

  • PNG32 и PNG24;
  • JPG (экспортированные JPG-файлы обычно довольно большие, потому что экспортируются в максимально возможном качестве);
  • SVG

Примечание: “Export” в Gravit называется “Download.”

Вы можете импортировать все вышеперечисленные форматы, плюс EPS (тут также есть ограничения). В защиту Gravit скажу, что SVG сейчас важнее, чем когда-либо, и приложение предлагает отличную поддержку SVG. Можно как экспортировать в SVG, так и импортировать SVG-файлы в программу. Импорт осуществляется простым перетаскиванием файла на канвас (или через меню “File” → “Import” → “SVG”). Более того, вы можете использовать буфер обмена для копирования-вставки из Photoshop CC и Illustrator CC в Gravit (сохраняя контент буфера обмена в виде редактируемых векторов), потом что последние версии этих программ Adobe копируют редактируемые SVG-векторы в буфер.

Я также протестировал SVG-файлы, экспортированные из Gravit, и они идеально отображаются в Chrome и Firefox. И хотя экспортированные SVG-файлы иногда немного отличаются от оригинала, это несильно меня волнует, так как SVG-экспорт в Gravit все еще на стадии разработки, постоянно улучшается.

Этот SVG-файл, экспортированный из Gravit
Этот SVG-файл, экспортированный из Gravit, рендерится браузером именно так, как должен (Источник: @gravit_io)

(Примечание: Fireworks никогда по умолчанию не поддерживал SVG. Даже если вы получаете поддержку SVG через бесплатные расширения, такие как SVG Export или SVG Import, вы часто столкнетесь с разными проблемами, особенно при обработке сложных SVG-файлов.)

Работа с цветами

Работа с цветами в Gravit довольно проста. Всплывающая панель Color слегка чересчур минималистична, но свою работу она выполняет отлично. Недавнее обновление панели также содержит свотчи и “Colors in use” (используемые цвета). Эта опция показывает все цвета, используемые в текущем документе.

Gravit поддерживает палитры RGB и HSB, чего более чем достаточно для моих нужд. (Также есть поддержка CMYK, но так как CMYK только для печати, я никогда не пользовался этой палитрой в своей работе; хотя Gravit можно использовать для печати тоже).

Переключение между палитрами
Переключение между палитрами

Градиенты работают как в Fireworks. Их можно трансформировать и отслеживать изменения в реальном времени. Gravit поддерживает только два типа градиентов — радиальный и линейный (в Fireworks их гораздо больше). В Gravit вы можете применять градиенты как к заливкам, так и к контурам, что очень полезно. (Пожалуйста, помните, что в Gravit “stroke” называется “border,” как в CSS).

Вдобавок к стандартным опциям цвета для заливки (прозрачный, сплошной цвет, радиальный и линейный градиенты), в Gravit также есть заливка фона. Вы можете выбирать цвет прямо из канваса, используя инструмент пипетку. И, точно как в Fireworks, у вас есть доступ к стандартному селектору цветов.

В Gravit есть отдельные настройки непрозрачности для заливки и контура.

Режим превью

В Gravit есть четыре режима превью: Full, Fast, Outline и Output. Отсутствует только режим “real pixels”; поэтому, если вы увеличиваете масштаб, увидите абсолютно гладкие векторные линии, не зависящие от уровня увеличения (по аналогии с работой Illustrator).

А в Fireworks есть только один режим превью для всех документов, и это как раз “real pixels,” в котором при зуме векторы отображаются так, как они будут в экспортированном виде. Это очень полезная опция для дизайнера интерфейсов или иллюстратора. Sketch также предоставляет такой режим.

Лично я предпочитаю превью в real-pixels, потому что оно показывает мои иллюстрации более реалистично. Надеюсь, такой режим появится в следующем обновлении Gravit.

Копирование и вставка атрибутов объекта

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

Копирование и вставка атрибутов объекта

В Fireworks есть одна маленькая функция, которая пригождалась мне каждый день. Выделяете какой-то объект на канвасе, нажимаете Control/Command + C (или переходите в меню “Edit” → “Copy”), затем выделяете какой-то другой объект(ы), и нажимаете Control/Command + Alt + Shift + V (or “Edit” → “Paste Attributes”); в результате атрибуты первого объекта (заливка, контур, фильтры и их настройки и т.д) будут применены к другому объекту(или объектам).

В Gravit вы тоже можете скопировать и вставить атрибуты объекта, но сама функция называется “Copy and paste style,” также горячие клавиши немного отличаются. Чтобы скопировать и вставить атрибуты объекта (или стиля) в буфер обмена, выделите объект на канвасе и нажмите Control/Command + C (или “Edit” → “Copy”), затем выделите другой объект(ы), и нажмите F4 (или “Edit” → “Paste Style”).

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

Настройки цвета заливки и контура

Говоря о незначительных (но важных) опциях, нельзя пропустить это. В Gravit, когда вы выделяете объект и создаете новый сразу после этого, новый объект будет создан с теми же параметрами цветов для заливки и контура. Это работает также, как в Fireworks, заметно улучшая мою работу!

В Gravit, доступ к опциям контура (таким, как Ends, Joins и Position) очень прост. Вы можете также сделать сплошной, пунктирный или точечный контур с точно заданными числовыми параметрами.

Опции Ends, Joins и Position для контура в Gravit.
Опции Ends, Joins и Position для контура в Gravit.
Настройка точности штрихов
Настройка точности штрихов

Математические операции

Совсем недавно я открыл (и довольно случайно), что как и в Sketch, в Gravit вы можете использовать массу математических операций (сложение, вычитание, умножение и деление) прямо с панели Format! Например, если вы выделите объект 440 пикселей в ширину, в поле “Width” введете 440 * 3, ширина объекта обновится до 1320 пикселей. (Этой опции не хватало в Fireworks, к сожалению).

Легкое добавление стрелочек к линиям

Вы можете добавить несколько разных типов стрелочек к любой линии на холсте всего в пару кликов. (В Fireworks вы также могли добавлять стрелочки; эта опция доступна через меню “Commands” → “Creative” → “Add Arrowheads.”)

Добавление стрелочек к линиям в Gravit
Добавление стрелочек к линиям в Gravit

Смарт-опции

В Gravit есть опция смарт-дублирования (Control/Command + D). Она позволяет дублировать объекты, одновременно передвигая, вращая, масштабируя или наклоняя копии. Command можно использовать для создания объектов на одинаковом расстоянии друг от друга и для комбинации множества трансформаций, а дублирование может предоставить множество других эффектов (такая же опция есть и в Illustrator, называется “Transform Again”, с такими же горячими клавишами — Control/Command + D).

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

Гайды для умного выравнивания
Гайды для умного выравнивания позволяют легко располагать объекты на одинаковых расстояниях при их создании и/или передвижении. В этом примере, в процессе передвижения объекта C, вы увидите визуальную подсказку, когда расстояние между B и C станет равным расстоянию между A и B.

Автофигуры

Автофигуры (специальные векторные объекты) работают идентично Fireworks. Вы можете настроить их параметры (например, радиус закругления углов прямоугольника или количество вершин у звезды), используя панель Format или желтые точки управления. Возможно, будет лучше показать все на примере (кликните на изображении, чтобы просмотреть анимированную версию):

Масштаб

При выделенном объекте увеличение увеличит этот объект в центре, точно как в Fireworks. Если объект не выделен, зум просто увеличит изображение на экране от центра канваса). Выглядит как небольшое улучшение, но поверьте, если вы постоянно зумите в сторону увеличения и уменьшения разные детали своей иллюстрации, смарт-зум сэкономит уйму времени!

КОЛЛАБОРАЦИЯ И ПРОЧИЕ ВОЗМОЖНОСТИ

В Gravit есть и другие функции, которые я не до конца исследовал.

  • Благодаря опции совместной работы два или более дизайнеров могут работать над одним и тем же проектов с любого места. (Это удобно, но если вы работаете в одиночку, вам это не пригодится). Также, вы можете сделать любой дизайн либо публичным (позволяя каждому видеть и комментировать вашу работу), либо приватным (видеть и редактировать сможете только вы и ваши опциональные коллеги по проекту). Некоторые дополнительные права для дизайн-документов вскоре будут доступны.
  • В Gravit вы можете создать несколько дизайнов из готовых шаблонов. Тем не менее, я всегда создаю иллюстрации с нуля, так что тут не могу никак прокомментировать.
  • В Gravit есть встроенный доступ к огромной библиотеке SVG-иконок. Просто перейдите в “Insert” → “Icon.” Отсюда вы можете посмотреть библиотеку и найти нужную иконку по ключевому слову. Я несколько раз пробовала эту опцию, работало довольно хорошо — до тех пор, пока в библиотеке есть все нужные мне иконки.
вставить векторную иконку Facebook
Работая над дизайном, если есть необходимость быстро вставить векторную иконку Facebook? Перейдите в меню “Insert” → “Icon,” поищите “Facebook,” вот и все!
  • В Gravit есть около 40 живых фильтров (или живых эффектов). Их можно добавить, удалить или отредактировать с помощью раздела Effects в панели Format. Порядок размещения фильтров можно легко изменить перетаскиванием вручную, и вы можете применить несколько фильтров одного типа к любому элементу. В этом смысле Gravit такой же гибкий, как и Fireworks.
Живые фильтры в Gravit
Живые фильтры в Gravit можно добавить или удалить, а также изменить их индивидуальные настройки в разделе “Filters” в панели Format
  • Gravit поддерживает две продвинутые настройки для заливок и сложных контуров: “Non-Zero (Fill Holes)” и “Even-Odd (Keep Holes).” Они доступны через иконку “Advanced fill settings” в панели Format. Я верю, что эта функция также доступна в Illustrator, а в Fireworks она доступна через панель Path.
Пример использования заливки “Non-Zero (Fill Holes)” и “Even-Odd (Keep Holes)” в Gravit.
Пример использования заливки “Non-Zero (Fill Holes)” и “Even-Odd (Keep Holes)” в Gravit.

 

Чего не хватает?

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

Онлайн

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

Горячие клавиши

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

Быстродействие

Работая над более сложными иллюстрациями, я заметил определенные проблемы в работе приложение. Но из собственного опыта я знаю, что Fireworks в таких же условиях тоже начинает тормозить. Надеюсь, в будущих обновлениях это исправят.

Мобильная версия

Когда я слышу о кросс-платформенности, мне почти всегда представляется, что продукт работает на любом десктопе, ноутбуке, планшете и даже смартфоне. Gravit работает отлично в десктопных браузерах (я большую часть времени использую его в Chrome и Firefox, особых проблем не бывает), но я не думаю, что он оптимизирован под работу в мобильных браузерах — как минимум, пока.

Функции

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

Баги

Каждое дизайн-приложение содержит баги и случайно виснет или совсем вырубается. К сожалению, Gravit не исключение. Однажды я потерял некоторые изменения, сделанные в дизайне, просто потому что на стороне сервера были какие-то проблемы (или, может, обновлялось само приложение). Я также видел однажды, как завис Chrome при работе с Gravit, ну и бывает, что время от времени появляется какой-то баг или странное поведение. Хорошая новость состоит в том, что команда Gravit довольно неплохо поддерживает своих пользователей (страничка поддержи называется у них “Community”); если вы отправите отчет о проблеме, есть хороший шанс получить полезный фидбек.
Также можно делиться своими впечатлениями и критикой на официальном Twitter-аккаунте @gravit_io.

“Самолет” (версия 2) страдает от недостающей опции обтекания линии текстом.
“Самолет” (версия 2) страдает от недостающей опции обтекания линии текстом. Может, в следующем релизе все будет хорошо?

Заключение: Буду ли я рекомендовать Gravit?

Короткий ответ — да. Я все еще тестирую Gravit, но уже довольно много использую его в работе. Приложение активно дорабатывается, содержит многие из инструментов, которые нужны мне для работы над иллюстрациями. Оно заточено под задачи цифрового дизайна и иллюстрирования.
Я не являюсь частью команды разработчиков Gravit, но добровольно вкладываю свои усилия в проект, сообщая о багах, с которыми сталкиваюсь (и я был очень рад увидеть, что некоторые из них были быстро исправлены после моих отчетов). Я также создал забавную иллюстрацию, которая очень понравилась команде, из нее они взяли свой талисман (маленький монстр Gravil). Я симпатизирую усилиям разработчикам, поэтому точно буду “присматривать” за этим проектом.

Хотя набор функционала еще не завершенный, я уверен, что опытным дизайнерам и иллюстраторам Gravit будет полезным и интересным. Он также подойдет людям, которые хотят поэкспериментировать с дизайном впервые, а также дизайнерам, которым необходим инструмент для совместной работы (потому что легко редактировать документы нескольким людям одновременно — этой опции нет ни в Fireworks, ни во многих других продуктах). Со временем, если разработки будут вестись теми же темпами, Gravit расширит свою аудиторию поклонников.

иллюстрация “Up in the Air” в Gravit
Я создал иллюстрацию “Up in the Air” в Gravit, вдохновленный проектом An Icon a Day Марко Стьюпика.

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

Если вы уже попробовали работать в Gravit, делитесь своим опытом и мнением!

Примечание: некоторые скриншоты с этого поста могут выглядеть иначе, чем сейчас выглядит Gravit. А все потому, что пока мы потели над подготовкой статьи к публикации, разработчики Gravit выпустили обновление, в котором часть интерфейса выглядит по-другому. В частности, панель Format. Кое-какие изображения я обновил, но некоторые остались в старой версии.