Deke’s Techniques: Drawing a distinctive 2D video game character

Published by | Tuesday, May 7th, 2013

Fans of Dan Paladin, the artist of popular video games such as Alien Hominid and Castle Crashers, are going to be really excited about this week’s installment of Deke’s Techniques. Deke McClelland uses a few predrawn elements and a template to create a Paladin-inspired 2D walrus warrior with Adobe Illustrator. By tracing Deke’s template, you’ll re-create his steps and learn vital drawing techniques to help you create your own characters. To get started on the helmet, watch the video and use the steps below to help you along.


1. Activate the empty head layer and choose the Pen tool. Start tracing the basic path outline of the helmet from the template by clicking and dragging from one anchor point to another.

A few tracing tips:

• Switch to Outline view to get a clearer view of the paths.
• To adjust your control handles or anchor points after drawing them, press the Ctrl key or the Command key on the Mac to temporarily access the Selection tool and then drag the control handles or anchor points wherever you want them to be.
• Convert the anchor points to cusp points or combination points by Alt- or Option-dragging on the handles. (This temporarily switches you to the Convert Anchor Point tool.)
• To reposition an anchor point on the fly as you are drawing, just press and hold the Spacebar, and then release the Spacebar as soon as you get the anchor point into the desired position.
• If you see an asterisk next to your cursor, it means the path outline is no longer active and you need to Alt- or Option-drag from the anchor point to activate it. If you click when the asterisk is present, you will start a new path.
2. Switch back to Preview view and choose the Direct Selection tool. Select the helmet outline and fill it with a light gray swatch (R=179 G=179 B=179) from the Control panel. Change the Line Weight to 2.5 points, then click the word Stroke and change Corner to Round Join.
3. Activate the predrawn layer and select the path outline that represents the helmet’s teeth and move it to the head layer by dragging the Indicates Selected Art icon (a box) from one layer to the other.
4. Deactivate the predrawn layer and reselect the head layer. Choose the Pen tool and close the teeth path as shown in the image below.
5. Switch to the Direct Selection tool and marquee-select the four anchor points on the bottom of the two longest teeth. Press Ctrl+C or Command+C to copy them to the clipboard.

6. Choose Window > Pathfinder to open the Pathfinder panel. Switch back to the regular Selection tool and Shift-click the helmet and teeth paths. Now click Minus Front from the Shape Modes menu in the Pathfinder panel to subtract the teeth shapes from the helmet.
7. Now it’s time to give the teeth some dimension. Switch to the Direct Selection tool and marquee select the bottom two anchor points of the two “incisor” teeth in the helmet (those to either side of the middle tooth), delete them, and then press Cmd+F or Ctrl+F to paste the anchor points your copied in step 5 back in front.

8. Switch to the regular Selection tool, Shift-click on the helmet path outline, and Shift-click on the inner “tooth.” Choose Object > Path > Join to fuse all the selections together.

Note: If you lose your gray fill, simply reapply it from the Control panel.

9. Activate the predrawn layer and select the darker gray shape that represents the helmet shading. Press Cmd+X or Ctrl+X to cut it to the clipboard. Deactivate the predrawn layer and select the head layer.

10. Click the Draw Inside icon at the bottom of the Tools panel. Then choose Edit > Paste in Place to paste the shading inside the helmet. Switch back to Draw Normal mode.

11. Switch to Outline view, choose the Pen tool, and trace the seam down the middle of the helmet.

12. Choose the Direct Selection tool and select the seam. Change the Line Weight to 2.3, change the fill to None, and click the word Stroke and change the Cap to Round Cap.

You’ll notice the seam goes right through the walrus’s visor. To fix that, open the head layer and its sublayers and drag the seam in between the helmet and the shading layers. This places the seam inside the clipping mask so it no longer exceeds the boundaries of the helmet.
13. Click the “meatballs” next to the seam and the shadow and press Ctrl+C or Command+C in order to copy them to the clipboard. Now press Ctrl+Shift+A or Command+Shift+A to deselect the artwork, and then press Ctrl+F or Command+F to paste copies of those shapes to the front of the layer.

14. Switch to Outline view and choose the Pen tool. Click the anchor point at the bottom of the seam. Click again below the left-hand tooth and create a closed path as shown in the video.

15. Switch back to Preview view and the regular Selection tool. Select your new path and Shift-click the new dark gray shading layer to select it too. Choose Window > Pathfinder to open the Pathfinder panel and choose the Intersect option from that panel, in order to save just the intersecting areas. Change the Stroke to None and the Fill to R=77 G=77 B=77.

16. Go to the Layers panel and drag the active layer group inside the clipping mask, below the layer that represents the seam.

17. Activate the predrawn layer and select the path outlines that represent the brow and scars on the helmet. Press Ctrl+X or Cmd+X to cut it to the clipboard. Turn off the predrawn layer.

18. Click on the meatball for the dark grey sublayer group in the head layer and press Ctrl+F or Command+F on a Mac in order to paste the brow/scars in front of that path outline and into the clipping mask.

19. Switch back to Outline view and the Pen tool. Choose View > Smart Guides to turn on your guides and then start tracing the edges of the helmet’s teeth. Notice that since the Smart Guides are on, the anchor points flash when your cursor is precisely aligned with them. Adjust the anchor points as necessary, as explained in step 1.

20. Switch to the Selection tool, return to Preview view, and select the new teeth outlines. Sample the black stroke on the helmet with the Eyedropper tool to apply it to this path. Then switch to the Selection tool once again, right-click on the shapes, and choose Arrange > Send to Back. Finally, change the fill of the upper path outline to R=77 G=77 B=77 and the main outline to R=51 G=51 B=51 to achieve the result shown below.
21. Activate the predrawn layer and select the path outlines for the highlight and the horn. Drag the Indicates Selected Art box in the Layers panel from predrawn to the head layer to add these final touches to the helmet.
And that’s how to draw expressive 2D characters with the Pen tool in Illustrator. To finish up your warrior, check out the follow-up video in the library, where Deke shows you how to add the whiskers, eyes, and other facial features.

Come back next week to watch Deke add a radioactive aura to this same character—without any path outlines.

Interested in more?

• Start your 7-day free trial to today
• The entire Deke’s Techniques collection

Adobe and Illustrator are registered trademarks of Adobe Systems Incorporated.

Share this:Share on Facebook0Tweet about this on Twitter4Share on Google+0Pin on Pinterest0Share on LinkedIn0 - start learning today

Tags: , , ,

Leave a Reply