Advertisement
  1. Web Design
  2. Sketch

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

by
Read Time:2 minsLanguages:

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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.