[gnome-devel-docs/wip/aday/appicon-update2] hig: minor polish to icon pages
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/wip/aday/appicon-update2] hig: minor polish to icon pages
- Date: Thu, 30 Aug 2018 10:45:15 +0000 (UTC)
commit 024acb08af1ef97663e5e2525e5de4a00f6abe77
Author: Allan Day <allanpday gmail com>
Date: Thu Aug 30 11:44:47 2018 +0100
hig: minor polish to icon pages
hig/C/icon-design.page | 12 ++++++------
hig/C/icons-and-artwork.page | 10 ++++------
2 files changed, 10 insertions(+), 12 deletions(-)
---
diff --git a/hig/C/icon-design.page b/hig/C/icon-design.page
index 5b5bffa5..71aca11d 100644
--- a/hig/C/icon-design.page
+++ b/hig/C/icon-design.page
@@ -16,16 +16,16 @@
<title>Creating icons</title>
-<p><link xref="icons-and-artwork">Icons and artwork</link> provides an overview of the icon styles
recommended for use in GNOME 3, as well as the stock icons that are available. This page provides guidelines
for those creating their own icons, including both full-color icons (typically used for application icons)
and symbolic icons (typically used for user interface controls).</p>
+<p>This page provides guidelines for those creating their own icons, including both full-color icons
(typically used for application icons) and symbolic icons (typically used for user interface controls). For a
more general overview of icon styles and usage, including the stock icons that are available, see <link
xref="icons-and-artwork">icons and artwork</link>.</p>
<section id="full-color-icons">
<title>Full-color icons</title>
<media type="image" mime="image/png" src="figures/icons/shading.svg"/>
-<p>The full-color icon style is most commonly used for application icons. The nominal size of application
icons is 128×128px. However, because application icons are sometimes presented at lower resolutions, they
should only feature detail that is presentable at 64×64px resolution: anything more detailed would get lost
by filtering/scaling down.</p>
+<p>The full-color icon style is most commonly used for application icons. The nominal size of full-color
icons is 128×128px. However, because application icons are sometimes presented at lower resolutions, they
should only feature detail that is presentable at 64×64px resolution: anything more detailed would get lost
by filtering/scaling down.</p>
-<p>The full-color <link
href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">icon template</link>
includes a 2px grid which should help you avoid adding detail that's finer than the desired threshold.</p>
+<p>The <link
href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/blob/master/template.svg">full-color icon
template</link> includes a 2px grid which should help you avoid adding detail that's finer than the desired
threshold.</p>
<media type="image" mime="image/png" src="figures/icons/sizes.svg"/>
@@ -34,11 +34,11 @@
<p>Full-color icons should be rendered with a simple orthogonal view and no real or isometric perspective.
To provide depth a raised effect can be applied to mimic the Z-axis. Please keep the effect subtle though!
Raising the object more than 2 detail units (4 nominal pixels) is not recommended.</p>
-<p>In order to aid recognition, each application icon should have a unique silhouette. However, to allow for
a pleasing grid presentation among other applications, the aspect ratio should not be extreme. Very narrow or
very wide shapes should be avoided.</p>
+<p>In order to aid recognition, each application icon should have a unique silhouette. However, to ensure
visual balance with other application icons, the aspect ratio should not be extreme. Very narrow or very wide
shapes should be avoided.</p>
<media type="image" mime="image/png" src="figures/icons/aspect-ratio.svg"/>
-<p>A <link href="https://gitlab.gnome.org/Community/Design/icon-revolution/raw/master/template.svg">grid
template</link> is available to assist with placing your icon outline. Do not try to cover a maximum area of
the canvas: the outside margin should be left empty. In special circumstances a small detail can be extended
into this margin space.</p>
+<p>A <link href="https://gitlab.gnome.org/Community/Design/icon-revolution/raw/master/template.svg">grid
template</link> is available to assist with placing your icon outline. Do not try to cover a maximum area of
the canvas: the outside margin should be left empty. In some circumstances a small detail can be extended
into this margin space.</p>
<media type="image" mime="image/png" src="figures/icons/whitespace.svg"/>
@@ -104,7 +104,7 @@
<p>You are free to use different shades of these colors depending on the desired material effect. However,
these primary colors are a good baseline to start from. A GIMP/Inkscape format palette <link
href="https://gitlab.gnome.org/Community/Design/HIG-app-icons/raw/62cb512ff95b2b3d57aeb5f806726d6be2eca74a/HIG.gpl">is
available</link>.</p>
-<p>It is recommended to keep flat surfaces unshaded, but using gradients to signify bent surface is
allowed.</p>
+<p>It is recommended to keep flat surfaces unshaded, but using gradients to signify bent surfaces is
allowed.</p>
</section>
</section>
diff --git a/hig/C/icons-and-artwork.page b/hig/C/icons-and-artwork.page
index 574f43de..80ae9632 100644
--- a/hig/C/icons-and-artwork.page
+++ b/hig/C/icons-and-artwork.page
@@ -23,7 +23,7 @@
<p>Two styles of icon are used in GNOME 3: full-color and symbolic icons.</p>
-<p>Full-color icons are colorful and detailed, and are optimized for larger sizes. They are defined as
128x128px SVGs, and to maintain sharpness they can be scaled to multiples of 128 (such as 256✕256 and
512✕512). Their design also allows them to be rendered sharp at 64x64px and 32x32px, but is not advised to do
lower.</p>
+<p>Full-color icons are colorful and detailed, and are optimized for larger sizes. They are defined as
128x128px SVGs, and can be scaled up in multiples of 128 (such as 256✕256 and 512✕512). They should not be
enlarged to other sizes, as this will result in them no longer being sharp. The design of full-color icons
also allows them to be rendered sharp at 64x64px and 32x32px, but is not advised to go lower.</p>
<media type="image" mime="image/png" src="figures/icons/fullcolor-v-symbolic.svg"/>
@@ -37,7 +37,7 @@
<p>Application icons are the most prominent type of icons. Every application should have its own unique and
beautiful application icon: it is the face of the application, and the first visual element a user sees when
browsing for new applications.</p>
-<p>Application icons use the full-color style. Applications are also recommended to provide a symbolic
version of their icon, which is used for the high-contrast accessibility feature, as well as in contexts
where a legible low resolution icon is required.</p>
+<p>Application icons use the full-color style. Applications are also recommended to provide a symbolic
version of their icon, which is used for the high-contrast accessibility feature, as well as in contexts
where a legible low-resolution icon is required.</p>
<p>User interface icons typically use the symbolic style and this is the primary icon style used for user
interface controls. The most common and obvious example of symbolic icon usage is on buttons.</p>
@@ -48,11 +48,9 @@
<section id="icon-resources">
<title>Stock icons and creating your own</title>
-<p>GNOME provides a set of standard icons, which can be used by applications.</p>
+<p>GNOME provides a set of standard icons, which can be used by applications. This can be accessed directly
through GTK. Icon names follow the <link
href="https://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html">Freedesktop icon
specification</link>. Symbolic versions of icons have the <code>-symbolic</code> name ending, such as
<code>open-menu-symbolic</code>.</p>
-<p>The standard icon set can be accessed directly through GTK. Icon names follow the <link
href="https://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html">Freedesktop icon
specification</link>. Symbolic versions of icons are have the <code>-symbolic</code> name ending, such as
<code>open-menu-symbolic</code>.</p>
-
-<p>See the <link xref="icon-design">icon design guidelines</link> for more details on how to create your own
icon aseets. Work has begun on <link
href="https://gitlab.gnome.org/Community/Design/icon-development-kit">GNOME icon development kit</link>. This
will provide resources for creating symbolic icons to be used within applications. </p>
+<p>The <link xref="icon-design">icon design guidelines</link> provide more details on how to create your own
icons, including application icons.</p>
</section>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]