Create a new document in Photoshop. For a horizontal gradient, you'll want your document to have a small width (as small as 1px wide!) and a larger height and, conversely, for a vertical gradient, you'll want a small height and a larger width. You'll repeat this thin image horizontally or vertically on your web page to create a gradient background effect. To get a feel for how your gradient will look, make your image wider than necessary and crop it later.

Once you've got your document set up, set your foreground and background colors to your gradient colors and use the Gradient Tool (C) to apply a gradient to your document.

Select File > Save for Web... to save your image. The gradient background image is ready to be used on your web page!

In the example shown here, I've created a tall, thin gradient for my background image.

Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos

Post a comment