Complete Guide to Pixel Perfect Icons

Time saving tricks and pitfalls to avoid to create crisp icons for user interface design. While some of the topics are specific to Artboard, this guide will help you create pixel perfect icons regardless of which vector software you use.

Tutorial Details

  • Program : Artboard 2
  • Difficulty: Advanced
  • Topics Covered: Graph Paper, Styles, Slices
  • Estimated Completion Time: long

Open the sample file to look at each step in action…

 

About the icons in this tutorial… We recently needed a whole new batch of user interface (UI) icons for the second generation of our popular cartography app, Ortelius. You’ll see a few of these unique map design icons in this tutorial.

Pixel Perfect Grids

Artboard delivers with a ‘Pixel-Perfect-Grid’ template under ‘Graph Paper’ with similar settings as shown in the steps below. That’s a real time saver. To set up a similar grid and add guide lines, follow the steps below:

Drawing Setup: Follow the Pixel Grid

The first step is to properly set up your drawing so you can easily snap paths and shapes to a single pixel grid and guide lines. Trust me, time taken here is worth it. Once you have your drawing setup just how you want it, you can save it as a User Template if you’ll be creating more icons layer.

Drawing Size & Units

Choose ‘File > Drawing Size & Units‘ from the Artboard main menu. Choose ‘Points’ from the Units drop-down menu. Your drawing canvas size will depend on how many icons you are making and if you want additional room for drafting your designs.

Graph Paper Settings

We are making 19×19 pt icons for our UI. Here we create a single pixel grid with 1/2 pixel increments (i.e., 2 divisions). Choose ‘File > Graph Paper Settings‘ from the Artboard main menu. Choose the following settings:

  • Span = 1 pt
  • Divisions = 2
  • Major every: 19 spans (or size of your icons)

Optionally, you can change the grid line colors. Here we’ve created a blue palette. Check ‘Grid lines Visible’ to turn on the graph paper layer (the layer can be made visible in the Layers Tab, as well).

This gives us the framework for making our pixel perfect icons.

Adding Guides

Finally, guides help you more quickly layout your icons, particularly if you are making several. Choose ‘View > Show Rules‘ in the Artboard main menu to enable adding guides. To add guides, press and drag your cursor from the top or left Ruler onto your canvas.

Hold the Shift key while dragging guides to snap them in even increments to your graph paper.

When we setup our drawing to create multiple icons, we like to layout several guides. Here we’ve placed guides every 19 pixels (we are creating 19x19pt icons). Then we placed a guide 1 pixel inside each edge, and a guide in the center of each.

Since we are creating 19x19pt icons, our center guides align with the 1/2 pixel division.

Create Your Styles

We prefer to have our style palette defined ahead of time and saved in a User Collection. This speeds the work and helps ensure consistency among multiple icons and different drawing files. Apple’s Style Guides allow for color and template icons. Template icons use a single solid color (black) with varying levels of opacity.

We’re creating template icons and have included our basic style set in the tutorial sample file.

How to Make Crisp Clean Icons

Search online and you’ll find a lot of terrific tutorials on icon design. It’s much harder to find detailed instructions that help you achieve terrific results. Use the steps below to make crisp clean icons every time:

Why Icons Look Fuzzy

why-icons-look-fuzzy-pixel-vector-icon-design

You’re drawing with vector software, and everything looks great, right? But when you export your icons and place them into your web page or app UI they sometimes looks a bit fuzzy. What the @#$%?

Fuzzy results can be the most confusing, and frustrating, part of icon creation.

Here’s why. When you place an icon graphic in an app UI, its placement is aligned precisely to a pixel grid for on-screen display. If your artwork is not also aligned to the pixel grid, there will be a misalignment and the result is a fuzzy looking icon. Not what you want to see for all your hard work.

For consistent results, it’s important to properly align your graphics to the grid cells. The smaller the icon, the more important this alignment.

Snap Settings

Artboard’s ‘Snap To Grid’ setting make alignment easy. When Graph Paper is visible, Artboard makes ‘Snap To Grid’ active by default. To toggle snapping on/off, click the setting in the toolbar. As desired, the default snap setting can be disabled in the Artboard Preferences.

Stroke Widths & Aligning Paths to Pixel Grid Cells

Stroke width is measured out from the center of its path, so a 1-pt stroke width measures 1/2-point on either side of its center. To align a 1-pt path on the pixel grid, position its center on the 1/2pt division of your graph paper. A 2-pt path should be centered on a main grid line, and so forth.

HINT: To simplify snapping to the pixel grid, we often use long narrow shapes in place of straight paths.

Don’t Be Fooled by Size of Shapes

As described above, stroke width is measured out from the center of its path. In this example, the first square has a stroke and fill style. Even though the square measures 5x5pt in the Geometry Tab, we can see by the grid cells that it covers 6×6. In this case, the stroke adds 1/2pt to all sides. The next two squares do not have a stroke style, thus they measure as expected.

While all the squares correctly align to the grid and will produce sharp results, this is something to consider when working with shapes and styles. As needed, style properties are available that let you clip the stroke to the inside or outside edge of its center.

Full Pixel Spacing

Likewise to path width, where you have space or gaps between objects in your icon, use full pixel spacing when possible.

Angles, Circles and Squiggly Shapes

Objects that can’t follow the pixel grid require compromise. Do your best to align inside and outside edges of circles to the pixel grid. Use right-angles when posible.

Layout Your Slices for Export

If you are creating multiple icons, Slices are where the magic happens. This feature lets you set up areas for export precisely aligned with the pixel grid at your desired icon size. You can name each Slice (which can be used for file names when you export), and export one or many in a batch. Here’s how to set up your Slices:

Make the Slices Layer Active & Visible

To make Slices the active layer, click onto Slices in the Layers Tab. The layer should become visible at that time (you should see both the “eye” icon and the round “active” icon with the highlighted layer). To add slices, make sure the layer is both active and visible.

When the Slices Layer is active, the tool palette changes to show only the Select and Slice tool.

HINT: You can also make the Slices layer visible by clicking the eye icon while a different drawing layer is active. That can be helpful if you want to view your slices while drawing.

To Add Slices

Draw a Slice for each icon you will export. This example shows a 38×38 pt Slice. As needed, choose the Select tool and reposition your Slice. Slices always precisely align to the pixel grid. Here’s how:

  1. Choose the ‘Slice’ tool and draw a slice from the upper left corner to lower right.
  2. The handle in the lower right corner lets you adjust the size, or adjust size in the Geometry Tab.
  3. The Geometry Tab responds by showing the editable Slice properties:
    • Name of Slice
    • Color of Slice
    • X,Y location
    • Width & Height
    • Button to jump to the Export dialog

HINT: Make several copies of a Slice for multiple icons. Draw your first Slice to size, then select and Copy/Paste. A duplicate will be pasted in place which you can then reposition. Copy/Paste and Delete commands are also available in the contextual menu when you right-click a Slice. Each new Slice is consecutively numbered to provide a unique name on export.

Tips for Quick Zoom and Pan

Oh, my eyes, these icons are small. That requires frequent tight zooming in, then zooming out to view all the icons next to each other in context. Artboard has several keyboard shortcuts for panning and zooming. Here are a few we use a lot when creating icons:

  • Double-click the Zoom tool (magnifying glass) to quickly zoom to 100%.
  • Double-click the Pan tool to zoom to fit.
  • Select an object and two-finger tap on the trackpad instantly zooms in on the selected object.
  • Press Z, X, or Spacebar to temporarily activate Zoon-In, Zoom-Out or Pan without switching away from the current drawing tool.

Export

Be sure to hide the Graph Paper layer before exporting so grid lines aren’t included with your icon graphic.

Apple’s Xcode accepts several file types for icons. At Mapdiva, we export our app UI icons as vector PDF images that scale nicely to 200% when needed. If you choose PNG, make sure to select ‘Transparent’ for your background (PDF is always transparent).

Choose ‘File Name – Source Name’ to append the Slice’s name to the file name.

HINT: We’ve reserved some power commands for power users like you. One is a naming code “%%NAME” that tells Artboard to use the Slice name. This can be combined with other text when exporting. For example, to make sure Xcode recognizes the icons are template icons, we add “-Template” to the end of our file name.