Create a Happy Sun Character

Tutorials | October 15th, 2009

Happy Sun Character Tutorial

Well, it’s Blog Action Day 2009 today and the topic is Climate Change. So I decided to create a fun sun character tutorial. This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects!

Blog Action Day Day 2009: Climate Change

Climate change is an important issue that affects everyone on this planet. If you are reading this, you are probably a designer, illustrator, or involved in these industries in some way. Being part of these industries, we have a unique responsibility to visually communicate issues such as climate change. That makes it fun an easy to spread the word about climate change through artwork like in this tutorial. Even if you are not part of the design industry, you can learn more about climate change form the Blog Action Day site.

Blog Action Day 2009: Climate Change

Final Image

Below is the final illustration we will be working towards.

Final Image

Tutorial Details

  • Program : Adobe Illustrator CS4 (tutorial can be completed with other version of Illustrator)
  • Difficulty: Intermediate
  • Estimated Completion Time: 30 minutes – 1 hour

Step 1

Create a new document and with the Ellipse tool (L), create an ellipse.

Step 1

Step 2

Fill the ellipse with a radial gradient from the Gradient panel. In the Gradient panel, change the first color stop in the gradient to a light orange color and change the second color stop to a orange color. Next, from the Gradient panel, select your first light orange color stop and change the Location to 43. Select the Middlepoint on the Gradient Slider and change the location to 60. With the Gradient tool (G) move the center of the gradient slightly up and to the right.

Step 2

Step 3

Create a new ellipse and fill it with a radial gradient. Make the first color stop in the gradient white and the second color stop a light gray color. Change the location of the gradient’s Middlepoint to 87.

Step 3

Step 4

Create a new smaller ellipse in the center and to the right of the previous ellipse. Fill the ellipse with a radial gradient with the first color stop a light cyan color and the second color stop a dark cyan color. Change the location of the gradient’s Middlepoint to 87.

Step 4

Step 5

Create another ellipse in the center of the previous ellipse and fill it with black. Next, create two other smaller white ellipses and place them over the black ellipse. Now we have an eye!

Step 5

Step 6

Select the white eye ellipse, Copy (Command + C), and Paste in Back (Command + B). With the copy still selected, move it up slightly. Change the fill of the ellipse to a dark orange color. Select the white ellipse again, Copy (Command + C), and Paste in Back (Command + B). This time, move the copy down slightly and change the color to a light yellow color.

Step 6

Step 7

Select all the eye shapes, Copy (Command + C), and Paste in Front (Command + F). With the copies selected, move them to the right of the main ellipse shape and scale down slightly with the Selection tool (V).

Step 7

Step 8

With the Rectangle tool (M) create an rectangle about the width of the eye shape and about a fourth of it’s height.

Step 8

Step 9

Go Effects > Stylize > Round Corners and in the Round Corners dialog, change the radius to 10 px. The radius might change depending on dimension of your artwork. Just play around until you get something similar to the preview image below. Next, go Object > Expand Appearance.

Step 9

Step 10

Go Effects > Warp > Arch. With the Warp Options dialog open, make sure the Horizontal radial button in selected, change the Bend percentage to 25, and change the Horizontal Distortion to 40. Next, go Object > Expand Appearance.

Step 10

Step 11

Change the fill of the warped shape to a linear gradient. Make the first color stop in the gradient a red-brown color and the second color stop a dark red-brown color. With the Gradient tool (G) adjust the gradient so the darker part of the gradient is at the bottom of the shape.

Step 11

Step 12

Copy (Command + C) the eyebrow shape and Paste in Back (Command + B). With the copy selected, move it down and to the left slightly. Change the fill of the copy to a dark orange.

Step 12

Step 13

With both eyebrow shapes selected, rotate them to the left slightly with the Selection tool (V). Copy (Command + C) the eyebrow shapes and Paste in Front (Command + F). With the copy selected, go Object > Transform > Reflect. In the reflect dialog, select the Vertical radial button and press OK. Next, move the copies to the other side of the face above the other eye. Select the dark orange shadow of the copies and move it the left side of the eyebrow.

Step 13

Step 14

Create an ellipse about the size of one of the eyes and place it in-between the eyes towards the bottom.

Step 14

Step 15

Fill the new ellipse with a radial gradient. For this gradient we are going to add one more color stop, making a total of three color stops in the gradient. To do this, click in the middle of the Gradient Slider in the Gradient panel. Next, change the first color stop to a lighter orange color than your original light orange from the main sun shape, change the middle color stop to the same orange color as the main sun body shape, and change the last color stop to the same light orange as the main sun shape. Change the first Middlepoint of the first two color stop to 65. Finally, with the Gradient tool (G), scale the gradient so the center of the gradient is in the top right corner of the ellipse.

Step 15

Step 16

Copy (Command + C) the nose shape and Paste in Back (Command + B). With the Direct Selection tool (A) grab the bottom anchor point and drag in down and to the left, creating a shadow.

Step 16

Step 17

Create an ellipse about half the size of the main sun shape. Draw a rectangle covering the top half of the ellipse. Select both shapes and press the Minus Front button in the Pathfinder panel.

Step 17

Step 18

Fill the new mouth shape with a linear gradient with the first color stop a red-brown color and the second color stop a darker red-brown color. With the Gradient tool (G) adjust the gradient bottom up so the darker part of the gradient is at the top of the mouth.

Step 18

Step 19

Copy (Command + C) the mouth shape and Paste in Back (Command + B). Move the copy up slightly and change the color to your dark orange color. Copy (Command + C) the mouth shape and Paste in Back (Command + B) again. This time, move the shape down and change the fill to your light orange color.

Step 19

Step 20

Create an oblong ellipse that is about one third the size of the mouth. Copy (Command + C) the ellipse and Paste in Front (Command + F). Move the copy down slightly and scale up about a fourth of the original size. Next, select both shapes and press the Minus Front button from the Pathfinder panel.

Step 20

Step 21

Fill the new shape with your dark orange color. Copy (Command + C) the shape and Paste in Back (Command + B). Next, scale the copied shape up and change the color to your light orange color. Center both shapes on the bottom of the mouth shapes you have already created.

Step 21

Step 22

Select the newest curved shapes you created, Copy (Command + C), and Paste in Front (Command + F). Scale down and rotate the shapes to the left with the Selection tool (V), then  place them on the left top side of the mouth. Next, Copy (Command + C) the original curved shapes, Paste in Front (Command + F), rotate and scale the shapes to the right, and place on the right side of the mouth shape.

Step 22

Step 23

Select the main dark mouth shape, Copy (Command + C), and Paste in Front (Command + F). With the Selection tool (V), hold down the Shift key and scale the copy bottom up slightly. Still with the Selection tool (V), squish the copied shape from the bottom up until the copy is about one fourth the original size. Change the first color stop in the linear gradient to white and the second to a light orange. Also, change the Location of the Middlepoint to 80.

Step 23

Step 24

With the Star tool (found under the shape tools in the Tools panel), click on the artboard to open the Star dialog. In the dialog change Radius 1 to 30 px, Radius 2 to 15 px, and the Point to 3 (your radius dimensions might be different depending on the dimension of your artwork, just make sure that Radius 2 is half the size of Radius 1). Squish the triangle shape horizontally to about half it’s original size. Place the triangle over the center of the teeth to the right . Next, select the teeth and the triangle and press the Minus Front button from the Pathfinder panel.

Step 24

Step 25

With the Ellipse tool (L) create two ellipse toward the bottom of the mouth shape, making sure half of the ellipses are hanging outside of the mouth shape. Select the main dark mouth shape, Copy (Command + C), and Paste in Front (Command + F) two times. Select one of the copies, select the right ellipse, and press the Intersect button from the Pathfinder panel. Repeat the same for the left ellipse. Fill both ellipses with a linear gradient with the first color stop a light pink and the second color stop a pink color. Separately adjust each ellipse’s gradient with the Gradient tool (G)  from the top right of the ellipse to the bottom left.

Step 25

Step 26

Select all the mouth shapes and place them on the sun’s face. Next, Rotate the mouth shape to the left slightly.

Step 26

Step 27

With the Star tool, click on the artboard to bring up the Star dialog. Create a star with a Radius 1 of 100 px, a Radius 2 of 50 px, and 3 Points (like before these dimensions might be different depending on your artwork). Next, go Effects > Stylize > Round Corners and in the Round Corners dialog, change to Radius to 20 px. Expand the shape and squish it down slightly with the Selection tool (V).

Step 27

Step 28

Fill the triangle with a three color stop gradient, making the first color stop a light orange color, the second a orange color, and the third a dark orange color. Select the Middlepoint in between the first two color stops in and change the Location to 65. Next, change the Location of the second color stop to 60 and the Middlepoint Location of the last two color stop to 15. Adjust the gradient from top to bottom with the Gradient tool (G).

Step 28

Step 29

Make a copy of the triangle so you have a total of two. With the copy selected, go Effect > Warp > Arch. Within the Warp Options dialog, select the Vertical radial button and change the Bend percentage to 30 and expand the appearance.

Step 29

Step 30

Make a copy of the first triangle, move, and rotate the copy so it radiates from the sun face shape, creating sun bursts. Make sure the triangle is behind all other artwork by going Object > Arrange > Send to Back. Next, rotate and place copies of the triangles, alternating between the two, around the sun. Make sure that all the triangles are sent to the back.

Step 30

Step 31

Select the main sun face shape, (Command + C), and Paste in Back (Command + B). With the copy still selected, move it down slightly and change the color to your dark orange color.

Step 31

Step 32

To add just a little more detail and fun to the sun, draw varying sized ellipses above the corners of the mouth. All done!

Step 32

Final Image

Again below is the final image we just created.

Final Image

Sample Usage

Below are some sample images of this tutorial in use. One is a logo for a fictional alternate energy learning center for kids (just made that up, but you get the point). The second one is a global warming diagram for children (not very accurate, I know). It is easy to apply this illustration to other projects or adapt it to other illustrations (like the earth illustration in the Global Warming diagram). Try to see what you can use it for!

Sample Usage

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Facebook
  • Mixx
  • TwitThis

62 Responses to “Create a Happy Sun Character”

  1. sriganesh says:

    very good tutorial and like it very much as a nature lover :)

  2. Destracos says:

    Hey dudes, check this step by step hardcore vector drawing :
    http://destracos.wordpress.com/passo-a-passo-2/

    cheers

  3. Theo Hodkin says:

    Absolutely brilliant. This is an incredibely useful tutorial, with a variety of vital tips and methods that result in a brilliantly simple yet aesthetically pleasing result. Your talent is simply staggering, and the style of the image is awesome! Thanks Ryan!

  4. Sneh Roy says:

    Awesome job! And what a perfect theme too :)

  5. IVAN says:

    superb ! .. love it ♥

  6. Bene says:

    Dude, you’re the man. I enjoyed and learned so much with your Tutorial.

    Regards and happyness from Argentina

  7. Gopal Raju says:

    Thats a cute one…

  8. Shaboss says:

    Very nice tutorial.

  9. i really like your tutorial which helping environmental awareness.

  10. Maluson says:

    Man, that’s so great, love your technics, love your style!!

    Keep it comin!

  11. Maluson says:

    A question Ryan, before you do all that greatness in Illustrator, do you start with a sketch ? I’m asking especially for this tutorial here (and also for your other works).
    Thanks!

    • Rype says:

      Sometimes I do. I have a couple of sketch books going, one digital and a couple moleskins. I also kind of sketch in Illustrator. For this tutorial it was a combination of looking at some sketches I have done, and just playing around in Illustrator.

  12. Very nice!!! Thanks,

  13. Waasys says:

    Nice tut, but his tongue looks a bit weird )

  14. qw78 says:

    Thanks for this tutorial

    Simple techniques but very good result

  15. Fada says:

    I just have finished this tutorial. As I am starting with illustrator it helped me very much with understanding abilities of illustrator.
    I am sorry for probably newbies question but how have you moved centre of a gradient? Clicking gives another result and dragging looks a little different and also doesn’t give possibility to leave the same radius.
    I am using CS3, mb this is a difference?

    • Rype says:

      In CS4 the Gradient tool got an upgrade, making it easier to adjust gradients. You use the Gradient tool the same in CS3, it is just harder to see the results. Basically with the Gradient tool you will click and drag out the distance of the gradient. In a radial gradient the point at where you clicked is the center point. Let me know if that helps!

  16. Reptilido says:

    hey thnaks so much for this tutorial, i already made a cat face based on your sun http://www.flickr.com/photos/reptilido/4019476249/ :)

  17. zee says:

    whoaaa
    awesome tut, superb really love it
    all steps explained in good format and easy to understand
    keep moving

  18. Bryan G. C. says:

    WTH? I don’t know why must almost every single character needs to have these freckles and the cutted teeth to be cute. I enjoy the tutorial, but in my opinion it could be better without these parts :/ I don’t like them, don’t know why exactly.

  19. Grafiko says:

    Great outcome, love the style. thanks for sharing

  20. Paul says:

    thats a really nice tutorial! thank you very much! i really need to be doing stuff like this since my AI experience is very limited to mostly making glass buttons for web designs.

  21. aliaskajan says:

    very nice tutorial :)

  22. carlo says:

    the tongue looks like balls…

  23. umax says:

    Thank You for tutorial. You have created a really useful web site.
    My result:
    http://belev.net/umax/sun.jpg

  24. lukavivid says:

    fantastic and happy!

    beautiful way of tutorial…

    thank you!

  25. omishe says:

    Thank you!!

    It is very useful and cute!!

    Muchas gracias!!

    Es muy util y simpatico!!

  26. Morty says:

    Thanks much for sharing your experience in Illustrator. I think it’s done really nice and detail – even for beginners.
    Looking forward for next one :-)

  27. hey, what a nice sun! very detailed, could be also a nice video ;) thank you!

  28. Ann says:

    Thanks really a joy to do this tutorial

  29. hiduai says:

    its very nice tuts. thank you for tuts

  30. samuel says:

    Great tut, I like it! :D

  31. Alexander says:

    Very nice tutorial! Thank you! But may we use your tutorials to make our own illustrations to sell them on the microstocks? Please understand me rightly. It is better to ask before making and selling then after! If it is possible, please, answer me. Thank you in advance!

  32. tashi says:

    Hey Ryan thank you so much..i was just working on children book which required a sun with lotsa rays and i guess i was lucky to have viewed this..i will post you my work when it is done..just finished this sun vector and the process you have explained is so helpful..thank you once again!!

  33. akatsuki says:

    wow…..thaks for tutorials

  34. itwz says:

    Thanks for you!

  35. Brian says:

    Great tutorial! Just wanted to let you know that I have added it to thetutorialist.com – hope it helps!

  36. dnweoo says:

    Great tutorial, thank you for this tutorial

  37. Liz says:

    AWESOME tutorial!!! I learned alot – looking forward to working more of your tutorials – Thank You! Here is my sample:

  38. guinol says:

    wowww….very god!!

  39. Garr says:

    Hey, great tut. I have to admit being stuck on the eyebrows, though. When I do the reflect portion, it does not exactly reflect the objects. They become distorted and all wrong.

    Thanks for publishing something so in depth!

  40. Aravind Potadar says:

    Really nice tutorial!!! keep posting tuts like this

  41. Diana says:

    Exito solo dure 20 min…esta excelente

  42. Petr says:

    AMAZING! So simple but the final result is astonishing! Thanks fo this tutorial!

  43. Great tutorial! I’m trying to learn the basics of Illustrator in 30 days (using the demo) to see if I should buy it. This tutorial was a great help. Thanks!

  44. Wow, very good tutorial, very easy to follow, and the end result is very cute and cool :-) Thanks for sharing….

  45. Awesome it took me the full hour, plus I learned some really great techniques.

  46. Soft says:

    good work! Very nice! thanks a lot

Trackbacks/Pingbacks

  1. [...] : Inspired By The Happy Sun Tutorial on Vectips. Gradient Mesh know how obtained from The Cute Moon Night Scene Tutorial on AiVault. [...]

  2. [...] Create a Happy Sun Character Create a Happy Sun Character [...]

  3. [...] Thanks for great tutorial made by vectips [...]

  4. [...] Happy Sun Character Learn how to create fun sun character tutorial in Illustrator. This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects! [...]

Leave a Reply