Reflections

The false impression of reflection is among the most ordinary applications on gradients.

They regularly are of two types:

• Highlights caused by light reflecting on shiny surfaces
• That shiny table effect!

Specular highlights

Over the past couple of years, realistic effects of water droplets, shiny plastic buttons, glass beads, etc, have been extremely in trend.

I have no idea about where the trends first began, but Apple's web site must have been one of the most influential, preceding their Aqua interface look & feel.

Here are some examples:

The classic Apple.com shiny plastic tabs, still in use today.

They utilize highlights caused by a light source on top of the tabs, collectively with an inner, disperse glow that makes the plastic effect.

These tabs, from one of my recent redesigns, have a polished (from the strong white highlight) carbon-fibre appearance. The carbon effect comes from the warm diagonal-stroke pattern from the icon's glow.

 

A more nice, shiny plastic. Observe the way in which the reflections fall off at the edge of the shape, thereby producing the illusion of rounded edges.

 

The same effect on a square shape appears like a badge.

A sense of dynamism is produced by the non-horizontal angle.

 

cafepress.com shiny button makes use of a rounded reflection that recommends a wide light source coming off a rounded surface.

 

This button from web hosts Mediatemple has a more diffuse reflection, suggesting a matt glass finish.

 

That shiny table effect!

Pioneered by Apple again (I'm sure). This is a really nice effect which is so prevalent now, it's in danger of being overused, now starting to look tired and is falling out of favour with designers.

Remember, of course, that web designers are usually more sensitive to these things, so even if we're getting turned off by it, the general public may still think it's cool for some time to come.

The standard Apple look. Greyed-out and fading on a white base.

On a coloured background

Fading out to either side

More extreme angle, and a rich layered effect reflecting the colour of the solid object

Here's how to do it (from photoshoplab.com) »

Here is video tutorial on how to make glass effects.