Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Consejo Rápido: Recrea los Anillos de Actividad del Apple Watch en Sketch

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En este video explicaré cómo recrear, usando Sketch, los anillos de actividad que encontrarás en el Apple Watch. Este es el ejercicio perfecto para demostrar cuanto ama Sketch las matemáticas; te sorprenderás de los mucho que Sketch calculará por ti. ¡Activémonos!

Mira el Consejo Rápido

Anillos de Actividad

Veamos lo que estamos esperando aquí. Esta imagen es tomada de www.apple.com y muestra los anillos en contexto:

Los Anillos de Actividad de la UI del Apple Watch son bastante reconocibles

1. Lienzo

Comienza con un lienzo de 512px cuadrados; hay un ajuste preestablecido para eso.

Agrega un color de fondo de negro puro (#000000) después agrega un objeto circular de 300px al centro. Este círculo no tendrá relleno, pero dale un agradable trazo colorido de 25px.

2. Anillos

Duplica el primer anillo, después redimensiónalo extrayendo 52px de su ancho. Puedes hacer esto ingresando literalmente 300-52 en el campo de tamaño y Sketch hará el cálculo por ti.

Alinealo centralmente con el primer anillo.

Recolorealo, después repite el proceso para un tercer anillo.

Agrupa los tres anillos y nombra el grupo a algo como "negro". Duplica el grupo y nómbralo a algo como "frente". Vamos a trabajar sobre el grupo frontal por ahora, así que puedes ocultar el que está detrás.

3. Pincha todo

Para dar a nuestros anillos un efecto de "barra de progreso" vamos a usar una línea de guiones. Sketch tiene un truco para esto: le pediremos calcular el diámetro exacto del círculo multiplicando el ancho (300px) por pi π. Ingresa el cálculo 300*3.14159265359 en la entrada de Separación del diálogo de Bordes y  el circulo desaparecerá efectivamente. Esto es porque la separación entre su trazo de guiones cubre el diámetro entero del círculo. Subiendo la medida del Guión veremos nuestro círculo comenzar a reaparecer.

sketch loves math
Sketch ♥ Matemáticas

Con eso hecho, de nuevo en el diálogo de Bordes, redondea las puntas del trazo:

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

4. Trae de Vuelta lo de Atrás

Con los círculos terminados, haz al grupo "negro" visible de nuevo, y presiona 1 para reducir su opacidad a 10%.

5. Iconos

Todo lo que queda por hacer es agregar iconos a las puntas de los trazos. Haz un nuevo lienzo de 16px y crea cualquier tipo de iconos que necesites. Creé algunos iconos de flecha simples, pero podrías incluso tomar algunos iconos que se ajusten de GraphicRiver:

¡Terminaste!

Aquí está lo que creamos:

Gracias por seguir a la par, espero que este ejercicio rápido de UI te haya enseñado un par de nuevos trucos de Sketch.

Tutoriales Similares

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.