Commit e116b5d3 authored by Nate Graham's avatar Nate Graham

Revamp Icon Design information

This is a big diff that implements the following changes:

* Move the individual icon types to sub-pages so this information isn't so overwhelming on a single page
* Create new margins graphics for each type of icon that are more clear and contextually-appropriate
* Be clearer about which sizes are used for each icon type and style
* Add real captions to images by using the `.. figure::` tag
* Replace some images with better ones
* Improve wording in some places
parent 85b13634
This diff is collapsed.
Action and Status Icons
=======================
Action icons visually reinforce their control's action, and are commonly seen
on push buttons, tool buttons, and menu items. Status icons display the current
status of software or hardware and generally live in the System Tray.
Both action and status icons always use the `monochrome style \
<index.html#monochrome-icon-style>`__ and come in two sizes: 16px and 22px. They
use the standard monochrome icon margins.
Action items should use Shade Black as much as possible:
.. image:: /img/Breeze-icon-design-action.png
:alt: Action icons
Status icons can use a bit more color in their composition to connote status
information:
.. image:: /img/Breeze-icon-design-status.png
:alt: Status icons
Action and status icons dynamically change their colors when the user changes
the system's color. To accomplish this, a special CSS stylesheet is embedded
in the SVG, and then the actual shape definitions are tagged with the
appropriate class. For technical information regarding how to do this, read the
`workflow tips on how to create an icon \
<https://community.kde.org/Guidelines_and_HOWTOs/Icon_Workflow_Tips>`_.
Application Icons
=================
.. figure:: /img/icon-applications.png
:alt: Colorful category icons
Application icons
Application icons hey always use the `colorful style \
<index.html#colorful-icon-style>`__ and come in a single size: 48px. They have
4px margins on the top and bottom:
.. figure:: /img/icon-margins-app.png
:alt: Colorful Places icons
Margins for 48px application icons
3rd party app icons
~~~~~~~~~~~~~~~~~~~
When creating a Breeze theme version of an existing app's icon, is critically
important that the icon's existing brand and visual style be preserved. The
goal is to create a Breeze version of the icon, not something completely new
and different. For example:
.. figure:: /img/icon-3rdparty-GIMP.png
:alt: Breeze version of 3rd-party GIMP icon
Breeze version of 3rd-party GIMP icon
.. figure:: /img/icon-3rdparty-writer.png
:alt: Breeze version of 3rd-party LibreOffice Writer icon
Breeze version of 3rd-party LibreOffice Writer icon
Category and Preferences Icons
==============================
.. figure:: /img/icon-category.png
:alt: Colorful category icons
Category icons
.. figure:: /img/icon-preferences.png
:alt: Colorful preferences icons
Preferences icons
Category and Preferences icons are commonly seen in System Settings,
Applications' settings windows, and launcher menus. They always use the
the `colorful style <index.html#monochrome-icon-style>`__ and come in a single
size: 32px. They have 2px margins on the top and bottom:
.. figure:: /img/icon-margins-category.png
:alt: Margins for 32px category and Preferences icons
Margins for 32px category and Preferences icons
Emblem Icons
============
Emblems icons are used to badge other icons and convey some type of status that
pertains to them. They come in three sizes: 8px, 16px, and 22px, and always use
the `colorful style <index.html#colorful-icon-style>`__. However, their color
palette is limited to that of the
monochromatic style. Unlike other icons, they are drawn with zero margins and
touch the edges of the canvas.
Emblem icons always have a colored background shape and a monochrome foreground
symbol. Because of the extremely limited space available, it is critical that
the foreground symbol be aligned to the pixel grid:
.. figure:: /img/Breeze-icon-design-emblem.png
:alt: Pixel-perfect emblem icon
Pixel-perfect emblem icon with zero margins
16px and 22px Emblems get a 60% opacity outline to ensure adequate contrast
against whatever icon they are drawn on top of:
.. figure:: /img/Breeze-icon-design-emblem-16px.png
:alt: 16px emblem icons
16px emblems
.. figure:: /img/Breeze-icon-design-emblem-22px.png
:alt: 22px emblem icons
22px emblems
8px emblems don't have an outline, because there simply is not enough room:
.. figure:: /img/Breeze-icon-design-emblem-8px.png
:alt: 8px emblem icons
8px emblems
MIME Type Icons
===============
MIME type icons are used to depict documents and files. They come in four sizes:
16px, 22px, 32px, and 64px. MIME type icons use the `monochrome style \
<index.html#monochrome-icon-style>`__ for 16px and 22px sizes, and the
`colorful style <index.html#colorful-icon-style>`__ for 32px and 64px sizes.
Monochrome MIME type icons
~~~~~~~~~~~~~~~~~~~~~~~~~~
Unlike other monochrome icons, Monochrome MIME type icons are drawn with the
primary color of the large colorful version rather than following the general
monochrome icon color guidelines:
.. image:: /img/Breeze-icon-design-mimetype-small.png
:alt: Small monochrome document MIME types
Margins for monochrome MIME type icons are the same as for monochrome Places
icons in that the icon itself must fill a perfect square:
.. figure:: /img/icon-margins-mimetype-monochrome.png
:alt: Margins for monochrome MIME type icons
Margins for 16px and 22px monochrome MIME type icons
Colorful MIME type icons
~~~~~~~~~~~~~~~~~~~~~~~~
Like Places icons, the colorful versions consist of the monochrome icon used as
a foreground symbol on top of a background. Margins are small, with only 2px on
the top and bottom for the 32px icons, and 3px on the top and bottom for the
64px icons:
.. figure:: /img/icon-margins-mimetype-32.png
:alt: Margins for monochrome MIME type icons
Margins for 32px monochrome MIME type icons
.. figure:: /img/icon-margins-mimetype-64.png
:alt: Margins for monochrome MIME type icons
Margins for 64px monochrome MIME type icons
The background style depends on the file type.
For archives, packages, compressed files, and disk images, the background is a
square with a zipper going halfway down:
.. image:: /img/Breeze-icon-design-mimetype-archive.png
:alt: Large colorful archive MIME types
For images, the background is a horizontal rectangle with the top-right corner
folded over, and the fold casts a shadow:
.. image:: /img/Breeze-icon-design-mimetype-image.png
:alt: Large colorful image MIME types
For video files, the background is a horizontal rectangle that looks like a
filmstrip:
.. image:: /img/Breeze-icon-design-mimetype-video.png
:alt: Large colorful video MIME types
For audio files, the background is a CD sleeve with a CD partially visible:
.. image:: /img/Breeze-icon-design-mimetype-audio.png
:alt: Large colorful video MIME types
For documents and everything else, the background is a vertical rectangle with
the top-right corner folded over, and the fold casts a shadow:
.. image:: /img/Breeze-icon-design-mimetype-document.png
:alt: Large colorful document MIME types
As with the Places icons, the foreground symbol does not cast a shadow.
Places Icons
============
Places icons are used to depict folders, network locations, and other places.
They come in four sizes: 16px, 22px, 32px, and 64px. Places icons use the
`monochrome style <index.html#monochrome-icon-style>`__ for 16px and 22px sizes,
and the `colorful style <index.html#colorful-icon-style>`__ for 32px and 64px
sizes.
Monochrome Places icons
~~~~~~~~~~~~~~~~~~~~~~~
.. image:: /img/Breeze-icon-design-places-monochrome.png
:alt: Small monochrome Places icons
Places icons are monochrome for their 16px and 22px versions. For these
versions, the whole icon depicts the place itself or its typical contents, and
the icon must be perfectly square, with consistent margins on all sides.
Beyond that, simply follow the general monochrome icon guidelines for 16px and
22px icons--but remember that there are are margins on all four sides, not just
the top and bottom.
.. figure:: /img/icon-margins-places-monochrome.png
:alt: Margins for monochrome places icons
Margins for 16px and 22px monochrome Places icons
Colorful places icons
~~~~~~~~~~~~~~~~~~~~~
.. image:: /img/Breeze-icon-design-places.png
:alt: Colorful Places icons
For the colorful versions, the monochrome icon becomes the foreground symbol on
top of a background depicting a folder. The foreground symbol's color is a
darkened version of the background folder's color, and can consist of 1px lines,
or filled-in areas. The foreground symbol should be centered within the folder
background and take up 10x10px for the 32px icon size, and 20x20px for the 64px
size.
Note that for places icons, the foreground symbol does **not** cast a shadow.
.. figure:: /img/icon-margins-places-32.png
:alt: Margins for monochrome places icons
Margins for 32px monochrome Places icons
.. figure:: /img/icon-margins-places-64.png
:alt: Margins for monochrome places icons
Margins for 64px monochrome Places icons
......@@ -8,7 +8,7 @@ Style
color/index
elevation
icon
icons/index
imagery
theme
typography
......@@ -18,7 +18,7 @@ The Style layer is concerned with emotion, tone, and visual vocabulary. Because
* :doc:`color/index`
* :doc:`elevation`
* :doc:`icon`
* :doc:`icons/index`
* :doc:`imagery`
* :doc:`theme`
* :doc:`typography`
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment