Create a Frog Prince in Adobe Illustrator

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.

Create a Frog Prince in Adobe Illustrator

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.

instantShift - Create a Frog Prince in Adobe Illustrator

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

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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).

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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.

instantShift - Create a main Lotus leaf

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

instantShift - Create a main Lotus leaf

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

instantShift - Create a main Lotus leaf

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

Fill newly created shapes with the radial gradient.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

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%.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

17. Fill the red shape with the radial gradient.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

Continue create shapes and fill them as shown below.

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

Draw two shapes and then fill them as shown below.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

Create shapes and then fill them as shown below.

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

28. Now we will draw bee as shown below.

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

Do the same to create other bee

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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.

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

instantShift - Create the Frog Prince

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).

instantShift - Create the Frog Prince

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

instantShift - Create the Frog Prince

Step 3: Draw fishes.

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

instantShift - Draw fishes

instantShift - Draw fishes

Create fins for the fish.

instantShift - Draw fishes

Add color to the body of the fish.

instantShift - Draw fishes

Draw the eye

instantShift - Draw fishes

2. Repeat the previous steps to create another fishes.

instantShift - Draw fishes

3. Place fishes to the positions as shown below.

instantShift - Draw fishes

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%.

instantShift - Draw fishes

Repeat the same techniques for the remaining three fishes.

instantShift - Draw fishes

instantShift - Draw fishes

instantShift - Draw fishes

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

instantShift - Draw fishes

Step 4: Create Lotus leaves and stems.

1. Create a lotus leaf as shown below.

instantShift - Create Lotus leaves and stems.

instantShift - Create Lotus leaves and stems.

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.

instantShift - Create Lotus leaves and stems.

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

instantShift - Create Lotus leaves and stems.

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

instantShift - Create Lotus leaves and stems.

4. Now we’ll create some larger stems.

instantShift - Create Lotus leaves and stems.

instantShift - Create Lotus leaves and stems.

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

instantShift - Create Lotus leaves and stems.

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.

instantShift - Create Lotus leaves and stems.

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

instantShift - Create Lotus leaves and stems.

Final Result

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

instantShift - Final Result

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.

Like it? Share it.

12 Comments

  1. wow this is so amazing! very detailed tutorial! thanks for sharing!

  2. wow this is so amazing!

  3. It’s so great.Good

  4. well written tut .. great share .. and great result !! :D

  5. That is the reason i visit your blog again and again because you share very technical points on your blog and anyone can learn easily from your posts because this step by step sharing is easy to understand.

  6. Amazing tutorial.Really nice for web designer.Thanks a lots for sharing.

  7. Thank you for sharing amazing…

  8. Amazing tutorial! Great work!

  9. This is really very nice to teach us this, step by step. I have learned a lot from this project as I followed those steps and created another frog myself. I used a little more blue and black and dark brown.

    Thanks

  10. it is a great creation. I have learned a lot from this project.It is very detailed tutorial. thnk you so much.

  11. A very smart approach to explain the things, I like your step by step tutorial,

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>