Design Time #3

GETTING GOOD AT GRADIENTS

For this Design Time I wanted to take a moment to discuss making good gradients. When designers are starting design, there are fundamentals that are important to understand. Color theory is one of those fundamentals that will help your art and design look much better once you understand how it all works.

Picking snappy gradients does overlap with color theory, but without getting too much into the weeds of things, I'll provide some quick pointers and rules of thumb that have helped me along the way. Nothing I say is absolute, but it will help you when you're making decisions on your gradient choices.

White as Light

There are two gradient taboos I see most often. Using white as your light source is one of them. Below is an example of this.

The gradient on the left uses white as the light source, while the gradient on the right uses a tint of blue. Now, you can always go lighter than the blue I chose, but the point of this image is to show how much more dynamic and full the image looks just by swapping out white for a tint of the same color.

The primary reason you want to avoid white as your lightest color in your gradient is most colored objects do not become pure white when light is shined on them. Instead you will see a lighter color of the dominant color, or you will see the color of the light affect the color of your object.

If your object is white, then sometimes you do want white as your lightest color to show depth and fullness. To achieve that, the object can't be white itself. Instead, you'll have to choose a midtone that will allow pure white to show up as your lightest color (but that's for another blog post).

Black as Night

The second taboo I see most often not only in gradients, but in digital painting as well is using pure black to notate shadow. Below is an example of this.

Firstly, I didn't use pure black in this example, and I'd recommend new designers to stay away from it in design. There are issues with the black color shifting when jumping from different programs that requires troubleshooting, and a really dark almost black color will do the job nicely. Sometimes you do want pure black, but I find more and more that I don't use it in my everyday design.

The gradient on the left uses black as the shadow source, while the gradient on the right uses a shade of blue as the shadow source. The darker blue can be more or less saturated to your taste, but the biggest difference you'll notice is once again how full the image looks with the gradient on the right. You'll also notice there is a dirty looking grey color that transitions from the black to the blue. You don't have that with the gradient on the right.

You'll want to avoid this grey transition as much as you can because aesthetically, it doesn't look too hot, and it makes it seem you don't know what you're doing. The best way to avoid this is to work with color and stay away from black.

If you have a blue ball and you darken the room, the ball will just seem a darker shade of itself. It's not going to turn black until you turn off the lights. Give yourself ten minutes, and that ball will still be blue even in the dark as your eyes adjust to the dark room you're standing in.

From 0 to 100

Something to watch out for is using two extreme colors to make a cohesive gradient. Nothing wrong with going to extremes, we're almost to orange in this example, which is a complementary color to blue. The issue is it creates this gray transition between the color. The reason for this is we need a bridge hue to close that color gap.

To fix this, just choose a color between the two colors to bridge the extremes. The color chosen doesn't need to be exactly between the two colors, and I'd recommend experimenting with this. Sometimes you'll need to shift to a shade or tint to make the gradient work perfectly, but if you are getting that grey gradient, the best way to fix this is by creating a triad gradient with a midpoint color.

Learning to Hue Shift

Another concept that will make your gradients and art in general is hue shifting. This corresponds to the Abney Effect where here is a perceived hue shift when white light is added to a monochromatic light source. Basically, what we want to do is shift the colors for our gradient to create a more rounded or full effect.

Here we have a gradient that uses colors from the same hue or from the "blue" spectrum. There is nothing wrong with this (it's much better than using white and black), but I think we can make this more visually interesting.

Below we have a gradient that uses a hue shift. The midtone is left alone, but the tint is shifted towards green, and the shade is shifted towards violet. The gradient is definitely more visually interesting than the gradient that doesn't use the hue shift.

Something to consider in your gradients and art in general, is that sometimes it is more important to lean towards aesthetics than reality. Maybe objects wont do hue shifts in real life, but it definitely looks better. It's important to understand the fundamentals, and then when you play with them, the experimentation is at least grounded in some understanding on how color theory, design, or gradients work.

Making Gradients Purposefully

Once you have your gradient-making skills down, the next step is learning to make your gradients with purpose. Below we have an example of shape.

When making this gradient, we want to think about how the light would fall on the object we are applying the gradient to. The left triangle suggests a sharp pinpoint-sized light that is hitting the triangle and spreading out from a centralized point.

The triangle on the left is visually suggesting a broad light that is rolling over the top of the triangle. Like I mentioned before, it is fine to go with a design that is aesthetically pleasing as opposed to real-world accurate, but here we can see that the circular shape on the triangle does not lend well to the shape.

Always think about the shape of your object, where your imaginary light is coming from, and thew visual purpose of the gradient you're adding.

Something to take into consider in general is circular gradients can be difficult to work with and look mechanical is not used properly. Sometimes you'll want to substitute a linear gradient in its place or play with multiple gradients to achieve the look you are going for.

Final Thoughts

As with anything in design, less is more. You don't want your gradients getting in the way of your overall design, unless the work is solely a gradient-focused design. Avoid slapping gradients everywhere, break up the design with some flat colors sprinkled in as well. Be critical with your gradients - if it doesn't look amazing, scrap it, and try to figure out what exactly isn't working. I hope these tips will improve your gradients in your work.