Advertisement
  1. Web Design
  2. Sketch

Kratki Savjet: Izradite u Sketch-u Apple Watch Prstene za Aktivnosti

by
Read Time:2 minsLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

U ovom videu ću vam objasniti kako, koristeći Sketch, napraviti prstene za aktivnosti koje možete vidjeti na Apple Watch satu. Ovo je savršena vježba da vam demonstratiram koliko Sketch voli matematiku; iznenaditi ćete se koliko toga će Sketch za vas izrčunati. Pokrenimo se!

'Watch' Kratki Savjet

Prsteni za Aktivnosti

Pogledajmo prvo o čemu se ovdje radi. Ova slika preuzeta je s stranice www.apple.com i prikazuje prstene za aktivnosti:

Prsteni za Aktivnosti s Apple Watch korisničkog sučelja prilično su prepoznatljivi

1. Artboard (Radna Površina)

Počnite sa radnom površinom (artboard) od kvadrata veličine 512 px; za to postoji unaprijed zadana postavka (preset).

Za boju pozadine podesite crnu (#000000), zatim dodajte krug od 300 px u sredini. Ovaj krug neće imati ispunu, ali podesite mu lijepu obojenu liniju (stroke) debljine 25 px.

2. Prsteni

Duplicirajte prvi prsten, zatim mu promijenite veličinu oduzimajući 52 px od njegove širine. To možete učiniti tako da unesete 300-52 u polje za veličinu (size) i Sketch će za vas napraviti kalkulaciju.

Poravnajte centralno sa prvim prstenom.

Prebojite ga, zatim ponovite proces za treći prsten.

Grupirajte tri prstena i nazovite grupu nekim imenom poput "back". Duplicirajte grupu i nazovite je nekim imenom poput "front". Za sada ćemo raditi na prednjoj grupi, pa onu straga možete sakriti.

3. Dodajte Isprekidane Linije

Kako biste prstenima dodali "progress bar" efekt, upotrijebiti ćemo isprekidanu liniju. Sketch ima trik za ovo: tražiti ćemo ga da izračuna točan dijametar kruga tako da pomnoži širinu (300 px) sa pi-jem π. Unesite izračun 300*3.14159265359 u Gap unos u Borders dijaloškom okviru i krug će efektivno nestati. To je zato što praznina između njegovih isprekidanih linija prekriva cijeli dijametar kruga. Obilježavanjem Dash mjere ćemo vidjeti da se krug počinje iznova pojavljivati.

sketch loves mathsketch loves mathsketch loves math
Sketch ♥ matematiku

Nakon što smo to učinili, opet u Borders dijaloškom okviru zaokružite krajeve linije:

I na kraju, idite na Layer > Transform > Flip Vertical da preokrenete prsten tako da počinje na nula stupnjeva.

4. Vratite Nazad "Back" Grupu

Sa završenim krugovima, grupu "back" opet učinite vidljivom i unesite 1 da joj smanjite opacity na 10%.

5. Ikone

Sve što je još ostalo za učiniti, jest dodati ikone krajevima linija. Napravite novi "artboard" od 16 px i izradite kakve god ikone želite/trebate. Ja sam napravio jednostavne ikone strelica, a vi možete čak i preuzeti odgovarajuće ikone na GraphicRiver-u:

Završili ste!

Evo što smo izradili:

Hvala Vam što ste me pratili, nadam se da vas je ova UI vježba naučila nekoliko novih Sketch trikova.

Tutorijali Sličnog Sadržaja

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.