Creating Chrome and Jelly Buttons

By Gary David Bouton

Dateline: April 7, 2003
Volume 1, Number 4
Earlier columns

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?

  1. In Photoshop, I used the Filter>Other>Offset command and horizontally offset (wrapped) the image by precisely half its width, so the center of the picture is the mating of the left and right edge. This will leave the center of the image with a hard edge. At the area marked "a" I used a gradient blend (linear) from a dull mustard color to 100% transparent. Why? Because when a rectangular image is mapped to a sphere (as I did in trueSpace, and you can, too), the image bunches up toward the bottom, and any pattern (such as the grass in the image) would show the bunching. Fortunately, by using a solid color the problem is gone.
  2. Callout "b" shows where the mountains do not line up. This is easily fixed using Photoshop's Clone Stamp tool. (I tried to make this month's column application-independent, but you will notice that I've used a few familiar ones. This is not to say you can't do the same image editing in Photo-Paint or another image editor.) Also note that the mountains are not tall. You don't want them tall; instead, they should be a shallow "rip" in the horizon reflected in the chrome button, to add visual interest. The world is a visually complex place, and the more complex you make a scene (within artistic reason), the closer you come to a realistic, plausible illustration.

  3. Callout "c" shows that the palm trees I put at the edges of the scene have leaves lopped off. If you own Corel Bryce or Vue (or some other terrain builder that has vegetation capability) and want to render a scene yourself, place the trees as shown in the first illustration. Then in an image editor, copy the point where the trees meet after Offsetting the image, paste the copy into a new document window, and then flip the copied area horizontally. Then use a cloning brush sampled from the copy to paint leaves into the original image. This is easier than it sounds and quicker than pulling a second scene render just to get spare palm leaves.
  4. Callout "d" is the sky area. Begin here by softly getting rid of the higher clouds (because these, too, will bunch in an awkward-looking fashion when mapped to a sphere). Then, take care of the hard edge at the center of the image using a clone brush, and finally create a darker shade of blue-to transparent linear gradient starting at the top of the image going down. I used the Darken painting mode in Photoshop to retain the tops of the trees when I darkened the top of the sky. Finally, use the Offset command to undo the horizontal wrapping of the image. Save it and then open up a 3D modeling program.

    What?! Okay, you might not own a 3D modeling program. Guess what? An earlier version of Caligari's trueSpace 3 is available as a free download here. And you'll be able to design a sphere in no time if you read my tutorials on trueSpace here. In truSpace, or another 3D app, load the chrome reflection image as an environment, and make the camera in the scene superior in height to the sphere (that is, looking downward, so the top of the reflection is predominant in the sphere, as shown above). Switch to camera view and then render. As you can see in the illustration at left, I've rendered the sphere with the Vue d'Esprit reflection map in it, and the result is a convincing chrome sphere.

    For every solution, there is a problem! Although handsome looking and all that, the chrome sphere precludes you putting any text on it, because it's too visually busy. There are a number of remedies for that. First, in figure 5, I've converted the reflection image to greyscale. To the right, in figure 6, I've used a Gaussian Blur filter on the image. Although figure 6 looks quite realistic, I must point out that reflections in shiny surfaces are almost never blurry – light is actually focused on smooth surfaces, not unfocused. However, our brain is familiar with out-of-focus images, and we accept this minor optical oversight. There are as many variations on this theme of ground-horizon-sky as you can find real or synthetic images to fit the bill as stock. To be fair, however, I know I've just launched into an application-intensive series of steps and, yes, there is a down and dirty formula for creating chrome buttons, as well. You apply the same principles as the ground-horizon-sky example, except you draw them instead of rendering a reflection map and then applying it to a 3D sphere.

    In the illustration above, callout "a" is the sky in the button. It goes, linearly, from a light mustard color to brown at the horizon. Callout "b" is a simple fat horizontal line with rounded edges in a dull red. This suggests clouds in the reflection. Callout "c" is the horizon. As you can see, it swoops up at the far edges and it's the darkest color in the reflection. Callout "d" is the ground. From top to bottom, it gets lighter in a linear transition. Callout "e" is a simple light shape suggesting that a light in the distance is being reflected. Finally, callout "f" is a small burst, another highlight that suggests a second light in the reflected scene. I made the burst white, although it might be more technically and aesthetically correct to be a light yellow – it really depends upon the surface you want to imitate. By the way, this figure 7 is huge – you never want to create a chrome or gold button this large, because it serves no purpose other than to tip off the viewer that this is a drawing. Text on top of the shiny surface helps complete the "disguise" work.

    Ready for Some Jelly?

    Gel surfaces do not have the same properties as chrome (or other shiny metal) does, although both are reflective. Here's the rundown on the gel (or jelly, whatever) effect I'll show you how to create here:

    • Let's presume that the assignment is to draw a jelly silhouette of a pear. And it's green jelly.
    • Let's further presume that there is a skylight at the top of the environment, a strong point light (such as a bare light bulb) at top left, and a second, weaker point light at bottom right.

    Wet, gel-like surfaces display a number of visual phenomena, not limited to puddling toward the edges. Light has a harder time penetrating the liquid and returning to the viewer's eye, so the edges of a gel shape look darker than the center. Images reflected in the gel are monochromatic – generally, the same color as the gel. The images are also distorted, as though you mapped an image onto a balloon and then inflated it. The illustration above shows a good image to use for mapping onto a gel shape (because of the simple shapes and hard-angled geometry), but not until you distort it a little. What I did to get to figure 9 was to first select a good portion of the scene using Photoshop's Elliptical marquee tool, and then Feather the edges by a large amount (16 pixels in diameter on an image that has a total size of only 500K), and then applied the Filter>Distort>Spherize filter at 100%. I then copied an area the same proportions as a silhouette of a pear, and blurred it (see the inset image in figure 9).

    Let's hold on for a second while I show the "easy" way to accomplish the gel effect. This has nothing to do with the gel pear, but this minor digression will satisfy those users who want the "quick and dirty" method. In figure 10, I created a circle that makes a linear transition from blue-green to a lighter shade. Then I created a white oval on top of the circle and created a transparency fade from 80% on the top to 10% on the bottom. This can be done in about three steps using XaraX, and it takes marginally more time in CorelDRAW or Illustrator.

    Back to the pear. In figure 11, you can see a basic jelly pear on the left and then the same design using the environment map you saw in figure 9. Let me describe how this is done in Xara – Illustrator and CorelDRAW have very similar features and you can even do this in Photoshop.

    1. Create the basic shapes. The stem and the leaf are so small and insignificant in proportion to the size of the overall design that I simply ran a dark green to lighter green gradient on the stem, and performed the steps needed to create the figure 10 image for the leaf.
    2. Copy the path used on the body of the pear, shrink and reshape the path so it looks more like a circle. Color the path a light green.
    3. Blend the bottom dark shape and the top light shape, mapping the control points exactly to correspond to one another (if you do not do this, the blend, contour, or whatever your application calls intermediate shapes, will look awful!). Use about 25 blend steps.
    4. Create a soft white shape, as shown in the upper left of the pear in figure 11. Make a linear transparency run through the shape, with about a 90% opacity at the top, and 10% opacity at the bottom.
    5. Create an ellipse in the upper left and bottom right of the pear, and make them white, and then feather them (blur them). These highlights are the reflection of two point lights in the scene.
    6. To get really fancy and add the environment, import the image of your choice for reflections, make a greyscale copy, blur it, and then trim it so it conforms to the outline, the silhouette, of the pear. Put it in front of the green shapes blends, but behind the bursts and the larger white shape. From color modes, if your application supports this, choose to make the image about 50% transparent, and in a Multiply blending mode. This is what I did, entirely from within XaraX, at right in figure 11.

    Variations also help to strengthen the illusion that there's a squishy jelly button on your web page. In figure 12, I used a different image in the pear shape (and it's not a terrific picture, because a window frame perfectly bisects the pear, and in nature nothing is perfectly symmetrical). The picture's in a little better focus, but that's not the important element. I added an outer bevel to the pear, so the gel looks like it's sitting in a container, resplendent with point lighting in appropriate areas.

    Whew! I think we have time for one last jelly trick. When lit at a certain way, jelly will cast a tinted shadow onto a surface (let's assume for this discussion that it's a white surface). Check out the final illustration, below. How to do this? Take the shape of the pear, the stem and the leaf and make them one combined shape. Use your program's contour feature, and create only one contour, slightly larger than the original shape. The resulting shape should be an equal distance at any given point from the original. Now, feather (blur) the shape. Make the shape a bright color, fading to grey at the center – the shadow for gels loses saturation as you go farther from the perimeter of the shadow shape.

    Was that easy?
    Was that fun?

    Next month, I'm going to attempt to cover in one article how vector graphics are different than bitmaps, how you can automatically and manually convert from one format to the other, what the different formats are good for, and the Meaning of Life as we know it.

    In one article.

    My Best,
    Gary David Bouton

    Don't miss the next installment of this column. Get the free Graphics.com newsletter in your mailbox each week (and win great graphics products). Click here to subscribe.

    Gary David Bouton is an author and artist who is largely responsible for the book "Inside Adobe Photoshop 6" and wouldn't mind at all if you bought a copy . Gary hosts a thread on the Photoshop Gurus site and is the moderator of a 3D modeling forum. His guide to Caligari's free trueSpace 3D app is available online. Besides being an educator/artist/all-around-nice-guy, Gary also has the largest Hawaiian shirt collection that a walk-in closet will allow, and knows J. K. Rowling's first name