diff --git a/README.md b/README.md index 5c05abd8..3b75197b 100644 --- a/README.md +++ b/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 +![Vector artwork: "Valley of Spires"](https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png) + +## 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. - -![Graphite raster UI viewport mockup](https://static.graphite.rs/content/index/gui-mockup-viewport__2.png) - -_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._ - -![Graphite raster UI node graph mockup](https://static.graphite.rs/content/index/gui-mockup-nodes__2.png) - -_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. diff --git a/website/content/features/_index.md b/website/content/features/_index.md index 9d3915c1..4b9586fc 100644 --- a/website/content/features/_index.md +++ b/website/content/features/_index.md @@ -1,6 +1,9 @@ +++ title = "Features and roadmap" template = "page.html" + +[extra] +css = "/features.css" +++
@@ -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. + +
-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. +
+
-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. +
-## 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. +
+
+ + Vector editing +
+
+ + Node graph image effects +
+
+ + AI-assisted art creation +
+
+ + Open source and free forever +
+
-- 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. +Launch Graphite -- Alpha Milestone 3 will probably focus on switching to an in-house vector graphics render engine built on [wgpu](https://wgpu.rs/). +
+
-- 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. +
+
+ + Looks and feels like traditional WYSIWYG design apps +
+
+ + Sleek, intuitive interface built by designers, for designers +
+
+ + Real-time collaborative editing +
+
+ + Windows/Mac/Linux/Web/iPad +
+
-## Planned capabilities +The full Graphite vision wholly embraces procedural workflows: -Below is an incomplete list of planned features and longer-term aspirations. +
+
+ + Fully non-destructive editing with node-driven layers +
+
+ + Infinitely scalable raster content with no pixelation +
+
+ + Integrates leading-edge AI models and graphics algorithms +
+
+ + Procedural pipelines for studio production environments +
+
-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 +
+ +
+
+ +
+
+ +

Upcoming Tech: How it works

+ +--- + + + +
+ +
+ +## 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. + +
+
+ +## 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. + +
+ +
+ +
+
+ +
+
+ +## 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. + +

— Pre-Alpha (complete) —

+ +

— Alpha Milestone 1 (ongoing) —

+ +

— Alpha Milestone 2 —

+ +

— Alpha Milestone 3 —

+ +

— Beta —

+ +

— 1.0 Release —

+ +

— Future Releases —

+
diff --git a/website/sass/base.scss b/website/sass/base.scss index 442e0825..143b5b88 100644 --- a/website/sass/base.scss +++ b/website/sass/base.scss @@ -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); diff --git a/website/sass/features.scss b/website/sass/features.scss new file mode 100644 index 00000000..2b46fb22 --- /dev/null +++ b/website/sass/features.scss @@ -0,0 +1,8 @@ +#upcoming-tech { + background-color: var(--color-navy); + color: var(--color-fog); + + a { + color: var(--color-mustard); + } +} diff --git a/website/sass/index.scss b/website/sass/index.scss index b1478d1f..e58812b1 100644 --- a/website/sass/index.scss +++ b/website/sass/index.scss @@ -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); diff --git a/website/templates/index.html b/website/templates/index.html index 42608263..4f8ffe42 100644 --- a/website/templates/index.html +++ b/website/templates/index.html @@ -33,7 +33,7 @@

Redefining state-of-the-art graphics editing.

-

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 +

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 layer stack, providing a completely non-destructive editing experience.

@@ -51,19 +51,19 @@
- + + -
- + + -
- + + -
@@ -74,7 +74,7 @@ - +

+ "Valley of Spires" vector artwork made in Graphite, a web-based vector graphics editor. +

+

- 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. -

-

- (Outdated, early 2022) Vector artwork created in the alpha version of the Graphite editor. Try this out at - editor.graphite.rs - 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.

-
-
- -
+
-

Professional 2D content creation for everyone.

+

A 2D creative tool made for everyone.

- 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.

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.

- 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.

-
-
- -
+
-

Available now for alpha testing.

-

- One year ago, Graphite was merely an idea. Today, the first milestone of the alpha release series is available for testing. -

-

- 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 roadmap. -

-

- Features and fixes will continue rolling out every few days. Please report bugs and vote on issue prioritization through GitHub. While you're there, give the project a star to help grow its momentum. -

-

- Try Graphite instantly in your browser: -

- Launch the Editor +
+ +
+
+
+
+

One app to rule them all.

+

Stop jumping between programs. Planned developments will make Graphite a first-class design tool for these disciplines (listed by priority):

+
+
+ + Graphic Design +
+
+ + Image Editing +
+
+ + Digital Painting +
+
+ + Desktop Publishing +
+
+ + VFX Compositing +
+
+ + Motion Graphics +
+
+
+
+ +
+
+
+

Stay in the loop.

+

+ Subscribe to the newsletter for quarterly updates on major development progress. +

+
+

Thanks!

+

You'll receive your first newsletter email with the next major Graphite news.

+
+
+
+
+ + +
+
+ + +
+ +
+
+ +
+
+
+
+

Follow along.

+

+ High-quality open source software is a community endeavor. Hang out with hundreds of friendly Graphite users and developers. +

+ +
+
+
-

Upcoming Tech / More in the Roadmap

+

Upcoming Tech / More details

@@ -234,67 +309,6 @@
-
-
-
-

Stay in the loop.

-

- 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. -

-
-

Thanks!

-

You'll receive your first newsletter email with the next major Graphite news.

-
-
-
-
- - -
-
- - -
- -
-
- -
-
-
-
-

Follow along.

-

- 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. -

- -
-
-

Recent News / More in the Blog