3 years ago

Using Pixels the Right Way

There is no doubt that the future is in device agnostic designs. This means that a design has to work across multiple platforms and devices without discrepancies. Anyone who’s designed an icon and placed it onto the pixel grid only to see it transform into a blurry mess knows that getting things pixel perfect is very important. I’m going to outline some tips for you that I have spent many hours perfecting.

Plan ahead

Know in advance what your design is going to be viewed on. What does the client want, and what does their budget allow them? It is very difficult to maintain perfection over multiple platforms but knowing in advance will save a lot of revision work.

The miracle of SVG

The SVG file format is a great way of keeping your icons crisp at multiple sizes. Ico Moon allows you to turn your vector files into a font that means resizing and scaling is not a problem.

Creating Your Icons

At some point your icon will have to be rendered with pixels. This matters less on retina devices, but even then sloppy design can be noticeable. I have the strong belief that a lot of legibility problems can be solved through the design of the icon. My process for designing an icon is as follows:

Sketch the design

This one should be obvious but I wanted to mention it because so many people skip this step. Illustrator (in my opinion) is not image creating software. Icons only work because of culturally imbued meaning. Through abstraction and repetition we learn and understand that an icon means a certain thing. Creating a simple icon that is not ambiguous is the key. The best way to do this is to look at existing icons, and to show your design to a number of people and ask their interpretation.

Vectorise your design

Check the smallest size your icon will have to work at and create a document based on that size. ALWAYS use even numbers and preferably ones that multiple and divide well. I like to use 24, 36 and 48 squared. All good vector design is based on two things; use as few anchor points as possible to create your design and (unless its a corner) you should not be able to visually identify where that anchor point is.

Tips:

  • Turn on your pixel grid view.
  • Toggle the snap to pixel.
  • Use geometric tools as much as possible, this will help you simplify your design. (At small sizes the eye can identify simple geometric shapes more easily than complex ones)
  • Use the alignment tools.
  • The alignment tools can be used individual anchor points as well.
  • Simplification is key, but there are different ways to do it. Look at the different types and decide where yours will sit.
  • Multiple icons will need to be consistent in style, revisions will be needed - always.

Place in Photoshop

Even if you are only going to use the icon as an SVG this is a good step because eventually your icon is going to be displayed as pixels. Make sure to resolve you icon and make it a single path first. Copy and paste your icon as a shape layer. This will place your icon in the center of your screen and not aligned to the pixel grid. Photoshop will apply anti-aliasing based on your icon.

If your not sure what anti-aliasing is there is a great TED talk by typography designer Matthew Carter.

At this stage you need to Free Transform your icon. Moving your icon with “V” will preserve the default anti aliasing. Transform the icon until it is aligned to the pixel grid. The top three icons below were placed from Illustrator. You can see the grey fuzzy areas around the icons. This is not a bad thing, in-fact some curves can only be achieved this way.

alt

The bottom three icons also have some fuzzy (or transparent) pixels but the important difference is the straight lines are crisp. The icons are also balanced, the heart in particular is symmetrical. The image below points out some important points.

alt

This may not seem particularly important, but the legibility of icons at a small size is. Here is their actual size:

alt

If you still have problems with your icon go back to illustrator and tweak your design. Often times for particularly small icons I will create a distorted version of the icon just to align to the pixel grid.

Look at it in Context

Never over-estimate your abilities or consistency across multiple devices. Always check your icons on a phone / tablet / web etc. The devil is in the details, and a lot of tiny things can really add up in your final design.