There’s been some recent discussion on Mac OS X’s upcoming resolution independence. I’ve been interested for a while in this topic, but never managed to write about it much. Eighteen months ago Ian Griffiths discussed resolution independence in relation to Mac OS X’s upcoming support and what was already possible in Windows Vista. There’s a couple of good examples in there, for general interest.
A couple of people have chimed in on how you don’t want vector art, mostly because when you shrink it down you don’t get results as high quality as a hand-tweaked bitmap. There are two things here, exactly analogous to font technology. Long story short: you don’t want to shrink down a complex image too much, because you’ll lose detail and the smaller objects in the image will just disappear. Much better to design images for their display size; for example, thickening hairlines as the size decreases.
Over at the Iconfactory, they cover such points with another: vector art takes up more disk space when it’s complex. This is fairly untrue. They use the example of the same image in “vector” PDF and in bitmap PNG, with the higher-quality PDF a whopping 30 times bigger. And opening these files in an image viewer shows that displaying the PDF is far more processor intensive.
Seemingly damning evidence. However, zoom in real close to this image and you’ll see the reason this so-called vector image is so large: you can see by the individual squares of flat colour that it doesn’t use real vector gradients!
You can imagine that if this image is actually storing individual squares of colour at the size shown above (2000% magnification), then the file certainly is going to be enormous!
So what’s the deal? What has happened in this image is that their drawing program has rasterised the gradient into the vector image, resulting in an extremely high resolution texture in the image — resulting in the huge file size and slow processing seen. So in actuality, the image is not a true vector image.
To be a true vector image, the gradients themselves would have to be represented as vectors as well. Vector gradients cannot be as complex as the generated gradients as used in their image, but they are actually vectors. The display technology used to render the gradient would compute only the pixels being actually displayed in their subtly changing colours.
I’d like to conclude by quoting ssp, who has sensible things (as usual) to say:
I do think that using vector graphics in the process of icon design may be a good idea. Working with vector graphics seems to make people think more in terms of large structures than in terms of small details. And thus, for simplicity’s and clarity’s sake, basing an icon design on vector graphics may be a good thing to do.
8 comments:
As far as creating art in Illustrator goes, the areas you're zooming in on and presuming to be gradients are not simply gradients but feathered edges to give a soft, drop shadow look. Illustrator can't create gausian blur via vectors but only by raterization.
Also, Illustrator back at version 8 or 9 started including a new tool called a "gradient mesh". It basically gives you a really easy way to get an odd-shaped region to have a complex gradient, with multiple colors and deformations. But as is shown here, when you "flatten them out" in PDF they get rendered as a high-res bitmap.
Goona have to disagree with you on this one. The visual effects you see in this icon are simply not possible WITHOUT Illustrator's raster effects. This icon looks like it contains gaussian blurs, transparency effects, hue blending and more. None of this can be achieved using straight vectors. The fact of the matter is that to achieve the level of detail and realism that is required by today's icons, these types of effects are par for the course.
Hi Tony,
Thanks for the comment -- you're right that the image couldn't be represented as a true vector image due to the way it was constructed (as far as I know).
But on the flip side, there's no reason it has to be so high resolution, either, which is really what pushed the file size way over the top. If the art cannot be conceivably be stored as a true vector, then the resolution of the bitmaps must be chosen to be reasonable.
As to whether it's impossible to create a true vector image that's on par with today's icons, I leave that one up to the graphic designers :)
"there's no reason it has to be so high resolution, either"
Please don't take this the wrong way Will, but you must be joking.
Sorry Tony, we're on a different wavelength here. The 100kB PNG icon that we were originally talking about wouldn't scale up like the examples you mention. Obviously we want vector art for images intended to be that big. But for (vector) icons that are as complex as we are talking about, there's no need to rasterise the gradients to the resolution seen in the 3MB PDF.
The whole thing about the original argument by IconFactory was that they weren't comparing apples to apples.
Vectors work for some things, but the overheads for icons as complex as most are today just doesn't make sense. Why do all that extra work for no benefit? Just include higher res images in the ICNS file and be done with it.
However, I do think some UI elements are better off as vectors.
http://islayer.com/blog/?p=87
Post a Comment