Icon Design Tutorial: Drawing A Pencil Icon

Advertisement

by Vu Tran and Min Tran

Nowadays we can see icons everywhere, from a game console to web applications. Icons are getting more and more popular and play an important role, maybe the most important role in user interfaces. However, the resources about icon design are not that popular which is why when we have done our first steps in icon design, it was really hard to find a good starting point.

There were only few in-depth tutorials or books about this subject. Which is why we would like to share some (hopefully useful) tips about how to create a simple icon set. This tutorial presents of course not everything you should know about how to master icon design, but we hope that it will help you, particularly if you have just started to learn, or want to learn more about icon design.

Milky Icon Set1

Few weeks ago we have released the Bright! Icon Set2 (see the image above) which is available for free download from our web-site. This article explains the process of designing a simple pencil icon, one of the icons of the icon set. The tutorial is very detailed and in-depth, so you will hopefully be able to follow each step without any problems.

Although we consider a basic example, the principles, conceptialization and techniques from this article can easily be applied to icon design in general. Although all tools we use in this guide are very simple and very easy to work with, your acquaintance with Adobe Illustrator is still requisite.

This is the result which we’ll come up with at the end of the article. You can download the source file3 as well.

outline

outline

So how do we start? Usually before starting, we have to gather some pencil pictures on the Web and pick up the details and traits out of those pictures and mix them all to create a style for some fresh pencil icon. We always start with a hand-drawn sketch.

1. Characteristics of a pencil icon

Drawing an icon means to draw the most typical characters of an object so that it can capture the icon’s action or represent the concept and nuance.
As you might know, there are generally three kinds of pencils to select from:

  1. Prism-shaped body with a shiny glaze-coated end.
  2. Prism-shaped body with an eraser secured to the pencil body by a bright white metal ring.
  3. Cylinder-shaped body without an eraser.

We choose the second kind for the icon design because it has all necessary elements, making it easier for the viewer to recognize the image. After trying to sketch some upon the second kind, this is the sample sketch that matches the style of the set that we have in mind.
Our favorite drawing tools are Copic Markers with 10%, 30%, 50% gray tones and a ballpoint pen. Some important things that should be followed as working on this icon:

  • When an icon is designed in a large size, you need to pay close attention to details, and make sure that the two-point perspective is used. But in this article, because the icon is to be made and optimized in smaller sizes (64×64px and 48×48px), its concept should be as simple as possible, and the icon should be illustrated in one-point perspective.
  • Light used in the icon must be harmonized.
  • Perspective used for the icon must be identical in the iconset, making all the icons look like being in a family.
  • Style should be a bit more manly-looking.
  • Decisive color is green.
  • Since the icon is to be saved in an EPS8 file, only gradient is used and all the paths must be connected (no open paths). It is also important to note that there is no transparent effect and no raster image invovled.

Okay, let’s get to the main part!

2. Sketches:

In our icon design sketches always come first.

We are going to scan these sketches into Illustrator.

2

3. Basic outline:

3.1. The pencil body

  1. Create a 64 x 64px document. Drag the image (the scanned sketch) into the artboard of the new document. Go to the Transparency palette and set the image’s opacity to 50. Lock this layer and save the document. Create a new layer and start to make outlines on it.
  2. Create a rounded rectangle path using the Rounded Rectangle tool and then click on the artboard to set the Corner Radius value to 10px. Click OK.
  3. 2

    2.1

  4. Choose the Selection tool (V) and click on an edge of the rounded rectangle path and drag it over and make it fit tightly on the sketched image like the picture below.

    3

    • Select the round rectangle and set their color to none.
    • The eraser looks smaller than the body, so it needs to be reformed. There may be several ways to redraw the eraser like using the Pen tool (P) but from my experience they didn’t give good results.
  5. Select the rounded rectangle path. Double-click on the Scale tool and check Uniform in the Scale dialog box. Set the scale value at 96%. Check Copy to create a replica as shown in the picture below.

    2

  6. Choose the Rectangle tool and draw a new rectangle at the position of the eraser and over the rounded rectangle path.

    2

  7. Choose the Add Anchor Point tool (+) and click on the central point of the rectangle path (drawn in step 5) to add one more anchor point. Next, select the Delete Anchor Point tool (-) and delete 2 anchor points.

    2

  8. Choose the Ellipse tool and draw an ellipse as shown below:

    2

  9. Select the larger rounded rectangle path and the ellipse path. Go to the Pathfinder palette and click the Divide icon. A new group appears in the Layer palette. Any divided path will belong to this group.

    2

  10. Go to the Layer palette and select two paths located below the new group, press Command/Ctrl + G to put them into a group and lock this group. Do that to make it easier to delete unused paths in step
  11. Ungroup the group with divided paths (in step 8) by selecting the group and choosing the Ungroup command from the right-click menu.

    2

  12. Delete unused paths until the result is achieved as below.

    2

3.2. The metal ring

Just like the steps done with the eraser, for this path we’ll use a bigger ellipse and divide the pencil body path to detach the metal ring from the body.

2

2

The shape of pencil now has been taken very basically. I think we can go into its details from this step on. What we have to do is cleaning up the pencil.

4. Details:

2

Create the outlines for a pencil with sharpened end by using the Rounded Rectangle tool and the Pathfinder palette. All we have to do with this path is make the pencil body in a prism shape and look being already sharpened.

  1. Select the Rounded Rectangle tool and draw a new rounded rectangle path with 4pt corner radius (like in step 2B).

  2. Make a duplicate of this rounded rectangle path by pressing “Copy and Paste in front” commands (Command/Ctrl + F )
  3. Move the duplicate path to the right.

    2

  4. Select both rounded rectangle paths and the body path, and then divide them using the Divide option in the Pathfinder palette.
  5. Select the group with divided paths and ungroup it, and then delete unused paths. The result should be like this:

    2

  6. Continue using the Rounded Rectangle tool to draw another rounded rectangle path, and then use the Divide option to cut the path in the middle of the pencil body to form a clear prism. Next, ungroup and unlock all the paths in Layer 2, and then change their names. See the result below.

    2

    2

5. Styling the Pencil:

And now we are going to give the icon some charm. The steps include:

5.1. Adding gradient

  1. Select all the paths and select the Gradient tool, and then go to the Swatches palette and choose a radial black-gray-white gradient.
  2. Select each path and drag the Gradient tool (G) across each of them until you see the result like the picture below:

    2

  3. Select all the paths and set their stroke weight to zero. The purpose is to preview the pencil in general.

    2

    Well, light depicted in the pencil body looks fine, but the metal ring and the sharpened end need to be adjusted a bit.

  4. Change the gradient type of this path to linear to create a new gradient as shown in the picture below. Hoping you could create the gradient like mine. In case you couldn’t make it yourself, just download the attached source file4.

    2

    2

    2

  5. The metal ring path should embrace the eraser tightly. To do this, use the Add Anchor Point tool (+) and add 4 more anchor points to the two ends of the metal ring path, and then delete 2 corner points. The result look like this:

    2>

  6. The metal ring path also needs to be a little thicker. The easiest way is use the Offset Path command. Select the path and then go to Object>Path>Offset Path. In the Offset Path dialog box, set the offset value to -1pt or less. You may check Preview to see the result and hit OK.

    2

    2

    Notes:

    • Use the Offset path to make a duplicate over the metal ring path; change the gradient of the metal ring path (locating below the duplicate) to give depth.
    • Whenever the Offset path is used, the default name of the duplicate is “path”.
    • If the offset value is minus (-), the duplicate will stay upper.
  7. Apply the radial black-gray-white to the metal ring path, press G and drag the Gradient tool across the path until you get the result like the picture below:
    Okay, the metal ring looks acceptable to the eye. Now let’s mess with the sharpened end or the pencil nib path.

    2

  8. Scale the pencil nib path so that it adjoins with the pencil body.
  9. Like in the sketch, the pencil nib path here needs a highlight piece located right at its center, making up its shape. Before doing this, remember that the icon is to be saved in EPS8 format and there’s no usage of effect, no blending mode or opacity adjustment but only paths or the blendshape. To make it simpler, use the Pen tool and draw a path over the pencil nib path.

    2

  10. Change the direction and angle of the gradient until the pencil nib is taken shape properly.
  11. Draw the pencil lead using the Pen tool.

  12. Give a highlight piece to the eraser using the Pen tool and change the angle of the gradient to suggest the eraser shape.
  13. Use the Offset path command to make a duplicate of the eraser path. Change the gradient tone of the eraser path to make its contour look sharper.

    2

5.2. Tweaking the color

In this stage, we’ll put each element of the pencil into each separate group (the body, the eraser, and the sharpened end).

  1. Select the pencil body paths (including 3 paths). Go to Edit > Adjust Color Balance, check Preview and Convert in the Adjust dialog box, and then switch to RGB mode.

    2

  2. Drag the slider to change the Red/Green/Blue values (to whatever color you like).
  3. Select the eraser and do the same Step 2.
  4. Select the sharpened end and change its color (do dittos).

    2

    The pencil now looks flatter than it was initially. That’s because the gradient will lose the black color after adjusting the color balance. What we’re going to do next is go back to the three elements of the pencil and add the black color to their gradient so that the shapes of the elements will display clearer.

  5. Grab the gradient slider and move the main color closer to the white. In the Color palette, drag that color down to the Gradient palette. Select the color just dragged (by clicking the gradient slider) and change its value to 0-0-0 (make sure the color mode is RGB). You may use the Color palette to change the gradient color.

    2

6. Deeper details and style matching

After everything basic is done, switch to Pixel Preview mode from the View menu to see if the pixelation problem occurred.

We are almost done. Yet, as you see, the pencil lead looks very sharp-pointed, giving an unsafe feel. So we got to change that conical point to a frustum of a pyramid. Also, we need to add some extra paths to the pencil body as highlight pieces (using the Offset Path command). This is necessary because the outer housing of the pencil is a very shiny coating.

And the result is:

2

After the icon is rotated at 45-degree angle:

2

Well, one more thing, the pencil still looks so dark that can’t match the styleweI want to have, so we’ll make a change to its color. Just add some detail to the metal ring path by (1) duplicating the path and scale the duplicate a little bit, and then (2) make another duplicate and drag the gradient over it to make the icon more realistic.

Note: make sure both “Snap to Pixel” and “Snap to Point” have been checked after Pixel Preview mode is used.

The final outcome:

2

Look at the final outcome. While the light direction comes from above, the lower part of the pencil body is lighter than the upper part. Yes, it’s the reflection of light.
Many assume that it’s tough to draw icons with Illustrator due to difficulty in representing color and light. If you have a good sense of color you can change the gradient color and tone using the Color palette.

outline

outline

Anyway with Photoshop, you could do the following way:

  1. Export your vector to a PNG, then open it in Photoshop.
    Change the color and light level of the icon image by using Curves or Color Balance or Auto Levels (from Image menu > Adjustments), or using other techniques you knew in Photoshop. After editing, save the image file.
  2. Drag the edited image into Illustrator, then use the Eyedroper tool to pick up three main values of color – brightness, medium and darkness, and after every pick-up, drag the color into the Swatches palette to save.
  3. Drag your chosen color into the Gradient palette to make your own nice gradients, then applied to your icon.
    I used to do that way for a while and now I’ve owned a useful library of gradients, which I always use to style my icon sets.

7. Source files

You can download the source files of the icon in .eps and .ai for free:

Common Mistakes

Let us discuss some mistakes which are frequently occur when it comes to icon design using the example above.

  • Create reflection and highlights in the icon by drawing a new path over the original path and add the while or black to it, then changing its opacity.
    This way will make the object color to be the silver gray, losing the clearness as it was, though it still can achieve glossiness.
  • Use gaudy models of pencil and round cylinder shape to easily take shape of the pencil icon with only one gradient.
    But drawing icons is drawing anything most familiar and typical, and draw objects that best capture the icon’s action or gesture. A round-shaped pencil icon hardly can come with sharp corners and clear highlights.
  • Rely on a prism-shaping gradient by using a path to demonstrate the pencil body and then apply the gradient that makes an object look like a prism shape to the path.
    This may be an easy way but very difficult to edit, and the gradient tends to be askew.
  • Use the blendshape to cast shadow in EPS8 and the shadow changes from white to black without transparency.
    When the shadow casts on a background with color other than white, a white contour will appear.

Design comparisions

These are some typical designs we’d like to bring in and classify them upon some good and weak points.
The final result above shows the pencil icons designed in one-point perspective. This is a perfect design that obtains all necessary components: lighting, shadow, color and composition, and especially, this design can be scaled down to any size without pixelation problem.

right

Figure 1 shows the pencil icons designed in two-point perspective. This design depicts good lighting, acceptable shadow and nice color, and does not encounter the pixilation problem. Yes, this design looks nice and cool. However, the composition and shape of the pencils may not be recognizable immediately to viewers, resulting in the violation of the main principle of icon design.

wrong
Figure 1

Figure 2 shows the folder icons designed in two-point perspective. The design looks nearly perfect with nice concept, a complete and proper composition. It’s also a good design as it depicts accurately the light direction that comes from above and casts a nice shadow, and the light reflection on the folder object is wonderful. Yet, pixelation problem occurs on the upper edges of the folders, causing the icon in 24x24px to lose sharpness.

wrong
Figure 2

Conclusion

There are many different approaches to icon design, some use 3D application, others use Firework or Photoshop, but the goal in designing icons is the same, whatever tools we use. We need to keep the consistency through every icon in the set, and maintain recognization and simplicity. As we said in the beginning of this article, these are just some basic steps and principles of creating a beautiful and crisp icon. We hope you enjoy this tutorial. If you feel urged to learn more, please keep track on the free icon design book that we will make publicly available in July.

Footnotes

  1. 1 http://min.frexy.com/article/milky_a_free_vector_icon_set_part_1/
  2. 2 http://min.frexy.com/article/bright_a_free_icon_set/
  3. 3 http://www.smashingmagazine.com/images/pencil-tutorial/source.zip
  4. 4 http://www.smashingmagazine.com/images/pencil-tutorial/source.zip
  5. 5 http://www.smashingmagazine.com/images/pencil-tutorial/source.zip

↑ Back to topShare on Twitter

Vu Tran and Min Tran are the creative minds behind Frexy. When not pushing pixels, they enjoy sharing their ideas through Min’s blog and working on an upcoming free book titled “Learning icon design in 30 days”.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    I agree: the lower part pf the pencil is not consistent with the upper part, and makes no visual sense.

  2. 2

    Perspectives are can be ignored when designing icons as long as the full shape of the object becomes visible and more identifiable. Perspectives are good for accurate representation not symbolic and icon by nature is symbolic. Also by design icons tend to exaggerate certain features just like in cartoons or comics. Again the idea is representation not reality.

  3. 3

    awkward icon, can’t believe someone goes through the whole so-called design process ending up with this “thing”. not worth the time.

    i would rather written “pencil” than used this icon.

  4. 4

    Amazing!!!!!!!!!

  5. 5

    The “sharpened” part of the pencil should follow the same rounding as the metal ring. As it is now, the perspective is very confusing.

    /Phreax

  6. 6

    Son Nguyen Huy

    June 6, 2008 3:05 am

    Awesome

  7. 7

    Great tutorial, will have to try this later.

    P.s. Is it just me or a word is missing in this sentence: “This tutorial is of course not everything you should know about how to master icon design, but we hope that it will help you, particularly if you have just started to learn, or want to learn more about icon design.”?

    Anyway, great tutorial, like I said before.

  8. 8

    Very nice Tut, useful thing, but it’s toooo difficult method of making such icon)

  9. 9

    as PhreaX said, the perspective is wrong … other then that: great tutorial!

  10. 10
  11. 11

    ahh….So that’s why I download icon sets….

  12. 12

    Simple And Relli Awesome!!

  13. 13

    Very detailed, great article.
    After seeing some of the images up top I think it would be cool to see an icon set using just clean pencil sketches.

    Jason

  14. 14

    The “sharpened” part of the pencil should follow the same rounding as the metal ring. As it is now, the perspective is very confusing.

    I agree.

  15. 15

    great tut i’ll do soon ^^

  16. 16

    Thanks your all your feedbacks. Much appreciated.
    @PhreaX: When design an icon, we should optimize it for screen, and pixelation becomes a big issue. Keep the perspective or make the icon fuzzy? it’s a question :) Thanks for your input!

    @Schajee: completely agreed. I know that the perspective is wrong, but to avoid the pixelation effect, I have to break the perspective.

    @sebastian: if you know the better way to create such thing, please share with us.

  17. 17

    really nice tut!

  18. 18

    I love good icons, really cool to see the process behind it now :)

  19. 19

    It only takes 80hrs to build 1 pencil icon, awesome. :p

  20. 20

    @Frank

    It only takes 80hrs to build 1 pencil icon, awesome. :p

    You can call this is a tutorial, but to me, it’s rather a process. I want to show you the typical process of creating an icon. It could be more simple, or more complicated. Actually, I can make the icon within 15-20 minutes, but it takes me 3 days to write what I did.

  21. 21

    that looks complicated ;).
    But great tutorial, when I have the time I will definitely try it.

  22. 22

    Thanks for the information.

  23. 23

    @Sylvia: sometimes lengthy articles make us feel it’s complicated. But if you follow the tutorial, you will realize that things are very simple. In stead of showing “steps by steps”, I try to explain a lot about the do and dont, as well as some basic principles of icon design.

  24. 24

    actually, my pencils sharpen like that all the time.

  25. 25

    I wouldn’t consider myself a designer, but I’m heavily involved with projects that require design work. I am always amazed what was is possible, and what it takes to achieve it. So much respect for you designers!!

  26. 26

    amazing tutorial, thanks!

  27. 27

    Too complex step by step tutorial for a pencil icon. Different icon artist use different method on creating their icons. Nonetheles the tutorial is great :-)

  28. 28

    useless…

  29. 29

    Too complex step by step tutorial for a pencil icon. Different icon artist use different method on creating their icons. Nonetheles the tutorial is great :-)

    If I just listed all the steps, the tutorial will look not shorter. But I DON’T think that designing a beautiful icon is just a step-by-step process. I write much about the DO and the DON’T, common mistakes, conceptualization because I think it’s very important, especially you design a set of icons. Keeping the consistent concept, colors and lightning through all the icon is the real challenge.
    @eduardo: if Smashing magazine has the “ignore” button, it will be useful for both of us.

  30. 30

    eduardo (June 6th, 2008, 8:11 am)

    useless

    sebastian (June 6th, 2008, 4:30 am)

    awkward icon, can’t believe someone goes through the whole so-called design process ending up with this “thing”. not worth the time.
    i would rather written “pencil” than used this icon.

    i’m tired of that kind of people.
    aren´t you?

  31. 31

    @Vu and Min Tran – I see you guys have been catching a lot of slack from some people, but all i have to say is……where are their expertly crafted, full icon sets? You two do an amazing job and I really appreciate this writeup. i am rushed for time right now, and couldn’t read it all, but I look forward to spending the evening with my sketchbook and laptop by my side. You’ve inspired me to take the leap into icon design, a place I’ve been dabbling for a few months now.

    Thank you.

    -Zach LeBar

  32. 32

    I have Illustrator CS3 and have some troubles following the steps, but it’s not a big issue, i can complete the tutorial. Thanks a lot for sharing knowledge! =)

  33. 33

    Great tutorial. I just started working on a set of icons for a small personal project. In case any of you are struggling with detail loss at smaller sizes (24×24 and 16×16) make sure to also check out Dave Shea’s Icon Design Series.

  34. 34

    Seeing all this effort, I’m more amazed (and grateful) that people give them away.

  35. 35

    Sebastian has nothing useful to offer. It’s easy to crap on someone else’s generous offerings when you have no knowledge of your own. Ignore the troll.

  36. 36

    @ Benito Camela

    Yes, I’m plenty tired of that type of person too. Seems like them and their sad ilk are always hovering close to any type of tutorial online and spouting off with scorn – a tired implication being they could have done it better. But I guess that’s one of the perils of opening up articles for feedback: the lowest common denominator inevitably comes out to bray.

    @ tutorial creator:

    Thank you for the step-by-step. I find the quality of instruction top notch. There is plenty there for novices to intermediates to learn from. It’s inspirational.

    (And for what it’s worth, I think the perspective of the pencil works wonderfully.)

  37. 37

    Nice tutorial.
    I think some people here are exagerating in criticising.
    Altough the icon could not be “that” perfection, I cannot agree with that guy who said: “I’d rather write ‘pencil’ instead of use this icon.” People coudl be more ‘construtive’

    *Pardon for my english.

  38. 38

    the bottom part, the upper part… yes it always might be batter but the tutorial rulez!

  39. 39

    the bottom part, the upper part… yes it always might be better but the tutorial rulez!

  40. 40

    The internet approves :O

  41. 41

    Incredible article. Very useful tips which can be applied to hundreds of other situations too.

  42. 42

    @kelly smith: you are fucking right. in fact it can be applied to just everything. hell, my life has changed completly after working thru this tutorial. great stuff anyway…

  43. 43

    @ Vu Tran and Min Tran

    I really appreciate your hard work. Not everybody offers for free its knowledge and the fruit of its work and experience. Both of you deserve a lot of gratitude.

    After a quick reading of your post I’m pretty sure that these article will help me to improve my designing and technical capabilities in Illustrator. Other people will benefit with this post too.

    So please, keep sharing with others your knowledge.

    It would be nice also to have access to your upcoming book “Learning icon design in 30 days”.

    Thank you very much !!
    Live long and happy !!

  44. 44

    great tut…keep at it..!!
    ^.^

  45. 45

    wow! indrecible tutorial.

  46. 46

    Great tutorial, thanks!

  47. 47

    I’m sorry but the perspective projection of the pencil is contradictive and thus makes it look odd. The metal sleeve is projected as if it were looked upon from above, while the edge of the pencil looks like it’s looked upon from below.

    On the other hand, this seem to be fixed in the preview of the icon set. So, an error in the tutorial?
    I’m sorry for sounding like a nitpick, but you’re the one that told us to pay close attention to details :P

  48. 48

    @Andy: As I said above, I ignore this error to avoid pixelation. Of course we can solve this issue, but I save it for another article. This icon is optimized for small size, we can see the “odd” in large size, but look at the smaller size (64-48-32-16), it’s hard to find the error with the perspective.

    The “preview” is the icon I made before this tutorial, it’s a icon of Milky set, and it’s not a part of this tutorial by the way. I want to keep this tutorial more simple than it should. If we write everything about icon design, expect something like 100 page book :)

  49. 49

    nice tutorial. thanks man.

  50. 50

    Thanks for the detailed tutorial. Sadly, too often tutorials leave out key points that leave the learner at a loss as to where to go next in his/her project. I really like what you guys did with this.

  51. 51

    MAN MAN MAN! really great piece of tutorial.

  52. 52

    Alejandro Urrutia

    June 9, 2008 2:18 am

    Thanks for this tutorial i hope to learn with it.
    Thanks Vu & Min!

  53. 53

    awesome tutorial! :>

  54. 54

    Great tutorial…gonna give this one a try when I got some time to kill

  55. 55

    There is something which I would like to add. Always use a canonic perspective while designing icons. Canonic Perspective is a particular view from which the object can be most easily identified.

    For e.g. if you ask 10 people to draw a cup most of them would draw a table top view of a cup with the handle on the right hand side. So that is the canonic view of a cup.

  56. 56

    I’ve been looking for something like this for a while. Thanks so much.

  57. 57

    website designing

    June 15, 2008 10:40 pm

    Very interesting ! a different icon , I think its quit difficult to design a icon like this…….website designing

  58. 58

    That’s a great tutorial. Congrats on the good work. As lot’s of people already said it also has perspective issues… Its not a deal of avoiding pixelation since the only things you would have to do to correct the issue is redo the metal ring to curve the way its supposed to, or taper the body and point of the icon (although that would look weird). I do agree with other opinions that the end result though beautiful, is also very confusing.

    There is something which I would like to add. Always use a canonic perspective while designing icons. Canonic Perspective is a particular view from which the object can be most easily identified.

    milAn has it.

  59. 59

    great! great! great!

  60. 60

    Deepak Kr. Singh

    June 23, 2008 9:38 pm

    Good!
    It is helpfull for me.

  61. 61

    It’s too difficult , but it’s awesome

  62. 62

    Joaquim Marquès Nielsen

    July 1, 2008 3:17 pm

    Thanks a LOT for this tutorial. There really isn’t a lot out there about this subject. Can you recommend any books on icon design like the one you just did here?

  63. 63

    Canonic Perspective?

    Can anyone here not identify that as a pencil?

    What is wrong with you people.

    On the other hand the tutorial is almost too indepth for what is it. Especially too indepth for what the result is.

    In addition to this there are quite a lot of other tutorials for icons like this. Nice tut but most peoples reactions are a bit over the top.

  64. 64

    Web 2.0 development

    August 13, 2008 6:53 pm

    Great tutorial for website designers to creat cool icons for their website designs.

  65. 65

    This is _so_ nice. I’d rather say chibi; but I don’t want to. Excellent!

  66. 66

    I just want to say how much I appreciate you taking the time to write such a thorough snapshot of your process! I’ve always had great respect for those who can make something simple, beautiful, and best of all recognizable. You have inspired me to try this out, and apply it to my future icon work. Thank you for sharing!

  67. 67

    this is best i like this type toutorial

  68. 68

    Being a beginner, this type of tutorial is much appreciated!! How much time and frustration you have spared me! Thank you for your generosity in posting this!

  69. 69

    geothermal heat pump

    October 21, 2008 3:37 pm

    Excellent. I have to say that being able to create such icons from illustrator you need to have painting skills…it is much different from photoshop..great stuff..bookmarked..

  70. 70

    What is objective art?

    Art can be divided into two parts. Ninety-nine percent of art is subjective art. Only one percent is objective art. The ninety-nine percent subjective art has no relationship with meditation. Only one percent objective art is based on meditation.

    The subjective art means you are pouring your subjectivity onto the canvas, your dreams, your imaginations, your fantasies. It is a projection of your psychology. The same happens in poetry, in music, in all dimensions of creativity – you are not concerned with the person who is going to see your painting, not concerned what will happen to him when he looks at it; that is not your concern at all. Your art is simply a kind of vomiting. It will help you, just the way vomiting helps. It takes the nausea away, it makes you cleaner, makes you feel healthier. But you have not considered what is going to happen to the person who is going to see your vomit. He will become nauseous. He may start feeling sick.
    Look at the paintings of Picasso. He is a great painter, but just a subjective artist. Looking at his paintings, you will start feeling sick, dizzy, something going berserk in your mind. You cannot go on looking at Picasso’s painting for long. You would like to get away, because the painting has not come from a silent being. It has come from a chaos. It is a byproduct of a nightmare. But ninety-nine percent of art belongs to that category.
    Objective art is just the opposite. The man has nothing to throw out, he is utterly empty, absolutely clean. Out of this silence, out of this emptiness arises love, compassion. And out of this silence arises a possibility for creativity. This silence, this love, this compassion – these are the qualities of meditation.
    Meditation brings you to your very center. And your center is not only your center, it is the center of the whole existence. Only on the periphery we are different. As we start moving toward the center, we are one. We are part of eternity, a tremendously luminous experience of ecstasy that is beyond words. Something that you can be… but very difficult to express it. But a great desire arises in you to share it, because all other people around you are groping for exactly such experiences. And you have it, you know the path.
    And these people are searching everywhere except within themselves – where it is! You would like to shout in their ears. You would like to shake them and tell them, “Open your eyes! Where are you going? Wherever you go, you go away from yourself. Come back home, and come as deep into yourself as possible.”
    This desire to share becomes creativity. Somebody can dance. There have been mystics – for example, Jalaluddin Rumi – whose teaching was not in words, whose teaching was in dance. He will dance. His disciples will be sitting by his side, and he will tell them, “Anybody who feels like joining me can join. It is a question of feeling. If you don’t feel like, it is up to you. You can simply sit and watch.”

    But when you see a man like Jalaluddin Rumi dancing, something dormant in you becomes active. In spite of yourself you find you have joined the dance. You are already dancing before you become aware that you have joined it.
    Even this experience is of tremendous value, that you have been pulled like a magnetic force. It has not been your mind decision, you have not weighed for pro and for against, to join or not to join, no. Just the beauty of Rumi’s dance, his spreading energy, has taken possession of you. You are being touched. This dance is objective art.
    And if you can continue – and slowly you will become more and more unembarrassed, more and more capable – soon you will forget the whole world. A moment comes, the dancer disappears and only the dance remains.
    There are in India statues, which you have just to sit silently and meditate upon. Just look at those statues. They have been made by meditators in such a way, in such a proportion, that just looking at the statue, the figure, the proportion, the beauty… Everything is very calculated to create a similar kind of state within you. And just sitting silently with a statue of Buddha or Mahavira, you will come across a strange feeling, which you cannot find in sitting by the side of any Western sculpture.
    All Western sculpture is sexual. You see the Roman sculpture: beautiful, but something creates sexuality in you. It hits your sexual center. It does not give you an uplift. In the East the situation is totally different. Statutes are carved, but before a sculptor starts carving statues he learns meditation. Before he starts playing on the flute he learns meditation. Before he starts writing poetry he learns meditation. Meditation is absolute necessity for any art; then the art will be objective.
    Then, just reading few lines of a haiku, a Japanese form of a small poem – only three lines, perhaps three words – if you silently read it, you will be surprised. It is far more explosive that any dynamite. It simply opens up doors in your being.
    Unless you are a creator, you will never find real blissfulness. It is only by creating that you become part of the great creativity of the universe. But to be a creator, meditation is a basic necessity. Without it you can paint, but that painting has to be burned, it has not to be shown to others. It was good, it helped you unburden, but please, don’t burden anybody else. Don’t present it to your friends, they are not your enemies.

    Objective art is meditative art, subjective art is mind art.

  71. 71

    That’s great :-)

  72. 72

    What a awesome tutorial!
    To those of you who is making a bad comments about the tutorial, show him a respect!
    Some people are actually putting some effort and time to share their tech.
    Thank you Min~ (It’s weird, my name is also Min)

  73. 73

    I love to have this wonderful site and its features
    Defiantly promote and will also endow with as great orientation for upcoming learners.

    Thanks

    Chand Patel

  74. 74

    great tutorial about desing pencil with photoshop, I don now that photoshop can make it wow.

  75. 75

    thank you for sharing this. _Totally_ helpful!

  76. 76

    Look at the paintings of Picasso. He is a great painter, but just a subjective artist. Looking at his paintings, you will start feeling sick, dizzy, something going berserk in your mind. You cannot go on looking at Picasso’s painting for long.

    This is not true. Picasso is one of the most objective (in the sense you used the word) artists of the 20th century. He never loses connection with nature / reality, always tied to the tradition. Again maybe the most traditional painter in 20th century.

    It’s a very common -but wrong- perception that Picasso paints “freely” distorted, imaginative figures /objects. But it’s understandable as you would need a lot to interpret it accurately.

    And if you do, you’ll see, looking at a Picasso is as refreshing and easy to the eye (and mind) as looking at a Velazquez, Raffaello or Giotto.

  77. 77

    great tutorial it is very helpful, thanks
    vectorilla.com

  78. 78

    Peter Spicer-Wensley

    May 3, 2010 2:41 am

    Wonderful detailed notes – very helpful for those of us who need guidance on designing our icons and to know when it’s getting too hard and call on the pros – which you guys obviously are. Enjoy your blog and your work on icon eden. Keep up the great design!

    I shall use these with my high school design class to give them a more concrete idea of the design process – which is too often overlooked and is hard to teach.

    Best wishes. PeterSW

  79. 79

    What an amazing tutorial. You have put a lot of work into explaining the process and thought behind the design, not just how to draw it. Well done!

  80. 80

    Thanks for the tutorial. I bookmarked it not because I want to get into icon design but because I want to learn more about designing in Illustrator. So seeing how you created the icon taught me things I didn’t know about using paths, gradients, etc.

    The only criticism I have (other than breaking the perspective, I do realise why you did it) is that you also did something that always makes my heart sink every time I see it happen – you got the lighting wrong.

    “Look at the final outcome. While the light direction comes from above, the lower part of the pencil body is lighter than the upper part. Yes, it’s the reflection of light.”

    Looking at the finished icon, it’s clear the light is not coming from above. The light direction appears to be coming from the direction of the viewer straight at the pencil. Try pointing your finger directly at the screen and that would be the direction of the light, which means you’ve also got the shadow wrong.

    Other than that, good tutorial! Keep ‘em coming!

  81. 81

    Great article, my only question is what to do with the illustration once complete? what software or plugins are out there to take the drawing and bring it to it’s final form ready for use? I can design something in photoshop or illustrator but then I’m stuck reading page after page about how someone created an icon (not meaning you) but no details on how they got it into it’s final format.

  82. 82

    Hi,Shall i feature this in my website too providing the direct link to this post :)

  83. 83

    I will be honest….. Every art requires effort…… either good or bad…… but this tutorial ends up with a very BAD end result……..

    To explain my above statement……. There are 2 broad categories of icons…….. Realistic Icons (generally seen in Mac OS X) and second one is Pixel icons (which are perfect to the last pixel are are of small sizes)

    The above icon falls in none of the above categories……… as it does not follow any rule of lighting and shadows……… Of course there are many other type of icons but the above example is a bad one!……… Just because you know PS or Ai doesn’t mean that you should make an icon……….. Seriously, i’m trying to help you because this won’t fetch you money in the long run!

    So any body reading this “lecture”……… before jumping to making icons……….. learn about lights and shadows and use pencil to sketch objects from real life and understand how shadows work!!!! PLZ FOR GOD’S SAKE!

    Because icon making is anything…… but easy!!!!!

  84. 84

    Great work and effort which is sincerely appreciated.

  85. 85

    Thanks for giving all the detailed updates.

  86. 86

    Hello! Where can I find or download your book?

  87. 87

    Haha! Well said sir!

↑ Back to top