Rask Tips Gjør Apple Watch aktivitetsringer i skisse igjen

I denne videoen forklarer jeg hvordan du gjenskaper, ved hjelp av Sketch, aktivitetsringene du finner på Apple Watch. Dette er den perfekte øvelsen for å demonstrere hvor mye Sketch elsker matte; Du vil bli overrasket over hvor mye Sketch vil beregne for deg. La oss bli aktive!

Se Quick Tips

 

Aktivitetsringer

La oss se hva vi sikter mot her. Dette bildet er hentet fra www.apple.com og viser ringene i kontekst:

Aktivitetsringene fra Apples Watch UI er ganske gjenkjennelige

1. Artboard

Start med en tavla på 512 px kvadrat; Det er en forhåndsinnstilling for det.

Legg til en bakgrunnsfarge av ren svart (# 000000) og legg deretter til et sirkelobjekt av 300px til midten. Denne sirkelen vil ikke ha en fylling, men gi den et fint fargerikt slag på 25 px.

2. Ringer

Dupliser den første ringen, og endre størrelsen ved å trekke 52px fra bredden. Du kan gjøre dette ved å skrive inn bokstavelig talt 300-52 i størrelsesfeltet og Sketch vil gjøre beregningen for deg. 

Juster den sentralt med den første ringen.

Recolor det, og gjenta prosessen for en tredje ring.

Grupper de tre ringene og kaller gruppen noe som "tilbake". Dupliserer gruppen og nevner den som "front". Vi skal jobbe i frontgruppen for nå, slik at du kan skjule den på baksiden.

3. Dash det hele

For å gi ringene en "progress bar" -effekt, skal vi bruke et slagstrekk. Skisse har et triks for dette: Vi ber deg om å beregne den nøyaktige omkretsen av sirkelen ved å multiplisere bredden (300px) av pi π. Skriv inn beregningen 300 * 3,14159265359 i Mellomrom input av Borders dialog og sirkelen vil effektivt forsvinne. Dette skyldes at gapet mellom slagstrekkene dekker hele diameteren av sirkelen. Ved å hakke på Bindestrek måling ser vi at sirkelen vår begynner å dukke opp igjen.

Sketch ♥ matte

Med det gjort igjen i Borders dialog, runde av endene av streken:

Til slutt, gå til Layer> Transform> Flip Vertical å vende rundt ringen slik at den starter i null grader.

4. Ta tilbake

Med sirklene gjort, gjør "tilbake" -gruppen synlig igjen, og klikk 1 for å redusere opaciteten til 10%.

5. Ikoner

Alt som gjenstår å gjøre er å legge til ikoner i slutten av strekkene. Lag en ny tavle på 16px, og opprett hva slags ikoner du trenger. Jeg opprettet noen enkle pilikoner, men du kan til og med hente noen egnede ikoner fra GraphicRiver:

Du er ferdig!

Her er det vi opprettet:

Takk for at du følger med, håper jeg denne raske UI-øvelsen lærte deg et par nye Sketch-tricks.

Lignende opplæringsprogrammer