When designing icons that need to be delivered at several sizes, do you start at the smaller size, then scale up to the bigger sizes? Or do you start big and scale down?
There's several advantages to both. I'm trying to refine my workflow, so input from others would be helpful. Let's assume we're designing a Mac or Windows icon, where the sizes relate — they're mostly exact multiples.
For OS X, the standard app icon sizes are:
- 16×16, 32×32, 128×128, 256×256, 512×512 and 1024×1024.
For Windows 7 the standard app icon sizes are:
- 16x16, 32x32, 48x48, 64x64 and 256x256.
For iOS the standard app icon sizes are:
- 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 and 1024x1024.
For Android the standard app icon sizes are:
- 36x36, 48x48, 72x72, 96x96 and 512x512.
For iOS and Android, the icon sizes are a little more haphazard and the scales don't relate as well, so being smart about the design grid matters less, because you're less likely to find coordinates that hit pixel boundaries for multiple sizes.
Method 1: Scaling down
Design the icon at the biggest size (often 1024×1024) using vectors and generated effects, like layer styles.
Duplicate and scale the document down to create the smaller sizes.
Make any required tweaks and save the final image.
That's great, but misses opportunities for elements to align to a grid that work for multiple sizes. Using a coarse grid to snap to seems to help a little. For example, a 1024×1024 document with a 16px grid means the snapping points will give you pixel snapped edges down to the 64×64 size. The idea is to design with detail but snap to the smaller size grids, so you hit those important positions.
Method 2: Scaling up
Design the icon at the smallest, or one of the smallest sizes (often 32×32 or 64×64) using vectors and generated effects, like layer styles. There typically isn't enough detail in 16×16 to use it as a starting point.
Duplicate and scale the document up to create the bigger sizes, and down for the tiny sizes.
Make any required tweaks and save the final image.
This tends to lead to over simple icons with not much detail, so I don't like working like this.
Method 3: Scaling up then down
Create a rough design at a smaller size (often 32×32 or 64×64) using vectors and generated effects, like layer styles.
Scale the document up to the biggest size and add detail. This is the point where the icon is polished and most of the detail is added.
Duplicate and scale the document down for all the smaller sizes.
Make any required tweaks and save the final image.
This seems to be the best method, with the pros and cons of the other methods. As a slightly related point, it also means I typically design iOS icons at 912×912, because that's exactly 16 times the iPhone's non-Retina icon size of 57×57.
Is there a better method for designing icons that need to be delivered at several sizes?
The goal is to achieve the best possible result, with the least effort.
