Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch

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

by
Difficulty:BeginnerLength:ShortLanguages:

Polish (Polski) translation by Mateusz Kurlit (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:

Okręgi aktywności w interfejsie Apple Watch są całkiem rozpoznawalne.

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.

sketch loves math
Sketch ♥ matematykę

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:

Gotowe!

Oto co stworzyliśmy:

Dziękuję za przeczytanie poradnika, mam nadzieję, że to krótkie ćwiczenie nauczyło cię kilku nowy sztuczek programu Sketch.

Podobne poradniki

Advertisement
Advertisement
Advertisement
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.