Property Type

1. Basic Layer Properties

1.1 Alignment

The alignment tool can help you arrange the relative position of multiple layers.

1. Align Left (Alt+A)

2. Align horizontal center (Alt+H)

3. Align Right (Alt+D)

4. Align Top (Alt+W)

5. Align vertical center (Alt+V)

6. Align bottom (Alt+S)

7. Arrange

Note: Horizontal and vertical equal spacing are adjustments in one dimension, while the Arrange function will adjust in two dimensions.

Besides shortcut keys, if the conditions are met, you can also make quick adjustments by using the lower-right corner mark of the selected box.

8. Horizontal equal spacing

The objects or layers on the left and right sides will remain in their positions.

Besides shortcut keys, if the conditions are met, you can also make quick adjustments by using the lower-right corner mark of the selected box.

9. Vertical equal spacing

The objects or layers on the top and bottom sides will remain in their positions.

Besides shortcut keys, if the conditions are met, you can also make quick adjustments by using the lower-right corner mark of the selected box.

1.2 Position

You can adjust the layer position on the canvas by changing values on the X and Y axes of the right panel.

After selecting a layer, you can move it using the Arrow keys. The movement amount is a nudge amount, with the default minimum value set at 1 and the maximum at 10.

Generally, when you use the Arrow key, the nudge amount is 1. And when you press Shift+ Arrow keys, the nudge amount is 10.

You can set the nudge amount via user preferences.

1.3 Size

You can adjust the layer size on the canvas by changing values on the X and Y axes of the right panel.

Constraint proportions: If you enable this feature, when you adjust one of the dimensions (width or height) of a layer, the other dimension will be adjusted proportionally.

1.4 Fillet Radius

1. Adjust the fillet radius of the whole shape: Generally, you can adjust the value of fillet radius from the right panel.

2. Adjust the fillet radius via the control point: You can adjust the fillet radius of rectangle, star and polygon via the control point.

3. Adjust the fillet radius of a single angle: Click the Independent corners on the right panel.

After enabling this feature, you can adjust the fillet radius of each angle individually in clockwise order。

4. Adjust the fillet radius of independent corners via the control point: As mentioned above, you can adjust the fillet radius of rectangle, star and polygon via the control point. Besides, you can press the Alt or Option key when dragging the point to adjust the fillet radius of independent corners.

5. Corner smoothing: You can use this feature to achieve a smoother rounded transition as below.

1.5 Rotation

You can adjust the rotation of a layer on the canvas by either changing the rotation value on the Property panel, or by using the rotation handle that appears when you hover your mouse over one of the corners of the layer on the canvas.

1.6 Flip Layer

Another way to rotate a layer is by using the Flip horizontal and Flip vertical features.

You can find these 2 options on the right-click menu or you can use the shortcut keys:

Flip horizontal: Shift + H

Flip vertical: Shift + V

1.7 Reorder Layer

There are 3 ways to adjust layer order:

• From layer panel

On the Layer panel, click and drag the layer to change the order.

• Via shortcut keys

Bring to front: Ctrl + Shift + ]

Bring forward: Ctrl + ]

Send to back: Ctrl + Shift + [

Send backward: Ctrl + {

• From right-click menu

You can see different options for reordering layers on the right-click menu.

2. Adjust Values of Right Panel Quickly

In Pixso, you can use the mouse to drag and adjust the values on the right panel. You can adjust the default speed at which the value changes by dragging the mouse up or down.

3. Fill

Fills can be applied to the following objects and shapes in Pixso: text layers, basic shapes, vectors, Boolean operations, and canvases.

There are three types of fills available: solid color, gradient and image.

You can choose colors from the color palette or input corresponding color values, and adjust the color opacity.

By using the eyedropper tool (shortcut key I), you can sample and apply colors from any position on the canvas.

For gradient fills, you can add multiple gradient adjustment points, and the gradient effect changes according to the adjustment points.

On the Fill panel, you can create multiple colors, set opacity, and hide colors by clicking the eye icon.

4. Stroke

Set stroke color: Use the colorpicker to adjust stroke color and set opacity.

Set stroke width: Enter a value (pixel) in the provided field.

Set endpoint style based on different situations:

• When you select a vector path with only two endpoint nodes, the start and end nodes will be displayed on the right panel. The start node is the point on the left or top relative to the other endpoint, and the end node is the endpoint on the right or bottom relative to the other endpoint.
• If you select a vector path with one or more than two endpoint nodes, the endpoint properties will be displayed in the advanced properties menu of stroke.
• When you select the entire vector path, you cannot independently edit the endpoint nodes. To edit an endpoint node independently, you need to select a single vector point in vector editing mode.

Set the stroke position in shapes: center, inside or outside.

Set stroke style:

• You can set the solid and dotted line properties in the advanced properties menu.

• Dotted line parameters: the first parameter is the length of the line, and the second parameter is the gap between dots. Together they create the dotted line.

Set vertex: You can set the display effect of the stroke at the vertices, including sharp corners, rounded corners, and beveled corners (only effective when the stroke is in the middle or outside).

• Sharp corner

• Rounded corner

• Beveled corner

• Slope: Depending on the set degrees, the stroke shows a right angle or a bevel. If it is greater than the degree, the right angle is displayed. If it is less than the degree, the bevel is displayed.

5. Effect

Pixso supports shadow and blur effects.

5.1 Shadow

You can use shadow to:

• Set the distance between objects
• Set the direction of the light source
• Make your design stand out in the background
• Make objects look like three dimensional
• Stylize text and icons
• Add borders around layers or objects

Shadow can be divided into inner shadow and outside shadow, as shown below:

You can apply the shadow effect to frames, groups, components or a single layer.

After selecting a layer, click the + icon on the right side panel to add shadow. By default, the outside shadow is the first choice. Then click the shadow icon to open the effect settings.

• X: Shift the shadow along the X-axis (horizontally). Used with Y to set the direction of the light source.
• Y: Shift the shadow along the Y-axis (vertical). Used with the X to set the direction of the light source.
• Fill: Use the colorpicker and set opacity for the shadow.
• Blur: Adjust the blur or feathering of the shadow, increase the blur to soften the shadow and blend it with the background, and reduce the blur to create a sharper contrast.
• Expand: Adjust the size of the shadow to represent the distance between the foreground and background objects.

5.2 Blur

Blur is divided into Gaussian blur and background blur.

Gaussian blur helps to suggest action or movement, or to create the illusion of depth in a two-dimensional design. You can use it to:

• Anonymize information
• Soften or disperse the focus of the background
• Create abstract backgrounds from photos and images
• Copy camera depth and other photographic effects, such as bokeh

Background blur will blur any layer on the canvas except the one you select. You can think of it as a shadow.

You can use background blur to soften or distract the focus. This will divert attention from the background to the selected layer. To actually see the background blur, your need to set the proper opacity. If you set the layer's opacity to 100%, you won't see the background blur at all.

You can apply blur effects to frames, combinations, components, or individual layers. Only one layer or background blur can be added to a layer or object.

After selecting the layer, click the + icon of the Effect section on the right panel and select a blur effect.

Click the shadow icon to open the effect settings. Then you can adjust the value of background blur or Gaussian blur.

5.3 Selected Color

This section allows you to check and adjust any color applied on the selected object, even if you select multiple layers. If the color style is applied, then it will be displayed.

What you can see in this section includes the fill, stroke, solid color, gradient color and the Boolean group.

How to check:

• If the color is set as a style, then the Edit, Detach from style and Locate options will be displayed.
• If the color is a regular color, you can adjust the color value and transparency, use a colorpicker, and navigate to the shape that uses that color. When you adjust a color here, all layers in the selected layer that use this color will adjust their colors to the same one simultaneously.

Pixso automatically collapses the color list and displays the total number of colors when there is too much content in the color list. You can click to expand the list and see all colors.