Pixel perfect icons

The design is greatly affected by small details. Well designed and easily understandable icons are essential to make our application attractive and friendly. The icons we create will be finally rendered on screens with a given resolution. Some techniques can help us to create icons that render well on different screens, giving our design a more polished result.

Icon from Material Design with their points placed on exact positions and with curves realized at 90 degrees angles (source: Screenshot from Illustrator)

The first thing we must do is choose one or several sizes of artboard for the icons we create for our application. For example, we can choose a size of 24x24dp for the general icons of our application and create a secondary size to represent certain states of some elements of 16x16dp.

In the same way, we must always work with a line thickness and similar types of curves throughout the icon family. This will help us achieve a uniform and elegant visual result.

1px lines render different than 2px lines when exported to @1x (source: Screenshot from Illustrator)

Your vector design software usually allows the option to draw on a grid at the pixel level. When drawing polygons and lines, they must begin and end in positions that are multiples of 0.5px of our grid. Depending on the size of our lines and polygon borders, they will render better using integer positions or intermediate pixels. Both Illustrator and Sketch allow us to visualize a grid that corresponds to the pixels of our artboard. If our lines are to measure 2px thick, it is advisable to use rounded pixels in whole numbers, whereas if our lines are to measure 1px thick, intermediate pixel positions will give us better results when rendering.

Draw the diagonal lines from exact positions so that they render well (left) and prevent the line from being rendered by dividing the weight between two lines of pixels (right) (source: Screenshots from Illustrator)

The diagonal lines will also be affected by the position of their initial and final points. The lines made in multiples of 45 degrees produce very homogeneous results visually.

Curves that end in straight lines following axes are rendered nicely (right) (source: Screenshots from Illustrator)

In vector programs, we can draw curves using direction lines. The resulting curve will be tangent to the drawn line. The way we draw this tangent will also affect the final result of the icon. Curves tangent to lines parallel to the vertical and horizontal axes will produce more polished results.

Keep in mind that each curve is affected by both the start line and the finish line. Visualize the icon with the pixel preview option of your software; it will help you to visualize the final result before exporting your assets.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.0.61