Petit conseil recréez les anneaux d'activité dans Sketch de Apple Watch

Dans cette vidéo, je vais expliquer comment recréer, à l'aide de Sketch, l'activité que vous trouverez sur l'Apple Watch. Cet exercice est parfait pour démontrer à quel point Sketch aime les mathématiques. vous serez surpris de la quantité de calcul que Sketch calculera pour vous. Soyons actifs!

Regarder le conseil rapide

 

Anneaux d'activité

Voyons ce que nous visons ici. Cette image provient de www.apple.com et montre les anneaux dans leur contexte:

Les anneaux d'activité de la Watch UI d'Apple sont assez reconnaissables

1. Artboard

Commencez avec une planche graphique de 512px square; il y a un préréglage pour cela.

Ajoutez une couleur de fond de noir pur (# 000000), puis ajoutez un objet cercle de 300 pixels au centre. Ce cercle n'aura pas de remplissage, mais donnez-lui un joli coup coloré de 25px.

2. bagues

Dupliquez le premier anneau, puis redimensionnez-le en soustrayant 52px de sa largeur. Vous pouvez le faire en entrant littéralement 300-52 dans le champ de taille et Sketch fera le calcul pour vous. 

Alignez-le au premier anneau.

Recolorez-le, puis répétez le processus pour une troisième sonnerie..

Regroupez les trois anneaux et nommez le groupe comme “retour”. Dupliquez le groupe et nommez-le comme “avant”. Nous allons travailler sur le groupe avant pour le moment, vous pouvez donc cacher celui qui se trouve à l'arrière.

3. Dash tout cela

Pour donner à nos anneaux un effet de «barre de progression», nous allons utiliser un tiret. Sketch a un truc pour cela: nous lui demanderons de calculer la circonférence exacte du cercle en multipliant la largeur (300px) par pi π. Entrez le calcul 300 * 3.14159265359 dans le Écart entrée du Les frontières dialogue et le cercle disparaîtra effectivement. Cela est dû au fait que l’espace entre les traits de son trait couvre l’ensemble du diamètre du cercle. En notant les Tiret mesure, nous verrons notre cercle commencer à réapparaître.

Croquis ♥ math

Avec cela fait, encore dans le Les frontières dialogue, arrondissez les extrémités du trait:

Enfin, allez à Calque> Transformer> Retourner verticalement retourner l'anneau pour qu'il commence à zéro degré.

4. ramener en arrière

Avec les cercles terminés, rendez le groupe «arrière» visible une fois de plus, puis appuyez sur 1 réduire son opacité à 10%.

5. Icônes

Il ne reste plus qu’à ajouter des icônes aux extrémités des traits. Créez une nouvelle planche de 16 pixels et créez le type d’icônes dont vous avez besoin. J'ai créé de simples icônes fléchées, mais vous pouvez même récupérer des icônes appropriées de GraphicRiver:

Vous avez terminé!

Voici ce que nous avons créé:

Merci d’avoir suivi, j’espère que ce rapide exercice d’interface utilisateur vous a appris quelques nouveaux trucs Sketch.

Tutoriels similaires