In the following steps you will learn how to create a set of pixel perfect hand cursors in Adobe Illustrator. For starters you will learn how to prepare your new document and how to setup a simple grid. Next, using the Rectangle Tool, the Ellipse Tool and the Pen Tool along with the Rounded Corners effect you will learn how to create the shapes that make up your hand cursors. Moving on, using basic vector shape building techniques, a simple stroke, a linear gradient, some Drop Shadow effects and a simple Transform effect you will learn how to add color, highlights and shading for the final hand cursors.
1. Create a New Document and Setup a Grid
Hit Control + N to create a New document. Enter 600 in the Width box and 300 in the Height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.
Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 1px, so simply go to Edit > Preferences > Guides > Grid, enter 1 in the Gridline every box and 1 in the Subdivisions box. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.
2. Create the Starting Shapes
Step 1
Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke then select the fill and set its color at red (R=237 G=28 B=36). Move to your Artboard, simply create a 4 x 15px rectangle and lower its Opacity to 30%. Lowering the opacity of the shape will make it easier for you to see the grid in the back which will make it easier for you to understand the exact positioning for each shape. Make sure that your rectangle is still selected and go to Effect > Stylize > Rounded Corners. Enter a 2px radius and click OK.
Make sure that the Rectangle Tool (M) stays active, create a 6 x 10px shape, place it as shown in the second image, lower its Opacity to 30% and hit Shift + Control + E to add that same 2px Rounded Corners effect. Create a 6 x 9px shape, place it as shown in the third image, lower its Opacity to 30% and hit Shift + Control + E. Finally, create a 6 x 7px shape, place it as shown in the fourth image, lower its Opacity to 30% and hit Shift + Control + E.
Step 2
Using the Ellipse Tool (L), create a 4px circle, fill it with the same red (R=237 G=28 B=36), place it as shown in the following image and lower its Opacity to 30%. Switch to the Rectangle Tool (M), create an 8 x 10px shape, place it as shown in the following image and lower its Opacity to 30%.
Step 3
Focus on the right side of your rectangle and pick the Pen Tool (P). Set the fill color at black, lower the Opacity to 30% and create an "L" path as shown in the first image. Make sure that this new path stays selected, add a fourth anchor points as shown in the second image and drag the handles 2px up and 1px to the right. Move up, add a fifth anchor point as shown in the third image and drag the handles 2px up. Hold the Alt key from your keyboard, click on this fifth anchor point then simply click on the starting anchor point to close the path.
Step 4
Focus on the left side of your red rectangle, pick the Pen Tool (P) and create a path as shown in the first image. Make sure that this new path stays selected, add a fourth anchor points as shown in the second image and drag the handles 2px up and 1px to the left. Move down, add a fifth anchor point as shown in the third image and drag the handles 4px down. Hold the Alt key from your keyboard, click on this fifth anchor point then simply click on the starting anchor point to close the path. Finally, make sure that the shape made in this step is filled with black and lower its Opacity to 30%.
Step 5
Select all the shapes created so far and Group them (Control + G). Move to the Layers panel (Window > Layers), double click on this new group and name it "pointerHandCursor". Duplicate this group (Control + C > Control + F), select the copy and and drag it to the right as shown in the second image. Return to the Layers panel and name this new group "palmHandCursor". Keep focusing on this second groups, select the four rounded rectangles and simply delete them.
Step 6
Focus on your "palmHandCursor" group and pick the Rectangle Tool (M). Create a 4 x 13px shape and place it as shown in the first image. Fill it with red, lower its Opacity to 30% and go to Effect > Stylize > Rounded Corners. Enter a 2px radius and click OK. Make sure that the Rectangle Tool (M) stays active, create a 4 x 14px shape, place it as shown in the second image, lower its Opacity to 30% and hit Shift + Control + E.
Create a second, 4 x 14px shape, place it as shown in the third image, lower its Opacity to 30% and hit Shift + Control + E. Finally, create a 4 x 11px shape, place it as shown in the fourth image, lower its Opacity to 30% and hit Shift + Control + E. Focus on the Layers panel, select the four rounded rectangles made in this step and simply drag them inside the "palmHandCursor" group.
Step 7
Duplicate (Control + C > Control + F) your "palmHandCursor" group, select the copy and and drag it to the right as shown in the second image. Return to the Layers panel and name this new group "fistHandCursor". Keep focusing on this third groups, select the four rounded rectangles along with the 20px circle and simply delete them.
Step 8
Focus on your "fistHandCursor" group and grab the Ellipse Tool (L). Create a 6px circle, fill it with red, lower its Opacity to 30% and place it as shown in the first image. Pick the Rectangle Tool (M). Create a 4 x 9px shape and place it as shown in the second image. Fill it with red, lower its Opacity to 30% and go to Effect > Stylize > Rounded Corners. Enter a 2px radius and click OK. Make sure that the Rectangle Tool (M) stays active, create a 4 x 10px shape, place it as shown in the third image, lower its Opacity to 30% and hit Shift + Control + E.
Create a 4 x 9px shape, place it as shown in the fourth image, lower its Opacity to 30% and hit Shift + Control + E. Finally, create a 4 x 7px shape, place it as shown in the fifth image, lower its Opacity to 30% and hit Shift + Control + E. Focus on the Layers panel, select the four rounded rectangles and the 6px circle made in this step and simply drag them inside the "fistHandCursor" group.
3. Create the Main Pointer Hand Cursor Shapes
Step 1
Select your "pointerHandCursor" group, go to Object > Expand Appearance then open the Pathfinder panel (Window > Pathfinder) and click the Unite button. Select the resulting shape, increase the Opacity to 100% and focus on the Appearance panel (Window > Appearance). Remove the color from the fill, add a 1pt stroke and select it. Set the color at R=70 G=70 B=70, align it to inside and open the Stroke panel (Window > Stroke). Focus on the Corner section and simply check the Round Join button. Once you're done go to Object > Path > Outline Stroke.
Pick the Rectangle Tool (M), create two, 1 x 3px shapes, a 1 x 4px shape and a 1 x 5px shape. Fill all four shapes with R=70 G=70 B=70 and place them as shown in the fourth image. Once you have finished, select all the shapes made in this step and click the Unite button from the Pathfinder panel.
Step 2
Using the Rectangle Tool (M), create a 21 x 26px rectangle, fill it with white, place it as shown in the first image and send it to back (Shift + Control + [ ). Select this white rectangle along with the hand contour and click the Divide button from the Pathfinder panel. Make sure that the resulting group is selected and simply hit Shift + Control + G to Ungroup it. Select the outer white shape and delete it then select the inner white shape and replace the white with the linear gradient shown in the final image.
4. Add Highlights and Shading for the Pointer Hand Cursor
Step 1
Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the shape filled with the linear gradient and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the right arrow once to move it 1px to the right. Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control + 8 or Object > Compound Path > Make) and set the fill color at R=205 G=205 B=205.
Step 2
Reselect the shape filled with the linear gradient and make another two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the left arrow once to move it 1px to the left. Reselect both copies and click the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a Compound Path (Control + 8 or Object > Compound Path > Make) and set the fill color at white.
Step 3
Reselect the shape filled with the linear gradient and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the left window (in the following image), click OK and go again to Effect > Stylize > Drop Shadow. Enter the properties shown in the right window (in the following image) and click OK.
Step 4
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 1 x 3px shape and fill it with R=215 G=215 B=215. Place this tiny rectangle as shown in the following image and go to Effect > Distort & Transform > Transform. Enter the properties shown below and click OK.
5. Create the Palm Hand Cursor
Step 1
Select your "palmHandCursor" group, go to Object > Expand Appearance and click the Unite button from the Pathfinder panel. Select the resulting shape, increase the Opacity to 100% and focus on the Appearance panel (Window > Appearance). Remove the color from the fill, add a 1pt stroke and select it. Set the color at R=70 G=70 B=70, align it to inside and check the Round Join button from the Stroke panel. Once you're done go to Object > Path > Outline Stroke.
Pick the Rectangle Tool (M), create two, 1 x 8px shapes and a 1 x 7px shape. Fill all four shapes with R=70 G=70 B=70 and place them as shown in the third image. Grab the Direct Selection Tool (A), focus on the top side of the left rectangle, select the left anchor point and simply drag it 1px down. Once you have finished, select all the shapes made in this step and click the Unite button from the Pathfinder panel.
Step 2
Focus on the hand contour made in the previous step and repeat the techniques and effects used for the pointer hand cursor. In the end things should look like in the following image.
6. Create the Fist Hand Cursor
Step 1
Select your "fistHandCursor" group, go to Object > Expand Appearance and click the Unite button from the Pathfinder panel. Select the resulting shape, increase the Opacity to 100% and focus on the Appearance panel (Window > Appearance). Remove the color from the fill, add a 1pt stroke and select it. Set the color at R=70 G=70 B=70, align it to inside and go to Object > Path > Outline Stroke.
Pick the Rectangle Tool (M), create three, 1 x 4px shapes and a 1 x 2px shape. Fill all four shapes with R=70 G=70 B=70 and place them as shown in the third image. Grab the Direct Selection Tool (A), focus on the top side of the middle 1 x 4px rectangle, select the left anchor point and simply drag it 1px down. Move to the right 1 x 4px rectangle, focus on the top side, select the right anchor point and simply drag it 1px down. Once you have finished, select all the shapes made in this step and click the Unite button from the Pathfinder panel.
Step 2
Focus on the hand contour made in the previous step and repeat the techniques and effects used for the other two hand cursors. In the end things should look like in the following image.
Congratulations! You're Done!
Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.
If you're interested in creating the Subscribe button, check out this nifty tutorial on creating a button with just a line of text in the Appearance panel!
