Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

2 Métodos Rápidos para Crear Gráficas de Pastel en Sketch

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En este video tutorial te mostraré cómo diseñar gráficas de pastel usando Sketch. Puedes crear gráficas de pastel manualmente usando formas, máscaras y la herramienta pluma, sin embargo, te voy a mostrar dos aproximaciones que son bastante más rápidas y más precisas.

Mira el Video Tutorial

Método #1

Esta es la aproximación más sencilla, e involucra el uso de un complemento. Sketchy Pies fue creado por Aby Nimbalkar y crea gráficas de pastel desde tus capas de círculos.

Comienza creando un círculo. Después, con este seleccionado, ve a Complementos > Sketchy Pies > Convertir a Gráfica de Pastel. Después verás un diálogo en donde puedes ingresar una lista de códigos hex de color separados por comas. Agrega tantos como quieras, después da clic en OK; ¡tu  pastel está listo!

Estas secciones de pastel están construidas astutamente usando bordes. Puedes editar cada una seleccionándolas, después cambiando las propiedades de borde. El color del borde cambiará la sección de color, y podrás alterar la medida para cambiar el tamaño de la sección.

También puedes especificar los tamaños de sección cuando creas el pastel. Esto se hace agregando cada color con un valor, como porcentajes por ejemplo: #444444:20%,#555555:80% o valores decimales como #444444:.2,#555555:.8.

Método #2

Crear gráficas de pastel con degradados angulares es un poco más laborioso, ¡pero eso es lo que haremos ahora! Comienza con un objeto circular, después ve a Relleno Angular en la barra lateral de propiedades. Agrega dos colores para cada sección que necesites para la gráfica de pastel:

Puedes posicionar los colores junto con el degradado de manera precisa, usando las teclas numéricas en tu teclado. Presionando 2, mientras tu colo está seleccionado, lo posicionará exactamente 20% a lo largo del degradado. El comienzo de cada nueva sección tendrá que ser posicionada exactamente en donde está el final de la sección anterior.

Nota: estoy usando Sketch versión 41.2 y notarás una línea dentada en donde se unen las secciones. No siempre ha sido el caso, pero estoy bastante seguro de que es un error de Sketch. ¡Déjame saber si usas una versión diferente y ves mejores resultados!

Advertisement
Advertisement
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.