Using Gradients to Enhance Your Layout

One very useful technique in giving your web layout an extra “edge” is using gradients. Photoshop comes with many default gradients, most of which use two completely different colors such as black to white. Because of this, there are some folks who mistakenly believe that a gradient has to involve two completely different colors. Turns out that some of the best gradient effects come from using two very similar colors, say a green and a slightly lighter green. By creating gradients that transition similar colors, you can create the illusion of lighting effects and are more likely to grab a user’s attention. In the example below, we have a green background with some text on it. In the second image, we have the same text only on a gradient background.

While the difference may not seem that obvious, the second image looks more dramatic because it appears as if there is a lighting source. It’s all an illusion created with just the right colors. When it comes to backgrounds, I’ll almost always use these types of gradients rather than solid colors. It’s a way of adding an extra kick even if it’s not readily obvious to the viewer.

In the web design field, the same subtle gradient technique is used regularly for buttons, corners, logos, and virtually every other design element. Below is a more noticeable example of a logo using flat colors and the same logo using gradients. You’ll notice that one appears far more 3-Dimensional than the other.

Of course, I’m not suggesting that you go anti-solid color and opt for gradients in everything. I’ve had my share of layouts that didn’t get past the cutting room floor because it was too gradient-happy :). There will be many times when solid colors are just what the doctor ordered especially when going for a highly corporate look. But just remember that when creating layouts, don’t hesitate to explore your options and have fun with it. So the next time you consider doing a standard fill, consider hitting the “G” shortcut and see what happens.