Pixel Perfection in Icon Design (revisited) 1

Look at simple icons, you might think it’s easy to create, and you might ask why it’s supposed to do the way we are doing. If you ask whether there was any other way to do, we say “Yes”. If you say, “I know other techniques and what if they can help achieve my desired result”, we will say “It’s okay, too”.

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.