Skip to content

Latest commit

 

History

History
53 lines (26 loc) · 2.22 KB

patterns-imagery-treatment-en.md

File metadata and controls

53 lines (26 loc) · 2.22 KB

Imagery Treatment

Image Load

Image Load

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.