Adobe Illustrator can be a little tricky to get your hands around, particularly after getting used to the workflow of applications like Photoshop. The differences between layer use and the creation of objects and shapes can be really strange at first hand.

In this tutorial you will learn how to create a frog prince in Illustrator. You will use the Pen tool (or the Pencil Tool) to create almost all shapes and then color them with the Gradient Mesh Tool. The tutorial also will introduce you to some essential techniques (Blend, Path, Blending Mode…) along with simple effects ( Blur, Drop Shadow…).

Let’s get started!

Final Result

Let’s see what you will be creating in this tutorial.

Tutorial Details

• Program: Adobe Illustrator
• Version: CS5
• Difficulty: Beginner, Intermediate

Create a Frog Prince in Adobe Illustrator

Step 1: Create a main Lotus leaf.

1. Create a 600 by 520px, RGB document. Now pick the Pen tool (P) and use it to draw a black shape as shown below. Duplicate (Ctrl+C, Ctrl+F) this shape once time, move the copy 1px up and then change the color of it to red

2. Reselect the black shape, go to the Object menu/ Path/ Offset Path. Enter a 3px Offset and click OK. While the result selected, go to the Object menu/ Path/ Simplify… Enter 92 % in the Curve Precision section and then click OK.

3. Pick the Convert Anchor Point tool (Shift + C). Use it to adjust anchor points in the blue shape (highlighted with yellow circles). Next move anchor points highlighted with the black arrow down to get the result as shown in the second image.

4. Use the Selection tool (V) reselect the blue shape, go to the Object menu/ Path/ Offset Path. Enter a 7px Offset and click OK. While the result selected, go to the Object menu/ Path/ Offset Path. Enter a 10px Offset and then click OK.

Use the Convert Anchor Points tool (Shift + C) to adjust anchor points highlighted with black circles. In the end your shape should look roughly like the second image below.

5. Pick the Pen tool (P) and use it to draw the shape as shown below. Next send it to back (press Ctrl + Shift + Left Square Bracket).

6. Select the black shape and fill it with R=0, G=104, B=56. Next select the red shape and fill it with R=102, G=204, B=51.

7. Pick the Rectangle tool (M) and use it to create a 600 x 520px shape. Next fill it with the radial gradient.

8. Now set fill and stroke colors are None. Pick the Mesh tool (U) and click on positions highlighted with white arrows. Next use the Direct Selection tool (A) to select anchor points highlighted with arrows and change color of them.

In the end your shape should look roughly like the image below.

9. Create the veins of the leaf. Draw red curves as shown in the first image. Next select and group (Ctrl+G) all these curves. Set data of this group as shown in the second image below.

10. Select the blue shape. Next fill it with R=57, G=181, B=74) and add a 1px stroke (R=141, G=198, B=63). While the result selected, go to the Transparency palette and set data as shown in the second image below.

Select two remaining blue shapes, pick the Eyedropper tool (I) and then click on the resulting shape in the previous step.

11. Select the stem shape and fill it with the linear gradient. Next set the blending mode of it is Overlay.

Step 2: Create the Frog Prince.

1. Pick the Pen tool (P) and use it to create two shapes (red and yellow) as shown below.

Duplicate (Ctrl+C, Ctrl+F) the yellow shape once time. While the result selected, click on the red shape and then click on the Minus Front button from the Pathfinder panel.

2. Duplicate the yellow shape one time again, change the color of the result to green and adjust it as shown in the image below.

3. Fill the yellow shape with the radial gradient and then do the same with the green shape.

4. Duplicate (Ctrl+C, Ctrl+F) the green shape once time and adjust the result as shown in the first image. Next fill it with the radial gradient.

5. Create a yellow shape as shown below. Next fill it with the radial gradient. While the result selected, go to the Effect menu/ Blur/ Gaussian Blur. Enter a 9.8 px Radius and then click OK.

6. Draw three shapes (white, yellow and red) as shown below.

Fill newly created shapes with the radial gradient.

7. Draw a yellow shape as shown in the first imgae below and fill it with R=35, G=31, B=32. Next select and group (Ctrl+G) all shapes created from beginning step 6 to this time. While this group selected, go to the Object menu/ Transform/Reflect. Check the Vertical section and then click Copy. Finally move the copy to the correct position as shown in the third image below.

8. Now we will draw noses for the frog. First, pick the Ellipse tool (L) and create two shapes (red and yellow) as shown below. Next fill two newly created shapes with the radial gradient.

Select and group (Ctrl+G) all shapes created in the step 8. While this group selected, go to the Object menu/ Transform/Reflect. Check the Vertical section and then click Copy. Next move the copy to the correct position as shown below.

9. In this step, we’ll create legs for the frog. Now pick the Pen tool (P) and use it to draw two shapes (white and yellow) as shown below.

Fill the white shape with R=200, G=251, B=150. And then fill the yellow shape with R=151, G=172, B=150. Next reselect both shapes and go to the Object menu/ Blend/ Blend Options. Enter the data as shown in the third image and then click OK. Continue go to the Object menu/ Blend/ Make (press Ctrl + Alt + B).

10. Continue draw two shapes (black and pink) as shown below. Next fill the black shape with R=0, G=148, B=0 and then fill the pink shape with the linear gradient.

Next reselect both shapes and go to the Object menu/ Blend/ Blend Options. Enter the data as shown below and then click OK. Continue go to the Object menu/ Blend/ Make (press Ctrl + Alt + B).

11. Draw a yellow shape as shown below and then fill it with R=129, G=168, B=90. While the resulting shape selected, go to the Object menu/ Path/ Offset Path. Enter a -2px Offset and then click OK. Next fill the result with R=158, G=214, B=110.

Next reselect both shapes and go to the Object menu/ Blend/ Blend Options. Enter the data as shown below and then click OK. Continue go to the Object menu/ Blend/ Make (press Ctrl + Alt + B).

12. Continue create shapes and fill them as shown below.

13. Create two shapes (white and yellow) as shown below. Select both shapes and follow the data as shown in the third image below.

14. Continue create a pink shape as shown below. Fill this shape with R=57, G=181, B=74 and lowered its Opacity to 50%.

15. Now we are going to make a drop shadow for the leg. First, draw a white shape as shown below and then fill it with any color. While the result selected, go to the Effect menu/ Stylize/ Drop Shadow. Follow the data as shown in the second image and then click OK. Next press (Ctrl + Left Square Bracket) some times to get the result as shown in the final image below. Finally select and group (Ctrl + G) all shapes created from beginning step 9 to this time.

16. Do the same as previous steps to create the remaining leg. Or reflect the newly created group to be symmetrical.

17. Fill the red shape with the radial gradient.

18. Use the Pen tool (P) to create a black shape as shown below. Next fill it with the radial gradient. Duplicate (Ctrl+C, Ctrl+F) the newly created shape once time and then replace the existing color of the copy with other radial gradient.

19. Draw a red curve as shown below. While the newly created curve selected, go to the Object menu/ Expand Appearance. Next fill the result with the radial gradient. Continue create two shapes as same as the newly created shape.

20. Use the Pen tool (P) to draw the black shape as shown below. Next fill it with R=0, G=148, B=0. Continue with the Pen tool (P), draw two black shapes as shown in the third image below. Next fill the larger shape with R=84, G=214, B=0 and fill the remaining shape with the linear gradient.

Reselect two shapes as shown in the first image below, go to the Object menu/Blend/ Blend Option. In the Blend Option box, enter the data as shown below and then click OK. Next go to the Object menu again/ Blend/ Make (Ctrl+Alt+B).

21. Now create the hand of the frog. Use the Pen tool (P) to draw the black shape as shown below. While this shape selected, go to the Object menu/ Path/ Offset Path. Enter a -1.5px Offset and then click OK. While the result selected, go to the Object menu/ Path/ Simplify… Enter 95% in the Curve Precision section and then click OK.

Now fill the larger shape with R=159, G=214, B=110 and then fill the remaining shape with R=129, G=168, B=90. Select two shapes as shown in the third image below, go to the Object menu/ Blend/ Blend Option. In the Blend Option box, enter the data as shown below and then click OK. Next go to the Object menu again/ Blend/ Make (Ctrl+Alt+B).

Continue create shapes and fill them as shown below.

Draw two shapes and then fill them as shown below.

Keep working with the Pen tool (P), use it to create a black shape as shown below. Next fill the result with the radial gradient.

Duplicate (Ctrl+C, Ctrl+F) the newly created shape once time and replace the existing color with other radial gradient.

Continue create a black shape as shown below and then fill it with the radial gradient.

22. Now we’ll draw fingers of the frog holding the lotus stem. First, draw shapes as shown below.

Fill three shapes with R=129, G=168, B=90. Continue draw three yellow shapes as shown in the second image and then fill them with R=158, G=214, B=110.

Select two shapes as shown in the first image below, and then go to the Object menu/ Blend/ Blend Option. In the Blend Option box, enter the data as shown below and then click OK. Next go to the Object menu again/ Blend/ Make (Ctrl+Alt+B). Do the same with four remaining shapes to get the result as shown below.

Create shapes and then fill them as shown below.

23. Create the lotus stem. First, fill the white shape with R=140, G=212, B=35 and named it "1" . Now pick the Pen tool (P) and use it to draw a red shape as shown in the second image. Next fill it with R=28, G=161, B=0. Select the shape "1" and duplicate (Ctrl+C, Ctrl+F) it. Next press (Ctrl + Right Square Bracket) once time to bring forward the copy. Finally hide this copy (Ctrl + 3).

Select two shapes as shown in the first image below, and then go to the Object menu/ Blend/ Blend Option. In the Blend Option box, enter the data as shown below and then click OK. Next go to the Object menu/ Blend/ Make (Ctrl+Alt+B).

24. Draw a yellow shape and then fill it with the radial gradient. Continue create a red shape as shown in the third image and then fill it with R=153, G=230, B=10.

25. Continue create shapes and fill them as shown below. In the end your new shape should look like the final image below.

Now select and group (Ctrl + G) all shapes created in the step 25. Duplicate (Ctrl+C, Ctrl+F) this group some times and then place the copies to the positions as shown in the first image. Finally resize the copies to get the result as shown in the second image below.

26. Create a red shape and then fill it with the linear gradient. While the result selected, go to the Effect menu/ Blur/ Gaussian Blur. Enter a 1.5px Radius and then click OK. Repeat the same techniques to create some shapes more. In the end it should look like the final image shown.

27. Create shapes and then fill them with the radial gradient as shown below.

28. Now we will draw bee as shown below.

Do the same to create other bee

29. Now go to Object menu/ Show All (Ctrl+Alt+3) to show the shape hidden in the step 23. Next replace the existing color with the linear gradient as shown in the second image. Finally go to the Transparency panel and change the Blending Mode to Multiphy.

30. Use the Pen tool (P) to create two shapes (red and yellow). Next select two newly created shapes, pick the Eyedropper tool (I) and click on the point highlighted with arrow.

Switch to the Pen tool (P) and use it to draw a yellow shape as shown below. Fill the shape with the linear gradient. Next go to Transparency panel and change the Blending Mode to Overlay.

31. Now we are going to make a drop shadow for the belly. Create a white shape as shown below. Next fill it with any color, and then go to the Effect menu/ Stylize/ Drop Shadow. In the Drop Shadow box, enter the data as shown in the second image and then click OK. Finally press (Ctrl + Left Square Bracket) some times to get the result as shown in the final image below.

32. Continue make a shadow for the head by the other way. First, draw a shape as shown below and then fill it with black color. While the result shape selected, go to the Effect menu/ Blur/ Gaussian Blur. Enter a 24px Radius and then click OK. Finally press (Ctrl + Left Square Bracket) some times to get the result as shown in the third image.

33. Now we’ll create a lotus placed on the head of the frog symbolizes for the crown.

Make a shadow for the crown. Now select and group (Ctrl + G) all shapes created in step 33. Named this group is "2". Next create a white shape as shown below and fill it with dark green and then go to the Effect menu/ Blur/ Gaussian Blur. Enter a 8.8px Radius and then click OK. Finally select the group "2" and go to the Object menu/ Arrange/ Bring to Front (Ctrl + Shift + Right Square Bracket).

Do the same as previous steps to make a shadow for the shape highlighted with arrow.

Step 3: Draw fishes.

1. Now we’ll create fish swimming underwater. First, draw the body and tail for the fish.

Create fins for the fish.

Add color to the body of the fish.

Draw the eye

2. Repeat the previous steps to create another fishes.

3. Place fishes to the positions as shown below.

4. Now we will create effect for the fishes like are swimming underwater. First, draw a yellow shape as shown below. Next fill this shape with the linear gradient. Finally lowered its Opacity to 90%.

Repeat the same techniques for the remaining three fishes.

In the end it should look like the final image shown.

Step 4: Create Lotus leaves and stems.

1. Create a lotus leaf as shown below.

2. Now create a stem for the newly created leaf. Use the Pen tool (P) to draw two shapes (red and yellow) as shown below. Fill the larger shape with R=0, G=107, B=0 and then fill the remaining shape with R=0, G=82, B=0.

Select them both newly created shapes, go to the Object menu/ Blend/ Blend Options. Set the data as shown below and then click OK.

3. Do the same as the previous steps to create some lotus leaves and stems.

4. Now we’ll create some larger stems.

Do the same as the previous steps to create some lotus stems more.

5. Create some stems stand in the distance. Use the Pen tool (P) to create a white shape and then fill it with the linear gradient as shown below. Next go to the Transparency panel and change the Blending Mode to Overlay.

Do the same as the previous steps to create some lotus stems more.

Final Result

The final image is below. I hope you enjoy this tutorial. Have fun!

Conclusion

As difficult as it looks I’m very sure if you follow my tutorial you will find a lot of help using your skills and images to produce your own creation! Ones again Thank you for using our tutorial, we will be very happy to answer any questions that you may have, You can simply leave a feedback and or a comment bellow.