How to make pixel perfect icons?

Icon is all about presenting information through graphically. The best practice is to use familiar icons. Icons are created in square base dimension to form consistency. In web these are the dimensions 16×16, 20×20, 24×24, 32×32, 48×48, 64×64, 128×128… which are used most, beside it is free to use any of sizes as your requirements.

In this article I’ll demonstrate how to make pixel perfect icons and used in web for any projects. The software I’ll be using is Adobe Illustrator which is a great vector software from Adobe. I’ll make  60×30 px rectangle in this demonstration instead a real icon because it will give you clear view.

Let’s start.

Let’s create New Document in Adobe Illustrator. From here I’ll be using “AI” for Adobe Illustrator. AI is vector base software so what we create in AI will look better inside AI but once it is upload in web or place inside another raster base software (e.g. Photoshop) the icon or any graphic content will not be looking nice as in AI. Here what we do, we create pixel base document in AI.

While we create New Document there is popup window, in this window you have to expand Advance section which is situated at the bottom.  There are four fields Color Mode, Raster Effects, Preview Mode and Align new objects to Pixel Grid.

1

As in above fig, choose color mode to RGB, Raster Effects: screen(72ppi), Preview mode: Pixel and don’t forget to checked on Align new objects to Pixel Grid.

Now you are in Pixel mode in AI. Whatever you make here is in pixel base. To make pixel perfect you have to grab edge of pixel. Before creating any icons you have to decide which dimension to use in your project because once you created shapes in AI and resize it will make pixel out and it will be really hard to grab pixel edge. It will be better if you decide the dimension first and start creating that is going to be used in the project.

Lets create rectangle box.

2

Oops! This rectangle is not pixel perfect even I checked Align new objects to Pixel Grid. The problem is not because of you but in the software. In AI whatever you create with strokes those strokes is Align center in default so whatever you create, it is not grabbing pixel at the edge. To grab it pixel’s edge you have to change Align Stroke to “inside” or “outside” in stroke panel. You can find under Window menu at top. Window>Stroke. There is no default option to select Align Stroke as “Inside” in Illustrator, hope there will be in coming version.

3

Select your rectangle and make Align Strokes to “Inside” or “Outside” like in above fig. After this the above rectangle looks like this.

4

In this way you make pixel perfect shapes in AI.

If you copy this rectangle and paste in Photoshop as Smartobject, Pixel, it will not 100% pixel perfect. There will be slightly pixel out like in the below fig.

5

Before copying and pasting in another software like Photoshop you have to convert your shape to Outline Stroke. You can convert from Object menu to path and select Outline Stroke like in the below fig.

6

Now you can copy and paste in Photoshop as shape. The result will be tremendous, a pixel perfect rectangle as you desire.

7

Conclusion

In this way you can create pixel perfect icons, shapes in Adobe Illustrator. Remember only straight line will grab pixel perfect that means you can’t create a pixel perfect circle but if you follow these steps to create circle the result will be satisfactory than creating in vector base and export to photoshop.

Hope you find this article helpful. If there is any comments, query you can ask below.

About the author

Niraj Shakya

View all posts

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *