IconEden.com

the blog of

IconEden’s blog

Vu Tran September 3rd, 2010

Perspective in Icon Design – Part 2: Know-hows 7

In Part 1 – how to draw a Paint Bucket icon, we mentioned one vital aspect in icon design: perspective. So how can we know or see in what perspective an icon is drawn? How many perspectives are our icons really based on? What are the strong and weak points in taking each perspective into icon design? In this second part, we will take a close look at these issues.

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.

For icons, particularly for its usability, simplicity is required. Because of that, we need to use a single object that captures the icon’s action or represents the control, and the object should be a basic and primitive shape. When it comes to light and dark, every object in the world is generally displayed or shown as basic shapes as cube or rectangular prism, cylinder, cone, sphere, etc. If you can’t get to an accurate depiction of a real shape of icon, then basic shape is what you need to get a good hold of 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.

Before drawing an object in paper, use your mind to “picture” the basic shapes of the object. For instance, a pen should be pictured from a cylinder, a keyboard or monitor from a rectangular, a mouse from a half of oval.

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.

Simply put, perspective allows you to represent an actual object in an attempt to deceive its depth, since perspective drawing is the technique we take on to represent 3D images on a 2D plane. Perspective is not a natural rule. It’s an artificial or “fake” technique to deceive the eye, and it’s not ever a dime trick. The well-known perspective techniques that have been used at the present day were found and developed hundreds of years ago. This can be seen through myriads of classic masterpieces passed down to the posterity.

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:

  1. One-point perspective
  2. Two-point perspective
  3. Three-point perspective

Thanks to a bunch of articles and topics on perspective and how to draw in perspective in the net, there’s no need for us to present them all here. Anyway, this and this are good resources for you to refer to first.

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.

As our icon is illustrated in a perspective, it must be affected by declination lines. That means the icon is generally made up of lines oriented at a 25 degree angle or bigger. There’s nothing to worry about if the icon is in vector format, but when you export it to a PNG image, especially in smaller sizes, the pixelation should occur in the image file. (That is, the edges of the icon will appear jagged).

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.

Icon in one-point perspective (also known as “straight-on icon”)

How can we know if it’s a straight-on icon? It’s very easy to find them thanks to their popular appearance in everyday softwares or websites. Let’s take our favorite freebie “Milky” for a demo:

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.
  • Unnecessary to redesign at 16 x16 pixels.
  • Easy to pack an iconset in this same perspective.

Disadvantages:
  • Hard to create large-sized icons that have few details. (Common sizes for icons in one-point perspective are 48×48, 32×32, 24×24, 16×16 pixels).
  • 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 not sharp for small icons to be in this perspective (24×24 or 16×16 icons will need to be redesigned).
  • 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.

This post follows up the tutorial series “Icon Design Made Simple“. Followings are the parts of the series:

  1. How to Create a Simple Button Icon in Adobe Illustrator
  2. Adobe Illustrator’s Tools and Palettes Used Most for Icon Creation
  3. How to Create a Simple Stroke Dashboard Icon in Adobe Illustrator
  4. How to create a realistic globe icon
  5. How to create a glossy Network icon
  6. Perspective in Icon Design – Part 1: Draw a Paint Bucket icon
  7. Perspective in Icon Design – Part 2: Know-hows
  8. Lighting in Icon Design (revisited)
  9. Material, Coloration and Gradient in Icon Design (revisited)

P.S. You might as well read our first-ever guide “Drawing A Pencil Icon” already published on Smashing Magazine. (Again, many thanks to SM guys for this opportunity).

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?

Title

There are 7 comments so far.

  1. Rohhit Agarwal says:

    this is the best

  2. Katie says:

    @fontface and other tools that lets you experiment with non-web-safe fonts are great, but I really couldn’t read this article. The web font quality is pretty bad – maybe try another one?

    • Min Tran says:

      Since most of our readers are designer, we decided to go with Typekit. We hate using Georgia, Arial, Verdana,… because they’re too boring. The problem is not either the typeface itself or the Fontface method. Text doesn’t look good due to poor text rendering engines of the operation systems/browsers.

      You should turn on ClearType if you’re using Windows XP.

    • Radim says:

      IMHO font except of parts in italic are ok. Italic parts dont fit to design. Its hust my opinion.

  3. Saneef says:

    The sketch shown for “One-point perspective over horizon line”, is not one-point. It’s in two-point perspective.

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