dartboard-final

Illustrator Tutorial: Vector Darts on Bullseye

final

In this tutorial, I’ll show you how to make an attractive darts illustration in Adobe Illustrator. You will learn how to draw basic shapes, modify them and apply gradients to crate the vector darts. Apply this technique to your marketing and advertising materials to illustrate precision and concepts.

Drawing the Vector Dart

1. Open a new document, and select a 800x600px workspace. Select the Rectangle tool (M), and create a rectangle with this size: width: 15px, height: 72px. Apply Effect > Stylize > Round Corners and set Radius to 8px. Click OK, and fill it with black.

vector darts

2. Create a circle with the Ellipse tool (L) with size 25x25px. Fill it with Radial Gradient with colors from white to black, and set its center to left up (G).

vector darts

3. Position the circle behind of the rectangle (Select the circle and press Shift+Ctrl+[ ). Duplicate the circle (Ctrl+C > Ctrl + F) and move it down with the arrow keys. Create a rectangle with size 25x50px. Select all objects (Ctrl + A), and align them to center horizontally.

vector darts

4. Select the new rectangle, go to Object > Envelope Distort > Make it with Warp and set Bend to 37%. Style: Inflate.

vector darts

5. While the rectangle still selected go to Object > Expand, click OK.

screenshot

7. Position the rectangle behind the other objects ( Shift+Ctrl+[ ). Duplicate the circle (Ctrl+C > Ctrl + F), resize it to 30px and move it down with the arrow keys. Create a rectangle with size 30x60px. Merge the rectangle and the second circle together (Windows > Pathfinder panel). After this, press Expand.

vector darts

8. Duplicate the modified rectangle (2), and place the copy behind the original (Ctrl + C, Ctrl + B). Select the merged object (1) and the rectangle (2), while holding Shift key and press Intersect while holding the Alt key (Pathfinder panel). After that you can see the copy of the second rectangle :).

vector darts

9. Select the new object, duplicate it (Ctrl + C, Ctrl + B), and move it down by pressing Down key once or twice. Repeat this 3 times. Now let’s color it! You can use whatever gradient you like. Below is what I have done for the gold gradient.

vector darts

10. The second and the fourth object has the same color, but I moved the sliders a little bit to the left. Now you can draw the head of the dart. Create a rectangle, fill it with Linear Gradient with colors from white to black. Rotate the gradient with 90° on the Gradient panel (Windows > Gradient). Go to Object > Envelope Tool > Make with Warp and set Bend to 4%. Style: Arc. Send the rectangle to back ( Shift+Ctrl+[ ).

vector darts

Drawing the Dart’s Wings

11. Draw a hexagonal polygon. Rotate with 30° (Object > Transform > Rotate), and shrink it. Apply Effect > Stylize > Round Corners and set Radius to 8px. We need to split this polygon in two, so create a rectangle, and place it to the 50%. Press Subtract on the Pathfinder panel while pressing the Alt key. Go to Object > Transform > Reflect. Select Vertical axis and press Copy. Move this new wing to his place.

vector darts

12. Let’s proceed to create the perspective effect. This can be done as follow: select one wing, then select the Free Transform tool (E). A frame will surround the selected wing, the frame has four handles in the sides & four others in the corners, start dragging one of the corners handles. To distort the shape from the corner you’re dragging from, hold “Ctrl” on your keyboard & continue dragging. Do this on the other wing also, to get the perspective effect.

vector darts

13. Select the two wings, the go to Object > Transform > Reflect. Check the vertical axis, and press Copy. Move the two new wings to their place, pressing the arrow keys, and do the same trick, as you did before. After you have the perspective effect on the two new wings, select the left wing and position behind the other wing (Ctrl + Shift + [ ).

vector darts

14. Select the axe of the arc, duplicate it (Ctrl + C, Ctrl + F), and place it on the top (Ctrl + Shift + ] ). Resize it. You can resize it symmetrically, holding the Alt + Shift keys.

vector darts

15. Select one of the wings, and fill it with a gradient color. Reposition the gradient to be as realistic as possible (G). Fill the other wings too. You can copy the color from the first wing if you select the wing you want to fill, press the I key, and click the first wing, you filled. Color the axe too, with a simple white to black gradient or you can play with the possibilities. Here you can see the settings I’ve used: Light blue: C65 M15 Y0 K0, Dark blue: C100 M25 Y30 K10.

vector darts

16. Duplicate the right upper wing and flip it to create the shadow effect. Fill it with Linear Gradient with colors from white to black. Intersect with the left wing (Pathfinder panel) and add an opacity of 50%. Set the Blending mode to Multiply. Select and duplicate the two wings from the front (Ctrl + C, Ctrl + B) and fill them with a light color (In this case light blue).

vector darts

17. Select all object (Ctrl + A), and group them together(Ctrl + G).

vector darts

18. Go to Object > Transform > Rotate. Rotate the dart with 30°. Duplicate the group (Ctrl + C, Ctrl + V), and apply a merge while holding down the Alt key. Now you have the shadow.

vector darts

19. Rotate the shadow with 90°, and align to the head of the dart. You can distort the shadow as you want, to have the needed effect. Fill the shadow with a white to black gradient, and set the Blending mode to Multiply (Transparency panel).

vector darts

Drawing the Dartboard

20. Will will proceed to create concentric circles. First create the circle from center, and duplicate it (Ctrl + C, Ctrl + B), then resize it. Repeat these steps until you have the dartboard.

vector darts

21. Now place the dart on the center of the dartboard, and duplicate it, if you want. Thats all, you’re done!

vector darts

To download the source file for this tutorial, you will need to login as a member.
Sign up today to access all exclusive members content!



premium content lock

12 thoughts on “Illustrator Tutorial: Vector Darts on Bullseye”

  1. Great tut, indeed, though there’s a little problem with the light direction.

    The shadows projected by the darts do not match the light source indicated by the gradients.
    Should be simple enough to correct that, though.

    Thanks, again!

  2. You have right WagnerCG, but i think, that the metal surface can reflect a lot of light from the environment also. If not, the gradients are easy to modify. Thanks for your opinion 🙂

Comments are closed.

Scroll to Top