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.
0
-
2There 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
-
1Try 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...
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)...
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...
