User guides

Shapes and Tools

1. Frame

In Pixso, you can add the layer to the canvas directly. However, if you need to design for specific devices or screen sizes, then you can create frames.

If you have used design tools before, then you must be familiar with the frame. It is generally used to design in a certain area on the canvas. Unlike the traditional frame, Pixso allows you to nest new frames into a current frame to finish a more complex design.

In a frame, you can use features like layout grid, auto layout, constraint and prototyping.

1.1 Create a Frame

You can create a frame in 3 ways:

1. Use the shortcut key A or F.

2. Choose Frame tool in the toolbar.

1.1 Create a Frame in Pixso

3. With the methods above, you can create a frame with different sizes:

Click on the canvas to create a frame with 100 x 100 dimensions by default.
Click and drag to create a frame with custom size.
Select a preset size in the drop-down menu of the right panel.

1.1 Create a Frame in Pixso

4. Create a frame around the current object. To do it, select one or more objects and right-click on it/them, then choose Frame selection. You can also use the shortcut keys Ctrl + Alt + G or Option + Command + G.

1.1 Create a Frame in Pixso

1.2 Frame Properties

All frame properties are as below:

Fillet radius: Round the corners of the frame to create softer edges.

Cut parts beyond frame: Hide any object in the frame that is beyond the boundaries.

Layout grid: Create the layout grid to help design visual structures.

Constraint: Define how the subobject responds when the frame is resized, then restrain the object accordingly.

Auto layout: Create a dynamic frame that responds to its content for automatic typesetting.

Fill: Fill the frame with the solid color, the gradient color and images (PNG, JPEG, SVG).

Stroke: Add a stroke to the frame to create a border or outline.

Effect: Add a shadow or the blur effect to the frame.

Prototyping: Create interactive prototypes that move between frames on the canvas.

Shortcut Keys:

Select the subobject: Enter or Return
Select the next tab: Tab
Select the previous tab: Shift+Tab
Select the parent object: Shift+Enter

1.3 Nest Frame

You can create a new frame within the current frame, which will create new hierarchies or relationships:

Top frame: Any frame located directly on the canvas. For a frame to be a top-level one, it can not be nested within another frame, group, or object. Note: The top frame name is bold on the layer panel and its name is displayed on the canvas.

1.3 Nest Frame in Pixso

Nested frame: Any frame placed within another frame. The frame can be placed in the top frame or in other nested frames. The nested frame is both the parent and child frame.

Child: Any object in the frame.

1.4 Resize Frames

You can interact with the frame just like any other object on the canvas, including adjusting the size or proportion of it. There are several ways to resize the frame:

1. Drag the frame: Select the frame on the canvas or in the left sidebar, and drag a corner or an edge of the frame to resize. To ignore any constraints on subobjects, hold down the Ctrl/Command key and drag.

2. Adjust the value on the property panel: Adjust the width and height under the Frame section on the right sidebar. Mathematical operations like +, -, *, / and % (by inputting these symbols) are supported to quickly adjust the value.

1.4 Resize Frames in Pixso

3. Embrace content: You can resize the frame to the same of the sublayer by using shortcut keys (Ctrl+Alt+Shift+R or Option+Commadn+Shift+R) or by clicking the corresponding button.

1.4 Resize Frames in Pixso

2. Frame and Group

Frame and Group allow you to combine layers together so that they can be viewed as a single layer.

2.1 Frame

To add a layer to a group, simply drag it in.
To remove a layer from a group, simply drag it out.
To ungroup, select the frame, right click on it and select Ungroup selection, or use shortcut keys (Command + Shift + G or Ctrl + Shift + G).

2.2 Group

To create a group, select some layers, right click and choose Group selection, or use shortcut keys (Command + G or Ctrl + G).
To ungroup, select the group, right click and choose Ungroup selection, or use shortcut keys (Command + Shift + G or Ctrl + Shift + G).

Note:

The first time you click a layer in a group, the entire group is selected.
To select a single layer in a group, double click on it or select it from the layer panel.
When layers in the group move around, the boundaries of the group are adjusted to fit the layers in it.
You can move the content in and out of a group by dragging the layer into the layer panel.
You are allowed to nest a group into other groups.

3. Vector

3.1 Create Vector Layer

Create a vector layer by using the Pen tool.
Create a vector layer by using the Shape tool. Hold Shift while creating the shape to lock the aspect ratio to 1:1.

3.2 Edit Vector Layer

Vector editing mode allows you to select, adjust, or change properties of the individual point, line, or the entire shape. When editing an object, you can interact with existing points and lines between them, and you can use the pen to draw additional points and manipulate them.

To enter vector editing mode:

Select a path and press Return/Enter.
Select a path and click the following icon in the toolbar.

3.2 Edit Vector Layer in Pixso

To exit vector editing mode, press Return/Enter again, or click Done in the toolbar.

3.2 Edit Vector Layer in Pixso

4. Fill

Select a vector layer and enter vector editing mode. Then, click the Paint bucket in the toolbar or press shortcut key B. After that, click the area of the closed vector network to add fillers.

4. Fill in Pixso

You can add different fillers to separate areas of the vector network as long as they are separate and closed areas.

4. Fill in Pixso

If you want to change the color of an enclosed area, use the Cursor tool to click on the area, then choose a color in the Fill panel.

4. Fill in Pixso

5. Bezier Curve

Select vector layer and enter edit mode. If it's a curve, the handles are displayed. If it's a corner without handles, use the Flector from the toolbar or press shortcut key(Ctrl or Command) to click on the point to display handles and create a Bezier curve.

5. Bezier Curve in Pixso

Click and drag the control point to adjust the curve of the path.

5. Bezier Curve in Pixso

6. Fillet

Any vertex on the shape can be rounded via the fillet radius property on the right sidebar. If you select the entire path, all corners will be rounded, and if you enter edit mode, then you can select a single point and set it up individually.

7. Endpoint Style

Add a style to the end of any open path.

For a vector path with two endpoints:

If a vector path with only two endpoints is selected, the endpoint style properties will be displayed on the right panel, and you can set the style of each endpoint individually.

7. Endpoint Style in Pixso

For a vector path with more than two endpoints:

If a vector path with more than two endpoints is selected, the endpoint style properties will be displayed in the Advanced Properties on the right panel.

7. Endpoint Style in Pixso

Once a entire vector path is selected, you cannot set the end style individually. To do that, you need to choose vector point settings separately.

7. Endpoint Style in Pixso

8. How to Use Pen Tool

By default, the width of a pen will be set as 1px the first time you use it.
To use a pen, click the icon in the drop-down menu of the top toolbar or use the shortcut key P.

8. How to Use Pen Tool in Pixso

Adjust the color, width, and endpoint style from the Stroke panel.
The pen will remain active until you select another tool or press the ESC key.
Press the Shift key to draw a straight line.

9. How to Use Shape Tool

Pixso provides six preset shapes: rectangle, straight line, arrow, oval, polygon and star, which can all be accessed using the Shape tool.