Photoshop 101 - The Gradient Tool

The Gradient and Paint Bucket tools are both useful gems in Photoshop and can be used to quickly fill in areas as well as create backgrounds for websites.

The Gradient Tool - does what it says on the tin

The Gradient Tool does just what it suggests - it creates gradients. But it gives you an unbelievable amount of control of the gradients you create. You can save gradients you create for use later too. Let’s dive in.

Tip: The shortcut key for the Gradient Tool is G. Hitting G with Photoshop open will invoke the tool.

Gradient tool options

Gradient options
Gradient options

It is worth becoming familiar with the options. From left to right here is a quick overview:

Gradient examples
Gradient examples

A simple background for a website

Background gradient for a website
Background gradient for a website

One use of the gradient tool is to create a background for a website. You can do this by creating a 1px wide gradient and then using repeat-x in CSS to repeat the image across the background. When you create the gradient make sure it fades to white at the bottom so it will fade gracefully. Have a look at the example page to see it in action and to get the source code.

The Paint Bucket Tool

The paint bucket tool will fill areas or selections with a particular colour. You can alter the opacity to affect how transparent the colour is just as you can in the gradient layer. Tolerance affects how broadly the paint will fill after your click. All pretty straightforward really!


Can you help make this article better? You can edit it here and send me a pull request.

See Also