: Best workflow for icon design: Start big, or start small? 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?
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.
More posts by @Twilah924
3 Comments
Sorted by latest first Latest Oldest Best
Well, I prefer making everything for the smallest density and scale it up. If you are designing the whole layout for an app, the work with the grid is much easier and it saves you lots of headaches, because you are moving the objects in a smaller grid.
So my workflow looks like:
1. I make a layout in a smallest dpi scale in the Photoshop and keep making the icons in Illustrator, because vector images have no problem with scaling up.
2. When I am making each icon/object etc. I create all scaled up versions in the same time (when I decide it looks good in the layout of course) and hand the final pngs to the programmer.
I have to note that I started with iOS first.
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.