295 lines
19 KiB
HTML
295 lines
19 KiB
HTML
<!doctype html>
|
||
<html class="no-js">
|
||
<head><meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||
<link rel="index" title="Index" href="../genindex.html" /><link rel="search" title="Search" href="../search.html" /><link rel="prev" title="Palette" href="palette.html" />
|
||
|
||
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
||
<title>Backgrounds - GNOME Human Interface Guidelines documentation</title>
|
||
<link rel="stylesheet" type="text/css" href="../_static/pygments.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/styles/furo.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/styles/furo-extensions.css" />
|
||
<link rel="stylesheet" type="text/css" href="../_static/gnome.css" />
|
||
|
||
|
||
|
||
<style>
|
||
:root {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
}
|
||
|
||
/* For allowing end-user-specific overrides */
|
||
.override-light {
|
||
--color-code-background: #f8f8f8;
|
||
--color-code-foreground: black;
|
||
--color-brand-primary: #4a86cf;
|
||
--color-brand-content: #4a86cf;
|
||
|
||
}
|
||
.override-dark {
|
||
--color-code-background: #202020;
|
||
--color-code-foreground: #d0d0d0;
|
||
|
||
}
|
||
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../_static/pygments_dark.css"></head>
|
||
<body dir="">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
<symbol id="svg-toc" viewBox="0 0 24 24">
|
||
<title>Contents</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||
<line x1="4" y1="6" x2="20" y2="6" />
|
||
<line x1="10" y1="12" x2="20" y2="12" />
|
||
<line x1="6" y1="18" x2="20" y2="18" />
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||
<title>Menu</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-menu">
|
||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||
<title>Expand</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="feather feather-chevron-right">
|
||
<polyline points="9 18 15 12 9 6"></polyline>
|
||
</svg>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
||
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
||
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
||
<label class="overlay toc-overlay" for="__toc"></label>
|
||
|
||
|
||
|
||
<div class="page">
|
||
<header class="mobile-header">
|
||
<div class="header-left">
|
||
<label class="nav-overlay-icon" for="__navigation">
|
||
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
<div class="header-center">
|
||
<a href="../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
||
</div>
|
||
<div class="header-right">
|
||
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
</div>
|
||
</header>
|
||
<aside class="sidebar-drawer">
|
||
<div class="sidebar-container">
|
||
|
||
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../index.html">
|
||
|
||
<div class="sidebar-logo-container">
|
||
<img class="sidebar-logo" src="../_static/logo.svg" alt="Logo"/>
|
||
</div>
|
||
|
||
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
||
|
||
</a><form class="sidebar-search-container" method="get" action="../search.html">
|
||
<input class="sidebar-search" placeholder=Search name="q">
|
||
<input type="hidden" name="check_keywords" value="yes">
|
||
<input type="hidden" name="area" value="default">
|
||
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
||
<ul class="current">
|
||
<li class="toctree-l1"><a class="reference internal" href="../principles.html">Design Principles</a></li>
|
||
<li class="toctree-l1"><a class="reference internal" href="../resources.html">Tools & Resources</a></li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/app-naming.html">App Naming</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/app-icons.html">App Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/keyboard.html">Keyboard</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/ui-icons.html">UI Icons</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/ui-styling.html">UI Styling</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/writing-style.html">Writing Style</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/typography.html">Typography</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/navigation.html">Navigation</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="../guidelines/accessibility.html">Accessibility</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 has-children"><a class="reference internal" href="../patterns.html">Patterns</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/windows.html">Windows</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/header-bars.html">Header Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/popovers.html">Popovers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/utility-panes.html">Utility Panes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/boxed-lists.html">Boxed Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/grid-views.html">Grid Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/list-column-views.html">List & Column Views</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/containers/selection-mode.html">Selection & Edit Modes</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/browsing.html">Browsing</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/view-switchers.html">View Switchers</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/tabs.html">Tabs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/sidebars.html">Sidebars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/nav/search.html">Search</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/buttons.html">Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/menus.html">Menus</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/switches.html">Switches</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/text-fields.html">Text Fields</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/checkboxes.html">Checkboxes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/radio-buttons.html">Radio Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/drop-downs.html">Drop-Down Lists</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/sliders.html">Sliders</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/spin-buttons.html">Spin Buttons</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/controls/overlaid.html">Overlaid Controls</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2 has-children"><a class="reference internal" href="../patterns/feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/notifications.html">Notifications</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/toasts.html">Toasts</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/info-bars.html">Info Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/progress-bars.html">Progress Bars</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/spinners.html">Spinners</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/dialogs.html">Dialogs</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/placeholders.html">Placeholder Pages</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="../patterns/feedback/tooltips.html">Tooltips</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1 current has-children"><a class="reference internal" href="../reference.html">Reference</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
||
<li class="toctree-l2"><a class="reference internal" href="keyboard.html">Standard Keyboard Shortcuts</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="palette.html">Palette</a></li>
|
||
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Backgrounds</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main class="main">
|
||
<div class="content">
|
||
<article role="main">
|
||
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
||
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
||
</label>
|
||
<section id="backgrounds">
|
||
<h1>Backgrounds<a class="headerlink" href="#backgrounds" title="Permalink to this headline">¶</a></h1>
|
||
<p>These guidelines are primarily intended for Linux distributions who are creating background wallpapers for GNOME. They document the technical considerations that should be taken into account when designing and creating background images.</p>
|
||
<section id="image-size">
|
||
<h2>Image size<a class="headerlink" href="#image-size" title="Permalink to this headline">¶</a></h2>
|
||
<p>The recommended size for wallpaper images is 4096×2160px. This size aims to strike a balance between supporting large displays, and the hardware resources required to display large background images.</p>
|
||
</section>
|
||
<section id="scaling-and-cropping">
|
||
<h2>Scaling and cropping<a class="headerlink" href="#scaling-and-cropping" title="Permalink to this headline">¶</a></h2>
|
||
<p>When creating backgrounds, it is important to be aware of how a background image will be cropped to fit different display sizes and orientations.</p>
|
||
<p>GNOME scales and fits background images to each display using the “zoom” method. The background image is scaled to the display, keeping its aspect ratio fixed, and keeping as much of the image visible as possible. Parts of the image that cannot be fitted on screen are excluded.</p>
|
||
<p>Additionally, system interface elements, such as the top bar, are overlaid on top of the background image.</p>
|
||
<p>For example, the following image illustrates the visible portion of a 4096×2160px background on a 1920×1200px display:</p>
|
||
<img alt="../_images/background-cropping-1920.png" src="../_images/background-cropping-1920.png"/>
|
||
<p>The following image illustrates how a range of landscape resolutions (5120×1440px, 1920×1200px, 1536×864px, 1440×900px, and 1366×768px) would be cropped to fit:</p>
|
||
<img alt="../_images/background-cropping-landscape.png" src="../_images/background-cropping-landscape.png"/>
|
||
<p>While landscape is the most common orientation for displays used with GNOME, portrait is also a consideration. Portrait displays are scaled and cropped as follows:</p>
|
||
<img alt="../_images/background-cropping-portrait.png" src="../_images/background-cropping-portrait.png"/>
|
||
<p>Background designs should aim to avoid awkward layouts when cropped to fit these different display sizes, and it is recommended to test backgrounds to ensure adequate performance at a range of display resolutions and orientations. <a class="reference external" href="https://gitlab.gnome.org/Teams/Design/hig-www/-/tree/main/source/img/backgrounds/background-cropping-overlay.png">An overlay image is available</a> which can be used to test background designs.</p>
|
||
</section>
|
||
<section id="lock-screen">
|
||
<h2>Lock screen<a class="headerlink" href="#lock-screen" title="Permalink to this headline">¶</a></h2>
|
||
<p>Background images are utilized as part of GNOME’s lock screen, and it is important that background designs are suitable for this purpose.</p>
|
||
<p>The lock screen presents a blurred version of the background image with UI elements overlaid on top. In the initial presentation, the lock screen shows the time and date:</p>
|
||
<img alt="../_images/lock-screen.png" src="../_images/lock-screen.png"/>
|
||
<p>Then when authenticating, a login prompt is shown:</p>
|
||
<img alt="../_images/lock-screen-auth.png" src="../_images/lock-screen-auth.png"/>
|
||
<p>Background designs should look good when blurred on the lock screen. Care should be taken to ensure that designs do not appear muddy or overly diffuse when blurred in this way. Designs with strong visual elements shouldn’t look unbalanced when blurred.</p>
|
||
<p>Care should also be taken to ensure that visual elements in the background image do not conflict with the lock screen’s UI elements.</p>
|
||
</section>
|
||
<section id="light-and-dark-mode">
|
||
<h2>Light and dark mode<a class="headerlink" href="#light-and-dark-mode" title="Permalink to this headline">¶</a></h2>
|
||
<p>From GNOME 42, it is possible to provide background images with light and dark variants. The light or dark background variant is used depending on whether the user has selected the light or dark UI style.</p>
|
||
<p>While it isn’t necessary to provide light and dark variants of every background, it is recommended to ensure that a good range of backgrounds have this feature, in order to provide a good level of support for GNOME’s dark mode feature.</p>
|
||
<p>When designing backgrounds that support dark mode, it is recommended to treat both background variants equally, and to approach the design as a pair. When processing photographs for use as light or dark, it is important to avoid the end result appearing artificial.</p>
|
||
<p>Backgrounds that support dark mode should link to the files for the light and dark versions in their XML definitions (see <a class="reference external" href="https://gitlab.gnome.org/GNOME/gnome-backgrounds/-/blob/main/backgrounds/adwaita.xml.in">an example</a>).</p>
|
||
</section>
|
||
</section>
|
||
|
||
</article>
|
||
<footer>
|
||
|
||
<div class="related-pages">
|
||
|
||
<a class="prev-page" href="palette.html">
|
||
<svg><use href="#svg-arrow-right"></use></svg>
|
||
<div class="page-info">
|
||
<div class="context">
|
||
<span>Previous</span>
|
||
</div>
|
||
|
||
<div class="title">Palette</div>
|
||
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
<aside class="toc-drawer">
|
||
|
||
|
||
<div class="toc-sticky toc-scroll">
|
||
<div class="toc-title-container">
|
||
<span class="toc-title">
|
||
Contents
|
||
</span>
|
||
</div>
|
||
<div class="toc-tree-container">
|
||
<div class="toc-tree">
|
||
<ul>
|
||
<li><a class="reference internal" href="#">Backgrounds</a><ul>
|
||
<li><a class="reference internal" href="#image-size">Image size</a></li>
|
||
<li><a class="reference internal" href="#scaling-and-cropping">Scaling and cropping</a></li>
|
||
<li><a class="reference internal" href="#lock-screen">Lock screen</a></li>
|
||
<li><a class="reference internal" href="#light-and-dark-mode">Light and dark mode</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</aside>
|
||
</main>
|
||
</div><script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
|
||
<script src="../_static/jquery.js"></script>
|
||
<script src="../_static/underscore.js"></script>
|
||
<script src="../_static/doctools.js"></script>
|
||
<script src="../_static/scripts/main.js"></script>
|
||
</body>
|
||
</html> |