7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Sketch

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

Scroll to top
Read Time: 1 min

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.