Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gravit Designer
Webdesign

Работаем с Gravit Designer

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Gravit Designer, на мой взгляд, будет крупной программой редактирования векторов в будущем. Она удобная для пользователя, профессиональная и по-настоящему кросс-платформенная, поскольку она работает в браузере, на Linux, Mac, ChromeOS и Windows, а позже будет доступна и на iPad, и на Android. Она активно разрабатывается и новые функции добавляются с огромной скоростью.

И вдобавок ко всему, она ещë и на 100% бесплатна, без рекламы или навязчивых методов монетизации. По словам Алекса от Gravit, когда его спросили, останется ли программа бесплатной:

«Да, определённо останется бесплатной и никогда не будет ограничена тупым «условно-бесплатная» или чем-то ещë. Позже мы можем предложить какие-то дополнительные платные штуки для команд (нам все же надо платить счета за сервера), но сам Designer останется бесплатным, так как мы хотим, чтобы у каждого была возможность получить бесплатно профессиональный инструмент для дизайна.»

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

Установка и первый запуск

Если вы хотите использовать версию Gravit для рабочего стола, направляетесь в designer.io/#download и берите оттуда установщик для вашей ОС. (Заметьте, что на данный момент есть баг в выпадающее меню для сборки Linux, так что пока, все пингвиноиды могут использовать браузерную версию).

Для тех, кто предпочитает использовать браузерную версию — которая всегда имеет последнюю версию, и в данный момент может дать лучшую производительность — переходим: designer.gravit.io/

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

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

Кроме того, если вы зарегистрируете бесплатную учетную запись на Gravit Cloud, вы можете получить доступ к новому диапазону готовых шаблонов, щелкнув вкладку New from Template в левой части экрана приветствия.

Несколько заготовленных шаблонов Gravity для социальных сетей

Здесь вы найдете пятьдесят изображений соц.медиа, тридцать шесть презентаций слайдов, восемнадцать плакатов, двадцать четыре изображения для статей в Facebook, двадцать три изображения для блога, двадцать шесть постеров А4 и двадцать картных рисунков и все они готовы к использованию. Все они готовы к использованию так, как они есть, или могут использоваться в качестве основы для копирования. Эта коллекция совершенно новая, всего пару недель «отроду», поэтому со временем ожидайте её роста.

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

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

Первое, что вы, возможно, захотите узнать, это то, что интерфейс не должен быть фиолетовым. Вы можете оставить фиолетовый, но если вы предпочитаете монохромный пользовательский интерфейс, перейдите в главное меню в верхнем левом углу, выберите Edit > Settings и выберите “Dark Theme” или “Light Theme”.

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

Gravit menu options

С левой стороны у нас есть три вкладки: Layers, Libraries и Tutorials. Вкладка с уроками (tutorials) (из-за её перемещения в  строку меню Help с версией 3.2.), что отлично подходит для помощи, когда вы впервые используете Gravit. Вкладка библиотек (libraries) предоставляет вам обширную коллекцию активов для перетаскивания — это в дополнение к шаблонам, о которых мы говорили выше. Вкладка слоёв (layers) — это то, что вы будете держать открытым большую часть времени, так как отображает список ваших страниц (вкратце о страницах) и, конечно же, ваши слои.

С правой стороны у вас есть конкретные элементы управления контентом для выбранного в данный момент объекта. Если ничего не выбрано, вместо этого будут отображаться параметры документа.

Страницы; как и Artboards, только с бонусом «Powerpoint»

Страницы в Gravit Designer — это нечто вроде гибрида страниц и artboards, которые вы можете найти в других приложениях. Каждая страница похожа на самостоятельный документ с настройками собственного размера, поля и цвета холста. Вы начинаете с одной страницы по умолчанию и добавляете больше, нажимая кнопку Create New Page в верхней правой части панели Pages. Затем вы можете просмотреть любую страницу, выбрав её на этой панели.

Если вы хотите использовать страницы, как бы вы обычно использовали artboards, включите переключатель слева от значка удаления, и вы сразу увидите все свои страницы в «Многостраничном режиме». Эти страницы могут быть выбраны, перемещены, масштабированы вручную или с помощью разных предустановленных размеров, как если бы они были отдельными документами. В многостраничном режиме вы также можете дублировать страницы, нажимая на их заголовок на холсте, чтобы выбрать их, либо ALT+перетаскивание или нажатие CTRL/CMD + D.

На страницах Gravit также есть удивительная функция «Master Pages». С помощью этой функции вы можете настроить страницу как «главную страницу» с элементами, такими как фоны или заголовки, которые будут общими для других страниц. Затем вы можете настроить эти другие страницы по начертанию с этой главной страницы, внеся весь её контент, по которому вы создадите дополнительные элементы. Когда вы обновляете элементы главной страницы, все остальные страницы будут обновляться в режиме реального времени.

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

Воспроизведение презентации в Gravit

Контуры и фигуры

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

Однако у нас также есть дополнительный инструмент, который очень полезен, и это инструмент bezigon. Если вы нажмёте ALT при укладке точек с помощью инструмента bezigon, вокруг каждой точки будут автоматически генерироваться плавные кривые.

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

Обычный текст и текст по контуру

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

Функция, которая будет очень полезна для веб-дизайнеров; если вы наберете «lorem», затем нажимаете ПРОБЕЛ, вы получите абзац рыба-текста «Lorem ipsum» автоматически.

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

Если вы выберете текст, который размещён по контуру, у вас будет доступ к переключателям в правой колонке, там есть настройки положения текста внутри или снаружи контура, а ещë вы можете перевернуть текст. Есть ещë простой способ положения текста — просто нажмите и перетащите маленький оранжевый маркер в начале текста — вот и всё, что нужно сделать.

Интегрированные шрифты Google

Большинство дизайнеров несколько раз «катались на карусели» веб-шрифтов: перейти в Google Fonts, выбрать шрифт, загрузить и установить его (в некоторых случаях, нужно перезапустить приложение для дизайна), выбрать шрифт в этом приложении, повторить, если он выглядит неправильно. Или, возможно, мы могли бы просто использовать Skyfonts вместо этого, чтобы пропустить шаг «загрузить и установить».

Однако в Gravit Designer весь выбор шрифтов Google доступен прямо в приложении, поэтому использование веб-шрифтов так же просто, как использование обычных шрифтов.

Кроме того, вы можете импортировать свои собственные шрифты при использовании веб-версии Gravity с помощью File > Import > Add fonts...

Конечно, наличие веб-шрифтов не означает, что вы не можете использовать системные шрифты. Если вы используете настольную версию Gravit, все ваши локальные шрифты будут доступны.

Сложные заливки и штриховки

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

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

Эффекты, лучше, чем стили слоёв

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

В эффекты входит стандартный набор теней (дублируется как внешнее свечение), внутренняя тень (дублируется как внутреннее свечение) и наложение (цвет или градиент). Эффекты штриховок и наложения узоров, конечно же, не нужны из-за существующих инструментов для заливки и штриховки Gravit. Однако есть и некоторые действительно интересные дополнительные эффекты, такие как «зеркало» (mirror), которое создаёт эффект отражения формы ниже или «изогнутой тени» (curved shadow), которая создаёт тень следующим образом:

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

Общие стили, для состояний и экономии времени

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

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

Привязка для полуотзывчивости

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

Закреплён верх, низ и горизонтальный центр привязки дублированной страницы (сверху), чтобы контролировать её поведение в ответ на измененный родительского элемента

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

Подводим итоги

Gravit Designer уже является фантастическим программным обеспечением и он показывает многообещающие моменты, которые в нём могут быть в будущем. В следующей версии 3.2 мы увидим включение символов, которые для некоторых пользователей могут стать последней недостающей частью. Чтобы посмотреть всё, что происходит в следующих нескольких версиях, ознакомьтесь с картой продвижения.

Gravit является мощным, гибким, активно развивающимся и по-настоящему кросс-платформенным и совершенно бесплатным. Поэтому, независимо от вашей причины работать с векторной графикой, Gravit Designer абсолютно стоит попробовать.

Чтобы узнать больше, посетите: designer.io.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.