Krótka wskazówka: tworzenie okręgów aktywności Apple Watch w Sketch

() translation by (you can also view the original English article)

W tym wideo, wyjaśnię jak stworzyć za pomocą programu Sketch, okręgi aktywności, które możemy znaleźć w Apple Watch. To świetnych przykład pokazujący jak bardzo Sketch kocha matematykę; będziesz zaskoczony jak wiele Sketch potrafi obliczyć za ciebie. Przejdźmy do pracy!

Obejrzyj krótką wskazówkę

Okręgi aktywności

Zobaczmy co chcemy osiągnąć. Obraz został pobrany z www.apple.com i pokazuje okręgi na tarczy zegarka:

1. Obszar roboczy

Utwórz kwadrat o boku 512px: istnieje dla niego szablon:

Dodaj tło w kolorze czarnym (#000000), następnie dodaj koło o średnicy 300px. Koło nie będzie wypełnione, ale nadaj mu obrys o szerokości 25px.

2. Okręgi

Powiel pierwszy okrąg, następnie zmień jego rozmiar odejmując 52px od szerokości. Możesz to zrobić poprzez wpisanie 300-52 w polu rozmiaru, a Sketch automatycznie obliczy wartość.

Wyśrodkuj go tak jak pierwszy okrąg.

Zmień kolor i powtórz operację dla trzeciego okręgu.

Połącz trzy okręgi i nazwij grupę na przykład "tył". Powiel grupę i nazwij ją na przykład "przód". Będziemy teraz pracować nad grupą z przodu, więc możesz ukryć tę z tyłu.

3. Kreskujemy wszystko

Aby stworzyć efekt "paska postępu", wykorzystamy kreski. Sketch ma na to sztuczkę: zlecimy obliczenie dokładnego obwodu koła poprzez pomnożenie szerokości (300px) przez liczbę pi. Wpisz działanie 300*3.14159265359 w polu Gap okna Borders, a koło natychmiast zniknie. To dlatego, że luka między kreskami pokrywa się z całym obwodem koła. Zwiększając wartość w polu Dash, zobaczymy jak nasze koło zacznie pojawiać się ponownie.

Po wykonaniu tego, w komunikacie Borders, zaokrąglij końcówki kreski klikając środkową ikonę:

Na koniec, przejdź do Layer > Transform > Flip Vertical, aby odwrócić okrąg, który powinien zaczynać się od zera stopni.

4. Wracamy do tyłu

Po wykonaniu okręgów, odkryj grupę "tył" i naciśnij 1, aby zredukować jej widoczność do 10%.

5. Ikony

Na koniec pozostało nam dodać ikony na początkach kresek. Utwórz nowy obszar o boku 16px i wykonaj różne rodzaje ikon, których potrzebujesz. Ja zaprojektowałem proste strzałki, ale możesz pobrać odpowiednie ikony z GraphicRiver: