diff --git a/img/layers/layers-align.mp4 b/img/layers/layers-align.mp4 new file mode 100644 index 0000000..e5de935 Binary files /dev/null and b/img/layers/layers-align.mp4 differ diff --git a/img/layers/layers-align.png b/img/layers/layers-align.png new file mode 100644 index 0000000..43fe668 Binary files /dev/null and b/img/layers/layers-align.png differ diff --git a/img/layers/layers-boolean.mp4 b/img/layers/layers-boolean.mp4 new file mode 100644 index 0000000..44021c7 Binary files /dev/null and b/img/layers/layers-boolean.mp4 differ diff --git a/img/layers/layers-boolean.png b/img/layers/layers-boolean.png new file mode 100644 index 0000000..9adaca3 Binary files /dev/null and b/img/layers/layers-boolean.png differ diff --git a/img/layers/layers-collapse.mp4 b/img/layers/layers-collapse.mp4 new file mode 100644 index 0000000..f2bc9ce Binary files /dev/null and b/img/layers/layers-collapse.mp4 differ diff --git a/img/layers/layers-collapse.png b/img/layers/layers-collapse.png new file mode 100644 index 0000000..61b7709 Binary files /dev/null and b/img/layers/layers-collapse.png differ diff --git a/img/layers/layers-constraints-h.png b/img/layers/layers-constraints-h.png new file mode 100644 index 0000000..430e7d9 Binary files /dev/null and b/img/layers/layers-constraints-h.png differ diff --git a/img/layers/layers-constraints-v.png b/img/layers/layers-constraints-v.png new file mode 100644 index 0000000..2a841e3 Binary files /dev/null and b/img/layers/layers-constraints-v.png differ diff --git a/img/layers/layers-constraints.mp4 b/img/layers/layers-constraints.mp4 new file mode 100644 index 0000000..8de0da0 Binary files /dev/null and b/img/layers/layers-constraints.mp4 differ diff --git a/img/layers/layers-constraints.png b/img/layers/layers-constraints.png new file mode 100644 index 0000000..f3d6104 Binary files /dev/null and b/img/layers/layers-constraints.png differ diff --git a/img/layers/layers-create.mp4 b/img/layers/layers-create.mp4 new file mode 100644 index 0000000..e5b30e9 Binary files /dev/null and b/img/layers/layers-create.mp4 differ diff --git a/img/layers/layers-create.png b/img/layers/layers-create.png new file mode 100644 index 0000000..7e47c2d Binary files /dev/null and b/img/layers/layers-create.png differ diff --git a/img/layers/layers-deepselect.mp4 b/img/layers/layers-deepselect.mp4 new file mode 100644 index 0000000..623b721 Binary files /dev/null and b/img/layers/layers-deepselect.mp4 differ diff --git a/img/layers/layers-deepselect.png b/img/layers/layers-deepselect.png new file mode 100644 index 0000000..ce50300 Binary files /dev/null and b/img/layers/layers-deepselect.png differ diff --git a/img/layers/layers-distribute.mp4 b/img/layers/layers-distribute.mp4 new file mode 100644 index 0000000..1130a78 Binary files /dev/null and b/img/layers/layers-distribute.mp4 differ diff --git a/img/layers/layers-distribute.png b/img/layers/layers-distribute.png new file mode 100644 index 0000000..8bdad61 Binary files /dev/null and b/img/layers/layers-distribute.png differ diff --git a/img/layers/layers-duplicate.mp4 b/img/layers/layers-duplicate.mp4 new file mode 100644 index 0000000..5563dbc Binary files /dev/null and b/img/layers/layers-duplicate.mp4 differ diff --git a/img/layers/layers-duplicate.png b/img/layers/layers-duplicate.png new file mode 100644 index 0000000..63e8349 Binary files /dev/null and b/img/layers/layers-duplicate.png differ diff --git a/img/layers/layers-flip.mp4 b/img/layers/layers-flip.mp4 new file mode 100644 index 0000000..39baa81 Binary files /dev/null and b/img/layers/layers-flip.mp4 differ diff --git a/img/layers/layers-flip.png b/img/layers/layers-flip.png new file mode 100644 index 0000000..521701b Binary files /dev/null and b/img/layers/layers-flip.png differ diff --git a/img/layers/layers-focus.mp4 b/img/layers/layers-focus.mp4 new file mode 100644 index 0000000..1f4db7b Binary files /dev/null and b/img/layers/layers-focus.mp4 differ diff --git a/img/layers/layers-focus.png b/img/layers/layers-focus.png new file mode 100644 index 0000000..195d57a Binary files /dev/null and b/img/layers/layers-focus.png differ diff --git a/img/layers/layers-group.mp4 b/img/layers/layers-group.mp4 new file mode 100644 index 0000000..ad6e667 Binary files /dev/null and b/img/layers/layers-group.mp4 differ diff --git a/img/layers/layers-group.png b/img/layers/layers-group.png new file mode 100644 index 0000000..f2480da Binary files /dev/null and b/img/layers/layers-group.png differ diff --git a/img/layers/layers-hide-lock.mp4 b/img/layers/layers-hide-lock.mp4 new file mode 100644 index 0000000..b03acb0 Binary files /dev/null and b/img/layers/layers-hide-lock.mp4 differ diff --git a/img/layers/layers-hide-lock.png b/img/layers/layers-hide-lock.png new file mode 100644 index 0000000..83fc32e Binary files /dev/null and b/img/layers/layers-hide-lock.png differ diff --git a/img/layers/layers-mask.mp4 b/img/layers/layers-mask.mp4 new file mode 100644 index 0000000..be5cb22 Binary files /dev/null and b/img/layers/layers-mask.mp4 differ diff --git a/img/layers/layers-mask.png b/img/layers/layers-mask.png new file mode 100644 index 0000000..11a70d1 Binary files /dev/null and b/img/layers/layers-mask.png differ diff --git a/img/layers/layers-move.mp4 b/img/layers/layers-move.mp4 new file mode 100644 index 0000000..3fb809e Binary files /dev/null and b/img/layers/layers-move.mp4 differ diff --git a/img/layers/layers-move.png b/img/layers/layers-move.png new file mode 100644 index 0000000..7e9cf56 Binary files /dev/null and b/img/layers/layers-move.png differ diff --git a/img/layers/layers-multiselect.mp4 b/img/layers/layers-multiselect.mp4 new file mode 100644 index 0000000..ba05f5d Binary files /dev/null and b/img/layers/layers-multiselect.mp4 differ diff --git a/img/layers/layers-multiselect.png b/img/layers/layers-multiselect.png new file mode 100644 index 0000000..f19ffa9 Binary files /dev/null and b/img/layers/layers-multiselect.png differ diff --git a/img/layers/layers-panel.mp4 b/img/layers/layers-panel.mp4 new file mode 100644 index 0000000..7905ccc Binary files /dev/null and b/img/layers/layers-panel.mp4 differ diff --git a/img/layers/layers-panel.png b/img/layers/layers-panel.png new file mode 100644 index 0000000..7254835 Binary files /dev/null and b/img/layers/layers-panel.png differ diff --git a/img/layers/layers-resize.mp4 b/img/layers/layers-resize.mp4 new file mode 100644 index 0000000..b6757f2 Binary files /dev/null and b/img/layers/layers-resize.mp4 differ diff --git a/img/layers/layers-resize.png b/img/layers/layers-resize.png new file mode 100644 index 0000000..ab6cc94 Binary files /dev/null and b/img/layers/layers-resize.png differ diff --git a/img/layers/layers-rotate.mp4 b/img/layers/layers-rotate.mp4 new file mode 100644 index 0000000..4e1651a Binary files /dev/null and b/img/layers/layers-rotate.mp4 differ diff --git a/img/layers/layers-rotate.png b/img/layers/layers-rotate.png new file mode 100644 index 0000000..1ac0b52 Binary files /dev/null and b/img/layers/layers-rotate.png differ diff --git a/img/layers/layers-rtl.png b/img/layers/layers-rtl.png new file mode 100644 index 0000000..678d731 Binary files /dev/null and b/img/layers/layers-rtl.png differ diff --git a/img/layers/layers-scale.mp4 b/img/layers/layers-scale.mp4 new file mode 100644 index 0000000..6997766 Binary files /dev/null and b/img/layers/layers-scale.mp4 differ diff --git a/img/layers/layers-scale.png b/img/layers/layers-scale.png new file mode 100644 index 0000000..1f86fa0 Binary files /dev/null and b/img/layers/layers-scale.png differ diff --git a/img/layers/layers-search.mp4 b/img/layers/layers-search.mp4 new file mode 100644 index 0000000..0c5b2f8 Binary files /dev/null and b/img/layers/layers-search.mp4 differ diff --git a/img/layers/layers-search.png b/img/layers/layers-search.png new file mode 100644 index 0000000..bf00169 Binary files /dev/null and b/img/layers/layers-search.png differ diff --git a/img/layers/layers-select.mp4 b/img/layers/layers-select.mp4 new file mode 100644 index 0000000..9a6d239 Binary files /dev/null and b/img/layers/layers-select.mp4 differ diff --git a/img/layers/layers-select.png b/img/layers/layers-select.png new file mode 100644 index 0000000..cfd2d2a Binary files /dev/null and b/img/layers/layers-select.png differ diff --git a/img/layers/pages-create.mp4 b/img/layers/pages-create.mp4 new file mode 100644 index 0000000..a5d1ffb Binary files /dev/null and b/img/layers/pages-create.mp4 differ diff --git a/img/layers/pages-create.png b/img/layers/pages-create.png new file mode 100644 index 0000000..442372a Binary files /dev/null and b/img/layers/pages-create.png differ diff --git a/user-guide/layer-basics/index.njk b/user-guide/layer-basics/index.njk index db3c328..68c6d88 100644 --- a/user-guide/layer-basics/index.njk +++ b/user-guide/layer-basics/index.njk @@ -3,133 +3,226 @@ title: 04· Layer basics ---

Layer basics

-

Every object you create in Penpot’s workspace is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.

- +

Every object you create in Penpot’s viewport is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.

Pages

Pages allow you to organize layers into separate sections inside a file, and are shown in separate tabs. Subdividing a file into pages gives you the ability to split your file into logically different sections so that you can organise your work. For instance, you can use pages to separate stages of the design process but keep them in the same document. Different screen sizes, features or atomic design categories are other common ways to use pages.

You can add, remove or rename pages to suit your needs.

-

pages

- +
+ +

Layers panel

-

At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.

-

layers

+

Layers: Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.

+
+ +
+

Navigate layers using the keyboard

+

Layers are displayed from the bottom to the top of the layer stack, with layers above on the stack being shown on top in the image.

Hide and lock layers

Click on the eye icon to change the visibility of a layer. Click on the lock icon to lock or unlock a layer. A locked layer can not be modified.

-

layers

+
+ +
- -

Creating layers

+

Create layers

To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport.

Hold Shift/⇧ while creating an ellipse or a rectangle to maintain equal width and height.

-

creating layers

+
+ +
- -

Duplicating layers

+

Duplicate layers

There are several ways to duplicate a layer:

  1. You can press Ctrl/⌘ + D to duplicate a layer right over a selected layer.
  2. If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.
  3. You can also select a layer and drag while pressing Alt/⌥ so you can simultaneously duplicate and drag the new layer.
-

duplicating layers

+
+ +
- -

Deleting layers

+

Delete layers

There are a couple ways to delete a layer.

  1. You can press Supr/⌫ to delete a selected layer.
  2. If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.
-

delete layers

- -

Selecting layers

+

Select layers

The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar.

To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing Shift/⇧. If you hold Shift/⇧ and click you can deselect layers individually.

-

layers select

+
+ +
+

Selecting layers at the layers panel

  1. Click a layer to do a single selection.
  2. Press Ctrl/⌘ while clicking two or more layers to do a multiple selection.
  3. If you press Shift/⇧ while selecting two or more layers all the layers within the selection area will be selected.
-

layers select

-

Selecting layers ignoring groups (deep selection)

+
+ +
+

Select layers ignoring groups (deep selection)

If you want to select an element that is difficult to reach because is under a group of elements, hold Ctrl/⌘ to make the selection ignore group areas and treat all the objects as being at the same level.

-

layers select

+
+ +
+

Select layers inside groups

+

To select a layer inside a group you do double click. First click selects the group, second click selects a layer.

Select layer menu

At the dropdown menu (right click on a layer to show it) there's the option "Select layer" that allows the user to select one layer among the ones that are under the cursor's location.

layers select

-

Grouping layers

-

Grouped layers can be moved, transformed or styled at the same time. To group two or more layers you have to select them and then press Ctrl/⌘ + G. You can also use the option at the layers menu that you can open with right click.

-

To ungroup press Shift/⇧ + G or use the option at the layers menu that you can open with right click over the group.

-

To select a layer inside a group you do double click. First click selects the group, second click selects a layer.

-

layers grouping

+

Group layers

+

Grouped layers can be moved, transformed or styled at the same time.

+ +
+ +
- -

Masking layers

+

Mask layers

A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape.

-

To mask layers you first have to select more than one layer or a group of them. Then you can apply the masking using the option at the layers menu or by pressing Ctrl/⌘ + M. The shape that is at the lowest level at the layer list will be used as a mask.

-

To unmask press Shift/⇧ + Ctrl/⌘ + M or use the option at the layers menu.

-

layers masking

+ +
+ +
-

Moving layers

+

Move layers

To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the board.

-

Moving layers

+
+ +
-

Resizing layers

-

To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode. If you hold Shift/⇧ while resizing the object will preserve its current proportions. You can also use the design panel where you can link width and height.

-

layers

+

Resize layers

+

To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode.You can also use the design panel where you can link width and height.

+ +
+ +
- -

Rotating layers

+

Rotate layers

To rotate selected layers you can use the handlers at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold Ctrl/⌘ while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.

-

layers

+
+ +
+ +

Flip layers

+

You can find the options to flip layers in their contextual menu (select the layer and right click). You also have shortcuts to do this:

+ +
+ +
-

Flipping layers

-

To flip a layer horizontally press Shift/⇧ + H. To flip a layer vertically press Shift/⇧ + V. You can also find these actions at the layers menu.

-

layers flipping

- - -

Scale tool for texts and groups

+

Scale elements, texts and properties

Activate the scale tool by pressing K or from the main file menu to scale elements while maintaining their visual aspect. Once it is activated you can resize texts, layers and groups and preserve their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners. -

Scaling groups and texts

+
+ +
-

Aligning and distributing layers

+

Align and distribute layers

Aligning and distributing layers can be found at the top of the Design panel.

-

Aligning will move all the selected layers to a position relative to one of them. For instance aligning top will align the elements with the edge of the top-most element.

-

layers

-

Distributing objects allows you to position them vertically and horizontally with equal distances between them.

-

layers

+

Align layers

+

Aligning will move all the selected layers to a position relative to one of them. For instance aligning top will align the elements with the edge of the top-most element.

+
+ +
+

Distribute layers

+

Distributing objects to position them vertically and horizontally with equal distances between them.

+
+ +

Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).

-

Search layers

+
+ +
-

Collapsing groups and boards

+

Collapsing groups and boards

Groups and boards can have their contents expanded and collapsed. Click on the arrow at the right side to toggle the visibility of their contents.

To collapse all the layers, and just display the boards, press Shift/⇧ + left click over the right arrow of a group or a board to collapse them all.

-

Collapsing groups and boards

+
+ +

Boolean operators

It is possible to combine shapes in a group in different ways to create more complex objects by using "boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available or more editing. There are five boolean operations available: union, difference, intersection, exclusion and flatten. Using boolean operations allows many graphic options and possibilities for your designs.

-

boolean operators

- +
+ +
-

constraints

+
+ Horizontal constraints +

Vertical constraints

-

constraints

+
+ Vettical constraints +

Focus mode

@@ -176,10 +277,16 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
  • Select one or more elements.
  • Right click to show the menu and select the option "Focus on" or press F.
    • -

    focus-mode

    +
    + +

    RTL support

    Diversity and inclusion is one major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.

    If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.

    -

    rtl support

    +
    + RTL support +
    \ No newline at end of file