Consejo rápido recrear los anillos de actividad de Apple Watch en Sketch

En este video, explicaré cómo recrear, usando Sketch, los anillos de actividades que encontrará en el Apple Watch. Este es el ejercicio perfecto para demostrar cuánto Sketch ama las matemáticas; Te sorprenderá la cantidad que Sketch calculará para ti. Pongámonos activos!

Ver consejo rápido

 

Anillos de actividad

Veamos a qué apuntamos aquí. Esta imagen está tomada de www.apple.com y muestra los anillos en contexto:

Los Anillos de actividad de la interfaz de usuario de Apple son bastante reconocibles

1. Cartón

Comience con una mesa de trabajo de 512px cuadrado; hay un preset para eso.

Agregue un color de fondo de negro puro (# 000000) y luego agregue un objeto de círculo de 300px al centro. Este círculo no tendrá relleno, pero dale un bonito trazo colorido de 25px.

2. Anillos

Duplique el primer anillo, luego redimensione restando 52px de su ancho. Puedes hacerlo literalmente entrando 300-52 en el campo de tamaño y Sketch hará el cálculo por ti. 

Alinéalo centralmente con el primer anillo..

Vuelva a colorearlo, luego repita el proceso para un tercer anillo..

Agrupe los tres anillos y nombre al grupo algo como "atrás". Duplique el grupo y asígnele el nombre "frente". Vamos a trabajar en el grupo frontal por ahora, así que puedes ocultar el que está en la parte de atrás..

3. Pisotelo todo

Para dar a nuestros anillos un efecto de "barra de progreso" vamos a utilizar un guión de trazo. Sketch tiene un truco para esto: le pediremos que calcule la circunferencia exacta del círculo multiplicando el ancho (300px) por pi π. Introduce el cálculo 300 * 3.14159265359 en el Brecha entrada de la Las fronteras El diálogo y el círculo desaparecerán efectivamente. Esto se debe a que la brecha entre los trazos de su recorrido cubre todo el diámetro del círculo. Tomando nota de la Guión Medición veremos que nuestro círculo empieza a reaparecer..

Bosquejo ♥ matemáticas

Con eso hecho, otra vez en el Las fronteras diálogo, redondear los extremos del trazo:

Por último, ve a Capa> Transformar> Voltear Vertical voltear el anillo para que empiece en cero grados.

4. Traer de vuelta

Con los círculos hechos, haga que el grupo "atrás" vuelva a estar visible y pulse 1 Reducir su opacidad al 10%..

5. Iconos

Todo lo que queda por hacer es agregar iconos a los extremos de los trazos. Crea una nueva mesa de trabajo de 16px y crea los tipos de iconos que necesites. Creé algunos íconos de flechas simples, pero incluso puedes tomar algunos íconos adecuados de GraphicRiver:

Estas hecho!

Esto es lo que creamos:

Gracias por seguirme, espero que este rápido ejercicio de interfaz de usuario te haya enseñado un par de nuevos trucos de Sketch.

Tutoriales similares