All Articles Photoshop
Getting Started with Color Gradients in Photoshop CS5
Geoff Blake on Sat, February 5th 0 comments
Gradients are a great way to create visual interest in your designs. But what the heck is a gradient anyway? The way I've come to describe them is, a transition between two or more colors. In other wo

Gradients are a great way to create visual interest in your designs. But what the heck is a gradient anyway? The way I've come to describe them is, a transition between two or more colors. In other words, we'll be blending at least two colors together; and in this tutorial, we'll be setting up a background gradient for our website's header area.

What size and resolution should you make your Photoshop file? Since we'll be creating a gradient for our website, we can keep everything low resolution (72ppi). As for the dimensions, that would be determined by our website's layout. Let's assume for this exercise that our website's header area is 960 pixels by 100 pixels.

But don't forget, gradients can also be used in print. In that situation, you'd just figure out how large an area of your print document you want to fill, and set your document size accordingly. Of course, you'd also be using a much higher resolution (more like 300ppi).

Okay, let's get started on creating our web gradient.

Step 1

Go ahead and create a new blank document in Photoshop.

Using our example of a gradient for a website's header, make sure to set your width and height accordingly (again, 960x100 pixels). Also, set the resolution to 72 pixels per inch and the color mode to RGB. Hit OK when you're ready.

Step 2

From the Toolbox, grab the Gradient tool.

The default gradient that's set for the Gradient tool is Foreground To Background. That means that the starting color in the gradient will be the color that's loaded into the foreground color swatch at the bottom of the Toolbox. The ending color would be the color that's loaded into the background color swatch.

You could change your foreground and background colors by clicking on their color swatches in the Toolbox, but let's take a look at Photoshop's library of preset gradients.

Step 3

On the Options bar, click the drop-down arrow beside the gradient swatch.

This opens Photoshop's Gradient Picker. You can either choose from the set of available gradients, or open another gradient library. To open a new gradient library, open the Options menu in the top-right corner of the Gradient Picker, then choose from the list of libraries towards the bottom of the Options menu.

If you opt for one of Photoshop's additional gradient libraries, you'll be asked whether you want to replace the current gradients with the new library. Click OK to replace them, or Append to add them into the current library.

Once you've chosen a gradient, you're ready to apply it to your file.

Step 4

To apply your gradient, click and drag inside the document window.

For example, click and drag from the left side of your document to the right; or from the top to the bottom. You can even drag on an angle if you wish. If you'd like your gradient to be perfectly straight either horizontally or vertically, hold down Shift as you drag.

Sometimes it takes a few tries to get the look you're after. Once you're done, you're ready to save the file out for use on the web.

Step 5

Choose File > Save As; then name your file and choose JPEG from the Format menu.

Here's what our final gradient looks like:

In a future tutorial, we'll talk about using Photoshop's Save For Web & Devices dialog box, which allows us to have much tighter control over how our images are saved out for use in web design.

From here, you'd then load your new gradient into the header in your web layout; perhaps by inserting it directly into the header, or setting it as a background graphic via CSS. As you can see, working with gradients in Photoshop is fun and easy. In yet another future tutorial, it would be fun to take a look at how to create, save, and work with custom gradients!

Related Videos
Comments (0)

You must be logged in to comment.

Elektron 109 - Cycles Explored
Elektron 109
Dream It. Do It.
Do you want to learn Elektron 109 - Cycles Explored?
Yes, I want to learn!
No Thanks, I just want to read the article.
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: