Become a Gradient Effect Junkie!

Gradients are like gold when it comes to creating clean, sleek designs, espesially in this new world of web 2.0 (Oh yes people I used it, and how you hate me, I understand) but I guess theres no other way to describe the new use of clean gradient style layouts that are popping up all over the place. They can be used to create a large impact for backgrounds or to simply add a subtle touch to a menu or sidebar. This article hopes to turn you into a gradient junkie, so its time to get addicted!

Psst, the real secret behind creating some cool gradient combinations is to only use two or three colours that are closely related i.e. red -> dark red or red -> orange. Doing it this way ensures that the colours do not clash and cause viewers of your artwork to be blinded by some dodgy tic-tac style colour schemes.

These days I find it hard to think of a project where I didn't use some form of gradient effect or gradient mapping technique. Below are a few examples of how they can be used to great effect in many ways.

Menus/Sidebars

Just a simple fade from your background colour to a closely related colour can really help define elements of your navigation, you can also add another horizontal gradient effect for each of the menu items in a vertical menu, but remember the key word for menus keep the colours subtle as you don't want to blur out the navigation links themselves.

Another little tip for menu bars is to use a double line to seperate your menu items, I have mainly used this simple effect on menus but it can be use to great effect of any kind of coloured/gradient surface. Simply by using a closely related darker colour for one line and a faded white for the other, when you zoom out it creates a funky 3D style separation line that really stands out.

Buttons/Backgrounds

As mentioned above closely related colours are the key to creating some wicked gradient effects. Here are some examples of how gradients can be used for backgrounds to accompany a photograph or to create shiny buttons that really stand out and give your designs a bit more of a Web 2.0 style. (bam! used it again, you know you love it!)

You can find out how to create these buttons in the "Creating stylish Gradient Buttons" tutorial

Gradient Mapping

This is my favourite gradient effect, I often use this tool when creating themed or vector based graphics as it allows me to overlay a specific set of colours onto an image or photograph so that they match the rest of a design theme.

In this example the mapping techniques used have allowed me to create a themed design that uses only a certain amount of colours i.e. black white and shades of orange, this was then incorporated into the rest of the design therefore giving the whole design its own unique style using only desired colours to match a logo or brand image.

Text Effects with Gradient Overlay

Gradient can be used to great effect on all font types, simply applying some of the effect that can be found in Adobe Photoshop's Layers -> Blending options panel can really bring your artwork to life.

Use it to make certain text types stand out, it can also be used to give some meaning or help define different areas of your site for category/call to action buttons.

View the tutorial "Jazz up text with Gradient Effects" for more.