Fig 1. Glossy button creation diagram

Look at Fig 1, you can see that those icons are made from 3 paths. The first path (round) aims to create the icon’s main shape. The second path in half of the round with the curved line is to evoke the button’s form. And the last path is to create the shape of the button look prominent.

In order to cast a shadow, if you’re with Adobe Illustrator CS3, you can draw a path in black and then make the path bit by bit go transparent by using Mask Opacity Mask. However, on Adobe Illustrator CS4, which has already supported the transparent gradient, you only need to pick an available gradient and use it immediately.

Step 1

Create a circle by using the Ellipse tool and use the Color Fill to make it 100 percent black.

Fig 2

Step 2

Go to the Transparency palette’s command menu and choose “Make Opacity Mask”.

Fig 3

Step 3

Click on the black rectangle in the Transparency palette.

Fig 4

At this step, we’re working with a black circle that will act like a shadow. The goal is to make the black shape blur and transparent with the background. The circle you’ve chosen to act as the opacity mask will disappear, but not to worry because it’s still there and just being hidden.

For making the opacity mask, if the mask is in white color the path/group/object will show. By contrary, if it’s in black (with 100 percent opacity), the object will be hidden.

Step 4

Draw one more circle at the position of the hidden one. Fill a Radial gray gradient to that new circle.

Fig 5

However, as you see in Fig 5, there’s still a light black contour wrapping outside, meaning that the black shape wasn’t as blur and transparent as expected. The issue here is that the default gradient in the Swatches palette was not fully black (RBG color = 000).

Step 5

Adjust that gradient to full black. Oh yeah, there it is. The black color now appears to gradually grow faint from the center point and dissolve into the color of the background.

Fig 6

Step 6

Go to the Transparency palette and click on the black circle. Next, select the shadow and press the E key to scale the shadow down so that it becomes a small ellipse.

Fig 7

Still in the Transparency palette, change the opacity of the shadow until you got the result as shown in Fig 7.

In this case, we need to cast the shadow in the shape of an ellipse because the button, in reality, is of the ellipse as viewed from the top.

Voila. Here is the outcome!

Fig 8. The finished glossy buttons

To arrange those icons in Fig 8 in a straight line, first put each button into one group, then select the groups on one row or column and use the Align palette (Shift + F7) to align them.

Please always keep in mind that all the icons must share the same smoothness of surface, the same intensity of light and the same perspective, in order to have an iconset in the same style.

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)
10. Pixel Perfection in Icon Design
11. How to create a glossy button icon (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.

Whatsoever method you choose to follow, please keep in mind that all of your icons should be designed with the same technique, giving a family relationship to them all (involved in color and lighting). The simpler an icon looks, the easier it is to create it. However, to give it simplicity and sensibility, long-time experience is required.

In this article, we continue to deal with some last-but-not-least issues regarded as indispensable post-tasks in icon design: pixelation, resizing, retouching and exporting.

Pixelation

Go to the View menu and choose Pixel Preview to check if the pixelation issue occurs. Set the Pixel Preview at 100% to check whether or not your icon is sharp in Print Preview. If not, you have to refine the icon until the sharpness is seen as desired.

Fig 1. Pixelation check

Resizing

At the size of 256×256 pixels in Preview mode, we find no blurriness in the icons. However, when scaled down to smaller sizes, especially from 64 x 64 pixels or lower, the icons will lose their sharpness or visual clearness.

Fig 2. Resizing

Retouching

Issue 1

The shadows for those icons in Fig 2 were created by one path and the Gaussian Blur effect. (Go to affect/Blur/Gaussian Blur). Since we kept  values of the effect at default, the loss of visual clearness would inevitably happen.

Fig 3. Retouching (issue 1)

Solution:

Select the shadow path. In the Appearance palette, double-click  on the Gaussian Blur fx (shown in Fig 3) and change the Radius value until the result is achieved as desired.

Issue 2

Let’s say, you have a path of 3×3 px (9 pixels in total) and you scale it down to 75%, so there is 6.75 pixels left. At this scale, the pixelation problem will occur and this causes your path blurry.

Fig 4. Retouching (issue 2)

Solution:

What to do is snapping this path tightly in the size of pixels.

Issue 3

At a small size, quite a lot of paths are invalid, because these paths that appear “behind” the icons will cause jagged edges for our icons.

Fig 5. Retouching (issue 3)

Solution:

All you have to do is remove those useless paths.

To get rid of pixelation, what tool do we choose to use?

Let’s re-wake this up. We see some designers on the net saying that they like to use Fireworks or Photoshop to draw icons. However, Adobe Illustrator could work it out when it comes to pixels.

Every graphic application has diverse strong and weak points, and it depends on the user’s likings, habits and skills. Let’s take Photoshop, it obviously offers you a lot of various techniques to work with, and you can easily pick a texture to give your icon an actual look. However, when it comes to the resizing task, it’s like a pain in the ass. You have to pick your pencil in the pencil mode and re-dot the blurred pixels, or it even seems to go nuts if someone is compulsory to calculate how many pixels are enough for each path, so that their icon will not become blurry when resized. So, this painful process requires lots of experience and takes much time.

If you, for some reason, want to take on Photoshop to create new icons or to retouch your icons without changing transparent pixels, simply select the layer/icon you want to deal with and then click on the clock transparent pixels button in the Layers palette. That’s it, the rest is yours.

Pixelation solved in Illustrator

Exporting

After you’re done with retouching, press the keys combination Shift+O and click and drag on the image you want to export, and then go to Menu > File/Export. Below listed are our recommendations for you:

• The more paths there are in an object, the more time it takes to resize the icon.
• The more effects you apply in your icon (transparency, blending mode, or blur and drop shadow), the more tasks of re-editting and resizing there are you have to do with those effects.
• The more effects you use in the Effect menu, the more time it takes for the computer to render these effects.
• The 3-D effect in Illustrator CANNOT be used in professional icon creation.
• Pixelation problem may become a nightmare for icon designers as they draw icons in two-point perspective (isometric look). That is when the icon size is to be scaled down from 256×256 pixels to 24×24 or 16×16. The amount of time spent to retouch the icon will be in excess of that for drawing it.
• At a small size, you can remove the shadow and any invisible detail until your icon gets sharp as desired.

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)
10. Pixel Perfection in Icon Design

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.

Material in Icon Design

Icons that represent actual objects should look as if they were made of real materials. What you should do is take a close look at various ordinary objects around you and study their characteristics – what materials are they made of? How do they look like in such materials? Basically, the materials we mainly see are plastic, glass, paper, water, and metal.

Your icon would look more real if you could successfully deliver its weight and feel as well as its appearance. To achieve that, there’s nothing better than practice as much as possible.

Learning to draw is like learning a new language. The more you learn, the more your vocabulary is plentiful. A cooker mixes main ingredients with spices and makes a delicious meal. Making an icon follows the same process. That’s to say, if you want to create an icon that represents a real object, you should characterize its material, then mix colors and light with the material. That’s it!

Coloration in Icon Design

We don’t have much to say but these rules:

1. Use color with care to help the icon tell its story. Don’t add color just to make the icon more colorful.
2. Use smooth gradient to give balance and harmony.
3. Use color in relation to the content and status that the icon shows. For example, the color of a paper icon must be white while the color of a floppy disk or binocular must be in black.
4. The color of an icon is sometimes dependent on the style of the other icons when they all belong to one set.
5. Consider using color and its intensity so that the icon must be displayed well in a variety of backgrounds.

What about the coloring tools?

The Color Fill seems to work for icons when working with Adobe Photoshop. Indeed, with this popular graphic edit software, you can easily create shapes by using the Color Fill along with brushes, and you got to have a Wacom tablet or Cintiq already to make this work at ease.

But in our main weapon – Adobe Illustrator, the Color Fill is used indirectly when we want to make gradients or when to fill colors with the Mesh tool.

The Mesh tool is regarded as a powerful tool in the world of vector software. It is used to compose large images with a lot of details and high fineness requirement. Only when the Mesh tool is taken on to draw objects in small sizes of 128×128 pixels or lower, it will become a nightmare due to the pixelation issue. As a matter of fact, it’s so hard to give sharpness to those low-resolution objects.

Gradient in Icon Design

As you already knew, the gradient modes in Adobe Illustrator are Linear and Radial. Each mode has its own strong and weak points. How to take them into use where it needs to be is a question of experiments. From our experience, it’s sensible to use a gradient from white to a darkest color (nearly black).

How to properly use gradient and effectively apply it into icons?

To answer the question well, let’s go back to the lighting topic. When light strikes a surface, the color level of the surface will change upon the form of the surface. This surface can be seen by three basic color levels: brightest, darkest and medium.

• The darkest area does not receive and reflect light.
• The brightest area receives light most.
• The medium-light area is transitional between the brightest and the darkest.

Form and Value diagram

In the diagram, light emits vertically to the surface and creates different color levels, helping us realize the form of the surface.

In Adobe Illustrator, we call it “gradient”. If you’re being in traditional art with a pencil to create many different color levels, then in Illustrator you use gradient to do that. Using gradient to create a form of an object requires long-time experience. Understanding the basic principles of light will help you a lot in reasonably adjusting the color levels of a surface.

To end this article, let’s take a look at how to draw a surface as shown in the picture. We got two ways to work it out.

1. Use one gradient only to create the surface.
2. Or, use two gradients, one gradient to depict surface without reflected light and the other set in the Screen mode to depict reflected light.

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.

In this article, we are going to share with you some aspects of lighting and how to make it fruitful to our icon creation. Meanwhile, there are some new techniques in term of lighting we hope you will discover, too.

Look at all the icons in Fig 1 below. It’s not hard to figure out what object each icon represents, is it? Although they are silhouetted, we can tell them apart by their look and characteristic. How? The first thing we should think of is that it’s all thanks to the light.

Fig 1. Icons in silhouette

Let’s talk about painting first. For those who start to learn and practice painting, there’s one thing we have to admit that they normally take the pencil and draw something by their gut instinct. Naturally, they draw what they see, in lack of drawing essential principles like basic shape and perspective, color balance, lighting rules, etc. Although during their drawing process, they might be able to find in their work some problems, out of which primarily is lighting, and they would likely try to fix that natural issue according to their gut feelings.

Nevertheless, once you grasp the lighting principles, the problem would be partly avoided or solved. That also means you already got hold of the key: the light.

Light in nature

The natural light, generally coming from the sun, is the assembly of myriad of light rays. It’s huge and diversified. When you look at an object, light tells you what characteristics the object bring, in relation to such properties as dimension (height, length, and width), position (close or far), surface (smooth or rough, glossy or matte), nuance (warm or cool), and material.

To make it clearer for you to see, let’s suppose that light from the sun to be parallel, it in reality isn’t so though. We will take a look at this supposition in terms of physics and reality.

Light is grouped into three main properties (or phenomena): reflection, refraction, and absorption.

1. Reflection of light

Obviously, we are able to see objects thanks to the presence of light. But for those that don’t have their own light to emit, why can we still see them? This case can only be explained that it’s totally dependent on the phenomenon of light reflection.

Shown below are the direction of light, which is able to be seen from various viewing angles, regardless of in perspective or in side view. When light is incident on a surface (smooth or rough), it is reflected with an angle of incidence equal to the angle of reflection.

Fig 2. Perspective view (light on a smooth surface)

Fig 3. Side view (light on a smooth surface)

Fig 4. Defuse light (light on a rough surface)

2. Refraction of light

An image that typically represents this property of light is when you drink a glass of water with a straw, hold up the glass and see through it, can you tell what happens with the bottom part of the straw in the water? Yes, it looks bent. That is because the water causes light to “change course” when it moves from air into the water. The light will again be caused to change course when it leaves the water to go back into air. This is called refraction.

Fig 5. Refraction of light

This phenomenon happens when light bends at an interface between two transparent materials. Many things in our livings refract light such as glass, water, air, and plastic.

3. Absorption of light

What will happen if everything in the world just reflects or refracts all the incident lights? Everything then will become dazzling with one single color – the very bright white and that makes it really hard for us to distinguish among things. People call it “color-blind”.

So, how can we see other colors apart from the white? The only answer is that it’s all on account of the third phenomenon: the absorption of light.

The absorption of light happens as light rays with various specific colors are incident on an object. If the light is white and so is the object, then the white light bounces off from the white object, meaning that the white light and the rest are not absorbed but reflected. But in case the object appears blue to our eyes, it means that only the blue light is reflected, and the red, green and other colors of light will be absorbed by the object. So, if the object appears black, then all of the lights will be absorbed and nothing is reflected.

Still there is no absolute absorption of light as regards with all things in the nature. That is, when something is hit by light rays, it absorbs part of the lights and reflects the rest into the surroundings.

Fig 6. Absorption of light

Fig 7. On The Snowy Path by Peder Monsted

Lighting in icon design

It can be said that icon design is one of the most specific illustrating fields, and its specifications are showed up right from icons. That’s to say, icons need to be made in certain ways to bring about both clear, user-friendly, “cool” appearance and wide applicability.

For that reason, the lighting we apply in icon creation is normally an “artificial” light source, created by the artist, making it easy to control the color, intensity, angle and direction of light. By doing this way, it is also possible to avoid troublesome impacts rising from the surrounding environment, like shades and chaotic interactions of natural things.

Light source

The direction from which we view a light source has a profound effect on our perception of it, and on how an icon will appear. There are several light directions to manipulate yet the light source should be slightly coming from above and exhibit between the eye and the icon. This could offer a uniform lighting appearance across all icons and spotlight effects.

Fig 8. Lighting in Icon Design

Shadow

Shadow is strongly relative to light source. Shadow gives an icon dimensionality and reality. It also helps bind the elements of an icon together so that the icon will not look like a patchwork.

That’s almost everything we thought of and shared with you about lighting in icon design at the moment. We also know that this article has yet to explain or give enough details in how to effectively bring lighting and shadow into play, because that’s a hard part to tell in the creation process. So, don’t hesitate to bother us if you have any question or encounter any problem regarding this topic. Thank you for your time reading this.
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.

This set contains all the icons that illustrate building and construction tools and equipments, commonly seen at any construction site today. As shown in the preview picture, you can find the most familiar objects and equipments for a construction work, from hand tools like shovel, hammer, hand saw, pliers, protractor, helmet to various construction trucks like crane, dump truck and many others.

The Construction set is designed uniformly with our current premium catalog, like the Lite collection. All the icons are available in size: 128×128, 64×64, 48×48 pixels, and delivered in various formats as vector EPS 10 including ICO, ICNS, PNG, TIF.

You can use the set for any of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes.

Please kindly leave some comments about “Construction” as well as how you used it. Your opinions are highly appreciated.

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.

Today, we happily announce that another freebie baby just came into our community. Let’s check how it looks like.

Named as “iCandies” and inspired by MAC OS X and iPhone, this baby was born with a view to taking part in the world of modern and fashionable interfaces, embellishing your social media projects with a sleek and geeky style. Whether you are the Apple’s fan or not, this baby should be still a good choice for its contemporary appearance.

The freebie baby carries 60 icons in it. All the icons are taken shape in Round Rectangle and delivered in sizes: 64×64, 48×48, and 32×32 pixels. The formats are EPS 10 and AI.

You can use the set for any of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. Please link to this article if you want to spread the word.

• View icon preview
• Download the set
• Read the relevant post in Smashing Magazine

Please kindly leave some comments about “iCandies” as well as how you used it. Your opinions are highly appreciated.

These days are our happy days in life and work as we are celebrating the IconEden’s 2nd birthday. In addition to some big deals and giveaways event, we also release freebies for the community, and not only at the moment but in the time to come. Keep informed!

$99 All-in-one icon bundle

We have received a lot of emails asking if we could offer an all-in-one bundle like we did last Christmas. So the bundle is up again for those who missed it. At only $99, you will get over 2,000 icons in 17 different sets from our catalog. Grab it while it’s hot, this bundle is available for a limited time!

Daily small contests on Twitter

We will run a small “Tweet and Win” contest on Twitter from September 1 to September 30. You should follow us today!

Weekly freebies

Two years ago, we made an iconset called “Milky” for fun and released them weekly on Min Tran’s blog. Happily, it has been one of the most popular free iconsets ever. We received a lot of encouragements and compliments from the community. This success led us to start IconEden as a dedicated icon design studio. We think it would be great to make another great set like Milky. We already finished some icons for this set and they look as cool as Milky’s. Further details will be announced soon. Stay tuned!

So folks, take time to celebrate with us. Thank you.

On a month basis, we release one or two last iconsets for you guys, and a new pack called “Elements” just came out today. Let’s see what we got this time.

The new iconset “Elements” comes in just like an assorted cookies box, containing 1,758 handcrafted icons packed with 8 categories: Communication, Computer, Database and Medicine, Traveling and Sports, Multimedia and Shopping.

Delivered in 2 styles (Glossy and Lite) with 3 colors (Blue, Green, Kiwi) for each style, “Elements” is aimed to give you endless possibilities for use in your corporate or personal projects. All the icons in Elements are exported in 4 sizes: 24×24, 32×32, 48×48, and 64×64 pixels, and provided in various standard formats: Vector EPS 8, SGV 1.0, ICO, ICNS, PNG, TIF.

Last but not least, the assorted Elements pack with 1,758 handcrafted icons will be right in your hands at only $19. What else do you expect? Check it out here and add it to your cart while you can.

After putting on the new suits for Frexy and Min Tran’s Journal one month ago, today we are once again so happy to present to you with brand new clothing for IconEden’s Blog – a total redesign. This is also a part of activities to celebrate the 2nd birthday of IconEden. Wow, pretty much of great events happening in these two months at Frexy, as the Frexy’s 5th birthday has just passed, and we had some exciting moments in a week-long celebration.

The redesign this time did not take much time as we had thought. In fact, it took one week and a half to have it all from inspirations, ideas to final design versions and crafting. Honestly, we had have a demand to revamp the blog from the middle of the year, but major business projects highly occupied our time, until this moment when the IconEden’s 2nd birthday is coming near (Sep 22 to be exact).

The blog initially was just a piece attached to the site IconEden to do the job as a “spokesman”, which only announces anything important related to IconEden like new policies, new releases or freebies. It was a mere company blog. But since when the blog welcomed more articles in terms of guides or tutorials, we figured out that the blog should serve as our playground.

So, the redesign is also an urge to improve the blog itself to make it become more prominent and attractive. We want it to be spiffier and more friendly, not only for readers to pleasantly read and easily respond but for us to really feel inspired to fill the blog with more great resources than it has had in the past few months.

We would be happy to receive your suggestions, opinions and bug reports regarding this new blog theme. We are willing to welcome any contributions and suggestions or questions for any of our guide articles and we will respond to you as soon as we can.

Hoping you like this new theme as much as we do!