Video Tutorial - How to use the Position & Size panel

Knowledge Base

Intro

Welcome to this Barisco tutorial! In this tutorial we’re going to have a look at the position and size panel in Barisco.

 

Part 1 – Position Properties

Just like in other graphic design tools, visual objects have a position. The position of an object can be found on your right hand side at the property panel at Position and Size.

As you can see in this case there’s a Top and Left position visible. At the position and Size panel, you can change the position of the object by clicking the smart properties that you see here. To do this just click your mouse button down and drag the property in either the left or right direction. If you looking to set a specific value for the positions: you can also just click the property and enter a value.

Besides being able to move objects using the Position and Size panel; you can also move objects on the stage by clicking the object and dragging it. As you can see the top and left properties are updated immediately. This way you can instantly see to what position you are dragging the object.

 

Part 2 – Size Properties

As you may have seen the width and height properties are located above the position properties. Just like the position properties; the size properties can be changed by dragging to left and right to change the value of the properties.

On the right hand side of the width and height properties you can find the lock aspect ratio option. With the lock aspect ratio option you can lock the aspect ratio width and height. This means that when either the width or height is changed, that the aspect ratio between the width and height property is maintained.

 

Part 3 – Positions constraints

Sometimes positioning objects from the top and left corner is not enough. Imagine that you have a layout that requires you to have an object that is positioned on the right side of the screen at all times. If you would place an object at the right side of the stage and then start to resize your browser, the object would maintain a static position relative to the left side of the screen and may even disappear from view.

To illustrate what exactly I’m talking about, I will place the black rectangle on the right side of the stage, then save the page and then preview the edition from the editions overview so that I can resize my browser window.

As you can see the black rectangle does not behave as I had intended. This is because the black rectangle uses a left position constraint.

In cases like these you can set the horizontal constraint to the right hand side instead. Now when you start to resize your browser the object will maintain its position on the right hand side at all times.

 

Part 4 – Constraint-based layouts

When making more complex designs, it possible that you want have an object that is constraint to the top and the bottom or left or right, rather than just left or right. To do this you can add additional constraints to make sure that the object maintains a position relative to those constraints too.

For example if I need some object that maintain a position on the top, left and bottom – like a vertical bar on the left; I can do this by adding additional constraints on the top, left and bottom.

I will also add an example of the same object, but this time on the right hand side, to illustrate how this would look like on both the left and the right hand side of my browser window.

 

Leave a Reply