How to Draw a Multi-Touch Tap Gesture Vector Icon

Create a vector hand from scratch using basic shapes and the Pathfinder

Gesture icons can be very useful in the user on-boarding process for touch based mobile applications, and in this tutorial I will show you how to draw a vector hand from scratch in Illustrator using basic shapes and the Pathfinder tool.

Step 1

Step 2

Width: 64px

Height: 40px

X Position: 462px*

Y Position: 305px*

Fill: None

Stroke: #4D4D4D

Stroke Width: 8px

Stroke Options: round corners, round end caps, and aligned to the center

Step 3

Step 3.1

Width: 46px

Height: 40px

X Position: 459px*

Y Position: 345px*

Step 3.2

Width: 16px

Height: 70px

X Position: 438px*

Y Position: 276px*

Step 3.3

Width: 16px

Height: 76px

X Position: 454px*

Y Position: 273px*

Step 3.4

Width: 16px

Height: 70px

X Position: 470px*

Y Position: 276px*

Step 3.5

Width: 16px

Height: 56px

X Position: 486px*

Y Position: 283px*

Step 4

Width: 16px

Height: 76px

Rotate: 30°

X Position: 429px*

Y Position: 328px*

Step 5

Step 6

Step 6.1

Step 6.2

Step 6.3

Step 6.4

Step 6.5

Step 7

Step 7.1

Width: 0px

Height: 42px

X Position: 446px*

Y Position: 270px*

Step 7.2

Width: 0px

Height: 42px

X Position: 462px*

Y Position: 270px*

Step 7.3

Width: 0px

Height: 34px

X Position: 478px*

Y Position: 280px*

Step 8

Step 8.1

Step 8.2

Step 8.3

Step 8.4

Step 9

Step 9.1

Step 9.2

Step 9.3

Step 10

Width: 58px

Height: 58px

X Position: 438px*

Y Position: 249px*

Step 11

Step 11.1

Step 11.2

Result

Free Download

Begin by launching Adobe Illustrator (version CS6 or newer) and creating a new document. For this tutorial I have chosen to use a width ofand height ofDraw a small rectangle to use as the palm of the hand.*All X and Y positions use a center reference pointDraw another rectangle to use as the base of the wrist.Draw another rectangle to use as the index finger.Duplicate the last rectangle to use as the middle finger.Duplicate the last rectangle to use as the ring finger.Duplicate the last rectangle to use as the pinky finger.The thumb is a little bit trickier, duplicate the middle finger, then rotate it 30 degrees and place it near the base of the wrist.Select all of the shapes andthem with the Pathfinder.Select the anchor point highlighted and remove it using thetool.Use thetool to select the bottom segment of the shape and hit the delete key to remove it.Use thetool, hold down the Shift key and drag downwards to add handles to the highlighted anchor point. This will curve the line slightly.Use thetool to select the highlighted anchor point and increase the corner radius to the maximum possible (87.69px).After increasing the corner radius, the shape should look like number 5 in the image above.The next step is to draw some lines to separate the fingers.Line separating index and middle finger.Line separating middle and ring finger.Line separating ring and pinky finger.In this step we will had a little contour to the thumb to make it more realisticCreate a new anchor point on the thumb, roughly where it is highlighted in the image above.Nudge the new anchor point leftusing the left arrow key.Select the anchor point shown in the image above and increase the corner radius to the maximum (~30px).Select the anchor point shown in the image above and increase the corner radius to the maximum (~100px).I recommend making a copy of the hand shape at this stage, as the next step is to 'close' some of the fingers.Select the top 3 anchor points of the pinky finger and the top point of the line that separates it from the ring finger. Nudge these points downusing the down arrow key.Select the top 3 anchor points of the ring finger and the top point of the line that separates it from the middle finger. Nudge these points downusing the down arrow key.Select the top 3 anchor points of the middle finger and nudge these points downusing the down arrow key. The line does not need to be changed this time.A circle can be used to indicate a single 'tap' gesture. Grab the Oval tool and hold down the Shift key to draw a circle over the tip of the index finger.A circle can be used to indicate a single 'tap' gesture. Grab the Oval tool and hold down the Shift key to draw a circle over the tip of the index finger.Add two new anchor points to the circle as shown in the image above.Select the bottom anchor point on the circle with the Direct Selection tool and hit the delete key to remove it.Here is the finished single finger tap gesture icon:Almost any icon can be created by using basic shapes (such as rectangles and ovals) and the Pathfinder tool. Hopefully you have enjoyed following along with this tutorial, and now feel confident to take these techniques and apply them to creating other gestures such as double-taps, swipes, holds and more. But of course, we also have a free set of pre-made multi touch gesture icons that you can download: *All X and Y positions use a center reference point