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:
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.
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
By
