Creating Chrome and Jelly Buttons
By Gary David Bouton
Dateline: April 7, 2003
Let's face it 3D and photorealism are sexy. You can see navigation buttons on every other site these days with buttons that are textured and lit so well that you want to reach out and smudge your monitor! I don't want to influence anyone's use of photorealistic looks in design as being a good or bad thing. Instead, this month, I'll take a look at the dynamics of the near-ubiquitous "chrome" look for buttons, as well as the Auto F/X and Apple Computer-popularized "jelly" look.
First, it's important to understand the physics of the chrome look before you can replicate it. Just what is a chrome look? Any nearly mirror-smooth surface has no visual detail except for what's reflected in it. A classic reflection we've grown used to is the "hub cap" reflection, which is the hub cap's distorted (bulged outward) view of the world. This view is composed of brown sand or grey highway on the bottom, then going upwards the view is split horizontally by the horizon, which might have swaying palm trees or telephone poles sticking out of it. The sky at the top is most legible when it's fairly cloudless. At the very top of the reflection, the sky will become deeper in color because the hub cap will be the greatest distance away from the reflected scene, and so will receive gradually diminishing illumination.
This is easier to grok with a visual. In the illustration below you can see a really quick Vue d'Esprit render that fits the criteria that I put forth a moment ago. It's admittedly very easy to show you a picture and say, "Here's a good reflection for a chrome button on your Web site". But it's an entirely different proposition to demonstrate the steps it took to create the image. This illustration is actually a heavily edited version of the original Vue rendering I optimized it for reflection properties, knowing in advance that a spherical surface was going to severely distort the image.
Take a look at the next illustration. Any guesses what was done to this image?