Foros del Web » Creando para Internet » Diseño Gráfico »

Problema con circulo cortado y montado delante de otro

Estas en el tema de Problema con circulo cortado y montado delante de otro en el foro de Diseño Gráfico en Foros del Web. Hola a todos, soy un novato en esto del Illustrator, pero quería hacer algo que tampoco pienso que tenga que ser demasiado complicado. Quería generar ...
  #1 (permalink)  
Antiguo 05/04/2016, 04:59
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 13 años, 6 meses
Puntos: 0
Problema con circulo cortado y montado delante de otro

Hola a todos,

soy un novato en esto del Illustrator, pero quería hacer algo que tampoco pienso que tenga que ser demasiado complicado. Quería generar un gráfico de donut, donde un % corresponda a un color siendo el fondo de otro, algo como esto



La particularidad es que los extremos del trazo azul están redondeados. Lo que he hecho es crear dos capas de circulos concéntricos, y uno de ellos cortarlo con dos rectas con el ángulo que yo quería para ese 53%. El problema es que al verlas cada una de las capas por separado, sale genial, pero al tener las dos activadas, es como si los extremos del trazo azul, cortado, se unieran con una recta, y el efecto sobre el circulo negro es el siguiente.



¿Alguien sabe cómo solucionar este problema y evitar ese efecto para que quede bien?

Un saludo, y gracias de antemano
  #2 (permalink)  
Antiguo 05/04/2016, 08:02
 
Fecha de Ingreso: febrero-2016
Ubicación: Barcelona
Mensajes: 79
Antigüedad: 8 años, 2 meses
Puntos: 8
Respuesta: Problema con circulo cortado y montado delante de otro

Mira, hay una forma facil.
En la erramienta elipse tiene una opción. Si haces una elipse, tiene un rabito esto lo mueves, y te va creando un arco, como un sector. Luego puedes borrar el punto del centro y solo te queda redondear la linea en los parametros de trazo.

si antes de hacer lo del sector, lo copias, y cuando acabas lo pegas detras (control b) ya lo tienes.

Espero que te sirva
  #3 (permalink)  
Antiguo 05/04/2016, 08:54
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Problema con circulo cortado y montado delante de otro

Pero perdona, un rabito dices en la elipse? los unicos controladores que veo son para deformarla o para los tocar los tiradores, no para conseguir abrirlo. No entiendo a qué te refieres en Illustrator.

Un saludo
  #4 (permalink)  
Antiguo 05/04/2016, 09:43
 
Fecha de Ingreso: febrero-2016
Ubicación: Barcelona
Mensajes: 79
Antigüedad: 8 años, 2 meses
Puntos: 8
Respuesta: Problema con circulo cortado y montado delante de otro

si sigues con la herramienta elipse te deberia salir algo como lo que tiene el "WordArt" para deformar las letras (creo recordar, hace años que no lo uso), es como un palito que sale justo desde el centro del lado.
Mira a ver si puedes ver esta imagen https://goo.gl/8fPtyT

Se que esta opción está hace tiempo, pero... que Illustrator usas?
  #5 (permalink)  
Antiguo 26/04/2016, 10:34
 
Fecha de Ingreso: enero-2007
Ubicación: BURGOS
Mensajes: 365
Antigüedad: 17 años, 3 meses
Puntos: 12
Respuesta: Problema con circulo cortado y montado delante de otro

es facil, dibujas la elipse de fondo eliges color del trazo de fondo osea el gris, despues la duplicas y eliges el color del trazo azul.

despues con la herramienta trazo le das borde redondeado y con la herramienta tijera borras el porcentaje de circunferencia que quieras

(que dificil de explicar)

si copias esto en un html te sale

<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="33.7px" height="33.7px" viewBox="0 0 33.7 33.7" style="enable-background:new 0 0 33.7 33.7;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#DDDDDD;stroke-width:5;stroke-miterlimit:10;}
.st1{fill:none;stroke:#3BB4FF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<circle class="st0" cx="16.9" cy="16.9" r="14.4"/>
<path class="st1" d="M30.8,13.2c0.3,1.2,0.5,2.4,0.5,3.6c0,7.9-6.4,14.4-14.4,14.4S2.5,24.8,2.5,16.9S8.9,2.5,16.9,2.5"/>
</svg>

va, para que veas como es
https://drive.google.com/open?id=0By...UpNNkhDNFZiaHc

Última edición por jekedrol; 26/04/2016 a las 10:48

Etiquetas: circulo, cortes, illustrator
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:16.