diff --git a/docs/editing_shapes.md b/docs/editing_shapes.md new file mode 100644 index 0000000..f4aeda2 --- /dev/null +++ b/docs/editing_shapes.md @@ -0,0 +1,246 @@ +--- +# Page settings +layout: default +keywords: +comments: false + +# Hero section +title: Editing shapes +description: Make sure that you know everything about working with shapes in Lunacy +icon: 'pencil-tip' + +# Micro navigation +micro_nav: false + +# Page navigation +page_nav: + next: + content: Text + url: '/text' + prev: + content: Layers + url: '/layers' +--- + +**Shapes** are types of layers in Lunacy, typically created with the Shape tools. + + + +The tools include several pre-made shapes you can add by selecting the Shape icon on the toolbar — or simply by using shortcuts: + +`R` — rectangle
+`R`, `R` — rounded rectangle
+`L` — line
+`L`, `L` — arrow
+`O` — oval
+`O`, `O` — triangle
+`O`, `O`, `O` — polygon
+`O`, `O`, `O`, `O` — star + +Once you select the shape: + +- **Click** on the canvas to place it as a 100 x 100 shape (works for all shapes except for lines and arrows). +- **Click and drag** to adjust the shape’s size. + + + +Find out more about working with different types of shapes. + +You can also make shapes using the Pen and Pencil tools. Create vector paths, then close them to make a shape outline you can then edit. + + + +This section focuses on how to edit and transform the form of vector shapes using the standard layer **Edit mode**, on-canvas controls, Boolean operations, and the right panel. To learn about adding fills, borders, and effects to shapes and other layers, check out the Styling page. + +**See also:** +
+Tools
+Layers + +## Edit mode + +The most basic way to edit a shape is to use **Edit mode**: + +1. Select the shape you want to edit, and press `Enter`. You can also double-click the shape or select on the context toolbar. +2. The cursor will switch over to the **Pen** tool. You can drag the paths and vertices of the shape as you see fit, add new points and adjust their properties in the right panel. +3. Press `Enter` again or click on an empty area on the canvas to exit Edit mode. + + + +## On-canvas controls for editing shapes + +### Corner radius + +**Round the corners** for any shape (except for the triangle) by dragging the handles at the corners of the shape on the canvas. + +For **rectangles** or **rounded rectangles**, drag any of the handles at the corners to adjust their radius. To change the radius of an individual rectangle corner, hold `Alt` while dragging. + + + +For **stars** and **polygons**, drag the handle below the topmost corner of the shape. + + + +### Arc editor + +With the **Arc editor**, you can quickly create rings and semirings, design pie charts or other fancy circular elements. + +Draw an oval and use the handles in the middle of the shape to adjust its sweep and ratio. **Sweep** creates a gap in the oval, while **Ratio** changes the oval into an arc. Once you change the sweep, the **Start** handle will also appear on the shape, indicating where the arc begins. + + + +### Transforming stars and polygons + +You can change the shape of stars and polygons right on the canvas without reaching into the right panel. + +To **change the ratio** of a star, drag the handles at the inner intersection points of its sides. + + + +To **change the number of corners** in a star or polygon, drag the handle below the shape’s top right corner. + + + +
+

Note: For shapes with distinct corners created with the Pen tool, you can only adjust the corner radius. This option will only be available in the right panel, these shapes won’t have any on-canvas handles.

+
+ +## Editing shapes through the right panel + +Use these fields in the **right panel** to transform shapes: + + + +The transform options mirror the on-canvas controls: + +**Corner radius.** Rounds the corners of a shape. Available for most of pre-made shapes, except for ovals, triangles, lines, and arrows. + +**Count.** Adjusts the number of points for stars/the number of angles for polygons. + +**Ratio.** Changes the ratio of a star or oval. + +**Sweep.** Creates a gap in an oval. + +**Start.** Determines the starting point of an arc made from an oval. + + + +### Smooth corner radius + +You can create shapes with perfectly smooth corners like in iOS interfaces. + +To **switch between default round and smooth corners**, click next to the corner radius button in the right panel. + + + + +## Vector editing + +This section expands on **transforming vector shapes and paths** with **Edit mode**. + +
+

Note: Before diving in, make sure you have a good understanding of how the Pen tool works. Read about the Pen tool in the Tools page to get a hang of the structure of vector layers, paths, point and curve types.

+
+ +In general, vector editing is all about manipulations with points and paths: + + + +- To **select a point**, just click it. To select multiple points, drag over them or hold down `Shift` when clicking several points. +- To **move a point**, select and drag it. This works with multiple points selected as well. +- To **add a new point** to a path, hover the cursor over the path, then click it to place a straight point or double-click to place a mirrored point. +- **Switch between point types** in the **Edit shape** section of the right panel. +- To **bend paths**, use curved points. +- To **round the corner** above a straight point, use the corner radius field. It only becomes active when you select a straight point. +- To **delete a point or several points**, select it/them and press `Delete`. + + + +## Boolean Operations + +Use **Boolean operations** to combine shapes into more complex forms: + + + +1. Select two or more overlapping shapes. +2. On the **context toolbar**, select the Boolean operation you need. + +- **Union.** Creates a shape from the sum of the areas of the selected shapes (`Ctrl + Shift + U` / `Ctrl + Shift + U`). +- **Subtract.** The opposite of Union. Removes the overlapping area(s) from the shape layer at the bottom of the selection (`Ctrl + Shift + P` / `Ctrl + Shift + P`). +- **Intersect.** The resulting shape only includes the area where all selected shapes overlap (`Ctrl + Shift + I` / `Ctrl + Shift + I`). +- **Difference.** The opposite of Intersect. Creates a shape from the areas where the selected shapes do not overlap (`Ctrl + Shift + X` / `Ctrl + Shift + X`). + + + +When you apply a Boolean operation, the selected shapes become a Boolean group, this is how it looks in the Layer list: + + + +The icon next to the title of the shape layers indicates the type of the Boolean operation applied to the layer. Click it to open up a menu where you can select another operation or remove Boolean operations entirely. + +You can select individual shapes within the group through the Layer list or on the canvas. If necessary, you can move and resize them on the canvas to modify the resulting shape. + +
+

Tip: There is no button or shortcut to disassemble a Boolean group, but you can drag shapes out of the group in the Layer list. Read the full list of useful Lunacy tips and tricks.

+
+ +## Flatten selection + +The **Flatten selection** operation is another method of creating complex forms by combining two or more primitive shapes. It’s similar to the Boolean Union operation, the difference being that the result of flattening is a single layer that cannot be disconnected. + + + +The **Flatten selection** option appears on the **context toolbar** and is also available in the **Layer** section of the **menu bar**. + + + +## Masks + +Use **masks** to display parts of layers and hide the rest. + +To **create a mask**: + +1. Add the shape you want to use as a mask to the canvas. +2. Place it below the layers that will be masked (you can leave it on top if it's a photo). +3. Select the mask shape and the target layer(s). +4. On the **context toolbar**, click the **Toggle mask** button (_) or press `Ctrl + M` / `⌘ + M`. The option is also available on the context menu. + + + +When you apply a mask, Lunacy creates a mask group: + + + +You can select the mask shape right within the group and move, edit, or resize the mask. + +To remove a mask, select the mask group in the **Layer list** or on the canvas and press `Ctrl + M` / `⌘ + M`. + +### Outline stroke + +The **Outline stroke** command (`Ctrl + Shift + O` / `⌘ + Shift + O`), when applied to shapes, converts borders into separate layer. It appears on the context menu when you select a shape that has a border (you can also find the option in the **Layer** section of the **menu bar**). + + + +You can also use this command to convert text layers to vector outlines. + +## Rasterizing vector shapes + +You can rasterize any vector layer in Lunacy to create pixel images (when you need elements as simple images, for example). + + + +To **rasterize any shape** (or path): + +1. Select it. +2. Right-click the selection, then select **Rasterize selection** on the context menu. + +This option is also available in the **Layer** section of the **menu bar**. + + +
+

Note: Keep in mind that you cannot convert a raster back into a vector shape. Ctrl + Z / ⌘ + Z will always help you out, though.

+
+ +**See also:** +
+Show pixels on zoom diff --git a/docs/public/editing_shapes_arc_editor.mp4 b/docs/public/editing_shapes_arc_editor.mp4 new file mode 100644 index 0000000..9ffa02a Binary files /dev/null and b/docs/public/editing_shapes_arc_editor.mp4 differ diff --git a/docs/public/editing_shapes_arc_editor.png b/docs/public/editing_shapes_arc_editor.png new file mode 100644 index 0000000..e68f736 Binary files /dev/null and b/docs/public/editing_shapes_arc_editor.png differ diff --git a/docs/public/editing_shapes_boolean.mp4 b/docs/public/editing_shapes_boolean.mp4 new file mode 100644 index 0000000..363ed72 Binary files /dev/null and b/docs/public/editing_shapes_boolean.mp4 differ diff --git a/docs/public/editing_shapes_boolean.png b/docs/public/editing_shapes_boolean.png new file mode 100644 index 0000000..6885c3f Binary files /dev/null and b/docs/public/editing_shapes_boolean.png differ diff --git a/docs/public/editing_shapes_drawing_shapes.mp4 b/docs/public/editing_shapes_drawing_shapes.mp4 new file mode 100644 index 0000000..ee52881 Binary files /dev/null and b/docs/public/editing_shapes_drawing_shapes.mp4 differ diff --git a/docs/public/editing_shapes_drawing_shapes.png b/docs/public/editing_shapes_drawing_shapes.png new file mode 100644 index 0000000..b94faae Binary files /dev/null and b/docs/public/editing_shapes_drawing_shapes.png differ diff --git a/docs/public/editing_shapes_edit_mode.mp4 b/docs/public/editing_shapes_edit_mode.mp4 new file mode 100644 index 0000000..58d4f1b Binary files /dev/null and b/docs/public/editing_shapes_edit_mode.mp4 differ diff --git a/docs/public/editing_shapes_flatten_selection.mp4 b/docs/public/editing_shapes_flatten_selection.mp4 new file mode 100644 index 0000000..df5cbe8 Binary files /dev/null and b/docs/public/editing_shapes_flatten_selection.mp4 differ diff --git a/docs/public/editing_shapes_flatten_selection.png b/docs/public/editing_shapes_flatten_selection.png new file mode 100644 index 0000000..28e355e Binary files /dev/null and b/docs/public/editing_shapes_flatten_selection.png differ diff --git a/docs/public/editing_shapes_mask.mp4 b/docs/public/editing_shapes_mask.mp4 new file mode 100644 index 0000000..51d9b0f Binary files /dev/null and b/docs/public/editing_shapes_mask.mp4 differ diff --git a/docs/public/editing_shapes_mask.png b/docs/public/editing_shapes_mask.png new file mode 100644 index 0000000..128e356 Binary files /dev/null and b/docs/public/editing_shapes_mask.png differ diff --git a/docs/public/editing_shapes_outline_stroke.mp4 b/docs/public/editing_shapes_outline_stroke.mp4 new file mode 100644 index 0000000..2442af5 Binary files /dev/null and b/docs/public/editing_shapes_outline_stroke.mp4 differ diff --git a/docs/public/editing_shapes_outline_stroke.png b/docs/public/editing_shapes_outline_stroke.png new file mode 100644 index 0000000..375adb3 Binary files /dev/null and b/docs/public/editing_shapes_outline_stroke.png differ diff --git a/docs/public/editing_shapes_polygon_star_count.mp4 b/docs/public/editing_shapes_polygon_star_count.mp4 new file mode 100644 index 0000000..b936be3 Binary files /dev/null and b/docs/public/editing_shapes_polygon_star_count.mp4 differ diff --git a/docs/public/editing_shapes_polygon_star_count.png b/docs/public/editing_shapes_polygon_star_count.png new file mode 100644 index 0000000..69cc04e Binary files /dev/null and b/docs/public/editing_shapes_polygon_star_count.png differ diff --git a/docs/public/editing_shapes_polygon_star_rounding.mp4 b/docs/public/editing_shapes_polygon_star_rounding.mp4 new file mode 100644 index 0000000..4eed2b0 Binary files /dev/null and b/docs/public/editing_shapes_polygon_star_rounding.mp4 differ diff --git a/docs/public/editing_shapes_polygon_star_rounding.png b/docs/public/editing_shapes_polygon_star_rounding.png new file mode 100644 index 0000000..ec3a38d Binary files /dev/null and b/docs/public/editing_shapes_polygon_star_rounding.png differ diff --git a/docs/public/editing_shapes_right_panel.mp4 b/docs/public/editing_shapes_right_panel.mp4 new file mode 100644 index 0000000..89e4e1b Binary files /dev/null and b/docs/public/editing_shapes_right_panel.mp4 differ diff --git a/docs/public/editing_shapes_right_panel.png b/docs/public/editing_shapes_right_panel.png new file mode 100644 index 0000000..c3341f2 Binary files /dev/null and b/docs/public/editing_shapes_right_panel.png differ diff --git a/docs/public/editing_shapes_rounding_rectangle_corners.mp4 b/docs/public/editing_shapes_rounding_rectangle_corners.mp4 new file mode 100644 index 0000000..fa8e568 Binary files /dev/null and b/docs/public/editing_shapes_rounding_rectangle_corners.mp4 differ diff --git a/docs/public/editing_shapes_rounding_rectangle_corners.png b/docs/public/editing_shapes_rounding_rectangle_corners.png new file mode 100644 index 0000000..4fd472d Binary files /dev/null and b/docs/public/editing_shapes_rounding_rectangle_corners.png differ diff --git a/docs/public/editing_shapes_star_ratio.mp4 b/docs/public/editing_shapes_star_ratio.mp4 new file mode 100644 index 0000000..6b49241 Binary files /dev/null and b/docs/public/editing_shapes_star_ratio.mp4 differ diff --git a/docs/public/editing_shapes_star_ratio.png b/docs/public/editing_shapes_star_ratio.png new file mode 100644 index 0000000..a7d63ae Binary files /dev/null and b/docs/public/editing_shapes_star_ratio.png differ diff --git a/docs/public/editing_shapes_vector_editing.mp4 b/docs/public/editing_shapes_vector_editing.mp4 new file mode 100644 index 0000000..a17c7c7 Binary files /dev/null and b/docs/public/editing_shapes_vector_editing.mp4 differ diff --git a/docs/public/editing_shapes_vector_editing.png b/docs/public/editing_shapes_vector_editing.png new file mode 100644 index 0000000..bf4fb77 Binary files /dev/null and b/docs/public/editing_shapes_vector_editing.png differ