# Hit the Mark with a Realistic Vector Dartboard

Learn how to use Illustrator’s Live Paint feature, Graphic Styles and Transform Effect while creating a realistic dartboard. All of the features used in this intermediate-level tutorial are contained in Illustrator CS2 and later.

### Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9\$ a month.

### Tutorial Details

• Version: CS2 and later
• Difficulty: Intermediate
• Estimated Completion Time: 2.5 hours

### Step 1

Draw a perfect circle with the Ellipse Tool (L), by clicking once on the Artboard, and entering 8 inches in both the Width and Height fields. The stroke weight and color don’t matter at this point.

### Step 2

With the circle selected, double-click the Scale Tool. Select Uniform, Enter 75%, and click Copy. With the new circle selected, scale and copy once again, this time entering 95%. Do this four more times, entering these values: 65%, 92%, 15% and 50%. The resulting concentric circles should look something like the image below.

### Step 3

Turn on Smart Guides (View > Smart Guides). Using the Line Segment Tool (\), draw a vertical line from the center of the circles to just beyond the top of the first inside ring. Hold down the Shift key to constrain the line to 90°. The Smart Guides will give you visual cues when you are on the center point, and when your line meets/intersects the circle’s path.

### Step 4

With the line selected, go to Effect > Distort & Transform > Transform. Rotate the line 19 times, for a total of 20. Since 360 degrees (a circle) divided by 20 (the number of segments) is 18, enter 18° in the Angle field. Be sure to click the bottom center point on the Reference Point proxy, so the line will rotate from its bottom point. Check the Preview box to make sure it looks like the image below.

### Step 5

Go to Object > Expand Appearance. The result will be 20 individual lines, rotated around the center point. This is the basic structure of your dartboard.

Now it’s time to color. Before that, though, make a copy of the dartboard outlines. First make a new Layer in the Layers panel. Select the paths, hold down Alt and drag the proxy (tiny colored square) up to the new layer to make a copy. Hide that layer for now.

### Step 6

Before coloring the dartboard, decide on a color palette for your illustration. I’ve used these swatches, which approximate the color scheme of a traditional dartboard. Create a new Color Group from the swatches by selecting them in the Swatches panel and clicking the New Color Group icon. You can also create a new Color Group from selected objects in your illustration. Click the Color Panel’s flyout menu, choose New Color Group, then tick the Selected Artwork button.

### Step 7

Now select the dartboard structure. If the paths are stroked, change them to a fill and stroke of none. Choose the Live Paint Bucket Tool (K). You’ll see three tiny color swatches above the paint bucket. By default, those swatches will be none, white and black. If your color group was selected beforehand, the swatches will be filled with those in the color group. So make sure you can see three of the colors you created previously.

### Step 8

Click within the dartboard outlines to convert them to a Live Paint Group. Now when you hover over each segment, a thick highlight line appears around the shape. Click once with the Paint Bucket to fill that shape with color. To switch to an adjacent color, press the left or right arrow key.

Continue filling each shape, or “face.” TIP: For the red bull’s-eye, you can drag the Paint Bucket across multiple faces to paint more than one at a time.

Your colored dartboard should look like the image below.

### Step 1

To make the wires that separate the colored fields on the dartboard, we’ll first create a Graphic Style. Draw a short straight line. Give it a .5-point stroke and a color of 5% black. Select Round Cap in the Stroke panel (middle icon next to the Weight field).

### Step 2

Select the stroke, then from the Appearance panel, choose Add New Stroke.

Change the width of the bottom stroke to 2 points, and make its color 40% black (In CS4, these modifications can be made directly in the Appearance panel). Your double-stroked line should look like the image below

### Step 3

Drag the double-stroked line into the Graphic Styles panel to create the new style. If you like, you can double-click its thumbnail and give it a name.

### Step 4

Remember the copy of the dartboard outlines you made back in part 1? Show and select it, then click on the new Graphic Style to apply it to the lines.

### Step 5

We don’t want the radial lines meeting in the center, where the bull’s eye is, so take the Scissors Tool (C) and cut away the excess. Use the Direct Selection Tool (white arrow) to select and delete the extra bits.

### Step 6

You should now have one layer with the colored dartboard, and another layer containing the wire separators. The illustration should look like the image below.

Select all, then double-click the Rotate Tool. We want a black section to be centered vertically, so enter -9° (half the rotate angle used in Part I).

### Step 1

The numbers on a traditional dartboard are made of wire and appear to be bent by hand. You will be hard-pressed to find a font that will look just like a bent wire, but you can modify an existing font and apply the wire Graphic Style to it. Here I have used VAG Rounded, following these steps:

1. Convert type to outlines
2. Switch Stroke and Fill (Shift + X)
3. Apply the “Wire” Graphic Style
4. Cut path
5. Delete inside path
6. Tweak path with the Pen Tool

### Step 2

Making all the digits and arranging them on the dartboard is a tedious process. You can speed it up somewhat by typing the number sequence on a circular path. First, draw a circle. Click on the path with the Type on a Path Tool, and type this sequence, inserting a Tab stop between each one. Enter these numbers: 20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8, 11, 14, 9, 12, and 5. The Type on a Path Tool can be a bit tricky, but with a few tries, you’ll get the hang of it.

Once the numbers are evenly spaced around your circle, you can scale it to fit the dartboard, then outline the characters, apply the Wire style, and tweak the paths as above. The illustration is almost done, and should now look like the image below.

### PART IV: Finishing Touches

Now just 5 more minutes to give your dartboard a finished look. Here are some suggestions: Scale down the outer wire ring slightly, so it appears that the numbers are attached to it. Use the Group Selection Tool (white arrow with a + sign) to select only the outer circle, then switch to the Selection Tool (V) to scale it. Add a drop Shadow to the wires to give them a bit of dimension.

Add a subtle gradient to the colored fields to give a sense of lighting. Also, add a drop shadow or blurred ellipse in back of the dartboard for an overall look of depth. The final illustration is below.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

• Jack F

That was awesome. Going to try this shortly, thanks!

Very clean final result! Great job

• http://www.stanleyparrish.com Stanley Parrish Jr

Great Tutorial! I’ve always wanted to know how to do this

• http://simon.vansintjan.org Simon Vansintjan

There’s some great vector techniques in this tutorial. Some great AI techniques in general as well. The end result is, like Collin said, very clean.

Good one.

• http://www.awalkinmyshoes.com Melody

All you need now is some darts! :)

• http://diesellaws.com Diesel Laws

Nice work indeed! Definitely a tutorial with many tips and great final outcome. Thanks so much :D

• Niek

Awesome! Finally a usefull tutorial. Like Melody said i’d also like to see it with some darts haha!:D

• http://www.joaquinrevuelta.com Parkaboy

Wonderful! Great tutorials hadn’t vanished after all :))

• Kevin

Nice work :)

• http://colorinflux.com/ snnaqvi

Great work

• http://maryjanez.net maryjanez

awesome…
thanks for sharing mate..

• iseecreative

Awesome design – two number 10′s though. 12 is missing.

• Cheryl

Oops! I should have also mentioned that placing type on a path will result in the bottom numbers being upside-down. So you’ll have to rotate them. I copied and pasted some of the digits, rather than making each one by hand — which is probably how I ended up with two 10′s. Good catch ;)

• Dai Hoang

Dear Cheryl Graham !
your presentation is extremely easy understand but i only see flat style designing.
i would like to see 3d style for final accomplish that maybe :Effect –>3D–>Rotate …
Thank you for tutorial instructions.

• http://www.amritvela.com/ Hari Karam Singh

Hi Cheryl,
Great tutorial. I’m just diving into illustrator and it’s must faster learning by example sometimes…

One question…

How do you make the intersections in the number wires such that one path is on top of the other (eg the centre of “8″)? With mine, they kind of merge together…

• Cheryl

Hari – You use the Appearance panel to add one stroke above or below the other. The “8″ on this dartboard is actually made with one path, which is just pinched in the middle. So, imagine an oval, or number “0,” with points on both sides that are pulled in toward the center. In this case, I then selected both those points and averaged them (Object> Path> Average) so they’d be aligned. Hope that helps!

• http://www.amritvela.com/ Hari Karam Singh

Excellent. Thanks!

• Aerodynamic

This is my very first illustrator tutorial and I was actually succesful. =D
Probaby just a lack of use of the pen tool but hey, I’m happy regardless.

• Harto

Great techniques, simple and easy to follow

Good stuff

• beti

helo

Thank you pretty much for that great tutorial. It helped me a lot.

• http://tuts.cgbaran.com/ CgBaran Tuts

Excellent it looks like photograph thanks for this tutorial

• Graf kaberne
• http://www.marveloustrip.com Trip

Great tutorial.
Thank you

• http://www.aaronzipagan.com Aaron Zipagan

Great tutorials! I’m in love with you and your tutorials! <3 :-)

• Dwight

The Scissors Tool did not work for me and i tried to use the Rotate Tool to make the 19 lines and while that worked the outline could not be turned into a Live Paint Group. The only other alternative is to use a red and black circle on the top layers.

• Scott

Great tutorial! I did notice you have two number “10″s… and missing the “12″
:o)

Thanks!

• http://ducsu.com ducsu

Here is my example. The numbers sure took awhile to do.

http://img.photobucket.com/albums/v645/duceduc/themes/dart-board-vector.jpg

• Derek

Where’s the 12?

• Derek

Great tutorial btw, very helpful, useful, and great result! Thanks!