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:
- 16×16, 32×32, 48×48, 64×64 and 256×256.
For iOS the standard app icon sizes are:
- 29×29, 48×48, 57×57, 58×58, 72×72, 96×96, 114×114, 144×144, 512×512 and 1024×1024.
For Android the standard app icon sizes are:
- 36×36, 48×48, 72×72, 96×96 and 512×512.
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.
Answer
A slight correction to your assumptions: While Windows and Mac do use multiples of 16, they don’t scale at the same rate. Vista/7 standard sizes are 162, 322, 482, 2562. OS X is 162, 322, 1282, 5122 (+HiDPI versions). To further complicate things, Windows Vista/7 default zoom levels seem to be 162, 482, 962, 2562 and will happily scale in increments as small as 2px. This shouldn’t make a huge difference to your workflow except that it obviates the need to be concerned with specific pixel grids at all zoom levels.
My workflow is different than yours in that I don’t do very much resizing. A new image gets created for each size level and I don’t attempt to recycle the exact same layout.
The size that I begin with is determined by the platform. If designing for Windows, I start at 48×48. (I don’t have any scientific basis for this, but the default Windows 7 zoom level is “Medium” which is 48×48. Vista, OS X, iPhone, iPad, and Android Icons also fall close enough to this size so it’s convenient and comfortable.)
The fully finished icon gets done at this size and is the reference for other icons in the family. If doing a desktop app, I’ll make other versions at 16x, 96x, and 256x to match Windows’ default levels (unless it’s for Mac, naturally). The 96x is usually very similar to the 48x.
The 256x version will be a wholly new creation. Much more detail (even if it’s small stuff like texturing background elements). All the detail that I couldn’t fit in the smaller versions gets added. If someone has their screen dialed up for giant icons, they should be pleased with what they see.
The 16x version is also a new creation. Very little detail. Identifying logo or very simple iconography with the same color palette as the larger versions. At this size I don’t attempt to make anything beautiful – just instantly recognizable.
So, for me at least, it’s not a matter of scaling up or down in the hopes of having an identical image or using the same base layout at all sizes. I think of it like driving into a city — in the distance it’s just a tiny, yet identifiable, skyline. You get closer and start to pick out buildings. Then you’re in it and feeling all of the detail and dimension. From each distance it looks different, but there is a smooth transition from size to size so that the whole family never feels disjointed.
Attribution
Source : Link , Question Author : Marc Edwards , Answer Author : Farray