As far as design elements go, gradients are hot right now. Color fading from one hue to another is a treatment that can be seen on everything from app title screens to website backgrounds to all over tees. But like any other trend in design, they’re best used in moderation. We’ve put together this guide to using gradients in your next project. Let us know what you think in the comments.
Get Inspired
There’s a wide variety of inspiring gradient-based designs out there on the web. Take a look out there and you’ll find a veritable rainbow of gradient goodness. Like this web site for Aussie design studio Pixel Palace, the portfolio of Designer/Developer Erik Zuuring, or the homepage of digital production agency Symodd.
Dribbble is also a great resource for gradient inspiration. This roundup of shots tagged with “Gradients” provide interesting starting points to create your own.
Similarly, regularly running a Behance search on projects that use gradients can be a great source of novel ideas to try:
Learn The Lingo
To help you get the most out of gradients in your graphic design, it’s helpful to know a few key terms. Here are some that you might see pop up when creating or applying gradients:
Color Stops
A gradient can be thought of as the shortest distance between two colors, A and B. Color stops are the two colors that the gradient is formed between.
Opacity Stops
Just as you can define the color of a gradient stop, some formats (like SVG) let you define the opacity (or ‘see-through’ quality) of a color.
Midpoint
This is useful in determining where you want your gradient to start switching colors. Not to be confused with the midpoint of your shape or line, which can be different.
Linear Gradient
A gradient that switches colors in a single direction, usually horizontally or vertically.
Angular Gradient
A gradient that switches colors around an angled line.
Radial Gradient
A gradient that switches colors from the outside to the inside (or vice versa).
Diamond Gradient
A gradient with a diamond-shaped point at the center.
Banding
When creating gradients, sometimes you might notice that your gradient forms into strips of color, or ‘bands’. This is an unwanted effect that happens because the computer sometimes doesn’t know how to smoothly gradiate from one color to the next. To counter this, try adding a small amount of noise to your images.
How To Apply A Gradient
Next up, let’s see how to create a basic gradient. We’ll show you by using Adobe Illustrator, although almost any graphic design app should contain a similar feature.
- To apply a gradient, first look for the gradient tool. Fittingly, the tool for this in Illustrator is designated by a square gradient icon.
- You’ll need to apply the gradient to an object, like a shape or some type.
- In the options area, you’ll be able to play with the colors within your gradient, the midpoint, and also the direction in which your gradient flows.
If it’s a gradient you’ll be using again in the future, it’s wise to save your style as a swatch. Note, you can also create gradients in CSS, although you might need to be handy with code.
Gradient Goodness
Here are a few tips to keep in mind when putting together your gradients:
First up, like most things when it comes to design, it’s best to keep gradients simple. It’s best to use gradients as a subtle background element, or as a one-off to give something emphasis. Next, try and restrict your gradients to two or three contrasting colors. There are exceptions, but gradients with too many colors will end up looking like you’ve fallen in love with the rainbow filter in Photoshop. Gradients that are monotone or duotone (one or two colors) also work nicely.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
