Advertisement
  1. Web Design
  2. Sketch

2 Métodos Rápidos para Criar Gráficos de Pizza 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, mostraremos como criar gráficos de pizza usando Sketch. Podemos criá-los manualmente usando formas, máscaras e o bézier, contudo, mostraremos dois métodos que são bem mais rápidos e precisos.

Assista o Vídeo

Método #1

Esse é o método mais rápido e involve o uso de um plugin. Sketchy Pies, criado por Aby Nimbalkar, criar gráficos de pizza a partir de camadas de círculo.

Criemos um círculo e selecionemo-no. Vamos em Plugins > Sketchy Pies > Convert to Pie Chart. Uma janela para colocar uma lista de cores, separada por vírcula, no formato #XXYYZZ. Adicionemos quanto quisermos depois apertemos OK!

Essas seções de pizza são construidas usando bordas. Podemos editá-las ao selecioná-las e alterando as propriedades da borda. A corda da borda mudará a cor da seção e podemos alterar o valor do traço para alterar o tamanho dela.

Também podemos especificar os tamanhos da seção ao criar o gráfico. Isso é feito adicionando um valor em percentual a cada cor, assim: #444444:20%,#555555:80%. Ou com decimais: #444444:.2,#555555:.8.

Método #2

Criar gráficos de pizza com gradientes angulares é um pouco mais difícil mas é o que faremos agora! Criemos um objeto círculo, e vamos em Angular Fill nas propriedades. Adicionemos duas cores de paradas para cada seção que precisarmos:

Podemos posicionar as cores de parada pelo gradiente, com precisão, usando as teclas numéricas do teclado. Apertando 2 quando uma cor está selecionada posicionará exatamente a 20% do gradiente. O começo de cada seção deve ser posicionda exatamente onde a anterior termina.

Nota: A versão usada aqui é a Sketch 41.2. Percebam que onde há uma união de seções há uma linha irregular. Não foi sempre assim, logo deve ser um bug no Sketch. Se usar uma versão diferente, comente se o resultado for melhor!

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.