Gradients

Gradients are a great way to add lifelike lighting and shading to surfaces. When built with gradient layers and layer styles, they also ensure UI elements can be scaled and reused easily.

This article starts with a few things you probably know, but gets more advanced quite quickly.

Linear gradients

Linear gradients are gradients in their most basic form—a gradual blend between colors, following a straight line. I’m sure you knew that, so onto the more interesting stuff.

Reflected gradients

Reflected gradients are like their linear friends, but they repeat the gradient twice with the second repeat mirrored. This makes editing a little less tedious, provided it fits the result you’re trying to achieve.

Radial gradients

Radial gradients start from the center (or any chosen point) and grow outward in a circular pattern. They’re handy for creating spheres and applying effects to the edge of circular elements. The center point for the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Angle gradients

Angle gradients can be a great way to mimic environmental reflections found on highly polished metallic objects. The center point for the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Gradients on gradients

Anything worth doing is worth overdoing, right? Combining a gradient layer with a gradient layer style lets you overlay two different gradients, giving more complex and—here’s the good part—completely dynamic results. To combined the gradients, you’ll need to set a blending mode for the gradient layer style. For the examples below, I’ve used either screen (good for lightening) or multiply (good for darkening).

Dithering is everything

Adding dithering to a gradient produces smoother results. Non-dithered gradients can often contain visible banding. Dithering is even more important if your artwork is being viewed on cheaper 6-bit per channel TN LCDs and certain display types, which tend to amplify posterisation problems.

If you’re not seeing the difference, here’s an extreme, completely unrealistic example of gradient dithering in action.

Ensuring your gradients are dithered is easy—just check the appropriate box in Photoshop.

Note that gradient layer styles can’t be dithered (hopefully fixed in CS6) and gradients in placed objects (like stuff you’ve pasted from Illustrator) aren’t dithered.
If you use transparency in a gradient, that won’t be dithered either, which can be a huge issue at times. There is a solution for some specific cases—if you’re using a gradient with transparency to lighten an area with white, then using a non-transparent gradient with a screen layer blending mode will let you dither it. The same technique can be used for darkening with the multiply blending mode.

The techniques described above were used to create the new iStat Menus icon.

Gradient Maps

Quite different to other types of gradients, gradient maps can be a great way to add colour treatment, allowing for very precise control. Gradient maps use the brightness of each pixel to map to a corresponding colour in a gradient.
If the gradient starts at red and ends at blue, then everything that’s white in the image will be turned red and everything black will be turned blue. Everything in the middle tonally will map to the gradient, depending on how bright it is.
The image below was used in a poster for Kingswim, a swimming school.

Without the gradient map, things look quite different. It’s a composite of about seven photos—the boy and background were shot on black & white film, intentionally low contrast so the grain would be more prominent when the contrast was pushed by the gradient map. The gradient map also hides the colour mismatches in the compositing.

Obsessed?

Yes, I’m obsessed with gradients. I’m also obsessed with rounded rectangles, textures and setting up Photoshop so colours don’t shift when you save for web.