Как нарисовать круговую диаграмму в Sketch с помощью градиентов

Удивительно, довольно легко нарисовать круговую диаграмму в Sketch. На самом деле, вы можете воспользоваться угловыми градиентами (также они называются коническими градиантами в другом приложении).

  1. Сначала нарисуйте круг с помощью кнопки o и измените его заливку на угловой градиент (четвертая иконка в диалоге заливок).
  2. Размер сегментов определяется границами новых оттенков. Здесь фокус в том, чтобы добавить два цвета в одну и ту же позицию, как вы делаете это в CSS для фонов в полоску.
  3. Установите цвет начальной точки градиента на тот, которым хотите закрасить один сегмент и цвет конечной точки, которым нужно закрасить второй сегмент.
  4. Теперь вставьте первый стоп-цвет двойным кликом на градиент и установите такой же оттенок, который вы задали для начальной точки.
  5. Чтобы передвинуть его в определенную позицию, вы можете использовать числовые клавиши на клавиатуре. Например, если хотите установить его на 20% оси градиента (это 20% от диаметра окружности), нажмите 2, для 70% – нажмите 7 и т.д.
  6. Вставьте второй стоп-цвет оттенка конечной точки градиента (это цвет второго сегмента) в ту же самую точку, и либо перетяните его в позицию первого, либо опять воспользуйтесь числовыми кнопками.
  7. Получилась круговая диаграмма с двумя сегментами. Таким же способом можно добавить больше сегментов, просто нужно убедиться что конечный цвет градиента имеет тот же оттенок, что и третий (следовательно, последний) сегмент.
  8. Для еще одного сегмента вставьте дополнительный стоп-цвет такого же оттенка, что и предыдущий стоп-цвет, и еще один точно в ту же позицию, в оттенке следующего стоп-цвета.
  9. Чтобы легче выделять нужный стоп-цвет (что особенно сложно, учитывая, что в одной точке у вас будет два стоп-цвета), вы можете напрямую кликать на маркеры на окружности.
  10. Если нужен стоп-цвет ровно посередине между двумя другими стоп-цветами, можно нажать = (знак равно) после его вставки.

Как нарисовать круговую диаграмму в Sketch с помощью градиентов - 1

Как нарисовать круговую диаграмму в Sketch с помощью градиентов - 3

Как нарисовать круговую диаграмму в Sketch с помощью градиентов - 4

Как нарисовать круговую диаграмму в Sketch с помощью градиентов - 6

Как нарисовать круговую диаграмму в Sketch с помощью градиентов - 9

 

3 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
9 советов как стать профи в Sketch
Подробнее

9 советов как стать профи в Sketch

Совсем недавно, Sketch стал для нас повседневным приложением для создания крутых дизайн проектов. Sketch быстрый, гибкий, ориентированный на UI инструмент. В нем содержится несколько секретных опций. Я хочу познакомить вас с моими любимыми.
Как можно использовать Github для совместной работы над дизайном
Подробнее

Как можно использовать Github для совместной работы над дизайном

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
2
Share