Please note that the contents
of this offline web site may be out of date. To access the most
recent documentation visit the
online version
.
Note that links that point to online resources are
green
in color and will open in a new
window.
We would love it if you could give us feedback about this material
by filling
this form
(You have to be online to fill it)
Rather than relying heavily on opacity shifts, illustrations and photographs may load and transition in 3 phases at staggered durations.
The levels are adjusted for a low contrast exposure and desaturated in color. The final stage would be a full color saturation, only after the opacity is at 100%.
The lower contrast effect is a combination of a shift in gamma and black output for darker images.
Low opacity and low contrast
Full opacity and exposure
Color saturation
Aperture vs Development
Do not adjust levels in a way that will blow out the whites. This creates an effect that implies an overexposure of the aperture through a camera lens.
Do imagine the image is fading in like a photographic print in the photo developing process.
Do.
Don't.
Load and Transition
Use the ratio of the three phases (opacity, contrast, and saturation) graphed above to suit your needs. Longer duration is recommended for loads, and shorter duration is recommended for transitions.
Loading on larger screens
This process is ideal for larger screens, as in this example of loading Chrome OS wallpaper.
Adding Animation
Add a small position shift on top of this image treatment for cases like an account switch.
