How to design pixel perfect icons

1 Comment

How to design pixel perfect icons

Pixel Perfect icons display in sharp, crisp shapes. The benefit is that they won't show as much anti-aliasing when rendered. As Retina Displays and high resolution monitors improve, the need for pixel perfect icons may decrease over time. But for now, your clients may request them. Hopefully this discussion will help you along the design process. 

For the purposes of this tutorial, our icons will display at 48 x 48 pixels. We will draw the icons 4x bigger to make things easier. I'm using Adobe Illustrator CS6 on Windows 10 – your version of Illustrator may look slightly different.

The most important step is to set up your document correctly before you begin. It takes a few minutes to do it right, but it will save you time over the long run.

To download a pixel perfect grid (with a sample icon included), scroll down to the bottom of this page.

Ready? Here we go:

Step 1: Create a new document

In Illustrator, go to the File Menu and select New... (Control/Command N).
1. Set your Document Width and Height to 196.
2. Set Units to Pixels.
3. Set Color Mode to RGB.
4. Most importantly, choose Align New Objects to Pixel Grid.

PP Step 1

Step 2: Set document preferences

Next, from the Edit Menu select Preferences > General (Control/Command K).
1. Set your Keyboard Increment to 4 px.
2. Change your Corner Radius to a multiple of 4. In this example we're using a radius of 8 px.

Depending on how you stylize your icons, enter a value of 0, 4, 8, 12, 16 etc. Remember that the number you choose will be divided by 4 when the icons display at their final size. So our 8 pixel radius will render at 2 pixels on the screen.

3. Turn off Scale Strokes & Effects.

PP Step 2

Step 3: Units

Still in Preferences, choose Units.
1. Set General to pixels.
2. Set Stroke to pixels.

PP Step 3

Step 4: Guides & Grid

Still in Preferences, choose Guides & Grid.
1. Set Gridline every to 1 px.
2. Set Subdivisions to 1. You can also use 4, 8 or 16. Play around and see what works best for you. 
3. Select Show Pixel Grid
4. Select OK

PP Step 4

Step 5: Set up Views

Next, go to the View Menu (Control/Command Y).
1. Select Pixel Preview.
2. Select Smart Guides.
3. Select Snap To Pixel.
4. Select Snap To Point.

PP Step 5

 

Step 6: Align Rulers

1. Still in the View Menu (Control/Command Y), select Rulers > Show Rulers (Control/Command R). 
2. Select Change to Global Rulers (Alt + Control/Command R). Note: If you see Change to Artboard Rulers, you're already viewing Global Rulers.

PP Step 6A

Zoom into the top left corner of your document. Make sure the horizontal and vertical zero coordinates align with the upper left corner of your document and the document grid.

PP Step 6B

If zero coordinates are not correct, the upper left corner of the document isn't aligned with the grid:

PP Step 6C

Reset the Ruler Origin by grabbing the square where the Vertical and Horizontal rulers meet (in the top left corner). Drag to the upper left corner of your document.

PP Step 6D

Step 7: Draw a grid

Click on the top ruler and drag a horizontal guide to 98 pixels, then click the side ruler and drag a vertical guide to 98 pixels.

PP Step 7

Next, draw a circle: With the Ellipse tool selected, Alt/Option key and click in the center of the document. Enter 176 Width and 176 Height. Then with the circle selected, choose View Menu > Guides > Make Guides (Control/Command 5):

PP Step 8

 Your document should look like this:

PP Step 9

Next, draw a square. With the Rounded Rectangle Tool tool selected, Alt/Option key and click in the center of the document. Enter 152 Width and 152 Height, 16px Corner Radius. Then with the square selected, choose View Menu > Guides > Make Guides (Control/Command 5):

PP Step 10

Create more rectangle guides:

Rounded Rectangle Tool

With the Rounded Rectangle Tool tool still selected, Alt/Option key and click in the center of the document. Enter 128px Width, 176px Height, 16px Corner Radius. Make it a guide as before.

Create another Rounded Rectangle with dimensions of 176 Width, 128 Height, 16px Corner Radius. Make it a guide.

Rectangle Tool
Next, with the Rectangle Tool (M), create a 192 x 192 rectangle. Make it a guide. This is your live area. Keep your icons within this 192 x 192 dimension, as Android will add a 1 pixel border around your icon shapes.

Ellipse Tool

Finally create a 90 x 90 Ellipse in the center.

Once you've created all the guides, your document should look like this:

PP Step 11

Open the Layers Window (Window Menu > Layers). Double Click on 'Layer 1' and rename it to 'Grid'. Click to the right of the Visibility Icon to Lock the layer:

PP Step 11 Layer Palette

Step 8: Let's Draw Some Icons

Finally it's time to draw some shapes. No matter how many icons you're designing, draw them all in one document. Each icon on its own layer. This will make it easy to export the set when they're finished. Before we start here's some tips:

  • Create a new layer for each icon. 
  • Rename each layer to the title of your icon.
  • Keep the style consistent (Stroke Weight, Corner Radius, etc.).
  • Use the guides as reference, be creative and make your own designs unique.
  • Maintain the unit ratio of 4:1. For example, a 4 pixel stroke weight will display at 1 pixel in the final output.
  • SAVE often!

Open the Transform Window (Window Menu > Transform). Align to Pixel Grid should be checked. As you draw shapes, it's important to keep your X and Y axis numbers as whole numbers, without decimal points. Also, make sure your Width and Height don't have decimal points.

PP Step 12

If you're having trouble keeping the shapes aligned, try unchecking the Align to Pixel Grid box in the Transform Window. Also, turn off Snap to Grid in the View Menu. Then edit your shapes, just remember to reset these settings before continuing.

PP Step 13

If your icons are outline strokes, select Align Stroke To Inside from the Stroke Menu.

PP Step 14

Step 14B

Step 9: Exporting

Once you're satisfied with your icons, it's time to save them as SVG files. By saving your artwork into SVG format, your icons will scale well for responsive viewports. Illustrator doesn't do a great job of this, so I highly recommend this method:

1. Quit Illustrator. Go to: http://www.tbyrne.org/export-illustrator-layers-to-svg-files

2. Next, download the javascript file and save it into your Illustrator Scripts folder. For Windows 10, it's somewhere like: C:\Program Files\Adobe\Adobe Illustrator CS6 (64 Bit)\Presets\en_US\Scripts

3. Open Illustrator. Go to File > Scripts > MultiExporter.jsx

4. Select SVG from the Export Format dropdown menu. Choose an output directory and click Export. Each layer in your document will be saved as an individual SVG. You can also export the layers as PNGs, JPGs, etc.

Why use this method?

Typically an SVG should be about under 5k maximum file size. Illustrator will give you headaches if you simply select File > Save As. Zoom in to your document, notice that many times the shapes do not align with the artboard. Selecting Object > Artboards > Fit Artboards To Bounds WILL NOT fix the problem. 

A typical response to this dilemma is to select Use Artboards in the Save dialog box, but that will make your file sizes extremely large (even up to 400k or more), which is too large.

By using the MultiExporter Script, the icons are saved into individual files, with each artboard cropped to the shape of the icon. 

About the Grid

The grid we're using in this tutorial is based upon the Google Product icon grid. Feel free to download our grid here (.EPS, AI v10):

Download the Grid


Also, check our our tutorial on How To Create An Icon Set.


Vector icons a la carte from only $.99

Samples

Shop from hundreds of high quality pixel perfect vector icons, giving you a consistent look for your project. No subscriptions. Great prices.

Pixel Perfect Icons


If you like this, please share!


1 Response

vaibhav jadhav
vaibhav jadhav

March 27, 2016

Thank you so much.. :)

Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →

Why attractive design works better
Why attractive design works better

It's no secret that people are drawn to attractive things. Keep reading to learn more about why attractive design is so important.

Continue Reading →

Here's what you need to know about brand psychology
Here's what you need to know about brand psychology

Branding is important to any business. So it's important to understand what attracts people. Read on to learn what you should know about brand psychology.

Continue Reading →