--- # Page settings layout: default keywords: comments: false # Hero section title: Tools description: Learn about tools and controls on the Lunacy toolbar icon: 'maintenance' # Micro navigation micro_nav: false # Page navigation page_nav: next: content: Objects url: '/objects' prev: content: Interface url: '/interface' --- ## Introduction 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 objects and object groups.	`V` or `S` or just press `Esc` to exit the current tool.
	Zoom tool. Serves for zooming in the selected object or canvas area.	`Z`
	Eyedropper tool. Serves for sampling colors.	`I`
	Text tool. Serves for adding text layers.	`T`
	Shape tool. Serves for adding pre-made shapes. The icon in the toolbar varies depending on the shape that you added last. Only the most frequently used shapes have shortcuts.	`R` - rectangle `U` - rounded rectangle `O` - ellipse `L` - line
	Pen tool. Serves for adding custom vector shapes. Shares the same fly-out menu with the Pencil tool.	`P`
	Pencil tool. Serves for adding freehand shapes. Shares the same fly-out menu with the Pen tool.	`N`
	Image tool. Serves for adding images to your designs. Shares the same fly-out menu with the Avatar and Slice tools.	`M`
	Avatar tool. Serves for quickly adding avatars to your designs. Shares the same fly-out menu with the Image and Slice tools.	`Q`
	Slice tool. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools.	`E`
	Artboard tool. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool.	`A`
	Hotspot tool. Serves for adding hotspots when working on prototypes. Shares the same fly-out menu with the Artboard tool.	`H`
	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
	Symbol tool. Allows you to quickly create mockups of interfaces by adding placeholder symbols and then replacing them with required GUI elements.	`C`
	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 tool icon.	`X`
	Shortcuts button. Opens a panel with the full list of Lunacy shortcuts.	`Shift+F1`
	Hide/show sidebar button. Use this button to hide/show the left panel.	`-`

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**). ## Select tool 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 objects and object groups. In general, to select an object, just click over it. As you do it, a selection frame with handles appears around the object, and the object's name gets highlighted in the **Objects** panel. To select multiple objects, hold down the `Shift` key and click the objects you want to select. Alternatively, you can use the click-and-drag method for selecting objects. The demo below shows both methods of selecting objects. To move the selected object(-s): 1. Point the cursor over the object or an object within a group (not over the empty space within the selection frame). 2. Move the selection to where you want it. To resize the selected object(-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 object you resize.

### Using the Select tool with grouped objects When you click or drag over a group of objects, you select the group. To select a certain object within a group: * Hold down the `Ctrl` key and click over the required object. OR * Click to select the group, then double-click to select the object. After you select an object within a group, you can switch to other objects of that group by simply clicking them.

>**Tip:** Alternatively, you can select objects through the **Objects** panel. In some cases it may be more convenient. For instance, when handling fully overlapping objects. For details about working with objects, click here. ## Zoom tool The Zoom tool allows you to zoom in the selected object or canvas area. To use the tool: 1. Select the Zoom tool on the tool bar or press `Z`. 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 `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. ## Eyedropper tool 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: 1. Select an object to which you are going to apply a color. If you don't select any object, Lunacy applies the color to the workspace. 2. 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 3. Hover the eyedropper over the color that you want to sample anywhere on the screen and click to apply it. {:.is-big} ![Using the eyedropper](public/eye-general.png) 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 Lunacy applies color to objects Depending on the styling properties of an object, Lunacy applies colors in the following order: 1. Fill 2. Border 3. Shadow 4. Inner shadow So, if an object has a fill and a border, Lunacy updates the fill. If an object has no fill, but has a border and a shadow, Lunacy changes the border color and so on. If an object has several fills/borders/shadows/inner shadows, Lunacy applies the color to the one which sits at the top of the property list in the Inspector. Similar rules apply to text objects where text color has top priority. To demonstrate all this, in the figure below we applied the colors of the rectangles to the ellipses with different sets of styling properties. {:.is-big} ![Applying colors](public/eye-apply.png) ## Text tool The Text tool serves for adding text layers. For details about working with text in Lunacy, click here. ## Shape tool The Shape tool allows you to quickly add pre-made shapes that include: * Rectangles * Rounded rectangles * Ovals * Lines * Stars * Polygons * Arrows To add a shape, select the required shape on the fly-out menu and then drag and click on the canvas where you want it. {:.is-big} ![Shape tool](public/objects_adding_primitives.gif) For details about working with shapes, click here. ## Pen tool 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*. ![Open path vs Shape](public/tools-openclosed.png) Path segments can be straight lines or curves. To build a shape that consists of straight lines: 1. Click on the canvas to add the first point, then click where you want to have the second point. 2. Go on clicking until the shape that you want is ready and close the path by clicking over the point from where you started or clicking the **Close path** button in the Inspector. 3. Press `Esc` to exit the tool.

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. For this: 1. Select the shape. 2. Click the **Edit object** button (![Edit object button](public/tools-editobjectbtn.png)) on the context tool bar or press `Enter`, to enable the edit mode. 3. Make the required changes. 4. To exit the edit mode, press `Esc` or click the canvas anywhere beyond the shape. In the demo below we added some curves to a heart-shaped object 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.

### 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 object editing mode. The numbers in the figure below correspond to the numbers in the description of point types. ![Point type controls](public/tools-curvebuttons.png) To better understand how it all works, see the demo below.

For more information about editing vector objects, also read here. ## Pencil tool 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 object, the Pencil tool allows you to create as many objects as you need. Each Pencil "stroke" adds a new object to the **Objects** panel. 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 **Objects** panel. {:.is-big} ![Pencil tool](public/pencil-view2.png) 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 object** button at the top bar. To exit the edit mode, press `Esc` or click anywhere on the canvas beyond the selected object, 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 object edit mode and click the **Close path** button which will appear in the Inspector. ## Image tool 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: 1. Click the tool icon on the toolbar. The **Open** dialog box appears. 2. In the **Open** dialog box, browse to the required file. 3. Select the file. You can select multiple files at a time, if you want. 4. 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. ![Adding an image](public/objects_bitmaps.gif) Also, you can: * Drag images onto the canvas from your desktop or the Explorer. * Copy image files from your desktop or the Explorer and then paste them onto the canvas. * Import images from the internet. To add an image from the internet: 1. In your web browser, right-click over the image. The context menu appears. 2. On the displayed menu, click **Copy image address** or similar command. 3. Switch to Lunacy and click the Image tool. The **Open** dialog box appears. 4. Paste the image URL into the **File name** field. 5. Click **Open**. 6. 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. ## Avatar tool 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. {:.is-big} ![Using the avatar tool](public/objects_avatars.png) To add an avatar to your design: 1. Click the avatar tool. 2. 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.

To change the image of an avatar, click the refresh button at the top left corner of the avatar (see the demo below). 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. >**Tip:** 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.

## Artboard tool Artboards are a way to divide the canvas into separate areas with different content. Artboards are optional but they come in handy when you're designing for a certain screen size or device. To add an artboard: 1. Select the artboard tool on the toolbar or press `A`. 2. Click and drag to create a custom size artboard or select an option from the artboard selection panel which will appear on the right (see the figure below). {:.is-big} ![Adding an artboard](public/tool-addatrboard.png) **Tip:** If there are already some objects on the canvas and you decide to put them on an artboard, just drag the artboard tool over these objects. For details, about using artboards read here. ## Slice tool 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: 1. Enable the tool by selecting it on the toolbar or simply press `E`. 2. Click and drag over the area you want to export. The **Export assets** panel appears in the Inspector. 3. Define the required export settings. 4. Click **Export selected**. To hide/show slices on the canvas, use the **Show slices** button on the top bar. ![Adding a slice](public/tool-slicebtn.png) To remove a slice from the canvas, select it and press`Del`. For more information about export in Lunacy, click here. ## Hotspot tool Use the Hotspot tool to create hotspot zones when designing prototypes. To add a hotspot: 1. Enable the tool by selecting it on the toolbar or simply press `H`. 2. 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 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. ## GUI tool Lunacy features a set of tools that allows you to quickly add basic GUI controls that include: * Drop-down lists * Buttons * Text fields * Checkboxes * Radio buttons and * Toggles ![GUI tools](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](public/rn5_9-guitools2.png) 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](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](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](public/rn5_9-symbtool5.png) in the **Symbol** section of the Inspector and select a proper category. ![Tagging symbols](public/rn5_9-symbtool4.png) ## Icon tool The Icon tool serves to simplify your work with icons and keeps the items that you've recently used at hand. A click over the icon tool on the toolbar opens the Icons library where you can select the required icon. ![A view of the icon tool](public/tool-icontoolview1.png) 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. ![A view of the icon tool](public/tool-icontoolsugg.png) **Note**: The color selected in the **Icons** library affects the color of icons in the suggestion panel.