Share
In deze video leg ik uit hoe je de activiteitsringen die je op de Apple Watch vindt opnieuw kunt maken met Sketch. Dit is de perfecte oefening om te laten zien hoeveel Sketch houdt van wiskunde; je zult verrast zijn hoeveel Sketch voor je zal berekenen. Laten we actief worden!
Laten we eens kijken waar we naartoe streven. Deze afbeelding is afkomstig van www.apple.com en toont de ringen in context:
De Activity Rings van de Watch UI van Apple zijn behoorlijk herkenbaarBegin met een tekengebied van 512 px vierkant; daar is een preset voor.
Voeg een achtergrondkleur toe van zuiver zwart (# 000000) en voeg vervolgens een cirkelobject van 300px toe aan het midden. Deze cirkel heeft geen vulling, maar geef hem een mooie kleurrijke lijn van 25 px.
Dupliceer de eerste ring en pas de grootte aan door 52 px van de breedte af te trekken. U kunt dit doen door letterlijk binnen te gaan 300-52 in het veld voor de grootte en Sketch zal de berekening voor u doen.
Lijn het centraal uit met de eerste ring.
Kleurt het opnieuw en herhaalt het proces voor een derde keer bellen.
Groepeer de drie ringen en noem de groep zoiets als "terug". Dupliceer de groep en noem het iets als "voorkant". We gaan nu aan de frontgroep werken, zodat je de achterkant kunt verbergen.
Om onze ringen een "voortgangsbalk" -effect te geven, gebruiken we een streepje. Sketch heeft hier een slag in: we vragen hem de exacte omtrek van de cirkel te berekenen door de breedte (300px) te vermenigvuldigen met pi π. Voer de berekening in 300 * 3,14159265359 in de kloof input van de borders dialoogvenster en de cirkel zal effectief verdwijnen. Dit komt omdat de opening tussen zijn streepjes de hele diameter van de cirkel bedekt. Door de scheutje meting zullen we zien dat onze cirkel weer verschijnt.
Schets ♥ wiskundeMet dat gedaan, opnieuw in de borders dialoog, rond de uiteinden van de streek af:
Ga tenslotte naar Laag> Transformeren> Verticaal omdraaien om de ring rond te draaien, zodat deze bij nul graden begint.
Maak met de ronddraaiende cirkels de "achterste" groep opnieuw zichtbaar en druk op 1 om de dekking te verlagen naar 10%.
Het enige dat nog gedaan moet worden, is het toevoegen van pictogrammen aan de uiteinden van de streken. Maak een nieuw artboard van 16px en creëer de soorten iconen die je nodig hebt. Ik heb enkele eenvoudige pijlpictogrammen gemaakt, maar je kunt zelfs een paar geschikte pictogrammen van GraphicRiver gebruiken:
Dit is wat we hebben gemaakt:
Bedankt voor het volgende, ik hoop dat deze snelle UI-oefening je een aantal nieuwe Sketch-trucs heeft geleerd.
Accentsconagua