I recently discovered the magic of the gradient, and have been using it on most of my icons ever since. There are so many different uses for the gradient, and this tutorial will cover them all (or at least the ones I know of).

Here's our base image:

Highlighting

Gradients are perfect for drawing focus to certain parts of an image, and consequently downplaying others. I prefer using a reflected gradient, but depending on what effect you're looking for you can also try linear or radial. A medium color against black, set to hard light or linear light, works best.

Using #A18966 on hard light:

Using #859767 on linear light:

Using #8D91B9 on linear light:

Coloring

A gradient is wonderful for giving a blend of color to any image. Instead of setting the style to color, I like using other styles to keep a hint of the image's original color.

Using #7D7D0B and #9D5024 on linear light:

Using #8391B7 and #CD9956 on hard light:

Using #AB622C and #7A2587 on overlay:

Beam of Light

By using a reflected gradient with a medium to dark color on black, and setting the style to screen, you can create a soft beam of light on your image.

Using #9F7F31:

Using #004E90:

Using #9F7F31:

Fade to Black (or White)

A fading linear gradient has many uses. First, it can add interest to an otherwise dull and flat part of an image. Secondly, it can be used to draw focus to one corner of the icon. And, it can be used to soften a busy image so the text on top is more readable. Use a light color on a dark image, and a dark color on a light image - the color being eyedropped from the image itself.

Using #45605B on multiply:

Using #97ABA9 on screen:

Using #E0B5A5 on linear burn:

As you can see, the gradient is an incredibly flexible and helpful tool, and can very easily spice up any icon!