When creating a vector file, how should I determine my vector file canvas size given the png sizes I need to export to?

For example, if I need to export a 32x32 png and a 64x64 png, what size should my control vector file be?

The main reason I ask this is because I recently did an iPhone app icon and I needed to export to 57x57, 114x114, 29x29, 58x58, 72x72, 50x50 and 512x512. I used a vector file that was 512x512. All the exported pngs came out looking good except for the 29x29. It was a circular icon and the circle border on the 29x29 came out fuzzy. Does this usually happen when you size a big vector file down to a small png? How would one handle that situation?

Originally I thought that it didn't matter because it's a vector file.

Answer

This seems to be a common theme right now. When creating any graphic, you should be considering your target resolution - whether it be in pixels, inches, hot-dogs, whatever. Vectors are not magical fairy dust that can be sprinkled on a design to make it look good at any resolution.

Consider the following image. Using the same vectors in a 100 x 100pt bounding box (in Illustrator), I created 3 images. The first is the target size of 100 x 100px, the second was created at 50 x 50px, the third at 10 x 10px. I then scaled the results up to 100px so you can see the level of image detail in each.

The smallest image simply doesn't hold as much image information as the larger images. This is limited by mathematics and has nothing to do with source format, only with the final rasterized output.

Once you rasterize your image, you are limited by the raw number of pixels (and bits per pixel). A 100px x 100px image has 10,000 pixels. A 10x10 image has only 100 pixels. It is impossible for 100 pixels to hold as much information as 10,000 pixels. In your case, scaling an image from target size of 512x512 down to output size of 29x29 means that the final raster only holds 3/10ths of a percent of the image data of the target image.

Oftentimes you will see a small icon that appears to have as much detail as a larger version of the same icon. This is generally not the result of simply resizing the icon, but of a graphic designer taking the same concept and manually tweaking it for the different resolutions. Take a look at Apple's icon guidelines and you'll see more evidence of this. If you take the larger Settings icon and scale it down, you will see that it is not as crisp as the smaller icon, and the border is smaller, and the shadows are slightly different.