mirror of
https://github.com/icons8/lunacy-docs.git
synced 2026-09-28 02:06:33 -04:00
added updates to docs
This commit is contained in:
Louise Amber
@@ -75,6 +75,14 @@ These are the main elements of the interface:
|
||||
|
||||
* **Theme switch**. Use it to switch between the light and dark themes.
|
||||
|
||||
To adjust the scale of the interface, go to **View** > **Interface scale**, or use these shortcuts:
|
||||
|
||||
- `Ctrl + Shift + Alt + + / ⌥ + Shift + ⌘ + =` — increase scale
|
||||
- `Ctrl + Shift + Alt + - / ⌥ + Shift + ⌘ + -` — decrease scale
|
||||
- `Ctrl + Shift + Alt + 0 / ⌥ + Shift + ⌘ + 0` — reset scale
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_ui_scale.png" height="auto"><source src="/public/tips_tricks_ui_scale.mp4" type="video/mp4"></video>
|
||||
|
||||
## [Canvas](#canvas)
|
||||
|
||||
The **canvas** is your working area. Add layers to it and place them wherever you want.
|
||||
|
||||
+35
-11
@@ -124,22 +124,23 @@ To ungroup layers, select the group and click the **Ungroup** button (![Ungroup
|
||||
|
||||
## Duplicating layers
|
||||
|
||||
To duplicate an layer, select it and press `Ctrl+D`. Alternatively, you can hold down `Alt`, select the layer and drag to where you want to place the duplicate.
|
||||
|
||||
Lunacy remembers the offset of the latest duplicate. So, if you press `Ctrl+D` shortly after you create a duplicate of an layer, Lunacy will add another duplicate with the same offset as the previous one (see the demo below).
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
This can be handy for designing patterns or things alike.
|
||||
|
||||
-->
|
||||
To duplicate an layer, select it and press `Ctrl + D`. Alternatively, you can hold down `Alt`, select the layer and drag to where you want to place the duplicate.
|
||||
|
||||
Lunacy remembers the offset of the latest duplicate. So, if you press `Ctrl + D` shortly after you create a duplicate of an layer, Lunacy will add another duplicate with the same offset as the previous one (see the demo below).
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-duplicateplaceholder.png" height="auto"><source src="/public/objects-duplicate.mp4" type="video/mp4"></video>
|
||||
|
||||
And of course, you can use the **Duplicate** command and standard **Copy** and **Paste** options available on the context menu.
|
||||
|
||||
If you have generated content in the elements (like <a href="https://lunacy.docs.icons8.com/tools/#avatar-tool">avatars</a> or <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets">generated text</a>) you duplicate new generated data will appear in the copies (provided the <a href="https://lunacy.docs.icons8.com/tips/#auto-refresh">Auto refresh</a> option is enabled).
|
||||
|
||||
### Repeat grid
|
||||
|
||||
Another convenient way to duplicate elements is to use the **Repeat grid** feature. You you select two or more layers, drag the <embed type="image/svg+xml" alt="repeat_grid" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/arkPFiXr3U-oF3BIzB96uQ.svg" width="20" /> near the lower-right corner of the bounding box to duplicate the elements in a grid.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_repeat_grid.png" height="auto"><source src="/public/tips_tricks_repeat_grid.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
## Copy and Paste options
|
||||
|
||||
You can simply select a layer and use the standard `Ctrl+C` and `Ctrl+V` combination. This will create a copy of the layer right above the original.
|
||||
@@ -350,7 +351,15 @@ For this:
|
||||
|
||||
## Arranging layers along the Z-axis
|
||||
|
||||
To position layers along the Z-axis, use the send/bring commands found on the context menu or their respective shortcuts. The commands are as follows:
|
||||
### Auto Z-index
|
||||
|
||||
Lunacy automatically determines the order of layers (the Z-index) on the canvas depending on their size. For example, if you drag a smaller layer (that’s at the bottom of the layer list) over a larger one, Lunacy places the small layer on top.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_auto_z_index.png" height="auto"><source src="/public/tips_tricks_auto_z_index.mp4" type="video/mp4"></video>
|
||||
|
||||
### Arranging layers using shortcuts and the Layer list
|
||||
|
||||
To position layers along the Z-axis manually, use the send/bring commands found on the context menu or their respective shortcuts. The commands are as follows:
|
||||
|
||||
* Bring Forward (`Ctrl + ]`). Moves the selected layer one step forward.
|
||||
* Bring to Front (`Shift + Ctrl + ]`). Places the selected layer to the very front of the stack.
|
||||
@@ -396,3 +405,18 @@ Also, the **Flip Horizontally** and **Flip Vertically** commands are available o
|
||||
Another way to flip a layer is to drag selection handles as shown in the demo below.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-flipplaceholder.png" height="auto"><source src="/public/objects-flip2.mp4" type="video/mp4"></video>
|
||||
|
||||
## Creating hyperlinks between layers
|
||||
|
||||
Create hyperlinks between the layers in your document (even if they're on different pages):
|
||||
|
||||
1. Select the target layer and press `Ctrl + L` / `⌘ + L` (or select **Copy/Paste as** > **Copy link** in the context menu).
|
||||
2. Select that should lead to the target layer.
|
||||
3. Press `F2` to rename the layer, paste the target layer link from your clipboard, and press `Enter`.
|
||||
4. Hold down `Ctrl` / `⌘` and click the layer you renamed, and you’ll be redirected to the target layer.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_layer_hyperlinks.png" height="auto"><source src="/public/tips_tricks_layer_hyperlinks.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> If the layer you set as a starting point is locked, just click on it to be redirected.</p>
|
||||
</div>
|
||||
|
||||
@@ -174,6 +174,24 @@ To delete a style category, right-click the category you want to delete and sele
|
||||
|
||||
Also, you can select and delete several styles at a time.
|
||||
|
||||
## Color palettes and auto shape colors
|
||||
|
||||
All newly created documents have a color palette which includes document color variables for main, accent, background, and text colors. Deselect all layers to see it in the right panel and press <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > to generate a new palette.
|
||||
|
||||
To change palette colors manually, click on the color circles to open the color picker.
|
||||
|
||||
If you want the default shape color to be the usual gray, delete color variables by pressing <embed type="image/svg+xml" alt="delete_button" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/kZ6IazBibE-dMPVUiDhphA.svg" width="12" />.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_color_palettes.png" height="auto"><source src="/public/tips_tricks_color_palettes.mp4" type="video/mp4"></video>
|
||||
|
||||
Using the document color palette, Lunacy colors shapes automatically depending on their size and predicted purpose. Larger shapes have background colors while smaller elements are assigned primary or accent colors.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips_tricks_auto_shape_colors.png" height="auto"><source src="/public/tips_tricks_auto_shape_colors.mp4" type="video/mp4"></video>
|
||||
|
||||
**See also:**
|
||||
<br>
|
||||
<a href="https://lunacy.docs.icons8.com/tools/#shape-tools">Shape tools</a>
|
||||
|
||||
## Text styles
|
||||
|
||||
The only difference between text styles and [layer styles](#layer-styles) is that in addition to such properties as fills, shadows and blurs, text styles also feature a set of typography properties that include font size, font family, line spacing and others. All the procedures with text styles are the same as in layer styles.
|
||||
|
||||
+1
-1
@@ -132,7 +132,7 @@ This is useful for really large documents with hundreds or even thousands of lay
|
||||
|
||||
### Color palettes and auto shape colors
|
||||
|
||||
Every time you create a new document, Lunacy generates a palette with document color variables including main, accent, background and text colors. Deselect all layers to see it in the right panel and press <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > to generate a new palette.
|
||||
Every time you create a new document, Lunacy generates a palette with document color variables including main, accent, background, and text colors. Deselect all layers to see it in the right panel and press <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > to generate a new palette.
|
||||
|
||||
To change palette colors manually, click on the color circles to open the color picker. If you want the default shape color to be the usual gray, delete color variables by pressing <embed type="image/svg+xml" alt="delete_button" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/kZ6IazBibE-dMPVUiDhphA.svg" width="12" />.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user