mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-08-04 13:30:48 +00:00
Revamp the website more
This commit is contained in:
Keavon Chambers
parent
98ab069a17
commit
40fd4473a7
9 changed files with 608 additions and 555 deletions
|
|
@ -29,29 +29,32 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
<!-- -->
|
||||
<!-- ▛ QUICK LINKS ▜ -->
|
||||
<section id="quick-links">
|
||||
<div class="call-to-action-buttons">
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" class="button github-stars">
|
||||
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
|
||||
<span class="arrow">Star</span>
|
||||
<div data-github-stars></div>
|
||||
</a>
|
||||
<a href="#newsletter" class="button arrow">Subscribe to newsletter</a>
|
||||
</div>
|
||||
<div class="social-media-buttons">
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/discord__2.svg" alt="Discord" />
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/reddit__2.svg" alt="Reddit" />
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@GraphiteEditor" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/youtube.svg" alt="YouTube" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="call-to-action-buttons">
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" class="button github-stars">
|
||||
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
|
||||
<span class="arrow">Star</span>
|
||||
<div data-github-stars></div>
|
||||
</a>
|
||||
<a href="#newsletter" class="button arrow">Subscribe to newsletter</a>
|
||||
</div>
|
||||
<div class="social-media-buttons">
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/discord__2.svg" alt="Discord" />
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/reddit__2.svg" alt="Reddit" />
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@GraphiteEditor" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/youtube.svg" alt="YouTube" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
const element = document.querySelector("[data-github-stars]");
|
||||
|
|
@ -70,140 +73,111 @@ js = ["image-interaction.js", "video-embed.js"]
|
|||
</script>
|
||||
<!-- ▙ QUICK LINKS ▟ -->
|
||||
|
||||
<!-- ▛ HEXAGONS ▜ -->
|
||||
<div class="hexagons">
|
||||
<div>
|
||||
<svg viewBox="0 0 1400 1215.42" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon points="1049.43,0.99 350.57,0.99 1.14,607.71 350.57,1214.44 1049.43,1214.44 1398.86,607.71" />
|
||||
<polygon points="1016.39,57.57 383.61,57.57 67.22,607.71 383.61,1157.85 1016.39,1157.85 1332.78,607.71" />
|
||||
<polygon points="964.49,149.01 435.51,149.01 171.02,607.71 435.51,1066.41 964.49,1066.41 1228.98,607.71" />
|
||||
<polygon points="875.52,304.71 524.48,304.71 348.96,607.71 524.48,910.71 875.52,910.71 1051.04,607.71" />
|
||||
<polygon points="768.12,490.96 631.88,490.96 563.78,607.71 631.88,724.47 768.12,724.47 836.22,607.71" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<svg viewBox="0 0 1400 1215.42" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<polygon points="1049.43,0.99 350.57,0.99 1.14,607.71 350.57,1214.44 1049.43,1214.44 1398.86,607.71" />
|
||||
<polygon points="1016.39,57.57 383.61,57.57 67.22,607.71 383.61,1157.85 1016.39,1157.85 1332.78,607.71" />
|
||||
<polygon points="964.49,149.01 435.51,149.01 171.02,607.71 435.51,1066.41 964.49,1066.41 1228.98,607.71" />
|
||||
<polygon points="875.52,304.71 524.48,304.71 348.96,607.71 524.48,910.71 875.52,910.71 1051.04,607.71" />
|
||||
<polygon points="768.12,490.96 631.88,490.96 563.78,607.71 631.88,724.47 768.12,724.47 836.22,607.71" />
|
||||
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▙ HEXAGONS ▟ -->
|
||||
|
||||
<!-- ▛ SCREENSHOTS ▜ -->
|
||||
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
|
||||
<div class="carousel-slide" data-carousel-slide>
|
||||
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-fractal.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
</div>
|
||||
<div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
|
||||
<div class="carousel-slide torn right" data-carousel-slide-torn-right></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="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 class="screenshot-description">
|
||||
<p data-carousel-description class="active">
|
||||
<a href="https://editor.graphite.rs/#demo/painted-dreams"><em>Painted Dreams</em></a> — Made using nondestructive boolean operations and procedural dot patterns
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — The layer stack is represented, under the hood, by a node graph (shown fully expanded)
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Mandelbrot fractal filled with a noise pattern, procedurally generated and infinitely scalable
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Coming soon: mockup for the actively in-development raster workflow with new nodes for photo editing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-slide" data-carousel-slide>
|
||||
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-fractal.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__6.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
|
||||
</div>
|
||||
|
||||
<div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
|
||||
<div class="carousel-slide torn right" data-carousel-slide-torn-right></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="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 class="screenshot-description">
|
||||
|
||||
<p data-carousel-description class="active">
|
||||
<a href="https://editor.graphite.rs/#demo/painted-dreams"><em>Painted Dreams</em></a> — Made using nondestructive boolean operations and procedural dot patterns
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
<a href="https://editor.graphite.rs/#demo/valley-of-spires"><em>Valley of Spires</em></a> — The layer stack is represented, under the hood, by a node graph (shown fully expanded)
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Mandelbrot fractal filled with a noise pattern, procedurally generated and infinitely scalable
|
||||
</p>
|
||||
<p data-carousel-description>
|
||||
Coming soon: mockup for the actively in-development raster workflow with new nodes for photo editing
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ▙ SCREENSHOTS ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ TODAY AND TOMORROW ▜ -->
|
||||
<section id="today-and-tomorrow">
|
||||
<div class="diptych">
|
||||
<!-- -->
|
||||
<!-- ▛ OVERVIEW ▜ -->
|
||||
<section id="overview" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
|
||||
<div class="block">
|
||||
|
||||
# Graphite today <span>public alpha</span>
|
||||
<h1 class="feature-box-header">Software overview</h1>
|
||||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Vector editing tools</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Node-based layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
<!-- <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" /> -->
|
||||
<!-- <span>AI-assisted art creation</span> -->
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Procedural graphic design workflow</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Forever free and open source</span>
|
||||
</div>
|
||||
</div>
|
||||
---
|
||||
|
||||
<!-- Presently, Graphite is a lightweight vector graphics editor that runs offline in your browser (no sign up or download required). -->
|
||||
Presently, Graphite is a lightweight offline web app with features primarily oriented around procedural vector graphics editing.
|
||||
<!-- As a new entrant to the open source digital content creation landscape, Graphite has a unique formula for success: -->
|
||||
|
||||
Starting life as a vector editor, Graphite is evolving into a generalized, all-in-one graphics toolbox that's built more like a game engine than a conventional creative app. The editor's tools wrap its node graph core, providing user-friendly workflows for vector, raster, and beyond.
|
||||
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="block workflows">
|
||||
|
||||
# Graphite tomorrow
|
||||
## One app to rule them all
|
||||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>All-in-one creative tool for all things 2D</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Fully-featured raster manipulation</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Windows/Mac/Linux native apps + web</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Live collaborative editing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/features#roadmap" class="button arrow">Roadmap</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ TODAY AND TOMORROW ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DISCIPLINES ▜ -->
|
||||
<section id="disciplines">
|
||||
<div class="block">
|
||||
|
||||
# One app to rule them all
|
||||
|
||||
**Stop jumping between programs— planned features will make Graphite a first-class content creation tool for all these disciplines.**
|
||||
Stop jumping between programs— upcoming tools will make Graphite a first-class content creation suite for many workflows, including:
|
||||
|
||||
<div class="feature-icons stacked no-background">
|
||||
<div class="feature-icon">
|
||||
|
|
@ -232,24 +206,177 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="diptych">
|
||||
|
||||
<div class="block">
|
||||
|
||||
## Current features
|
||||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Vector editing tools</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Procedural workflow for graphic design</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Node-based layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Forever free and open source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Presently, Graphite is a lightweight offline web app with features primarily oriented around procedural vector graphics editing.
|
||||
|
||||
</div>
|
||||
<div class="block">
|
||||
|
||||
## Upcoming features
|
||||
|
||||
<div class="feature-icons">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>All-in-one creative tool for all things 2D</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Fully-featured raster manipulation</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Windows/Mac/Linux native apps + web</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span>Live collaborative editing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/features#roadmap" class="button arrow">Roadmap</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="block">
|
||||
|
||||
## Desktop-first and web-ready
|
||||
|
||||
Graphite is designed principally as a desktop-grade professional application that is also accessible in-browser for fast, casual usage.
|
||||
|
||||
Where's the download? Desktop apps for Windows, Mac, and Linux should be available later in 2024. Until then, you can <a href="https://support.google.com/chrome/answer/9658361" target="_blank">install it as a PWA</a>.
|
||||
|
||||
Developing and maintaining a native app on four platforms is a big task. To not compromise on the optimal desktop experience—which takes longer to do the right way—priorities called for initially supporting just web, the one platform that stays up-to-date and reaches all devices.
|
||||
|
||||
Once it's ready to shine, Graphite's code architecture is structured to deliver native performance for your graphically intensive workloads on desktop platforms and very low overhead on the web thanks to WebAssembly and WebGPU, new high-performance browser technologies.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DISCIPLINES ▟ -->
|
||||
<!-- ▙ OVERVIEW ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ NEWSLETTER ▜ -->
|
||||
<section id="newsletter" class="feature-box-outer">
|
||||
<div id="newsletter-success"><!-- Used only as a URL hash fragment anchor --></div>
|
||||
<!-- ▛ PROCEDURALISM ▜ -->
|
||||
<section id="proceduralism" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
|
||||
<h1 class="feature-box-header">Stay in the loop</h1>
|
||||
<div class="block">
|
||||
|
||||
<h1 class="feature-box-header">The power of proceduralism</h1>
|
||||
|
||||
---
|
||||
|
||||
Graphite is the first and only graphic design package built for procedural editing — where everything is nondestructive.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="diptych red-dress">
|
||||
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Explore more creative avenues</h1>
|
||||
|
||||
Save hours on tedious alterations and make better creative choices. Graphite lets you iterate rapidly by adjusting node parameters instead of individual elements.
|
||||
|
||||
Scatter circles with just a couple nodes...
|
||||
Want them denser? Bigger? Those are sliders.
|
||||
Want a different placement area? Just tweak the path.
|
||||
|
||||
<a href="https://editor.graphite.rs/#demo/red-dress">Open this artwork</a> and give it a try yourself.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="diptych leaves">
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Mix and morph parameters</h1>
|
||||
|
||||
Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging sliders.
|
||||
|
||||
Blend across color schemes. Morph shapes before they're scattered around the canvas. The possibilities are endless.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="block pipelines">
|
||||
|
||||
## Geared for generative pipelines
|
||||
|
||||
Graphite's representation of artwork as a node graph lets you customize, compose, reuse, share, and automate your own content workflows:
|
||||
|
||||
<div class="feature-icons four-wide">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Pixelation-free infinite zooming and panning of boundless content</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Modular node-based pipelines for generative AI <em>(soon)</em></span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Asset pipelines for studio production environments <em>(soon)</em></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ PROCEDURALISM ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ NEWSLETTER ▜ -->
|
||||
<section id="newsletter" class="feature-box-narrow">
|
||||
<div id="newsletter-success"><!-- Used only as a URL hash fragment anchor --></div>
|
||||
|
||||
<div class="diptych">
|
||||
|
||||
<div class="block newsletter-signup">
|
||||
|
||||
**Subscribe to the newsletter** for quarterly updates on major development progress. And follow along—or join the conversation—on social media.
|
||||
<h1 class="feature-box-header">Stay in the loop</h1>
|
||||
|
||||
Subscribe to the newsletter for quarterly updates on major development progress. And follow along—or join the conversation—on social media.
|
||||
|
||||
<div class="newsletter-success">
|
||||
|
||||
|
|
@ -300,114 +427,17 @@ You'll receive your first newsletter email with the next major Graphite news.
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ NEWSLETTER ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ PROCEDURALISM ▜ -->
|
||||
<section id="proceduralism">
|
||||
<div class="block">
|
||||
|
||||
# The power of proceduralism
|
||||
|
||||
**Graphite is the first and only graphic design package built for procedural editing — where everything is nondestructive.**
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-red-dress">
|
||||
<div class="diptych">
|
||||
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Explore creative possibilities (without the grunt work)</h1>
|
||||
|
||||
---
|
||||
|
||||
Save hours on tedious alterations and make better creative choices. Graphite lets you iterate rapidly by adjusting node parameters instead of individual elements.
|
||||
|
||||
Scatter circles with just a couple nodes...
|
||||
Want them denser? Bigger? Those are sliders.
|
||||
Want a different placement area? Just tweak the path.
|
||||
|
||||
<a href="https://editor.graphite.rs/#demo/procedural-string-lights">Open this artwork</a> and give it a try yourself.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-leaves">
|
||||
<div class="diptych">
|
||||
|
||||
<div class="block description">
|
||||
|
||||
<h1 class="feature-box-header balance-text">Mix and morph parameters</h1>
|
||||
|
||||
---
|
||||
|
||||
Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging sliders.
|
||||
|
||||
Blend across color schemes. Morph shapes before they're scattered around the canvas. The possibilities are endless.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="block video-background">
|
||||
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
|
||||
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="proceduralism-features">
|
||||
<div class="block">
|
||||
|
||||
Graphite's procedural, data-driven approach to graphic design affords unique capabilities *(while in alpha, these remain a work in progress)*:
|
||||
|
||||
<div class="feature-icons four-wide">
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Infinitely scalable raster content with no pixelation</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Modular node-based pipelines for generative AI</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Fully nondestructive editing with node-driven layers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
|
||||
<span class="balance-text">Procedural pipelines for studio production environments</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ PROCEDURALISM ▟ -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- ▛ DONATE ▜ -->
|
||||
<section id="donate" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
<section id="donate" class="feature-box-narrow">
|
||||
|
||||
<div class="block">
|
||||
|
||||
<h1 class="feature-box-header">Support the mission</h1>
|
||||
|
||||
---
|
||||
|
||||
<div class="block">
|
||||
|
||||
<p class="balance-text">
|
||||
You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
|
||||
Graphite is built by a small, dedicated crew of volunteers in need of the resources to grow.
|
||||
|
|
@ -417,32 +447,66 @@ Graphite is built by a small, dedicated crew of volunteers in need of the resour
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DONATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DIVE IN ▜ -->
|
||||
<section id="dive-in">
|
||||
<section id="dive-in" class="block">
|
||||
|
||||
<div class="block">
|
||||
|
||||
# Ready to dive in?
|
||||
## Ready to dive in?
|
||||
|
||||
**Get started with Graphite by following along to a hands-on quickstart tutorial.**
|
||||
Get started with Graphite by following along to a hands-on quickstart tutorial.
|
||||
|
||||
<div class="video-container">
|
||||
<div class="block video-container">
|
||||
<div>
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Then keep learning with the Graphite manual:
|
||||
<div class="buttons">
|
||||
<a href="https://editor.graphite.rs" class="button arrow">Launch Graphite</a>
|
||||
<a href="/learn" class="button arrow">Continue learning</a>
|
||||
</div>
|
||||
|
||||
<a href="/learn" class="button arrow">Keep learning</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- ▙ DIVE IN ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ RECENT NEWS ▜ -->
|
||||
<section id="recent-news" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
|
||||
<h1 class="feature-box-header">Recent news <span> / </span> <a href="/blog" class="link arrow">More in the blog</a></h1>
|
||||
|
||||
---
|
||||
|
||||
<div class="diptych">
|
||||
<!-- replacements::blog_posts(count = 2) -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DIVE IN ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▙ RECENT NEWS ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DEMO VIDEO ▜ -->
|
||||
<!--
|
||||
<section id="demo-video">
|
||||
<div class="block">
|
||||
Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: "Commander Basstronaut" Artwork (25x Timelapse)" />
|
||||
</div>
|
||||
(Recorded in an older version of Graphite from early 2023.)
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
<!-- ▙ DEMO VIDEO ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ IMAGINATE ▜ -->
|
||||
|
||||
<!-- TODO: Reenable when Imaginate is properly working again -->
|
||||
|
|
@ -527,35 +591,3 @@ Then keep learning with the Graphite manual:
|
|||
-->
|
||||
|
||||
<!-- ▙ IMAGINATE ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ DEMO VIDEO ▜ -->
|
||||
<!-- <section id="demo-video">
|
||||
<div class="block">
|
||||
|
||||
Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
|
||||
|
||||
<div class="video-embed aspect-16x9">
|
||||
<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: "Commander Basstronaut" Artwork (25x Timelapse)" />
|
||||
</div>
|
||||
|
||||
(Recorded in an older version of Graphite from early 2023.)
|
||||
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- ▙ DEMO VIDEO ▟ -->
|
||||
<!-- -->
|
||||
<!-- ▛ RECENT NEWS ▜ -->
|
||||
<section id="recent-news" class="feature-box-outer">
|
||||
<div class="feature-box-inner">
|
||||
|
||||
<h1 class="feature-box-header">Recent news <span> / </span> <a href="/blog" class="link arrow">More in the blog</a></h1>
|
||||
|
||||
---
|
||||
|
||||
<div class="diptych">
|
||||
<!-- replacements::blog_posts(count = 2) -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ RECENT NEWS ▟ -->
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ css = ["about.css"]
|
|||
+++
|
||||
|
||||
<section>
|
||||
|
||||
<div class="block">
|
||||
|
||||
# About Graphite
|
||||
|
|
@ -13,9 +14,7 @@ css = ["about.css"]
|
|||
Graphite is a community-built free software project. If you find it valuable, consider [donating](/donate) or [getting involved](/volunteer) to keep it sustainable.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="block">
|
||||
|
||||
## Project
|
||||
|
|
@ -23,9 +22,6 @@ Graphite is a community-built free software project. If you find it valuable, co
|
|||
The idea for Graphite began with a desire to create artwork and edit photos using free software that felt user-friendly and truly modern. Over time, that dream evolved to reconsider what "modern" meant for the landscape of 2D graphics editing. By borrowing concepts popular in 3D software, what could a procedural, nondestructive design tool look like if nothing was too ambitious? Answering that question took years of design exploration, leading to a community of savvy developers volunteering to turn that formidable dream into a reality.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="diptych">
|
||||
|
||||
|
|
@ -163,7 +159,6 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
|
|||
|
||||
|
||||
<section>
|
||||
|
||||
<div class="triptych">
|
||||
|
||||
<div class="block">
|
||||
|
|
@ -195,5 +190,4 @@ More information about the Graphite logo, including its community-focused usage
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Your monthly support (or one-off contribution) helps provide the resources neede
|
|||
|
||||
<br />
|
||||
|
||||
(Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is helpful if you already have spare Nitro boosts!)
|
||||
(Additionally, boosting the [Graphite Discord server](https://discord.graphite.rs) is helpful if you already have spare Nitro boosts.)
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Pre-Alpha —</h3>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Editor systems; basic vector art tools</span>
|
||||
</div>
|
||||
<!-- Alpha 1 -->
|
||||
|
|
@ -98,7 +98,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Alpha 1 —</h3>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Better tools; node graph prototyping</span>
|
||||
</div>
|
||||
<!-- Alpha 2 -->
|
||||
|
|
@ -106,7 +106,7 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Alpha 2 —</h3>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Node graph integration in documents</span>
|
||||
</div>
|
||||
<!-- Alpha 3 -->
|
||||
|
|
@ -114,71 +114,75 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Alpha 3 —</h3>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Stackable adjustment layers</span>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Boolean operations for shapes</span>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Editable nested node subgraphs</span>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Procedurally alterable vector data</span>
|
||||
</div>
|
||||
<div class="feature-icon complete" title="Development Complete">
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>New vector 2D renderer (with <a target="_blank" href="https://github.com/linebender/vello">Vello</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Interactive graph auto-layout</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Imaginate (Stable Diffusion node/tool)</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>GPU-accelerated raster rendering</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Infinitely zoomable/panable content</span>
|
||||
</div>
|
||||
<div class="feature-icon ongoing" title="Development Ongoing">
|
||||
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Raw photo processing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Timeline with animation channels</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 57" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Signed distance fields</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Lightweight desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Local file browser for saving/loading</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Local fonts access</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Graph data attribute spreadsheets</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Fully functional brush tool</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Stable document format</span>
|
||||
</div>
|
||||
<!-- Alpha 4 -->
|
||||
|
|
@ -186,47 +190,47 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Alpha 4 —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Variable color swatches</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Select mode (marquee masking)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Command palette and context menus</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Reconfigurable workspace panels</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Outliner panel (node graph tree view)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Shape builder tool</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Mesh vector format</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Guide mode (construction geometry)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>AI nodes and tools (e.g. magic wand)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Hosted compile/render server</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Code editor for custom nodes</span>
|
||||
</div>
|
||||
<!-- Beta -->
|
||||
|
|
@ -234,43 +238,43 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— Beta —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Internationalization and accessibility</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Document history management</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Frozen-in-time graph references</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Automation and batch processing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Liquify and non-affine transforms</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>HDR and WCG color handling</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>CMYK and other color spaces</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Asset libraries and marketplace</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Advanced typography and typesetting</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Predictive graph rendering/caching</span>
|
||||
</div>
|
||||
<!-- 1.0 Release -->
|
||||
|
|
@ -278,67 +282,67 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
|
|||
<h3>— 1.0 Release —</h3>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Fully native UI rewrite (with <a target="_blank" href="https://github.com/linebender/xilem">Xilem</a>)</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Procedural styling of paint brushes</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>CAD-like constraint relationships</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Responsive design constraint solvers</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>PDF export</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Finer-grain control over SVG export</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Portable, embeddable render engine</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Distributed graph rendering</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Cloud document storage</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Multiplayer collaborative editing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Offline edit resolution with CRDTs</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>SVG animation authorship</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Live video compositing</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>Pen and touch-only interaction</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span>iPad app</span>
|
||||
</div>
|
||||
<div class="feature-icon">
|
||||
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
|
||||
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
|
||||
<span><em>…and that's all just the beginning…</em></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ css = ["volunteer.css"]
|
|||
|
||||
# Volunteer
|
||||
|
||||
**Graphite is built by volunteers.** Join the effort to bring great, free creative software to the world.
|
||||
**Graphite is 100% built by volunteers.** Get involved in the effort to bring great, free creative software to the world.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -35,14 +35,14 @@ css = ["volunteer.css"]
|
|||
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### EDITOR TEAM
|
||||
<h1 class="feature-box-header">Editor team</h1>
|
||||
|
||||
The Graphite editor is built much like a game engine, split across user interface application tooling and a renderer with nodes implementing an assortment of graphics algorithms.
|
||||
|
||||
</div>
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### GRAPHENE TEAM
|
||||
<h1 class="feature-box-header">Graphene team</h1>
|
||||
|
||||
[Graphene](/volunteer/guide/graphene) is a programming language, interpreter, and runtime environment built upon Rust which enables Graphite artwork to compile to executable programs for fast rendering.
|
||||
|
||||
|
|
@ -71,14 +71,14 @@ The Graphite editor is built much like a game engine, split across user interfac
|
|||
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### ART TEAM
|
||||
<h1 class="feature-box-header">Art team</h1>
|
||||
|
||||
Use your artistic talents to conceptualize and produce high-quality open art projects published by the Graphite project to stress-test and showcase the editor's capabilities.
|
||||
|
||||
</div>
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### MARKETING TEAM
|
||||
<h1 class="feature-box-header">Marketing team</h1>
|
||||
|
||||
Help write, edit, and design content for this website, social media, newsletters, blog posts, user manual pages, videos, fundraising campaigns, press releases, and industry outreach.
|
||||
|
||||
|
|
@ -106,14 +106,14 @@ Help write, edit, and design content for this website, social media, newsletters
|
|||
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### QA TEAM
|
||||
<h1 class="feature-box-header">QA team</h1>
|
||||
|
||||
Get familiar with the ins-and-outs of the editor and respond actively to developer requests on a recurring basis to test out new features and find bugs and breakages.
|
||||
|
||||
</div>
|
||||
<div class="block feature-box-narrow">
|
||||
|
||||
### NODES TEAM
|
||||
<h1 class="feature-box-header">Nodes team</h1>
|
||||
|
||||
Explore and push the limits of the node graph with complex procedural designs. Report your findings about limitations, opportunities, and use cases to help in designing new nodes.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue