mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-12-23 10:11:54 +00:00
Update the website with some new content
This commit is contained in:
Keavon Chambers
parent
a74376e224
commit
4bdb026d9a
6 changed files with 424 additions and 171 deletions
28
README.md
28
README.md
|
|
@ -12,34 +12,26 @@ Graphite is an in-development raster and vector 2D graphics editor that is free
|
|||
|
||||
Graphite is a lightweight vector graphics editor that runs in your browser. Its nascent node-based compositor lets you apply raster effects and co-create amazing art with AI in a non-destructive workflow. Fully-featured raster image editing and a native desktop application are the current focus of development and will be made available in the coming months.
|
||||
|
||||
Launch the [latest alpha version](https://editor.graphite.rs) and learn more on the [project website](https://graphite.rs/).
|
||||
Launch the latest alpha release of the [Graphite editor](https://editor.graphite.rs) and learn more on the [project website](https://graphite.rs/).
|
||||
|
||||
⭐ Please remember to star this project here on GitHub! ⭐
|
||||
|
||||
## Discord
|
||||
|
||||
|
||||
## Discord community
|
||||
|
||||
[Join our Discord community](https://discord.graphite.rs) to chat with the community and development team. Feel free to lurk, ask questions, give suggestions, or get involved in the project. We are always seeking new collaborators to help test, design, and develop the software and this is where we communicate.
|
||||
|
||||
## Building/Contributing
|
||||
## Building/contributing
|
||||
|
||||
We need Rust and web developers! See [instructions here](https://graphite.rs/contribute/) for setting up the project and getting started.
|
||||
|
||||
We are also in search of artists to create beautiful sample work in Graphite and illustrations for the website and social media. Please [get in touch](https://graphite.rs/contact/) if you are able to help out.
|
||||
|
||||
## Design
|
||||
|
||||
The #1 priority for the Graphite software is providing an approachable, delightful user experience. The UI, UX, and product design is not an afterthought; rather, it is a central guiding principle in the software development process.
|
||||
|
||||
Below are some mockups demonstrating near-future goals for the user interface once nodes and raster photo editing is fully available.
|
||||
|
||||
|
||||
|
||||
_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._
|
||||
|
||||
|
||||
|
||||
_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._
|
||||
|
||||
## Features/Roadmap
|
||||
## Feature and roadmap
|
||||
|
||||
[See the web page for this information.](https://graphite.rs/features/)
|
||||
|
||||
## Support the project
|
||||
|
||||
Please consider pledging a monthly donation using the "♥ Sponsor" button to the right part of this project repository page. Your contribution helps sustain this volunteer-run open source project and brings powerful, free creative tools to the masses.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
+++
|
||||
title = "Features and roadmap"
|
||||
template = "page.html"
|
||||
|
||||
[extra]
|
||||
css = "/features.css"
|
||||
+++
|
||||
|
||||
<section class="section-row">
|
||||
|
|
@ -8,63 +11,210 @@ template = "page.html"
|
|||
|
||||
# Features and roadmap.
|
||||
|
||||
The current version of Graphite provides tools for designing vector art with Bezier curves, similar to tools like Inkscape, Illustrator, and Affinity Designer. These creations may be exported to SVG, JPG, or PNG formats. External images may be imported and placed in the document as a layer (but not directly edited yet).
|
||||
The current version of Graphite provides tools for designing vector art with Bézier curves, similar to desktop applications like Inkscape, Illustrator, and Affinity Designer.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
The present priority is building the node graph system and integrating it with the existing vector editing toolset. Once ready, work will shift to building a raster-based render engine. More advanced features will build off those core capabilities.
|
||||
<section class="section-row">
|
||||
<div class="diptych">
|
||||
|
||||
Short-term feature development at a granular level is tracked in the [Task Board](https://github.com/orgs/GraphiteEditor/projects/1/views/1) on GitHub. Check that out to see what's coming down the pipeline during monthly sprints. Graphite does not use formal version numbers because of the constant rate of feature development and continuous release cycle. Changes can be tracked by [commit hash](https://github.com/GraphiteEditor/Graphite/commits/master) and progress divided into [monthly sprints](https://github.com/GraphiteEditor/Graphite/milestones). The hosted web app deploys a [recent commit](https://github.com/GraphiteEditor/Graphite/releases/tag/latest-stable) from the past week or two.
|
||||
<div id="graphite-today" class="section">
|
||||
|
||||
## Milestones
|
||||
## Graphite today.
|
||||
|
||||
Release series are announced based on major technology readiness milestones. Following a year of pre-alpha development, alpha milestone 1 was [announced](https://graphite.rs/blog/announcing-graphite-alpha/) and work has continued under that banner while progressing towards the features of the second milestone release.
|
||||
Graphite is a lightweight vector graphics editor that runs in your browser. Its nascent node-based compositor lets you apply image effects and co-create amazing art with AI.
|
||||
|
||||
- Alpha Milestone 1 is the current release series available at [editor.graphite.rs](https://editor.graphite.rs) which encompasses minimum-viable-product (MVP) vector editing features. Features and improvements are continually added and deployed. Regrettably, file format stability isn't guaranteed at this stage since it would prohibitively hinder the pace of development.
|
||||
<div class="informational-group features">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Vector editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Node graph image effects</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>AI-assisted art creation</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Open source and free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
- Alpha Milestone 2 is the next release series. It will introduce the node graph system for procedural vector editing. This is expected to be ready before the end of 2022.
|
||||
<a href="https://editor.graphite.rs" class="link arrow">Launch Graphite</a>
|
||||
|
||||
- Alpha Milestone 3 will probably focus on switching to an in-house vector graphics render engine built on [wgpu](https://wgpu.rs/).
|
||||
</div>
|
||||
<div id="graphite-tomorrow" class="section">
|
||||
|
||||
- Alpha Milestone 4 will probably introduce raster compositing.
|
||||
## Graphite tomorrow.
|
||||
|
||||
- Beta versions will follow once basic procedural vector and raster editing is fully supported. File format stability, authoring + sharing custom nodes/extensions, and a downloadable native desktop client will be included during or before Beta.
|
||||
All the digital content creation tools a professional needs— in one streamlined package:
|
||||
|
||||
- RAW photo editing, advanced color handling, automation and batch processing, and procedural painting workflows will be added during further Beta development.
|
||||
<div class="informational-group features">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Looks and feels like traditional <span style="text-decoration: underline dotted; text-decoration-color: #16323f77;" title=""what you see is what you get"">WYSIWYG</span> design apps</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Sleek, intuitive interface built by designers, for designers</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Real-time collaborative editing</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Windows/Mac/Linux/Web/iPad</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Planned capabilities
|
||||
The full Graphite vision wholly embraces procedural workflows:
|
||||
|
||||
Below is an incomplete list of planned features and longer-term aspirations.
|
||||
<div class="informational-group features">
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Fully non-destructive editing with node-driven layers</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Infinitely scalable raster content with no pixelation</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Integrates leading-edge AI models and graphics algorithms</span>
|
||||
</div>
|
||||
<div class="informational">
|
||||
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/content/index/icon-atlas-features-preview.png" alt="" />
|
||||
<span>Procedural pipelines for studio production environments</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Short Term:
|
||||
- Node graph and layer tree
|
||||
- Procedural generation
|
||||
- Importing SVG files
|
||||
|
||||
Medium Term:
|
||||
- Mixed vector and raster workflow
|
||||
- Compositing engine
|
||||
- Resolution-agnostic rendering
|
||||
- RAW photo editing
|
||||
- HDR/WCG color handling
|
||||
- Data viz/graph/chart creation
|
||||
- Data-driven template replacement
|
||||
- Advanced typesetting
|
||||
- Procedural painting
|
||||
- CAD-like constraint solver
|
||||
- Real-time collaborative editing
|
||||
- Custom node scripting
|
||||
- Asset manager and store
|
||||
- Batch conversion and processing
|
||||
- Portable render engine
|
||||
- Localization/internationalization
|
||||
- Keyboardless touch and stylus controls
|
||||
- Native desktop application
|
||||
|
||||
Long Term:
|
||||
- Physically-based painting
|
||||
- Motion graphics and animation
|
||||
- Live video compositing
|
||||
- Animated SVG authorship
|
||||
- Distributed rendering system
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="upcoming-tech" class="feature-box">
|
||||
<div class="box">
|
||||
|
||||
<h1 class="box-header">Upcoming Tech: How it works</h1>
|
||||
|
||||
---
|
||||
|
||||
<!-- Graphite's concept is unique among graphics editors and requires some explanation. Here's a glimpse at that secret sauce. -->
|
||||
|
||||
<div class="diptych">
|
||||
|
||||
<div class="section">
|
||||
|
||||
## Layers & nodes: hybrid compositing.
|
||||
|
||||
Graphite combines the best ideas from multiple categories of digital content creation software to form a design for the ultimate general-purpose 2D graphics editor. It is influenced by the central editing experience of traditional layer-based raster and vector apps. It takes inspiration from the non-destructive workflows of VFX compositing programs used in Hollywood. And it borrows the creative superpowers of procedural asset creation applications in the 3D industry.
|
||||
|
||||
Classic layer-based image editing is easy to understand and its collapsable folders help artists stay organized. A variety of interactive viewport tools make it easy to manipulate the layers by drawing directly onto the canvas. On the other hand, node-based editing is like artist-friendly programming. It works by describing manipulations as steps in a flowchart, which is vastly more powerful but comes with added complexity.
|
||||
|
||||
The hybrid workflow of Graphite offers a classic tool-centric, layer-based editing experience built around a procedural, node-based compositor. Users can ignore the node graph, use it exclusively, or switch back and forth with the press of a button while creating content. Interacting with the canvas using tools will manipulate the nodes behind the scenes. And the layer panel and node graph provide two equivalent, interchangeable views of the same document structure.
|
||||
|
||||
</div>
|
||||
<div class="section">
|
||||
|
||||
## Raster & vector: sharp at all sizes.
|
||||
|
||||
Digital 2D art commonly takes two forms. Raster artwork is made out of pixels which means it can look like anything imaginable, but it becomes blurry or pixelated from upscaling to a higher resolution. Vector artwork is made out of curved shapes which is perfect for some art styles but limiting to others. The magic of vector is that its mathematically-described curves can be enlarged to any size and remain crisp.
|
||||
|
||||
Other apps usually focus on just raster or vector, forcing artists to buy and learn both products. Mixing art styles requires shuttling content back and forth between programs. And since picking a raster document resolution is a one-time deal, artists may choose to start really big, resulting in sluggish editing performance and multi-gigabyte documents.
|
||||
|
||||
Graphite reinvents raster rendering so it stays sharp at any scale. Artwork is treated as data, not pixels, and is always drawn at the current view resolution. Zoom the viewport and export images at any size— the document's paint brushes, masks, filters, and effects will all be rendered at the native resolution.
|
||||
|
||||
Marrying vector and raster under one roof enables both art forms to complement each other in a holistic content creation workflow.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-row">
|
||||
<div class="section">
|
||||
|
||||
## Development roadmap.
|
||||
|
||||
Short-to-medium-term feature development is tracked at a granular level in the [Task Board](https://github.com/GraphiteEditor/Graphite/projects/1) on GitHub. Graphite uses a continuous release cycle without version numbers where changes can be tracked by [commit hash](https://github.com/GraphiteEditor/Graphite/commits/master). The stable release at [editor.graphite.rs](https://editor.graphite.rs) deploys a [recent commit](https://github.com/GraphiteEditor/Graphite/releases/tag/latest-stable) from the past several weeks, while [dev.graphite.rs](https://dev.graphite.rs) hosts the latest commit.
|
||||
|
||||
<h3>— Pre-Alpha (complete) —</h3>
|
||||
<ul>
|
||||
<li>First year of development (complete, details omitted)</li>
|
||||
</ul>
|
||||
<h3>— Alpha Milestone 1 (ongoing) —</h3>
|
||||
<ul>
|
||||
<li>Second year of development (complete, details omitted)</li>
|
||||
<li>Brush tool (in-progress)</li>
|
||||
<li>WebGPU in supported browsers (in-progress)</li>
|
||||
<li>Vertical compositing of nodes</li>
|
||||
<li>Node-based layer tree</li>
|
||||
<li>Graph-based documents</li>
|
||||
<li>Self-updating desktop app</li>
|
||||
<li>Custom subgraph document nodes</li>
|
||||
</ul>
|
||||
<h3>— Alpha Milestone 2 —</h3>
|
||||
<ul>
|
||||
<li>Graph data attributes</li>
|
||||
<li>Spreadsheet-based vector data</li>
|
||||
<li>Editable SVG import</li>
|
||||
<li>Rust-based vector renderer</li>
|
||||
<li>Select mode and masking</li>
|
||||
<li>New viewport overlays system</li>
|
||||
<li>Resolution-agnostic raster rendering</li>
|
||||
<li>Powerful snapping and grid system</li>
|
||||
<li>Remote compile/render server</li>
|
||||
<li>Code editor for custom nodes</li>
|
||||
<li>Document history system</li>
|
||||
<li>Stable document format</li>
|
||||
</ul>
|
||||
<h3>— Alpha Milestone 3 —</h3>
|
||||
<ul>
|
||||
<li>RAW photo import and processing</li>
|
||||
<li>Procedural paint brush styling</li>
|
||||
<li>Frozen history references</li>
|
||||
<li>Internationalization and accessability</li>
|
||||
<li>Reconfigurable workspace panels</li>
|
||||
<li>Liquify and non-affine rendering</li>
|
||||
<li>Interactive graph auto-layout</li>
|
||||
<li>Automation and batch processing</li>
|
||||
</ul>
|
||||
<h3>— Beta —</h3>
|
||||
<ul>
|
||||
<li>Guide mode</li>
|
||||
<li>CAD-like constraint solver</li>
|
||||
<li>Constraint models for UI layouts</li>
|
||||
<li>Advanced typography and typesetting</li>
|
||||
<li>PDF export</li>
|
||||
<li>HDR and WCG color handling</li>
|
||||
<li>Node manager and marketplace</li>
|
||||
<li>Predictive graph rendering/caching</li>
|
||||
<li>Distributed graph rendering</li>
|
||||
<li>Cloud document storage</li>
|
||||
<li>Multiplayer collaborative editing</li>
|
||||
<li>Offline edit resolution with CRDTs</li>
|
||||
<li>Native UI rewrite from HTML frontend</li>
|
||||
</ul>
|
||||
<h3>— 1.0 Release —</h3>
|
||||
<ul>
|
||||
<li>Timeline and renderer for animation</li>
|
||||
<li>Live video compositing</li>
|
||||
<li>Pen and touch-only interaction</li>
|
||||
<li>iPad app</li>
|
||||
<li>Portable render engine</li>
|
||||
<li>SVG animation</li>
|
||||
</ul>
|
||||
<h3>— Future Releases —</h3>
|
||||
<ul>
|
||||
<li><em>…and that's just the beginning…</em></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ h3 ~ ol li p,
|
|||
h1 ~ img,
|
||||
h2 ~ img,
|
||||
h3 ~ img,
|
||||
p ~ .informational-group,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
|
|
@ -204,6 +205,79 @@ summary {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-embed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.aspect-16x9 {
|
||||
padding-top: calc(100% / (16 / 9));
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.atlas {
|
||||
object-fit: cover;
|
||||
object-position: calc(-48px * var(--atlas-index)) 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.informational-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.features {
|
||||
gap: 16px;
|
||||
|
||||
.informational {
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
background: rgba(0, 0, 0, 0.0625);
|
||||
// Half width, minus own padding on both sides, minus half a gap
|
||||
flex: 1 0 calc(50% - (16px * 2) - (16px / 2));
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
// Full width, minus own padding on both sides
|
||||
flex: 1 0 calc(100% - (16px * 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.concepts {
|
||||
justify-content: space-between;
|
||||
|
||||
.informational {
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
|
||||
img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-position: calc(-72px * var(--atlas-index)) 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.informational {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
font-size: var(--font-size-link);
|
||||
|
|
|
|||
8
website/sass/features.scss
Normal file
8
website/sass/features.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
#upcoming-tech {
|
||||
background-color: var(--color-navy);
|
||||
color: var(--color-fog);
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
|
@ -231,12 +231,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
#upcoming-tech {
|
||||
background-color: var(--color-navy);
|
||||
color: var(--color-fog);
|
||||
#demo-video {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
#disciplines {
|
||||
.informational-group {
|
||||
margin-top: 0;
|
||||
|
||||
.informational {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -386,6 +391,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
#upcoming-tech {
|
||||
background-color: var(--color-navy);
|
||||
color: var(--color-fog);
|
||||
|
||||
a {
|
||||
color: var(--color-mustard);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#recent-news {
|
||||
background-color: var(--color-mustard);
|
||||
color: var(--color-navy);
|
||||
|
|
|
|||
|
|
@ -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: "Commander Basstronaut" 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue