fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update the website with some new content

Browse Source
This commit is contained in:
Keavon Chambers
2023-04-05 02:34:16 -07:00
parent a74376e224
commit 4bdb026d9a
6 changed files with 424 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
website/templates/index.html
View File

@@ -33,7 +33,7 @@
<section id="hero-message">
<h1 class="hero">Redefining state-of-the-art graphics editing.</h1>
<p class="balance-text">Graphite is an in-development raster and vector 2D graphics editor that is free and open source. It is powered by a node graph compositing engine that supercharges your
<p class="balance-text"><strong>Graphite</strong> is an in-development raster and vector 2D graphics editor that is free and open source. It is powered by a node graph compositing engine that supercharges your
layer stack, providing a completely non-destructive editing experience.</p>
</section>
@@ -51,19 +51,19 @@
<section id="screenshots">
<div class="carousel">
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" />
<!-- <img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" /> -->
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="carousel torn left">
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" />
<!-- <img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" /> -->
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="carousel torn right">
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" />
<!-- <img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" /> -->
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" />
<img src="https://static.graphite.rs/content/index/gui-demo-yosemite.png" />
</div>
<div class="screenshot-details">
<div class="carousel-controls">
@@ -74,7 +74,7 @@
</svg>
</button>
<button class="dot active"></button>
<button class="dot"></button>
<!-- <button class="dot"></button> -->
<button class="dot"></button>
<button class="direction next">
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
@@ -85,29 +85,24 @@
</div>
<div class="screenshot-description">
<p class="balance-text active">
"Valley of Spires" vector artwork made in Graphite, a web-based vector graphics editor.
</p>
<!-- <p class="balance-text">
Viewport interface mockup showcasing a photo editing project that utilizes Graphite's raster graphics pipeline, one of the upcoming roadmap milestones. Photo editing is not yet supported.
</p>
</p> -->
<p class="balance-text">
Node graph mockup demonstrating how the the Layer Tree panel directly corresponds to the node graph. Thick vertical (upward) lines represent compositing stacks between layers and horizontal (rightward) links represent data flow connections between nodes.
</p>
<p class="balance-text">
(Outdated, early 2022) Vector artwork created in the alpha version of the Graphite editor. Try this out at
<a href="https://editor.graphite.rs">editor.graphite.rs</a>
instantly in your browser.
Near-future node graph mockup demonstrating how the the layer panel directly corresponds to the node graph. Thick vertical (upward) lines represent compositing stacks between layers and horizontal (rightward) links represent data flow connections between nodes. This workflow is coming soon.
</p>
</div>
</div>
<hr />
</section>
<section id="opener-message" class="section-row right">
<div class="graphic">
<img src="https://static.graphite.rs/content/index/brush__2.svg" alt="" />
</div>
<section id="opener-message" class="section-row">
<div class="section">
<h1>Professional 2D content creation for everyone.</h1>
<h1>A 2D creative tool made for everyone.</h1>
<p>
With great power comes great accessibility. Graphite is built on the belief that the best creative tools can be powerful and within reach of all.
With great power comes great accessibility. Graphite is built on the belief that the best creative tools can be powerful and within reach of all, from students to studios.
</p>
<p>
Graphite is designed with a friendly and intuitive interface where a delightful user experience is of first-class importance. It is available for free under an open source
@@ -117,39 +112,119 @@
or an upcoming native client on Windows, Mac, and Linux.
</p>
<p>
The accessible design of Graphite does not sacrifice versatility for simplicity. The node-based workflow (coming soon) will open doors to an ecosystem of powerful capabilities catering to
the casual and professional user alike, encompassing a wide set of use cases at every skill level.
It's easy to learn and teach, yet Graphite's accessible design does not sacrifice versatility for simplicity. The node-based workflow opens doors to an ecosystem of powerful capabilities catering to
casual and professional users alike.
</p>
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
</div>
</section>
<section id="available-now" class="section-row left">
<div class="graphic">
<img src="https://static.graphite.rs/content/index/alpha.svg" alt="" />
</div>
<section id="demo-video" class="section-row">
<div class="section">
<h1>Available now for alpha testing.</h1>
<p>
One year ago, Graphite was merely an idea. Today, the first milestone of the alpha release series is available for testing.
</p>
<p>
Milestone 1 focused on building an editor interface with basic vector design and illustration tools. Now the alpha release series moves toward Milestone 2: developing a novel node-based
vector graphics workflow. After that, raster graphics and more are planned in the <a href="/features">roadmap</a>.
</p>
<p>
Features and fixes will continue rolling out every few days. Please report bugs and vote on issue prioritization <a href="https://github.com/orgs/GraphiteEditor/projects/1/views/1">through GitHub</a>. While you're there, give the project a star to help grow its momentum.
</p>
<p>
Try Graphite instantly in your browser:
</p>
<a href="https://editor.graphite.rs" class="link arrow">Launch the Editor</a>
<div class="video-embed aspect-16x9">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/JgJvAHQLnXA" title="Graphite Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
</div>
</section>
<section id="disciplines" class="section-row">
<div class="section">
<h1>One app to rule them all.</h1>
<p>Stop jumping between programs. Planned developments will make Graphite a first-class design tool for these disciplines (listed by priority):</p>
<div class="informational-group concepts">
<div class="informational">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>Graphic Design</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>Image Editing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>Digital Painting</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>Desktop Publishing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>VFX Compositing</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
<span>Motion Graphics</span>
</div>
</div>
</div>
</section>
<section id="community" class="section-row">
<div class="diptych">
<div id="newsletter" class="section">
<h1>Stay in the loop.</h1>
<p>
Subscribe to the newsletter for quarterly updates on major development progress.
</p>
<div id="newsletter-success">
<h2>Thanks!</h2>
<p>You'll receive your first newsletter email with the next major Graphite news.</p>
</div>
<form action="https://graphite.rs/newsletter-signup" method="post">
<div class="same-line">
<div class="column name">
<label for="newsletter-name">First + last name:</label>
<input id="newsletter-name" name="name" type="text" required />
</div>
<div class="column phone">
<label for="newsletter-phone">Phone:</label>
<input id="newsletter-phone" name="phone" type="text" tabindex="-1" autocomplete="off" />
</div>
<div class="column email">
<label for="newsletter-email">Email address:</label>
<input id="newsletter-email" name="email" type="email" required />
</div>
</div>
<div class="column submit">
<input type="submit" value="Subscribe" class="button" />
</div>
</form>
</div>
<div id="social" class="section">
<h1>Follow along.</h1>
<p>
High-quality open source software is a community endeavor. Hang out with hundreds of friendly Graphite users and developers.
</p>
<div class="social-links">
<div class="column">
<a href="https://discord.graphite.rs" target="_blank">
<img src="https://static.graphite.rs/icons/discord.svg" alt="Discord" />
<span class="link arrow">Join on Discord</span>
</a>
<a href="https://www.reddit.com/r/graphite/" target="_blank">
<img src="https://static.graphite.rs/icons/reddit.svg" alt="Reddit" />
<span class="link not-uppercase arrow">/r/Graphite</span>
</a>
</div>
<div class="column">
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
<span class="link arrow">Star on GitHub</span>
</a>
<a href="https://twitter.com/graphiteeditor" target="_blank">
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
<span class="link not-uppercase arrow">@GraphiteEditor</span>
</a>
</div>
</div>
</div>
</section>
<section id="upcoming-tech" class="feature-box">
<div class="box">
<h1 class="box-header">Upcoming Tech <span> / </span> <a href="/features" class="link arrow">More in the Roadmap</a></h1>
<h1 class="box-header">Upcoming Tech <span> / </span> <a href="/features" class="link arrow">More details</a></h1>
<hr />
<div class="triptych">
<div class="section">
@@ -234,67 +309,6 @@
</div>
</section>
<section id="community" class="section-row">
<div class="diptych">
<div id="newsletter" class="section">
<h1>Stay in the loop.</h1>
<p>
Graphite is early in development and the most ambitious features are still to come. Subscribe for occasional news about big development updates. The first newsletter will be sent for the Alpha Milestone 2 release, featuring node-based editing.
</p>
<div id="newsletter-success">
<h2>Thanks!</h2>
<p>You'll receive your first newsletter email with the next major Graphite news.</p>
</div>
<form action="https://graphite.rs/newsletter-signup" method="post">
<div class="same-line">
<div class="column name">
<label for="newsletter-name">First + last name:</label>
<input id="newsletter-name" name="name" type="text" required />
</div>
<div class="column phone">
<label for="newsletter-phone">Phone:</label>
<input id="newsletter-phone" name="phone" type="text" tabindex="-1" autocomplete="off" />
</div>
<div class="column email">
<label for="newsletter-email">Email address:</label>
<input id="newsletter-email" name="email" type="email" required />
</div>
</div>
<div class="column submit">
<input type="submit" value="Subscribe" class="button" />
</div>
</form>
</div>
<div id="social" class="section">
<h1>Follow along.</h1>
<p>
High-quality open source software is a community endeavor. Whether you're an artist, a coder, or (like many of us) something in between— you'll be perfect in the Graphite community. Hang out with hundreds of other Graphite users, testers, and developers.
</p>
<div class="social-links">
<div class="column">
<a href="https://discord.graphite.rs" target="_blank">
<img src="https://static.graphite.rs/icons/discord.svg" alt="Discord" />
<span class="link arrow">Join on Discord</span>
</a>
<a href="https://www.reddit.com/r/graphite/" target="_blank">
<img src="https://static.graphite.rs/icons/reddit.svg" alt="Reddit" />
<span class="link not-uppercase arrow">/r/Graphite</span>
</a>
</div>
<div class="column">
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
<span class="link arrow">Star on GitHub</span>
</a>
<a href="https://twitter.com/graphiteeditor" target="_blank">
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
<span class="link not-uppercase arrow">@GraphiteEditor</span>
</a>
</div>
</div>
</div>
</section>
<section id="recent-news" class="feature-box">
<div class="box">
<h1 class="box-header">Recent News <span> / </span> <a href="/blog" class="link arrow">More in the Blog</a></h1>