PaintCode Power User: Library Gradients

This post is a part of series PaintCode Power User.

One of the defining features of PaintCode is Library. It brings flexibility to your drawings and makes it trivial to experiment with your designs. In the previous post I wrote about tips for Colors and now we continue with Gradients.

Quickly Create Gradient

Although there are several ways to create a new Gradient. The best way is to drag multiple colors into Gradients section. The colors will be distributed evenly within the Gradient and their order will be preserved.

Dragging Colors Into GradientsDragging Colors Into Gradients

If you have Touch Bar, it shows a button for the same operation.

Touch Bar Button for Creating GradientTouch Bar Button for Creating Gradient

Editing Gradients

Gradient EditorGradient Editor Gradient Usage DotsGradient Usage Dots

Linearity Controls

You probably noticed the little diamond-shaped controls in gradient editor. We call them Linearity Controls and they specify how the transition between two colors is distributed. By default, they are placed exactly in the middle between color stops, which makes the transition perfectly linear. Move it closer to either side and the transition will skew towards that color.

Gradient LinearityGradient Linearity

Fill Types

When you use gradient as shape fill, you can choose one of 3 drawing options:

Gradient FillsGradient Fills

Derived Colors in Gradients

Colors in physical world almost always occur in gradients. Standard light sources don’t illuminate surfaces evenly, which results in many different shades of a single hue. Designers usually attempt to reproduce this sense of light in their designs, since it helps users with understanding the context.

Flat and Plastic RectangleFlat and Plastic Rectangle

The best way to create such gradient is to use Derived Colors. Once you picked your base color, derive a darker and a lighter color, and use these in a single gradient.

Plastic ColorsPlastic Colors Plastic GradientPlastic Gradient

I hope you enjoyed gradients, because next up are Library Shadows.

To learn more about Library Gradients, read our Gradients documentation or watch Dynamic Colors video.