Dica Rápida: Recriando os Anéis de Atividade do Apple Watch no Sketch

() translation by (you can also view the original English article)

Nesse vídeo, recriaremos, usando Sketch, os anéis de atividade que encontramos no Apple Watch. Esse é um exercício perfeito para mostrar o quanto Sketch ama matemática. Surpreenderemo-nos com o quanto Sketch pode calcular por nós. Comecemos!

Assista a Dica Rápida

Anéis de Atividade

Vejamos o que queremos fazer. Essa imagem foi obtida em www.apple.com e mostra os aneis em contexto:

1. Prancheta

Criemos prancheta de 512x512px. Existe um ajuste para isso.

Adicionemos plano de fundo preto puro (#000000) e um objeto círculo de 300px ao centro. Esse círculo não terá preenchimento, mas terá borda colorida de 25px.

2. Anéis

Dupliquemos o primeiro anel e redimensionemo-no subtraindo 52px da sua largura. Podemos fazê-lo, literalmente, digitando 300-52 no campo de tamanho e o Sketch calculará por nós.

Alinhemo-no centralmente em relação ao primeiro anel.

Recoloramo-no e repitamos o processo com um terceiro anel.

Agrupemos os três anéis e nomeemos o grupo como "fundo". Dupliquemos o grupo e nomeemo-no de "frente". Trabalhremos no grupo frente, agora, então escondamos o fundo.

3. Traceje tudo

Para criar o efeito de "barra de progressão" aos anéis, usaremos um traçados. Há um truque no Sketch: calcularemos o diametro exato de um círculo, mutlitplicando a largura (300px) por pi π. Digite o cálculo 300*3.14159265359 no campo Gap da janela Borders e o círculo desaparecerá. Isso é porque a distância entre os traços cobrirá o diâmetro inteiro do círculo. Chanfrando a medida do traçado, veremos o círculo reaparecendo.

Isso feito, de volta à janela Borders, arredonde as pontas do traço.

Por último, vá em Layer > Transform > Flip Vertical para girar o anel, para que comece no ângulo zero.

4. Traga o Fundo de Volta

Com os círculos feitos, faça o grupo "fundo" ser vísivel novamente e aperte 1 para reduzir sua opacidade a 10%.

5. Ícones

O que falta a ser feito é adicionar ícones às pontas dos traços. Crie uma nova prancheta de 16x16px e criemos quaisquer tipos de ícones que precisarmos. Criamos alguns ícones de seta simples, mas poderíamos pegar alguns ícones do GraphicRiver: