Advertisement
  1. Web Design
  2. Sketch

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

Scroll to top
Read Time: 2 min

Portuguese (Português) translation by Erick Patrick (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:

Os Anéis de Atividade da UI do Apple Watch são bem reconhecíveis

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.

sketch loves mathsketch loves mathsketch loves math
Sketch ♥ matemática

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:

Terminamos!

Eis o que criamos:

Obrigado por acompanhar o tutorial, espero que esse rápido exercício de UI tenha ensinado alguns truques do Sketch.

Tutoriais Similares

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.