Fill and stroke

Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern.

• Watch video describing this functionality: https://www.youtube.com/watch?v=ryduKCgzFr0

Change a fill or stroke:

1. Select the object(s) whose color you want to change
2. Click on the Color, Gradients, and Patterns button in the GUI Toolbar
3. Choose a solid color, gradient, or pattern.
4. Confirm the changes by clicking on the OK

Solid Color

Navigate to the Colors tab in the Resources tab where you will see a few options for solid colors:

Swatches – select the color from the pre-defined palette

HSV – mix your desired color by determining the Hue, Saturation, and Value and setting Transparency

HSL – mix your desired color by determining the Hue, Saturation, and Lightness values and setting Transparency

RGB – mix your desired color by determining the Red Green and Blue values and setting Alpha level

CMYK – select your color from the Cyan, Magenta, Yellow, Key (Black) color palette and set Alpha

SVG – select your color from the pre-defined SVG standard colors palette

Gradients

Using gradients enables you to create your own custom color blends and give your objects a plastic look. You can create smooth color gradations over one or more objects and save them for later use   on other objects.

The Resources tab contains pre-defined linear and radial gradients and patterns. You may create new gradients and patterns or modify the existing ones.

Linear gradient

The linear gradient function enables you to create horizontal, vertical, and diagonal gradient fills.

You can choose from pre-defined linear gradients in the Resources tab:

When you click on a pre-defined gradient, you will see its properties in the right side panel.

You can see the gradient preview in the small top window, and if you click on the tab Preview, you will see how the object will look.

The bottom part of the panel is divided into two tabs, Basic and Advanced:

Basic – you will find all defined colors for a selected gradient

On the basic tab panel, each color has its own controls.

Therefore, each color has the following properties:

• Color – sets the color and corresponding color code

• Opacity – specifies the alpha channel (transparency)

• Position – specifies the starting point of this color. Move the slider to the side to change the color position.

To remove a color, press the “X” button.

To add a new color, press the + Add Color button.

Advanced – you can fine-tune your custom gradient and define the id, angle, and fill options

• Id – you can name the newly created gradient
• Angle – you can change the angle of the gradient from horizontal to a custom angle
• x1, y1, x2,y2 – linear gradients are defined by the bounding box of an object they fill; x1 and y1 specify the initial point of the gradient of the bounding box; x2 and y2 represent the end point of the gradient
• Spread method – Pad – basic fill option, no reflection or repeating
  • Repeat (repeats the shading)
  • Reflect (reflects the shading)

Radial gradients

This function operates with circular gradient fills; this is the same principal as for the linear gradients, only the Advanced section is slightly different:

• Id – you can name the newly created gradient
• Radius – sets the gradient radius
• cx, cy, and r define the outermost circle of the radial gradient
• fx and fy define the focal point of the radial gradient
• Spread method – Pad – basic fill option, no reflection or repeating
  • Repeat (repeats the shading)
  • Reflect (reflects the shading)

Patterns

Different objects or images can be used as a pattern for other objects. myDESIGNER lets you choose from pre-defined patterns or create new ones, either by modification of the existing ones or by importing a file (jpg, png, jpeg) or selection. Patterns can be either raster images or vectors. If you use raster images, you might experience pixelation on tighter zoom, so if you can choose, use vector image where possible.

Predefined Patterns

Predefined patterns are simple but effective patterns for you to use. Please keep in mind that you can very easily change color or rotate gradients to suit your requirements. Usage is quite simple; select a pattern you wish to use, and if necessary, modify the parameters and hit the save button.

User Defined Patterns

All the patterns used in your view are listed here. You can also create new ones from predefined patterns or import them from files or selections.

To use a user-defined pattern, just select it and click on the OK button.

Buttons on the bottom allow you to create new patterns, either from a file or from a selection, as well as delete and duplicate existing patterns.

Pattern Import

From File

Click on the + From Picture button and select the source raster image file in the dialog window, then click on the OK button.

From Selection

Click on the + From Selection button to create a new pattern from the selection in your current view.

1. Draw the objects you would like to use as a pattern and select them.
2. Now open the resources dialog. Navigate to the Pattern tab. Now click on the + From Selection The new gradient has been created:

Parameters

The parameters of the selected gradients can be easily modified. You can, for example, change the main color of the gradient, rotate, or scale it. Please find a list of parameters below, including explanations for each one.

Example of using a pattern

We will show you a simple example of how to use a pattern in your design. We will create a simple progress bar by using and modifying a predefined pattern.

1. First, we will create tree rectangles. The top one will be used as a border, the middle one will be used as our progress indicator, and the last one will be used in the foreground to give our progress bar a plastic look.
2. Now select the middle rectangle and click on the Colors, gradients, and patterns In the pattern section, select a bar pattern.
3. In the properties on the right side of the window, click on the color chooser rectangle and select a different color. Then use the Rotate slider to rotate the pattern by 45 degrees.
4. Click on the OK button to apply a pattern to the rectangle.
5. Now put all of the rectangles together to finish the progress bar.