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.

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook

Post a comment