Comprehensively update user manual and contributor guide, add Adam to core team

2026-09-23 17:58:13 +08:00 · 2025-01-08 03:52:11 -08:00
parent 9eb544df74
commit 93a60daa24
76 changed files with 931 additions and 685 deletions
@@ -0,0 +1,34 @@
+++
+title = "Graph"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 4
+++
+
+- Opening the graph
+- Document graph vs. layer graph, limitations
+- Adding nodes
+- Connecting nodes
+
+## Overlaid node graph editing
+
+Opening the overlaid node graph shows the structure of nodes and layers that compose the document artwork. It's a more detailed view of what the [Layers](../layers-panel) and [Properties](../properties-panel) panels show.
+
+**Nodes** are the entities with left-to-right input **connectors**.
+
+**Layers** are the larger entities shown with thumbnails and a bottom-to-top direction of data stacking. Their purpose is to composite sources of graphical data on top of one another in a **layer stack**. Layers take input from other nodes or layers via a connector on their left side. When that connector is fed by another layer stack, the Layers panel considers it a **group** because it combines one stack into another parent stack.
+
+Layers and nodes are wired together using **links** which send data between the outputs of nodes to the inputs of others. You can wire up a node by dragging from the output connector of one node to the input connector of its destination node. But note that forming cyclic graphs, where a loop can be traced along the links of a set of nodes, is not permitted. Graphical data flows into the **Output** node which then becomes rendered to the document viewport.
+
+### Node/layer controls
+
+When a layer or node is selected, these buttons will show up on the left side of the control bar:
+
+<p><img src="https://static.graphite.rs/content/learn/interface/document-panel/node-controls-buttons.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The node/layer controls" /></p>
+
+| | |
+|-|-|
+| Make<span>&nbsp;</span>Hidden/<br />Make<span>&nbsp;</span>Visible | <p>Toggles the visibility state of the layer or node. This is equivalent to the eye icon button displayed beside each layer. If a node or layer is hidden, it gets bypassed in the data flow. <kbd>Ctrl</kbd><kbd>H</kbd> (macOS: <kbd>⌘</kbd><kbd>H</kbd>) is a shortcut for this toggle that can be used from the graph or viewport.</p> |
+| Preview/<br />End<span>&nbsp;</span>Preview | <p>Temporarily moves the graph output away from the Output node and the graph output is instead provided by the previewed node. While previewing, the node is styled with a dashed, brighter border. Ending the preview returns responsibility back to the Output node. This is a handy feature for viewing part of a graph without needing to disconnect the actual Output node and manually restore it later. Clicking a node or layer in the graph while holding <kbd>Alt</kbd> is a shortcut for toggling its preview.</p> |
@@ -0,0 +1,6 @@
+++
+title = "Layers"
+
+[extra]
+order = 2
+++
@@ -0,0 +1,6 @@
+++
+title = "Nodes"
+
+[extra]
+order = 1
+++
@@ -0,0 +1,18 @@
+++
+title = "Layers panel"
+
+[extra]
+order = 3
+++
+
+This manual page hasn't been written yet! But here is an outline for what's coming soon:
+
+- About layers and folders
+- Control bar
+	- Blend modes and opacity
+	- Adding folders
+	- Deleting the selected layers
+- The layer list
+	- Editing layers
+	- Selection and multi-selection
+	- Rearranging the hierarchy
@@ -0,0 +1,14 @@
+++
+title = "Properties panel"
+
+[extra]
+order = 4
+++
+
+This manual page hasn't been written yet! But here is an outline for what's coming soon:
+
+- Node properties
+	- Parameters
+		- Expose button
+		- Name
+		- Value inputs
@@ -0,0 +1,10 @@
+++
+title = "Node catalog"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 9
+++
+
+## Graphical data types
@@ -0,0 +1,6 @@
+++
+title = "Raster nodes"
+
+[extra]
+order = 2
+++
@@ -0,0 +1,6 @@
+++
+title = "Vector nodes"
+
+[extra]
+order = 1
+++
@@ -0,0 +1,13 @@
+++
+title = "Raster editing"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 6
+++
+
+- Opening the graph
+- Document graph vs. layer graph, limitations
+- Adding nodes
+- Connecting nodes
@@ -0,0 +1,6 @@
+++
+title = "Layers"
+
+[extra]
+order = 2
+++
@@ -0,0 +1,6 @@
+++
+title = "Nodes"
+
+[extra]
+order = 1
+++
@@ -0,0 +1,9 @@
+++
+title = "Tools"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 7
+++
+
@@ -0,0 +1,6 @@
+++
+title = "General tools"
+
+[extra]
+order = 1
+++
@@ -0,0 +1,6 @@
+++
+title = "Raster tools"
+
+[extra]
+order = 3
+++
@@ -0,0 +1,6 @@
+++
+title = "Vector tools"
+
+[extra]
+order = 2
+++
@@ -0,0 +1,8 @@
+++
+title = "Vector editing"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 5
+++
@@ -0,0 +1,6 @@
+++
+title = "Layers"
+
+[extra]
+order = 2
+++
@@ -0,0 +1,6 @@
+++
+title = "Nodes"
+
+[extra]
+order = 1
+++
@@ -0,0 +1,12 @@
+++
+title = "Viewport"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 3
+++
+
+- Canvas
+- Legacy layers
+- Legacy folders
@@ -0,0 +1,10 @@
+++
+title = "Artboards"
+
+[extra]
+order = 2
+++
+
+- Infinite canvas
+- New document artboard
+- Adjusting existing artboards
@@ -0,0 +1,10 @@
+++
+title = "Navigation"
+
+[extra]
+order = 1
+++
+
+- Pan
+- Tilt
+- Zoom
@@ -0,0 +1,9 @@
+++
+title = "Workflows"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 8
+++
+
@@ -0,0 +1,59 @@
+++
+title = "Imaginate"
+
+[extra]
+order = 2
+js = ["carousel.js"]
+++
+
+Imaginate is a useful tool at every stage in the artistic process. Early on it provides inspiration for styles, color palettes, subjects, and composition. It lets you quickly test ideas and explore artistic directions. It's also a useful way to generate placeholder images and content for kit bashing.
+
+Intermediate stages in the creative process can utilize Imaginate as an iterative back-and-forth dialogue between yourself and the tool. It can be used to improve your creation's artistic fidelity and details, evolve an idea, or inject a little controlled chaos to bring forth happy accidents. And coherency can be given to scenes built from kit bashing collages through interactively transforming its look with iterative Imaginate steps.
+
+Near the end of the art process, Imaginate is useful for adding the finishing touches the beautify your creative work with small additions like textures, subtle lighting and shadow effects, and pleasant gradients to make the whole piece look its best. It can turn a sterile, flat vector drawing into a detailed final work.
+
+<!--
+Illustrate a use case:
+1. Hand draw a sketch of a scene
+2. Generate several scenes to get inspiration for the color palette
+3. Sample from those scenes and use the vector tools to ink sketch
+4. Iteratively improve the fidelity
+5. Inpaint to replace an element in the scene
+6. Outpaint to extend the scene
+-->
+
+<section id="imaginate-creative-concepts-carousel" class="carousel center window-size-2" data-carousel>
+	<div class="carousel-slide">
+		<img src="https://files.keavon.com/-/PerfumedNiceRhinoceros/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/UnwrittenFrankHeterodontosaurus/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/BlindBiodegradableAlaskajingle/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/DigitalElatedVicuna/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/ThreadbareIncredibleFlycatcher/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/NaughtyGracefulSquirrel/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/BrownSuburbanMacaw/capture.png" alt="" data-carousel-image />
+		<img src="https://files.keavon.com/-/AbsoluteAwkwardGrouse/capture.png" alt="" data-carousel-image />
+	</div>
+	<div class="screenshot-details">
+		<div class="carousel-controls">
+			<button class="direction prev" data-carousel-prev>
+				<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+					<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
+					<polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" />
+				</svg>
+			</button>
+			<button class="dot active" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="dot" data-carousel-dot></button>
+			<button class="direction next" data-carousel-next>
+				<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+					<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
+					<polygon points="16.71,9.29 15.29,10.71 24.59,20 15.29,29.29 16.71,30.71 27.41,20" />
+				</svg>
+			</button>
+		</div>
+	</div>
+</section>
@@ -0,0 +1,6 @@
+++
+title = "Procedural editing"
+
+[extra]
+order = 1
+++