mirror of
https://github.com/icons8/lunacy-docs.git
synced 2026-09-26 01:10:40 -04:00
Interface > Artboards
This commit is contained in:
+10
-10
@@ -181,26 +181,26 @@ Another option to navigate the canvas is to hold down the `Space` key (the curso
|
||||
|
||||
Also, read about the [zooming options](#zooming-options).
|
||||
|
||||
### Artboards
|
||||
### [Artboards](#artboards)
|
||||
|
||||
Artboards are a special type of objects that allow you 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 create an art board, use the <a href="https://docs.icons8.com/tools/#artboard-tool" target="_blank">artboard tool</a>. In fact, it is the tool that Lunacy enables when you create a new document. It allows you to select an artboard from a list of that will appear on the right or create a custom size artboard.
|
||||
Artboards are a special type of objects that allows you 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 create an artboard, use the <a href="https://docs.icons8.com/tools/#artboard-tool" target="_blank">artboard tool</a>. In fact, it is the tool that Lunacy enables first when you create a new document. It allows you to create a custom size artboard or to select an option from the list that will appear on the right. This list features presets for popular devices, screen resolutions and social media templates.
|
||||
|
||||
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. It features presets for all popular devices, screen resolutions and social media templates (see the figure below).
|
||||
2. Click and drag to create a custom size artboard or select an option from the panel on the right (see the figure below).
|
||||
|
||||
{:.is-big}
|
||||

|
||||
|
||||
But even if you started your project without artboards, it is never too late to add them. Just drag the artboard tool over the objects that you want to put on an artboard.
|
||||
|
||||
The figure below shows how artboards appear in the **Objects** panel and a view of the Inspector with artboard settings and controls which differ a lot from those available in the Inspector panels of other object types.
|
||||
The figure below shows how artboards appear in the **Objects** panel and a view of the Inspector with artboard settings and controls which differ a lot from those available in the Inspector panels of other object types.
|
||||
|
||||
{:.is-big}
|
||||

|
||||
|
||||
The table below provides a description of the Artboard Inspector elements.
|
||||
The table below provides a description of Inspector elements displayed for artboards.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@@ -212,11 +212,11 @@ The table below provides a description of the Artboard Inspector elements.
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="/public/interface-artbinspector1.png" alt="Size controls"></td>
|
||||
<td><b>Preset sizes and orientation</b><p>Allow you to select the size of the artboard from one of the presets and change its orientation. The <b>Resize to Fit</b> button changes the size of an artboard to the size of the selection frame that you get when you select all objects on the given artboard.</p></td>
|
||||
<td><b>Preset sizes and orientation</b><p>Use these controls to select the size of the artboard from one of the presets and change its orientation. The <b>Resize to Fit</b> button changes the size of an artboard to the size of the selection frame that you get when you select all objects on the given artboard.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/public/interface-artbinspector2.png" alt="Position and dimension controls"></td>
|
||||
<td><b>Position and size</b><p>The <b>X</b> and <b>Y</b> controls show and allow you to manage the absolute position of the artboard on the canvas.</p> <p> The <b>W</b> and <b>H</b> controls, show and allow to change the width and height of the object. Click the links icon, if you want to preserve aspect ratio when change the size of the artboard.</p></td>
|
||||
<td><b>Position and size</b><p>The <b>X</b> and <b>Y</b> controls show and allow you to manage the absolute position of the artboard on the canvas.</p> <p> The <b>W</b> and <b>H</b> controls, show and allow to change the width and height of the object. Click the links icon, if you want to preserve aspect ratio when changing the size of the artboard.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/public/interface-artbinspector3.png" alt="Adjust content on resize"></td>
|
||||
@@ -239,9 +239,9 @@ The table below provides a description of the Artboard Inspector elements.
|
||||
|
||||
#### Selecting and moving artboards
|
||||
|
||||
To select an empty artboard, you can click anywhere within the artboard. To select an artboard with objects on it, click the artboard name or select it through the **Objects** panel.
|
||||
To select an empty artboard, you can click anywhere within the artboard. To select an artboard with objects on it, click the artboard's name.
|
||||
|
||||
Similarly, to move an empty artboard, click anywhere within the artboard and drag it to where you want it. To move an artboard with objects, click the artboard name and drag.
|
||||
Similarly, to move an empty artboard, click anywhere within the artboard and drag it to where you want it. To move an artboard with objects, click the artboard's name and drag.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/interface-moveartplaceholder.png" height="auto"><source src="/public/interface-moveart.mp4" type="video/mp4"></video>
|
||||
|
||||
@@ -276,7 +276,7 @@ To select the size of the grid cell, click the down arrowhead next to the button
|
||||
|
||||
#### [Layout grid](#layout-grid)
|
||||
|
||||
You can apply layout grids only to <a href="https://docs.icons8.com/tools/#artboard-tool" target="_blank">artboards</a>. If you have several artboards on a page, you can toggle on and off the display of layout grids for all or individually for each artboard. Also, each artboard can have its own settings of the layout grid (see the demo below).
|
||||
You can apply layout grids only to [artboards]((#artboards). If you have several artboards on a page, you can toggle on and off the display of layout grids for all or individually for each artboard. Also, each artboard can have its own settings of the layout grid (see the demo below).
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/interface-layoutgridplaceholder.png" height="auto"><source src="/public/interface-layoutgridvid.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
+1
-1
@@ -309,7 +309,7 @@ To add 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.
|
||||
For details, about using artboards read <a href="https://docs.icons8.com/interface/#artboards" target="_blank">here</a>.
|
||||
|
||||
## Slice tool
|
||||
|
||||
|
||||
Reference in New Issue
Block a user