mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-10-03 16:38:12 +08:00
Revamp the Graphite website (#1265)
Revamp the website with more content
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Page not found{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<section id="404" class="section-row">
|
||||
<div class="section">
|
||||
<h1>Page not found.</h1>
|
||||
<h1>Page not found</h1>
|
||||
<p>Or as the machines like to say it: <code>404</code>.</p>
|
||||
<br />
|
||||
<a href="/" class="link arrow">Home Page</a>
|
||||
<a href="/" class="button arrow">Home Page</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -1,36 +1,40 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Blog | {{ page.title }}{% endblock title %}
|
||||
|
||||
{% block title %}Blog | {% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
{% set this = section | default(value = page) %}
|
||||
<link rel="stylesheet" href="/article.css">
|
||||
<meta property="og:title" content="{{ page.title }}.">
|
||||
<meta property="og:title" content="{{ this.title }}.">
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:image" content="{{ page.extra.banner | safe }}">
|
||||
<meta property="og:image" content="{{ this.extra.banner | safe }}">
|
||||
<meta property="og:url" content="{{ current_url | safe }}">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section id="article" class="section-row">
|
||||
{% set this = section | default(value = page) %}
|
||||
|
||||
<section class="section-row reading-material">
|
||||
<div class="section">
|
||||
<div class="details">
|
||||
<h2 class="headline">{{ page.title }}.</h2>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<img class="banner" src="{{ page.extra.banner | safe }}" />
|
||||
<h1 class="headline">{{ this.title }}</h2>
|
||||
<span class="publication">By {{ this.extra.author }}. {{ this.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<img class="banner" src="{{ this.extra.banner | safe }}" />
|
||||
</div>
|
||||
<hr />
|
||||
<article>
|
||||
{{ page.content | safe }}
|
||||
{{ this.content | safe }}
|
||||
</article>
|
||||
{% if page.extra.reddit or page.extra.twitter %}
|
||||
{% if this.extra.reddit or this.extra.twitter %}
|
||||
<hr />
|
||||
<div class="social">
|
||||
{% if page.extra.reddit %}
|
||||
<a href="{{ page.extra.reddit | safe }}" target="_blank" class="button arrow">
|
||||
{% if this.extra.reddit %}
|
||||
<a href="{{ this.extra.reddit | safe }}" target="_blank" class="button arrow">
|
||||
<img src="https://static.graphite.rs/icons/reddit.svg" /><span>Comment on Reddit</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if page.extra.twitter %}
|
||||
<a href="{{ page.extra.twitter | safe }}" target="_blank" class="button arrow">
|
||||
{% if this.extra.twitter %}
|
||||
<a href="{{ this.extra.twitter | safe }}" target="_blank" class="button arrow">
|
||||
<img src="https://static.graphite.rs/icons/twitter.svg" /><span>Comment on Twitter</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
+31
-19
@@ -1,17 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
{% set this = section | default(value = page | default(value = false)) %}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
|
||||
<title>Graphite | {% block title %}{% endblock title %}.</title>
|
||||
<title>Graphite | {% block title %}{% endblock title %}</title>
|
||||
{% block rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='blog/rss.xml', trailing_slash=false) }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) }}">
|
||||
{% endblock %}
|
||||
{% block head %}{% endblock head %}
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="/syntax-highlighting.css">
|
||||
{% if this and this.extra.css %}
|
||||
{% for css in this.extra.css %}
|
||||
<link rel="stylesheet" href="{{ css | safe }}">
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block head %}{% endblock head %}
|
||||
{% if this and this.extra.js %}
|
||||
{% for js in this.extra.js %}
|
||||
<script src="/js/{{ js | safe }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<script src="/js/navbar.js"></script>
|
||||
<script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.outbound-links.file-downloads.js"></script>
|
||||
<style>
|
||||
.balance-text {
|
||||
visibility: hidden;
|
||||
@@ -19,24 +34,19 @@
|
||||
|
||||
@media (scripting: none) {
|
||||
.balance-text {
|
||||
visibility: visible;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (text-wrap: balance) {
|
||||
.balance-text {
|
||||
.balance-text,
|
||||
.balanced-text {
|
||||
text-align: left;
|
||||
text-wrap: balance;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<noscript>
|
||||
<style>
|
||||
.balance-text {
|
||||
visibility: visible !important;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
@@ -49,9 +59,12 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a href="/blog">Blog</a>
|
||||
<!-- <a href="/learn">Learn</a> -->
|
||||
<a href="/features">Features</a>
|
||||
<a href="/contribute">Contribute</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/volunteer">Volunteer</a>
|
||||
<a href="/donate">Donate</a>
|
||||
<a href="https://editor.graphite.rs" class="button arrow">Launch</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,20 +76,19 @@
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
{% block content %} {% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<hr />
|
||||
<nav>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite/tree/master/docs" class="link not-uppercase">Documentation</a>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite/graphs/contributors" class="link not-uppercase">Credits</a>
|
||||
<a href="/license" class="link not-uppercase">License</a>
|
||||
<a href="/logo" class="link not-uppercase">Logo</a>
|
||||
<a href="/press" class="link not-uppercase">Press</a>
|
||||
<a href="/contact" class="link not-uppercase">Contact</a>
|
||||
</nav>
|
||||
<span>Copyright © {{ now() | date(format="%Y") }} Graphite contributors.</span>
|
||||
<span>Copyright © {{ now() | date(format = "%Y") }} Graphite contributors</span>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="https://static.graphite.rs/text-balancer/text-balancer.js"></script>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
@@ -10,25 +11,25 @@
|
||||
|
||||
<section id="articles" class="section">
|
||||
{% for page in section.pages %}
|
||||
<article>
|
||||
<section>
|
||||
<div class="banner">
|
||||
<a href="{{ page.permalink | safe }}"><img src="{{ page.extra.banner | safe }}" /></a>
|
||||
<a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" /></a>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="headline">
|
||||
<h2><a href="{{ page.permalink | safe }}">{{ page.title }}.</a></h2>
|
||||
<h2><a href="{{ page.path }}">{{ page.title }}</a></h2>
|
||||
</div>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone = "America/Los_Angeles") }}.</span>
|
||||
<div class="summary">
|
||||
<div>
|
||||
{{ page.summary | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="keep-reading">
|
||||
<a href="{{ page.permalink | safe }}" class="link arrow">Keep Reading</a>
|
||||
<a href="{{ page.path }}" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/book.css">
|
||||
<script src="/js/book.js"></script>
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
{% set this = section | default(value = page) %}
|
||||
|
||||
{# Search this page-or-section's ancestor tree for a section that identifies itself as a book, and save it to a `book` variable #}
|
||||
{% for ancestor_path in this.ancestors | concat(with = this.relative_path) %}
|
||||
{# Get the ancestor section from this ancestor path string #}
|
||||
{% if ancestor_path is ending_with("/_index.md") %}
|
||||
{% set potential_book = get_section(path = ancestor_path) %}
|
||||
{% endif %}
|
||||
|
||||
{# Check if the ancestor section is the root of a book, and if so, set it to a variable accessible outside the loop #}
|
||||
{% if potential_book.extra.book %}
|
||||
{% set_global book = get_section(path = potential_book.path ~ "_index.md" | trim_start_matches(pat="/")) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{# Map this book's chapter path strings to an array of sections #}
|
||||
{% set chapters = [] %}
|
||||
{% for chapter_path in book.subsections %}
|
||||
{% set_global chapters = chapters | concat(with = get_section(path = chapter_path)) %}
|
||||
{% endfor %}
|
||||
{% set chapters = chapters | sort(attribute = "extra.order") %}
|
||||
|
||||
{# A flat list of all pages in the ToC, initialized to just the book root section but updated when we generate the ToC #}
|
||||
{% set flat_pages = [book] %}
|
||||
{% set flat_index_of_this = 0 %}
|
||||
|
||||
<section class="three-column-layout">
|
||||
<aside class="chapters">
|
||||
<ul>
|
||||
<li class="title {% if current_path == book.path %}active{% endif %}"><a href="{{ book.path }}">{{ book.title }}</a></li>
|
||||
</ul>
|
||||
{% for chapter in chapters %}
|
||||
<ul>
|
||||
<li class="chapter {% if current_path == chapter.path %}active{% endif %}"><a href="{{ chapter.path }}">» {{ chapter.title }}</a></li>
|
||||
|
||||
{% set_global flat_pages = flat_pages | concat(with = chapter) %}
|
||||
{% if chapter == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
|
||||
{% if chapter.pages %}
|
||||
|
||||
{% for page in chapter.pages | sort(attribute = "extra.order") %}
|
||||
|
||||
{% set_global flat_pages = flat_pages | concat(with = page) %}
|
||||
{% if page == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
|
||||
<li {% if current_path == page.path %}class="active"{% endif %}><a href="{{ page.path }}">» {{ page.title }}</a></li>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</aside>
|
||||
|
||||
<section class="section-row reading-material">
|
||||
<div class="section">
|
||||
<h1>{{ this.title }}</h1>
|
||||
<article>
|
||||
{{ this.content | safe }}
|
||||
</article>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="prev-next">
|
||||
{% if flat_index_of_this >= 1 %}
|
||||
{% set prev = flat_pages | nth(n = flat_index_of_this - 1) %}
|
||||
{% endif %}
|
||||
{% if prev %}
|
||||
<a href="{{ prev.path }}">
|
||||
<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>
|
||||
{{ prev.title }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a><!-- Spacer --></a>
|
||||
{% endif %}
|
||||
|
||||
{% if flat_index_of_this < flat_pages | length - 1 %}
|
||||
{% set next = flat_pages | nth(n = flat_index_of_this + 1) %}
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<a href="{{ next.path }}">
|
||||
{{ next.title }}
|
||||
<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>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="contents">
|
||||
<ul>
|
||||
<li class="title">
|
||||
<a href="#">
|
||||
{% if this.toc | length > 0 %}
|
||||
Contents<span> (top 🡑)</span>
|
||||
{% else %}
|
||||
Back to top 🡑
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
{% for depth_1 in this.toc %}
|
||||
<li><a href="#{{ depth_1.id }}">{{ depth_1.title }}</a></li>
|
||||
{% for depth_2 in depth_1.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_2.id }}">{{ depth_2.title }}</a></li>
|
||||
{% for depth_3 in depth_2.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_3.id }}">{{ depth_3.title }}</a></li>
|
||||
{% for depth_4 in depth_3.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_4.id }}">{{ depth_4.title }}</a></li>
|
||||
{% for depth_5 in depth_4.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_5.id }}">{{ depth_5.title }}</a></li>
|
||||
{% for depth_6 in depth_5.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_6.id }}">{{ depth_6.title }}</a></li>
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
@@ -1,340 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Redefining state-of-the-art graphics editing{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<section id="logo">
|
||||
<img src="https://static.graphite.rs/logos/graphite-logotype-color.svg" alt="Graphite Logo" />
|
||||
</section>
|
||||
|
||||
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png"></img>
|
||||
|
||||
<section id="quick-links">
|
||||
<a href="#newsletter" class="button arrow">Subscribe to the newsletter</a>
|
||||
<a href="https://editor.graphite.rs" class="button arrow">Instantly launch the web editor</a>
|
||||
<div>
|
||||
<a href="https://github.com/GraphiteEditor/Graphite" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/github.svg" alt="GitHub" />
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/graphite/" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/reddit.svg" alt="Reddit" />
|
||||
</a>
|
||||
<a href="https://discord.graphite.rs" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/discord.svg" alt="Discord" />
|
||||
</a>
|
||||
<a href="https://twitter.com/graphiteeditor" target="_blank">
|
||||
<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="hero-message">
|
||||
<h1 class="hero">Redefining state-of-the-art graphics editing.</h1>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<section id="screenshots">
|
||||
<div class="carousel">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="carousel torn left">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="carousel torn right">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="screenshot-details">
|
||||
<div class="carousel-controls">
|
||||
<button class="direction 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"></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">
|
||||
<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 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 class="balance-text">
|
||||
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">
|
||||
<div class="section">
|
||||
<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, 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
|
||||
<a href="/license" target="_blank">license</a>
|
||||
and usable
|
||||
<a href="https://editor.graphite.rs">instantly through a web browser</a>
|
||||
or an upcoming native client on Windows, Mac, and Linux.
|
||||
</p>
|
||||
<p>
|
||||
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="demo-video" class="section-row">
|
||||
<div class="section">
|
||||
<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 details</a></h1>
|
||||
<hr />
|
||||
<div class="triptych">
|
||||
<div class="section">
|
||||
<h2 class="balance-text">Non-destructive editing, powered by nodes.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>While working in Graphite, your edits are saved into the <em>Node Graph</em>. Its <em>nodes</em> represent operations and effects like Magic Wand selection and Blur. Node <em>parameters</em> can be altered anytime, helping you iterate faster. The graph is organized into layers and folders, and a layer panel provides a simpler, compact view of the graph.</p>
|
||||
<!-- <a href="/blog/node-graph-explained" class="link arrow">Node Graph</a> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 class="balance-text">Raster and vector art, crisp at any resolution.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>Just like <em>vector</em> artwork, which is based on curves instead of pixels to preserve quality at any scale, Graphite's <em>raster</em> paintbrushes, generators, and other tools
|
||||
work the same way. A <em>resolution-agnostic</em> render engine lets you zoom infinitely and export at any size.</p>
|
||||
<!-- <a href="/blog/rendering-pipeline-explained" class="link arrow">Rendering</a> -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2 class="balance-text">Procedural superpowers, part of your art pipeline.</h2>
|
||||
<!-- <div class="graphic">
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<p>Graphite aims to be the ultimate 2D tool for every technical artist. From procedural artwork to data viz and automation, it is designed from the ground up to fit into studio content
|
||||
pipelines. You can also integrate Graphite's render engine into your game, app, or server.</p>
|
||||
<!-- <a href="/blog/graphene-explained" class="link arrow">Graphene</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-features section-row right">
|
||||
<!-- <div class="graphic">
|
||||
<img src="graphic.svg" alt="" />
|
||||
</div> -->
|
||||
<div class="section">
|
||||
<h2>More to come.</h2>
|
||||
<p>
|
||||
RAW photo editing. Procedural texture generation. Advanced typesetting and desktop publishing. Motion graphics and animation. Physically-based digital painting. HDR and wide-gamut
|
||||
color handling (ACES/OpenColorIO). Real-time collaboration. A rich ecosystem of custom nodes.
|
||||
</p>
|
||||
<p>
|
||||
Learn more about the planned technology in forthcoming Graphite releases:
|
||||
</p>
|
||||
<a href="/features" class="link arrow">Features</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="powered-by-rust" class="section-row left">
|
||||
<div class="graphic">
|
||||
<img src="https://static.graphite.rs/content/index/rust.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1>Built for the future, powered by Rust.</h1>
|
||||
<p>
|
||||
Always on the bleeding edge and built to last— Graphite is written on a robust foundation with Rust, a modern programming language optimized for creating fast, reliable, future-proof
|
||||
software.
|
||||
</p>
|
||||
<p>
|
||||
The underlying node graph engine that computes and renders Graphite documents is called Graphene. The Graphene engine is an extension of the Rust language, acting as a system for chaining
|
||||
together modular functions into useful pipelines with GPU and parallel computation. Artists can harness these powerful capabilities directly in the Graphite editor without touching code.
|
||||
Technical artists and programmers can write reusable Rust functions to extend the capabilities of Graphite and create new nodes to share with the community.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-involved" class="section-row right">
|
||||
<div class="graphic">
|
||||
<img src="https://static.graphite.rs/content/index/volunteer.svg" alt="" />
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1>Get involved.</h1>
|
||||
<p>
|
||||
The Graphite project could not exist without the community. Building its ambitious and diverse breadth of features will require contributions from developers, designers, technical experts,
|
||||
creative professionals, and eagle-eyed bug hunters. Help build the future of digital art! <a href="https://discord.graphite.rs">Join the project Discord server</a> and ask how you can
|
||||
help.
|
||||
</p>
|
||||
<p>
|
||||
Rust, web, and graphics programmers should check out the <a href="/contribute">contribute</a> page for a quick technical overview and resources for getting started. Or just ask where to
|
||||
begin in the #development channel on Discord and the community will get you set up.
|
||||
</p>
|
||||
</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>
|
||||
<hr />
|
||||
<div class="diptych">
|
||||
{% set articles = get_section(path="blog/_index.md") %}
|
||||
{% set latest = articles.pages | slice(end=2) %}
|
||||
{% for article in latest %}
|
||||
<article class="section">
|
||||
<div class="headline">
|
||||
<h2><a href="{{ article.permalink | safe }}">{{ article.title }}.</a></h2>
|
||||
</div>
|
||||
<span class="publication">By {{ article.extra.author }}. {{ article.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<div class="summary">
|
||||
<div>
|
||||
{{ article.summary | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="keep-reading">
|
||||
<a href="{{ article.permalink | safe }}" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/js/carousel.js"></script>
|
||||
{% endblock content %}
|
||||
@@ -1,12 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
{% if section.extra.css %}
|
||||
<link rel="stylesheet" href="{{ section.extra.css | safe }}">
|
||||
{% endif %}
|
||||
{% endblock head %}
|
||||
{% block title %}{{ page.title }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
{{ section.content | safe }}
|
||||
{{ page.content | safe }}
|
||||
{% endblock content %}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
{{ section.content | safe }}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user