Photoshop - Accurate Segmented Circle (Dartboard)

Community Forums/Developer Stations/Photoshop - Accurate Segmented Circle (Dartboard)

Matt Vinyl

(Posted 2008) [#1]

I've searched high and low via Google and it's friends to find this, but to no avail!

I'm trying to make a dartboard, and obviously I want the 20 individual segments to be equal (360/20=18) - how do I go about doing this?

I could of course 'acquire' one of the many that crop up in Google (legitimately!) but I'd rather use all my own artwork - I'm actually quite proficient in 'shop, but haven't had to do this before and can't think of the ideal tool.

Cheers!

GfK	(Posted 2008) [#2]

First, establish where the centre is. Then establish the maximum radius.

Then use the Line tool. start at the centre and draw out to the radius.

In the Info panel in Photoshop (top-right), you can see the angle that the line is at, in degrees.

Each of the 20 segments is 18 degrees. Because you want a segment at the top, rather than a vertical wire/line, you need to start 9 degrees off vertical, then 27, then 45, 63, and so on, until you've done all the way around.

Make sure that you write down the coordinates of the centre of the board, and all the angles, radii and stuff (for doubles/trebles), as you'll need all this when you start coding to work out which segment the dart lands in.

Once you've got the basic wires in place, you can add more PS layers below it and start to pretty it up, and rub out the bits of line you don't want, for instance, where the 25/bullseye goes. Add a subtle drop-shadow effect to the wires layer to give it depth.

Pongo

(Posted 2008) [#3]

Here are a few other methods.

The best way I believe, would be to create this outside of Photoshop in a program like illustrator, or for a free option, use InkScape. You can then bring in the vector artwork into Photoshop for further work.

Another way would be to create an image that is square, and has 20 vertical lines that are equally spaced. Then simply use the polar coordinates rect to polar) filter and you're done! If you take an existing dartboard image, you can apply polar coordinates (polar to rect) to get a rough idea of what you need to make.

Beaker

(Posted 2008) [#4]

You could always write a little bit of code to get an image with the basic shapes.

Nate the Great

(Posted 2008) [#5]

Here is some basic code for making an equaladeral polygon of any size. All you have to do is take a screen shot and use your mouse to make it the right size. (This only works in B3d I think)

Graphics 640,480,0,2
SetBuffer BackBuffer()

Origin 320,240

While Not KeyDown(1)
Cls

mx# = MouseX()-320
my# = MouseY()-240
scl# = Sqr((mx#)^2+(my#^2))

For I = 1 To 20

	x# = Sin(I*18)
	y# = Cos(I*18)
	
	ox# = Sin((I-1)*18)
	oy# = Cos((I-1)*18)
	
	Line x#*scl#,y#*scl#,ox#*scl#,oy#*scl#
	
	Line x#*scl#,y#*scl#,0,0
	
	

Next

Flip
Wend
End

Tommo

(Posted 2008) [#6]

The filter (Distort -> Polar Coordinates) should do the trick.

before:

after:

Matt Vinyl

(Posted 2008) [#7]

Thanks for all the useful suggestions guys - I'll give some of these a try later and see what one works best for me. I've then got the interesting part of coding 'where the dart has landed' routine - all good fun though!

Thanks once again. :)

Ross C

(Posted 2008) [#8]

I think you'll need a seperate image for each dartboard segment.