Advertisement
  1. Web Design
  2. Sketch

2 быстрых способа создания круговых диаграмм в Sketch

by
Read Time:2 minsLanguages:

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

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

Смотрите

Способ #1

Наиболее простой, включает использование всего одного плагина. Sketchy Pies был создан Эби Нимбалкар, он помогает создавать круговые диаграммы из круглых слоев.

Начните с создания круга. Затем, выделив его, идите в Плагины > Sketchy Pies > Convert to Pie Chart. Вам будет предложено перечислить через запятую цвета HEX. Введите столько, сколько захотите и нажмите OK; ваша диаграмма готова!

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

Вы можете задать размер секций, когда вы только создаете диаграмму. Это делается добавлением цвета со значением, например, процентов: #444444:20%,#555555:80% или единичные значения, как #444444:.2,#555555:.8.

Способ #2

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

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

Примечание: Я использую версию Sketch 41.2, и вы можете заметить негладкую линию на стыке секций. Так было не всегда, так что я уверен, что это баг Sketch. Если вы используете другую версию и у вас все в порядке, то дайте мне знать!

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.