Bigg Ass Icons?
Tuesday, August 15, 2006 09:20
In short, every icon or image resource contained in an app will be 4x more detailed. Yes every icon and resource. The good news is that Apple indicated not to expect screens that support high resolution before 2008.
So what does this mean in detail? To start with app icons, support will grow from the default size of 128 pixels now to a huge 512 pixels in square. And for all the other icons (toolbar and list icons) the same will happen. 32 pixel icons will support 128 pixels, 24 pixel icons will support 96 pixels, and 16 pixel icons will support 64 pixels.
The bad news is that this change will cost an enormous amount of money and time for developers. I know for a fact that Apple themselves are hard at work at updating and recreating a lot of icons to conform to their own standard as we speak. And I doubt that they will be done by the release of Leopard.
Basically what it means for a designer like me is that everything is going to take about 2x to 4x longer to create. Especially for the toolbar and list icons. But even creating 512 pixel application icons is going to be a very costly undertaking for small developers.
So what to do? My advice would be to just stick to the current standard. A lot of people are very confused by the resolution independence thing while in fact it's really simple. A 32 pixel icon is 0.4 inch by 0.4 inch, the new 128 pixel variant will be squeezed in that same 0.4 inch rectangle. Because by that time we will have screens that have a higher resolution then 72 dots per inch (dpi), you will be able to see more detail in that same 0.4 inch rectangle. So the icon will not grow in size, but instead will grow in detail and dpi. If you don't provide a more detailed 128 version it will just show the 32 version, meaning you will just see the icon as you see it now on your current display. Nice an pixelated, no harm at all. So this high resolution support is not created to allow zooming in on the interface, but is contrarily implemented to allow more detail at the same size.
Within the same visible screen area, the density of pixels will be raised to provide room for 4x more pixels.
A note of interest; the 72 dpi standard was chosen based on the capability of the human brain to smooth the pixel roughness at that resolution. Similar to how the human brain smoothes the motion in between 24-30 frames per second video material. So technically speaking average users do not need these high resolution screens. It's an invention that will allow visual professionals to finally proof their material on screen instead of on print.
As far as those beautiful new screens are concerned. Apple has indicated they will start appearing in 2008, and from what I can tell those screens will not be for Joe average. Those will be high end visual post-production (photographers, graphic designers, movie makers) screens, and will most probably cost quite a few dollars.
But as it stands Apple hasn't released much technical documentation on this subject, so we have no idea how they will technically implement these changes. My guess would be that they will upgrade the .icns file format to support larger icon resources. Developers will then need to start using .icns files everywhere so that the system itself can select the correct sized resource just like it does now for application icons in the various file views. Or Apple could further support multi page .tiff files for toolbar icons, maybe a combination like now. The only big question that remains is how we have to handle other image files. I guess we will just have to wait and see.
14 comments Add Comment Email post Digg post
- At 8:21 PM, said.
You raise an interesting matter by stating that the larger versions of icons are intended to show more detail at the same size.
As you have said before: when you create a new icon and you're using the largest version as a starting point, you can't just scale the image down and be done for the smaller versions, you have to tweak all of the elements inside the icon to get a proper low-res version.
What I'm wondering about is the following:
- Is this purely due to limits to the amount of information you can contain in a specific amount of pixels, or
- Is this also because people can only interpret so much information in a specified amount of space?
As you said yourself - referring to the 72dpi decision - people have limited sharpness in their vision and will start to blur things out when they get smaller.
If you agree with me that having to tweak smaller versions of big icons has both the above reasons, we're in a problematic situation that cannot be solved by doing 2 to 4x as much work and appending two larger sizes to the .icns file format. We'd have to do about 8 to 12x as much work and think of an entire new file format.
for example:
In an extreme display scenario (dpix4) you'll get a 128x128 version of your icon where you'd normally get a 32x32 pixel icon. If my hypothesis is true, a good icon designer would not want to use the same 128x128 image for the "high dpi" small icon as for the "normal dpi" large icon.- At 9:35 PM, said.
The questions you ask are very good ones, and I can't really answer them because I haven't yet found any research in this direction.
Maybe I should have been more clear on two things.
1) The system as I last heard will automatically decide what resource size to show depending on the dpi or scale factor. So when the system is 72 dpi it will show the 32 pixel version, when the system is 300 dpi it will show the 128 pixel version. Very similar to how the system now decides what resource size to show depending on the screen area size the icon has. So each size, 16,32, 48, 64, etc, etc, will have their own custom made icon for that specific size.
2) The 72 dpi standard was chosen on the bottom limit, going below it would not trigger the brain blurring the image. Going higher then 72d dpi how ever will result in more detailed and sharper images.
But as a rule of thumb I think it's save to say that when ever the screen area of an object is small you should not provide "to much detail". For example, a one pixel line at 300 dpi is 4 times thinner then a 1 pixel line at 72 dpi. So designing in these extreme situations requires a lot of thought to ensure that the icons stay nicely visible and are not to fragile looking. Another problem could indeed be that the icons will get to detailed and the result could be that the brain makes a blurry image because the details over complicate the interface. But I can not be sure as I have yet to sit in front such a display.- At 11:57 PM, said.
Do you have a reference for your backstory to the origin of the 72 dpi standard? I'd always assumed it was more of a carry-over from traditional typography, where 72 points equaled an inch.
- At 5:18 AM, said.
I don't think resolution independence is only for graphic designers, et al (though I am one) - fact is, 72 DPI elements on some laptop screens (or even desktop screens) can be too small for people to read without eyestrain. My boss runs both of his 20 inch Apple cinema displays at lower than native resolution because - guess what - the screen is at more of a 110 DPI and the type/elements are too small for him. Having the DPI of the screen match the DPI of the OS is not something to overlook for the general user.
Sure, you could do it NOW (like in Windows, for example), but it would look ugly, because all of the raster elements are upsampled... which higher resolution widgets, resources, and icons will eliminate the need for. Not to mention we'd have crisper text with less need of strong antialiasing.
Not saying your points aren't valid, just that it isn't as cut and dry as "wait for Apple's mega rez displays" because we have plenty of screens whose DPI well exceeds 72.- At 10:31 AM, said.
I don't have a back story on the 72 dpi, but maybe you are right. It could also be both.
I kept my story short to keep it interersting, but I know resolution indpendance is more complicated then I made it seem. I know that zooming in will be very handy for some of the older mac users etc. But for my point it was not of great interest.- At 11:43 AM, said.
Apple's subpixel rendering for fonts has, as an unobtainable theoretical maximum, a 300% increase in resolution in only one axis (horizontal) and yet was hailed as a major breakthrough (accompanied by a lot of complaining that it still wasn't good enough).
I would imagine that far clearer fonts would be the immediate big win as you can just bump up the size by whatever scale factor you need to retain the same size but with much greater clarity.
And the vector nature of fonts (and the far reduced need to hand-sculpt them using 'hints' with higher dpi outputs) should be taken as major pointers for anyone thinking about creating icons. Pixel-pushing may well be a dying art.
Adding to the other use cases apart from proofing paper based products, has anyone tried using their Mac from across a room on a big HDTV? The combination of high resolution and distance is a killer.
Final question: in the dock Apple smoothly transitions between icons of various set sizes. Do you think this will be applied across the OS or do you think they'll make you jump from one pixel perfect size to another?- At 1:59 PM, said.
I am afraid of extremely high resolution/pixel icons.
Even the switch from 32x32 to 128x128 hasn't worked too well for many icons. While some of them just use the extra pixels for nicer textures and a smoother look, there are more than enough icons which cram loads of extra details into the icons.
And as a consequence of that those icons just look very blurry when they need to be scaled down (using a smaller design size isn't an option if you want smooth scaling) to fit in the Dock, say.
This will end up requiring a lot of care to use the extra pixels wisely. But I fear that many people will just use them to paste a photo into their icon - hence giving a worse experience than before.- At 7:25 PM, said.
For a lot of things resolution independence will have great benefits. And displaying fonts and vector art in general will be one of them due to increased detail.
What only a few know is that currently drawing vectors is a very GPU intensive process, far more so then pixels. The reason lies in the fact that every visual aspect of pc's is and has always been based on pixels. Even vector art needs to be converted to pixels to be drawn on the display! This also explains why we still do not use vectors for visuals in our systems, for buttons and what not.
The people at Firewall Design wrote a very good article about the difference between vector and pixel icon design, and I will not even attempt to summarize it here. Just read it. It also explains why we will stick to using pixels based icons for quite a while in the future.
I very much doubt if Apple will start doing "dumb" scaling of icons to create different sizes automatically. And the Dock is "the example" why they won't do that, it looks like crap. We have always had the capability to create multiple sizes of an app icon, and from what I gather this same system will most probably be used for toobar and list icons aswell.
I agree with the fear that these new capabilities could easily lead to a whole lot of nasty looking icons. I really hope that Apple will create detailed documentation on how to handle the changes. I know I will be able to handle it, but a lot of people will need some guidance. My advice to all would be to really keep things simple, an when thought necesarry to handle details in such a way that they scale away when made smaller.- At 6:45 AM, said.
A few comments:
1) The standard icon sizes in Leopard are all multiples of 16: 16x16, 32x32, 128x128, 256x256 and 512x512. The system chooses the bitmap that most closely matches the size it needs. If it needs a 48x48 icon, it will take the 128x128 and scale it down.
Upscaling causes bluriness, so it's avoided if possible.
2) You're right about pixels vs. vectors. When vectors are specified (by a PDF, for example) it will be rendered into a bitmap whose size matches what the system needs.
The GPU can't handle vectors at all, so to get any benefit from the Quartz Extreme processing pipeline, bitmaps are the only way to go.
3) Adding detail at 512x512 can be very effective on a high resolution display. Look at the Safari icon in Leopard and you'll see why.
You also need to provide hints at the smaller sizes, though. If you let a 512x512 be scaled down to 16x16, it will look like crap.
4) As far as workflow is concerned, I posted this the other day: WWDC and Beyond
I'm also looking for IconBuilder beta testers who are running Leopard :-) Use the contact form on the site if you qualify...
-ch- At 7:22 AM, said.
Apple has already added support for 512px x 512px icons to the .icns format in Mac OS X Tiger. I commented on this when IconFactory released IconBuilder 8.0 which supports the extra size.
Another issue that you don't mention is the final file size of the application once it has all those larger icons in it. A 512px x512px PNG is 1mb!
I don't it'll be too hard to upgrade existing icons, as long as you started with vectors. Then it'll simply be a matter of adding some extra details. If Apple or MS decide to start supporting vector based icons then you'll have an even easier time, but I don't see that happening anytime soon.- At 7:38 AM, said.
I have to respond to this as well:
Pixel-pushing may well be a dying art.
Don't count on it. There is still a lot that can't be done in vector without creating a ridiculously large and complicated file. Raster images are still far less processor intensive to render than a vector.
Final question: in the dock Apple smoothly transitions between icons of various set sizes.
This isn't true. Apple does transition between the different sizes in the Finder, but not in the Dock. In the Dock they are simply resizing the 128x128 icon. You can see this by creating an .icns with different images in at each size and adding it to your Dock.
But I fear that many people will just use them to paste a photo into their icon - hence giving a worse experience than before.
There was concern about this when Apple first introduced the 128x128 in Mac OS X 10.0, It hasn't really happened yet. Many OS X developers are as vain about their apps appearance (that's not a bad thing either) as Apple is and have made the effort to get decent icons.- At 7:45 AM, said.
Lowendmac.com has an article that explains why the Mac uses 72dpi.
- At 1:20 PM, said.
"So technically speaking average users do not need these high resolution screens."
You're kidding - have you read any with pdf / webpage on the screen? 600 dpi is just okay.- At 11:04 AM, said.
apple still uses some icons with 512px in parts of its documentation and in frontrow.