mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-21 03:48:12 +08:00
Update links from graphite.rs to graphite.art
This commit is contained in:
Keavon Chambers
@@ -13,13 +13,13 @@ This chapter formally introduces the concepts and terminology for the user inter
|
||||
|
||||
The bar running across the top of the editor is called the **title bar**. In the (forthcoming) desktop release of Graphite, this acts as the draggable window frame.
|
||||
|
||||
<!-- <p><img src="https://static.graphite.rs/content/learn/interface/title-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The title bar" /></p> -->
|
||||
<!-- <p><img src="https://static.graphite.art/content/learn/interface/title-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The title bar" /></p> -->
|
||||
|
||||
### Menu bar
|
||||
|
||||
On the left, the [**menu bar**](./menu-bar) provides quick access to many editor, document, and artwork related controls. Its functions are covered in detail on the next page.
|
||||
|
||||
<!-- <p><img src="https://static.graphite.rs/content/learn/interface/menu-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The menu bar" /></p> -->
|
||||
<!-- <p><img src="https://static.graphite.art/content/learn/interface/menu-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The menu bar" /></p> -->
|
||||
|
||||
<!-- In the (forthcoming) macOS desktop release, the menu bar is absent from the editor window; its functions are instead located in macOS menu bar. -->
|
||||
|
||||
@@ -31,16 +31,16 @@ On the right (and on Mac, the left), the **window buttons** provide platform-spe
|
||||
|
||||
| | |
|
||||
|-|-|
|
||||
| **Web** | <p>Fullscreen:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-web__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Fullscreen button" /></p> |
|
||||
| **Windows** | <p>Minimize, maximize/restore down, close:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-windows.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
|
||||
| **Linux** | <p>Minimize, maximize/unmaximize, close:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-linux.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
|
||||
| **macOS** | <p>Close, minimize, fullscreen:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-macos.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Close/minimize/fullscreen window buttons" /></p> |
|
||||
| **Web** | <p>Fullscreen:</p><p><img src="https://static.graphite.art/content/learn/interface/window-buttons-web__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Fullscreen button" /></p> |
|
||||
| **Windows** | <p>Minimize, maximize/restore down, close:</p><p><img src="https://static.graphite.art/content/learn/interface/window-buttons-windows.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
|
||||
| **Linux** | <p>Minimize, maximize/unmaximize, close:</p><p><img src="https://static.graphite.art/content/learn/interface/window-buttons-linux.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
|
||||
| **macOS** | <p>Close, minimize, fullscreen:</p><p><img src="https://static.graphite.art/content/learn/interface/window-buttons-macos.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Close/minimize/fullscreen window buttons" /></p> |
|
||||
|
||||
## Workspace
|
||||
|
||||
The **workspace** is the editor's main content area, filled with **panels** arranged next to one another. The **gutter** lines, located between neighboring panels, may be dragged to resize them.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/workspace__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The workspace" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/workspace__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The workspace" /></p>
|
||||
|
||||
### Panels
|
||||
|
||||
@@ -56,7 +56,7 @@ Beneath the panel header, the **panel content** displays the content for its pan
|
||||
|
||||
The bar running across the bottom of the editor is called the **status bar**.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/status-bar__2.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/status-bar__2.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p>
|
||||
|
||||
### Input hints
|
||||
|
||||
@@ -64,17 +64,17 @@ The **input hints** are presently the only occupant of the status bar. They indi
|
||||
|
||||
Hints with a **`+`** mean that adding the indicated modifier key will change the base action. For example: in the following action, dragging with left-click held down will zoom the canvas; then additionally holding the <kbd>Ctrl</kbd> key will make the zoom action snap to whole increments.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/input-hints-plus.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/input-hints-plus.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
|
||||
|
||||
Hints with a **`/`** mean that either indicated input combination can be used to trigger the same action. For example: in the following action, either holding the space bar while dragging with the left mouse button held down, or just dragging with the middle mouse button held down, will both pan around the document in the viewport.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/input-hints-slash.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/input-hints-slash.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
|
||||
|
||||
The following chart describes each icon representing the mouse inputs you can perform so a hint's prescribed action occurs.
|
||||
|
||||
| | Clicks | Drags | Others |
|
||||
|-|:-:|:-:|:-:|
|
||||
| **Left<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click icon" /><br /><br />Left click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click drag icon" /><br /><br />Left click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left double-click icon" /><br /><br />Left double-click |
|
||||
| **Right<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click icon" /><br /><br />Right click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click drag icon" /><br /><br />Right click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right double-click icon" /><br /><br />Right double-click |
|
||||
| **Middle<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click icon" /><br /><br />Middle click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click drag icon" /><br /><br />Middle click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-scroll.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Scroll up/down icons" /><br /><br />Scroll up/down |
|
||||
| **No<br />mouse<br />button** | | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Drag icon" /><br /><br />Drag | |
|
||||
| **Left<br />mouse<br />button** | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-left-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click icon" /><br /><br />Left click | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-left-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click drag icon" /><br /><br />Left click drag | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-left-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left double-click icon" /><br /><br />Left double-click |
|
||||
| **Right<br />mouse<br />button** | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-right-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click icon" /><br /><br />Right click | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-right-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click drag icon" /><br /><br />Right click drag | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-right-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right double-click icon" /><br /><br />Right double-click |
|
||||
| **Middle<br />mouse<br />button** | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-middle-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click icon" /><br /><br />Middle click | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-middle-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click drag icon" /><br /><br />Middle click drag | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-scroll.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Scroll up/down icons" /><br /><br />Scroll up/down |
|
||||
| **No<br />mouse<br />button** | | <img src="https://static.graphite.art/content/learn/interface/mouse-icon-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Drag icon" /><br /><br />Drag | |
|
||||
|
||||
@@ -28,14 +28,14 @@ Only the default mode is currently implemented. Others will be added in the futu
|
||||
|
||||
| | |
|
||||
|-|-|
|
||||
| <img src="https://static.graphite.rs/content/learn/interface/document-panel/editing-modes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The editing modes dropdown menu" /> | The default, **Design Mode**, is for directly editing the artwork.<br /><br />Once implemented, **Select Mode** will be where marquee selections are made to constrain the active tool's edits to a masked area of choice.<br /><br />Once implemented, **Guide Mode** will be for creating guides and constraint systems used for alignment and constraint-based layout. |
|
||||
| <img src="https://static.graphite.art/content/learn/interface/document-panel/editing-modes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The editing modes dropdown menu" /> | The default, **Design Mode**, is for directly editing the artwork.<br /><br />Once implemented, **Select Mode** will be where marquee selections are made to constrain the active tool's edits to a masked area of choice.<br /><br />Once implemented, **Guide Mode** will be for creating guides and constraint systems used for alignment and constraint-based layout. |
|
||||
-->
|
||||
|
||||
### Tool controls
|
||||
|
||||
The left side of the control bar has controls pertaining to the active tool. It's empty for some tools.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example of the tool controls for the Select tool" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/document-panel/tool-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example of the tool controls for the Select tool" /></p>
|
||||
|
||||
The example above shows the Select tool controls. Because the Select tool deals with selecting and transforming layers, its controls include:
|
||||
- The selection mode to determine if the deepest or shallowest layer in a nested hierarchy is selected when clicked.
|
||||
@@ -50,13 +50,13 @@ Depending on which tool is active, these will change to reflect the pertinent op
|
||||
|
||||
The right side of the control bar has controls related to the active document and viewport.
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/viewport-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The viewport controls" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/document-panel/viewport-options__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The viewport controls" /></p>
|
||||
|
||||
| | |
|
||||
|-|-|
|
||||
| Overlays | <p>When checked (default), overlays are shown. When unchecked, they are hidden. Overlays are the temporary contextual visualizations (like bounding boxes and vector manipulators) that are usually blue and appear atop the viewport when using tools.</p> |
|
||||
| Snapping | <p>When checked (default), drawing and dragging shapes and vector points means they will snap to other areas of geometric interest like corners or anchor points. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu. Each option has a tooltip explaining what it does by hovering the cursor over it.</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/snapping-popover__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>Snapping options relating to **Bounding Boxes**:</p><p><ul><li>**Align with Edges**: Snaps to horizontal/vertical alignment with the edges of any layer's bounding box.</li><li>**Corner Points**: Snaps to the four corners of any layer's bounding box.</li><li>**Center Points**: Snaps to the center point of any layer's bounding box.</li><li>**Edge Midpoints**: Snaps to any of the four points at the middle of the edges of any layer's bounding box.</li><li>**Distribute Evenly**: Snaps to a consistent distance offset established by the bounding boxes of nearby layers (due to a bug, **Corner Points** and **Center Points** must be enabled).</li></ul></p><p>Snapping options relating to **Paths**:</p><p><ul><li>**Align with Anchor Points**: Snaps to horizontal/vertical alignment with the anchor points of any vector path.</li><li>**Anchor Points**: Snaps to the anchor point of any vector path.</li><li>**Line Midpoints**: Snaps to the point at the middle of any straight line segment of a vector path.</li><li>**Path Intersection Points**: Snaps to any points where vector paths intersect.</li><li>**Along Paths**: Snaps along the length of any vector path.</li><li>**Normal to Paths**: Snaps a line to a point perpendicular to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li><li>**Tangent to Paths**: Snaps a line to a point tangent to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li></ul></p> |
|
||||
| Grid | <p>When checked (off by default), grid lines are shown and snapping to them becomes active. The initial grid scale is 1 document unit, helping you draw pixel-perfect artwork.</p><ul><li><p>**Type** sets whether the grid pattern is made of squares or triangles.</p><p>**Rectangular** is a pattern of horizontal and vertical lines:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-rectangular-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has one option unique to this mode:</p><ul><li>**Spacing** is the width and height of the rectangle grid cells.</li></ul><p>**Isometric** is a pattern of triangles:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-isometric-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has two options unique to this mode:</p><ul><li>**Y Spacing** is the height between vertical repetitions of the grid.</li><li>**Angles** is the slant of the upward and downward sloped grid lines.</li></ul></li><li>**Display** gives control over the appearance of the grid. The **Display as dotted grid** checkbox (off by default) replaces the solid lines with dots at their intersection points.</li><li>**Origin** is the position in the canvas where the repeating grid pattern begins from. If you need an offset for the grid where an intersection occurs at a specific location, set those coordinates.</li></ul> |
|
||||
| Snapping | <p>When checked (default), drawing and dragging shapes and vector points means they will snap to other areas of geometric interest like corners or anchor points. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu. Each option has a tooltip explaining what it does by hovering the cursor over it.</p><p><img src="https://static.graphite.art/content/learn/interface/document-panel/snapping-popover__5.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>Snapping options relating to **Bounding Boxes**:</p><p><ul><li>**Align with Edges**: Snaps to horizontal/vertical alignment with the edges of any layer's bounding box.</li><li>**Corner Points**: Snaps to the four corners of any layer's bounding box.</li><li>**Center Points**: Snaps to the center point of any layer's bounding box.</li><li>**Edge Midpoints**: Snaps to any of the four points at the middle of the edges of any layer's bounding box.</li><li>**Distribute Evenly**: Snaps to a consistent distance offset established by the bounding boxes of nearby layers (due to a bug, **Corner Points** and **Center Points** must be enabled).</li></ul></p><p>Snapping options relating to **Paths**:</p><p><ul><li>**Align with Anchor Points**: Snaps to horizontal/vertical alignment with the anchor points of any vector path.</li><li>**Anchor Points**: Snaps to the anchor point of any vector path.</li><li>**Line Midpoints**: Snaps to the point at the middle of any straight line segment of a vector path.</li><li>**Path Intersection Points**: Snaps to any points where vector paths intersect.</li><li>**Along Paths**: Snaps along the length of any vector path.</li><li>**Normal to Paths**: Snaps a line to a point perpendicular to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li><li>**Tangent to Paths**: Snaps a line to a point tangent to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li></ul></p> |
|
||||
| Grid | <p>When checked (off by default), grid lines are shown and snapping to them becomes active. The initial grid scale is 1 document unit, helping you draw pixel-perfect artwork.</p><ul><li><p>**Type** sets whether the grid pattern is made of squares or triangles.</p><p>**Rectangular** is a pattern of horizontal and vertical lines:</p><p><img src="https://static.graphite.art/content/learn/interface/document-panel/grid-rectangular-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has one option unique to this mode:</p><ul><li>**Spacing** is the width and height of the rectangle grid cells.</li></ul><p>**Isometric** is a pattern of triangles:</p><p><img src="https://static.graphite.art/content/learn/interface/document-panel/grid-isometric-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has two options unique to this mode:</p><ul><li>**Y Spacing** is the height between vertical repetitions of the grid.</li><li>**Angles** is the slant of the upward and downward sloped grid lines.</li></ul></li><li>**Display** gives control over the appearance of the grid. The **Display as dotted grid** checkbox (off by default) replaces the solid lines with dots at their intersection points.</li><li>**Origin** is the position in the canvas where the repeating grid pattern begins from. If you need an offset for the grid where an intersection occurs at a specific location, set those coordinates.</li></ul> |
|
||||
| Render Mode | <p>**Normal** (default): The artwork is rendered normally.</p><p>**Outline**: The artwork is rendered as a wireframe.</p><p>**Pixel Preview**: **Not implemented yet.** The artwork is rendered as it would appear when exported as a bitmap image at 100% scale regardless of the viewport zoom level.</p><p>**SVG Preview**: **Not implemented yet.** The artwork is rendered as it would appear when exported as an SVG image.</p> |
|
||||
| Zoom In | <p>Zooms the viewport in to the next whole increment.</p> |
|
||||
| Zoom Out | <p>Zooms the viewport out to the next whole increment.</p> |
|
||||
@@ -71,7 +71,7 @@ This narrow bar runs vertically down the left side of the Document panel beside
|
||||
|
||||
### Tools
|
||||
|
||||
<img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf__2.avif" style="float: left; width: 64px; padding-right: 40px" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The tool shelf" />
|
||||
<img src="https://static.graphite.art/content/learn/interface/document-panel/tool-shelf__2.avif" style="float: left; width: 64px; padding-right: 40px" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The tool shelf" />
|
||||
|
||||
Located at the top of the tool shelf area, the **tool shelf** provides a selection of **tools** for interactively editing the artwork. It is composed of three sections:
|
||||
|
||||
@@ -89,7 +89,7 @@ Located at the top of the tool shelf area, the **tool shelf** provides a selecti
|
||||
|
||||
### Working colors
|
||||
|
||||
<img src="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif" style="float: left; width: 64px; padding-right: 40px;" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" />
|
||||
<img src="https://static.graphite.art/content/learn/interface/document-panel/working-colors.avif" style="float: left; width: 64px; padding-right: 40px;" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" />
|
||||
|
||||
The **working colors** are the two colors used by the active tool. The upper circle is the **primary color**. The lower circle is the **secondary color**.
|
||||
|
||||
@@ -97,7 +97,7 @@ There are two buttons located underneath: **Swap** which reverses the current co
|
||||
|
||||
The tool controls (above the viewport) for some of the tools offer choices for using the primary and secondary colors. For example, the vector drawing tools have **Fill** and **Stroke** options that use the current secondary and primary colors, respectively, as defaults:
|
||||
|
||||
<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-options-fill-stroke-colors__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The Fill and Stroke controls for a vector tool's controls" /></p>
|
||||
<p><img src="https://static.graphite.art/content/learn/interface/document-panel/tool-options-fill-stroke-colors__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The Fill and Stroke controls for a vector tool's controls" /></p>
|
||||
|
||||
These options each allow choices of being driven by the primary working color, secondary working color, or a custom color set just for that tool.
|
||||
|
||||
|
||||
@@ -23,15 +23,15 @@ The **File menu** lists actions related to file handling:
|
||||
|
||||
| | |
|
||||
|-|-|
|
||||
| **New…** | <p>Opens the **New Document** dialog for creating a blank canvas in a new editor tab.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-new-document.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'New Document' dialog" /></p><p><ul><li><strong>Name</strong> determines the initial filename of the new document.</li><li><strong>Infinite Canvas</strong>, if set, skips adding an artboard and thereby starts with a boundless white canvas extending in all directions.</li><li><strong>Dimensions</strong> sets the width and height, in pixels, of the initial artboard. Ignored if *Infinite Canvas* is ticked.</li></ul></p> |
|
||||
| **New…** | <p>Opens the **New Document** dialog for creating a blank canvas in a new editor tab.</p><p><img src="https://static.graphite.art/content/learn/interface/menu-bar/dialog-new-document.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'New Document' dialog" /></p><p><ul><li><strong>Name</strong> determines the initial filename of the new document.</li><li><strong>Infinite Canvas</strong>, if set, skips adding an artboard and thereby starts with a boundless white canvas extending in all directions.</li><li><strong>Dimensions</strong> sets the width and height, in pixels, of the initial artboard. Ignored if *Infinite Canvas* is ticked.</li></ul></p> |
|
||||
| **Open…** | <p>Opens the operating system file picker dialog for selecting a `.graphite` file from disk to be opened in a new editor tab.</p> |
|
||||
| **Open Demo Artwork…** | <p>Opens the **Demo Artwork** dialog for loading a choice of premade sample artwork files provided for you to explore. Click the button below each image to open it.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-demo-artwork__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Demo Artwork' dialog" /></p> |
|
||||
| **Open Demo Artwork…** | <p>Opens the **Demo Artwork** dialog for loading a choice of premade sample artwork files provided for you to explore. Click the button below each image to open it.</p><p><img src="https://static.graphite.art/content/learn/interface/menu-bar/dialog-demo-artwork__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Demo Artwork' dialog" /></p> |
|
||||
| **Close** | <p>Closes the active document. If it has unsaved changes (denoted by the `*` after the file name), you will be asked to save or discard the changes.</p> |
|
||||
| **Close All** | <p>Closes all open documents. To avoid accidentally losing unsaved work, you will be asked to confirm that you want to proceed which will discard the unsaved changes in all open documents.</p> |
|
||||
| **Save** | <p>Saves the active document by writing the `.graphite` file to disk. An operating system file download dialog may appear asking where to place it. That dialog will provide an opportunity to save over a previous version of the file, if you wish, by picking the identical name instead of saving another instance with a number after it.</p> |
|
||||
| **Import…** | <p>Opens the operating system file picker dialog for selecting an image file from disk to be placed as a new bitmap image layer or SVG content into the active document.</p> |
|
||||
| **Export…** | <p>Opens the **Export** dialog for saving the artwork as a *File Type* of *PNG*, *JPG*, or *SVG*. *Scale Factor* multiplies the content's document scale, so a value of 2 would export 300x400 content as 600x800 pixels. *Bounds* picks what area to render: *All Artwork* uses the bounding box of all layers, *Selection* uses the bounding box of the currently selected layers, and an *Artboard: \[Name\]* uses the bounds of that artboard. *Transparency* exports PNG or SVG files with transparency instead of the artboard background color.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-export.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Export' dialog" /></p> |
|
||||
| **Preferences…** | <p>Opens the **Editor Preferences** dialog for configuring Graphite's settings.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-editor-preferences__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Editor Preferences' dialog" /></p> |
|
||||
| **Export…** | <p>Opens the **Export** dialog for saving the artwork as a *File Type* of *PNG*, *JPG*, or *SVG*. *Scale Factor* multiplies the content's document scale, so a value of 2 would export 300x400 content as 600x800 pixels. *Bounds* picks what area to render: *All Artwork* uses the bounding box of all layers, *Selection* uses the bounding box of the currently selected layers, and an *Artboard: \[Name\]* uses the bounds of that artboard. *Transparency* exports PNG or SVG files with transparency instead of the artboard background color.<br /><br /><img src="https://static.graphite.art/content/learn/interface/menu-bar/dialog-export.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Export' dialog" /></p> |
|
||||
| **Preferences…** | <p>Opens the **Editor Preferences** dialog for configuring Graphite's settings.<br /><br /><img src="https://static.graphite.art/content/learn/interface/menu-bar/dialog-editor-preferences__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Editor Preferences' dialog" /></p> |
|
||||
|
||||
### Edit
|
||||
|
||||
|
||||
Reference in New Issue
Block a user