updated on 11 January 2019 | reading time: 2 minutes

Colors, Gradients, Textures

Fills

Adding and changing fills

(1) Add a fill to a selected shape (shapes can have multiple, layered fills)

(2) Remove Selected Fill

(3) Advanced Fill Settings (for selected fill)

If you click on the empty area of the fill interface, you can select the fill. You can also drag fills to re-order them for shapes with multiple layered fills.

The clickable area is highlighted in lighter grey and pink

Fill controls

(1) Click once on the fill preview circle to change the fill type (solid color, gradients, etc…) and properties.

(2) Color picker eyedropper – Pick a color from anywhere on the canvas

(3) Blending mode – blending mode for this fill only.

(4) Opacity (percentage) for this fill only.

(5) Visibility (on/off). Hide/show this specific fill.

Here is a Color picker eyedropper in action:

 

Tip: The fill preview circle can be dragged directly onto another shape into the viewport.

 

 

Tip: You can also drag from one color preview circle onto another. For example, copy a fill color onto a border color.

 

 

 

Advanced fill settings

Fill Rules

Fills have two (winding) fill rules which define how holes are calculated:

  1. Non-Zero (Fill Holes) – Internal enclosed areas are NOT regarded as holes
  2. Even-Odd (Keep Holes) – Internal enclosed areas ARE regarded as holes

Multiple Layered Fills

One very useful feature of Gravit Designer is that it enables you to add multiple fills to the same shape.

These fills can be layered and combined using opacity and blending modes. Here is an example of a single ellipse with multiple fills.

(1) Single color fill as a base

(2) Added an Image (Texture) fill, set to Overlay

(3) Added a Noise fill, with Opacity set to 80%

(4) Added a Gradient fill, set to Multiply

Color picker Eyedropper

Eyedropper tool allows you to change the color by picking a new one from the viewport:

  1. Click once on the small eyedropper icon next to the Color preview, and release. Alternatively, use the eyedropper icon available inside the Color Picker Dialog
  2. Move your cursor over the viewport
    1. When the selector square (in the middle of the magnified view) is over the color you want, click once to pick that color
  3. Use the Esc key to cancel Eyedropper mode.