updated on 13 January 2019 | reading time: 8 minutes

Colors, Gradients, Textures

Color picker & Fill Types

The main interface to choose and manage colors in Gravit Designer in color picker popover. It is available in the Inspector panel.

To change the color click on the colored circle next to a little pipette icon in the Inspector panel.

The Color Picker popover will show up. Here you can choose different fill options like colors, gradients, and textures.

Note: We will explain different options for Fills, but the same principles apply to Borders and Effects as well.

 

Color models (RGB, HSB, CMYK)

All colors in Gravit can use one of 3 color spaces.

RGB – You can choose values for Red, Green, and Blue component of the color. Most often used for design used for screen display. RGB is an additive color model. Learn more about RGB here.

HSB – You can adjust the Hue, Saturation, and Brightness of the color. Allows for more intuitive modification of color components then RGB. This color model is also used mostly for screen design. Learn more about HSB.

CMYK – You can adjust the Cyan, Magenta, Yellow, and Key (Black) colors. CMYK is widely used in the print industry. This is a subtractive color model. Learn more about CMYK.

Solid Colors

Color fill is the default option. The object will be filled with a single Solid (flat) Color.

To pick a color first make sure that the selector (1) is set at Color Fill. Move the small dot (3) in the main pick area to choose the desired color. While dragging the color selector dot you can preview the color difference with the current color applied in the small color-swatch (6). You can change the hue of the main pick area with the hue slider (4). You can change how transparent the color will be with the Opacity slider (5).

Alternatively, you can change values directly in the fields (8) or choose predefined colors from pallets (9)

At any time you can sample a color from anywhere on the canvas by using the eyedropper icon (7).

You can change the color mode to RGB, HSB or CMYK in the selector at the top right corner of the popover (2).

Linear gradients

You can use a simple gradient between two colors, or add in multiple color points for a rainbow-like multi-color effect.

First, make sure the selector is set to Linear Gradient. To add a gradient stop point, click somewhere on the gradient bar at the top of the Color Picker popover. To move the color stop – drag it left/right. To delete a gradient stop point, click and drag it off the gradient bar. To change the color/opacity of a gradient stop point:

  1. click on the stop point to select it
  2. change the color/opacity as in a solid Color Fill

Change order of stops – reverses the gradient

Rotate the gradient left and Rotate gradient right (45 degrees). The default gradient is created horizontally. These controls change it to a 45-degree gradient in a single click and a vertical gradient in two clicks.

Alternatively, you can move the end handles of the gradient, and gradient color “stop points”, directly in the viewport. You can also rotate gradients directly at viewport. Hold / SHIFT to constrain to 45 degrees angles.

Radial (Elliptical) gradient

The Radial gradient in Gravit Designer is very powerful and when you master it you will be able to use it in some creative ways. Basically the Radial gradient is has a circle/ellipse shape.

You can add, remove, reverse, or change gradient stop points in the same manner as for Linear gradients (see above).

By default, the two gradient handles start from the center of the object and extend to its ends. At any point, there is only one active handle. It is white and all color stops are displayed on it. The other (inactive) handle will be represented as a thin blue line.

You can adjust handles directly on viewport to achieve different effects. You can move handles inside or outside the shape.

You can adjust the gradient center by moving inactive (blue) handle. This can produce some interesting dome effects. The center cannot move outside the ellipse indicated by the other handles.

Angular gradient

A circular sweeping gradient, similar to the colors on a DVD surface.

You can add, remove, reverse, or change gradient stop points in the same manner as for Linear gradients (see above).

Handle for gradient center – moves the center point for the angular sweep.

Handle for gradient start/end – changes the angle where the gradient starts/ends

Texture fill

Texture fill has many many advanced features, but the basics are simple. Often Images are used for textures, but Gravit Designer can use any object as a texture source.

First, make sure that Texture Fill is selected in the Fill type selector. You will be presented with the following interface:

(1) Image preview

(2) Choose an image – browse local computer storage

(3) Paste an image from the clipboard – good for copying from image viewer or website (as well as any object in Gravit)

(4) Stretch/tile- define how the image fits into the shape’s bounding box

  • Fill – zoom to fill shape bounding box, crop off any parts that do not fit
  • Fit – fit image within the shape bounding box, do not fill parts that are not covered by the image
  • Stretch – fit image within the shape’s bounding box, distort to fit the whole image
  • Tile – defined by the settings under the Advanced button (see below).

(5) Zoom image size: 10% minimum, 200% maximum. Only active when in Tile mode.

(6) Set as a transparency mask – use the alpha/transparency in the (PNG) texture image as a mask. Useful if you have used two or more layered fills for the shape.

 

Note: Not to be confused with standard grayscale matting where black is fully transparent and white is fully opaque

 

(7) Advanced: Closely resemble the CSS background model – which is wonderful if used for web development

(a) Repeat: Both, Horizontal, Vertical, None – define how the image repeats in a tiled effect

(b) Position: Auto, Top, Left, Center, Right, Bottom – define how the image is positioned in relation to the shape

(c) Size: Auto, Contain, Cover, Percent, Length – define how much of the shape is covered by the image

(d) Width, Height, Unit – resize the image by measurements rather than a size percentage

Presets:

  • Fill: Repeat: None, Position: Center, Size: Cover.
  • Fit: Repeat: None, Position: Center, Size: Contain.
  • Stretch: Repeat: None, Position: Center, Size: Percentage, 100%, 100%.
  • Tile: Repeat: Both, Position: Auto, Size: Auto.

Tile

Texture fill with applied Tile preset. The texture will repeat horizontally and vertically. You can change the size of tiles in Color Picker popover.

Fill

Texture fill with applied Fill preset. No matter the size of the object the texture will cover all of its area. Useful for Responsive UI design. Similar to CSS background-size: cover

Fit

Texture fill with applied Fit preset. No matter the size of the object the texture will fully fit inside the object and will be completely visible at all times. Similar to CSS background-size: contain.

Note: The pink added for clarity.

Stretch

Texture fill with applied Stretch preset. The texture will stretch with the object. This can lead to distortion of the texture.

Noise fill

Noise fill ads random (black/white or color) pixels similar to grain texture to your object. (speckles, sand texture)

Noise fill has several types:

  • Original (adds transparent pixels, so the objects or fills behind can be seen)
  • Black (adds black pixels on white background)
  • White (adds white pixels on black background)
  • Color (adds random colored pixels)

Most appropriate is to use noise as a second fill layer and use transparency or blending to add subtle grain to your shape.

Here are some examples of a noise fill:

Background fill

Shapes with a background fill are normally invisible but can be used as a selection area for effects. The effect is applied to the part(s) of any underlying object(s) covered by the shape with a background fill. Under normal circumstances, effects apply to whole objects. This is a unique Gravit Designer feature that can be very powerful and used in creative ways. It is nondestructive.

Some usage ideas:

  • Quickly change the hue or contrast of the whole page: Make a rectangle above all other objects. Apply Background fill and add Color adjust effect to it.
  • Dynamic Background blur: Make a rectangle with Background fill, add Blur effect and check the clip option. All that is underneath this rectangle will be blurred.
  • Quickly hide sensitive information from screenshot – place a rectangle above the portion you want to hide and add a blur or hexagon effect
  • Do it yourself Liquify – a circle with Bulge effect
  • Color adjustments in part of the image