Advertisement
  1. Web Design
  2. Sketch

Небольшое руководство: воссоздаем кольца активности Apple Watch в Sketch

by
Read Time:2 minsLanguages:

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

В этом видео я объясню как воссоздать, используя Sketch, кольца активности Apple Watch. Это отличное упражнение, чтобы показать насколько Sketch любит математику; вы удивитесь тому, как много Sketch будет считать за вас. Давайте начнем!

Посмотреть небольшое руководство

Кольца активности

Давайте взглянем на то, чего мы хотим добиться. Эта картинка взята с www.apple.com и она показывает кольца в контексте.

Кольца активности из интерфейса Apple Watch весьма легко узнаваемы.

1. Полотно

Начните с квадратного полтна с гранью 512px; он отлично подойдет.

Добавьте цвет фона (черный #000000), затем добавьте круг в 300px в центр. У этого круга не будет заливки, но задайте ему сочную обводку в 25px.

2. Кольца

Продублируйте первое кольцо, затем уменьшите его забрав 52px из его ширины. Вы можете сделать это введя 300-52 в поле размера и Sketch все посчитает за вас.

Выровняйте его по первому кругу.

Раскрасьте его, затем повторите все вновь для третьего кольца.

Сгруппируйте три кольца и назовите ее как-то вроде "задний фон". Продублируйте группу и назовите ее "передний фон". Теперь мы будем работать на передней группе, так что первую можете спрятать.

3. Двигаем

Чтобы создать эффект индикатора прогресса, мы используем движение строки. Sketch умеет так делать: мы попросим его посчитать точный диаметр круга увеличив ширину (300px) на пи π. Введите выражение 300*3.14159265359 в поле Gap окна Borders и круг эффектно исчезнет. Это потому что расстояние между строкой вытесняет весь диаметр круга. Указав значение Dash мы увидим, что наш круг появляется опять.

sketch loves mathsketch loves mathsketch loves math
Sketch ♥ математику

Сделав это, вернемся к окну Borders, закруглим концы линии:

Напоследок, зайдем в Layer > Transform > Flip Vertical, чтобы повернуть наши кольца, чтобы они начинались на нуле градусов.

4. Возвращаем задний фон

Сделав круги, вернем видимость нашему заднему фону, изменим на 1, уменьшив прозрачность до 10%

5. Иконки

Осталось только добавить иконки в конце линий. Создайте новое полотно в 16px, а затем и любые нужные вам иконки. Я создал простые иконки стрелочек, но вы можете даже взять некоторые с GraphicRiver.

Готово!

Вот что у нас получилось:

Спасибо, что прошли этот путь, надеюсь это краткое руководство по UI научило вас чему-нибудь новому.

Схожие руководства

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.