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

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

Gradient picker - this allows you to be from your gradient library. Click the flyout menu to manage this.
Linear gradient - The gradient follows a line
Radial gradient - The gradient radiates from a defined point
Angle gradient - The gradient is based on a defined angle.
Reflected gradient - The gradient is reflected based on your stroke.
Diamond gradient - The gradient is a diamond effect. Useful for giving sparkle!
Mode - This is the mode of the colour on the screen.
Opacity - This defines how see through the gradient is. 100 is not at all and 0 will mean you can't see the gradient.
Reverse - flips the gradient colours.
Dither - This makes the gradient effect smoother by reducing the colour banding.
Transparent - This turns transparency on so if you want parts of your gradient to be transparent you need this.

A simple background 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!