Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3

В этом уроке вы научитесь создавать простой линейный график в лучших традициях Google Material design. Нам понадобятся инструменты вектора, градиента и маски и мы создадим график в Sketch 3.

Шаг 1

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

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 1

Шаг 2

Затем нарисуйте меньший прямоугольник, на котором будет расположен блок с графиком. Размеры должны быть 880 x 540, цвет фона – белый, без границ и с легкой тенью:

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 2

Шаг 3

В панели слоев кликните правой кнопкой мышки на каждом слое и выберите опцию Lock Layer (блокировать слой).

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 3

Шаг 4

Используя инструмент для рисования линии Line (L), нарисуйте сначала вертикальную линию сетки графика. Нижняя точка линии должна отступать на 70 пикселей от нижнего и левого краев серого блока. А длина самой линии должна быть 340 пикселей.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 4

Шаг 5

Продублируйте эту линию 9 раз, подвигая каждую копию на 80 пикселей вправо:

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 5

Шаг 6

Используйте инструмент Text (T) для создания меток между линиями сетки.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 6

Шаг 7

Также создайте текстовый заголовок для графика.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 7

Шаг 8

Теперь можно рисовать саму диаграмму. Желаемый эффект – плавная, волнистая линия между точками. Начните с выбора инструмента вектор, Vector (V), и кликните там, где должна быть точка на первой линии сетки. Затем кликните на месте второй точки на второй линии сетки, немного выше первой. И пока кнопка мышки не отжата от точки, потяните рычажки горизонтально в стороны, пока они не станут примерно посередине делений сетки:

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 8

Шаг 9

Повторите этот процесс снова, создавая векторную точку для каждой линии сетки, чтобы получилась плавная, волнистая линия:

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 9

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 10

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 11

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 12

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 13

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 14

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 15

Шаг 10

После того, как нанесена последняя точка, измените тип ручек управления на Disconnected (независимые), и удалите правую ручку, перетянув ее в саму точку. Это даст прямой угол при рисовании следующей точки.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 16

Шаг 11

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

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 17

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 18

Шаг 12

Чтобы закончить рисование линии, кликните опцию Close Path (закрыть линию).

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 19

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 20

Шаг 13

Теперь нужно закрасить получившиеся волны. Удалите границу, если такая была, и вместо нее примените градиентную заливку (Gradient fill). Кнопки в виде стрелок помогут быстро повернуть градиент, сделать его горизонтальным. В качестве крайних цветов установите #61FAD2 и #1C9BF7. Я настоятельно рекомендую сохранить эту настройку в качестве пресета для экономии времени в дальнейшем.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 21

Шаг 14

Установите непрозрачность (параметр Opacity) слоя ‘Path’  50%.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 22

Шаг 15

Продублируйте слой  ‘Path’. На новом слое ‘Path 2’ откройте режим векторного редактирования. Сначала кликните на опцию Open Path (разомкнуть линию) и удалите две нижние точки, так чтобы у вас осталась только волнистая линия  слева направо (сначала это будет выглядеть не очень, но не беспокойтесь, все идет как надо!)

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 23

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 24

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 25

Шаг 16

Пока ‘Path 2’ выделен, удалите градиентную заливку и вместо создайте границу (Border) толщиной в 3 пикселя, используя тот же градиент (вы же сохранили его в виде пресета?).

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 26

Шаг 17

Выделите оба слоя линий с заливкой и с границами (‘Path 1’ и ‘Path 2’) и нажмите CMD+G, чтобы сгруппировать их. Переименуйте группу в ‘Wave’.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 27

Шаг 18

Создайте новый прямоугольник над группой ‘Wave’, это для выделенного сегмента графика. Прямоугольник должен быть примерно на 40 пикселей выше и на 40 пикселей шире, чем сетка графика, чтобы придать иллюзию глубины.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 28

Шаг 19

Выделите слои ‘Wave’ и ‘Rectangle 3’ и продублируйте их.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 29

Шаг 20

Выделите копии, слои ‘Wave 2’ и ‘Rectangle 4’ и выберите опцию Layer > Mask with Selected Shape (маскировать выделенной фигурой) или нажмите на иконку Mask в панели инструментов.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 30

Шаг 21

Расширьте группу ‘Wave 2’  в панели слоев и выделите подгруппу, также названную ‘Wave 2’. С помощью рамки вокруг и кнопок трансформирования увеличьте размер волны примерно на 5-10%, чтобы получился эффект масштабирования.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 31

Шаг 22

Теперь откройте подгруппу ‘Wave 2’, размер которой вы только что изменили, и выделите в ней слой ‘Path 2’. Это слой с границей. Увеличьте толщину границы (Thickness) до 5.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 32

Шаг 23

Все еще сложно отличить увеличенный сегмент графика от остальной волны, так что давайте вернемся к первой группе ‘Wave’ и уменьшим значение параметра Opacity (непрозрачность) до 75%.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 33

Шаг 24

Чтобы закрепить иллюзию глубины, выделите слой ‘Rectangle 3’ и примените к нему тень (Shadow). Теперь есть четкое разделение между базовым графиком и выделенным сегментом.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 34

Шаг 25

Наконец, просто верните текстовую надпись ‘30’, которая сейчас спрятана, но сделайте ее темнее и больше на этот раз.

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - 35

Результат

Вот так выглядит конечный результат. Очень простой, но очень симпатичный график!

Урок по кривым Безье в Sketch. Cоздаем плавный сегментированный график в Sketch 3 - результат

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

 

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

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

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5