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:
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.
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.
Still in Preferences, choose Units.
1. Set General to pixels.
2. Set Stroke to pixels.
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.
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.
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.
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.
If zero coordinates are not correct, the upper left corner of the document isn't aligned with the grid:
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.
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.
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):
Your document should look like this:
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):
Create more rectangle guides:
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.
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.
Finally create a 90 x 90 Ellipse in the center.
Once you've created all the guides, your document should look like this:
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:
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:
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.
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.
If your icons are outline strokes, select Align Stroke To Inside from the Stroke Menu.
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
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.
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):
Also, check our our tutorial on How To Create An Icon Set.
Shop from hundreds of high quality pixel perfect vector icons, giving you a consistent look for your project. No subscriptions. Great prices.
Comments will be approved before showing up.