Icon designer Kevin Andersson

When designing icons you will often have to make them avaliable in different sizes. Usually 512×512, 256×256, 128×128, 64×64, 32×32 and so on. Scaling your icons from 512×512 to 256×256 is often ok, but as soon as you go into the really small sizes you get into trouble. Your high resolution details just won’t work on the low-resolution versions. So, here’s a quick tip on how to make your smaller sizes look a tad more crisp. 

Basicly it boils down to pixel to pixel ratio when you scale your art down. Say a 8px line your 512×512 icon down to a 64 x 64 px icon. What happens is, that your 8px line becomes 1px wide in the 32px version. That’s pretty straightforward. Scaling it further down, say to 16 x 16px you will get a pretty muddy result, as your 8px line, now has to be divided by 2 again.  

The thing is, if you made your initial document right, it’s pretty easy to get past this problem. What you do is, that you increase your layer-styles sizes with the the multiplier you scale down. So, if you have 1px outline, and you want that outline to stand out when you scale down, you just multiply it with the amount of times you scale you illustration down. 1px in 512x512px becomes, 1px in 32x32px if you make it 8px wide in the high resolution.

This doesn’t always work though – but a lot of times it will.

Another good idea is to keep a grid in the background of your artwork, for pixel position reference. Attached in the PSD you will find a 8x8px grid file – which you can make into a pattern, and apply to your backgrounds; this works perfectly with your 512x512px document