Sfat rapid Refaceți inelele de activitate ale Apple Watch în schiță

În acest videoclip voi explica cum să recreezi, folosind Sketch, activitățile pe care le vei găsi pe Apple Watch. Acesta este exercițiul perfect pentru a demonstra cât de mult Sketch iubește matematica; veți fi surprins de cât de mult va calcula Sketch pentru dvs. Să devenim activi!

Vizionați Sfat rapid

 

Inele de activitate

Să vedem la ce căutăm aici. Această imagine este preluată de pe www.apple.com și arată inelele în context:

Inelele de activitate de la UI de la Apple's Watch sunt destul de recunoscute

1. Artboard

Începeți cu o placă de artă de 512 pixeli; există o presetare pentru asta.

Adăugați o culoare de fundal pur negru (# 000000), apoi adăugați un obiect de circular de 300px la centru. Acest cerc nu va avea o umplere, dar va da un accident frumos colorat de 25px.

2. Inele

Duplicați primul inel, apoi redimensionați-l scăzând la 52px de la lățimea sa. Puteți face acest lucru prin intrarea literală 300-52 în câmpul de mărime și Sketch va face calculul pentru dvs.. 

Aliniați-l central cu primul inel.

Recolorați-o, apoi repetați procesul pentru un al treilea inel.

Grupați cele trei inele și denumiți grupul ceva de genul "înapoi". Duplicați grupul și numiți-l ca ceva "în față". Vom lucra acum la grupul din față, astfel încât să-l puteți ascunde pe cel din spate.

3. Dash totul

Pentru a da inelului nostru un efect de "progres bar", vom folosi o linie de atac. Schița are un truc pentru aceasta: o vom cere să calculeze circumferința exactă a cercului multiplicând lățimea (300px) cu pi π. Introduceți calculul 300 * 3.14159265359 în Decalaj introducerea datelor Frontiere dialogul și cercul vor dispărea efectiv. Acest lucru se datorează faptului că decalajul dintre liniile sale de cursa acoperă întregul diametru al cercului. Prin însemnarea liniuță măsurare vom vedea cercul nostru începe să reapară.

Sketch ♥ matematică

Cu ceea ce sa făcut, din nou în Frontiere dialog, rotunjim capetele cursei:

În cele din urmă, du-te la Layer> Transform> Flip vertical pentru a răsuci inelul astfel încât să pornească la zero grade.

4. Întoarceți-vă înapoi

Cu cercurile efectuate, faceți din nou grupul "înapoi" și apăsați 1 pentru a reduce opacitatea la 10%.

5. Icoane

Tot ce trebuie să faceți este să adăugați icoane la capetele loviturilor. Creați o nouă tablă de artă de 16px și creați orice fel de icoane de care aveți nevoie. Am creat câteva icoane simple de săgeți, dar ați putea chiar să apucați câteva icoane potrivite de la GraphicRiver:

Ați terminat!

Iata ce am creat:

Vă mulțumim pentru că ați urmat, sper că acest exercițiu rapid de interviu vă va învăța câteva noi trucuri Sketch.

Tutoriale similare