You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/content/learn/interface/_index.md
+14-13Lines changed: 14 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,27 +13,28 @@ This chapter formally introduces the concepts and terminology for the user inter
13
13
14
14
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.
15
15
16
-
<p><imgsrc="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>
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.
21
21
22
-
<p><imgsrc="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>
<!-- In the (forthcoming) macOS desktop release, the menu bar is absent from the editor window; its functions are instead located in macOS menu bar. -->
25
25
26
26
### Window buttons
27
27
28
-
On the right, the **window buttons** provide platform-specific controls for the application.
28
+
On the right (and on Mac, the left), the **window buttons** provide platform-specific controls for the application.
29
29
30
30
<!-- In the (forthcoming) macOS desktop release, this appears on the left side instead. -->
31
31
32
32
|||
33
33
|-|-|
34
-
|**Web**| <p>A button to enter fullscreen mode is displayed.</p><p>Some shortcut keys like <kbd>Ctrl</kbd><kbd>N</kbd> (macOS: <kbd>⌘</kbd><kbd>N</kbd>) are reserved by the web browser and can only be used in fullscreen mode. (Alternative to going fullscreen: include <kbd>Alt</kbd> in the shortcut combinations for browser-reserved hotkeys.)</p><p><imgsrc="https://static.graphite.rs/content/learn/interface/window-buttons-web.avif"onerror="this.onerror=null; this.src=this.src.replace('.avif', '.png')"alt="Fullscreen button" /></p> |
35
-
<!-- | **Windows<br />& Linux** | The standard window controls are displayed: minimize, maximize/restore down, and close.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/window-buttons-windows-linux.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /> | -->
36
-
<!-- | **macOS** | The standard window controls are displayed: close, minimize, and fullscreen. These are located on the left of the title bar.<br /><br /><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" /> | -->
The **input hints** are presently the only occupant of the status bar. They indicate what common keyboard and mouse inputs are valid in the current context. Hints change with each active tool as well as with the current interaction state. Keep a frequent eye on the hints to discover more features as you work.
63
64
64
65
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.
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.
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:
77
+
78
+
<divstyle="margin-left: calc(64px+40px)">
75
79
76
80
|||
77
81
|-|-|
78
-
| <imgsrc="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf__2.avif"onerror="this.onerror=null; this.src=this.src.replace('.avif', '.png')"onload="this.width=this.naturalWidth/2"alt="The tool shelf" /> | <p>The tool shelf is split into three sections: the **general tools** (gray icons), **vector tools** (blue icons), and **raster tools** (orange icons).</p><p><ul><li>**General tools** are used for assorted editing tasks within the viewport.</li><li>**Vector tools** are used for drawing and editing vector shapes, paths, and text.</li><li>**Raster tools** are used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools.</li></ul></p> |
82
+
|**General tools**| (Gray icons) Used for assorted editing tasks within the viewport. |
83
+
|**Vector tools**| (Blue icons) Used for drawing and editing vector shapes, paths, and text. |
84
+
|**Raster tools**| (Orange icons) Used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools. |
85
+
86
+
</div>
87
+
88
+
<divstyle="clear: both;"></div>
79
89
80
90
### Working colors
81
91
82
-
The **workingcolors** are the two colors used by the active tool.
| <imgsrc="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif"onerror="this.onerror=null; this.src=this.src.replace('.avif', '.png')"alt="The working colors" /> | <p>The upper circle is the **primary color**. The lower circle is the **secondary color**.</p><p>There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which restores the primary color to black and the secondary color to white.</p> |
94
+
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**.
95
+
96
+
There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which restores the primary color to black and the secondary color to white.
87
97
88
98
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:
0 commit comments