Creating color fills with the Gradient Tool in Photoshop
The Gradient Tool creates a smooth transition between colors. A gradient can be used in backgrounds, buttons, banners and selected areas of an image.
Create a new image
Start with a new Photoshop file. The original tutorial uses a small 72 pixels/inch image for a web graphic. The exact dimensions can be adjusted for your own design.
The finished graphic can also be used as a background for HTML heading or table designs.
Select the Gradient Tool and set opacity
Select the Gradient Tool from the toolbox. In older Photoshop interfaces it may be grouped with the Paint Bucket Tool. The example uses 75% opacity.
Drag to create the gradient
Choose the foreground and background colors, then click at one end of the area, drag toward the other end and release the mouse button. The direction and length of the drag affect the transition.
Save the final graphic
The original example saves the finished strip as bg1.jpg for use in a web-page heading design.
Further Reading
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
