From f293bb2e4a06fd3e8f128e6ad52766f92c2ee5cd Mon Sep 17 00:00:00 2001 From: Ivan Braun Date: Sun, 1 Jul 2018 23:43:42 +0200 Subject: [PATCH] Update/Create help.md --- docs/man/help.md | 561 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 561 insertions(+) create mode 100644 docs/man/help.md diff --git a/docs/man/help.md b/docs/man/help.md new file mode 100644 index 0000000..2529708 --- /dev/null +++ b/docs/man/help.md @@ -0,0 +1,561 @@ +--- +title: Lunacy Help +layout: post +author: Ivan Braun +permalink: /help/ +source-id: 1WxxDHCHaPzpN_cY3gQbYEBrlYuWpKKT7FqJSweaNIAs +published: true +--- +Lunacy Help + +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](https://www.sketchappsources.com/), 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](https://avocode.com/convert-psd-to-sketch/?lng=en) 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_0.png) + +### Modify Existing Design + +Lunacy is a full-fledged editor which allows you to modify existing design. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_1.png) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_2.jpg) + +### Export Assets + +You can export any assets from you document in PNG, SVG, XAML. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_3.jpg) + +Exclusive feature: upload directly to a CDN. Lunacy will generate a CDN link for you without any extra effort from your side. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_4.png) + +# 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_5.png) + +## 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_6.png) + +Any object or group of objects can be hidden from the canvas by clicking on the eye icon ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_7.png)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 ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_8.png)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: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjectKeyboard shortcut
TextT
Rectangle R
OvalO
LineL
BitmapP
AvatarCtrl + P
ArtboardA
+ + +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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_9.png) + +**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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_10.png) + +### 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.. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_11.png) + +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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_12.png) + +### Inspector + +The Inspector on the right lets you adjust the properties of the selected object. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_13.png) + +#### Color Picker + +Choosing, saving colors + +#### ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_14.png) + +#### Gradients + +Create and edit gradients. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_15.png) + +Following types of gradient are supported: + +* Linear gradient + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_16.png) + +* Radial gradient + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_17.png) + +#### Effects + +Effects need more explanation. Combining effects. Blending modes. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_18.png) + +#### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_19.gif) + +#### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_20.png) + +#### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_21.png) + +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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_22.png) + +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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_23.png) + +### 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. + + + + + + + +
+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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_24.gif) + +Drawing a Circle + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_25.gif) + +#### Drawing Straight Lines + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_26.gif) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_27.png) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_28.gif) + +### Rotating Objects + +You can rotate any object using rotate clock. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_29.gif) + +As rotation is a value measured in degrees, it can be edited via Lunacy's inspector. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_30.png) + +### 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 + [**) + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_31.png) + +### 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 ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_32.png) (keyboard shortcut **Ctrl + ←, Ctrl + →**) + +* Flip vertically![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_33.png) (keyboard shortcut **Ctrl +↓, Ctrl +↑**) + +* Align![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_34.png) which includes (align left, align top, align vertically, align horizontally, align right, align bottom, distribute horizontally, distribute vertically) + +* Group ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_35.png) (keyboard shortcut **Ctrl + G)** + +### Masking + +Masks ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_36.png)(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: + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_37.png) + +After masking + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_38.png) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_39.png) + +### 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. + +## ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_40.png) + +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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_41.png) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_42.png) + +#### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_43.gif) + +#### Stroke + +All objects except text layers can contain strokes. These can all have various thicknesses, colors, and blend modes. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_44.png) + +Border position can be center, inside or outside. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_45.png) + +Applying 10px stroke for rectangle object: original object, center stroke, inside stroke, outside stroke + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_46.png) + +#### Gaussian Blur + +Gaussian blur is a blur type that will accurately blur in all directions. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_47.png) + +### 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 + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_48.png) + +### 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_49.png) + +## 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. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_50.jpg) + +## 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 ![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_51.png) 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’. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_52.jpg) + +### 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](https://www.keycdn.com/). + +The export works in one-click. Simply select Export option and click 'Get CDN Links.' That’s all! + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_53.png) + +# 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](http://sketch.the.ripper.graphics/)—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](http://sketch.the.ripper.graphics/g3tkgj/music-final)). It sets a shortcut from design to development without the need of additional viewers. + +![image alt text]({{ site.url }}/public/mAz4bmww76HilrhUizdqvw_img_54.png) + +# 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](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](https://lunatics.icons8.com/ideas/1/version-for-linux). + +**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](https://lunatics.icons8.com/ideas/1/version-for-linux). + +**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](https://support.microsoft.com/en-gb/help/15081/windows-turn-on-automatic-app-updates) 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](https://docs.icons8.com/release-notes/). + +# Contacting Support + +* **[Community Suppor**t](https://community.icons8.com/) — our forum. The whole development team is helping you too. + +* **[Feature Request**s](https://lunatics.icons8.com/) — a board similar to uservoice. Vote for features and propose yours. One feature per post, please. + +* **Saying hello** — our [Lunacy page](https://icons8.com/lunacy) 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 Stor**e](https://www.microsoft.com/en-us/p/lunacy/9pnlmkkpcljj) — we depend your honest feedback. Please vote and leave a review so more people will know about Lunacy. Thank you 🙏🏽 +