From 6c0a404466e16780bb454de59dfdd5a9c8ea63b2 Mon Sep 17 00:00:00 2001 From: Yaroslav Yudinskikh <35652747+YarikSWT@users.noreply.github.com> Date: Tue, 8 Nov 2022 15:28:41 +0300 Subject: [PATCH] Apply changes for moving to lunacy.docs.icons8.com (#64) * 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 --- README.md | 2 +- docs/_config.yml | 2 +- docs/cloud.md | 10 +- docs/clouddocs.md | 2 +- docs/components.md | 42 ++++---- docs/editing.md | 32 +++--- docs/export.md | 14 +-- docs/eyedropper.md | 2 +- docs/images.md | 26 ++--- docs/interface.md | 136 +++++++++++++------------- docs/layers.md | 82 ++++++++-------- docs/layerstyles.md | 20 ++-- docs/libraries.md | 14 +-- docs/linked_design.md | 12 +-- docs/man/help.md | 4 +- docs/objects.md | 80 +++++++-------- docs/prototyping.md | 14 +-- docs/release-notes/index.md | 188 ++++++++++++++++++------------------ docs/styling.md | 56 +++++------ docs/support.md | 14 +-- docs/symbols.md | 16 +-- docs/text.md | 36 +++---- docs/tips.md | 54 +++++------ docs/tools.md | 126 ++++++++++++------------ 24 files changed, 492 insertions(+), 492 deletions(-) diff --git a/README.md b/README.md index a0f0ea3..772935f 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docs/_config.yml b/docs/_config.yml index 5eee9fc..9963cd5 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -1,5 +1,5 @@ doks: - baseurl: /lunacy-docs + baseurl: color_theme: blue micro_nav: - title: About Lunacy diff --git a/docs/cloud.md b/docs/cloud.md index 263306f..afb383d 100644 --- a/docs/cloud.md +++ b/docs/cloud.md @@ -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 UI kits. 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 UI kits. 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. - + ## 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 UI kits. For details, click [here](#working-with-libraries). +* **Add to UI Kits**: Available for libraries only. Adds the library to the list of UI kits. 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 UI kits. 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 UI kits. 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 components. +>**Note**: You should understand that to be able to use libraries according to their intent, library elements must be saved as components. 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. diff --git a/docs/clouddocs.md b/docs/clouddocs.md index f456bca..6cc8565 100644 --- a/docs/clouddocs.md +++ b/docs/clouddocs.md @@ -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)

Note: The maximum storage period of deleted documents for free users is 30 days. Older documents get archived and cannot be restored.

diff --git a/docs/components.md b/docs/components.md index 8c8f7e0..25671ad 100644 --- a/docs/components.md +++ b/docs/components.md @@ -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. - + ## [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. - + 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. - + **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. - + ### [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. - + 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 here. +* **UI kits**: Shows the list of external UI kits from where you can also select a replacement. For details about UI kits, click here.

Tip: 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.

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

@@ -317,7 +317,7 @@ The commands are as follows: Create New Component State - Creates a new component state. + Creates a new component state. Ctrl+Alt+S ⌥ ⌘ S @@ -335,7 +335,7 @@ The commands are as follows: 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. For more information about UI kits, click here. + 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. For more information about UI kits, click here. - - @@ -365,7 +365,7 @@ The commands are as follows: Organize Components - A click over this command opens the components panel, where you can organize components as described here. + A click over this command opens the components panel, where you can organize components as described here. - - @@ -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 here. +>**Note:** To demonstrate Lunacy capabilities to the maximum, we have also added some layer and text styles. For details about them, click here. 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. - + ### 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. - + ### Text overrides @@ -465,10 +465,10 @@ Add the contact's email: The gif below demonstrates text overrides described in Steps 2 and 3. - + -For details, about text generation and text snippets, click here. +For details, about text generation and text snippets, click here. ### Nested components overrides @@ -501,7 +501,7 @@ The procedure is as follows: --> - + 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. - + 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 here. +For details about tint overrides, read here. ## Duplicating components diff --git a/docs/editing.md b/docs/editing.md index 72512e6..54141e8 100644 --- a/docs/editing.md +++ b/docs/editing.md @@ -26,15 +26,15 @@ page_nav: ## Introduction -If we put aside such specific layer types as artboards and hotspots, all layers in Lunacy that are not text or rasters are vector shapes. +If we put aside such specific layer types 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 shape tools. Also, you can make use of the pen and pencil 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 shape tools. Also, you can make use of the pen and pencil 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 here and here. For details about creating shapes with the pen tool, read here. +This section focuses on how to edit and transform vector shapes. For information about creating pre-made shapes, read here and here. For details about creating shapes with the pen tool, read here. -For information how to apply fills, borders, shadows and blurs, refer to the Styling section. +For information how to apply fills, borders, shadows and blurs, refer to the Styling section. ## Transforming shapes through the Inspector @@ -51,7 +51,7 @@ These controls include: The demo below shows these controls in action. - + ### 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. - + **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 this 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 this 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. - + ## Boolean Operations @@ -127,7 +127,7 @@ Lunacy provides four types of Boolean operations: The demo below shows how Boolean operations work. - + 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

Tip: 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 Layers list

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

@@ -240,7 +240,7 @@ You can export to cloud:

Productivity Tip: The Alt+С + C 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.

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

- + ## 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. - + ## 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 Pencil tool. 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 Pen tool. 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 Pencil tool. 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 Pen tool. 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). - + 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. - + ## Image upscaler Lunacy is integrated with the Icons8 Image Upscaler. 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)

Note: The feature is available only to users with any paid subscription for Icons8 graphic assets.

diff --git a/docs/interface.md b/docs/interface.md index e96efc5..811cac1 100644 --- a/docs/interface.md +++ b/docs/interface.md @@ -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 (components, layer and text styles) - * Built-in Lunacy libraries of icons, photos and vector images, as well as collections of UI kits + * Document assets (components, layer and text styles) + * Built-in Lunacy libraries of icons, photos and vector images, as well as collections of UI kits - - * List of shortcuts + * List of shortcuts 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 here. 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 here. 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 here. +9. The **Play** button. Starts the prototype previewer. For details about prototyping in Lunacy, read here. 10. This button opens a menu with options described in the table below. @@ -70,42 +70,42 @@ The interface consists of the following main elements. - - + + - - + + - - + + - - + + - - + + - + - - + + - + @@ -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. - + -There is also a special type of a page - the Components page. For details, read here. +There is also a special type of a page - the Components page. For details, read here. ## 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. - + 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: @@ -176,7 +176,7 @@ To collapse all branches in the Layer List tree use the `Ctrl + ~` shortcut.

Tip: 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 Ctrl + 2 (Fit to selection).

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

@@ -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 eyedropper tool. +2. Select the eyedropper tool. 3. Use the pallets that will appear in the left panel to select the new color. - + ## [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 artboard tool. 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 artboard tool. 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 - + - + - + - + - + - - + + - - + + - - + +
Show/Hide rulers button The Show/Hide rulers button. Controls the display of rulers. For details, read below.Show/Hide rulers button The Show/Hide rulers button. Controls the display of rulers. For details, read below. Ctrl+R (⌘ R)
Show/Hide layout buttonThe Layout button. Controls the display of the layout grid. Available only when there is an artboard on the canvas. For details, read here.Show/Hide layout buttonThe Layout button. Controls the display of the layout grid. Available only when there is an artboard on the canvas. For details, read here. Ctrl+\ (⌃ G)
Show prototyping buttonThe Show prototyping button. Controls the display of hotspots and prototyping arrows.Show prototyping buttonThe Show prototyping button. Controls the display of hotspots and prototyping arrows. View > Prototyping
Show pixels on zoom buttonThe Show pixels on zoom button. Enables the display of pixels when the zoom value exceeds 100. For details, read here.Show pixels on zoom buttonThe Show pixels on zoom button. Enables the display of pixels when the zoom value exceeds 100. For details, read here. View > Pixels on Zoom
Show grid buttonThe Show grid button. Enables the display of the square grid. For details, read here.Show grid buttonThe Show grid button. Enables the display of the square grid. For details, read here. Ctrl+' (⌘ ')
Sketch Cloud ButtonSketch Cloud Button The Enable dark mode button. Turns on/off the night theme in the Lunacy interface. -
Missing fonts buttonThe Missing fonts button. Appears when the file you are working with includes fonts not installed on your computer. For details, read here.Missing fonts buttonThe Missing fonts button. Appears when the file you are working with includes fonts not installed on your computer. For details, read here. -
Notifications buttonNotifications button The Notifications button. Appears when you have a new notification from Lunacy. Opens the panel where you can view and manage Lunacy notifications. -
Alignment and distribution controlsAlignment and distribution controls Alignment and distribution controls. Become available when you select two or more layers.
Opacity and blend mode settingsOpacity and blend mode settings Opacity and blend mode settings. Allow you to set the overall opacity of a layer and its blending mode.
Layer properties controlsLayer properties controls Layer properties controls. 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.
Resizing constraintsResizing constraints Resizing constraints. 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.
Prototyping controlsPrototyping controls The Prototyping section features the settings related to prototyping.
Appearance sectionThe Appearance section allows you to apply styles to the selected layer.Appearance sectionThe Appearance section allows you to apply styles to the selected layer.
Styling optionsStyling options. For details, read here.Styling optionsStyling options. For details, read here.
Export settingsExport settings. For details, read here.Export settingsExport settings. For details, read here.
@@ -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 here. +* **Export project**: Allows you to export the whole project. For details, read here. @@ -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). - + ## [The context menu](#the-context-menu) @@ -591,7 +591,7 @@ The table below gives an overview of context menu commands and options common fo Group Selection - Groups two or more selected layers together. For details about grouping layers, read here. + Groups two or more selected layers together. For details about grouping layers, read here. Ungroup @@ -599,11 +599,11 @@ The table below gives an overview of context menu commands and options common fo Lock - Locks the layer from accidental edits. For details, read here. + Locks the layer from accidental edits. For details, read here. Hide - Temporarily hides the layer from the canvas. For details, read here. + Temporarily hides the layer from the canvas. For details, read here. Rename @@ -611,11 +611,11 @@ The table below gives an overview of context menu commands and options common fo Copy/Paste - Opens a submenu with copying/pasting options. For details, read here. + Opens a submenu with copying/pasting options. For details, read here. Duplicate - Creates a duplicate of the selected layer. For details, read here. + Creates a duplicate of the selected layer. For details, read here. Delete diff --git a/docs/layers.md b/docs/layers.md index 4ff29f2..9532da5 100644 --- a/docs/layers.md +++ b/docs/layers.md @@ -26,15 +26,15 @@ page_nav: In Lunacy you will work with the following types of layers: -* Artboards -* Text layers -* Vectors -* Shapes -* Images -* Components and component instances -* Icons -* Hotspots -* Slices +* Artboards +* Text layers +* Vectors +* Shapes +* Images +* Components and component instances +* Icons +* Hotspots +* Slices 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 tool on the toolbar or with a shortcut (see the note below). +1. Enable the respective tool 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). - + -**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 here. +**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 here. ![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 here. +For details about using the select tool and a demo, click here. ## 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 Measuring 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 Measuring section). - + 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 tips 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 tips on working with numeric fields in the Inspector. - + ## 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**. - + 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. --> - + 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. Copy style/Paste style - These options allow you to copy the styling properties of the selected layer and apply them to another layer. See the demo below. + These options allow you to copy the styling properties of the selected layer and apply them to another layer. See the demo below. The demo below shows how you can copy and paste styling properties between layers. - + ## 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. - + 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). - + ### 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. - + 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 here for some tips on working with numeric fields in the Inspector. +Also, read here 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. - + ## Aligning and distributing layers @@ -290,42 +290,42 @@ The table below provides a description of the controls. - Align Left + Align Left Align Left. Aligns the selected layers to the left bound of their selection frame. Shift + Ctrl + ← - Align Horizontally + Align Horizontally Align Horizontally. Horizontally centers the selected layers. Ctrl + Shift + - - Align Right + Align Right Align Right. Aligns the selected layers to the right bound of their selection frame. Shift + Ctrl + → - Distribute Vertical Spacing + Distribute Vertical Spacing Distribute Vertical Spacing. 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. Shift + Ctrl + V - Align Top + Align Top Align Top. Aligns the selected layers to the top bound of their selection frame. Shift + Ctrl + ↑ - Align Vertically + Align Vertically Align Vertically. Vertically centers the selected layers. Ctrl + Shift + | - Align Bottom + Align Bottom Align Bottom. Aligns the selected layers to the bottom bound of their selection frame. Shift + Ctrl + ↓ - Distribute Vertical Spacing + Distribute Vertical Spacing Distribute Horizontal Spacing. 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. Shift + Ctrl + H @@ -334,7 +334,7 @@ The table below provides a description of the controls. To better understand how it all works, see the demo below. - + ### 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. - + ## 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. - + 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. - + 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. - + diff --git a/docs/layerstyles.md b/docs/layerstyles.md index 6632e47..a25b325 100644 --- a/docs/layerstyles.md +++ b/docs/layerstyles.md @@ -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. - + ## [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 Styling section of our documentation. +For details on styling properties, refer to the Styling 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. - + **Way 2.** By first defining the properties of a layer and then saving them as a style. - + ### 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). - + ### 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. - + ### 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 Text section for tips on working with text layers. +See also the Text 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 here. +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 here. 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. - + 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. - + diff --git a/docs/libraries.md b/docs/libraries.md index f908df1..34b7232 100644 --- a/docs/libraries.md +++ b/docs/libraries.md @@ -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! - + 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)
-

Tip: To better understand the intent and how to use UI kits, we recommend that you first read the Components and Layer and text styles sections of our documentation.

-

For more tips and tricks, click here.

+

Tip: To better understand the intent and how to use UI kits, we recommend that you first read the Components and Layer and text styles sections of our documentation.

+

For more tips and tricks, click here.

@@ -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 components, layer styles and text styles. +In fact, UI kits are external .sketch files with ready-made components, layer styles and text styles.

Tip: 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.

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

diff --git a/docs/release-notes/index.md b/docs/release-notes/index.md index fdfbb47..534a709 100644 --- a/docs/release-notes/index.md +++ b/docs/release-notes/index.md @@ -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 here. +For details about teamwork in Lunacy, read here. @@ -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. - + ### Snapping to artboard presets @@ -147,10 +147,10 @@ To disable snapping, hold down `Ctrl` (`⌘`) while dragging. -### 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 here. +If you also want to take part in Lunacy localization, click here. ### 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 icons8.com. ### 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 here. +For details, about teams read here. 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 here. +If you also want to take part in Lunacy localization, click here. ### Improvements @@ -897,7 +897,7 @@ Download from the here. +For details, click here. #### Avatar tool @@ -1066,19 +1066,19 @@ We integrated the avatar tool with the + 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). - + #### Image Upscaler Another cool feature of this release is the integration with the Icons8 Image Upscaler. 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. - + #### 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 - + #### 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. - + 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 here. +For details about working with plugins in Lunacy, read here. #### 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 here. +For details and a demo, click here. #### 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. - + 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 here and here. +For details about using the panels, read here and here. #### 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 symbol editor. +To edit the appearance of a control, use the symbol editor. #### 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 here. +For details and a demo, click here. #### 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 here. +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 here. -![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 diff --git a/docs/styling.md b/docs/styling.md index 6a2af25..611190f 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -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 here 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 here for details). -You can apply styling options to all types of layers, 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 types of layers, 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 text styles. +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 text styles. 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). - + 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. - + ## [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 here. +3. The eyedropper tool. For details about using it, read here. 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. - + ## [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. - + #### 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. - + #### 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. - + ### 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. - +
-

Tip: You can also create an image fill by holding down Ctrl (⌘) and dropping an image from your desktop or from the Lunacy library on to the layer as shown in the demo below.

As a matter of fact, what the avatar tool does is that it creates rounded rectangles with image fills, where images are random photos of people.

-

For more tips and tricks, click here.

+

Tip: You can also create an image fill by holding down Ctrl (⌘) and dropping an image from your desktop or from the Lunacy library on to the layer as shown in the demo below.

As a matter of fact, what the avatar tool does is that it creates rounded rectangles with image fills, where images are random photos of people.

+

For more tips and tricks, click here.

- + @@ -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. - + * **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. - +
@@ -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). - + 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
-The demo below shows three instances of the same component. We first applied a tint override to a nested element, then switched to the component edit mode 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 component edit mode and modified the default tint. In the latter case, the change applied only to the instances without the override. - + 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 here. +For details about overrides, read here. @@ -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. - + -**See also:** Tips on working with the Inspector. +**See also:** Tips on working with the Inspector. @@ -170,26 +170,26 @@ Alternatively, you can use the `Ctrl+Shift+O` shortcut. To disable snapping, hold down `Ctrl` while dragging a layer. - + ## 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. - + ## 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. - + ## 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. - + 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. - + ## 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 here. +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 here. - + ## Inverting gradients To quickly invert a gradient use the button next to the gradient bar on the Color Picker. - + ## 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. - + diff --git a/docs/tools.md b/docs/tools.md index bbd4b3c..6b04a38 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -36,78 +36,78 @@ The table below provides an overview of the controls and their shortcuts. - Select tool - Select tool. Allows you to select, move and resize layers and layer groups. + Select tool + Select tool. Allows you to select, move and resize layers and layer groups. V or S or just press Esc to exit the current tool. - Artboard tool - Artboard tool. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool. + Artboard tool + Artboard tool. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool. A - Image tool - Image tool. Serves for adding images to your designs. + Image tool + Image tool. Serves for adding images to your designs. M - Text tool - Text tool. Serves for adding text layers. + Text tool + Text tool. Serves for adding text layers. T - Pen tool - Pen tool. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool. + Pen tool + Pen tool. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool. P - Pencil tool - Pencil tool. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen tool. + Pencil tool + Pencil tool. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen tool. N -

Line tool

Rectangle tool

Ellipse tool

Triangle tool

- Shape tools. 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. +

Line tool

Rectangle tool

Ellipse tool

Triangle tool

+ Shape tools. 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.

R - rectangle

U - rounded rectangle

O - ellipse

L - line

- Icon tool - Icon tool. 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. + Icon tool + Icon tool. 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. X - Avatar tool - Avatar tool. Serves for quickly adding avatars to your designs. + Avatar tool + Avatar tool. Serves for quickly adding avatars to your designs. Q - GUI tool - GUI tool. A set of tools that allows you to quickly add basic GUI controls. + GUI tool + GUI tool. A set of tools that allows you to quickly add basic GUI controls.

B - button

D - text input

Y - radio button

F - checkbox

K - toggle

W - dropdown list

- Component tool - Component tool. Allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements. + Component tool + Component tool. Allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements. S - Comment tool - Comment tool. Allows you to keep your notes and to-do lists, as well as to collect feedback from teammates and customers. + Comment tool + Comment tool. Allows you to keep your notes and to-do lists, as well as to collect feedback from teammates and customers. C - Hotspot tool - Hotspot tool. Serves for adding hotspots when working on prototypes. + Hotspot tool + Hotspot tool. Serves for adding hotspots when working on prototypes. H - Slice tool - Slice tool. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools. + Slice tool + Slice tool. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools. E - Eyedropper tool - Eyedropper tool. Serves for sampling colors. + Eyedropper tool + Eyedropper tool. Serves for sampling colors. I @@ -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. - + ### 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. - +

Tip: Alternatively, you can select layers through the Layer List. In some cases it may be more convenient. For instance, when handling fully overlapping layers.

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

-For details about working with layers, click here. +For details about working with layers, click here. @@ -174,7 +174,7 @@ To add an artboard:

Tip: 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.

-

For more tips and tricks, click here.

+

For more tips and tricks, click here.

-For details, about using artboards read here. +For details, about using artboards read here. ## 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 here. +For details about working with images, read here. -To edit the appearance of a control, use the component editor. +To edit the appearance of a control, use the component editor. ## 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. - + 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 here. +For more information about prototyping in Lunacy, click here. ## 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 here. +For more information about export in Lunacy, click here. ## 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. - + ### 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. - + 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 here. +For information about other zooming options in Lunacy, read here. --> \ No newline at end of file