Tools

Learn about tools and controls on the Lunacy toolbar

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 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 Zoom tool. Serves for zooming in the selected object or canvas area. Z
Eyedropper tool Eyedropper tool. Serves for sampling colors. I
Text tool Text tool. Serves for adding text layers. T
Shape tool 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 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. N
Image tool Image tool. Serves for adding images to your designs. Shares the same fly-out menu with the Avatar and Slice tools. M
Avatar tool 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 Slice tool. Serves for quick export of selected areas. Shares the same fly-out menu with the Image and Avatar tools. E
Artboard tool Artboard tool. Serves for adding artboards onto the canvas. Shares the same fly-out menu with the Hotspot tool. A
Hotspot tool Hotspot tool. Serves for adding hotspots when working on prototypes. Shares the same fly-out menu with the Artboard tool. H
Slice tool Icon tool. Keeps the icons that you've recently use 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 Shortcuts button. Opens a panel with the full list of Lunacy shortcuts. Shift+F1
Hide sidebar button 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.

Using the eyedropper

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.

Applying colors

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.

Shape tool

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

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) 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

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.

Pencil tool

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 most common image formats like PNG, JPG, JPEG, etc.

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 or click and drag to get the required size of the image as shown in the demo below.

Adding an 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.

Using the avatar tool

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).

Adding an artboard

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

To remove a slice from the canvas, select it and pressDel.

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 arrows on the canvas, use the Show prototyping button on the top bar.

Adding a slice

For more information about prototyping in Lunacy, click here.

Icon tool

The Icon tool serves to simplify your work with icons and keeps the items that you’ve recently use at hand. A click over the icon tool on the toolbar opens the Icons library where you can select the required icon. To invoke a panel with recent icons, just hover the cursor over the icon tool. The maximum number of recent icons is 16.

A view of the icon tool

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.

To add an icon from the panel of recent icons to the canvas, drag the icon onto the canvas.

Note: The color selected in the Icons library affects the color of icons in the icon tool.

Suggest Edits