Echo Icon Common Mistakes - Blurry Icons

I've just written first and most needed part of the Common Mistakes done when creating Echo Icons. And that is blurry icons. Let me know what you think about it :-) For convenience I paste the relevant section here as well:

One of the most common mistakes is an icon design which does not take pixel grid into account. Here's an example picture of this mistake (on the left) and the same without this mistake (on the right):



Do you see the difference? Many people do. It depends on how sharp your eyes are, what DPI your display has, how sharp it is, on the used technology and many other various things. If you don't see the difference, don't worry, we have means to show it to you. We zoom the picture, in this case 10x. Now you should be definitely able to tell the difference between the two icons, again the wrong one is on the left and the correct one on the right:



But how are you supposed to make it correct if you don't see the difference in 1:1 and inkscape zooms it other way than we did? Again, don't worry. Inkscape can show the pixel grid for you, so you can check if anything is aligned as supposed. Go to File > Document Properties, and there click on the Grid tab. Add new rectangular grid and make sure Spacing X/Y is set to 1 px and Origin X/Y is set to 0 px. Now the pixel grid lines appear in the document.

However, you need to keep in mind that the grid lines are actually what you can call "lines between pixels" so the real pixels are inbetween the lines. That means, that every line you have in your icon needs to be between the grid lines - not cross them. Again here's the example what the wrong (on the left) and correct (on the right) case look like:



Now you have nearly everything you need in order to make your icon crisp. However, inkscape has prepared one another "trap" for you - if the grid is displayed it automaticaly aligns everything on it - which means your lines will be just in between two pixels (note that sometimes this might be intentional in order to easily create various effects) which in the result image will look blurry because the line would be divided into two pixels. But how to workaround that? There are multiple ways to do it:

• Set the grid Origin X/Y to 0.5 px and draw the lines on the grid lines, or


• Disable the snapping - View > Snap - and draw the lines inbitween the grid lines, or


• Leave the grid Origin X/Y to 0.0 px, draw the lines on the grid lines and when you are finished, move the resultant icon by half a pixel both in x and y direction

Now you know everything you need to be able to create crisp icons :-)