0

Looking to replicate this dial (see link below) in illustrator, can someone point me in the direction of a tutorial or give me some ideas on how to do this? Many thanks!

It's really just the orange segmented circle that I'm interested in.

enter image description here

|improve this question
  • 2
    There should be tutorials about these things. Probably too long to answer here. – Lucian Jun 15 '17 at 8:45
  • I've been looking for a tutorial and can't find one. – Rico Shaft Jun 15 '17 at 8:46
  • Hopefullly somebody finds time to write one here, because that's what you're asking. There is no short answer for this. – Lucian Jun 15 '17 at 8:47
  • 1
    Try googling something along the lines of 'Illustrator tutorial volume dial', there will be some relevant knowledge in the 1.5 million results ;) – Vincent Jun 15 '17 at 8:54
  • The please add that information to your question with an edit. You can click that link right there in this comment or the one under your post. Thanks! – Vincent Jun 15 '17 at 8:55
5

You could use a transform effect (Effect → Distort & Transform → Transform...) on a single rectangle to create the bars. Set a stroke on the rectangle for the spacing (you can uncheck "Scale Strokes & Effects" to keep the strokes at the same size then...

enter image description here

Expand the result (Object → Expand Appearance). Then drag it to the brushes panel and select "Art Brush" from the new brush dialog...

You can then use your brush on an ellipse (and delete a segment thereof)...

enter image description here

|improve this answer
2

Another option is to use a dashed stroke... unfortunately Illustrator only lets you set a limited number of distinct dashes through the GUI, you can write it manually with an SVG though.

This for example...

(The important part of which being stroke-dasharray which is just a comma separated list of dash and gap lengths.)

<svg width="600px" height="600px" viewBox="0 0 600 600">
<circle cx="300" cy="300" r="257.586"
        fill="none" stroke="#F7931E" stroke-width="50"
        stroke-dasharray="40,10,60,10,80,10,100,10,120,10,140,10,160,10,180,10,200,10,220,100000" />
</svg>

Gives us this...

enter image description here

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.