Screenflicker

home

A gradient tutorial in Photoshop

31 Aug 2006

In a recent article on 9rules.com, Mike Rundle lays out how to make a great looking gradient using Photoshop. As with all tools in the designers toolbox there is definitely more than one way to end up with the same effect. On that note, I'm going to lay out my method for creating subtle, realistic gradients using Photoshop. Before we get started, it's important to know that while a lot of the so-called “Web 2.0” hype sites use a lot of gradients they can — and most often — are over used. At the same time, just putting a bunch of gradients on your website will not suddenly make your website “Web 2.0” and if you try to pass if off as such you'll not be met with much kindness.

It is also very important to understand when and why gradients are used in certain designs. Mike does a good job of explaining it:

When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.

-Mike Rundle, Businesslogs & 9rules

Creating a gradient in Photoshop

The method I use to create gradients is pretty simple, just as everyone else's methods are I'm sure, but subtly different at the same time. While you could choose two colors with the Color Picker and make a gradient from one color to the other the method I use allows much more flexibility if you decide to change the colors or even want to switch from a light gradient to a shadow gradient.

Step 1: Choose your color and create your base

It goes without saying that you're first going to want to pick a background or base color for your gradient. This would be the color of the object you wish to give the 3D effect. For this I generally like to simply click on the Color Swatches in the Tool Palette. When the Color Picker appears choosing a darker color would be advisable but it's your design so feel free to play around with different colors.

Step 2: Make a new layer for the gradient

Here's were the bulk of the flexibility comes in. By creating the new layer and calling it something simple like “gradient” or “highlight” you can change transform the gradient position, size, color and transparency. The quickest way to create a new layer in Photoshop — on a Mac — is with the key combination: Command(Apple key) + Shift + N

Step 3: Setting the gradient color

Most people would have you choosing a lighter color or some would even suggest picking white as the gradient color. The method I use — or at least one method I use — is slightly different because I keep the gradient color the same as the base color. This is another area where the flexibility of this method lies.

Step 4: Making the gradient

Here's where Mike and I are very similar — hence the exactly same heading for this step. Select the gradient tool by hitting G on the keyboard — or Shift + G if the paint bucket is selected — and look at the Options bar for the gradient tool. Make sure the gradient type you're using is Foreground to Transparent — the color you've chosen will blend into the gray checkerboard pattern if you are — and that you're making a Linear gradient — first two options in the bar pictured below.

The other settings you'll need to check on are the blend mode, opacity and other options. Generally the default positions are the Normal blend mode, which you want, at 100% opacity, which you want, with the transparency option checked — if the dither option is checked there isn't any visual difference so no need to worry about that one for web graphics. The reverse option will simply reverse the colors so if, for example, your gradient was solid blue to transparent, with the reverse option checked you would actually draw a gradient that would go from transparent to solid blue.

Now all you need to do is make sure the Photoshop window is larger than your current document so you can start the gradient higher than the base/background color. When you've picked your starting place for the gradient click and drag an line in a downwards angle slightly towards the lower right corner of the base color/object/shape/background.

Getting the angle right

Be sure to experiment with the exact angle of the gradient because it's not always going to be perfect the first time — Command + Z is definitely your friend when creating gradients. The trend on the web is to emulate a light source that is coming from the top and off to the left. While I haven't measured any of the gradient angles Mike suggests a 10° past vertical angle. I say experiment, if the angle doesn't look right or fit in with the rest of your design, change it.

It is very important to use some length for the line you're dragging. A longer drag line ensures that the gradient is made much smoother and subtler — and therefore much more pleasing to the eye. This mimics how light sources and refraction's are in the real world.

Step 5: Set the blend mode for the gradient

You may be wondering where your gradient is at this point. Since we've made both the base color and gradient color it's, unless you're hiding the base layer, impossible to see any gradient whatsoever. In order to make the gradient show and maintain it's subtle nature, go to the Layers palette and select the “gradient” layer. Now using the blending mode drop-down menu — reveal all the choices by clicking on the menu — choose the option listed as “Screen”. There you have it, your subtle gradient is now visible for all to see.

Depending on the colors you've chosen you may want to reduce the opacity of the “gradient” layer. I generally reduce opacity in intervals of 10% — if the Move tool (hitting V on the keyboard will select this tool) is selected all you need to do is hit the numbers on the keyboard above the letters (the same ones that by holding shift will give you the !, @, #, etc.). With this example I set the opacity to 70%.

Variations on the theme

Throughout this tutorial I've talked about the flexibility of this method and by using the blending modes for the “gradient” layer is where you'll find the majority of that flexibility. By changing the blending mode to Exclusion gives you a slightly different type of gradient — similar to the effect of your object/base color being affected by the color of another object (as long as it's a complimentary color :^)

If you decide to change your mind and wish to make the object recessed instead of highlighted you just need to change the blend mode of the “gradient” layer to something like overlay, hard light or soft light.

And that would be the method that I use for creating gradients. By adding additional “Solid Color” layers above the base/background and gradient layers and making clipping masks out of them you can easily change the gradient and base/background colors — but that's a tutorial for another day.

comments powered by Disqus