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.

Was this article helpful?

0 0
Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment