How to Draw a Multi-Touch Tap Gesture Vector Icon

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

Begin by launching Adobe Illustrator (version CS6 or newer) and creating a new document. For this tutorial I have chosen to use a width of 900px and height of 600px. draw a multi touch gesture icon in illustrator

Step 2

Draw a small rectangle to use as the palm of the hand. draw a multi touch gesture icon in illustrator
  • 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
*All X and Y positions use a center reference point

Step 3

draw a multi touch gesture icon in illustrator

Step 3.1

Draw another rectangle to use as the base of the wrist.
  • Width: 46px
  • Height: 40px
  • X Position: 459px*
  • Y Position: 345px*

Step 3.2

Draw another rectangle to use as the index finger.
  • Width: 16px
  • Height: 70px
  • X Position: 438px*
  • Y Position: 276px*

Step 3.3

Duplicate the last rectangle to use as the middle finger.
  • Width: 16px
  • Height: 76px
  • X Position: 454px*
  • Y Position: 273px*

Step 3.4

Duplicate the last rectangle to use as the ring finger.
  • Width: 16px
  • Height: 70px
  • X Position: 470px*
  • Y Position: 276px*

Step 3.5

Duplicate the last rectangle to use as the pinky finger.
  • Width: 16px
  • Height: 56px
  • X Position: 486px*
  • Y Position: 283px*

Step 4

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.
  • Width: 16px
  • Height: 76px
  • Rotate: 30°
  • X Position: 429px*
  • Y Position: 328px*
draw a multi touch gesture icon in illustrator

Step 5

Select all of the shapes and Unite them with the Pathfinder. draw a multi touch gesture icon in illustrator

Step 6

draw a multi touch gesture icon in illustrator

Step 6.1

Select the anchor point highlighted and remove it using the Delete Anchor Point (-) tool.

Step 6.2

Use the Direct Selection tool to select the bottom segment of the shape and hit the delete key to remove it.

Step 6.3

Use the Convert Anchor Point tool, hold down the Shift key and drag downwards to add handles to the highlighted anchor point. This will curve the line slightly.

Step 6.4

Use the Direct Selection tool to select the highlighted anchor point and increase the corner radius to the maximum possible (87.69px).

Step 6.5

After increasing the corner radius, the shape should look like number 5 in the image above.

Step 7

The next step is to draw some lines to separate the fingers. draw a multi touch gesture icon in illustrator

Step 7.1

Line separating index and middle finger.
  • Width: 0px
  • Height: 42px
  • X Position: 446px*
  • Y Position: 270px*

Step 7.2

Line separating middle and ring finger.
  • Width: 0px
  • Height: 42px
  • X Position: 462px*
  • Y Position: 270px*

Step 7.3

Line separating ring and pinky finger.
  • Width: 0px
  • Height: 34px
  • X Position: 478px*
  • Y Position: 280px*

Step 8

In this step we will had a little contour to the thumb to make it more realistic draw a multi touch gesture icon in illustrator

Step 8.1

Create a new anchor point on the thumb, roughly where it is highlighted in the image above.

Step 8.2

Nudge the new anchor point left 4 pixels using the left arrow key.

Step 8.3

Select the anchor point shown in the image above and increase the corner radius to the maximum (~30px).

Step 8.4

Select the anchor point shown in the image above and increase the corner radius to the maximum (~100px).

Step 9

I recommend making a copy of the hand shape at this stage, as the next step is to 'close' some of the fingers. draw a multi touch gesture icon in illustrator

Step 9.1

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 down 28 pixels using the down arrow key.

Step 9.2

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 down 30 pixels using the down arrow key.

Step 9.3

Select the top 3 anchor points of the middle finger and nudge these points down 32 pixels using the down arrow key. The line does not need to be changed this time.

Step 10

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. draw a multi touch gesture icon in illustrator
  • Width: 58px
  • Height: 58px
  • X Position: 438px*
  • Y Position: 249px*

Step 11

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. draw a multi touch gesture icon in illustrator

Step 11.1

Add two new anchor points to the circle as shown in the image above.

Step 11.2

Select the bottom anchor point on the circle with the Direct Selection tool and hit the delete key to remove it.

Result

Here is the finished single finger tap gesture icon: draw a multi touch gesture icon in illustrator 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:

Free Download

download free multi-touch gesture icons *All X and Y positions use a center reference point

Comments

X

You've successfully logged in!