daisyrust.com

tiger reflections - quartz composer patch

posted by ian grant on February 10, 2006 at 9:14 am | in creative code, graphics, quartz composer |

Download: tiger_reflections.qtz.zip

A Quartz Composer patch that will automatically produce a cool, adjustable reflection from an image, text or video input. The style is familiar from Tiger applications, particularly “Front Row” and Keynote. It is a visual style echoed across Apple’s branding and is slightly cooler than a simple drop shadow.

Control Parameters

Most are self explanatory but here are some notes:

Color: this controls the background, the ‘fade to color’ of the reflection gradient and the ‘fade to color’ of the block that fades the reflections
Gradient Point 1 and 2: This numbers control the falloff / distance of the reflection The numbers relate to the size of the image measured in pixels. To get recommendations on what values to use select Gradient Advice.

Currently the recommended values are calculated like so:

Gradient Point 1: image height (px) / 1.7
Gradient Point 2: image height (px) * 1.5

Gradient point 1 should be smaller then Gradient point 2. Gradient point 2 should be around the height of the image - but different effects can be achieved by varying it. Likewise, increasing Gradient point 1 from 0 increases the brightness of the first part of the reflection - creating a nice controllable reflection fall-off.

In a cocoa application the reflection gradient parameters could be more usefully mapped to a couple of sliders. If a simpler interface is needed, you could hard wire the ‘recommended’ values into the relevant inputs.

Gap: Makes a gap between the reflection and the image. This improves the illusion that the image is sitting on a surface.

To Do
- with a little effort the patch could be used in a cocoa application or, I think, converted to an image unit for use in other applications.

- thorough testing of how images with alpha channels work.

Key Quartz Composer Techniques
- mask and alpha manipulations.
- blending modes