2

Forgive me if I do not have the correct terms as my graphic design skills (and compass parts knowledge) are limited at best, but I am trying to create a compass in Illustrator as part of a game UI asset with the ticks that go completely around a circle, representing 360 degrees, similar to what is seen in the image below.

What I have attempted so far is creating a 2 lines with spaces between them, and using Object > Blend > Make, in which I can create 360 ticks easy. However, I am having difficulties in getting the lines to completely encircle... the circle when I use Replace Spline. That, and the tick-lines go off in wonky directions rather than running perpendicular to the circle line. I have also tried using Envelope Warp (Arc) on the 360 lines I created, but it doesn't complete a full circle.

Can anyone lead me in the right direction in figuring out how to achieve what I am trying to accomplish? (Bonus points for ensuring 360 ticks are spaced evenly throughout the circle). Thanks kindly.

Dry Magnetic Compass

Improve this question
1
  • Use the rotate tool. In the example image, each of these ticks is 2°. There are only 180 ticks, not 360. – Billy Kerr Feb 6 at 21:48
4

I would just use the Rotate Tool to recreate this. In the example image, each tick is 2°. There are also only 180 ticks, not 360. Also so far, nobody has mentioned adding the numbers, so this technique includes that too.

  1. First create one tick. Press R to engage the Rotate tool

  2. Hold down Alt and click the origin you want to rotate around. In the example shown I used guides to create an origin

  3. Set the rotation to 2°, hit Copy, then duplicate using Ctrl+D until you have 6 ticks.

  4. Extend the strokes at the ends

  5. Select all, Copy and Paste, then reflect 90°, and move into place. Type a zero, making sure the text is set to Align Center.

  6. Group all these pieces together

  7. Press R to engage the Rotate tool. Hold down Alt and click the origin. Rotate the group 20°, hit Copy, and repeat around the circle using Ctrl+D

  8. Retype the numbers

Here's a sped up example of the whole process

enter image description here

Improve this answer
6
  • Yes! This worked perfectly, thank you. Accepted answer for pointing out that I needed 180 ticks, not 360. – ACour008 Feb 7 at 0:14
  • A little pedantic, but if you omit one of the long ticks, you don't end up doubling them. – Wolff Feb 7 at 0:48
  • 2
    If duplicated ticks are a problem, after the creation of the five on the left, and the mirroring, would it make sense to delete the center short tick and one of the longer ones? Otherwise, those are created twice with each iteration, yes? – fred_dot_u Feb 7 at 0:49
  • @Wolff - or you could simply remove the stroke on the duplicated ticks – Billy Kerr Feb 7 at 1:31
  • 1
    Isn't it simpler to just not copy them in the first place? Otherwise you need to remove 36 paths after rotating. – Wolff Feb 7 at 1:35
3
  1. Create 2 circles properly centered with each other
  2. drag out 2 guides and center them on your circles
  3. optional- lock the circles and the guides
  4. draw a line for your tick mark and give it the color and weight you want
  5. with the pen tool click on the exact center of your guides to create a point
  6. select your line and the point and go to Object> Compound Path> Make
  7. go to Effect> Distort and Transform> Transform
  8. Set the degrees at 1, the copies at 360, and click the center bottom square in the reference matrix
  9. Use the Direct Selection Tool to select and delete the center point made with the Pen Tool earlier and the guides

Your tick marks will still be an applied effect so you will likely want to Object> Expand Appearance and then either leave them as a group or make them a compound path.

enter image description here

Improve this answer
2

If you want a precise number of ticks, then @Kyle's method may be best. But for general tick marks....

Apply a dashed stroke to a circle....

enter image description here

Afterwards use Object > Expand Appearance and Object > Expand if you want the ticks as individually editable objects.

If you want tick marks of different lengths and regularity, merely stack two circles and adjust the stroke options on each of them...

enter image description here

Improve this answer
1

Another approach using the Rotate Tool (per comment by @Billy Kerr)

Option clicking the center point of your desired circle will bring up the Rotate Dialog box where you can input the exact amount of rotation. Once you get the first rotation of your set then press Command+D as many times as the copies you need.

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.