Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

  1. Design the icon at the biggest size (often 1024×1024) using vectors and generated effects, like layer styles.

  2. Duplicate and scale the document down to create the smaller sizes.

  3. 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

  1. 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.

  2. Duplicate and scale the document up to create the bigger sizes, and down for the tiny sizes.

  3. 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

  1. Create a rough design at a smaller size (often 32×32 or 64×64) using vectors and generated effects, like layer styles.

  2. 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.

  3. Duplicate and scale the document down for all the smaller sizes.

  4. 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.

share|improve this question

2 Answers 2

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 48x48. (I don't have any scientific basis for this, but the default Windows 7 zoom level is "Medium" which is 48x48. 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.

share|improve this answer
    
+1 This is dead on. Scaling only goes so far, and that really is not very far. Even for print, different versions of, say, a logo are often needed for different size applications, and it's even more important for screen. –  Alan Gilbertson May 19 '12 at 21:42
    
"A new image gets created for each size level" — Seems like a lot of replication for work you've already done. Obviously many tweaks will be needed, but I'm surprised you start over. –  Marc Edwards May 20 '12 at 6:22
    
Seems like a lot of replication, because some detailed icons are constructed with tens or hundreds of layers. I think the extra detail is typically useful for sizes above about 64x64. (PS: I voted up because it's a great reply that's full of good info, but didn't tick, because I don't think it's the way I want to go.) –  Marc Edwards May 20 '12 at 6:47
1  
@Marc Totally understood – this way is not for the faint of heart. ;-) But I find it produces the best results – and if you can bill accordingly, it’s worth it. –  Farray May 20 '12 at 17:19

Definitely start large and scale down. Whenever I've had designers design icons for my software I prefer to see what the icon will look like at a larger size and then I can decide what features to remove or emphasize in smaller sizes. You need to know what's in the icon before you remove elements in the small. glyfx icons has some good examples of how to interpret large and small icons of the same design.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.