Наш канал в

Удивительно, довольно легко нарисовать круговую диаграмму в 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

 

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

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

Каллиграфия и леттеринг для начинающих

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

Zeplin.io – способ подружить дизайнера и верстальщика

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

Руководство дизайнера по DPI и PPI

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