lunacy-docs/docs/man/help.md

>>>>> gd2md-html alert: ERRORs: 0; WARNINGs: 1; ALERTS: 56.

• See top comment block for details on ERRORs and WARNINGs.
• In the converted Markdown or HTML, search for inline alerts that start with >>>>> gd2md-html alert: for specific instances that need correction.

Links to alert messages:

alert1 alert2 alert3 alert4 alert5 alert6 alert7 alert8 alert9 alert10 alert11 alert12 alert13 alert14 alert15 alert16 alert17 alert18 alert19 alert20 alert21 alert22 alert23 alert24 alert25 alert26 alert27 alert28 alert29 alert30 alert31 alert32 alert33 alert34 alert35 alert36 alert37 alert38 alert39 alert40 alert41 alert42 alert43 alert44 alert45 alert46 alert47 alert48 alert49 alert50 alert51 alert52 alert53 alert54 alert55 alert56

>>>>> PLEASE check and correct alert issues and delete this message and the inline alerts.

---

Lunacy

Welcome to the user manual for Lunacy. This documentation covers everything you need to know about the app.

What Can You Do Using Lunacy

Lunacy is a native Windows app that works offline and supports .sketch files.

Sketch Compatibility

Lunacy is compatible with .sketch format. In particular, you can:

Read .sketch Files of any Version

This is important, as Sketch completely changed the format in version 43, and kept migrating it to the new format until the version 50.

• If you've downloaded an old UI kit from Sketchappsources, Lunacy will read it.
• If you have a file sent by your team mate that uses the last version of Sketch, Lunacy will read it.
• If Sketch changes the format again, we'll update Lunacy. We are members of the so called "Friends of Sketch" group and get the early builds, so we fix it before the release
• We also work on reading the slightly broken files generated by PSD to Sketch Converter (they have non-unique IDs).

Save .sketch Files

We save the files in .sketch format. We preserve the original structure: naming, groups, and IDs.

As of the version 3.7,** we don't fully support the symbols**. We save the symbols as the generic groups. Your designs will look the same, but updating a symbol won't affect its instances.

Tools, Objects, and Properties

We cover all the data structures of Sketch, including masks, gradients, rounded corners, curves, sophisticated text formatting, and many more.

Create New Design

Using Lunacy, it's possible to create new designs. It's a perfect tool for prototyping. You can add simple shape elements to your layout (such as draw oval, rectangle, line, or add a bitmap), draw, align, and join objects.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of0.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Modify Existing Design

Lunacy is a full-fledged editor which allows you to modify existing design.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of1.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

View .sketch Files

Lunacy allows you to open .sketch file of all versions and any size. You can view information about each of its layer or object by simply clicking them.

Generate Source Code

Lunacy allows you to see CSS and XAML code of elements.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of2.jpg). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Export Assets

You can export any assets from you document in PNG, SVG, XAML.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of3.jpg). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Exclusive feature: upload directly to a CDN. Lunacy will generate a CDN link for you without any extra effort from your side.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of4.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Getting Started: The Interface

Lunacy's interface is minimal. It contains only essential controls so you won't spend much time learning how to interact with it.

The interface is built from the following blocks:

• The toolbar along the top which contains high-level tools and actions.
• The objects is the pane on your left which contains all the artboards of your document.
• The Inspector on the right which lets you see and adjust the properties of the selected object or layer.
• The canvas in the middle is a place where you will see your designs.

There are no floating panels. That way you always have a completely unobscured view of your сanvas.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of5.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Global Parts

Artboard and Objects

The Artboard and Objects is the pane on your left. On the top level, there are the** artboards**. Artboard is a fixed frame inside the canvas. Usually, designers create a new artboard for each new web page, mobile screen, banner ad, or any other artwork. The use of artboards is optional; you can draw directly on the canvas.

Inside the artboards, there are objects. Here you can see each object's attributes, such as whether it's hidden or locked, as well as reorganize layers by renaming and re-ordering them.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of6.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Any object or group of objects can be hidden from the canvas by clicking on the eye icon

>>>>> gd2md-html alert: inline image link here (to images/Copy-of7.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

that appears on the screen when you click on the object. Alternatively, it's possible to hide element using keyboard shortcut Ctrl + H.

A padlock icon

>>>>> gd2md-html alert: inline image link here (to images/Copy-of8.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

is used to lock the layer on canvas, meaning it cannot be selected or moved without being unlocked first. Alternatively, it's possible to lock an object using keyboard shortcut Ctrl + L

Objects

The toolbar contains elements you need to create your design. Those include:

Object	Keyboard shortcut
Text	T
Rectangle	R
Oval	O
Line	L
Bitmap	P
Avatar	Ctrl + P
Artboard	A

Some of these shapes have extra options, such as the ability to add stokes or round corners.

Rulers and Grids

Rulers (keyboard shortcut Ctrl + R) and grids (keyboard shortcut Ctrl + ')will help you position objects exactly where you want them. Grid allows you to align objects to a particular layout.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of9.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Note: Rulers and grids are not part of your design, and won't appear on exported designs.

Lunacy has support for a regular (square) grid. Users have a few options to choose from - a range of grids starts from a 4x4 grid to 64x64.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of10.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Artboard

Artboard is where you will see your designs. Lunacy provides a lot of predefined sizes for the artboard starting from the size of iWatch to the Full HD layouts. You can modify the size of an artboard afterwards..

>>>>> gd2md-html alert: inline image link here (to images/Copy-of11.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

It's possible to add a few artboards inside the canvas. For example, when designing a landing page, many designers create an Artboard for desktop and mobile version of a landing page.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of12.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Inspector

The Inspector on the right lets you adjust the properties of the selected object.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of13.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Color Picker

Choosing, saving colors

>>>>> gd2md-html alert: inline image link here (to images/Copy-of14.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Gradients

Create and edit gradients.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of15.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Following types of gradient are supported:

• Linear gradient

>>>>> gd2md-html alert: inline image link here (to images/Copy-of16.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

• Radial gradient

>>>>> gd2md-html alert: inline image link here (to images/Copy-of17.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Effects

Effects need more explanation. Combining effects. Blending modes.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of18.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Inspector Hacks

Inspector supports formulas. Type anything from 2+2 to complex algebra.

You can drag the values up and down; they will increase or decrease.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of19.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Rounded Corner Hack

You can specify the radius for each corners separately. To do so, type 4 values divided with a space.

This is especially handy for tabs.

Zoom

The Zoom lets you see more or less of your document depending on the zoom level. You can change zoom factor from 25% to 800%.

In practice, designers use the shortcuts Ctrl + '+' and Ctrl + '-'. Ctrl + '0' resets the zoom level to 1:1.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of20.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Zoom to Area

…. (coming next release)

Object Basics

Selecting Objects

Selecting objects in Lunacy is easy: you just click an object on the canvas. Once the object is selected, you should see eight little handles; one in each corner and one in the center of each edge.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of21.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Alternatively, you can use the Layer List to select an object. Clicking an object's name in the list will select it on the canvas.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of22.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

You can select multiple objects by holding down the Shift key on the keyboard and click on another object.

Selecting Group vs Object

If you click an object within a group, Lunacy selects the whole group. Usually, it's handy: you can move around the whole components.

Sometimes you need to choose an object though. To do so, hold Ctrl when choosing the object.

Moving With Keyboard

• Click the arrow keys to move by one pixel
• Shift+Arrow moves by 10 pixels

This is handy when you either

• need precision
• Or need to move object just a little bit (we, designers, spend 50% of our time doing small adjustments)

Moving Horizontally and Vertically

Hold Shift while moving an object. Lunacy will lock one of the axis and move object either horizontally or vertically.

Duplicating Objects

Hold Alt and move the object. Lunacy will create a copy.

Another way to create a copy is pressing Ctrl+D.

Grouping Objects

Grouping objects is a way to organize a document. After creating a group, you can move, scale, and duplicate the group as a single object.

Designers use grouping a lot. One can say, designer turn the documents into a series of the nested groups.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of23.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Adding Objects

The most common type of objects in your document are shapes. The easiest way to add a shape is to pick one of the standard shapes from the toolbar. There is a wide variety of default shapes provided with Lunacy such as ovals, rectangles, lines and more.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of24.png). Store image on your image server and adjust path/filename if necessary. (Back to top)(Next alert) >>>>>

Select object Text

Esc T

Tips for Object Tools

Drawing a Square

If you need a square, choose the Rectangle tool and hold shift while drawing.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of25.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Drawing a Circle

>>>>> gd2md-html alert: inline image link here (to images/Copy-of26.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Drawing Straight Lines

>>>>> gd2md-html alert: inline image link here (to images/Copy-of27.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Avatar Tool

Designing user interfaces, one of the common tasks is creating avatars. This time consuming process is easy with Lunacy. It has a tool for that. The avatar tool lets you create the one in one click.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of28.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Resizing Objects

Each object in Lunacy has eight handles that become visible when you select objects. Those handles don't just indicate selection; you can also use them to resize a layer. Grab any of the handles and drag them to resize an object.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of29.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Rotating Objects

You can rotate any object using rotate clock.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of30.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

As rotation is a value measured in degrees, it can be edited via Lunacy's inspector.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of31.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Z-axis Position Change

Each object in artboard can be located on Z-axis. It's possible to

• bring object forward (keyboard shortcut Ctrl + J)
• bring it to front (keyboard shortcut Shift+Ctrl+J)
• send backward (keyboard shortcut Ctrl + [)** **
• or send an object to back (keyboard shortcut Shift + Ctrl + [)

>>>>> gd2md-html alert: inline image link here (to images/Copy-of32.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Align, Group, and Distribute Objects

In a bar at the very top of the Canvas are buttons for aligning and distributing objects. These buttons will become active when you have more than one object selected.

• Flip horizontally

>>>>> gd2md-html alert: inline image link here (to images/Copy-of33.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

(keyboard shortcut Ctrl + ←, Ctrl + →)

• Flip vertically

>>>>> gd2md-html alert: inline image link here (to images/Copy-of34.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

(keyboard shortcut Ctrl +↓, Ctrl +↑)

• Align

>>>>> gd2md-html alert: inline image link here (to images/Copy-of35.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

which includes (align left, align top, align vertically, align horizontally, align right, align bottom, distribute horizontally, distribute vertically)

• Group

>>>>> gd2md-html alert: inline image link here (to images/Copy-of36.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

(keyboard shortcut Ctrl + G)

Masking

Masks

>>>>> gd2md-html alert: inline image link here (to images/Copy-of37.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

(keyboard shortcut **Ctrl + M) **in Lunacy are used to selectively show parts of objects. For example, masking two overlapping ovals will give you one oval image.

Before masking:

>>>>> gd2md-html alert: inline image link here (to images/Copy-of38.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

After masking

>>>>> gd2md-html alert: inline image link here (to images/Copy-of39.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Edit Shape

For some objects like rectangle, it's possible to edit the shape. To activate edit shape mode, you need to double click on the object. This option allows you to modify properties like corner radius for a rectangle.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of40.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Resizing Options

Using Lunacy it's possible to view properties of objects. You need to select an object to see it's properties in the right panel.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of41.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Notice the Resizing option. This is something that you'll only see if you have an object selected inside a group or Artboard, and it allows you to determine how that object should behave when the group or Artboard it's in is resized. For example, when Fix Height is enabled, the height doesn't grow if you resize the parent vertically.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of42.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Styling

You can change styling options for each object of your document. All styling properties for objects are available in Inspector. If you decided to remove styling, you need to select an object and click '-' button.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of43.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Shadows

When Shadow is enabled for the object, it will cast outside of the shape. It's possible to define shadow's X and Y position, blur radius, spread, and color.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of44.gif). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Stroke

All objects except text layers can contain strokes. These can all have various thicknesses, colors, and blend modes.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of45.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Border position can be center, inside or outside.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of46.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Applying 10px stroke for rectangle object: original object, center stroke, inside stroke, outside stroke

>>>>> gd2md-html alert: inline image link here (to images/Copy-of47.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Gaussian Blur

Gaussian blur is a blur type that will accurately blur in all directions.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of48.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Text

You can add text by choosing the Text tool from the Shapes and Objects toolbar (or press T). The pointer changes to the Text Input tool icon and then you can click anywhere in the Canvas to insert your text layer at that point. When you click on a canvas, a new text layer will be inserted with "Type something" placeholder, ready to replace.

When you have a text layer selected you will notice that the Inspector has changed to show you all the properties that apply to text. Underneath the standard object properties there's the area for text style options which includes:

• Font family
• Font size
• Font weight
• Font color
• Line spacing
• Alignment options

>>>>> gd2md-html alert: inline image link here (to images/Copy-of49.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Bitmaps

Bitmaps, or images are one of the object types that are supported in Lunacy. Bitmaps, (or raster) images are made up of pixels; those images can take many forms, such as screenshots or photographs. Lunacy supports the most common image formats such as PNG, JPG, JPEG.

Margins and Distances

Lunacy is also show margins and distances between elements.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of50.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Code Preview

Lunacy allows preview CSS and XAML code of all objects in a document. This feature is ideal for web designers. If you click on </> item in the top tab bar and select any element in the canvas, you'll see CSS/XAML code for this object in the right panel. It's possible to copy code properties in one click.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of51.jpg). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Exporting Individual Assets

When designing icons, mobile app layouts, web pages, or anything else in Lunacy, you'll likely want to export parts of your creation or even all of it! With Lunacy, it's simple to mark what you want to export, and how you want it exported.

Simply click on

>>>>> gd2md-html alert: inline image link here (to images/Copy-of52.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

item in the top toolbar and select the object (or objects) that you want to export.

Export Assets in PNG or SVG

You can export design objects to PNG or SVG format.

For PNG format you can choose a size or scale in which an element will export. The default size is '1x', which will export your layer at the actual size it was created. If you're designing for mobile, you may want to export something at double or even triple the size you created it, in this case, '2x' and '3x'.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of53.jpg). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Export to CDN

Lunacy allows you to publish assets directly to the web. Your image will be hosted on the fast servers in the multiple regions of the world, assuring the quick delivery.

Instead of saving an image to a disk, you can get its URL with a single click, ready to insert into your HTML. Lunacy uploads the file to Icons8 CDN servers.

The service is free thanks to the generous sponsorship of KeyCDN.

The export works in one-click. Simply select Export option and click 'Get CDN Links.' That's all!

>>>>> gd2md-html alert: inline image link here (to images/Copy-of54.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Unique Features

Solving a Problem of Missing Fonts

When working with Sketch files downloaded from the internet, or received from a colleague, it may contain fonts that are missing on your system.

Automatic Downloading of the Missing Google Fonts

Lunacy has been designed to deal with this case, it downloads fonts automatically. If you open a file with missing fonts, Lunacy will check Google Fonts and download those that are missing. The process is so smooth you will never even notice it.

Using Google Fonts Without Font Installation

All the Google Fonts are already in the list. When you choose any of them, Lunacy downloads it from the Google service. Smooth!

Automatic Replacing of the Missing Fonts

In Lunacy, you can replace the font once while other editors require to do it for every instance.

Publishing Design

Lunacy integrates with Sketch the Ripper—a fast and rustic alternative to the advanced (and expensive!) tools like Zeplin, Avocode, or Simply. It allows you to smooth design handoff.

Imagine you are a designer who finished working on a piece. Instead of sending a .sketch file to your teammates, you share your designs with a single click and get a link to all the assets ripped off (check this example). It sets a shortcut from design to development without the need of additional viewers.

>>>>> gd2md-html alert: inline image link here (to images/Copy-of55.png). Store image on your image server and adjust path/filename if necessary.
(Back to top)(Next alert)
>>>>>

Shortcuts

You can use keyboard shortcuts in Lunacy to help speed up your design process.

We keep these shortcuts consistent with both Sketch for Mac and Photoshop. If you are used to the certain combinations, probably they will work here.

Full list of shortcuts is available at http://docs.icons8.com/man/hot-keys. We update this list as we add the new features.

Frequently Asked Questions

**Q: Will Lunacy work on Linux? **

A: It's quite an option, though requires additional development. If you're willing to contribute, please check this thread.

Q: Do I need internet connection to use Lunacy?

A: No, Lunacy doesn't need a connection to the internet.

Q: How about being Open Source?

A:

Short answer: not at the moment, not all of it.

Long answer: Certainly, that would speed up the development.

On the other hand, it will slow it down too. Sometimes, a small team can advance more than a big community, especially in the beginning. We may reconsider it in the future.

If you are willing to contribute, you may want to create the interface for Linux. Check this thread.

Q: How much will you plan to charge for Lunacy?

A: Nothing. Lunacy is completely free (no hidden charges, no ads, no locked features).

**Q: How would I know when to update Lunacy? Once there are updates, will I have to reinstall Lunacy, or do they install automatically?
**A: Windows Store version updates silently. If not, check if you have the automatic updates on. We recommend this option.
If you installed Lunacy with a downloadable installer, it will notify you about the update with an alert in the window title.

In any case, you can check our release notes.

Contacting Support

• Community Support — our forum. The whole development team is helping you too.
• Feature Requests — a board similar to uservoice. Vote for features and propose yours. One feature per post, please.
• Saying hello — our Lunacy page has the comments in the bottom. If you have a review of our work or just want to say hello, you're welcome!
• Lunacy in the Windows Store — we depend your honest feedback. Please vote and leave a review so more people will know about Lunacy. Thank you 🙏🏽