Learn about tools and controls on the Lunacy toolbar
This section is a description of tools and controls on the Lunacy toolbar.
The table below provides an overview of the controls and their shortcuts.
|Tool icon||Description||Keyboard shortcut|
|Select tool. Allows you to select, move and resize layers and layer groups.||
|Frame tool. Serves for adding frames onto the canvas. Shares the same fly-out menu with the Hotspot tool.||
|Image tool. Serves for adding images to your designs.||
|Text tool. Serves for adding text layers.||
|Pen tool. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool.||
|Pencil tool. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen 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.||
|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.||
|Avatar tool. Serves for quickly adding avatars to your designs.||
|GUI tool. A set of tools that allows you to quickly add basic GUI controls.||
|Component tool. Allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements.||
|Comment tool. Allows you to keep your notes and to-do lists, as well as to collect feedback from teammates and customers.||
|Hotspot tool. Serves for adding hotspots when working on prototypes.||
|Slice tool. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools.||
|Eyedropper tool. Serves for sampling colors.||
There is also a zoom tool. It serves for zooming in and out the selected layer or canvas area. It does not appear on the toolbar. To enable the zoom tool, hold down
For details about using the tools, read further.
Note: If you need more space or prefer shortcuts you can toggle off the display of the toolbar through the menu (View > Toolbar).
The Select tool is likely the tool that you will be using most often when working with Lunacy. It is the default tool which gets enabled, if no other tool is active. The Select tool allows you to select, move and resize layers and layer groups.
In general, to select a layer, just click over it. As you do it, a selection frame with handles appears around the layer, and the layer’s name gets highlighted in the Layer List. To select multiple layers, hold down the
Shift key and click the layers you want to select. Alternatively, you can use the click-and-drag method for selecting layers. The demo below shows both methods of selecting layers.
To move the selected layer(-s):
- Point the cursor over the layer or an layer within a group (not over the empty space within the selection frame).
- Move the selection to where you want it.
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
When you click or drag over a group of layers, you select the group. To select a certain layer within a group:
Hold down the
Ctrlkey and click over the required layer.
Click to select the group, then double-click to select the layer.
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 details about working with layers, click here.
Frames are a way to divide the canvas into separate areas with different content. Frames are optional but they come in handy when you’re designing for a certain screen size or device.
To add a frame:
- Select the frame tool on the toolbar or press
- Click and drag to create a custom size frame or select an option from the frame selection panel which will appear on the right (see the figure below).
Tip: If there are already some layers on the canvas and you decide to put them on a frame, just drag the frame tool over these layers.
For more tips and tricks, click here.
For details, about using frames read here.
The Image tool serves for quick adding images from files to your designs. Lunacy supports all the popular image formats like PNG, JPG, JPEG, WEBP, BMP, ICO, GIF, SVG. The TIFF format is not supported.
To add an image:
- Click the tool icon on the toolbar. The Open dialog box appears.
- In the Open dialog box, browse to the required file.
- Select the file. You can select multiple files at a time, if you want.
- Click over the area where you want to put the image (this will add the image in its original size) or click and drag to get the required size of the image as shown in the demo below.
For details about working with images, read here.
The Text tool serves for adding text layers. For details about working with text in Lunacy, click here.
The pen is a tool for creating vector shapes. It is used in all similar apps. But if you are a complete novice to design, it might take you some time and practice to master it.
The pen builds shapes by drawing segments between points that you add onto the canvas. Altogether, the segments between interconnected points are called a path. Paths that have no end points, which means that all points are connected with two segments, are called closed paths or shapes.
Path segments can be straight lines or curves.
To build a shape that consists of straight lines:
- Click on the canvas to add the first point, then click where you want to have the second point.
- Go on clicking until the shape that you want is ready and close the path by clicking over the point from where you started or clicking the Close path button in the Inspector.
Escto exit the tool.
To build a shape that includes curves, double-click when setting a point or click and drag a little. You will see two handles near the point. By dragging these handles and changing their length, you determine the shape of the curve. You can even drag the point, if necessary (see the demo below).
Don’t worry if the resulting shape is not exactly what you wanted. You can always refine it by modifying curves and straight lines, moving points, adding new points or deleting unnecessary ones.
- Select the shape.
- Click the Edit Layer button () on the context tool bar or press
Enter, to enable the edit mode.
- Make the required changes.
- To exit the edit mode, press
Escor click the canvas anywhere beyond the shape.
In the demo below we added some curves to a heart-shaped layer built with straight lines. Note how a double-click turns a straight point into a curved (mirrored) point. It works in the opposite way as well. For details about the types of points, read the subsection below.
Tip: To draw a perfectly horizontal, vertical or 45-degree diagonal path, hold down
Shift when placing the second point of a segment.
For more tips and tricks, click here.
Types of points
There are two types of points: the so-called Straight (1) and curved points. Curved points appear with handles for building Bézier curves.
And also, there are three subtypes of curved points. The difference between them is determined by the handles behavior:
- Mirrored points (2) come with identical handles that mirror each other as you drag one of the handles.
- Disconnected points (3) have entirely independent handles.
- Asymmetric points (4) come with handles that share the same angle but can have different lengths.
As it was mentioned earlier, to switch between straight and mirror points, you can use double-clicking. To get a disconnected or asymmetric point, use the controls that appear at the top of the Inspector when you draw with the pen or enable the layer editing mode. The numbers in the figure below correspond to the numbers in the description of point types.
To better understand how it all works, see the demo below.
For more information about editing vector curves, also read here.
The Pencil is a tool for drawing freehand paths with a stylus or, having some skill, with the mouse. You will find the Pencil on the same fly-out menu with the Pen tool. Alternatively, you can use
N as a shortcut.
If you are using the mouse, just hold down the left mouse button and draw the required path. Release the button when you are done.
Unlike other tools that switch to the select mode right after you create an layer, the Pencil tool allows you to create as many layers as you need. Each Pencil “stroke” adds a new layer to the Layer List. You can group them later.
The figure below shows two words Lunacy written with the Pencil tool. The top one is written in one stroke, while the bottom one is in a stroke per letter (grouped for convenience). See how they appear in the Layer List.
To exit the Pencil, press
Esc or click the Select tool. When you exit the Pencil, Lunacy selects the latest path that you’ve added.
Editing paths drawn with the Pencil
Lunacy automatically smooths the paths that you create. But you can also edit pencil-drawn paths like all other vector paths: add, delete and move points, bend segments, etc. To switch to the edit mode, select the required path and press
Enter or click the Edit Layer button at the top bar. To exit the edit mode, press
Esc or click anywhere on the canvas beyond the selected layer, see the demo below.
Finally, you can make use of such styling properties as borders, shadows, inner shadows and blurs. As for fills, you should remember that the Pencil always draws open paths, even if they appear as closed. You can try to apply fills but in many cases the result can be weird. If you need to close a path, enable the layer edit mode and click the Close path button which will appear in the Inspector.
The Shape tools allow you to quickly add pre-made shapes that include:
- Rounded rectangles
To add a shape, select the required shape on the toolbar and then drag and click on the canvas where you want it.
For details about working with shapes, click here.
The Icon tool serves to simplify your work with icons and keeps the items that you’ve recently used at hand. A click over the icon tool on the toolbar opens the Icons library where you can select the required icon.
Alternatively, to start using the tool, press
X. When enabled, the tool appears with the latest icon that you’ve used. Press
X again to switch to the next recent icon or
Shift + X to return to the previous one.
For your convenience, when you select an icon on the canvas, Lunacy displays the suggestions panel with your recent icons. To replace the selected icon with an icon from the suggestions panel, just click the required icon. The maximum number of displayed recent icons is 16.
Note: The color selected in the Icons library affects the color of icons in the suggestion panel.
Creating views of user profiles is one of the most common tasks when designing user interfaces. Combined with Lunacy’s text snippets the avatar tool becomes a real time saver.
To add an avatar to your design:
- Click the avatar tool.
- Click or click and drag to place the avatar to where you want it.
Lunacy remembers the size of the latest avatar you add (at the moment you release the tool). The next time you invoke the tool it will appear with an avatar of that very size.
The default collection of avatars installed with the app includes five images. You can use them even when your computer has no internet connection. When you’re online, you have access to the full collection of avatars.
Also, thanks to integration with the generated.photos project, you can select between the photos of real-life models (default) and photos of people generated by AI. In the latter case, you can choose the desired gender, age, ethnicity, and hair color of a model. These options appear in the Inspector. When you’re done, click Generate avatar and enjoy the magic!
Note: You need an internet connection to be able to use generated photos.
To change the image of an avatar, select the avatar and click the refresh button at the top-left corner of the avatar or press
Also, you can refresh multiple avatars at a time. For this, select several avatars and press
Shift+R or click Generate avatar in the Inspector.
Although avatars appear as circles when you add them to the canvas, in fact they are rounded rectangles. So, you can play with the value of the corner radius, if you wish.
Moreover, you can create avatars from any shapes. For this, select a shape, then enable the Avatar tool and click Generate avatar in the Inspector (see the demo below).
Adjusting background in avatars with generated photos
You can change the background in avatars based on generated photos. The procedure is as follows:
- Select an avatar.
- In the Avatar section of the Inspector, switch to Generated photos.
- Enable the Transparent toggle.
- Set the rest of the options as needed.
- Click Generate avatar. A new avatar with a transparent background appears on the canvas.
- In the Fills section of the Inspector, click
+. This will add a new fill layer above the image.
- Drag the new layer below the image layer.
- Enable the color picker and set the required background color (see the demo below).
Lunacy features a set of tools that allows you to quickly add basic GUI controls that include:
- Drop-down lists
- Text fields
- Radio buttons and
To edit the appearance of a control, use the component editor.
The component tool allows you to quickly create mockups of interfaces by adding placeholder components and then replacing them with required GUI elements.
- To draw a placeholder component just select the Component tool and drag over the required area. Placeholder components appear as pink rectangles with the question mark.
- To replace a placeholder component, select it and use the suggestions panel that will appear.
- You can also use use components from the Components page. For this, enable the tool, then go to the Components page and click the required component. The same applies to components from UI kits.
- When the Component tool is enabled, you can press the
Shift+Shotkeys to switch between the components that you’ve used earlier and quickly add them onto the canvas.
- If you want your custom components to appear on the suggestions panel, you should properly tag them in the Inspector. For this, click in the Component section of the Inspector and select a proper category.
You can use the Comment tool to keep your notes and to-do lists, as well as to collect feedback from teammates and customers. Currently comments are available only within documents, but there are plans to extend this feature and make it even more powerful.
- Create, edit and delete comments
- Reply to comments
- Mark comments as resolved
- Filter comments by their status
To view and manage comments available in a document, click the Comment tool or press
C. This enables the comment mode:
- The comments available on the current page show up on the canvas.
- The Inspector gets replaced with the Comments panel. It shows all the comments available in the document. There you can filter comments by their status (unresolved/all). To quickly jump to a comment, click it in the Comments panel.
To add a comment to a document:
- Click the Comment tool or press
- Click over the place on the canvas where you want to put it.
- In the displayed dialog box, type your text.
- Click Post or press
Tip: To write multiline comments, use
Shift + Enter.
To change the location of a comment on the canvas, just drag it to a new place.
To reply to a comment, add your text below the comment and click Post.
To edit/delete a comment or a reply, click the three dots next to it and select the respective command (see the figure above).
To mark a comment as resolved, click in the upper-right corner of the comment dialog box.
Use the Hotspot tool to create hotspot zones when designing prototypes. To add a hotspot:
- Enable the tool by selecting it on the toolbar or simply press
- Click and drag over the area you want to have a hotspot.
The demo below shows the procedure of creating a hotspot and setting a target frame.
To hide/show hotspots and prototyping links on the canvas, use the Show prototyping button on the top bar.
For more information about prototyping in Lunacy, click here.
The Slice tool allows you to select a specific area on your design and export it to a file.
To make use of the Slice tool:
- Enable the tool by selecting it on the toolbar or simply press
- Click and drag over the area you want to export. The Export assets panel appears in the Inspector.
- Define the required export settings.
- Click Export selected.
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
For more information about export in Lunacy, click here.
Working with colors is an essential part of a designer’s job. The smart eyedropper tool is designed to make this work easy and effective.
To use the eyedropper tool:
- Select a layer to which you are going to apply a color. If you don’t select any layer, the eyedropper applies the color to the workspace.
Click the eyedropper icon on the toolbar or on the color picker panel, or just press
I. The cursor turns into the eyedropper. Also, the Colors panel appears on the left. It features four pallets:
- Recent colors
- Document colors
- Flat colors
- Material colors
- Hover the eyedropper over the color that you want to sample anywhere on the screen and click to apply it.
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
Depending on the styling properties of a layer, the eyedropper applies colors in the following order:
- Inner shadow
So, if a layer has a fill and a border, the eyedropper updates the fill. If a layer has no fill, but has a border and a shadow, the eyedropper changes the border color and so on. If a layer has several fills (or borders/shadows/inner shadows), the eyedropper applies the color to the one which sits at the top of the property list in the Inspector.
Similar rules apply to text layers where text color has top priority.