starred/lunacy-docs
1
0
Fork 0
mirror of https://github.com/icons8/lunacy-docs.git synced 2026-08-24 10:13:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Apply changes for moving to lunacy.docs.icons8.com (#64)

Browse Source 
* fix links

* add search

* add baseUrl to links in search

* small refactor

* fix content style issues

* fix search result styles

* fix links and urls for new domain

* Update CNAME

* fix baseurl

* CNAME

Co-authored-by: yaroslav_yudi <yaskih@mail.ru>
This commit is contained in:
Yaroslav Yudinskikh
2022-11-08 15:28:41 +03:00
committed by GitHub
co-authored by yaroslav_yudi
parent 5e2ef787b6
commit 6c0a404466
24 changed files with 492 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -13,5 +13,5 @@ We're looking for your help editing and expanding it. In particular, we'll gladl
## Related
* [Lunacy home page](https://icons8.com/lunacy)
* [Release notes](https://docs.icons8.com/lunacy-docs/release-notes/)
* [Release notes](https://lunacy.docs.icons8.com/release-notes/)
* [Suggest feature](http://lunatics.icons8.com)
docs/_config.yml
+1 -1
View File
@@ -1,5 +1,5 @@
doks:
baseurl: /lunacy-docs
baseurl:
color_theme: blue
micro_nav:
- title: About Lunacy
docs/cloud.md
+5 -5
View File
@@ -83,7 +83,7 @@ You cannot edit Cloud versions of documents shared with you.
### Libraries
**Libraries** are *shared documents* that you can use similarly to what we in Lunacy call <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">UI kits</a>. When the owner of the file updates it in the Cloud, the updates become available to everyone who has access to the file. For details, click [here](#working-with-libraries).
**Libraries** are *shared documents* that you can use similarly to what we in Lunacy call <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>. When the owner of the file updates it in the Cloud, the updates become available to everyone who has access to the file. For details, click [here](#working-with-libraries).
## Signing into Sketch Cloud
@@ -140,7 +140,7 @@ To save a document to Sketch Cloud:
If you've been working with a file that you already had on your computer, the local file will close and a new file tab with the Cloud document will appear once the uploading is complete. Cloud documents appear in the Lunacy interface with the Cloud icon in front of their names (see the demo below). Bear in mind that the local file and the Cloud file are two independent files. Changes to the local file will not affect the Cloud one and vice versa.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/cloud-savedocplaceholder.png" height="auto"><source src="/lunacy-docs/public/cloud-savedoc.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/cloud-savedocplaceholder.png" height="auto"><source src="/public/cloud-savedoc.mp4" type="video/mp4"></video>
## Updating a document in the Cloud
@@ -230,7 +230,7 @@ The screenshot below shows a view of the context menu of a shared document with
The available options include:
* **Open**: Opens the document in Lunacy (view only).
* **Add to UI Kits**: Available for libraries only. Adds the library to the list of <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">UI kits</a>. For details, click [here](#working-with-libraries).
* **Add to UI Kits**: Available for libraries only. Adds the library to the list of <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>. For details, click [here](#working-with-libraries).
* **Download**: Downloads the document to your computer.
* **View on Cloud**: Opens the document's Sketch Cloud webpage. There you can leave your comments to the document,
* **Copy link**: Copies the link to the document to your clipboard.
@@ -239,9 +239,9 @@ The available options include:
## [Working with libraries](#working-with-libraries)
Libraries are shared documents that can be used as <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">UI kits</a>. To provide for this, the owner of the document should enable the **Use as Library** option in the [document settings](#sharing-documents).
Libraries are shared documents that can be used as <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>. To provide for this, the owner of the document should enable the **Use as Library** option in the [document settings](#sharing-documents).
>**Note**: You should understand that to be able to use libraries according to their intent, library elements must be saved as <a href="https://docs.icons8.com/lunacy-docs/components/" target="_blank">components</a>.
>**Note**: You should understand that to be able to use libraries according to their intent, library elements must be saved as <a href="https://lunacy.docs.icons8.com/components/" target="_blank">components</a>.
Like other Cloud documents, libraries appear in the list of documents in the Cloud panel. You can quickly find them by applying the *Libraries* filter. To add a library to UI kits, click the respective command on the context menu.
docs/clouddocs.md
+1 -1
View File
@@ -136,7 +136,7 @@ To delete a cloud document:
Deleted documents get to the **Deleted** section of the **Home** tab from where you can either restore the document or permanently delete it.
![Deleting cloud documents](/lunacy-docs/public/deleting_cloud_doc.png)
![Deleting cloud documents](/public/deleting_cloud_doc.png)
<div class="callout callout--warning">
<p><strong>Note:</strong> The maximum storage period of deleted documents for free users is 30 days. Older documents get archived and cannot be restored.</p>
docs/components.md
+21 -21
View File
@@ -29,7 +29,7 @@ Moreover, you can also change the text on one or even all instances. That will b
The demo below demonstrates the effect and efficiency of using components in designs.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/symbols-demo65ph.png" height="auto"><source src="/lunacy-docs/public/symbols-demo65.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/symbols-demo65ph.png" height="auto"><source src="/public/symbols-demo65.mp4" type="video/mp4"></video>
## [Creating components](#creating-components)
@@ -118,7 +118,7 @@ To view a larger preview of a component, hover the cursor over the component ico
To unfold/fold the content of all component categories, right-click anywhere over the category list and select **Expand All/Collapse All** on the displayed menu.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/components-panelph.png" height="auto"><source src="/lunacy-docs/public/components-panel.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/components-panelph.png" height="auto"><source src="/public/components-panel.mp4" type="video/mp4"></video>
Also, to quickly find the required component, you can type its name in the search field at the top of the **Component** panel.
@@ -171,7 +171,7 @@ There are two ways to edit a main component:
The changes you make immediately apply to all the component instances across the project (see the demo below), except for the instances with respective overrides.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/symbols-editmasterph.png" height="auto"><source src="/lunacy-docs/public/symbols-editmaster65.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/symbols-editmasterph.png" height="auto"><source src="/public/symbols-editmaster65.mp4" type="video/mp4"></video>
**Way 2**
@@ -225,7 +225,7 @@ To add an instance to a project page:
Also, you can hold down the `Ctrl` or `Shift` key, select and then drop several component instances on the canvas at a time.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/components-addinstph.png" height="auto"><source src="/lunacy-docs/public/components-addinst.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/components-addinstph.png" height="auto"><source src="/public/components-addinst.mp4" type="video/mp4"></video>
### [Replacing instances](#replacing-instances)
@@ -250,7 +250,7 @@ There are two ways to replace an instance on the canvas.
2. In the **Component** section of the Inspector panel, click the down arrowhead to unfold the menu.
3. Use the menu to find and select the replacement component.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/components-replaceinst65-way2ph.png" height="auto"><source src="/lunacy-docs/public/components-replaceinst65-way2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/components-replaceinst65-way2ph.png" height="auto"><source src="/public/components-replaceinst65-way2.mp4" type="video/mp4"></video>
The menu features the following sections:
@@ -258,11 +258,11 @@ The menu features the following sections:
* **Commands**: Shows the list of component-related commands. Click [here](#component-related-commands) for details.
* **Related**: Shows the components that share the same category/subcategory with the selected component instance.
* **Categories**: Shows the list of available component categories. You can click through the categories and subcategories to find the required component. For your convenience, the category and subcategories to which the selected component instance belong will have a dot next their names (see the gif below). For details about how to organize components, read [here](#organizing-components).
* **UI kits**: Shows the list of external UI kits from where you can also select a replacement. For details about UI kits, click <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">here</a>.
* **UI kits**: Shows the list of external UI kits from where you can also select a replacement. For details about UI kits, click <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">here</a>.
<div class="callout callout--info">
<p><strong>Tip:</strong> The size of the menu depends on the number of components and component categories in your document. If you don't see the content of the upper or lower menu sections in full, use the scroll.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -287,15 +287,15 @@ The commands are as follows:
| Command | Description | Shortcut (Windows, Linux) | Shortcut (macOS) |
| --- | --- | --- | --- |
| Create Component | Creates a new component. Optionally, you can use the **Create component** button which appears at the top of the window (see the figure above). | `Ctrl+Alt+K` | `⌥⌘K` |
| Create New Component State | Creates a new [component state](https://docs.icons8.com/lunacy-docs/components/#component-states). | `Ctrl+Alt+S` | `⌥⌘S` |
| Create New Component State | Creates a new [component state](https://lunacy.docs.icons8.com/components/#component-states). | `Ctrl+Alt+S` | `⌥⌘S` |
| Go to Main Component | Brings you to the main component of the selected instance. To return to the instance from the main component, click the **Back to instance** button that will appear in the top-left corner of the canvas. | `Ctrl+Alt+E` | `⌥⌘E` |
| Detach from Components | When you detach an instance from its main component, it becomes a group. All further changes to the main component will no longer apply to its ex-instance. | `Ctrl+Alt+D` | `⌥⌘D` |
| Detach from Library | This command applies only to components from external files, i.e. to components from UI kits. Detached components become document components and appear on the **Components** tab and the [Components page](https://docs.icons8.com/lunacy-docs/components/#components-page). For more information about UI kits, click [here](https://docs.icons8.com/lunacy-docs/libraries/#ui-kits). | `-` | `-` |
| Detach from Library | This command applies only to components from external files, i.e. to components from UI kits. Detached components become document components and appear on the **Components** tab and the [Components page](https://lunacy.docs.icons8.com/components/#components-page). For more information about UI kits, click [here](https://lunacy.docs.icons8.com/libraries/#ui-kits). | `-` | `-` |
| Reset Instance Size | By using this command you can at any moment restore the original size of any component instance. | `Ctrl+Alt+R` | `⌥⌘R` |
| Reset Overrides | Use this command to undo all overrides and restore the initial look of an instance. For this, you can also use the reset overrides button that appears in the **Component** section of the Inspector panel, after an override takes place. | `-` | `-` |
| Send to Component page | This command applies only to main components and becomes available only when a component is not on a dedicated components page. | `-` | `-` |
| Convert Component to Artboard | This command applies only to main components. It converts the selected main component into an artboard with a group of objects. All the instances of the component convert into groups. | `Ctrl+Shift+Y` | `⌘ShiftY` |
| Organize Components | A click over this command opens the components panel, where you can organize components as described [here](https://docs.icons8.com/lunacy-docs/components/#organizing-components). | `-` | `-` |
| Organize Components | A click over this command opens the components panel, where you can organize components as described [here](https://lunacy.docs.icons8.com/components/#organizing-components). | `-` | `-` |
-->
@@ -317,7 +317,7 @@ The commands are as follows:
</tr>
<tr>
<td>Create New Component State</td>
<td>Creates a new <a href="https://docs.icons8.com/lunacy-docs/components/#component-states">component state</a>.</td>
<td>Creates a new <a href="https://lunacy.docs.icons8.com/components/#component-states">component state</a>.</td>
<td><code>Ctrl+Alt+S</code></td>
<td><code>⌥ ⌘ S</code></td>
</tr>
@@ -335,7 +335,7 @@ The commands are as follows:
</tr>
<tr>
<td>Detach from Library</td>
<td>This command applies only to components from external files, i.e. to components from UI kits. Detached components become document components and appear on the <B>Components</B> tab and the <a href="https://docs.icons8.com/lunacy-docs/components/#components-page">Components page</a>. For more information about UI kits, click <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">here</a>.</td>
<td>This command applies only to components from external files, i.e. to components from UI kits. Detached components become document components and appear on the <B>Components</B> tab and the <a href="https://lunacy.docs.icons8.com/components/#components-page">Components page</a>. For more information about UI kits, click <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">here</a>.</td>
<td><code>-</code></td>
<td><code>-</code></td>
</tr>
@@ -365,7 +365,7 @@ The commands are as follows:
</tr>
<tr>
<td>Organize Components</td>
<td>A click over this command opens the components panel, where you can organize components as described <a href="https://docs.icons8.com/lunacy-docs/components/#organizing-components">here</a>.</td>
<td>A click over this command opens the components panel, where you can organize components as described <a href="https://lunacy.docs.icons8.com/components/#organizing-components">here</a>.</td>
<td><code>-</code></td>
<td><code>-</code></td>
</tr>
@@ -402,11 +402,11 @@ Let's assume that we are designing a contact UI. We have prepared two templates:
![A view of the components page](public/symb-tutorial1.png)
>**Note:** To demonstrate Lunacy capabilities to the maximum, we have also added some layer and text styles. For details about them, click <a href="https://docs.icons8.com/lunacy-docs/layerstyles/" target="_blank">here</a>.
>**Note:** To demonstrate Lunacy capabilities to the maximum, we have also added some layer and text styles. For details about them, click <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">here</a>.
Now, we'll move from the components page to our project page, add one of the templates to the artboard and see the power of components in action.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/components-tutorialbeginph.png" height="auto"><source src="/lunacy-docs/public/components-tutorialbegin.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components-tutorialbeginph.png" height="auto"><source src="/public/components-tutorialbegin.mp4" type="video/mp4"></video>
### Image overrides
@@ -428,7 +428,7 @@ Also, you can use the Lunacy photo and image libraries. We will do it for overri
The video below shows both methods of overriding images.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/components-imageoverrideph.png" height="auto"><source src="/lunacy-docs/public/components-imageoverride.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components-imageoverrideph.png" height="auto"><source src="/public/components-imageoverride.mp4" type="video/mp4"></video>
### Text overrides
@@ -465,10 +465,10 @@ Add the contact's email:
The gif below demonstrates text overrides described in Steps 2 and 3.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/components-textoverrideph.png" height="auto"><source src="/lunacy-docs/public/components-textoverride.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/components-textoverrideph.png" height="auto"><source src="/public/components-textoverride.mp4" type="video/mp4"></video>
For details, about text generation and text snippets, click <a href="https://docs.icons8.com/lunacy-docs/text/#text-generation-and-text-snippets" target="_blank">here</a>.
For details, about text generation and text snippets, click <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets" target="_blank">here</a>.
### Nested components overrides
@@ -501,7 +501,7 @@ The procedure is as follows:
-->
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/components-nestedoverrideph.png" height="auto"><source src="/lunacy-docs/public/components-nestedoverride.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components-nestedoverrideph.png" height="auto"><source src="/public/components-nestedoverride.mp4" type="video/mp4"></video>
As you might notice, at the end we also made a text override.
@@ -531,7 +531,7 @@ For this:
1. Find and select the override in the Layer List or select it on the canvas.
2. Apply the new style from the Inspector or from the **Styles** tab as shown in the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/components-nestedoverrideph.png" height="auto"><source src="/lunacy-docs/public/components-stylesoverride.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components-nestedoverrideph.png" height="auto"><source src="/public/components-stylesoverride.mp4" type="video/mp4"></video>
Repeat the procedure to override text styles of the phone number and email address.
@@ -542,7 +542,7 @@ If your template features a hotspot, you can override its target artboard. Optio
### Tint overrides
For details about tint overrides, read <a href="https://docs.icons8.com/lunacy-docs/styling/#tint-overrides" target="_blank">here</a>.
For details about tint overrides, read <a href="https://lunacy.docs.icons8.com/styling/#tint-overrides" target="_blank">here</a>.
## Duplicating components
docs/editing.md
+16 -16
View File
@@ -26,15 +26,15 @@ page_nav:
## Introduction
If we put aside such specific <a href="https://docs.icons8.com/lunacy-docs/layers/#introduction" target="_blank">layer types</a> as artboards and hotspots, all layers in Lunacy that are not text or rasters are vector shapes.
If we put aside such specific <a href="https://lunacy.docs.icons8.com/layers/#introduction" target="_blank">layer types</a> as artboards and hotspots, all layers in Lunacy that are not text or rasters are vector shapes.
Lunacy provides a set of pre-made shapes that you can add in no time using the <a href="https://docs.icons8.com/lunacy-docs/tools/#shape-tools" target="_blank">shape tools</a>. Also, you can make use of the <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">pen</a> and <a href="https://docs.icons8.com/lunacy-docs/tools/#pencil-tool" target="_blank">pencil</a> tools to create freehand shapes and paths. Among the latter two, we should pay special attention to the pen tool, which allows you to edit vector shapes, both pre-made and freehand.
Lunacy provides a set of pre-made shapes that you can add in no time using the <a href="https://lunacy.docs.icons8.com/tools/#shape-tools" target="_blank">shape tools</a>. Also, you can make use of the <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">pen</a> and <a href="https://lunacy.docs.icons8.com/tools/#pencil-tool" target="_blank">pencil</a> tools to create freehand shapes and paths. Among the latter two, we should pay special attention to the pen tool, which allows you to edit vector shapes, both pre-made and freehand.
Another important thing for working with shapes is Boolean operations that allow you to combine shapes of all kinds and create even more fancy shapes whose diversity depends only on your creativity.
This section focuses on how to edit and transform vector shapes. For information about creating pre-made shapes, read <a href="https://docs.icons8.com/lunacy-docs/tools/#shape-tools" target="_blank">here</a> and <a href="https://docs.icons8.com/lunacy-docs/layers/#adding-layers" target="_blank">here</a>. For details about creating shapes with the pen tool, read <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">here</a>.
This section focuses on how to edit and transform vector shapes. For information about creating pre-made shapes, read <a href="https://lunacy.docs.icons8.com/tools/#shape-tools" target="_blank">here</a> and <a href="https://lunacy.docs.icons8.com/layers/#adding-layers" target="_blank">here</a>. For details about creating shapes with the pen tool, read <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">here</a>.
For information how to apply fills, borders, shadows and blurs, refer to the <a href="https://docs.icons8.com/lunacy-docs/styling" target="_blank">Styling</a> section.
For information how to apply fills, borders, shadows and blurs, refer to the <a href="https://lunacy.docs.icons8.com/styling" target="_blank">Styling</a> section.
## Transforming shapes through the Inspector
@@ -51,7 +51,7 @@ These controls include:
The demo below shows these controls in action.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-transform1placeholder.png" height="auto"><source src="/lunacy-docs/public/shapes-transform1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-transform1placeholder.png" height="auto"><source src="/public/shapes-transform1.mp4" type="video/mp4"></video>
### Adjusting the corner radius setting for rectangles
@@ -60,7 +60,7 @@ There are two more ways of changing the corner radius setting for rectangles dra
1. Drag the circle handles that appear inside a rectangle when you select it. This will change the radii of all corners. To change the radius of a single corner, hold `Alt` while dragging.
2. In the **Corner radius** control, enter four values separating them with spaces. This will be the values of the corner radii (starting from the top-left and going clockwise). Press `Enter` to submit.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-cronerradplaceholder1.png" height="auto"><source src="/lunacy-docs/public/shapes-cronerrad2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-cronerradplaceholder1.png" height="auto"><source src="/public/shapes-cronerrad2.mp4" type="video/mp4"></video>
**Note:** The above methods won't work with rectangles drawn with the Pen tool.
@@ -69,15 +69,15 @@ See also the demo in the [Vector editing](#vector-editing) subsection. It shows
### Smooth corners
You can create shapes with perfectly smooth corners like in Apple interfaces and products.
To switch between round (default) and smooth corners, click ![Smooth corner button](/lunacy-docs/public/smoothcornerbtn.png) next to the corner radius field in the Inspector.
To switch between round (default) and smooth corners, click ![Smooth corner button](/public/smoothcornerbtn.png) next to the corner radius field in the Inspector.
The figure below shows the difference between smooth (red) and round (blue) corners.
![Smooth vs Round corners](/lunacy-docs/public/rn-smoothcorner.png)
![Smooth vs Round corners](/public/rn-smoothcorner.png)
## [Vector editing](#vector-editing)
**Note**: Before you get down to reading this subsection, we recommend you get acquainted with <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">this</a> article first. It provides the basic information about the structure of vector layers, paths, point types and the usage of the Pen tool.
**Note**: Before you get down to reading this subsection, we recommend you get acquainted with <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">this</a> article first. It provides the basic information about the structure of vector layers, paths, point types and the usage of the Pen tool.
To enable the layer edit mode, select the shape and then do one of the following:
@@ -106,7 +106,7 @@ In general, vector editing is all about manipulations with points and bending se
The next demo shows all the above procedures in action.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-editmode1.png" height="auto"><source src="/lunacy-docs/public/shapes-vectorediting3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-editmode1.png" height="auto"><source src="/public/shapes-vectorediting3.mp4" type="video/mp4"></video>
## Boolean Operations
@@ -127,7 +127,7 @@ Lunacy provides four types of Boolean operations:
The demo below shows how Boolean operations work.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-booleansplaceholder.png" height="auto"><source src="/lunacy-docs/public/shapes-booleans.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-booleansplaceholder.png" height="auto"><source src="/public/shapes-booleans.mp4" type="video/mp4"></video>
When you apply a Boolean operation, the selected shapes become a Boolean group. The figure below shows a view of a Boolean group in the Layer List. Note that there is an icon next to one of the shapes. It indicates the type of the Boolean operation currently applied. By clicking this icon you invoke a menu where you can select another operation.
@@ -137,7 +137,7 @@ You can select individual shapes within the group through the Layer List or on t
<div class="callout callout--info">
<p><strong>Tip:</strong> There is no special button or menu option to disassemble a Boolean group. But you can do it by dragging shapes out of the group in the <b>Layers</b> list</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -154,7 +154,7 @@ The flattening operation is another method of creating complex shapes by combini
The next demo shows how flattening works.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-flattenplaceholder.png" height="auto"><source src="/lunacy-docs/public/shapes-flat.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-flattenplaceholder.png" height="auto"><source src="/public/shapes-flat.mp4" type="video/mp4"></video>
## Masks
@@ -167,7 +167,7 @@ To create a mask:
3. Select the mask shape and the target layer(s).
4. On the context toolbar, click the **Toggle mask** button (![Toggle mask button](public/shapes-togglemaskbtn.png)) or press `Ctrl+M`. The **Toggle mask** option is also available on the context menu.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/shapes-masksplaceholder.png" height="auto"><source src="/lunacy-docs/public/shapes-masks.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/shapes-masksplaceholder.png" height="auto"><source src="/public/shapes-masks.mp4" type="video/mp4"></video>
When you apply a mask, Lunacy creates a mask group in the Layer List.
@@ -181,7 +181,7 @@ To remove a mask, select the mask group in the Layer List or on the canvas and c
The **Outline stroke** option (`Ctrl+Shift+O`) appears on the context menu and on the **Layer** menu when you select a shape with a border. It allows you to convert that border into an independent layer. Watch the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/shapes-outlinestrokeplaceholder.png" height="auto"><source src="/lunacy-docs/public/shapes-outlinestroke.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/shapes-outlinestrokeplaceholder.png" height="auto"><source src="/public/shapes-outlinestroke.mp4" type="video/mp4"></video>
## Rasterizing vector shapes
@@ -196,4 +196,4 @@ For this:
![Rasterizing vector shapes](public/shapes-rasterize.png)
See also <a href="https://docs.icons8.com/lunacy-docs/interface/#show-pixels-on-zoom" target="_blank">Show pixels on zoom</a>.
See also <a href="https://lunacy.docs.icons8.com/interface/#show-pixels-on-zoom" target="_blank">Show pixels on zoom</a>.
docs/export.md
+7 -7
View File
@@ -92,7 +92,7 @@ The basic controls in this panel are the following:
You can define as many formats and sizes as you need. For this, just click the plus icon to add a new row of settings.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/export-panelph.png" height="auto"><source src="/lunacy-docs/public/export-settings.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/export-panelph.png" height="auto"><source src="/public/export-settings.mp4" type="video/mp4"></video>
For removing export settings, click the trash can icon.
@@ -111,7 +111,7 @@ There are two ways of creating export presets.
3. Enter the name of the preset and click **Save**. Now, your custom preset will appear on the export settings menu.
![Export presets in Lunacy](/lunacy-docs/public/rn-exportprests.png)
![Export presets in Lunacy](/public/rn-exportprests.png)
**Way 2**
@@ -165,7 +165,7 @@ Slices are a special type of layers that allows you to export certain parts of y
To add a slice you can:
* Use the <a href="https://docs.icons8.com/lunacy-docs/tools/#slice-tool" target="_blank">slice tool</a>.
* Use the <a href="https://lunacy.docs.icons8.com/tools/#slice-tool" target="_blank">slice tool</a>.
* Click the slice icon (![Slice icon](public/export-sliceicon.png)) in the export section of the Inspector. The icon appears only when you select a single layer. A click over the icon creates a slice of the same size as of the selection frame around the layer. You can resize it by dragging handles, if necessary.
When you select a slice, two additional parameters appear in the export panel:
@@ -208,7 +208,7 @@ When exporting a project, Lunacy creates folders whose names correspond to the n
To export a project:
1. Press `Esc` to deselect all layers. The **Export project** section appears in the Inspector.
2. Define the export settings as described <a href="https://docs.icons8.com/lunacy-docs/export/#export-settings-size-suffixprefix-format">above</a>.
2. Define the export settings as described <a href="https://lunacy.docs.icons8.com/export/#export-settings-size-suffixprefix-format">above</a>.
3. Click **Export Project**.
4. In the displayed dialog box, browse to the target folder and confirm your intent.
5. Once the procedure is complete, the **Open file location** link appears at the bottom of the Inspector. Click the link to see the resulting folder(s) and file(s).
@@ -219,7 +219,7 @@ You can upload your designs to our Cloud and instantly share them with other peo
<!--
>**Note:** Do not confuse Icons8 Cloud and Sketch Cloud. Lunacy also supports the latter, but these are two different clouds. For details about working with Sketch Cloud, read <a href="https://docs.icons8.com/lunacy-docs/cloud" target="_blank">here</a>.
>**Note:** Do not confuse Icons8 Cloud and Sketch Cloud. Lunacy also supports the latter, but these are two different clouds. For details about working with Sketch Cloud, read <a href="https://lunacy.docs.icons8.com/cloud" target="_blank">here</a>.
-->
@@ -240,7 +240,7 @@ You can export to cloud:
<div class="callout callout--info">
<p><strong>Productivity Tip:</strong> The <code style="background: white">Alt+С + C</code> shortcut allows you to instantly upload a layer to Icons8 cloud and get a link to it. Just select the required layer and use the shortcut. That's it! The link to the export file is already in your clipboard. You can share it right away. This option is also available on the context menu.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -270,7 +270,7 @@ To delete a link from the list, click the trash can icon next to it.
To delete a file from the cloud, right-click the link to the file, then click **Remove this file from Lunacy servers**. After that you can click the link to make sure that it no longer works and then delete the link itself.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/export-historyph.png" height="auto"><source src="/lunacy-docs/public/export-history.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/export-historyph.png" height="auto"><source src="/public/export-history.mp4" type="video/mp4"></video>
**Note:** We in no way read or analyze files that you upload to Icons8 cloud. The guaranteed storage period of uploaded files is 60 days. After that they can be deleted from our servers without prior notice. Removed files cannot be restored. For this reason, please do not consider Icons8 cloud as a long-term storage.
docs/eyedropper.md
+1 -1
View File
@@ -41,7 +41,7 @@ To use the eyedropper tool:
That is typically how all eyedroppers work in similar apps. But Lunacy's eyedropper also features a very nice zoom option that comes in handy when the target area is small and you need pixel precision. To enable zoom, hover the eyedropper over the target and hold down the left mouse button. Then point the eyedropper to the required pixel and release the mouse button. To exit the zoom mode, press `Esc` or quickly swipe the cursor anywhere away from the current area, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/eyedropper3-placeholder.png" height="auto"><source src="/lunacy-docs/public/eyedropper3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/eyedropper3-placeholder.png" height="auto"><source src="/public/eyedropper3.mp4" type="video/mp4"></video>
## How Lunacy applies color to objects
docs/images.md
+13 -13
View File
@@ -29,8 +29,8 @@ This chapter details how to work with raster images. Lunacy supports all the pop
You can:
* Add photos from the Lunacy <a href="https://docs.icons8.com/lunacy-docs/libraries/#photos-and-masked-photos" target="_blank">library</a>.
* Use the <a href="https://docs.icons8.com/lunacy-docs/tools/#image-tool" target="_blank">Image tool</a> to add images from your computer.
* Add photos from the Lunacy <a href="https://lunacy.docs.icons8.com/libraries/#photos-and-masked-photos" target="_blank">library</a>.
* Use the <a href="https://lunacy.docs.icons8.com/tools/#image-tool" target="_blank">Image tool</a> to add images from your computer.
* Copy image files from your desktop or the Explorer and then paste them onto the canvas.
* Drag image files from your desktop or the Explorer and then drop them onto the canvas.
* Import images from the internet.
@@ -72,7 +72,7 @@ When using this method you should understand that you are importing an image dis
The demo below shows methods 2 and 3.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-imgeimportph.png" height="auto"><source src="/lunacy-docs/public/tool-importimage11.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-imgeimportph.png" height="auto"><source src="/public/tool-importimage11.mp4" type="video/mp4"></video>
## Replacing images
@@ -90,7 +90,7 @@ There are two ways to replace images.
<div class="callout callout--info">
<p><strong>Tip:</strong> You can also use this method, when you need to replace your current image with an image from the internet. In such a case, just paste the URL of the new image into the <b>File name</b> field of the <b>Open</b> dialog box and click <b>Open</b>.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
@@ -107,7 +107,7 @@ There are two ways to replace images.
<div class="callout callout--info">
<p><strong>Tip:</strong> If the green mask does not appear, try to zoom in a bit.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -116,7 +116,7 @@ There are two ways to replace images.
-->
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/images-replaceph.png" height="auto"><source src="/lunacy-docs/public/images-replace.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/images-replaceph.png" height="auto"><source src="/public/images-replace.mp4" type="video/mp4"></video>
## Cropping images
@@ -128,7 +128,7 @@ To crop an image:
3. Drag the borders of the frame to select the required area.
4. Press `Enter` or click the **Apply editing** button in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/images-cropph.png" height="auto"><source src="/lunacy-docs/public/images-crop.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/images-cropph.png" height="auto"><source src="/public/images-crop.mp4" type="video/mp4"></video>
## Cutting out a part of an image
@@ -143,8 +143,8 @@ To cut out a part of an image:
![Scissors tool](public/images-scissorsdemo.png)
* ![Freehand lasso tool](public/images-lassofreehand.png) - **Freeform Lasso**. Enables you to make freeform selections. Works similarly to the <a href="https://docs.icons8.com/lunacy-docs/tools/#pencil-tool" target="_blank">Pencil tool</a>. To close the selection border, just release the mouse button.
* ![Polygonal lasso tool](public/images-lassopolygon.png) - **Polygon Lasso**. Enables you to make straight-edged selections. Works similarly to the <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">Pen tool</a>. To disable snapping while drawing a selection border, hold down `Ctrl`.
* ![Freehand lasso tool](public/images-lassofreehand.png) - **Freeform Lasso**. Enables you to make freeform selections. Works similarly to the <a href="https://lunacy.docs.icons8.com/tools/#pencil-tool" target="_blank">Pencil tool</a>. To close the selection border, just release the mouse button.
* ![Polygonal lasso tool](public/images-lassopolygon.png) - **Polygon Lasso**. Enables you to make straight-edged selections. Works similarly to the <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">Pen tool</a>. To disable snapping while drawing a selection border, hold down `Ctrl`.
4. Select the area you want to cut out.
5. Press `Delete` or move the selection to where you want it. In the latter case, Lunacy creates a vector shape with an image fill that corresponds to your selection. Also, Lunacy automatically fills the emptied area with the color prevailing along the selection border.
@@ -157,8 +157,8 @@ You can make color adjustments to your images using the controls in the **Adjust
These adjustments are non-destructive. You can discard all changes and restore the original image by clicking the **Reset values** (![Reset values button](public/resetvaluesicon.png)) button next to the section header (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/images-adjustph.png
" height="auto"><source src="/lunacy-docs/public/images-adjust.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/images-adjustph.png
" height="auto"><source src="/public/images-adjust.mp4" type="video/mp4"></video>
Also, you can adjust color settings of several images at the same time.
@@ -171,13 +171,13 @@ To remove background from an image:
1. Select the image.
2. In the inspector, click the **Remove background** button.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-bgremovalph.png" height="auto"><source src="/lunacy-docs/public/tips-bgremove.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-bgremovalph.png" height="auto"><source src="/public/tips-bgremove.mp4" type="video/mp4"></video>
## Image upscaler
Lunacy is integrated with the <a href="https://icons8.com/upscaler" target="_blank">Icons8 Image Upscaler</a>. When you add an image to your document, Lunacy will offer you to enhance the image using our state-of-the-art AI.
![Lunacy Image upscaler by Icons8](/lunacy-docs/public/rn-upscaler.png)
![Lunacy Image upscaler by Icons8](/public/rn-upscaler.png)
<div class="callout callout--info">
<p><strong>Note:</strong> The feature is available only to users with any paid subscription for Icons8 graphic assets.</p>
docs/interface.md
+68 -68
View File
@@ -36,13 +36,13 @@ The interface consists of the following main elements.
1. The content tabs. Use them to switch between the:
* Layer list
* Document assets (<a href="https://docs.icons8.com/lunacy-docs/components" target="_blank">components</a>, layer and text <a href="https://docs.icons8.com/lunacy-docs/layerstyles/" target="_blank">styles</a>)
* Built-in Lunacy <a href="https://docs.icons8.com/lunacy-docs/libraries/" target="_blank">libraries</a> of icons, photos and vector images, as well as collections of <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">UI kits</a>
* Document assets (<a href="https://lunacy.docs.icons8.com/components" target="_blank">components</a>, layer and text <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">styles</a>)
* Built-in Lunacy <a href="https://lunacy.docs.icons8.com/libraries/" target="_blank">libraries</a> of icons, photos and vector images, as well as collections of <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>
<!-- and <a href="https://docs.icons8.com/lunacy-docs/plugins" target="_blank">plugins</a>
<!-- and <a href="https://lunacy.docs.icons8.com/plugins" target="_blank">plugins</a>
-->
* List of <a href="https://docs.icons8.com/lunacy-docs/shortcuts" target="_blank">shortcuts</a>
* List of <a href="https://lunacy.docs.icons8.com/shortcuts" target="_blank">shortcuts</a>
To shrink the size of the content tabs panel, drag its right border to the left.
@@ -51,13 +51,13 @@ The interface consists of the following main elements.
2. The left panel. Displays the content of the selected tab (1). You can temporarily hide the panel by clicking the current tab, using respective shortcuts (`Alt+1`(`⌥ 1`)...`Alt+8`(`⌥ 8`), `Shift+F1`) or through the menu (**View** > **Left Panel**).
3. The **toolbar**. Features all the primary Lunacy tools. For details about tools, click <a href="https://docs.icons8.com/lunacy-docs/tools/" target="_blank">here</a>. If you need more space or prefer shortcuts you can toggle off the display of the toolbar through the menu (**View** > **Toolbar**).
3. The **toolbar**. Features all the primary Lunacy tools. For details about tools, click <a href="https://lunacy.docs.icons8.com/tools/" target="_blank">here</a>. If you need more space or prefer shortcuts you can toggle off the display of the toolbar through the menu (**View** > **Toolbar**).
4. The **canvas**. That is your working area. For details, read [below](#the-canvas).
5. The **Inspector** panel. Lets you see and adjust the properties of the selected layer. The view of the Properties Inspector varies with the type of the selected layer. For details, read [below](#the-inspector).
6. The **menu bar**. Holds the options and commands related to files, layers, editing, etc. Also, it features the **Home** button that opens the **Home** tab.
7. The **context toolbar**. The set of controls displayed on the context toolbar depends on the type of the currently selected layer. Hover the cursor over a tool icon to see a pop-up explaining what the tool does.
8. The **file tabs panel**. Shows the tabs of currently open files. To switch between the files, just click the respective tab.
9. The **Play** button. Starts the prototype previewer. For details about prototyping in Lunacy, read <a href="https://docs.icons8.com/lunacy-docs/prototyping" target="_blank">here</a>.
9. The **Play** button. Starts the prototype previewer. For details about prototyping in Lunacy, read <a href="https://lunacy.docs.icons8.com/prototyping" target="_blank">here</a>.
10. This button opens a menu with options described in the table below.
<table>
@@ -70,42 +70,42 @@ The interface consists of the following main elements.
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/interface-rulerbtn.png" alt="Show/Hide rulers button"></td>
<td> The <b>Show/Hide rulers</b> button. Controls the display of rulers. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#rulers-and-guides">below</a>.</td>
<td><img src="/public/interface-rulerbtn.png" alt="Show/Hide rulers button"></td>
<td> The <b>Show/Hide rulers</b> button. Controls the display of rulers. For details, read <a href="https://lunacy.docs.icons8.com/interface/#rulers-and-guides">below</a>.</td>
<td><code>Ctrl+R</code> (<code>⌘ R</code>)</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-layoutbtn.png" alt="Show/Hide layout button"></td>
<td>The <b>Layout</b> button. Controls the display of the layout grid. Available only when there is an artboard on the canvas. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#layout-grid">here</a>.</td>
<td><img src="/public/interface-layoutbtn.png" alt="Show/Hide layout button"></td>
<td>The <b>Layout</b> button. Controls the display of the layout grid. Available only when there is an artboard on the canvas. For details, read <a href="https://lunacy.docs.icons8.com/interface/#layout-grid">here</a>.</td>
<td><code>Ctrl+\</code> (<code>⌃ G</code>)</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-prototbtn.png" alt="Show prototyping button"></td>
<td>The <b>Show prototyping</b> button. Controls the display of <a href="https://docs.icons8.com/lunacy-docs/tools/#hotspot-tool" target="_blank">hotspots</a> and prototyping arrows.</td>
<td><img src="/public/interface-prototbtn.png" alt="Show prototyping button"></td>
<td>The <b>Show prototyping</b> button. Controls the display of <a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool" target="_blank">hotspots</a> and prototyping arrows.</td>
<td><b>View > Prototyping</b></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-pixelbtn.png" alt="Show pixels on zoom button"></td>
<td>The <b>Show pixels on zoom</b> button. Enables the display of pixels when the zoom value exceeds 100. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#show-pixels-on-zoom">here</a>.</td>
<td><img src="/public/interface-pixelbtn.png" alt="Show pixels on zoom button"></td>
<td>The <b>Show pixels on zoom</b> button. Enables the display of pixels when the zoom value exceeds 100. For details, read <a href="https://lunacy.docs.icons8.com/interface/#show-pixels-on-zoom">here</a>.</td>
<td><b>View > Pixels on Zoom</b></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-gridbtn.png" alt="Show grid button"></td>
<td>The <b>Show grid</b> button. Enables the display of the square grid. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#square-grid">here</a>.</td>
<td><img src="/public/interface-gridbtn.png" alt="Show grid button"></td>
<td>The <b>Show grid</b> button. Enables the display of the square grid. For details, read <a href="https://lunacy.docs.icons8.com/interface/#square-grid">here</a>.</td>
<td><code>Ctrl+'</code> (<code>⌘ '</code>)</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-nightbtn.png" alt="Sketch Cloud Button"></td>
<td><img src="/public/interface-nightbtn.png" alt="Sketch Cloud Button"></td>
<td>The <b>Enable dark mode</b> button. Turns on/off the night theme in the Lunacy interface.</td>
<td><code>-</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-misfontbtn.png" alt="Missing fonts button"></td>
<td>The <b>Missing fonts</b> button. Appears when the file you are working with includes fonts not installed on your computer. For details, read <a href="https://docs.icons8.com/lunacy-docs/text/#missing-fonts" target="_blank">here</a>.</td>
<td><img src="/public/interface-misfontbtn.png" alt="Missing fonts button"></td>
<td>The <b>Missing fonts</b> button. Appears when the file you are working with includes fonts not installed on your computer. For details, read <a href="https://lunacy.docs.icons8.com/text/#missing-fonts" target="_blank">here</a>.</td>
<td><code>-</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-notifybtn.png" alt="Notifications button"></td>
<td><img src="/public/interface-notifybtn.png" alt="Notifications button"></td>
<td>The <b>Notifications</b> button. Appears when you have a new notification from Lunacy. Opens the panel where you can view and manage Lunacy notifications.</td>
<td><code>-</code></td>
</tr>
@@ -142,9 +142,9 @@ To change the position of a page in the list, just drag it up or down to where y
The rest of the operations are accessible through the context menu invoked by a right-click over the required page name.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-pagesplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-pages65.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-pagesplaceholder.png" height="auto"><source src="/public/interface-pages65.mp4" type="video/mp4"></video>
There is also a special type of a page - the Components page. For details, read <a href="https://docs.icons8.com/lunacy-docs/components/#components-page" target="_blank">here</a>.
There is also a special type of a page - the Components page. For details, read <a href="https://lunacy.docs.icons8.com/components/#components-page" target="_blank">here</a>.
## Layer list
@@ -155,7 +155,7 @@ The Layer List appears in left panel when you click the **Layers** content tab.
If the names of layers in the list appear truncated, you can change the width of the panel as shown below.
<video autoplay="" muted="" loop="" playsinline="" width="" poster="/lunacy-docs/public/interface-resizeleft.png" height="auto"><source src="/lunacy-docs/public/interface-resizeleft65.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="" poster="/public/interface-resizeleft.png" height="auto"><source src="/public/interface-resizeleft65.mp4" type="video/mp4"></video>
The operations that you can perform in the layers list include:
@@ -168,7 +168,7 @@ The operations that you can perform in the layers list include:
<!--
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-objectlistplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-objectlist61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-objectlistplaceholder.png" height="auto"><source src="/public/interface-objectlist61.mp4" type="video/mp4"></video>
-->
@@ -176,7 +176,7 @@ To collapse all branches in the Layer List tree use the `Ctrl + ~` shortcut.
<div class="callout callout--info">
<p><strong>Tip:</strong> Some projects, such as design systems, can house hundreds of layers on a single page. To quickly locate the required layer on the canvas, find it by typing its name in the search field, select it in the layers list and then press <code style="background: white">Ctrl + 2</code> (Fit to selection).</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -196,13 +196,13 @@ Also, you can use the mouse wheel for scrolling the canvas. Just point the curso
Another option to navigate the canvas is to hold down the `Space` key (the cursor will turn into a palm) and drag the canvas to where you need.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-movingcanvas.png" height="auto"><source src="/lunacy-docs/public/interface-movingcanvas65.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-movingcanvas.png" height="auto"><source src="/public/interface-movingcanvas65.mp4" type="video/mp4"></video>
Also, read about the [zooming options](#zooming-options).
### [Artboards](#artboards)
Artboards are a special type of layers that lets you divide the canvas into separate areas with different content. Artboards are optional but they come in handy when you’re designing for a certain screen size or device. To create an artboard, use the <a href="https://docs.icons8.com/lunacy-docs/tools/#artboard-tool" target="_blank">artboard tool</a>. In fact, it is the tool that Lunacy enables first when you create a new document. It allows you to create a custom size artboard or to select an option from the list that will appear on the right. This list features presets for popular devices, screen resolutions and social media templates (you can also add your custom presets to this list, see [below](#adding-custom-presets)).
Artboards are a special type of layers that lets you divide the canvas into separate areas with different content. Artboards are optional but they come in handy when you’re designing for a certain screen size or device. To create an artboard, use the <a href="https://lunacy.docs.icons8.com/tools/#artboard-tool" target="_blank">artboard tool</a>. In fact, it is the tool that Lunacy enables first when you create a new document. It allows you to create a custom size artboard or to select an option from the list that will appear on the right. This list features presets for popular devices, screen resolutions and social media templates (you can also add your custom presets to this list, see [below](#adding-custom-presets)).
To add an artboard:
@@ -230,28 +230,28 @@ The table below provides a description of Inspector elements displayed for artbo
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector1.png" alt="Size controls"></td>
<td><img src="/public/interface-artbinspector1.png" alt="Size controls"></td>
<td><b>Preset sizes and orientation</b><p>Use these controls to select the size of the artboard from one of the presets and change its orientation. The <b>Resize to Fit</b> button changes the size of an artboard to the size of the selection frame that you get when you select all layers on the given artboard.</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector2.png" alt="Position and dimension controls"></td>
<td><img src="/public/interface-artbinspector2.png" alt="Position and dimension controls"></td>
<td><b>Position and size</b><p>The <b>X</b> and <b>Y</b> controls show and allow you to manage the absolute position of the artboard on the canvas.</p> <p> The <b>W</b> and <b>H</b> controls, show and allow to change the width and height of the layer. Click the links button, if you want to preserve aspect ratio when changing the size of the artboard.</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector3.png" alt="Adjust content on resize"></td>
<td><img src="/public/interface-artbinspector3.png" alt="Adjust content on resize"></td>
<td><b>Adjust content on resize</b><p>With this checkbox selected, when you change the size of the artboard, Lunacy will proportionally change the size of the layers on it. Read also about resizing constraints.</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector4.png" alt="Artboard background"></td>
<td><img src="/public/interface-artbinspector4.png" alt="Artboard background"></td>
<td><b>Artboard background</b><p>Use these controls to change the color and opacity of the artboard. Also, you can clear the <b>Include in export</b> checkbox, if you don't want to include the artboard into export results. In such a case, Lunacy will export only the layers available on the artboard.</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector5.png" alt="Layout grid settings"></td>
<td><b>Layout grid settings</b><p>This group of controls allows you to configure the settings of the layout grid. For details about layout grids, read <a href="https://docs.icons8.com/lunacy-docs/interface/#layout-grid">here</a>.</p></td>
<td><img src="/public/interface-artbinspector5.png" alt="Layout grid settings"></td>
<td><b>Layout grid settings</b><p>This group of controls allows you to configure the settings of the layout grid. For details about layout grids, read <a href="https://lunacy.docs.icons8.com/interface/#layout-grid">here</a>.</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-artbinspector6.png" alt="Export controls"></td>
<td><b>Export controls</b><p>Allow you to export the artboard and its content. For details about export in Lunacy, click <a href="https://docs.icons8.com/lunacy-docs/export" target="_blank">here</a>.</p></td>
<td><img src="/public/interface-artbinspector6.png" alt="Export controls"></td>
<td><b>Export controls</b><p>Allow you to export the artboard and its content. For details about export in Lunacy, click <a href="https://lunacy.docs.icons8.com/export" target="_blank">here</a>.</p></td>
</tr>
</tbody>
</table>
@@ -262,7 +262,7 @@ To select an empty artboard, you can click anywhere within the artboard. To sele
Similarly, to move an empty artboard, click anywhere within the artboard and drag it to where you want it. To move an artboard with layers, click the artboard's name and drag.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-moveartplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-moveart.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-moveartplaceholder.png" height="auto"><source src="/public/interface-moveart.mp4" type="video/mp4"></video>
Alternatively, you can select the required artboard by clicking its name in the Layer List.
@@ -283,7 +283,7 @@ Ruler and guides will help you position and align layers on the canvas. In Lunac
To create a guide, click anywhere on a ruler and drag the guide onto the canvas to where you need it. Now you can position layers along the guide. Move a layer close to the guide and note how it will snap to the guide.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-guides.png" height="auto"><source src="/lunacy-docs/public/inteface-guides61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-guides.png" height="auto"><source src="/public/inteface-guides61.mp4" type="video/mp4"></video>
To relocate a guide, just drag it to another position or select it and use arrow keys to nudge it. If you don't need a guide, click to select it (hold down `Shift` to select multiple guides) and press `Delete`. Also, you can use the options from the pop-up menu invoked by a right-click over a ruler (see the figure below).
@@ -302,13 +302,13 @@ If there no artboards on the canvas, Lunacy displays the square grid directly on
To select the size of the grid cell, click the down arrowhead next to the button and choose one of the presets or define your custom size.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/interface-sqgridplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-sqgrid.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/interface-sqgridplaceholder.png" height="auto"><source src="/public/interface-sqgrid.mp4" type="video/mp4"></video>
#### [Layout grid](#layout-grid)
You can apply layout grids only to [artboards](#artboards). If you have several artboards on a page, you can toggle on and off the display of layout grids for all or individually for each artboard. Also, each artboard can have its own settings of the layout grid (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/interface-layoutgridplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-layoutgridvid.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/interface-layoutgridplaceholder.png" height="auto"><source src="/public/interface-layoutgridvid.mp4" type="video/mp4"></video>
### Measuring
@@ -327,7 +327,7 @@ To learn the distance between an layer and the borders of the artboard:
OR
* Select a layer, then hover the cursor over an empty area within the artboard and press and hold `Alt` (`⌥`).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-measuringplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-measuring.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-measuringplaceholder.png" height="auto"><source src="/public/interface-measuring.mp4" type="video/mp4"></video>
For precise positioning of layers on the artboard or relative one another, proceed as follows:
@@ -335,7 +335,7 @@ For precise positioning of layers on the artboard or relative one another, proce
2. Point the cursor over an empty area or over the other layer.
3. Holding down `Alt`(`⌥`), move the selected layer using the arrow keys.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-groupmeasure3ph.png" height="auto"><source src="/lunacy-docs/public/interface-groupmeasure3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-groupmeasure3ph.png" height="auto"><source src="/public/interface-groupmeasure3.mp4" type="video/mp4"></video>
#### Grouped layers
@@ -346,7 +346,7 @@ To learn the distance between a member of a group and the borders of the group:
1. Point the cursor over the required group member.
2. Press and hold `Ctrl + Alt` (`⌘ ⌥`).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-groupmeasure1ph.png" height="auto"><source src="/lunacy-docs/public/interface-groupmeasure1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-groupmeasure1ph.png" height="auto"><source src="/public/interface-groupmeasure1.mp4" type="video/mp4"></video>
To learn the distance between a member of a group and the borders of the artboard:
@@ -368,13 +368,13 @@ To learn the distance between a member of a group and a member of another group:
The next demo shows the above three procedures.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-groupmeasure2ph.png" height="auto"><source src="/lunacy-docs/public/interface-groupmeasure2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-groupmeasure2ph.png" height="auto"><source src="/public/interface-groupmeasure2.mp4" type="video/mp4"></video>
### Zooming options
The easiest way to zoom to a layer in Lunacy is to hold down the `Ctrl`(`⌘`) key and rotate the mouse wheel. Similarly, you can hold down `Ctrl` and `Shift` (`⌘ Shift`) keys. In such a case the speed of zooming will be slower (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-zoomtoobjectplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-zoomtoobject61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-zoomtoobjectplaceholder.png" height="auto"><source src="/public/interface-zoomtoobject61.mp4" type="video/mp4"></video>
For your convenience, when the zoom value exceeds 500, Lunacy starts displaying the pixel grid. There are two ways to disable this feature:
@@ -390,7 +390,7 @@ The Zoom tool enables you to zoom in the selected layer or canvas area. To use t
2. Click the layer you want to zoom in or drag over the required area (the smaller the area is, the higher the resulting zoom value will be).
3. To zoom out, hold down `Z+Alt` and click or drag over the layer or area.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tool-zoomplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-zoom61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tool-zoomplaceholder.png" height="auto"><source src="/public/tool-zoom61.mp4" type="video/mp4"></video>
#### The Zoom control
@@ -402,7 +402,7 @@ The zoom control is found on the right of the file tab panel. To change the zoom
The demo below shows all these three methods.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-zoomtoobjectplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-zoomctrl61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-zoomtoobjectplaceholder.png" height="auto"><source src="/public/interface-zoomctrl61.mp4" type="video/mp4"></video>
Alternatively, you can click the down arrowhead next to the zoom control and select one of the preset values or options on the displayed menu (see the figure below).
@@ -458,7 +458,7 @@ The above options are also accessible through the **View** menu, see the figure
<!--
Also, for zooming and focusing you can use the <a href="https://docs.icons8.com/lunacy-docs/tools/#zoom-tool" target="_blank">zoom tool</a>.
Also, for zooming and focusing you can use the <a href="https://lunacy.docs.icons8.com/tools/#zoom-tool" target="_blank">zoom tool</a>.
-->
@@ -482,14 +482,14 @@ There are two ways to change the color of the canvas:
**Way 2**
1. Deselect all the layers on the canvas.
2. Select the <a href="https://docs.icons8.com/lunacy-docs/tools/#eyedropper-tool" target="_blank">eyedropper tool</a>.
2. Select the <a href="https://lunacy.docs.icons8.com/tools/#eyedropper-tool" target="_blank">eyedropper tool</a>.
3. Use the pallets that will appear in the left panel to select the new color.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/interface-canvascolorplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-canvascolor1356x730.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/interface-canvascolorplaceholder.png" height="auto"><source src="/public/interface-canvascolor1356x730.mp4" type="video/mp4"></video>
## [The Inspector](#the-inspector)
The Inspector is the panel that appears on the right of the Lunacy interface. When you create a new document, the first thing you see on the right is not yet the Inspector but the panel of presets of the <a href="https://docs.icons8.com/lunacy-docs/tools/#artboard-tool" target="_blank">artboard tool</a>. Lunacy enables it by default upon creation of a new document. And only you add an artboard or add and select another layer, the Property Inspector appears.
The Inspector is the panel that appears on the right of the Lunacy interface. When you create a new document, the first thing you see on the right is not yet the Inspector but the panel of presets of the <a href="https://lunacy.docs.icons8.com/tools/#artboard-tool" target="_blank">artboard tool</a>. Lunacy enables it by default upon creation of a new document. And only you add an artboard or add and select another layer, the Property Inspector appears.
The set of controls and settings displayed in the Inspector varies with the type of layer that you select on the canvas. Below is a description of Inspector elements common for almost all layer types.
@@ -502,36 +502,36 @@ The set of controls and settings displayed in the Inspector varies with the type
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/interface-alignctrl.png" alt="Alignment and distribution controls"></td>
<td><img src="/public/interface-alignctrl.png" alt="Alignment and distribution controls"></td>
<td><b>Alignment and distribution controls</b>. Become available when you select two or more layers.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-opacity.png" alt="Opacity and blend mode settings"></td>
<td><img src="/public/interface-opacity.png" alt="Opacity and blend mode settings"></td>
<td><b>Opacity and blend mode settings</b>. Allow you to set the overall opacity of a layer and its blending mode.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-positionctrl2.png" alt="Layer properties controls"></td>
<td><img src="/public/interface-positionctrl2.png" alt="Layer properties controls"></td>
<td><b>Layer properties controls</b>. Allow you to adjust the position and size of the layer, as well as its rotation angle, corner radius and number of vertices in stars and polygons. The set of displayed controls varies with the selected layer.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-resizectrl.png" alt="Resizing constraints"></td>
<td><img src="/public/interface-resizectrl.png" alt="Resizing constraints"></td>
<td><b>Resizing constraints</b>. Appear when you select two or more layers, a group of layers or a layer on an artboard. Serve to determine the behavior of layers upon resizing.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-protoctrl.png" alt="Prototyping controls"></td>
<td><img src="/public/interface-protoctrl.png" alt="Prototyping controls"></td>
<td>The <b>Prototyping</b> section features the settings related to prototyping.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-appear.png" alt="Appearance section"></td>
<td>The <b>Appearance</b> section allows you to apply <a href="https://docs.icons8.com/lunacy-docs/layerstyles" target="_blank">styles</a> to the selected layer.</td>
<td><img src="/public/interface-appear.png" alt="Appearance section"></td>
<td>The <b>Appearance</b> section allows you to apply <a href="https://lunacy.docs.icons8.com/layerstyles" target="_blank">styles</a> to the selected layer.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-stylingctrl.png" alt="Styling options"></td>
<td><b>Styling options</b>. For details, read <a href="https://docs.icons8.com/lunacy-docs/styling" target="_blank">here</a>.</td>
<td><img src="/public/interface-stylingctrl.png" alt="Styling options"></td>
<td><b>Styling options</b>. For details, read <a href="https://lunacy.docs.icons8.com/styling" target="_blank">here</a>.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/interface-exportctrl.png" alt="Export settings"></td>
<td><b>Export settings</b>. For details, read <a href="https://docs.icons8.com/lunacy-docs/export" target="_blank">here</a>.</td>
<td><img src="/public/interface-exportctrl.png" alt="Export settings"></td>
<td><b>Export settings</b>. For details, read <a href="https://lunacy.docs.icons8.com/export" target="_blank">here</a>.</td>
</tr>
</tbody>
</table>
@@ -540,7 +540,7 @@ When you select no layer on the canvas, the Inspector shows the following contro
* **Workspace color**: Allows you to change the color of the canvas.
* **Show pixel grid**: Toggles on/off the display of the pixel grid when the zoom value exceeds 500.
* **Export project**: Allows you to export the whole project. For details, read <a href="https://docs.icons8.com/lunacy-docs/export" target="_blank">here</a>.
* **Export project**: Allows you to export the whole project. For details, read <a href="https://lunacy.docs.icons8.com/export" target="_blank">here</a>.
<embed type="image/svg+xml" alt="Select no layer on the canvas" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/YJSPtecCHkq9Lh22lNc1sw.svg" />
@@ -555,7 +555,7 @@ There are several ways to change values in the numeric fields of the Inspector.
* Hover the cursor over the required field, wait a moment until the cursor turns into a double-headed arrow and then drag the cursor up or down.
* Use math (press `Enter` to submit).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-inspectortipsplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-inspectortips.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-inspectortipsplaceholder.png" height="auto"><source src="/public/interface-inspectortips.mp4" type="video/mp4"></video>
## [The context menu](#the-context-menu)
@@ -591,7 +591,7 @@ The table below gives an overview of context menu commands and options common fo
</tr>
<tr>
<td><b>Group Selection</b></td>
<td>Groups two or more selected layers together. For details about grouping layers, read <a href="https://docs.icons8.com/lunacy-docs/layers/#grouping-layers" target="_blank">here</a>.</td>
<td>Groups two or more selected layers together. For details about grouping layers, read <a href="https://lunacy.docs.icons8.com/layers/#grouping-layers" target="_blank">here</a>.</td>
</tr>
<tr>
<td><b>Ungroup</b></td>
@@ -599,11 +599,11 @@ The table below gives an overview of context menu commands and options common fo
</tr>
<tr>
<td><b>Lock</b></td>
<td>Locks the layer from accidental edits. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#layer-list">here</a>.</td>
<td>Locks the layer from accidental edits. For details, read <a href="https://lunacy.docs.icons8.com/interface/#layer-list">here</a>.</td>
</tr>
<tr>
<td><b>Hide</b></td>
<td>Temporarily hides the layer from the canvas. For details, read <a href="https://docs.icons8.com/lunacy-docs/interface/#layer-list">here</a>.</td>
<td>Temporarily hides the layer from the canvas. For details, read <a href="https://lunacy.docs.icons8.com/interface/#layer-list">here</a>.</td>
</tr>
<tr>
<td><b>Rename</b></td>
@@ -611,11 +611,11 @@ The table below gives an overview of context menu commands and options common fo
</tr>
<tr>
<td><b>Copy/Paste</b></td>
<td>Opens a submenu with copying/pasting options. For details, read <a href="https://docs.icons8.com/lunacy-docs/layers/#copy-and-paste-options" target="_blank">here</a>.</td>
<td>Opens a submenu with copying/pasting options. For details, read <a href="https://lunacy.docs.icons8.com/layers/#copy-and-paste-options" target="_blank">here</a>.</td>
</tr>
<tr>
<td><b>Duplicate</b></td>
<td>Creates a duplicate of the selected layer. For details, read <a href="https://docs.icons8.com/lunacy-docs/layers/#duplicating-layers" target="_blank">here</a>.</td>
<td>Creates a duplicate of the selected layer. For details, read <a href="https://lunacy.docs.icons8.com/layers/#duplicating-layers" target="_blank">here</a>.</td>
</tr>
<tr>
<td><b>Delete</b></td>
docs/layers.md
+41 -41
View File
@@ -26,15 +26,15 @@ page_nav:
In Lunacy you will work with the following types of layers:
* <a href="https://docs.icons8.com/lunacy-docs/interface/#artboards" target="_blank">Artboards</a>
* <a href="https://docs.icons8.com/lunacy-docs/text/" target="_blank">Text layers</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">Vectors</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#shape-tools" target="_blank">Shapes</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#image-tool" target="_blank">Images</a>
* <a href="https://docs.icons8.com/lunacy-docs/components/" target="_blank">Components and component instances</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#icon-tool" target="_blank">Icons</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#hotspot-tool" target="_blank">Hotspots</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#slice-tool" target="_blank">Slices</a>
* <a href="https://lunacy.docs.icons8.com/interface/#artboards" target="_blank">Artboards</a>
* <a href="https://lunacy.docs.icons8.com/text/" target="_blank">Text layers</a>
* <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">Vectors</a>
* <a href="https://lunacy.docs.icons8.com/tools/#shape-tools" target="_blank">Shapes</a>
* <a href="https://lunacy.docs.icons8.com/tools/#image-tool" target="_blank">Images</a>
* <a href="https://lunacy.docs.icons8.com/components/" target="_blank">Components and component instances</a>
* <a href="https://lunacy.docs.icons8.com/tools/#icon-tool" target="_blank">Icons</a>
* <a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool" target="_blank">Hotspots</a>
* <a href="https://lunacy.docs.icons8.com/tools/#slice-tool" target="_blank">Slices</a>
For specifics on working with each type of layers, follow the above links. This section provides an overview of basic operations common for all layer types.
@@ -42,16 +42,16 @@ For specifics on working with each type of layers, follow the above links. This
To add a layer to the canvas:
1. Enable the respective <a href="https://docs.icons8.com/lunacy-docs/tools" target="_blank">tool</a> on the toolbar or with a shortcut (see the note below).
1. Enable the respective <a href="https://lunacy.docs.icons8.com/tools" target="_blank">tool</a> on the toolbar or with a shortcut (see the note below).
2. Click or click and drag over the area where you want to place the layer.
If you need to create a regular shape (for example, a circle or a square), hold down `Shift` while dragging.
That is the most common method used in all similar applications. When you use it, the point from where you start dragging becomes an angle of the shape, if it is a rectangle, or an angle of its selection frame, if it is anything else. If you want the starting point to become the center of the shape, hold down `Alt` while dragging and `Alt + Shift` to get a regular shape (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-addingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-adding.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-addingplaceholder.png" height="auto"><source src="/public/objects-adding.mp4" type="video/mp4"></video>
**Note:** To check out the shortcuts available in Lunacy, click the **Keyboard Shortcuts** button at the lower-left corner of the interface (this will open the shortcuts panel in Lunacy) or read <a href="https://docs.icons8.com/lunacy-docs/shortcuts/" target="_blank">here</a>.
**Note:** To check out the shortcuts available in Lunacy, click the **Keyboard Shortcuts** button at the lower-left corner of the interface (this will open the shortcuts panel in Lunacy) or read <a href="https://lunacy.docs.icons8.com/shortcuts/" target="_blank">here</a>.
![Adding text](public/objects-kbdshotcuts1.png)
@@ -83,7 +83,7 @@ After you select an layer within a group, you can switch to other layer of that
To quickly select all layers on the canvas, use the `Ctrl+A` shortcut.
For details about using the select tool and a demo, click <a href="https://docs.icons8.com/lunacy-docs/tools/#select-tool" target="_blank">here</a>.
For details about using the select tool and a demo, click <a href="https://lunacy.docs.icons8.com/tools/#select-tool" target="_blank">here</a>.
## Moving layers
@@ -91,15 +91,15 @@ To move a layer, just click and drag it. Make sure that the cursor is over the l
If you want to restrict movement to the X or Y axis, hold down `Shift` as you drag.
For precise positioning you can use the arrow keys. Each keystroke moves a layer by one pixel. Holding down `Shift` increases each step to 10 pixels (see also the <a href="https://docs.icons8.com/lunacy-docs/interface/#measuring" target="_blank">Measuring</a> section).
For precise positioning you can use the arrow keys. Each keystroke moves a layer by one pixel. Holding down `Shift` increases each step to 10 pixels (see also the <a href="https://lunacy.docs.icons8.com/interface/#measuring" target="_blank">Measuring</a> section).
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-movingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-moving.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-movingplaceholder.png" height="auto"><source src="/public/objects-moving.mp4" type="video/mp4"></video>
Also, to adjust an layer's position on the canvas or artboard, you can use the **X** and **Y** controls in the Inspector. If a layer is on the canvas, the figures in the **X** and **Y** fields show the absolute coordinates of the layers's top-left selection handle.
If the layer is a part of an artboard, **X** and **Y** display the coordinates of the layer's top-left selection handle relative to the artboard's top-left corner. See the demo below and the <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">tips</a> on working with numeric fields in the Inspector.
If the layer is a part of an artboard, **X** and **Y** display the coordinates of the layer's top-left selection handle relative to the artboard's top-left corner. See the demo below and the <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">tips</a> on working with numeric fields in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-moving1placeholder.png" height="auto"><source src="/lunacy-docs/public/objects-moving1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-moving1placeholder.png" height="auto"><source src="/public/objects-moving1.mp4" type="video/mp4"></video>
## Grouping layers
@@ -118,7 +118,7 @@ After you select an layer within a group, you can switch to other layers of that
You can move layers into or out of a group by dragging them in the **Layer List**.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-groupingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-grouping.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-groupingplaceholder.png" height="auto"><source src="/public/objects-grouping.mp4" type="video/mp4"></video>
To ungroup layers, select the group and click the **Ungroup** button (![Ungroup button](public/objects-ungroupbutton.png)) on the context toolbar or press `Ctrl+Shift+G`.
@@ -136,7 +136,7 @@ This can be handy for designing patterns or things alike.
-->
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-duplicateplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-duplicate.mp4" type="video/mp4"></video>
<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.
@@ -188,14 +188,14 @@ The table below provides a description of these options.
</tr>
<tr>
<td><b>Copy style/Paste style</b></td>
<td>These options allow you to copy the <a href="https://docs.icons8.com/lunacy-docs/styling" target="_blank">styling properties</a> of the selected layer and apply them to another layer. See the demo below.</td>
<td>These options allow you to copy the <a href="https://lunacy.docs.icons8.com/styling" target="_blank">styling properties</a> of the selected layer and apply them to another layer. See the demo below.</td>
</tr>
</tbody>
</table>
The demo below shows how you can copy and paste styling properties between layers.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-copypasteplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-copypaste.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-copypasteplaceholder.png" height="auto"><source src="/public/objects-copypaste.mp4" type="video/mp4"></video>
## Resizing layers
@@ -210,7 +210,7 @@ There are several ways how you can resize layers:
To resize a layer, drag any of its selection handles as shown in the demo below. Use the handles on the sides, to change the layer's height or width. Use the corner handles to adjust the layer's height and width at the same time. Hold down `Shift` while dragging to preserve the layer's aspect ratio.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/object-resizing1.png" height="auto"><source src="/lunacy-docs/public/object-resizing1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/object-resizing1.png" height="auto"><source src="/public/object-resizing1.mp4" type="video/mp4"></video>
Also, you can hold down `Alt` while dragging to resize the layer from its center, rather than from the edge that you are dragging.
@@ -220,17 +220,17 @@ The `Alt+Shift+drag` combination is also possible to preserve the layer's aspect
Select the layer and use the shortcuts `CTRL+ arrow keys` (by 1 pixel) or `CTRL+Shift + arrow keys` ( by 10 pixels).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-keyresizeph.png" height="auto"><source src="/lunacy-docs/public/tips-keyresize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-keyresizeph.png" height="auto"><source src="/public/tips-keyresize.mp4" type="video/mp4"></video>
### Resizing a layer through the Inspector
Select the layer and use the **W** (width) and **H** (height) edit fields, when you need to define the exact size of an layer.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/object-resizing2.png" height="auto"><source src="/lunacy-docs/public/object-resizing2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/object-resizing2.png" height="auto"><source src="/public/object-resizing2.mp4" type="video/mp4"></video>
Click the links button to preserve the layer's aspect ratio. With this button enabled, the change of a value in one of the boxes, will result in respective value adjustment in the second box.
Also, read <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">here</a> for some tips on working with numeric fields in the Inspector.
Also, read <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">here</a> for some tips on working with numeric fields in the Inspector.
### Scaling layers
@@ -239,11 +239,11 @@ If you want to resize a layer with styling (borders, shadows, etc.), you should
To scale a layer:
1. Select the layer.
2. Click ![Scale too icon](/lunacy-docs/public/scale-tool.png) on the toolbar (or press `K`) and drag the bounding box.
2. Click ![Scale too icon](/public/scale-tool.png) on the toolbar (or press `K`) and drag the bounding box.
With the Scale tool selected, you can edit any of the settings (say, width) in the Inspector. Then press `Enter`, and Lunacy will scale all the other settings accordingly.
![Using scale tool](/lunacy-docs/public/rn81-scaletool.png)
![Using scale tool](/public/rn81-scaletool.png)
### Resizing constraints
@@ -268,7 +268,7 @@ These controls include:
To better understand how all this works, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-constraintsplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-constraints.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-constraintsplaceholder.png" height="auto"><source src="/public/objects-constraints.mp4" type="video/mp4"></video>
## Aligning and distributing layers
@@ -290,42 +290,42 @@ The table below provides a description of the controls.
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/objects-alignleft.png" alt="Align Left"></td>
<td><img src="/public/objects-alignleft.png" alt="Align Left"></td>
<td><b>Align Left</b>. Aligns the selected layers to the left bound of their selection frame.</td>
<td><code>Shift + Ctrl + &leftarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignhoriz.png" alt="Align Horizontally"></td>
<td><img src="/public/objects-alignhoriz.png" alt="Align Horizontally"></td>
<td><b>Align Horizontally</b>. Horizontally centers the selected layers.</td>
<td><code>Ctrl + Shift + -</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignright.png" alt="Align Right"></td>
<td><img src="/public/objects-alignright.png" alt="Align Right"></td>
<td><b>Align Right</b>. Aligns the selected layers to the right bound of their selection frame.</td>
<td><code>Shift + Ctrl + &rightarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-distribvertspac.png" alt="Distribute Vertical Spacing"></td>
<td><img src="/public/objects-distribvertspac.png" alt="Distribute Vertical Spacing"></td>
<td><b>Distribute Vertical Spacing</b>. Evens vertical spacing between the selected layers. Note that the topmost and the lowermost layers in the selection always preserve their original position, while the layers between them adjust their position to ensure equal spacing.</td>
<td><code>Shift + Ctrl + V</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-aligntop.png" alt="Align Top"></td>
<td><img src="/public/objects-aligntop.png" alt="Align Top"></td>
<td><b>Align Top</b>. Aligns the selected layers to the top bound of their selection frame.</td>
<td><code>Shift + Ctrl + &uparrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignvert.png" alt="Align Vertically"></td>
<td><img src="/public/objects-alignvert.png" alt="Align Vertically"></td>
<td><b>Align Vertically</b>. Vertically centers the selected layers.</td>
<td><code>Ctrl + Shift + |</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignbot.png" alt="Align Bottom"></td>
<td><img src="/public/objects-alignbot.png" alt="Align Bottom"></td>
<td><b>Align Bottom</b>. Aligns the selected layers to the bottom bound of their selection frame.</td>
<td><code>Shift + Ctrl + &downarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-distribhorspac.png" alt="Distribute Vertical Spacing"></td>
<td><img src="/public/objects-distribhorspac.png" alt="Distribute Vertical Spacing"></td>
<td><b>Distribute Horizontal Spacing</b>. Evens horizontal spacing between the selected layers. Note that the rightmost and the leftmost layers in the selection always preserve their original position, while the layers between them adjust their position to ensure equal spacing.</td>
<td><code>Shift + Ctrl + H</code></td>
</tr>
@@ -334,7 +334,7 @@ The table below provides a description of the controls.
To better understand how it all works, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-aligndistrpaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-aligndistr.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-aligndistrpaceholder.png" height="auto"><source src="/public/objects-aligndistr.mp4" type="video/mp4"></video>
### Smart distribute
@@ -346,7 +346,7 @@ For this:
2. Click the **Tidy up** button in the Inspector. The layers get re-arranged,red handles appear between rows and columns of the "grid".
3. Drag the red handles to adjust the spacing between rows and columns. Click the red circle in the center of an layers and drag to move it to another “grid cell”. See the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-smartdistribph.png" height="auto"><source src="/lunacy-docs/public/objects-smartdistr.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-smartdistribph.png" height="auto"><source src="/public/objects-smartdistr.mp4" type="video/mp4"></video>
## Arranging layers along the Z-axis
@@ -359,7 +359,7 @@ To position layers along the Z-axis, use the send/bring commands found on the co
The demo below shows how it works.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-sendbringplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-sendbring.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-sendbringplaceholder.png" height="auto"><source src="/public/objects-sendbring.mp4" type="video/mp4"></video>
Also, you can do the same by dragging layers up and down relative one another in the layer list.
@@ -384,7 +384,7 @@ To quickly return the layer into its initial position:
To flip the selected layer, use the **Flip Horizontally** (![Flip horizontally button](public/objects-fliphbtn.png)) and **Flip Vertically** (![Flip horizontally button](public/objects-flipvbtn.png)) buttons that appear on the context toolbar.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-flipplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-flip.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-flipplaceholder.png" height="auto"><source src="/public/objects-flip.mp4" type="video/mp4"></video>
Alternatively, you can use the following shortcuts:
@@ -395,4 +395,4 @@ 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="/lunacy-docs/public/objects-flipplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-flip2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-flipplaceholder.png" height="auto"><source src="/public/objects-flip2.mp4" type="video/mp4"></video>
docs/layerstyles.md
+10 -10
View File
@@ -26,7 +26,7 @@ Layer and text styles are predefined sets of layer and text properties that you
You will store your custom layer and text styles on the **Styles** tab.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/layerstyles-mainview.png" height="auto"><source src="/lunacy-docs/public/styles-mainview.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/layerstyles-mainview.png" height="auto"><source src="/public/styles-mainview.mp4" type="video/mp4"></video>
## [Layer styles](#layer-styles)
@@ -43,7 +43,7 @@ They appear in the Inspector when you select a layer.
![Layer properties](public/properties_new1.png)
For details on styling properties, refer to the <a href="https://docs.icons8.com/lunacy-docs/styling" target="_blank">Styling</a> section of our documentation.
For details on styling properties, refer to the <a href="https://lunacy.docs.icons8.com/styling" target="_blank">Styling</a> section of our documentation.
### Adding a layer style
@@ -51,11 +51,11 @@ There are two ways of adding layer styles.
**Way 1.** By clicking the plus icon in the left panel and defining all the required properties in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/layerstyles-wayoneph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-wayone.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/layerstyles-wayoneph.png" height="auto"><source src="/public/layerstyles-wayone.mp4" type="video/mp4"></video>
**Way 2.** By first defining the properties of a layer and then saving them as a style.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/layerstyles-waytwoph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-waytwo.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/layerstyles-waytwoph.png" height="auto"><source src="/public/layerstyles-waytwo.mp4" type="video/mp4"></video>
### Applying styles to layers
@@ -70,7 +70,7 @@ Optionally, after selecting the layer you can click the required style in the le
You can also apply a style to multiple selected layer at a time (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/layerstyles-applyph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-apply.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/layerstyles-applyph.png" height="auto"><source src="/public/layerstyles-apply.mp4" type="video/mp4"></video>
### Modifying a layer style
@@ -159,7 +159,7 @@ To copy styles between documents:
4. Open the **Styles** tab.
5. Right-click over the left panel and select **Paste style** on the displayed menu.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/layerstyles-copyph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-copy.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/layerstyles-copyph.png" height="auto"><source src="/public/layerstyles-copy.mp4" type="video/mp4"></video>
### Deleting styles and categories
@@ -180,11 +180,11 @@ The only difference between text styles and [layer styles](#layer-styles) is th
![Text styles](public/layerstyles-text.png)
See also the <a href="https://docs.icons8.com/lunacy-docs/text/" target="_blank">Text</a> section for tips on working with text layers.
See also the <a href="https://lunacy.docs.icons8.com/text/" target="_blank">Text</a> section for tips on working with text layers.
## External styles
You can make use of layer and text styles from UI kits supplied with Lunacy or your own files. In the latter case you should first add this file to the **UI Kits** library. For details about UI kits, click <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">here</a>.
You can make use of layer and text styles from UI kits supplied with Lunacy or your own files. In the latter case you should first add this file to the **UI Kits** library. For details about UI kits, click <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">here</a>.
To apply an external style to a layer:
@@ -192,7 +192,7 @@ To apply an external style to a layer:
2. In the **Appearance** section of the Inspector, click the down arrowhead to invoke the menu.
3. In the **UI kits** section of the menu, navigate to the required style.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/layerstyles-externalph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-external.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/layerstyles-externalph.png" height="auto"><source src="/public/layerstyles-external.mp4" type="video/mp4"></video>
You cannot make changes to external styles, but you can use the **Unlink from Library** feature. This feature will add a copy of the style you need to your document assets, i.e. to the list of your layer or text styles. After that, you can do whatever you want with the unlinked style as with any other style within your document.
@@ -204,5 +204,5 @@ There are two ways to unlink styles:
The demo below shows both these methods.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/layerstyles-externalunlinkph.png" height="auto"><source src="/lunacy-docs/public/layerstyles-externalunlink.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/layerstyles-externalunlinkph.png" height="auto"><source src="/public/layerstyles-externalunlink.mp4" type="video/mp4"></video>
docs/libraries.md
+7 -7
View File
@@ -33,7 +33,7 @@ One of the cool things in Lunacy is Libraries. Libraries are collections of visu
For your convenience, the items inside libraries (icons and vector illustrations) are organized by styles categories. Also, to find the required item, you can use the search field at the top of the left panel. Once you've found the item you like, just click it and drag onto the canvas. That's it!
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/libraries-addingiconsph.png" height="auto"><source src="/lunacy-docs/public/libraries-addingicons.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/libraries-addingiconsph.png" height="auto"><source src="/public/libraries-addingicons.mp4" type="video/mp4"></video>
Now you can work with the item in the same way as with any other similar layers.
@@ -90,13 +90,13 @@ Like with [photos](#photos-and-masked-photos), when working with illustrations y
## [UI kits](#ui-kits)
<div class="callout callout--info">
<p><strong>Tip:</strong> To better understand the intent and how to use UI kits, we recommend that you first read the <a href="https://docs.icons8.com/lunacy-docs/components" target="_blank">Components</a> and <a href="https://docs.icons8.com/lunacy-docs/layerstyles" target="_blank">Layer and text styles</a> sections of our documentation.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p><strong>Tip:</strong> To better understand the intent and how to use UI kits, we recommend that you first read the <a href="https://lunacy.docs.icons8.com/components" target="_blank">Components</a> and <a href="https://lunacy.docs.icons8.com/layerstyles" target="_blank">Layer and text styles</a> sections of our documentation.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
>**Tip:** To better understand the intent and how to use UI kits, we recommend that you first read the <a href="https://docs.icons8.com/lunacy-docs/components" target="_blank">Components</a> and <a href="https://docs.icons8.com/lunacy-docs/layerstyles" target="_blank">Layer and text styles</a> sections of our documentation.
>**Tip:** To better understand the intent and how to use UI kits, we recommend that you first read the <a href="https://lunacy.docs.icons8.com/components" target="_blank">Components</a> and <a href="https://lunacy.docs.icons8.com/layerstyles" target="_blank">Layer and text styles</a> sections of our documentation.
-->
@@ -113,11 +113,11 @@ Lunacy library includes the following UI kits:
* Apple iOS
* Microsoft Web Fluent
In fact, UI kits are external .sketch files with ready-made <a href="https://docs.icons8.com/lunacy-docs/components" target="_blank">components</a>, <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#layer-styles" target="_blank">layer styles</a> and <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#text-styles" target="_blank">text styles</a>.
In fact, UI kits are external .sketch files with ready-made <a href="https://lunacy.docs.icons8.com/components" target="_blank">components</a>, <a href="https://lunacy.docs.icons8.com/layerstyles/#layer-styles" target="_blank">layer styles</a> and <a href="https://lunacy.docs.icons8.com/layerstyles/#text-styles" target="_blank">text styles</a>.
<div class="callout callout--info">
<p><strong>Tip:</strong> If you're working with a large document and feel that your computer is slow, you can disable the UI kits that you don't currently need. This will spare some system resources. You can always enable UI kits later.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -186,5 +186,5 @@ On the **Layers** tab, items from a UI kit library appear with the link icon in
#### Layer and text styles
For more information on how to use layer and text styles from UI kits, read <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#external-styles" target="_blank">here</a>.
For more information on how to use layer and text styles from UI kits, read <a href="https://lunacy.docs.icons8.com/layerstyles/#external-styles" target="_blank">here</a>.
docs/linked_design.md
+6 -6
View File
@@ -32,7 +32,7 @@ You can control the appearance of web pages right from Lunacy. The feature that
* Layer sizes
<div class="callout callout--warning">
<p><strong>Note:</strong> This feature is available only in <a href="https://docs.icons8.com/lunacy-docs/clouddocs/" target="_blank">cloud documents</a>.</p>
<p><strong>Note:</strong> This feature is available only in <a href="https://lunacy.docs.icons8.com/clouddocs/" target="_blank">cloud documents</a>.</p>
</div>
To learn more about the benefits of linked design and possible use cases, check out <a href="https://blog.icons8.com/articles/editing-live-web-pages-from-a-graphic-app-is-no-longer-a-dream/" target="_blank">this article</a>.
@@ -70,7 +70,7 @@ Here's also a short video explainer:
To make sure that your linked design works properly, mind the following rules:
* The use of <a href="https://docs.icons8.com/lunacy-docs/layerstyles/" target="_blank">text styles</a> is a MUST.
* The use of <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">text styles</a> is a MUST.
* Raster images subject to updates MUST belong to layer groups. It does not matter if you put all your raster images into a single group or combine them with vector layers in a more logical way. Just remember that *standalone rasters won't update*. If you're not going to update an image, you can leave it ungrouped.
* DO NOT rename layer and text styles after the design is online. These names are used in the CSS code, so if you modify them, you'll break the links with the current code.
* For the same reason, DO NOT add new styles, if you don't won't to bother your web developers. Edit your current styles instead.
@@ -82,22 +82,22 @@ To apply changes to a live webpage, proceed as follows.
1. Select the altered layer/layer group.
2. Open the **Export** tab in the right panel.
3. Click ![refresh button](/lunacy-docs/public/refresh_icon.png) next to the **Linked Design** section. This will apply the changes to the web page.
3. Click ![refresh button](/public/refresh_icon.png) next to the **Linked Design** section. This will apply the changes to the web page.
<embed type="image/svg+xml" alt="svg 5 Copy" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/ACYsQrDtUkSZyKE0lL3AtA.svg" />
**Tip:** If ![refresh button](/lunacy-docs/public/refresh_icon.png) appears disabled, click the question mark next to it first.
**Tip:** If ![refresh button](/public/refresh_icon.png) appears disabled, click the question mark next to it first.
4. Repeat as needed.
**For text layers:**
1. When you're done with all edits of text layers, deselect all layers on the canvas (press `Esc` or click anywhere over the canvas).
2. Click ![refresh button](/lunacy-docs/public/refresh_icon.png) next to the **Linked Design** section. This will apply the changes to the web page.
2. Click ![refresh button](/public/refresh_icon.png) next to the **Linked Design** section. This will apply the changes to the web page.
<embed type="image/svg+xml" alt="svg 7" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/tdocmRnNoEKC5rox84tqvw.svg" />
**Tip:** If ![refresh button](/lunacy-docs/public/refresh_icon.png) appears disabled, click the question mark next to it first.
**Tip:** If ![refresh button](/public/refresh_icon.png) appears disabled, click the question mark next to it first.
### Viewing changes in the browser
In the browser, reload the page by pressing `Ctrl + F5`/`⌘ ⌥ R` to make sure that the cached content is cleared.
docs/man/help.md
+2 -2
View File
@@ -1011,7 +1011,7 @@ You can use keyboard shortcuts in Lunacy to help speed up your design process.
We keep these shortcuts consistent with both Sketch for Mac and Photoshop. If you are used to the certain combinations, probably they will work here.
Full list of shortcuts is available at [http://docs.icons8.com/lunacy-docs/man/hot-keys](http://docs.icons8.com/lunacy-docs/man/hot-keys). We update this list as we add the new features.
Full list of shortcuts is available at [http://docs.icons8.com/man/hot-keys](http://docs.icons8.com/man/hot-keys). We update this list as we add the new features.
# Frequently Asked Questions
@@ -1044,7 +1044,7 @@ Q: How would I know when to update Lunacy? Once there are updates, will I have t
A: Windows Store version updates silently. If not, check if you [have](https://support.microsoft.com/en-gb/help/15081/windows-turn-on-automatic-app-updates) the automatic updates on. We recommend this option. \
If you installed Lunacy with a downloadable installer, it will notify you about the update with an alert in the window title.
In any case, you can check our [release notes](https://docs.icons8.com/lunacy-docs/release-notes/).
In any case, you can check our [release notes](https://lunacy.docs.icons8.com/release-notes/).
# Contacting Support
docs/objects.md
+40 -40
View File
@@ -26,15 +26,15 @@ page_nav:
In Lunacy you will work with the following types of objects:
* <a href="https://docs.icons8.com/lunacy-docs/interface/#artboards" target="_blank">Artboards</a>
* <a href="https://docs.icons8.com/lunacy-docs/text/" target="_blank">Text objects</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool" target="_blank">Vector objects</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#shape-tools" target="_blank">Shapes</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#image-tool" target="_blank">Images</a>
* <a href="https://docs.icons8.com/lunacy-docs/components/" target="_blank">Components and component instances</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#icon-tool" target="_blank">Icons</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#hotspot-tool" target="_blank">Hotspots</a>
* <a href="https://docs.icons8.com/lunacy-docs/tools/#slice-tool" target="_blank">Slices</a>
* <a href="https://lunacy.docs.icons8.com/interface/#artboards" target="_blank">Artboards</a>
* <a href="https://lunacy.docs.icons8.com/text/" target="_blank">Text objects</a>
* <a href="https://lunacy.docs.icons8.com/tools/#pen-tool" target="_blank">Vector objects</a>
* <a href="https://lunacy.docs.icons8.com/tools/#shape-tools" target="_blank">Shapes</a>
* <a href="https://lunacy.docs.icons8.com/tools/#image-tool" target="_blank">Images</a>
* <a href="https://lunacy.docs.icons8.com/components/" target="_blank">Components and component instances</a>
* <a href="https://lunacy.docs.icons8.com/tools/#icon-tool" target="_blank">Icons</a>
* <a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool" target="_blank">Hotspots</a>
* <a href="https://lunacy.docs.icons8.com/tools/#slice-tool" target="_blank">Slices</a>
For specifics on working with each type of objects, follow the above links. This section provides an overview of basic operations common for all object types.
@@ -42,16 +42,16 @@ For specifics on working with each type of objects, follow the above links. This
To add an object to the canvas:
1. Enable the respective <a href="https://docs.icons8.com/lunacy-docs/tools" target="_blank">tool</a> on the toolbar or with a shortcut (see the note below).
1. Enable the respective <a href="https://lunacy.docs.icons8.com/tools" target="_blank">tool</a> on the toolbar or with a shortcut (see the note below).
2. Click or click and drag over the area where you want to place the object.
If you need to create a regular shape (for example, a circle or a square), hold down `Shift` while dragging.
That is the most common method used in all similar applications. When you use it, the point from where you start dragging becomes an angle of the shape, if it is a rectangle, or an angle of its selection frame, if it is anything else. If you want the starting point to become the center of the shape, hold down `Alt` while dragging and `Alt + Shift` to get a regular shape (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-addingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-adding.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-addingplaceholder.png" height="auto"><source src="/public/objects-adding.mp4" type="video/mp4"></video>
**Note:** To check out the shortcuts available in Lunacy, click the **Keyboard Shortcuts** button at the lower-left corner of the interface (this will open the shortcuts panel in Lunacy) or read <a href="https://docs.icons8.com/lunacy-docs/shortcuts/" target="_blank">here</a>.
**Note:** To check out the shortcuts available in Lunacy, click the **Keyboard Shortcuts** button at the lower-left corner of the interface (this will open the shortcuts panel in Lunacy) or read <a href="https://lunacy.docs.icons8.com/shortcuts/" target="_blank">here</a>.
![Adding text](public/objects-kbdshotcuts1.png)
@@ -83,7 +83,7 @@ After you select an object within a group, you can switch to other objects of th
To quickly select all objects on the canvas, use the `Ctrl+A` shortcut.
For details about using the select tool and a demo, click <a href="https://docs.icons8.com/lunacy-docs/tools/#select-tool" target="_blank">here</a>.
For details about using the select tool and a demo, click <a href="https://lunacy.docs.icons8.com/tools/#select-tool" target="_blank">here</a>.
## Moving objects
@@ -91,15 +91,15 @@ To move an object, just click and drag it. Make sure that the cursor is over the
If you want to restrict movement to the X or Y axis, hold down `Shift` as you drag.
For precise positioning you can use the arrow keys. Each keystroke moves an object by one pixel. Holding down `Shift` increases each step to 10 pixels (see also the <a href="https://docs.icons8.com/lunacy-docs/interface/#measuring" target="_blank">Measuring</a> section).
For precise positioning you can use the arrow keys. Each keystroke moves an object by one pixel. Holding down `Shift` increases each step to 10 pixels (see also the <a href="https://lunacy.docs.icons8.com/interface/#measuring" target="_blank">Measuring</a> section).
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-movingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-moving.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-movingplaceholder.png" height="auto"><source src="/public/objects-moving.mp4" type="video/mp4"></video>
Also, to adjust an object's position on the canvas or artboard, you can use the **X** and **Y** controls in the Inspector. If an object is on the canvas, the figures in the **X** and **Y** fields show the absolute coordinates of the object's top-left selection handle.
If the object is a part of an artboard, **X** and **Y** display the coordinates of the object's top-left selection handle relative to the artboard's top-left corner. See the demo below and the <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">tips</a> on working with numeric fields in the Inspector.
If the object is a part of an artboard, **X** and **Y** display the coordinates of the object's top-left selection handle relative to the artboard's top-left corner. See the demo below and the <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">tips</a> on working with numeric fields in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-moving1placeholder.png" height="auto"><source src="/lunacy-docs/public/objects-moving1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-moving1placeholder.png" height="auto"><source src="/public/objects-moving1.mp4" type="video/mp4"></video>
## Grouping objects
@@ -118,7 +118,7 @@ After you select an object within a group, you can switch to other objects of th
You can move objects into or out of a group by dragging them in the **Objects** panel.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-groupingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-grouping.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-groupingplaceholder.png" height="auto"><source src="/public/objects-grouping.mp4" type="video/mp4"></video>
To ungroup objects, select the group and click the **Ungroup** button (![Ungroup button](public/objects-ungroupbutton.png)) on the context toolbar or press `Ctrl+Shift+G`.
@@ -128,7 +128,7 @@ To duplicate an object, select it and press `Ctrl+D`. Alternatively, you can hol
Lunacy remembers the offset of the latest duplicate. So, if you press `Ctrl+D` shortly after you create a duplicate of and object, 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.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-duplicateplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-duplicate.mp4" type="video/mp4"></video>
<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.
@@ -180,14 +180,14 @@ The table below provides a description of these options.
</tr>
<tr>
<td><b>Copy style/Paste style</b></td>
<td>These options allow you to copy the <a href="https://docs.icons8.com/lunacy-docs/styling" target="_blank">styling properties</a> of the selected object and apply them to another object. See the demo below.</td>
<td>These options allow you to copy the <a href="https://lunacy.docs.icons8.com/styling" target="_blank">styling properties</a> of the selected object and apply them to another object. See the demo below.</td>
</tr>
</tbody>
</table>
The demo below shows how you can copy and paste styling properties between objects.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-copypasteplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-copypaste.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-copypasteplaceholder.png" height="auto"><source src="/public/objects-copypaste.mp4" type="video/mp4"></video>
## Resizing objects
@@ -202,7 +202,7 @@ There are several ways how you can resize objects:
To resize an object, drag any of its selection handles as shown in the demo below. Use the handles on the sides, to change the object's height or width. Use the corner handles to adjust the object's height and width at the same time. Hold down `Shift` while dragging to preserve the object's aspect ratio.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/object-resizing1.png" height="auto"><source src="/lunacy-docs/public/object-resizing1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/object-resizing1.png" height="auto"><source src="/public/object-resizing1.mp4" type="video/mp4"></video>
Also, you can hold down `Alt` while dragging to resize the object from its center, rather than from the edge that you are dragging.
@@ -212,17 +212,17 @@ The `Alt+Shift+drag` combination is also possible to preserve the object's aspec
Select the object and use the shortcuts `CTRL+ arrow keys` (by 1 pixel) or `CTRL+Shift + arrow keys` ( by 10 pixels).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-keyresizeph.png" height="auto"><source src="/lunacy-docs/public/tips-keyresize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-keyresizeph.png" height="auto"><source src="/public/tips-keyresize.mp4" type="video/mp4"></video>
### Resizing an object through the Inspector
Select the object and use the **W** (width) and **H** (height) edit fields, when you need to define the exact size of an object.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/object-resizing2.png" height="auto"><source src="/lunacy-docs/public/object-resizing2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/object-resizing2.png" height="auto"><source src="/public/object-resizing2.mp4" type="video/mp4"></video>
Click the links button to preserve the object's aspect ratio. With this button enabled, the change of a value in one of the boxes, will result in respective value adjustment in the second box.
Also, read <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">here</a> for some tips on working with numeric fields in the Inspector.
Also, read <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">here</a> for some tips on working with numeric fields in the Inspector.
### Scaling objects
@@ -238,7 +238,7 @@ To scale an object:
See the demo below and note how the value of the border thickness changes with the object size.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/object-resizing3.png" height="auto"><source src="/lunacy-docs/public/object-resizing3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/object-resizing3.png" height="auto"><source src="/public/object-resizing3.mp4" type="video/mp4"></video>
In a similar fashion you can scale several objects at a time.
@@ -264,7 +264,7 @@ These controls include:
To better understand how all this works, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-constraintsplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-constraints.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-constraintsplaceholder.png" height="auto"><source src="/public/objects-constraints.mp4" type="video/mp4"></video>
## Aligning and distributing objects
@@ -286,42 +286,42 @@ The table below provides a description of the controls.
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/objects-alignleft.png" alt="Align Left"></td>
<td><img src="/public/objects-alignleft.png" alt="Align Left"></td>
<td><b>Align Left</b>. Aligns the selected objects to the left bound of their selection frame.</td>
<td><code>Shift + Ctrl + &leftarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignhoriz.png" alt="Align Horizontally"></td>
<td><img src="/public/objects-alignhoriz.png" alt="Align Horizontally"></td>
<td><b>Align Horizontally</b>. Horizontally centers the selected objects.</td>
<td><code>Ctrl + Shift + -</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignright.png" alt="Align Right"></td>
<td><img src="/public/objects-alignright.png" alt="Align Right"></td>
<td><b>Align Right</b>. Aligns the selected objects to the right bound of their selection frame.</td>
<td><code>Shift + Ctrl + &rightarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-distribvertspac.png" alt="Distribute Vertical Spacing"></td>
<td><img src="/public/objects-distribvertspac.png" alt="Distribute Vertical Spacing"></td>
<td><b>Distribute Vertical Spacing</b>. Evens vertical spacing between the selected objects. Note that the topmost and the lowermost objects in the selection always preserve their original position, while the objects between them adjust their position to ensure equal spacing.</td>
<td><code>Shift + Ctrl + V</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-aligntop.png" alt="Align Top"></td>
<td><img src="/public/objects-aligntop.png" alt="Align Top"></td>
<td><b>Align Top</b>. Aligns the selected objects to the top bound of their selection frame.</td>
<td><code>Shift + Ctrl + &uparrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignvert.png" alt="Align Vertically"></td>
<td><img src="/public/objects-alignvert.png" alt="Align Vertically"></td>
<td><b>Align Vertically</b>. Vertically centers the selected objects.</td>
<td><code>Ctrl + Shift + |</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-alignbot.png" alt="Align Bottom"></td>
<td><img src="/public/objects-alignbot.png" alt="Align Bottom"></td>
<td><b>Align Bottom</b>. Aligns the selected objects to the bottom bound of their selection frame.</td>
<td><code>Shift + Ctrl + &downarrow;</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/objects-distribhorspac.png" alt="Distribute Vertical Spacing"></td>
<td><img src="/public/objects-distribhorspac.png" alt="Distribute Vertical Spacing"></td>
<td><b>Distribute Horizontal Spacing</b>. Evens horizontal spacing between the selected objects. Note that the rightmost and the leftmost objects in the selection always preserve their original position, while the objects between them adjust their position to ensure equal spacing.</td>
<td><code>Shift + Ctrl + H</code></td>
</tr>
@@ -330,7 +330,7 @@ The table below provides a description of the controls.
To better understand how it all works, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-aligndistrpaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-aligndistr.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-aligndistrpaceholder.png" height="auto"><source src="/public/objects-aligndistr.mp4" type="video/mp4"></video>
### Smart distribute
@@ -342,7 +342,7 @@ For this:
2. Click the **Tidy up** button in the Inspector. The objects get re-arranged,red handles appear between rows and columns of the "grid".
3. Drag the red handles to adjust the spacing between rows and columns. Click the red circle in the center of an object and drag to move it to another “grid cell”. See the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-smartdistribph.png" height="auto"><source src="/lunacy-docs/public/objects-smartdistr.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-smartdistribph.png" height="auto"><source src="/public/objects-smartdistr.mp4" type="video/mp4"></video>
## Arranging objects along the Z-axis
@@ -355,7 +355,7 @@ To position objects along the Z-axis, use the send/bring commands found on the c
The demo below shows how it works.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-sendbringplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-sendbring.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-sendbringplaceholder.png" height="auto"><source src="/public/objects-sendbring.mp4" type="video/mp4"></video>
Also, you can do the same by dragging objects up and down relative one another in the object list.
@@ -380,7 +380,7 @@ To quickly return the object into its initial position:
To flip the selected object, use the **Flip Horizontally** (![Flip horizontally button](public/objects-fliphbtn.png)) and **Flip Vertically** (![Flip horizontally button](public/objects-flipvbtn.png)) buttons that appear on the context toolbar.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-flipplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-flip.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-flipplaceholder.png" height="auto"><source src="/public/objects-flip.mp4" type="video/mp4"></video>
Alternatively, you can use the following shortcuts:
@@ -391,4 +391,4 @@ Also, the **Flip Horizontally** and **Flip Vertically** commands are available o
Another way to flip an object is to drag selection handles as shown in the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-flipplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-flip2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-flipplaceholder.png" height="auto"><source src="/public/objects-flip2.mp4" type="video/mp4"></video>
docs/prototyping.md
+7 -7
View File
@@ -52,13 +52,13 @@ That's it. A primitive prototype is ready. To make it a bit more usable, we will
To preview a prototype, select an artboard you want to start with and click ![Play button](public/playbtn.png) in the upper-right corner of the interface. The preview window will show up.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/proto-procedureph.png" height="auto"><source src="/lunacy-docs/public/proto-procedure.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/proto-procedureph.png" height="auto"><source src="/public/proto-procedure.mp4" type="video/mp4"></video>
In a similar fashion you can link your artboards in the desired navigation sequence and preview your design in action.
## Scrollable prototypes
To create a scrollable prototype, you should select an artboard from Artboard Presets and resize it **vertically**. Alternatively, you can create a custom preset and then vertically resize it. For details, about artboards presets and custom presets, click <a href="https://docs.icons8.com/lunacy-docs/interface/#artboards" target="_blank">here</a>.
To create a scrollable prototype, you should select an artboard from Artboard Presets and resize it **vertically**. Alternatively, you can create a custom preset and then vertically resize it. For details, about artboards presets and custom presets, click <a href="https://lunacy.docs.icons8.com/interface/#artboards" target="_blank">here</a>.
Resized artboards appear with the word *Resized* in the Inspector as shown in the figure below. Prototypes based on non-resized artboards won't scroll.
@@ -70,16 +70,16 @@ You can also use hotspots to create links between artboards. These are a special
Also, hotspots come in handy when the size of an element that you want to make clickable or tappable is too small for convenient use. By adding a hotspot you can enlarge interactive area around the layer.
Moreover, you can use hotspots as parts of <a href="https://docs.icons8.com/lunacy-docs/components/" target="_blank">components</a> and override their targets as needed.
Moreover, you can use hotspots as parts of <a href="https://lunacy.docs.icons8.com/components/" target="_blank">components</a> and override their targets as needed.
To add a hotspot you can:
* Use the <a href="https://docs.icons8.com/lunacy-docs/tools/#hotspot-tool" target="_blank">hotspot tool</a>.
* Use the <a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool" target="_blank">hotspot tool</a>.
* Select a linked layer, then click ![Create hotspot icon](public/proto-hotspoticon.png) in the **Prototyping** section of the Inspector. This creates a hotspot of the same size as of the selection frame around the layer. You can resize it by dragging handles, if necessary.
The demo below show both these methods.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/proto-hotspotph.png" height="auto"><source src="/lunacy-docs/public/proto-hotspot.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/proto-hotspotph.png" height="auto"><source src="/public/proto-hotspot.mp4" type="video/mp4"></video>
The next figure shows how hotspots and linked layers appear in the Layer list.
@@ -139,8 +139,8 @@ You can also preview prototypes in Sketch Cloud. For this, you need to upload yo
All the above steps are shown in the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/proto-demoph.png" height="auto"><source src="/lunacy-docs/public/proto-demo1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/proto-demoph.png" height="auto"><source src="/public/proto-demo1.mp4" type="video/mp4"></video>
**Note:** When you upload your file to Sketch Cloud, you create a new independent file which *will not* synchronize with its parent that you store on your computer. So, make sure that you edit one and the same file. You can always download the Cloud file to you computer or upload a new version of the local copy to the Cloud. For details about working with Sketch Cloud from Lunacy, read <a href="https://docs.icons8.com/lunacy-docs/cloud/" target="_blank">here</a>.
**Note:** When you upload your file to Sketch Cloud, you create a new independent file which *will not* synchronize with its parent that you store on your computer. So, make sure that you edit one and the same file. You can always download the Cloud file to you computer or upload a new version of the local copy to the Cloud. For details about working with Sketch Cloud from Lunacy, read <a href="https://lunacy.docs.icons8.com/cloud/" target="_blank">here</a>.
-->
docs/release-notes/index.md
+94 -94
View File
@@ -90,7 +90,7 @@ Now, you can subscribe to the Lunacy Cloud Team Plan and get:
* Unlimited thrash storage period
* Free personal cloud license for the team owner
For details about teamwork in Lunacy, read <a href="https://docs.icons8.com/lunacy-docs/teams/" target="_blank">here</a>.
For details about teamwork in Lunacy, read <a href="https://lunacy.docs.icons8.com/teams/" target="_blank">here</a>.
<embed type="image/svg+xml" alt="Group 2" src="https://cdn-eu.icons8.com/docs/gl51ueShF0iBDEjitVDQmw/GAnM3wqyBkKUsNwt5c7_kQ.svg" />
@@ -136,7 +136,7 @@ If you prefer drawing gray rectangles over gray rectangles, remove all the color
Lunacy automatically determines the order of layers (aka z-index) as you drag them. For example, if you drag a larger layer over a smaller one, Lunacy will place the larger layer below the smaller one. You can still use the **Send to back**/**Send to front commands**, but now you will need them way less often.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-autozaxisph.png" height="auto"><source src="/lunacy-docs/public/rn-autozaxis.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-autozaxisph.png" height="auto"><source src="/public/rn-autozaxis.mp4" type="video/mp4"></video>
### Snapping to artboard presets
@@ -147,10 +147,10 @@ To disable snapping, hold down `Ctrl` (`⌘`) while dragging.
<embed type="image/svg+xml" alt="Group 7" src="https://cdn-eu.icons8.com/docs/gl51ueShF0iBDEjitVDQmw/D7EWycxvykihzxdzj_YYJQ.svg" />
### Czech language ![Czech flag](/lunacy-docs/public/icons8-czechia-24.png)
### Czech language ![Czech flag](/public/icons8-czechia-24.png)
Big thanks to *elektronek* and *petr.zachrdla* for helping us out with the Czech localization.
If you also want to take part in Lunacy localization, click <a href="https://docs.icons8.com/localization/" target="_blank">here</a>.
If you also want to take part in Lunacy localization, click <a href="https://lunacy.docs.icons8.com/localization/" target="_blank">here</a>.
### Improvements
@@ -209,7 +209,7 @@ Download:
### Linked design
![Linked design](/lunacy-docs/public/linked_design.png)
![Linked design](/public/linked_design.png)
Now you can control the appearance of web pages right from Lunacy. We introduced the concept of **linked design** that lets you update design in Lunacy and then apply the changes to the web page. This applies to:
@@ -235,27 +235,27 @@ That’s it! Now your graphic designers can update the page by themselves.
#### How it works for a graphic designer
After you’ve made changes to your design, go to the **Export** panel and click ![refresh button](/lunacy-docs/public/refresh_icon.png) next to the CSS file, JSON file, or links to graphic content depending on what you’ve changed.
After you’ve made changes to your design, go to the **Export** panel and click ![refresh button](/public/refresh_icon.png) next to the CSS file, JSON file, or links to graphic content depending on what you’ve changed.
That’s it! The changes will immediately appear on the web page.
### Easier work with icons
![reworked icons](/lunacy-docs/public/reworked_icons.png)
![reworked icons](/public/reworked_icons.png)
You no longer have to download the 500+ MB icon pack to start working with icons in Lunacy. Now, they upload in real-time as you scroll the gallery in the right panel. What’s more, now you have access to all the latest icons available at <a href="https://icons8.com/" target="_blank">icons8.com</a>.
### Text generation by text block size
![text generation by text block size](/lunacy-docs/public/text_generation_by_text_block_size1.png)
![text generation by text block size](/public/text_generation_by_text_block_size1.png)
Now you can instantly add meaningful texts without racking your brain. When you create a text block by dragging it over the canvas, Lunacy suggests different types of text content depending on the text block size: time, date, people names, professions, headings, paragraphs, and more. If you’re OK with the suggested text, you can leave it and go on working. If not, simply enter the required copy.
### Refresh of generated data upon duplicating
![Refresh of generated data upon duplicating](/lunacy-docs/public/refresh_of_generated_data1.png)
![Refresh of generated data upon duplicating](/public/refresh_of_generated_data1.png)
When you duplicate or copy and paste layers with auto-generated data (texts or avatars), Lunacy replaces current instances with new ones.
@@ -264,9 +264,9 @@ To disable the refresh of generated content, in the top menu, go to **Layer > Co
### Repeat grid
![Repeat grid](/lunacy-docs/public/repeat_grid.png)
![Repeat grid](/public/repeat_grid.png)
When you select two or more layers or layer groups, you’ll see ![repeat grid handle](/lunacy-docs/public/repeat_grid_handle.png) next to the lower-right corner of the bounding box. By dragging it you can create any grids of similar elements.
When you select two or more layers or layer groups, you’ll see ![repeat grid handle](/public/repeat_grid_handle.png) next to the lower-right corner of the bounding box. By dragging it you can create any grids of similar elements.
If the original elements include auto-generated data, newly created elements will appear with refreshed data, provided that the **AutoRefresh** (see above) option is enabled. This can save you lots of time when designing things like customer testimonials, user cards, and similar UI elements.
@@ -300,7 +300,7 @@ Download:
### Personal Cloud plan
![personal cloud](/lunacy-docs/public/personal_cloud_plan2.png)
![personal cloud](/public/personal_cloud_plan2.png)
We’re introducing a personal cloud subscription that will give you more freedom with cloud documents:
@@ -322,7 +322,7 @@ The statuses of your subscriptions now appear next to your username on the **Hom
### Version history
![version history](/lunacy-docs/public/version_history2.png)
![version history](/public/version_history2.png)
We added version history for cloud documents. Lunacy automatically saves file versions after a series of 100 user actions. Or you can save versions manually using the `Ctrl(⌘) + Alt + S` shortcut.
To view a document version history, go to **File** > **Show version history**. The list of file versions opens in the right panel. Double-click the required version to open it. File versions open as local temporary files that you can save to any folder on your computer and then import back to the Cloud.
@@ -331,43 +331,43 @@ Free users can access up to 30 days of version history. To unlock the full histo
### Voice comments, stickers, and overall improvement of comments
![voice comments and stickers](/lunacy-docs/public/rn-comments2.png)
![voice comments and stickers](/public/rn-comments2.png)
* Now you can leave voice comments in cloud documents. For this, enable the comment tool (`C`), click ![microphone](/lunacy-docs/public/Microphone_Icon.png), say what you want to say, then click ![send](/lunacy-docs/public/Paper_Plane_Icon.png). Make sure you allow Lunacy to access the microphone, otherwise your comments will not be recorded.
* You can now post stickers like *thumb up*, *thumb down*, *+1*, *heart*, and other instead of comments. Stickers show up right on the canvas. There’s no need to open comment bubbles, unless you want to post a reply. To post a sticker, enable the comment tool, click ![sticker icon](/lunacy-docs/public/sticker_icon.png) icon next to the comment entry field, and select the required sticker. You can also send stickers in replies to comments.
* Now you can leave voice comments in cloud documents. For this, enable the comment tool (`C`), click ![microphone](/public/Microphone_Icon.png), say what you want to say, then click ![send](/public/Paper_Plane_Icon.png). Make sure you allow Lunacy to access the microphone, otherwise your comments will not be recorded.
* You can now post stickers like *thumb up*, *thumb down*, *+1*, *heart*, and other instead of comments. Stickers show up right on the canvas. There’s no need to open comment bubbles, unless you want to post a reply. To post a sticker, enable the comment tool, click ![sticker icon](/public/sticker_icon.png) icon next to the comment entry field, and select the required sticker. You can also send stickers in replies to comments.
* Now, when you select a layer and then click with the comment tool over it, the added comment gets tied to the layer. If you later decide to move the layer to some other place on the canvas, the comment will move with the layer.
* By default, comments are always visible on the canvas. To hide comments, click ![view](/lunacy-docs/public/nine_dots_icon.png) > **Comments** on the top bar.
* To open/hide the list of all comments in the right panel, click ![send](/lunacy-docs/public/comments_icon.png) on the top bar.
* By default, comments are always visible on the canvas. To hide comments, click ![view](/public/nine_dots_icon.png) > **Comments** on the top bar.
* To open/hide the list of all comments in the right panel, click ![send](/public/comments_icon.png) on the top bar.
### Pre-made palettes
![palettes](/lunacy-docs/public/palettes2.png)
![palettes](/public/palettes2.png)
When you create a document, Lunacy shows one of pre-set color palettes that you can use in your design. It appears in the right panel when nothing is selected on the canvas. If you don’t like the current palette, click ![refresh icon](/lunacy-docs/public/reset_icon.png) to choose the one that suits you best.
When you create a document, Lunacy shows one of pre-set color palettes that you can use in your design. It appears in the right panel when nothing is selected on the canvas. If you don’t like the current palette, click ![refresh icon](/public/reset_icon.png) to choose the one that suits you best.
Note that palettes appear only in documents created in version 8.6 or higher.
### Shape cropping
![shape cropping](/lunacy-docs/public/shape_cropping2.png)
![shape cropping](/public/shape_cropping2.png)
You no longer need to struggle with the vector tool or tricky Boolean and flattening operations to get a half-circle or a part of another shape. With the shape cropper, you will do it in a couple of clicks:
1. Select the required shape.
2. Click ![scissors icon](/lunacy-docs/public/crop_icon.png) on the context toolbar.
2. Click ![scissors icon](/public/crop_icon.png) on the context toolbar.
3. Drag the borders of the frame to select the required area.
4. Press `Enter` or click **Apply** editing in the right panel.
### Sharing your Lunacy profile on the internet
![sharing profile](/lunacy-docs/public/sharing_profile2.png)
![sharing profile](/public/sharing_profile2.png)
Another way to share your portfolio. Your cloud documents now also show up on your profile page in Lunacy with the **Publish**/**Unpublish** button. You can send a link to your Lunacy profile to other people for them to view published files. For this:
1. Go to **Home** > **Profile** > ![show more icon](/lunacy-docs/public/three_dots_button.png) > **Web profile**. Your web profile will open in the browser.
1. Go to **Home** > **Profile** > ![show more icon](/public/three_dots_button.png) > **Web profile**. Your web profile will open in the browser.
2. Copy the link to the profile in the address bar.
3. Send the link by email or an instant messenger.
@@ -397,7 +397,7 @@ Download:
Teams serve to make it easier for you to manage collaborative documents and people who have access to them.
![Team projects tab](/lunacy-docs/public/teams-prjectstab3.png)
![Team projects tab](/public/teams-prjectstab3.png)
In version 8.5, you'll be able to try out how teams work on a free plan. In upcoming versions, we'll add some paid plans that will provide more opportunities and less limitations.
@@ -408,7 +408,7 @@ How it works with the free plan:
* You should use projects to organize team documents. Think of projects as of folders. All the documents within team projects automatically become available to the team members.
* The total number of documents across all projects of a free team cannot exceed ten.
For details, about teams read <a href="https://docs.icons8.com/lunacy-docs/teams/" target="_blank">here</a>.
For details, about teams read <a href="https://lunacy.docs.icons8.com/teams/" target="_blank">here</a>.
Note that you can still share cloud documents with other users as you did it earlier, before we introduced teams.
@@ -452,13 +452,13 @@ Context menu has become more compact and easier to use. The most popular command
Also, the context menu now features the **Move to Page** option that lets you quickly move layers between document pages.
![Redesigned context menu](/lunacy-docs/public/rn84contextmenu.png)
![Redesigned context menu](/public/rn84contextmenu.png)
### Track viewport mode
Now, you can use the Track Viewport mode in the Layer List to view only the layers that you currently see on the canvas. To enable/disable the mode, click ![Track viewport mode icon](/lunacy-docs/public/rn84treetrack.png) in the **Search field** above the Layers List.
Now, you can use the Track Viewport mode in the Layer List to view only the layers that you currently see on the canvas. To enable/disable the mode, click ![Track viewport mode icon](/public/rn84treetrack.png) in the **Search field** above the Layers List.
![Track viewport mode](/lunacy-docs/public/rn84trackviewportmode.png)
![Track viewport mode](/public/rn84trackviewportmode.png)
### Setting hyperlinks to layers
@@ -472,7 +472,7 @@ You can now set hyperlinks to any layer in your file and quickly jump to this la
4. Press `F2` (rename) and paste the link instead of the current layer name.
To jump to the target layer, hover the mouse over the linked layer, press down `Ctrl` (`⌘`) and click. If the linked layer is locked, pressing down `Ctrl` (`⌘`) is not necessary.
![Setting links to layers](/lunacy-docs/public/rn84links.png)
![Setting links to layers](/public/rn84links.png)
### Improvements
@@ -523,7 +523,7 @@ To switch between states, select a component, then select the required state in
For other actions, use the respective controls at the bottom of the **Component** section.
![Component state management](/lunacy-docs/public/rn83-componentstates.png)
![Component state management](/public/rn83-componentstates.png)
### Improvements
@@ -575,7 +575,7 @@ Download:
Color variables let you efficiently manage colors in your documents and instantly recolor all the layers using the same color variable. You can apply color variables to fills, borders, and shadows.
In the Inspector, color variables appear as colored circles (![color variable icon](/lunacy-docs/public/colorvariable_circle.png)), while regular fills, border and shadow colors appear as colored rectangles (![regular fill icon](/lunacy-docs/public/fill-rectangle.png)).
In the Inspector, color variables appear as colored circles (![color variable icon](/public/colorvariable_circle.png)), while regular fills, border and shadow colors appear as colored rectangles (![regular fill icon](/public/fill-rectangle.png)).
To create a color variable:
@@ -584,21 +584,21 @@ To create a color variable:
3. Set the required color.
4. Click **Create Color Variable**.
To apply an existing color variable, select a layer, click ![4 dots icon](/lunacy-docs/public/4dotsicon.png) in the Inspector, then select the required color variable.
To apply an existing color variable, select a layer, click ![4 dots icon](/public/4dotsicon.png) in the Inspector, then select the required color variable.
To edit a color variable, click over the colored circle in the Inspector, then click ![settings icon](/lunacy-docs/public/settingsicon.png) > **Edit variable**.
To edit a color variable, click over the colored circle in the Inspector, then click ![settings icon](/public/settingsicon.png) > **Edit variable**.
To detach a layer from a color variable, select the layer, then click ![detach icon](/lunacy-docs/public/detachicon.png) in the Inspector.
To detach a layer from a color variable, select the layer, then click ![detach icon](/public/detachicon.png) in the Inspector.
![Color variables in Lunacy](/lunacy-docs/public/color_variables_rn.png)
![Color variables in Lunacy](/public/color_variables_rn.png)
### Inspector of selected fonts and colors
Now Lunacy displays all fonts and colors of currently selected layers in the Inspector. This lets you quickly view the font and color properties of a selection and edit them, if necessary.
By clicking ![4 dots icon](/lunacy-docs/public/showfontorcoloricon1.png) next to color or font you can switch the selection to the layer(-s) using this color/font.
By clicking ![4 dots icon](/public/showfontorcoloricon1.png) next to color or font you can switch the selection to the layer(-s) using this color/font.
![Color and font inspector](/lunacy-docs/public/colorfontinspector_rn.png)
![Color and font inspector](/public/colorfontinspector_rn.png)
### Live updates and comments in cloud prototypes
@@ -615,7 +615,7 @@ To reply to a comment, click over it, type your message and click the send icon.
To hide comments, click **Comments** once again.
![Color and font inspector](/lunacy-docs/public/cloudproto-rn.png)
![Color and font inspector](/public/cloudproto-rn.png)
### Improvements
@@ -644,11 +644,11 @@ You can download the build on our website. Later it will also be available on th
### Scale tool
We revamped the Scale feature and moved it from the context toolbar to the main toolbar. You no longer need to define the required scale percentage. Simply select an object, click ![Scale too icon](/lunacy-docs/public/scale-tool.png) on the toolbar (or press `K`) and drag the bounding box.
We revamped the Scale feature and moved it from the context toolbar to the main toolbar. You no longer need to define the required scale percentage. Simply select an object, click ![Scale too icon](/public/scale-tool.png) on the toolbar (or press `K`) and drag the bounding box.
With the Scale tool selected, you can edit any of the settings (say, width) in the Inspector. Then press `Enter`, and Lunacy will scale all the other settings accordingly.
![Using scale tool](/lunacy-docs/public/rn81-scaletool.png)
![Using scale tool](/public/rn81-scaletool.png)
### View Only and Export Only access to cloud documents
@@ -661,7 +661,7 @@ When sharing a cloud document, you can select the access level to the document:
Also, now you can ban users.
![Setting export-only and view only modes in cloud documents, and banning users](/lunacy-docs/public/rn81-export-and-view-only.png)
![Setting export-only and view only modes in cloud documents, and banning users](/public/rn81-export-and-view-only.png)
### Code and Inspect panels
@@ -673,7 +673,7 @@ We redesigned the **Code** panel for better usability. Also, now it features the
* Colors in different color models
* Styling options (borders, shadows, etc.)
![A view of the Code and Inspect panels](/lunacy-docs/public/rn81-code-and-inspect-panels.png)
![A view of the Code and Inspect panels](/public/rn81-code-and-inspect-panels.png)
### Improvements
@@ -696,7 +696,7 @@ We redesigned the **Code** panel for better usability. Also, now it features the
*Release date: October 28, 2021*
![Supported platforms](/lunacy-docs/public/maclinuxwin.png)
![Supported platforms](/public/maclinuxwin.png)
Download:
@@ -745,7 +745,7 @@ Now you can have three types of cloud documents:
* **Hidden** - accessible for everyone with the link. Hidden from other users in your profile.
* **Private** - accessible only with personal links that can be used only once. So, every time you want to invite a new user to a private document, you should send a new link. You can always withdraw your private link by clicking **X** next to the username. This will make the link invalid and throw the user out of the document.
![Cloud doc types](/lunacy-docs/public/rn71-privacy.png)
![Cloud doc types](/public/rn71-privacy.png)
**Note:** *Currently, everyone with a link to your document can edit it. Soon, you will be able to set read-only privileges.*
@@ -755,7 +755,7 @@ Now you can have three types of cloud documents:
The Observer Mode enables you to follow the activities of other users on the canvas. For this, click the user's avatar in the top-right corner. You will see a colored frame around the canvas, indicating that you're now in the Observer Mode.
![Observer mode](/lunacy-docs/public/rn71_observermode.png)
![Observer mode](/public/rn71_observermode.png)
To exit the mode, click the user's avatar once again.
@@ -790,11 +790,11 @@ Download from the <a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?oci
#### Home Tab
We replaced the **Welcome Window** with the **Home Tab**. You can now always access it from the top panel (![Home icon](/lunacy-docs/public/rn70_homeicon.png)).
We replaced the **Welcome Window** with the **Home Tab**. You can now always access it from the top panel (![Home icon](/public/rn70_homeicon.png)).
Also, we moved the **Sign in/Sign up** form and the list of **Recent documents** to the **Home Tab** (see the figure below).
![Home tab](/lunacy-docs/public/rn70-hometab.png)
![Home tab](/public/rn70-hometab.png)
#### Lunacy Cloud (Beta)
@@ -810,7 +810,7 @@ Also, currently, cloud documents are accessible by anyone with the link. More fl
To get a link, click **Share** in the upper-right corner. The link will get copied to your clipboard.
![Home tab](/lunacy-docs/public/rn70-cloud.png)
![Home tab](/public/rn70-cloud.png)
There are two ways to open a cloud document via a link:
@@ -821,17 +821,17 @@ To save a cloud document locally, go to **File > Save as Local Copy**.
**Note:** *To go on working with a local copy, open it from where you saved it.*
Local files now appear in the top panel with the document icon (![Document icon](/lunacy-docs/public/rn70-docicon.png)) before the file name.
Local files now appear in the top panel with the document icon (![Document icon](/public/rn70-docicon.png)) before the file name.
![Lunacy cloud](/lunacy-docs/public/rn70-cloud1.png)
![Lunacy cloud](/public/rn70-cloud1.png)
#### Collaboration (Beta)
Collaboration, the most awaited feature by Lunacy fans, is finally here!
Now you can work with the same cloud documents simultaneously with other users. Just share the link to the document and enjoy the teamwork.
![Lunacy cloud](/lunacy-docs/public/rn70-collab.png)
![Lunacy cloud](/public/rn70-collab.png)
For obvious reasons, we could not test all the scenarios and intricacies of multi-user editing without real users. So, let's call it a feature preview. If you encounter any issues, please feel free to report them (**Help > Report a Problem**).
@@ -839,10 +839,10 @@ For obvious reasons, we could not test all the scenarios and intricacies of mult
Big thanks to Sargis_k for helping us out with the Armenian localization.
![Lunacy cloud](/lunacy-docs/public/rn70-armen.png)
![Lunacy cloud](/public/rn70-armen.png)
If you also want to take part in Lunacy localization, click <a href="https://docs.icons8.com/lunacy-docs/localization/" target="_blank">here</a>.
If you also want to take part in Lunacy localization, click <a href="https://lunacy.docs.icons8.com/localization/" target="_blank">here</a>.
### Improvements
@@ -897,7 +897,7 @@ Download from the <a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?oci
Version 6.8 comes with a new UI design. We made the interface clean and lightweight for you to focus on your tasks.
![Redesigned UI in Lunacy 6.8](/lunacy-docs/public/rn68-newUI2.png)
![Redesigned UI in Lunacy 6.8](/public/rn68-newUI2.png)
#### Comment tool
@@ -914,7 +914,7 @@ You can:
To view and manage comments, enable the Comment tool.
![Comment tool](/lunacy-docs/public/rn68-commenttool.png)
![Comment tool](/public/rn68-commenttool.png)
#### New languages
@@ -952,13 +952,13 @@ Now you can easily cut out any part of an image almost like in Photoshop or othe
Also, you can use any of the shape tools. For this, enable the image editing mode and select the required shape on the toolbar (see the figure below).
![Cutting out images in Lunacy](/lunacy-docs/public/images-scissorsdemo2.png)
![Cutting out images in Lunacy](/public/images-scissorsdemo2.png)
#### Easier object renaming
Now you can rename objects right on the canvas. For this, right-click an object and select Rename on the diplayed menu or simply press `F2`. A field with the object name will show up. Edit the name and press **Enter** or click anywhere beyond the field when done.
![Renaming objects in Lunacy](/lunacy-docs/public/objects-renaming67.png)
![Renaming objects in Lunacy](/public/objects-renaming67.png)
### Improvements
@@ -987,7 +987,7 @@ Now you can embed fonts into your document before sharing it with other people.
To use this feature, click **Text > Fonts Embedding** on the menu bar. In the displayed dialog box, select the required fonts and click the **Embed fonts** button.
![Fonts Embedding](/lunacy-docs/public/rn-fontsembed.png)
![Fonts Embedding](/public/rn-fontsembed.png)
**Note:** By embedding a font you confirm that you have a proper license that allows you to distribute the font.
@@ -1014,17 +1014,17 @@ Download from the <a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?oci
#### Smooth corners
Now you can create shapes with perfectly smooth corners like in Apple interfaces and products.
To switch between round (default) and smooth corners, click ![Smooth corner button](/lunacy-docs/public/smoothcornerbtn.png) next to the corner radius field in the Inspector.
To switch between round (default) and smooth corners, click ![Smooth corner button](/public/smoothcornerbtn.png) next to the corner radius field in the Inspector.
The figure below shows the difference between smooth (red) and round (blue) corners.
![Smooth vs Round corners](/lunacy-docs/public/rn-smoothcorner.png)
![Smooth vs Round corners](/public/rn-smoothcorner.png)
#### Export presets
Now you can save your export settings for further use. To open the **Export Preset Editor**, click the settings button in the **Export** section of the Inspector, then select **Create** preset on the menu.
The settings menu now also features export presets for iOS and Android.
![Export presets in Lunacy](/lunacy-docs/public/rn-exportprests.png)
![Export presets in Lunacy](/public/rn-exportprests.png)
### Improvements
@@ -1056,7 +1056,7 @@ Moreover, we added the support for scrollable artboards in prototypes.
To run the prototype previewer, select an artboard you want to start with and click the Play button in the upper-right corner of the interface. A new window will open next to Lunacy.
Also, you can instantly upload your prototypes to our Cloud and share them with other people. Just click the chain link button at the top of the preview window and send the link to your teammate or customer.
For details, click <a href="https://docs.icons8.com/lunacy-docs/prototyping/" target="_blank">here</a>.
For details, click <a href="https://lunacy.docs.icons8.com/prototyping/" target="_blank">here</a>.
#### Avatar tool
@@ -1066,19 +1066,19 @@ We integrated the avatar tool with the <a href="https://generated.photos/" targe
Also, now you can refresh multiple avatars at a time. For this, select several avatars and press `Shift+R` or click **Generate avatar** in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-newavatarph.png" height="auto"><source src="/lunacy-docs/public/rn-newavatar.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-newavatarph.png" height="auto"><source src="/public/rn-newavatar.mp4" type="video/mp4"></video>
And as a cherry on top, now you can create avatars from any shapes. For this, select a shape, then enable the Avatar tool and click **Generate avatar** in the Inspector (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-newavatar2ph.png" height="auto"><source src="/lunacy-docs/public/rn-newavatar2-1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-newavatar2ph.png" height="auto"><source src="/public/rn-newavatar2-1.mp4" type="video/mp4"></video>
#### Image Upscaler
Another cool feature of this release is the integration with the <a href="https://icons8.com/upscaler" target="_blank">Icons8 Image Upscaler</a>. Now, when you resize an image, Lunacy will offer you to enhance the image using our state-of-the-art AI.
![Lunacy Image upscaler by Icons8](/lunacy-docs/public/rn-upscaler.png)
![Lunacy Image upscaler by Icons8](/public/rn-upscaler.png)
**Note:** The feature is available only to users with a paid subscription.
@@ -1156,7 +1156,7 @@ Photos and vector images now open way faster. Also, the libraries have got impro
The Line tool has got coordinates settings in the Inspector. Also, now the Line tool snaps line origin points to half pixels to draw pixel perfect lines. Like in Sketch.
![Line tool changes](/lunacy-docs/public/rn-62linetool.png)
![Line tool changes](/public/rn-62linetool.png)
{:.image-info}
Before v.6.2 (left) and Starting from v.6.2 (right)
@@ -1170,7 +1170,7 @@ Now you can:
* Select several objects with identical styling settings and save their settings as a style.
* Apply context menu commands to several items selected in the Styles or Symbols libraries. For example, you can copy multiple styles between documents or duplicate several symbols at a time.
![Duplicating multiple symbols](/lunacy-docs/public/rn-62mulitipleduplicate.png)
![Duplicating multiple symbols](/public/rn-62mulitipleduplicate.png)
### Fixed bugs
@@ -1198,7 +1198,7 @@ Also, we revised the order of tools on the toolbar.
The video below presents these and some other changes introduced in v.6.1.
<video play="no" controls="controls" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/rn-61videoph.png" height="auto"><source src="/lunacy-docs/public/Lunacy61.mp4" type="video/mp4"></video>
<video play="no" controls="controls" muted="" loop="" playsinline="" width="100%" poster="/public/rn-61videoph.png" height="auto"><source src="/public/Lunacy61.mp4" type="video/mp4"></video>
#### Snapping: Pen
@@ -1209,12 +1209,12 @@ The Pen tool has become a lot easier to use. Now when you draw a path, Lunacy sn
* guides
* grids and layouts
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-pensnapph.png" height="auto"><source src="/lunacy-docs/public/rn-pensnap.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-pensnapph.png" height="auto"><source src="/public/rn-pensnap.mp4" type="video/mp4"></video>
#### Snapping: Color Picker
Now when you adjust a linear or radial gradient by moving a color point, Lunacy snaps the point to the borders and midlines of the shape's bounding box.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-colorsnapph.png" height="auto"><source src="/lunacy-docs/public/rn-colorsnap.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-colorsnapph.png" height="auto"><source src="/public/rn-colorsnap.mp4" type="video/mp4"></video>
Also, you can hold down Shift to get a perfectly vertical, horizontal or 45-degree diagonal gradient.
@@ -1275,7 +1275,7 @@ Now you can also write and run you own scripts directly in Lunacy and save them
If you've written a plugin of your own and want to share it with other users, you can email us a link to the project GitHub page at lunacy@icons8.com.
For details about working with plugins in Lunacy, read <a href="https://docs.icons8.com/lunacy-docs/plugins/" target="_blank">here</a>.
For details about working with plugins in Lunacy, read <a href="https://lunacy.docs.icons8.com/plugins/" target="_blank">here</a>.
#### Tint Overrides
@@ -1285,9 +1285,9 @@ Note that before using tint overrides you should add default tints.
When you apply an override, the reset button appears in the **Tint** section of the Inspector. Use this button to remove the override.
![Reset overrides button](/lunacy-docs/public/reset-overridetint.png)
![Reset overrides button](/public/reset-overridetint.png)
For details and a demo, click <a href="https://docs.icons8.com/lunacy-docs/styling/#tint-overrides" target="_blank">here</a>.
For details and a demo, click <a href="https://lunacy.docs.icons8.com/styling/#tint-overrides" target="_blank">here</a>.
#### Snap to spacing
@@ -1295,7 +1295,7 @@ We've added another great feature that will help you quickly arrange objects on
Now when you have two or more vertically or horizontally distributed objects and you drag another object close to them, Lunacy snaps the object and shows a pink area when the spacing between the object you drag is the same as one of the spacings between the other objects. See the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/snapping-spacingph.png" height="auto"><source src="/lunacy-docs/public/snapping-spacing1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/snapping-spacingph.png" height="auto"><source src="/public/snapping-spacing1.mp4" type="video/mp4"></video>
To disable snapping, hold down `Ctrl` while dragging.
@@ -1340,16 +1340,16 @@ You can:
The figure below shows views of suggestions panel for a shape and a text.
![Suggestions panels](/lunacy-docs/public/rn-suggpanels.png)
![Suggestions panels](/public/rn-suggpanels.png)
For details about using the panels, read <a href="https://docs.icons8.com/lunacy-docs/styling/#suggestions-panel" target="_blank">here</a> and <a href="https://docs.icons8.com/lunacy-docs/text/#suggestions-panel" target="_blank">here</a>.
For details about using the panels, read <a href="https://lunacy.docs.icons8.com/styling/#suggestions-panel" target="_blank">here</a> and <a href="https://lunacy.docs.icons8.com/text/#suggestions-panel" target="_blank">here</a>.
#### Tints
Tints are a quick and easy way to apply a color to grouped objects and symbol instances. They are particularly useful when you need to adjust the color of a semi-filled object or a complex icon.
The **Tints** section appears in the Inspector only when you select a group object or a symbol.
![Tints](/lunacy-docs/public/rn5_9-tints.png)
![Tints](/public/rn5_9-tints.png)
Unlike other styling options, you can apply only one tint to an object.
@@ -1364,33 +1364,33 @@ We've added a set of tools that allows you to quickly add basic GUI controls tha
* Radio buttons and
* Toggles
![Tints](/lunacy-docs/public/rn5_9-guitools1.png)
![Tints](/public/rn5_9-guitools1.png)
When you select a control added with any of these tools, you see the suggestions panel that allows you to:
1. Change the type of the control.
2. Select the style of the control.
3. Select the control state.
![GUI tools](/lunacy-docs/public/rn5_9-guitools3.png)
![GUI tools](/public/rn5_9-guitools3.png)
To edit the appearance of a control, use the <a href="https://docs.icons8.com/lunacy-docs/components/#editing-main-components" target="_blank">symbol editor</a>.
To edit the appearance of a control, use the <a href="https://lunacy.docs.icons8.com/components/#editing-main-components" target="_blank">symbol editor</a>.
#### Symbol tool
The symbol tool allows you to quickly create mockups of interfaces by adding placeholder symbols and then replacing them with required GUI elements.
![Symbol tool](/lunacy-docs/public/rn5_9-symbtool.png)
![Symbol tool](/public/rn5_9-symbtool.png)
* To draw a placeholder symbol just select the Symbol tool and drag over the required area. Placeholder symbols appear as pink rectangles with the question mark.
![Placeholder symbols](/lunacy-docs/public/rn5_9-symbtool2.png)
![Placeholder symbols](/public/rn5_9-symbtool2.png)
* To replace a placeholder symbol, select it and use the suggestions panel that will appear.
* You can also use use symbols from the Symbols page. For this, enable the tool, then go to the Symbols page and click the required Symbol. The same applies to symbols from UI kits.
* When the Symbol tool is enabled, you can press the `C` and `Shift+C` hotkeys to switch between the symbols that you've used earlier and quickly add them onto the canvas.
* If you want your custom symbols to appear on the suggestions panel, you should properly tag them in the Inspector. For this, click ![Tag symbol button](/lunacy-docs/public/rn5_9-symbtool5.png) in the **Symbol** section of the Inspector and select a proper category.
* If you want your custom symbols to appear on the suggestions panel, you should properly tag them in the Inspector. For this, click ![Tag symbol button](/public/rn5_9-symbtool5.png) in the **Symbol** section of the Inspector and select a proper category.
![Tagging symbols](/lunacy-docs/public/rn5_9-symbtool4.png)
![Tagging symbols](/public/rn5_9-symbtool4.png)
#### Text formatting
@@ -1427,29 +1427,29 @@ Download from the [Microsoft Store](https://www.microsoft.com/store/apps/9pnlmkk
You no longer need to switch to the Symbols page to edit masters. Just select an instance of the symbol you want to edit and press `Enter` or click the **Edit symbol** button on the context tool bar.
![Edit symbol button](/lunacy-docs/public/rn5_8-symboleditorbtn.png)
![Edit symbol button](/public/rn5_8-symboleditorbtn.png)
For details and a demo, click <a href="https://docs.icons8.com/lunacy-docs/components/#editing-main-components" target="_blank">here</a>.
For details and a demo, click <a href="https://lunacy.docs.icons8.com/components/#editing-main-components" target="_blank">here</a>.
#### Smart distribute
Now you can quickly arrange multiple objects into nice grids with equal spacing between rows and columns.
For this, select the objects and click the **Tidy up** button in the Inspector. Then drag the red handles that will appear between the "rows" and "columns". Click the red circle in the center of an object and drag to move it to another grid "cell". For details and a demo, click <a href="https://docs.icons8.com/lunacy-docs/objects/#smart-distribute" target="_blank">here</a>.
For this, select the objects and click the **Tidy up** button in the Inspector. Then drag the red handles that will appear between the "rows" and "columns". Click the red circle in the center of an object and drag to move it to another grid "cell". For details and a demo, click <a href="https://lunacy.docs.icons8.com/objects/#smart-distribute" target="_blank">here</a>.
![Smart distribute](/lunacy-docs/public/objects-smartdistribph.png)
![Smart distribute](/public/objects-smartdistribph.png)
#### Artboard presets
Now you can save your frequently used custom artboards to presets. Enable the Artboard tool and click **Create custom preset** at the bottom of the presets panel.
![Artboard presets](/lunacy-docs/public/interface-customartboards.png)
![Artboard presets](/public/interface-customartboards.png)
#### Inverse gradients
Now you can invert gradients with a single button click in the Color Picker.
![Artboard presets](/lunacy-docs/public/rn5_8-invertgrad.png)
![Artboard presets](/public/rn5_8-invertgrad.png)
### Improvements
@@ -2108,7 +2108,7 @@ Download from the [Microsoft Store](https://www.microsoft.com/store/apps/9pnlmkk
- Added update font weights when changing font family
- Added the ability to apply shortcuts to text without entering edit mode
- Improved the use of styles in the text on shortcuts Ctrl+B, Ctrl+I
- [Added new shortcuts for text](http://docs.icons8.com/lunacy-docs/shortcuts/#text-editing)
- [Added new shortcuts for text](http://docs.icons8.com/shortcuts/#text-editing)
- Display CSS for several selected objects
- The ability to apply Paragraph spacing to the selected paragraph in the text
- While adding objects if an element inside group is selected, new object is created inside the same group
@@ -2252,7 +2252,7 @@ Languages:
— French
— Russian
— Ukrainian
**[Help us improve the translation of Lunacy for other languages](http://docs.icons8.com/lunacy-docs/localization/)**
**[Help us improve the translation of Lunacy for other languages](http://docs.icons8.com/localization/)**
### Improvements
- Added **Return to Instance** symbol button
- Added functionality to change and delete symbols from symbols panel
@@ -2419,7 +2419,7 @@ Download from the [Windows Store](https://www.microsoft.com/store/apps/9pnlmkkpc
![Vector tool](Images/VectorTool.png)
- [Help!](https://docs.icons8.com/lunacy-docs)
- [Help!](https://lunacy.docs.icons8.com/lunacy-docs)
- Symbols: we’ve just started to provide the basic functionality for saving symbols in output files! Expect the extended set of operations with symbols in the upcoming releases.
- Added functionality to add, delete, and rename pages.
- Added vertical alignment for text
docs/styling.md
+28 -28
View File
@@ -32,11 +32,11 @@ Styling options that you can apply to layers in Lunacy include:
* Inner shadows
* Blurs (Gaussian and background)
They appear in the Inspector when you select layer. A combination of styling options applied to a layer is called a layer style. You can save layer styles for further use (read <a href="https://docs.icons8.com/lunacy-docs/layerstyles/" target="_blank">here</a> for details).
They appear in the Inspector when you select layer. A combination of styling options applied to a layer is called a layer style. You can save layer styles for further use (read <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">here</a> for details).
You can apply styling options to all <a href="https://docs.icons8.com/lunacy-docs/layers/#introduction" target="_blank">types of layers</a>, except for technical ones (such as artboards, hotspots and slices). However, the only option applicable to group layers and components is the outer shadow.
You can apply styling options to all <a href="https://lunacy.docs.icons8.com/layers/#introduction" target="_blank">types of layers</a>, except for technical ones (such as artboards, hotspots and slices). However, the only option applicable to group layers and components is the outer shadow.
In addition to the above, text layers feature typography settings, such as font, font size, line spacing, etc. Combined with the common styling options (or without them) they make up <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#text-styles" target="_blank">text styles</a>.
In addition to the above, text layers feature typography settings, such as font, font size, line spacing, etc. Combined with the common styling options (or without them) they make up <a href="https://lunacy.docs.icons8.com/layerstyles/#text-styles" target="_blank">text styles</a>.
The details about using each of the options you will find in the sections below. But first of all let us review some common things.
@@ -48,7 +48,7 @@ To apply a fill, border or any other styling to a layer:
2. Click `+` next to the respective styling section in the Inspector. A row of controls appears.
3. Use these controls to define the required styling parameters (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-commondemoph1.png" height="auto"><source src="/lunacy-docs/public/styling-commondemo2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-commondemoph1.png" height="auto"><source src="/public/styling-commondemo2.mp4" type="video/mp4"></video>
The things that you should know:
@@ -62,7 +62,7 @@ The things that you should know:
All these things are shown in the next demo. It presents a layer with a single fill and three borders.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-commondemoph2.png" height="auto"><source src="/lunacy-docs/public/styling-commondemo4.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-commondemoph2.png" height="auto"><source src="/public/styling-commondemo4.mp4" type="video/mp4"></video>
## [Color controls](#color-controls)
@@ -94,7 +94,7 @@ It features the following controls:
1. Fill type buttons. Available on the fill and border color pickers only.
2. Color selection box. That is where you will select colors.
3. The eyedropper tool. For details about using it, read <a href="https://docs.icons8.com/lunacy-docs/tools/#eyedropper-tool" target="_blank">here</a>.
3. The eyedropper tool. For details about using it, read <a href="https://lunacy.docs.icons8.com/tools/#eyedropper-tool" target="_blank">here</a>.
4. Color selection bar. Allows you to quickly navigate through colors.
5. Opacity bar.
6. The color code selector. Displays the code of the currently selected color:
@@ -113,13 +113,13 @@ It features the following controls:
11. Use this button to switch the panel of presets between the list and grid view. In the list view, you can give names to colors: right-click a color and select **Rename** on the displayed menu (see the demo below).
12. Use this button to add the currently selected color to **Global** or **Document** presets.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-pickerph1.png" height="auto"><source src="/lunacy-docs/public/styling-picker1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-pickerph1.png" height="auto"><source src="/public/styling-picker1.mp4" type="video/mp4"></video>
## [Color variables](#color-variables)
Color variables let you efficiently manage colors in your documents and instantly recolor all the layers using the same color variable. You can apply color variables to [fills](#fills), [borders](#borders), and [shadows](#shadows).
In the Inspector, color variables appear as colored circles (![color variable icon](/lunacy-docs/public/colorvariable_circle.png)), while regular fills, border and shadow colors appear as colored rectangles (![regular fill icon](/lunacy-docs/public/fill-rectangle.png)).
In the Inspector, color variables appear as colored circles (![color variable icon](/public/colorvariable_circle.png)), while regular fills, border and shadow colors appear as colored rectangles (![regular fill icon](/public/fill-rectangle.png)).
To create a color variable:
@@ -128,13 +128,13 @@ To create a color variable:
3. Set the required color.
4. Click **Create Color Variable**.
To apply an existing color variable, select a layer, click ![4 dots icon](/lunacy-docs/public/4dotsicon.png) in the Inspector, then select the required color variable.
To apply an existing color variable, select a layer, click ![4 dots icon](/public/4dotsicon.png) in the Inspector, then select the required color variable.
To edit a color variable, click over the colored circle in the Inspector, then click ![4 dots icon](/lunacy-docs/public/settingsicon.png) > **Edit variable**.
To edit a color variable, click over the colored circle in the Inspector, then click ![4 dots icon](/public/settingsicon.png) > **Edit variable**.
To detach a layer from a color variable, select the layer, then click ![4 dots icon](/lunacy-docs/public/detachicon.png) in the Inspector.
To detach a layer from a color variable, select the layer, then click ![4 dots icon](/public/detachicon.png) in the Inspector.
![Color variables in Lunacy](/lunacy-docs/public/color_variables2.png)
![Color variables in Lunacy](/public/color_variables2.png)
## [Fills](#fills)
@@ -199,7 +199,7 @@ To add a gradient fill:
The demo below shows what you can do when adding a linear gradient.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-lineargradph2.png" height="auto"><source src="/lunacy-docs/public/styling-lineargrad2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-lineargradph2.png" height="auto"><source src="/public/styling-lineargrad2.mp4" type="video/mp4"></video>
#### Radial gradients
@@ -209,13 +209,13 @@ When you select the radial type, the gradient control becomes a radius of a circ
* Select the center color point and drag it to reposition the origin of the gradient.
* Drag the square handles on the edge of the circle to resize or reshape it into an ellipse.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-radialgradph3.png" height="auto"><source src="/lunacy-docs/public/styling-radialgrad3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-radialgradph3.png" height="auto"><source src="/public/styling-radialgrad3.mp4" type="video/mp4"></video>
#### Angular gradients
When you select the angular type, the gradient control takes the form of a circle with color points sitting on its edge. Drag the points around the circle to get the desired gradient. Add some extra color points, if needed.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-angularph2.png" height="auto"><source src="/lunacy-docs/public/styling-angular2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-angularph2.png" height="auto"><source src="/public/styling-angular2.mp4" type="video/mp4"></video>
### Image fills
@@ -233,16 +233,16 @@ To create an image fill:
* **Tile**. Tiles the image to fit the layer. The size of tiles is adjustable (see the demo below).
6. Close the color picker, when you are through.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-imagefillph1.png" height="auto"><source src="/lunacy-docs/public/styling-imagefill2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-imagefillph1.png" height="auto"><source src="/public/styling-imagefill2.mp4" type="video/mp4"></video>
<div class="callout callout--info">
<p><strong>Tip:</strong> You can also create an image fill by holding down <b>Ctrl</b> (<b>⌘</b>) and dropping an image from your desktop or from the Lunacy library on to the layer as shown in the demo below.</p> <p>As a matter of fact, what the <a href="https://docs.icons8.com/lunacy-docs/tools/#avatar-tool" target="_blank">avatar tool</a> does is that it creates rounded rectangles with image fills, where images are random photos of people.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p><strong>Tip:</strong> You can also create an image fill by holding down <b>Ctrl</b> (<b>⌘</b>) and dropping an image from your desktop or from the Lunacy library on to the layer as shown in the demo below.</p> <p>As a matter of fact, what the <a href="https://lunacy.docs.icons8.com/tools/#avatar-tool" target="_blank">avatar tool</a> does is that it creates rounded rectangles with image fills, where images are random photos of people.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/styling-addimagefillph.png" height="auto"><source src="/lunacy-docs/public/styling-addimagefill1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/styling-addimagefillph.png" height="auto"><source src="/public/styling-addimagefill1.mp4" type="video/mp4"></video>
@@ -275,7 +275,7 @@ The advanced border settings include:
* **Caps**. Use these controls to define the shape of endings of open paths: no endings, round or square (see the demo below). The settings are applicable to paths drawn with the Line, Arrow, and Vector tools.
* **Folds**. Use these controls to adjust the appearance of corners of paths drawn with the Vector tool. Also, they work with arrow heads and tails.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-capsfoldsph1.png" height="auto"><source src="/lunacy-docs/public/styling-capsfolds1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-capsfoldsph1.png" height="auto"><source src="/public/styling-capsfolds1.mp4" type="video/mp4"></video>
* **Head** and **Tail**. Use these controls to define the appearance of endings of open paths drawn with the Line, Arrow, and Vector tools.
@@ -291,7 +291,7 @@ Use the **Effects** section of the Inspector when you want to add shadows or blu
1. Click `+` next to the section name.
2. From the drop-down lost select the required effect.
3. Click ![settings icon](/lunacy-docs/public/settingsicon.png) and set the required values.
3. Click ![settings icon](/public/settingsicon.png) and set the required values.
![Adding effects](public/styling-effects.png)
@@ -321,7 +321,7 @@ To switch between blur types, click the down arrowhead next to a blur name and s
In the demo below, we first applied a Gaussian blur to an image, removed it and then applied a background blur to a rectangle above the image.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/styling-blursph1.png" height="auto"><source src="/lunacy-docs/public/styling-blurs2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/styling-blursph1.png" height="auto"><source src="/public/styling-blurs2.mp4" type="video/mp4"></video>
<div class="callout callout--warning">
@@ -339,7 +339,7 @@ You can apply styling options to multiple selected layers at the same time. If y
Tints are a quick and easy way to apply a color to grouped layers and component instances. They are particularly useful when you need to adjust the color of a semi-filled layer or a complex icon (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/styling-tintsph2.png" height="auto"><source src="/lunacy-docs/public/styling-tints2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/styling-tintsph2.png" height="auto"><source src="/public/styling-tints2.mp4" type="video/mp4"></video>
The **Tints** section appears in the Inspector only when you select a group layer or a component.
@@ -354,15 +354,15 @@ Tint overrides can be handy, for instance, when you are designing tabs or panels
</div>
The demo below shows three instances of the same component. We first applied a tint override to a nested element, then switched to the <a href="https://docs.icons8.com/lunacy-docs/components/#editing-main-components" target="_blank">component edit mode</a> and modified the default tint. In the latter case, the change applied only to the instances without the override.
The demo below shows three instances of the same component. We first applied a tint override to a nested element, then switched to the <a href="https://lunacy.docs.icons8.com/components/#editing-main-components" target="_blank">component edit mode</a> and modified the default tint. In the latter case, the change applied only to the instances without the override.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tintoverridesph3.png" height="auto"><source src="/lunacy-docs/public/tintoverrides3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tintoverridesph3.png" height="auto"><source src="/public/tintoverrides3.mp4" type="video/mp4"></video>
When you apply an override, the reset button appears in the **Tint** section of the Inspector. Use this button to remove the override.
![Reset overrides button](public/reset-overridetint2.png)
For details about overrides, read <a href="https://docs.icons8.com/lunacy-docs/components/#overrides" target="_blank">here</a>.
For details about overrides, read <a href="https://lunacy.docs.icons8.com/components/#overrides" target="_blank">here</a>.
<!--
@@ -390,7 +390,7 @@ It features a set of independently scrollable columns that include:
If you want to change the position of the suggestions panel, click the handle at the top-left corner of the panel and drag it up or down. Lunacy remembers the position of the panel individually for each object.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/sugg-positionph.png" height="auto"><source src="/lunacy-docs/public/sugg-position.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/sugg-positionph.png" height="auto"><source src="/public/sugg-position.mp4" type="video/mp4"></video>
### Resizing the panel
@@ -398,7 +398,7 @@ You can resize the panel to your liking by dragging its lower and right borders.
To change the size of other columns, hover the cursor between two columns and drag to the right or left when the cursor turns into a double-headed arrow (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/sugg-resizeph.png" height="auto"><source src="/lunacy-docs/public/sugg-resize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/sugg-resizeph.png" height="auto"><source src="/public/sugg-resize.mp4" type="video/mp4"></video>
### Managing the content of the panel
docs/support.md
+7 -7
View File
@@ -77,7 +77,7 @@ Lunacy was created as an editor of .sketch files for Windows and keeps heading t
### Can I change the radius of a certain corner in a shape?
Thank you. That is one of our favorite questions. Check out the demos <a href="https://docs.icons8.com/lunacy-docs/editing/#adjusting-the-corner-radius-setting-for-rectangles" target="_blank">here</a>, <a href="https://docs.icons8.com/lunacy-docs/editing/#vector-editing" target="_blank">here</a> and <a href="https://community.icons8.com/uploads/default/original/1X/718c05c97ebb1fdbd09cd4e9579178e65f2e8afc.mp4" target="_blank">here</a>.
Thank you. That is one of our favorite questions. Check out the demos <a href="https://lunacy.docs.icons8.com/editing/#adjusting-the-corner-radius-setting-for-rectangles" target="_blank">here</a>, <a href="https://lunacy.docs.icons8.com/editing/#vector-editing" target="_blank">here</a> and <a href="https://community.icons8.com/uploads/default/original/1X/718c05c97ebb1fdbd09cd4e9579178e65f2e8afc.mp4" target="_blank">here</a>.
### I'm new to Lunacy. Where I can learn how to get started?
@@ -85,12 +85,12 @@ You can:
* Take an interactive tutorial (in Lunacy, go to **Help > Tutorial**)
* Check out <a href="https://icons8.com/articles/tag/lunacy/" target="_blank"> step-by-step tutorials</a> in our blog
* Read our <a href="https://docs.icons8.com/lunacy-docs/" target="_blank">docs</a>
* Read our <a href="https://lunacy.docs.icons8.com/" target="_blank">docs</a>
* Subscribe to our <a href="https://www.youtube.com/channel/UCIp9WVc3HlNF3TGqGvuDsnQ/videos" target="_blank">Youtube channel</a>
### Do I need internet connection to use Lunacy?
If you are not going to use the content of our <a href="https://docs.icons8.com/lunacy-docs/libraries" target="_blank">Libraries</a>, Lunacy doesn’t need to be connected to the internet.
If you are not going to use the content of our <a href="https://lunacy.docs.icons8.com/libraries" target="_blank">Libraries</a>, Lunacy doesn’t need to be connected to the internet.
Also, without an internet connection you won't be able with cloud-based files. But you can work with local files that you keep on your computer.
@@ -117,7 +117,7 @@ To prevent corruption of the main file, Lunacy first saves changes to the tempor
### How can I downgrade Lunacy to one of the previous versions?
1. Uninstall the current version of Lunacy.
2. Download the required version and install it. The full list of versions with links to installers is <a href="https://docs.icons8.com/lunacy-docs/release-notes/" target="_blank">here</a>.
2. Download the required version and install it. The full list of versions with links to installers is <a href="https://lunacy.docs.icons8.com/release-notes/" target="_blank">here</a>.
### Lunacy is slow. How can I fix it?
@@ -132,7 +132,7 @@ The most common reason for Lunacy getting slow are:
*Workaround:* Avoid excessive usage of shadows and blurs.
* Too many content-heavy artboards on a single page.
*Workaround:* Try to move a part of artboards to another <a href="https://docs.icons8.com/lunacy-docs/interface/#document-pages" target="_blank">document page</a>.
*Workaround:* Try to move a part of artboards to another <a href="https://lunacy.docs.icons8.com/interface/#document-pages" target="_blank">document page</a>.
* Large amount of text converted to outlines.
*Workaround:* Avoid converting large blocks of text (sentences or paragraphs) to outlines.
@@ -278,7 +278,7 @@ The Windows Store version updates silently. If not, check that you [have](https:
If you installed Lunacy with a downloadable installer, it will notify you about the update with an alert in the window title.
Either way, you can check out our [release notes](https://docs.icons8.com/lunacy-docs/release-notes/).
Either way, you can check out our [release notes](https://lunacy.docs.icons8.com/release-notes/).
-->
@@ -289,7 +289,7 @@ Either way, you can check out our [release notes](https://docs.icons8.com/lunacy
* [Feature Requests](https://lunatics.icons8.com/) — a board similar to UserVoice. Vote for features and propose yours. One feature per post, please.
* [Improving This Manual](https://github.com/icons8/lunacy-docs/blob/master/docs/index.md) — we'll accept pull requests for fixing errors, spelling and wording mistakes, inconsistencies or ideas on how to improve this manual.
* [Improving This Manual](https://github.com/icons8/blob/master/docs/index.md) — we'll accept pull requests for fixing errors, spelling and wording mistakes, inconsistencies or ideas on how to improve this manual.
<!--
docs/symbols.md
+8 -8
View File
@@ -29,7 +29,7 @@ Moreover, you can also change the text on one or even all instances. That will b
The demo below demonstrates the effect and efficiency of using symbols in designs.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/symb-tutorial14.gif" height="auto"><source src="/lunacy-docs/public/symbolsdemo3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/symb-tutorial14.gif" height="auto"><source src="/public/symbolsdemo3.mp4" type="video/mp4"></video>
## [Creating symbols](#creating-symbols)
@@ -155,7 +155,7 @@ There are two ways to edit a main symbol:
The changes you make immediately apply to all the symbol instances across the project, except for the instances with respective overrides (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/symbols-editmasterph.png" height="auto"><source src="/lunacy-docs/public/symbols-editmaster.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/symbols-editmasterph.png" height="auto"><source src="/public/symbols-editmaster.mp4" type="video/mp4"></video>
**Way 2**
@@ -241,7 +241,7 @@ The menu features the following sections:
* Commands: Shows the list of symbol-related commands. Click [here](#symbol-related-commands) for details.
* Related: Shows the symbols that share the same category/subcategory with the selected symbol instance.
* Categories: Shows the list of available symbol categories. You can click through the categories and subcategories to find the required symbol. For your convenience, the category and subcategories to which the selected symbol instance belong will have a dot next their names (see the gif below). For details about how to organize symbols, read [here](#organizing-symbols).
* UI kits: Shows the list of external UI kits from where you can also select a replacement. For details about UI kits, click <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">here</a>.
* UI kits: Shows the list of external UI kits from where you can also select a replacement. For details about UI kits, click <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">here</a>.
**Tip:** The size of the menu depends on the number of symbols and symbol categories in your project. If you don't see the content of the upper or lower menu sections in full, use the scroll.
@@ -282,7 +282,7 @@ The commands are as follows:
</tr>
<tr>
<td>Detach from Library</td>
<td>This command applies only to symbols from external files, i.e. to symbols from UI kits. Detached symbols become document symbols and appear on the <B>Symbols</B> tab and the <a href="https://docs.icons8.com/lunacy-docs/symbols/#symbols-page">symbols page</a>. For more information about UI kits, click <a href="https://docs.icons8.com/lunacy-docs/libraries/#ui-kits" target="_blank">here</a>.</td>
<td>This command applies only to symbols from external files, i.e. to symbols from UI kits. Detached symbols become document symbols and appear on the <B>Symbols</B> tab and the <a href="https://lunacy.docs.icons8.com/symbols/#symbols-page">symbols page</a>. For more information about UI kits, click <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">here</a>.</td>
<td><code>-</code></td>
</tr>
<tr>
@@ -302,7 +302,7 @@ The commands are as follows:
</tr>
<tr>
<td>Organize Symbols</td>
<td>A click over this command opens the symbols panel on the <B>Libraries</B> tab, where you can organize symbols as described <a href="https://docs.icons8.com/lunacy-docs/symbols/#organizing-symbols">here</a>.</td>
<td>A click over this command opens the symbols panel on the <B>Libraries</B> tab, where you can organize symbols as described <a href="https://lunacy.docs.icons8.com/symbols/#organizing-symbols">here</a>.</td>
<td><code>-</code></td>
</tr>
</tbody>
@@ -335,7 +335,7 @@ Let's assume that we are designing a contact UI. We have prepared two templates:
{:.is-big}
![A view of the symbols page](public/symb-tutorial1.png)
>**Note:** To demonstrate Lunacy capabilities to the maximum, we have also added some layer and text styles. For details about them, click <a href="https://docs.icons8.com/lunacy-docs/layerstyles/" target="_blank">here</a>.
>**Note:** To demonstrate Lunacy capabilities to the maximum, we have also added some layer and text styles. For details about them, click <a href="https://lunacy.docs.icons8.com/layerstyles/" target="_blank">here</a>.
Now, we'll move from the symbols page to our project page, add one of the templates to the artboard and let the magic begin.
@@ -400,7 +400,7 @@ The gif below demonstrates text overrides described in Steps 2 and 3.
![Text override. Steps 2 and 3](public/symb-tutorial8.gif)
For details, about text generation and text snippets, click <a href="https://docs.icons8.com/lunacy-docs/text/#text-generation-and-text-snippets" target="_blank">here</a>.
For details, about text generation and text snippets, click <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets" target="_blank">here</a>.
### Nested symbols overrides
@@ -466,7 +466,7 @@ If your template features a hotspot, you can override its target artboard. Optio
### Tint overrides
For details about tint overrides, read <a href="https://docs.icons8.com/lunacy-docs/styling/#tint-overrides" target="_blank">here</a>.
For details about tint overrides, read <a href="https://lunacy.docs.icons8.com/styling/#tint-overrides" target="_blank">here</a>.
## Duplicating symbols
docs/text.md
+18 -18
View File
@@ -30,12 +30,12 @@ Text is one of the key aspects of almost every design project. This section desc
The figure below shows the location of text-related controls in the Lunacy interface.
![Text-related](/lunacy-docs/public/text-controlsall69.png)
![Text-related](/public/text-controlsall69.png)
1. The **Text** section. Appears in the Inspector when a text layer is selected. Features all the [settings](#text-settings) that you might need when working with text.
2. The **Text** menu. Includes all the settings available in the **Text** section of the Inspector, plus the **Convert to Outlines** command. This command also appears on the context menu and lets you [convert text to vector shapes](#converting-text-to-vector-shapes).
3. The **Edit Layer** button. The button appears when you select a text layer. Click this button to start editing the text. Alternatively, just press `Enter`.
4. In the **Appearance** section you deal with <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#text-styles" target="_blank">reusable text styles</a>.
4. In the **Appearance** section you deal with <a href="https://lunacy.docs.icons8.com/layerstyles/#text-styles" target="_blank">reusable text styles</a>.
5. The **Generate text** button. A click over the button generates a random text. A click over the down arrowhead next to the button invokes the [menu with text generation options](#text-generation-and-text-snippets).
6. The **Advanced options** button. Opens a [panel](#advanced-text-options) with such text options as letter case, numbered and bulleted lists, etc.
@@ -61,7 +61,7 @@ Lunacy applies [horizontal resize](#text-block-resize-options) to the text added
**Note:** You can use the `Shift + R` shortcut to refresh the auto-generated text.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-addtext69ph.png" height="auto"><source src="/lunacy-docs/public/text-addtext69.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-addtext69ph.png" height="auto"><source src="/public/text-addtext69.mp4" type="video/mp4"></video>
## Adding text to shapes
@@ -73,7 +73,7 @@ In Lunacy, when you need to add a text to a shape, you can do it in three simple
As you do it, Lunacy automatically creates a group layer with the shape and text layers. This small feature can be of great use when it comes to design of such UI elements as buttons, menus and things alike.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-toshapeph.png" height="auto"><source src="/lunacy-docs/public/text-toshape.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-toshapeph.png" height="auto"><source src="/public/text-toshape.mp4" type="video/mp4"></video>
## Editing text
@@ -86,7 +86,7 @@ To edit a text:
When editing text settings you don't need to select a word or the whole text to make it bold, italicized or whatever. Just set the caret inside a word or at the end of the text and apply the required setting. In the latter case, the setting will be applied to the whole text.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-edittipph.png" height="auto"><source src="/lunacy-docs/public/text-edittip.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-edittipph.png" height="auto"><source src="/public/text-edittip.mp4" type="video/mp4"></video>
See also the [Text settings](#text-settings) section below.
@@ -171,7 +171,7 @@ Also, you can use standard text editor shortcuts:
### Font color picker
This control is a standard <a href="https://docs.icons8.com/lunacy-docs/styling/#color-picker" target="_blank">color picker</a> that lets you choose the required color:
This control is a standard <a href="https://lunacy.docs.icons8.com/styling/#color-picker" target="_blank">color picker</a> that lets you choose the required color:
1. From the color field.
2. From preset colors.
@@ -186,7 +186,7 @@ Use this control to define the required font size in pixels. You can do it by:
* Selecting the required size from the list.
* Entering the required value in the edit field.
* Using the <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">mouse wheel</a>.
* Using the <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">mouse wheel</a>.
* Using the `Ctrl + Alt + "+"`/`⌥ ⌘ +` (increase) and `Ctrl + Alt + "-"`/`⌥ ⌘ -` (decrease) shortcuts.
@@ -231,9 +231,9 @@ In the latter case:
2. Hold-down the left mouse button and move the mouse up to increase or down to decrease spacing (see the gif below).
-->
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-magnetsph.png" height="auto"><source src="/lunacy-docs/public/text-spacing.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-magnetsph.png" height="auto"><source src="/public/text-spacing.mp4" type="video/mp4"></video>
**See also:** <a href="https://docs.icons8.com/lunacy-docs/interface/#tips-on-working-with-the-inspector" target="_blank">Tips on working with the Inspector</a>.
**See also:** <a href="https://lunacy.docs.icons8.com/interface/#tips-on-working-with-the-inspector" target="_blank">Tips on working with the Inspector</a>.
<!--
@@ -253,7 +253,7 @@ These three buttons determine the behavior of text boxes depending on the size o
You might also find handy the auto-resize feature: double-click the borders of a text box to make it fit the text (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-autoresizeph.png" height="auto"><source src="/lunacy-docs/public/text-autoresize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-autoresizeph.png" height="auto"><source src="/public/text-autoresize.mp4" type="video/mp4"></video>
Note that a double-click over the right or left border sets the text box to the *horizontal resize mode* and transforms a multiline text into a single line.
@@ -267,14 +267,14 @@ Use these three buttons to adjust the position of text content within the text b
* Center text horizontally and vertically within the text box.
* Align text to the bottom border of the text box.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-aligncellph.png" height="auto"><source src="/lunacy-docs/public/text-aligncell.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-aligncellph.png" height="auto"><source src="/public/text-aligncell.mp4" type="video/mp4"></video>
### Text alignment magnets
You can also align text within text boxes using the alignment magnets that appear around the text box when you select it. They combine the functions of the [text alignment](#text-alignment-options) and [position alignment](#position-alignment) controls. The demo below shows how this nice feature works.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-magnetsph.png" height="auto"><source src="/lunacy-docs/public/text-magnets.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-magnetsph.png" height="auto"><source src="/public/text-magnets.mp4" type="video/mp4"></video>
To disable the display of magnets, go to the **View** menu and uncheck the **Text Alignment Magnets** option.
@@ -310,13 +310,13 @@ All these settings appear in the Inspector, below the **Text** section.
![Common layer settings](public/text-allsettings.png).
Combinations of layer styling effects and text settings make up text styles. You can save text styles to the document assets and <a href="https://docs.icons8.com/lunacy-docs/layerstyles/#text-styles" target="_blank">reuse</a> them across your project. Also,you can find your recent text styles on the floating panel (see below).
Combinations of layer styling effects and text settings make up text styles. You can save text styles to the document assets and <a href="https://lunacy.docs.icons8.com/layerstyles/#text-styles" target="_blank">reuse</a> them across your project. Also,you can find your recent text styles on the floating panel (see below).
>**Note:** When you edit a text whose style includes both text and common layer settings, Lunacy hides layer styling effects and shows them back once you exit the edit mode. This is for the ease of editing heavily styled texts (see the gif below).
![Hiding common layer effects](public/text-effectsno.gif)
More about <a href="https://docs.icons8.com/lunacy-docs/styling/" target="_blank">styling properties</a>.
More about <a href="https://lunacy.docs.icons8.com/styling/" target="_blank">styling properties</a>.
<!--
## [Suggestions panel](#suggestions-panel)
@@ -342,7 +342,7 @@ It features a set of independently scrollable columns (except for the font size)
If you want to change the position of the suggestions panel, click the handle at the top-left corner of the panel and drag it up or down. Lunacy remembers the position of the panel individually for each text object.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/suggtext-positionph.png" height="auto"><source src="/lunacy-docs/public/suggtext-position.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/suggtext-positionph.png" height="auto"><source src="/public/suggtext-position.mp4" type="video/mp4"></video>
### Resizing the panel
@@ -350,7 +350,7 @@ You can resize the panel to your liking by dragging its lower and right borders.
To change the size of other columns, hover the cursor between two columns and drag to the right or left when the cursor turns into a double-headed arrow (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/suggtext-resizeph.png" height="auto"><source src="/lunacy-docs/public/suggtext-resize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/suggtext-resizeph.png" height="auto"><source src="/public/suggtext-resize.mp4" type="video/mp4"></video>
### Managing the content of the panel
@@ -414,7 +414,7 @@ To generate such texts as names, addresses, etc., proceed as follows.
The **Auto Refresh** option on the menu enables/disables text generation in duplicated text blocks. With this option selected, when you duplicate a text block with an autogenerated text, the new block will contain a new text.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-refreshph.png" height="auto"><source src="/lunacy-docs/public/text-refresh.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-refreshph.png" height="auto"><source src="/public/text-refresh.mp4" type="video/mp4"></video>
<!--
@@ -440,7 +440,7 @@ You can embed fonts into your document before sharing it with other people. This
To use this feature, click **Text > Fonts Embedding** on the menu bar. In the displayed dialog box, select the required fonts and click the **Embed fonts** button.
![Fonts Embedding](/lunacy-docs/public/rn-fontsembed.png)
![Fonts Embedding](/public/rn-fontsembed.png)
**Note:** By embedding a font you confirm that you have a proper license that allows you to distribute the font.
docs/tips.md
+27 -27
View File
@@ -33,9 +33,9 @@ Lunacy has a lot of small but very useful features that can ease your life or si
The `Alt+С + C` (`⌥ C C`) shortcut lets you instantly upload a layer or layer group to Icons8 cloud and get a link to it. Just select the required layer and use the shortcut. That's it! The link to the layer is already in your clipboard. You can share it right away.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tips-altccph.png" height="auto"><source src="/lunacy-docs/public/tips-altcc.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips-altccph.png" height="auto"><source src="/public/tips-altcc.mp4" type="video/mp4"></video>
This option is also available on the context menu. For details, click <a href="https://docs.icons8.com/lunacy-docs/export/#exporting-to-icons8-cloud" target="_blank">here</a>.
This option is also available on the context menu. For details, click <a href="https://lunacy.docs.icons8.com/export/#exporting-to-icons8-cloud" target="_blank">here</a>.
![Alt + C, C](public/export-altcc.png)
@@ -43,14 +43,14 @@ This option is also available on the context menu. For details, click <a href="h
If you need to remove background from an image, you can do it right in Lunacy.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-bgremovalph.png" height="auto"><source src="/lunacy-docs/public/tips-bgremove.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-bgremovalph.png" height="auto"><source src="/public/tips-bgremove.mp4" type="video/mp4"></video>
## Image upscaler
Lunacy is integrated with the <a href="https://icons8.com/upscaler" target="_blank">Icons8 Image Upscaler</a>. When you add an image to your document, Lunacy will offer you to enhance the image using our state-of-the-art AI.
![Lunacy Image upscaler by Icons8](/lunacy-docs/public/rn-upscaler.png)
![Lunacy Image upscaler by Icons8](/public/rn-upscaler.png)
<div class="callout callout--info">
<p><strong>Note:</strong> The feature is available only to users with a paid subscription.</p>
@@ -61,7 +61,7 @@ Lunacy is integrated with the <a href="https://icons8.com/upscaler" target="_bla
When editing typography settings you don't need to select a word or the whole text to make it bold, italicized or whatever. Just set the caret inside a word or at the end of the text and apply the required setting. In the latter case, the setting will be applied to the whole text.
<video autoplay="" muted="" loop="" playsinline="" width="60%" poster="/lunacy-docs/public/text_formatting_tips.png" height="auto"><source src="/lunacy-docs/public/text_formatting_tips.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="60%" poster="/public/text_formatting_tips.png" height="auto"><source src="/public/text_formatting_tips.mp4" type="video/mp4"></video>
@@ -69,7 +69,7 @@ When editing typography settings you don't need to select a word or the whole te
The demo below shows how you can copy and paste styling properties between layers.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/objects-copypasteplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-copypaste.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/objects-copypasteplaceholder.png" height="auto"><source src="/public/objects-copypaste.mp4" type="video/mp4"></video>
## Adjusting values in the Inspector
@@ -80,44 +80,44 @@ There are several ways to change values in the numeric fields of the Inspector.
* Hover the cursor over the required field, wait a moment until the cursor turns into a double-headed arrow and then drag the cursor up or down.
* Use math (press `Enter` to submit).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/interface-inspectortipsplaceholder.png" height="auto"><source src="/lunacy-docs/public/interface-inspectortips.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/interface-inspectortipsplaceholder.png" height="auto"><source src="/public/interface-inspectortips.mp4" type="video/mp4"></video>
## Drawing/resizing shapes from the center
Press and hold `Alt` to draw/resize a shape from the center or `Alt+Shift` if you want to get a regular shape or preserve aspect ratio during resizing. See the red circle in the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/objects-addingplaceholder.png" height="auto"><source src="/lunacy-docs/public/objects-adding.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/objects-addingplaceholder.png" height="auto"><source src="/public/objects-adding.mp4" type="video/mp4"></video>
## Drawing horizontal, vertical and 45-degree diagonal lines, arrows and paths
Hold down `Shift` when placing the second point of a segment.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-verticaldiagonalph.png" height="auto"><source src="/lunacy-docs/public/tips-verticaldiagonal.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-verticaldiagonalph.png" height="auto"><source src="/public/tips-verticaldiagonal.mp4" type="video/mp4"></video>
## Transforming shapes through the Inspector
The next demo shows how you can modify shapes by adjusting their properties in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-transform1placeholder.png" height="auto"><source src="/lunacy-docs/public/shapes-transform1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-transform1placeholder.png" height="auto"><source src="/public/shapes-transform1.mp4" type="video/mp4"></video>
## Adjusting the corner radius setting for rectangles
**Note:** The method shown in the next demo works only with rectangles drawn with the shape tool.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/shapes-cronerradplaceholder.png" height="auto"><source src="/lunacy-docs/public/shapes-cronerrad1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/shapes-cronerradplaceholder.png" height="auto"><source src="/public/shapes-cronerrad1.mp4" type="video/mp4"></video>
## Resizing layers using keyboard
To resize layers, you can use the shortcuts `CTRL+ arrow keys` (by 1 pixel) or `CTRL+Shift + arrow keys` ( by 10 pixels).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-keyresizeph.png" height="auto"><source src="/lunacy-docs/public/tips-keyresize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-keyresizeph.png" height="auto"><source src="/public/tips-keyresize.mp4" type="video/mp4"></video>
## Text alignment magnets
You can align text within text boxes using the alignment magnets that appear around the text box when you select it. They combine the functions of the text alignment and position alignment controls. The demo below shows how this nice feature works.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-magnetsph.png" height="auto"><source src="/lunacy-docs/public/text-magnets.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-magnetsph.png" height="auto"><source src="/public/text-magnets.mp4" type="video/mp4"></video>
This also works with multiple ungrouped text boxes.
@@ -128,15 +128,15 @@ To disable the display of magnets, go to the **View** menu and uncheck the **Tex
To quickly resize a text box so that it fits the text, double-click its vertical or horizontal border.
**Note:** A double-click over the right or left border sets the text box to the <a href="https://docs.icons8.com/lunacy-docs/text/#text-block-resize-options" target="_blank">horizontal resize mode</a> and transforms a multiline text into a single line.
**Note:** A double-click over the right or left border sets the text box to the <a href="https://lunacy.docs.icons8.com/text/#text-block-resize-options" target="_blank">horizontal resize mode</a> and transforms a multiline text into a single line.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/text-autoresizeph.png" height="auto"><source src="/lunacy-docs/public/text-autoresize.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/text-autoresizeph.png" height="auto"><source src="/public/text-autoresize.mp4" type="video/mp4"></video>
## Adding text to shapes
The next demo shows how you can quickly add text to shapes. This can be of great use when it comes to design of such UI elements as buttons, menus and things alike.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-textbtnsph.png" height="auto"><source src="/lunacy-docs/public/tips-textbutns.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-textbtnsph.png" height="auto"><source src="/public/tips-textbutns.mp4" type="video/mp4"></video>
## Text generation
@@ -144,7 +144,7 @@ The next demo shows how you can quickly add text to shapes. This can be of great
If you need to add a random text to your design, simply expand a text block on the canvas and click the “Generate text” button on the Inspector or select the text type in the top Lunacy panel. Use `Shift+R` to refresh the generated text.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tips-textgenph.png" height="auto"><source src="/lunacy-docs/public/tips-textgen.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips-textgenph.png" height="auto"><source src="/public/tips-textgen.mp4" type="video/mp4"></video>
<!--
@@ -152,7 +152,7 @@ If you need to add a random text to your design, simply expand a text block on t
You don't need to think of user names, addresses and stuff of that kind for your designs. Just type the required text snippet and press `Enter`. Use `Shift+R` to refresh the generated text.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-snippetsph.png" height="auto"><source src="/lunacy-docs/public/tips-snippets.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-snippetsph.png" height="auto"><source src="/public/tips-snippets.mp4" type="video/mp4"></video>
-->
@@ -170,26 +170,26 @@ Alternatively, you can use the `Ctrl+Shift+O` shortcut.
To disable snapping, hold down `Ctrl` while dragging a layer.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-desnapph.png" height="auto"><source src="/lunacy-docs/public/tips-desnap.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-desnapph.png" height="auto"><source src="/public/tips-desnap.mp4" type="video/mp4"></video>
## Eyedropper zoom
Lunacy's eyedropper features a nice zoom option that comes in handy when the target area is small and you need pixel precision. To enable zoom, hover the eyedropper over the target and hold down the left mouse button. Then point the eyedropper to the required pixel and release the mouse button. To exit the zoom mode, press `Esc` or quickly swipe the cursor anywhere away from the current area.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/eyedropper3-placeholder.png" height="auto"><source src="/lunacy-docs/public/eyedropper3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/eyedropper3-placeholder.png" height="auto"><source src="/public/eyedropper3.mp4" type="video/mp4"></video>
## Zoom to selection
To quickly jump to the required layer on the canvas, select it in the left panel and press `Ctrl+2` or double-click its outline/icon.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tips-zoomtoselectionph.png" height="auto"><source src="/lunacy-docs/public/tips-zoomtoselection.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips-zoomtoselectionph.png" height="auto"><source src="/public/tips-zoomtoselection.mp4" type="video/mp4"></video>
## Scaling
If you want to resize a layer together with its styling (borders, shadows, etc.), you should consider the scaling feature. Together with the layer size, it will accordingly adjust the values of its styling properties. See the demo below and note how the value of the border thickness changes with the layer size.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/object-resizing3.png" height="auto"><source src="/lunacy-docs/public/object-resizing3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/object-resizing3.png" height="auto"><source src="/public/object-resizing3.mp4" type="video/mp4"></video>
In a similar fashion you can scale several layers at a time.
@@ -197,19 +197,19 @@ In a similar fashion you can scale several layers at a time.
To quickly import an image from a web site to Lunacy, right-click over the image, then click **Copy image** on the context menu. Switch to Lunacy and paste the image onto the canvas.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tips-importimageph.png" height="auto"><source src="/lunacy-docs/public/tips-importimage.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips-importimageph.png" height="auto"><source src="/public/tips-importimage.mp4" type="video/mp4"></video>
## Image fills
You can create an image fill by dropping an image from the Lunacy library or your desktop directly on to a layer as shown in the demo below. For more information about image fills, click <a href="https://docs.icons8.com/lunacy-docs/styling/#image-fills" target="_blank">here</a>.
You can create an image fill by dropping an image from the Lunacy library or your desktop directly on to a layer as shown in the demo below. For more information about image fills, click <a href="https://lunacy.docs.icons8.com/styling/#image-fills" target="_blank">here</a>.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/styling-imagefillph.png" height="auto"><source src="/lunacy-docs/public/styling-imagefill.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/styling-imagefillph.png" height="auto"><source src="/public/styling-imagefill.mp4" type="video/mp4"></video>
## Inverting gradients
To quickly invert a gradient use the button next to the gradient bar on the Color Picker.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tips-invertgradph.png" height="auto"><source src="/lunacy-docs/public/tips-invertgrad.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tips-invertgradph.png" height="auto"><source src="/public/tips-invertgrad.mp4" type="video/mp4"></video>
## Hiding UI elements
@@ -217,5 +217,5 @@ To quickly invert a gradient use the button next to the gradient bar on the Colo
* To hide the toolbar, Inspector, rulers and other UI elements, use the **View** menu.
* To hide all UI elements at once (except for the menu bar), use the `Ctrl+.` shortcut or the respective command on the **View** menu.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tips-hideuiph.png" height="auto"><source src="/lunacy-docs/public/tips-hideui.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tips-hideuiph.png" height="auto"><source src="/public/tips-hideui.mp4" type="video/mp4"></video>
docs/tools.md
+63 -63
View File
@@ -36,78 +36,78 @@ The table below provides an overview of the controls and their shortcuts.
</thead>
<tbody>
<tr>
<td><img src="/lunacy-docs/public/tool-selecticon61.png" alt="Select tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#select-tool">Select tool</a>. Allows you to select, move and resize layers and layer groups.</td>
<td><img src="/public/tool-selecticon61.png" alt="Select tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#select-tool">Select tool</a>. Allows you to select, move and resize layers and layer groups.</td>
<td><code>V</code> or <code>S</code> or just press <code>Esc</code> to exit the current tool.</td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-artboardicon61.png" alt="Artboard tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#artboard-tool">Artboard tool</a>. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool.</td>
<td><img src="/public/tool-artboardicon61.png" alt="Artboard tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#artboard-tool">Artboard tool</a>. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool.</td>
<td><code>A</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-imageicon61.png" alt="Image tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#image-tool">Image tool</a>. Serves for adding images to your designs.</td>
<td><img src="/public/tool-imageicon61.png" alt="Image tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#image-tool">Image tool</a>. Serves for adding images to your designs.</td>
<td><code>M</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-texticon61.png" alt="Text tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#text-tool">Text tool</a>. Serves for adding text layers.</td>
<td><img src="/public/tool-texticon61.png" alt="Text tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#text-tool">Text tool</a>. Serves for adding text layers.</td>
<td><code>T</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-penicon61.png" alt="Pen tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#pen-tool">Pen tool</a>. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool.</td>
<td><img src="/public/tool-penicon61.png" alt="Pen tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#pen-tool">Pen tool</a>. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool.</td>
<td><code>P</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-pencilicon61.png" alt="Pencil tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#pencil-tool">Pencil tool</a>. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen tool.</td>
<td><img src="/public/tool-pencilicon61.png" alt="Pencil tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#pencil-tool">Pencil tool</a>. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen tool.</td>
<td><code>N</code></td>
</tr>
<tr>
<td><p><img src="/lunacy-docs/public/tool-lineicon61.png" alt="Line tool"></p><p><img src="/lunacy-docs/public/tool-rectangleicon61.png" alt="Rectangle tool"></p><p><img src="/lunacy-docs/public/tool-ellipseicon61.png" alt="Ellipse tool"></p><p><img src="/lunacy-docs/public/tool-tiangleicon61.png" alt="Triangle tool"></p></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#shape-tools">Shape tools</a>. Serve for adding pre-made shapes. The Line tool shares the same fly-out menu with the Arrow. The Rectangle tool shares the same fly-out menu with the Rounded rectangle. The Triangle tool shares the same fly-out menu with the Polygon and Star. Only the most frequently used shapes have shortcuts.</td>
<td><p><img src="/public/tool-lineicon61.png" alt="Line tool"></p><p><img src="/public/tool-rectangleicon61.png" alt="Rectangle tool"></p><p><img src="/public/tool-ellipseicon61.png" alt="Ellipse tool"></p><p><img src="/public/tool-tiangleicon61.png" alt="Triangle tool"></p></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#shape-tools">Shape tools</a>. Serve for adding pre-made shapes. The Line tool shares the same fly-out menu with the Arrow. The Rectangle tool shares the same fly-out menu with the Rounded rectangle. The Triangle tool shares the same fly-out menu with the Polygon and Star. Only the most frequently used shapes have shortcuts.</td>
<td><p><code>R</code> - rectangle</p><p><code>U</code> - rounded rectangle</p><p><code>O</code> - ellipse</p><p><code>L</code> - line</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-iconicon61.png" alt="Icon tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#icon-tool">Icon tool</a>. Keeps the icons that you've recently used at hand. After you use the tool for the first time, the latest icon appears on the toolbar instead of the original tool icon.</td>
<td><img src="/public/tool-iconicon61.png" alt="Icon tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#icon-tool">Icon tool</a>. Keeps the icons that you've recently used at hand. After you use the tool for the first time, the latest icon appears on the toolbar instead of the original tool icon.</td>
<td><code>X</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-avataricon61.png" alt="Avatar tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#avatar-tool">Avatar tool</a>. Serves for quickly adding avatars to your designs.</td>
<td><img src="/public/tool-avataricon61.png" alt="Avatar tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#avatar-tool">Avatar tool</a>. Serves for quickly adding avatars to your designs.</td>
<td><code>Q</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tools-guiicon61.png" alt="GUI tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#gui-tool">GUI tool</a>. A set of tools that allows you to quickly add basic GUI controls.</td>
<td><img src="/public/tools-guiicon61.png" alt="GUI tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#gui-tool">GUI tool</a>. A set of tools that allows you to quickly add basic GUI controls.</td>
<td><p><code>B</code> - button</p><p><code>D</code> - text input</p><p><code>Y</code> - radio button</p><p><code>F</code> - checkbox</p><p><code>K</code> - toggle</p><p><code>W</code> - dropdown list</p></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tools-symbolicon61.png" alt="Component tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#component-tool">Component tool</a>. Allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements.</td>
<td><img src="/public/tools-symbolicon61.png" alt="Component tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#component-tool">Component tool</a>. Allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements.</td>
<td><code>S</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tools-commenticon.png" alt="Comment tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#comment-tool">Comment tool</a>. Allows you to keep your notes and to-do lists, as well as to collect feedback from teammates and customers.</td>
<td><img src="/public/tools-commenticon.png" alt="Comment tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#comment-tool">Comment tool</a>. Allows you to keep your notes and to-do lists, as well as to collect feedback from teammates and customers.</td>
<td><code>C</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-hotspoticon61.png" alt="Hotspot tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#hotspot-tool">Hotspot tool</a>. Serves for adding hotspots when working on prototypes.</td>
<td><img src="/public/tool-hotspoticon61.png" alt="Hotspot tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool">Hotspot tool</a>. Serves for adding hotspots when working on prototypes.</td>
<td><code>H</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-sliceicon61.png" alt="Slice tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#slice-tool">Slice tool</a>. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools.</td>
<td><img src="/public/tool-sliceicon61.png" alt="Slice tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#slice-tool">Slice tool</a>. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools.</td>
<td><code>E</code></td>
</tr>
<tr>
<td><img src="/lunacy-docs/public/tool-eyedropicon.png" alt="Eyedropper tool"></td>
<td><a href="https://docs.icons8.com/lunacy-docs/tools/#eyedropper-tool">Eyedropper tool</a>. Serves for sampling colors.</td>
<td><img src="/public/tool-eyedropicon.png" alt="Eyedropper tool"></td>
<td><a href="https://lunacy.docs.icons8.com/tools/#eyedropper-tool">Eyedropper tool</a>. Serves for sampling colors.</td>
<td><code>I</code></td>
</tr>
</tbody>
@@ -132,7 +132,7 @@ To move the selected layer(-s):
To resize the selected layer(-s) with the Select tool, drag the handles on the selection frame. As in all similar apps, use the `Shift` key and corner handles to preserve the aspect ratio of the layer you resize.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-selectplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-selecttool.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-selectplaceholder.png" height="auto"><source src="/public/tool-selecttool.mp4" type="video/mp4"></video>
### Using the Select tool with grouped layers
@@ -145,18 +145,18 @@ When you click or drag over a group of layers, you select the group. To select a
After you select a layer within a group, you can switch to other layers of that group by simply clicking them.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-selectplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-selectltoolgroup1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-selectplaceholder.png" height="auto"><source src="/public/tool-selectltoolgroup1.mp4" type="video/mp4"></video>
<div class="callout callout--info">
<p><strong>Tip:</strong> Alternatively, you can select layers through the <b>Layer List</b>. In some cases it may be more convenient. For instance, when handling fully overlapping layers.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
For details about working with layers, click <a href="https://docs.icons8.com/lunacy-docs/layers/" target="_blank">here</a>.
For details about working with layers, click <a href="https://lunacy.docs.icons8.com/layers/" target="_blank">here</a>.
<!--
>**Tip:** Alternatively, you can select objects through the **Objects** panel. In some cases it may be more convenient. For instance, when handling fully overlapping objects. For details about working with objects, click <a href="https://docs.icons8.com/lunacy-docs/objects/" target="_blank">here</a>.
>**Tip:** Alternatively, you can select objects through the **Objects** panel. In some cases it may be more convenient. For instance, when handling fully overlapping objects. For details about working with objects, click <a href="https://lunacy.docs.icons8.com/objects/" target="_blank">here</a>.
-->
@@ -174,7 +174,7 @@ To add an artboard:
<div class="callout callout--info">
<p><strong>Tip:</strong> If there are already some layers on the canvas and you decide to put them on an artboard, just drag the artboard tool over these layers.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -183,7 +183,7 @@ To add an artboard:
-->
For details, about using artboards read <a href="https://docs.icons8.com/lunacy-docs/interface/#artboards" target="_blank">here</a>.
For details, about using artboards read <a href="https://lunacy.docs.icons8.com/interface/#artboards" target="_blank">here</a>.
## Image tool
@@ -199,7 +199,7 @@ To add an image:
{:.is-big}
![Adding an image](public/objects_bitmaps.gif)
For details about working with images, read <a href="https://docs.icons8.com/lunacy-docs/images/" target="_blank">here</a>.
For details about working with images, read <a href="https://lunacy.docs.icons8.com/images/" target="_blank">here</a>.
<!--
@@ -230,7 +230,7 @@ There are several ways of adding images from the internet.
The demo below shows the above two methods.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-imgeimportph.png" height="auto"><source src="/lunacy-docs/public/tool-importimage11.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-imgeimportph.png" height="auto"><source src="/public/tool-importimage11.mp4" type="video/mp4"></video>
**Way 3**
@@ -245,7 +245,7 @@ The demo below shows the above two methods.
## Text tool
The Text tool serves for adding text layers. For details about working with text in Lunacy, click <a href="https://docs.icons8.com/lunacy-docs/text/" target="_blank">here</a>.
The Text tool serves for adding text layers. For details about working with text in Lunacy, click <a href="https://lunacy.docs.icons8.com/text/" target="_blank">here</a>.
## Pen tool
@@ -264,11 +264,11 @@ To build a shape that consists of straight lines:
2. Go on clicking until the shape that you want is ready and close the path by clicking over the point from where you started or clicking the **Close path** button in the Inspector.
3. Press `Esc` to exit the tool.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-penplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-pen.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-penplaceholder.png" height="auto"><source src="/public/tool-pen.mp4" type="video/mp4"></video>
To build a shape that includes curves, double-click when setting a point or click and drag a little. You will see two handles near the point. By dragging these handles and changing their length, you determine the shape of the curve. You can even drag the point, if necessary (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tools-pentool2placholder.png" height="auto"><source src="/lunacy-docs/public/tools-pentool2.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tools-pentool2placholder.png" height="auto"><source src="/public/tools-pentool2.mp4" type="video/mp4"></video>
Don't worry if the resulting shape is not exactly what you wanted. You can always refine it by modifying curves and straight lines, moving points, adding new points or deleting unnecessary ones.
@@ -281,11 +281,11 @@ For this:
In the demo below we added some curves to a heart-shaped layer built with straight lines. Note how a double-click turns a straight point into a curved (mirrored) point. It works in the opposite way as well. For details about the types of points, read the subsection below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tools-pentool3placeholder.png" height="auto"><source src="/lunacy-docs/public/tools-pentool31.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tools-pentool3placeholder.png" height="auto"><source src="/public/tools-pentool31.mp4" type="video/mp4"></video>
<div class="callout callout--info">
<p><strong>Tip:</strong> To draw a perfectly horizontal, vertical or 45-degree diagonal path, hold down <code style="background: white">Shift</code> when placing the second point of a segment.</p>
<p>For more tips and tricks, click <a href="https://docs.icons8.com/lunacy-docs/tips/" target="_blank">here</a>.</p>
<p>For more tips and tricks, click <a href="https://lunacy.docs.icons8.com/tips/" target="_blank">here</a>.</p>
</div>
<!--
@@ -310,9 +310,9 @@ As it was mentioned earlier, to switch between straight and mirror points, you c
To better understand how it all works, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tools-curvesplaceholder.png" height="auto"><source src="/lunacy-docs/public/tools-curves.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tools-curvesplaceholder.png" height="auto"><source src="/public/tools-curves.mp4" type="video/mp4"></video>
For more information about editing vector curves, also read <a href="https://docs.icons8.com/lunacy-docs/editing/#vector-editing" target="_blank">here</a>.
For more information about editing vector curves, also read <a href="https://lunacy.docs.icons8.com/editing/#vector-editing" target="_blank">here</a>.
## Pencil tool
@@ -333,7 +333,7 @@ To exit the Pencil, press `Esc` or click the Select tool. When you exit the Penc
Lunacy automatically smooths the paths that you create. But you can also edit pencil-drawn paths like all other vector paths: add, delete and move points, bend segments, etc. To switch to the edit mode, select the required path and press `Enter` or click the **Edit Layer** button at the top bar. To exit the edit mode, press `Esc` or click anywhere on the canvas beyond the selected layer, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/pencil-editplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-penciltool.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/pencil-editplaceholder.png" height="auto"><source src="/public/tool-penciltool.mp4" type="video/mp4"></video>
Finally, you can make use of such styling properties as borders, shadows, inner shadows and blurs. As for fills, you should remember that the Pencil always draws open paths, even if they appear as closed. You can try to apply fills but in many cases the result can be weird. If you need to close a path, enable the layer edit mode and click the **Close path** button which will appear in the Inspector.
@@ -354,12 +354,12 @@ To add a shape, select the required shape on the toolbar and then drag and click
{:.is-big}
![Shape tool](public/objects_adding_primitives.gif)
For details about working with shapes, click <a href="https://docs.icons8.com/lunacy-docs/editing/" target="_blank">here</a>.
For details about working with shapes, click <a href="https://lunacy.docs.icons8.com/editing/" target="_blank">here</a>.
## Icon tool
The Icon tool serves to simplify your work with icons and keeps the items that you've recently used at hand. A click over the icon tool on the toolbar opens the <a href="https://docs.icons8.com/lunacy-docs/libraries/#icons" target="_blank">Icons library</a> where you can select the required icon.
The Icon tool serves to simplify your work with icons and keeps the items that you've recently used at hand. A click over the icon tool on the toolbar opens the <a href="https://lunacy.docs.icons8.com/libraries/#icons" target="_blank">Icons library</a> where you can select the required icon.
![A view of the icon tool](public/tool-icontoolview1.png)
@@ -373,7 +373,7 @@ For your convenience, when you select an icon on the canvas, Lunacy displays the
## Avatar tool
Creating views of user profiles is one of the most common tasks when designing user interfaces. Combined with Lunacy's <a href="https://docs.icons8.com/lunacy-docs/text/#text-generation-and-text-snippets" target="_blank">text snippets</a> the avatar tool becomes a real time saver.
Creating views of user profiles is one of the most common tasks when designing user interfaces. Combined with Lunacy's <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets" target="_blank">text snippets</a> the avatar tool becomes a real time saver.
{:.is-big}
![Using the avatar tool](public/objects_avatars1.png)
@@ -386,7 +386,7 @@ To add an avatar to your design:
Lunacy remembers the size of the latest avatar you add (at the moment you release the tool). The next time you invoke the tool it will appear with an avatar of that very size.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tool-avatarsizeplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-avatarsize1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tool-avatarsizeplaceholder.png" height="auto"><source src="/public/tool-avatarsize1.mp4" type="video/mp4"></video>
The default collection of avatars installed with the app includes five images. You can use them even when your computer has no internet connection. When you're online, you have access to the full collection of avatars.
@@ -399,19 +399,19 @@ Also, thanks to integration with the <a href="https://generated.photos/" target=
To change the image of an avatar, select the avatar and click the refresh button at the top-left corner of the avatar or press `Shift+R`.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tools-refreshavatarph.png" height="auto"><source src="/lunacy-docs/public/tools-refreshavatar.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tools-refreshavatarph.png" height="auto"><source src="/public/tools-refreshavatar.mp4" type="video/mp4"></video>
Also, you can refresh multiple avatars at a time. For this, select several avatars and press `Shift+R` or click **Generate avatar** in the Inspector.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-newavatarph.png" height="auto"><source src="/lunacy-docs/public/rn-newavatar.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-newavatarph.png" height="auto"><source src="/public/rn-newavatar.mp4" type="video/mp4"></video>
Although avatars appear as circles when you add them to the canvas, in fact they are rounded rectangles. So, you can play with the value of the corner radius, if you wish.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-avatardemo.png" height="auto"><source src="/lunacy-docs/public/avatardemo.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-avatardemo.png" height="auto"><source src="/public/avatardemo.mp4" type="video/mp4"></video>
Moreover, you can create avatars from any shapes. For this, select a shape, then enable the Avatar tool and click **Generate avatar** in the Inspector (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/rn-newavatar2ph.png" height="auto"><source src="/lunacy-docs/public/rn-newavatar2-1.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/rn-newavatar2ph.png" height="auto"><source src="/public/rn-newavatar2-1.mp4" type="video/mp4"></video>
### Adjusting background in avatars with generated photos
@@ -426,7 +426,7 @@ You can change the background in avatars based on generated photos. The procedur
7. Drag the new layer below the image layer.
8. Enable the color picker and set the required background color (see the demo below).
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tools-avatarbgph.png" height="auto"><source src="/lunacy-docs/public/tools-avatarbg.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tools-avatarbgph.png" height="auto"><source src="/public/tools-avatarbg.mp4" type="video/mp4"></video>
## GUI tool
@@ -454,7 +454,7 @@ When you select a control added with any of these tools, you see the suggestions
-->
To edit the appearance of a control, use the <a href="https://docs.icons8.com/lunacy-docs/components/#editing-main-components" target="_blank">component editor</a>.
To edit the appearance of a control, use the <a href="https://lunacy.docs.icons8.com/components/#editing-main-components" target="_blank">component editor</a>.
## Component tool
@@ -527,13 +527,13 @@ Use the Hotspot tool to create hotspot zones when designing prototypes. To add a
The demo below shows the procedure of creating a hotspot and setting a target artboard.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/tool-addhotspotplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-addhotspot.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/tool-addhotspotplaceholder.png" height="auto"><source src="/public/tool-addhotspot.mp4" type="video/mp4"></video>
To hide/show hotspots and prototyping links on the canvas, use the **Show prototyping** button on the top bar.
![Show/hide prototyping](public/tool-showproto.png)
For more information about prototyping in Lunacy, click <a href="https://docs.icons8.com/lunacy-docs/prototyping" target="_blank">here</a>.
For more information about prototyping in Lunacy, click <a href="https://lunacy.docs.icons8.com/prototyping" target="_blank">here</a>.
## Slice tool
@@ -553,7 +553,7 @@ To hide/show slices on the canvas, use the **Show slices** button on the top bar
To remove a slice from the canvas, select it and press`Del`.
For more information about export in Lunacy, click <a href="https://docs.icons8.com/lunacy-docs/export" target="_blank">here</a>.
For more information about export in Lunacy, click <a href="https://lunacy.docs.icons8.com/export" target="_blank">here</a>.
## Eyedropper tool
@@ -576,7 +576,7 @@ To use the eyedropper tool:
That is typically how all eyedroppers work in similar apps. But Lunacy's eyedropper also features a very nice zoom option that comes in handy when the target area is small and you need pixel precision. To enable zoom, hover the eyedropper over the target and hold down the left mouse button. Then point the eyedropper to the required pixel and release the mouse button. To exit the zoom mode, press `Esc` or quickly swipe the cursor anywhere away from the current area, see the demo below.
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/lunacy-docs/public/eyedropper3-placeholder.png" height="auto"><source src="/lunacy-docs/public/eyedropper3.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/eyedropper3-placeholder.png" height="auto"><source src="/public/eyedropper3.mp4" type="video/mp4"></video>
### How the eyedropper applies color to layers
@@ -608,13 +608,13 @@ The Zoom tool enables you to zoom in the selected object or canvas area. To use
2. Click the object you want to zoom in or drag over the required area (the smaller the area is, the higher the resulting zoom value will be).
3. To zoom out, hold down `Z+Alt` and click or drag over the object or area.
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/lunacy-docs/public/tool-zoomplaceholder.png" height="auto"><source src="/lunacy-docs/public/tool-zoom61.mp4" type="video/mp4"></video>
<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/tool-zoomplaceholder.png" height="auto"><source src="/public/tool-zoom61.mp4" type="video/mp4"></video>
For your convenience, when the zoom value exceeds 500, Lunacy starts displaying the pixel grid. There are two ways to disable this feature:
1. Through the menu (**View** > **Pixel grid**).
2. Deselect all objects on the canvas and clear the **Show pixel grid** checkbox that will appear in the Inspector.
For information about other zooming options in Lunacy, read <a href="https://docs.icons8.com/lunacy-docs/interface/#zooming-options" target="_blank">here</a>.
For information about other zooming options in Lunacy, read <a href="https://lunacy.docs.icons8.com/interface/#zooming-options" target="_blank">here</a>.
-->