Monkey Icon Tutorial by ThomDesign

In this tutorial we are going to learn how to create a easy and cute monkey icon. You’ll learn how to make simple use of basic shapes and how to unite them into a cute creature. The tutorial will exist of two parts. The first part will be how to create the monkey, the second how to make the icon. Final result we will be working to:

Part 1: Monkey Illustration

STEP 1: Body

Open Adobe Illustrator and open a new document (Ctrl+N) of 600 x 600 px. Now create a circle (L) of 200 x 200 px and center it to the middle of the drawing area. Also create a rounded square of 120 x 120 px . Select the rounded square and go to effects > warp options > curve and curve it vertical and 50 %. Now position the rounded square under the circle. Give them both a dark brown fill with no outline.

STEP 2: Ears & Feet

Create a circle of 50 x 50 px and copy (Ctrl+C) it and paste (Ctrl+V) it. So you have 2 equal circles and give them a dark brown fill. Put them aside for now as these are going to be the ears of the monkey. Then draw an oval to represent a foot and give it a light brown fill. Select this oval, copy it and paste in front (Ctrl+F). Now make the newly created oval a little bit smaller than the original oval and give this one a medium brown fill with no outline. Center it to the original oval using the align tool. Group (Ctrl+G) the ovals and turn them 45⁰ using the rotate tool (Object > transform > rotate > 45⁰). Copy the grouped ovals and paste them. With the 2nd set of ovals selected go to object > transform > reflect > vertical. Now you have two feet which are exactly the same and mirrored against each other.

STEP 3: Face

To create the face we need a circle of 65 x 65 px. Copy this circle so we have two exactly the same circles. Those are going to be the places we are going to paste the eyes onto later. After creating the circles we need to make an oval which represent the nose. If you are happy with your nose, align the eyes on one line and paste the nose between them. Then select both circles and the oval and unite them with the pathfinder tool and give them a light brown fill. For the nostrils we draw two small circles and align them. Position them on the nose and give them a medium brown fill with no outline.

STEP 4: Eyes

For the eyes we need two circles of 50 x 50 px with a black fill and no outline. Align these with the align tool onto one line. For the pupils we draw three different sized dots and give them a white fill with no outline. Place them in the eye.

STEP 5: Finishing

Now put the monkey together by placing the different parts on to each other according to the illustration. Save it and store it until we have created the background icon.
The colors I used for my monkey icon are:
Dark Brown: #5F4C3F
Medium Brown: #786855 Light Brown: #CA9E64
Black: #3E3D40
White: #FFFFFF

Part 2: Icon Illustration

STEP 1: Rounded Square

Open Adobe Illustrator and open a new document (Ctrl+N) of 300 x 300 px as this will be the same size of the rounded square. Now create a rounded square of 300 x 300 px and give it a purple gradient with no outline going from dark to light purple, from right to left.

STEP 2: Shadow Overlay

Select and copy the rounded square and paste in front (Ctrl+F). Now give this shape a little lighter purple gradient. Now draw an oval over the top section of the newly created rounded square. Fill this oval with the same purple gradient as the newly created rounded square. Now select both the oval and the rounded square and make a clipping mask (Ctrl+7). This will leave you with the top section of the rounded square. Now add two little circles as they represent little shadow spots. Fill them with the same gradient as the lower rounded square. Now select all objects and group them as this will help you with centering the monkey in the following step

STEP 3: Finishing

Now open the monkey illustration and the icon file. Copy the monkey into the icon file and center it to the middle of the icon. You can now save it as a png file. You could also convert the png into an ico file so you can use it as real folder icon on your desktop. Just go to www.convertico.com and convert that png file.

Finished Icon