Description

'imageScale': true,
'zoomOpacity': true,
'overlayShow': true,
'enableEscapeButton': true,
'showCloseButton': true,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'callbackOnStart': null,
'callbackOnShow': null,
'callbackOnClose': null,
'centerOnScroll': true
IconEden.com
Home
RSS
Twitter
Search
the blog of
Front Page
News
Releases
Freebies
Icon Design Made Simple
Basic shape
Reminisce about your favorite hand drawings, the comics that you read, the paintings that you admired, they were all beautiful and perfect, werenâ€™t they? But what we should know about them is that they were all depicted from basic shapes like circle, rectangle, triangle, square, and oval, etc. To be able to create masterpieces, a painter should master basic objects first.
Practice in basic shape, however, requires you to put aside your mouse for a while and pick some drawing tools that you like to use, simply a pencil and small pieces of paper. Take them in and draw a few simple shapes like squares, cones, and spheres.
You can save your time by drawing your objects in a small size (probably in a thumbnail). This also helps you avoid annoying lines as well as unnecessary details that may occur in your mind during your drawing. Meanwhile, you should focus on how to make your objects fit inside a piece of paper. This is very important to do as working on icons, each icon has a limited room inside a square, regardless of big or small versions.
It would be better if you could deliver objects as expected. Any requirement here is not that strict. You can make it up to your drawing weakness by using the Illustratorâ€™s Pen tool.
Whenever you canâ€™t depict the light of an object you drew in paper, put your drawing on a scanner or use your digital camera to take a picture of it, then open the file in Illustrator and try to refine its outline and add color to it.
Perspective in general
If any shape you draw looks askew or plane and gives no sense of depth, then perspective is one of the demanding factors you need to grasp. You might be asking why we didnâ€™t speak up this matter earlier. Personally we think, without practice in drawing by hand, you hardly realize your own weak points, from which you will find ways to overcome. Actually, you can find something joyful from hand drawing, like leave hold of the computer and spend some time to mess with pencils and papers; your hand that holds the pencil will get full of pencil grime, and you throw lots of paper into the trashcan. Would that bring an enjoyable feeling to you rather than everyday holding the mouse or grip pen to do vectors? Furthermore, hand drawing helps you enhance your light perception and art sense to a certain degree.
In practical perspective techniques, depth and distance are the key elements that need to be exposed to view. These elements are of vital importance for painters and house/interior/product designers, and for us if we want to get rid of the most primary mistakes as working with vector objects. There must have been some perspective lessons available in basic drawing guides that you might have read, but if you still canâ€™t get over such issues in your drawing then the only thing is you. What is left to do to develop this skill is practice and experience.
Back to our childhood, most of the pictures we first draw normally look flat and funny, and we draw each sole picture presenting the people or objects very close to our heart like dad and mom or house and animals, etc. As time goes on and we grow up, we start to be conscious of a sense of space and distance, using such big elements as houses or mountains and hills in order to create depth and dimension in the paintings. This might happen naturally to us without being taught, therefore the depth and dimension in those paintings could be illustrated in some quite casual way.
In order to make perspective really fruitful to us, it requires that we should know how to use perspective as a means to define and measure the space, depth, dimension and distance of an object. To instantly see what a perspective is, look at the picture below that shows the horizon line and several straight lines starting off from one point. Note that these straight lines are parallel in reality.
One-point perspective under horizon line
Two-point perspective over horizon line
There are three typical types of perspective:
One-point perspective
Two-point perspective
Three-point perspective
Perspective in Icon Design
Up to now, you might feel a bit downcast for having to read too much about this perspective thing. How come so problematic? What is more important in this section?
We ourselves used to ask and feel that way. But learning from our effort and experience, this must be more extensive. Bringing perspective into icon drawing has already been a â€œtacitâ€ and common rule for proficient iconographers.
With one of the three typical perspectives listed above, we think that you could make out an icon that looks OK. However, being an iconographer, any icon we create must look not only nice, but sharp, clear and crisp. If an application uses icons that look blunt and dull, the application will degrade itself. So donâ€™t let your handiwork go wrong caused by the perspective mistakes.
Thereâ€™s a very small chance that this problem could be fixed, even if we have to spend hours to retouch them in Photoshop. So, first things first, itâ€™s necessary to sketch out your concept on paper in order to avoid any slanting line happened to your icon.
Before now, we used to draw many icons with diverse perspectives, and we kept thinking that once you felt confident and sure about perspective techniques and lighting, any icon you made would be fine looking and useful, but that was wrong. After a while, we thoroughly checked them out and took a close look at a significant number of icons shared or distributed on the web, we found out some impacts, and strong and weak points in using these types of perspective.
So, following is our own important round-up related to perspective in icon design, including advantages and disadvantages of each perspective.
Milky iconset in one-point perspective
Advantages:
Easy to implement concepts.
Suitable to small-sized icons that could be in high sharpness.
Simple in design.
Much less perspective concerns than the other perspectivesâ€™.
Easy to create icons that look user-friendly and have a maximum size inside a square.
Easy to pack an iconset in this same perspective.
Disadvantages:
Hard to introduce space and distance to icons.
Hard to catch the attention of users due to the very simple look.
Icon in two-point perspective
You can easily find many of them on your desktop (Windows) or on the Finder (MAC OS), or look at the demo picture of our freebie Shine below.
Shine iconset in two-point perspective
With a feature that allows to show many details of an object, two-point perspective is used to illustrate an icon by these aspects:
Advantages:
Icons in this perspective are being loved the most.
Icon size is nearly infinite.
All known techniques like lighting, shadow, texturing can be utilized for this kind of icon.
Pleasing look, depth-senses and space-senses will be showed up before the usersâ€™ eyes.
Disadvantages:
Itâ€™s not easy to implement concepts.
It requires experience in perspective.
Itâ€™s hard to create an iconset of the same perspective (due to the viewing angle).
Itâ€™s not easy to represent small-sized icons in toolbars.
Icon in three-point perspective
Are you kidding? Yeah. In fact, we was wondering who in the world did use this three-point perspective to draw standard icons. This kind of perspective is just about worthless for drawing icons as we have to represent small-sized objects. Besides, you definitely encounter the pixelation issue caused by three-point perspective.
Okay! Thatâ€™s all about the perspective in icon design we could tell. We know that there must be some errors or unclear points in our explanation for this topic, partly because of our English usage. Please feel free to leave your comments for this article. Thank you for your reading.
How to Create a Simple Button Icon in Adobe Illustrator
Adobe Illustratorâ€™s Tools and Palettes Used Most for Icon Creation
How to Create a Simple Stroke Dashboard Icon in Adobe Illustrator
How to create a realistic globe icon
How to create a glossy Network icon
Lighting in Icon Design (revisited)
Material, Coloration and Gradient in Icon Design (revisited)
As a perfectionist, not only have we wanted our products to be as perfect as possible, we have also wanted to improve the quality of each and every article published on this blog. Any suggestions or contributions to this article are highly appreciated. We appreciate your time.
Like what you read?
Tweet
Title
Subscribe to our RSS
There are 7 comments so far.
Rohhit Agarwal says:
this is the best
Katie says:
Min Tran says:
Radim says:
IMHO font except of parts in italic are ok. Italic parts dont fit to design. Its hust my opinion.
Saneef says:
Min Tran says:
Thanks for your notice, Saneef. We just corrected the caption.
Oridusartic says:
This is such a good explanation for designing an icon, I enjoy reading the article. My problem, I used to forget about perspective when it comes to draw icon. No wonder I always end with a failure. Drawing icon is really an amazing job and more like an architectural work for it needs many details and stability.
Back to IconEden.com
Premium Icons
Icon Club
Free Icons