Shininess!

Project Wonderful - Your ad here, right now, for as low as $0.00

Sat, 2007/08/25 - 12:36pm — Quartz

Hey everyone, I was doing a bit more artistic experimentation!

I was noticing that Mac OS X and a lot of associated applications were achieving similar looks & feels / themes by having their icons and buttons all be shiny-looking in a certain way. There are of course many variations of this, but generally all of their appearances themes were along the lines of cool, organized, simple, sleek, and sterile. Some buttons might have hard, sharp, subtle spectral reflections, and others might have diffuse, bright spectral reflections, but both give the same basic feeling.

Now I have never really made any pictures or designs that gave this same feel. I think the closest I ever came probably before this was the exclamation mark in the SSL Encryption icon you see in the top right on pages like this one or this one. (<-- This will probably be gone when we move to the new version of Drupal, so if you have no idea what I'm referencing and this blog entry is really old, that's probably why.) Or like with the heart: , although that's a little more subtle.

But now I've studied a bit the way they do it. The spectral reflection isn't the only aspect, it's just maybe a prominent one. Otherwise the buttons on http://malexminute.com/ would look pretty much like the buttons on Mac OS X.

No, the ones on Mac OS X, when I studied them, have underneath the spectral reflections a gradient. But the interesting thing about this gradient is that it's going in the opposite direction from what one would expect, and that's the important bit. You see, the buttons on Mac OS X are clearly bumps sticking out toward the viewer, and the light is clearly coming from above, as is typical. But instead of the top of the button being lighter than the bottom because it's facing the light and the bottom isn't, it's exactly the opposite. So why does it look like the buttons are bumps sticking out of the screen?

The answer I think is that if the buttons were transparent, then instead of the parts facing away from the light being dark, they too would be lighter because the other side of those parts, on the inside of the button, would be reflecting the light too!

So the buttons just look transparent, like little gems or marbles. I tried to reproduce the effect in a general sense, but the gradient isn't as pronounced. So my little splicky just looks slightly transparent, like a water balloon.

Maybe I could've done the orb better, though... $:-\$

Anyway, there it is! My general thoughts recently on graphic design.

Quartz's blog
Login or register to post comments

Comments

Sat, 2007/08/25 - 12:56pm — Quartz

Note

"The answer I think is that if the buttons were transparent, then instead of the parts facing away from the light being dark, they too would be lighter because the other side of those parts, on the inside of the button, would be reflecting the light too!" -Me

Note that this is a very simplistic explanation of the way light interacts with transparent objects; light behavior can get extremely complex, especially when dealing with such things as semitransparent objects. Our minds have developed pretty good ideas of what it looks like when light interacts with certain things, and that's really all that matters here.

-------

This bliss is not ignorance - my intellect has rested its case; the jury has reached its verdict; my emotions are now free.

—

God is leading me along a trail of miracles.

MalexMedia.Net®

Secure Login

Shininess!

Comments