Difference between revisions of "Tango Icon Theme Guidelines"

From Tango Desktop Project
Jump to: navigation, search
m (Corrected some URLs)
(Extra Small)
 
(8 intermediate revisions by 2 users not shown)
Line 10: Line 10:
 
Having a common color palette is required to have a consistent look across all icons.  Visual style is heavily influenced by the colors used.
 
Having a common color palette is required to have a consistent look across all icons.  Visual style is heavily influenced by the colors used.
  
The Tango color palette consists of 27 RGB colors, as shown on the image below. Most desktops allow for 24-bit RGB icons (+8-bit Alpha channel).  
+
The Tango color palette consists of 27 RGB colors, as shown on the image above. Most desktops allow for 24-bit RGB icons (+8-bit Alpha channel).  
  
The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistant results than starting from arbitrary colors.   
+
The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistent results than starting from arbitrary colors.   
  
 
<div style="clear:both">
 
<div style="clear:both">
Line 19: Line 19:
 
* [http://tango.freedesktop.org/static/cvs/tango-art-tools/palettes/Tango-Palette.gpl GIMP Palette] - also works in latest Inkscape (symlink <code>~/.gimp-2.2/palettes/</code> to <code>~/.inkscape/palettes/</code> and you'll have all of your GIMP palettes in Inkscape)
 
* [http://tango.freedesktop.org/static/cvs/tango-art-tools/palettes/Tango-Palette.gpl GIMP Palette] - also works in latest Inkscape (symlink <code>~/.gimp-2.2/palettes/</code> to <code>~/.inkscape/palettes/</code> and you'll have all of your GIMP palettes in Inkscape)
 
* [http://tango.freedesktop.org/static/cvs/tango-art-tools/palettes/Tango-Palette.svg SVG Palette]
 
* [http://tango.freedesktop.org/static/cvs/tango-art-tools/palettes/Tango-Palette.svg SVG Palette]
* [http://openpalette.uk.to/examples/Tango.opf OpenPalette]
+
* <span style="text-decoration: line-through;">[http://openpalette.uk.to/examples/Tango.opf OpenPalette]</span> (broken link)
* <span style="text-decoration: line-through;">[http://www.benpbrown.com/2006/06/29/tango-photoshop-palette-swatch/ Photoshop Palette]</span> (broken link)
+
* [http://www.mediafire.com/?zbizzdkjwjk Photoshop Swatches]
  
 
Note the latest development version of GIMP and Inkscape 0.44 ship the Tango palette by default.
 
Note the latest development version of GIMP and Inkscape 0.44 ship the Tango palette by default.
Line 26: Line 26:
 
== Defining Tango Style Elements ==
 
== Defining Tango Style Elements ==
  
There are many attributes of an icon that define it as part of Tango, including ones such as perspective and lighting (which are outlined below).
+
There are many attributes of an icon that define it as part of Tango, including ones such as perspective and lighting (which are outlined below).
  
 
Let's examine at the key visual aspects that define the style:
 
Let's examine at the key visual aspects that define the style:
  
[[Image:Unify-icon-elements.png|frame|center|Visual Style Elements of Tango]]
+
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/Tango-icon-elements.png
  
# '''Object Outline''' : All Tango icons are stroked with a thin outline. At the ''large'' resolution the stroke size is to be 1 pixel. As the vector icon is scalable, the stroke scales along with the icon -- however, for the ''small'' and ''extra-small'' sizes, use 1 pixel outline again (see the [[Tango Icon Theme Guidelines#Sizes|sizes section]] for more information). <p>The color of the outline is a dark variant of the key color of the icon. This is done by retaining the hue and saturation of the dominant fill color and lowering the value to approximately 20%). In the example above, the trashcan is green, so the stroke will be green as well. While this is very close to black at the target resolution, it becomes less dramatic as you scale it up.
+
# '''Object Outline''' : All Tango icons are stroked with a thin outline to improve contrast. At low resolutions the stroke size is 1px. The stroke should not scale along with the icon, it should remain 1px. <p>The color of the outline is a dark variant of the key color of the icon. This is done by retaining the hue and saturation of the dominant fill color and lowering the value to approximately 20%). In the example above, the trashcan is green, so the stroke will be green as well.  
# '''Highlights''' : The edges of objects tend to reflect light more due to the fact the position of the observer relative to the light source is almost always ideal for the reflection. In terms of highlights, the theme inherits the style of Firefox/Thunderbird Pinstripe/Winstripe designed by Kevin Gerich & Stephen Horlander ([http://kmgerich.com/pinstripe/pinstripe.html Pinstripe], [http://markcarson.com/MarkCarson/Asp/ThunderbirdWinstripeScreenshots.asp Winstripe]) which shift away from reality by creating a second inner outline of the object. This stroke is very subtle and may not be aparent on some matte objects.
+
# '''Highlights''' : The edges of objects tend to reflect light more due to the fact the position of the observer relative to the light source is almost always ideal for the reflection. In terms of highlights, the theme inherits the style of Firefox/Thunderbird Pinstripe/Winstripe designed by Kevin Gerich & Stephen Horlander ([http://kmgerich.com/pinstripe/pinstripe.html Pinstripe], [http://markcarson.com/MarkCarson/Asp/ThunderbirdWinstripeScreenshots.asp Winstripe]) which shift away from reality by creating a second inner outline of the object. This stroke is very subtle and may not be apparent on some matte objects.
 
# '''Glossy reflections''' : Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, et cetera). A sheet of paper certainly doesn't have such attribute.
 
# '''Glossy reflections''' : Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, et cetera). A sheet of paper certainly doesn't have such attribute.
  
Line 52: Line 52:
 
There are three types of perspective defined for Tango.
 
There are three types of perspective defined for Tango.
  
[[Image:On-the-shelf-perspective.png|right]]
+
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/On-the-shelf-perspective.png
 +
 
 
=== Flat/On the Shelf Perspective ===
 
=== Flat/On the Shelf Perspective ===
  
Line 59: Line 60:
 
<br style="clear: both;">
 
<br style="clear: both;">
  
[[Image:Table-perspective.png|right]]
+
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/Table-perspective.png
 +
 
 
=== On the Table ===
 
=== On the Table ===
  
Line 71: Line 73:
  
 
== Lighting ==
 
== Lighting ==
[[Image:Lighting.png|100px|left]]
+
 
 +
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/lighting.png
  
 
Having homogenous lighting across all icons also is important for visual consistency. Tango icons are lit from above, with the light source slightly to the left. Icons with ''on the table'' perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.
 
Having homogenous lighting across all icons also is important for visual consistency. Tango icons are lit from above, with the light source slightly to the left. Icons with ''on the table'' perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.
Line 79: Line 82:
 
== Sizes ==
 
== Sizes ==
  
There are three major icon sizes an icon theme must address: '''Large''', '''Small''', and '''Extra Small'''.  
+
There are 4 major icon sizes defined that an icon theme should contain: '''Large''', '''Medium''', '''Small''' and '''Extra Small'''. Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear. On top of that, a new optional size, '''X-Large''', has been introduced.
 
 
Since Tango uses vectors for the large size, all other sizes&mdash;excluding small and extra small&mdash;are handled by scaling this vector icon to the target resolution. The reason to explicitly define small and extra small sizes (and not just use a scaled version of the large size) is because using such a small size requires object simplification, which often includes a change in perspective.
 
 
 
Some desktops do not make the extra effort to create pixel-perfect small sized renderings and simply render the large size onto the tiny canvas. While this may appear to save a lot of work, we believe the extra effort is only marginal and the resulting extra definition ("crispness") is worth it. While display resolutions increase over the years, there is also a fairly large market of small devices such as PDAs that will benefit greatly from the attention to the smaller-sized icons. Below, we include suggested workflows to help the icon designer to be as efficient as possible when creating all sizes.
 
  
 
=== Large ===
 
=== Large ===
  
http://jimmac.musichall.cz/wipicons/Tango/48x48/x-directory-normal-drag-accept.png
+
http://jimmac.musichall.cz/wipicons/Tango-NG//folder.png
 
 
This size is mainly used for desktop icons and in the file manager views.
 
  
The bitmap size is 48&times;48 pixels. We strongly suggest creating a [http://www.w3.org/TR/SVG/ SVG] version for this size since it can be easily scaled for other resolutions as well. Vector icons will be required for pixel resolution-independent interfaces as well, which define size by absolute units such as millimeters or inches.
+
This size is mainly used for desktop icons and in the file manager views. The bitmap size is 48&times;48 pixels.
  
=== (Optional) Medium ===
+
=== Medium ===
  
This size is not required to be created. If missing, the Large SVG can be rendered into this 32x32 canvas. As 32x32 is a common size on platforms such as Windows XP or KDE, providing a pixel-perfect rendering of 32x32 pixels is suggested. It can be created out of the Large SVG fairly easily.
+
A very common size of 32x32px is used on some menus (slab) and very common on Windows.
  
 
=== Small ===
 
=== Small ===
 
http://jimmac.musichall.cz/wipicons/Tango/22x22/x-directory-normal-drag-accept.png
 
  
 
"Small" is the common size for application toolbar icons.  
 
"Small" is the common size for application toolbar icons.  
Line 105: Line 100:
 
Its bitmap size is 22&times;22 pixels. This size is common for toolbars in KDE and the GIMP.  
 
Its bitmap size is 22&times;22 pixels. This size is common for toolbars in KDE and the GIMP.  
  
Historically Gnome uses 24&times;24 size (which is &frac14; of 48&times;48); just adding a 1 pixel empty space on all sides can make Tango icons useful on the Gnome desktop in the transition phase. One can easily do this with imagemagick:
+
Gnome has been using a size of 24&times;24px (which is &frac14; of 48&times;48); just adding a 1 pixel empty space on all sides can make Tango icons useful on the Gnome desktop. One can easily do this with imagemagick:
  
 
     convert -bordercolor Transparent -border 1x1 tango_size.png gnome_size.png
 
     convert -bordercolor Transparent -border 1x1 tango_size.png gnome_size.png
Line 111: Line 106:
 
=== Extra Small ===
 
=== Extra Small ===
  
http://jimmac.musichall.cz/wipicons/Tango/16x16/x-directory-normal-drag-accept.png
+
At 16&times;16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client, etc.) and menus.
  
At 16&times;16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client, etc.) and menus.  
+
=== X-Large ===
 +
[[Image:xlarge.png|left]]
  
Note, however: The Tango Project recommends keeping the number of menu items with an icon to a minimum. Only the most frequently used menu items should feature an icon. Otherwise the purpose of visual anchor is nullified by introducing visual noise in the menu.
+
This size has been introduced fairly recently and is ''optional''. Unless you are an experienced icon designer, do not start with this size as it goes against most of the good practice for icon design. You will be required to add insane amounts of detail and might end up with an unclear and complex metaphor. The canvas size is 256x256px and unlike all the other sizes, this artwork can be scaled from 49px up. In other words -- do not aim for pixel perfection here.
 +
 
 +
This size also holds another exception to the rule of stroking. Do not stroke x-large icons with the 1px common everywhere. In Inkscape we use a trick that achieves a similar contrast enhancing effect without losing upwards scalability. You create an outline object with no fill and a stroke of 3px. Then you duplicate such object and use the copy to clip itself. After blurring the object, the inside of the silhouette gets nicely shaded, while the outside is crisp. Instead of the inner stroke, use path shapes. Blur is a useful tool here as well.
  
 
== Common Filenaming ==
 
== Common Filenaming ==
Line 146: Line 144:
  
 
<html>
 
<html>
<embed style="margin-right: 4em; float: left; width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-4643787796978610202&hl=en" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL"  FlashVars="playerMode=embedded"> </embed>
+
<iframe width="420" height="315" src="//www.youtube.com/embed/NRVUWRnH5FM" frameborder="0" allowfullscreen></iframe>
  
<embed style="margin-right: 4em; float: left; width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=6981040679905170779&hl=en" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL"  FlashVars="playerMode=embedded"> </embed>
+
<iframe width="420" height="315" src="//www.youtube.com/embed/ooPfYctUfgU" frameborder="0" allowfullscreen></iframe>
 
</html>
 
</html>
 
* [http://video.google.com/videoplay?docid=-4643787796978610202 Creating vector art for target 48&times;48 pixel size] (Approx 30MB DivX AVI file).
 
* [http://video.google.com/videoplay?docid=6981040679905170779 Touching up an illustration for 22&times;22 and 16&times;16 pixels] (Approx 15MB DivX AVI file)
 
  
 
Alternatively, you can create the low resolution version in the vector editor as well:
 
Alternatively, you can create the low resolution version in the vector editor as well:
Line 176: Line 171:
 
== Frequent Mistakes ==
 
== Frequent Mistakes ==
  
[[Image:Bad-buttonizing.png|thumb|left|This icon does not have an easily distinguishable silhouette.]]
+
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/Bad-buttonizing.png
[[Image:Bad-polarizing.png|thumb|left|The overdone shiny, reflective highlight obscures the actual content.]]
+
 
 +
This icon does not have an easily distinguishable silhouette.
 +
 
 +
https://raw.github.com/gnome-design-team/gnome-icons/master/legacy/tango/Bad-polarizing.png
 +
 
 +
The overdone shiny, reflective highlight obscures the actual content.]]
  
 
<br style="break: both;">
 
<br style="break: both;">

Latest revision as of 20:49, 3 October 2013

Introduction

The Tango icon theme's goal is to make applications not seem alien on any desktop. A user running a multiplatform application should not have the impression that the look is unpolished and inconsistent with what he or she is used to. While this isn't about merging styles of all desktop systems, we do aim to not be drastically different on each platform.

Along with a generic type fallback, having a similar style will help in the transition phase with some legacy icons which may still remain on a user's particular desktop.

Color Palette

Tango-Palette.png

Having a common color palette is required to have a consistent look across all icons. Visual style is heavily influenced by the colors used.

The Tango color palette consists of 27 RGB colors, as shown on the image above. Most desktops allow for 24-bit RGB icons (+8-bit Alpha channel).

The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistent results than starting from arbitrary colors.

For your convenience, we prepared the palette for use in the following formats:

Note the latest development version of GIMP and Inkscape 0.44 ship the Tango palette by default.

Defining Tango Style Elements

There are many attributes of an icon that define it as part of Tango, including ones such as perspective and lighting (which are outlined below).

Let's examine at the key visual aspects that define the style:

Tango-icon-elements.png

  1. Object Outline : All Tango icons are stroked with a thin outline to improve contrast. At low resolutions the stroke size is 1px. The stroke should not scale along with the icon, it should remain 1px.

    The color of the outline is a dark variant of the key color of the icon. This is done by retaining the hue and saturation of the dominant fill color and lowering the value to approximately 20%). In the example above, the trashcan is green, so the stroke will be green as well.

  2. Highlights : The edges of objects tend to reflect light more due to the fact the position of the observer relative to the light source is almost always ideal for the reflection. In terms of highlights, the theme inherits the style of Firefox/Thunderbird Pinstripe/Winstripe designed by Kevin Gerich & Stephen Horlander (Pinstripe, Winstripe) which shift away from reality by creating a second inner outline of the object. This stroke is very subtle and may not be apparent on some matte objects.
  3. Glossy reflections : Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, et cetera). A sheet of paper certainly doesn't have such attribute.

Various elements have been picked from existing icon styles: Similar perspective as GNOME icons, a colored object stroke from KDE, an Aqua-like highlight influenced by Mac OS X, and edge highlights and overall lightness from the Firefox Pinstripe theme.

Style Attributes

To better understand the style of Tango, consider the following adjectives:

  • Light
  • Crisp
  • Straight
  • Simplified
  • Modern
  • Well-balanced

Perspective

There are three types of perspective defined for Tango.

On-the-shelf-perspective.png

Flat/On the Shelf Perspective

This style resembles looking at an object on a shelf at eye level, looking at an object from above, or laying on surface. This is the most common perspective for toolbar icons and document mime type icons.


Table-perspective.png

On the Table

This type of perspective is the most common for application icons. Action/Toolbar icons also utilize this perspective from time to time.


Tilted Table

In cases where the object's appearance is more evident from an angle, you are free to use the tilted table perspective—but this is the least common perspective of the three and should be used only in cases where the other two do not provide a clearly distinctive silhouette of the object.

Lighting

lighting.png

Having homogenous lighting across all icons also is important for visual consistency. Tango icons are lit from above, with the light source slightly to the left. Icons with on the table perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.


Sizes

There are 4 major icon sizes defined that an icon theme should contain: Large, Medium, Small and Extra Small. Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear. On top of that, a new optional size, X-Large, has been introduced.

Large

folder.png

This size is mainly used for desktop icons and in the file manager views. The bitmap size is 48×48 pixels.

Medium

A very common size of 32x32px is used on some menus (slab) and very common on Windows.

Small

"Small" is the common size for application toolbar icons.

Its bitmap size is 22×22 pixels. This size is common for toolbars in KDE and the GIMP.

Gnome has been using a size of 24×24px (which is ¼ of 48×48); just adding a 1 pixel empty space on all sides can make Tango icons useful on the Gnome desktop. One can easily do this with imagemagick:

   convert -bordercolor Transparent -border 1x1 tango_size.png gnome_size.png

Extra Small

At 16×16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client, etc.) and menus.

X-Large

Xlarge.png

This size has been introduced fairly recently and is optional. Unless you are an experienced icon designer, do not start with this size as it goes against most of the good practice for icon design. You will be required to add insane amounts of detail and might end up with an unclear and complex metaphor. The canvas size is 256x256px and unlike all the other sizes, this artwork can be scaled from 49px up. In other words -- do not aim for pixel perfection here.

This size also holds another exception to the rule of stroking. Do not stroke x-large icons with the 1px common everywhere. In Inkscape we use a trick that achieves a similar contrast enhancing effect without losing upwards scalability. You create an outline object with no fill and a stroke of 3px. Then you duplicate such object and use the copy to clip itself. After blurring the object, the inside of the silhouette gets nicely shaded, while the outside is crisp. Instead of the inner stroke, use path shapes. Blur is a useful tool here as well.

Common Filenaming

Until now, there has not been a standard for naming conventions. This resulted in themes which have not worked globally, as individual projects have used different names for the same icon.

Tango solves this issue with a Standard Icon Naming Specification

In the short term, existing KDE and GNOME icons names will be addressed using symlinks. We have prepared a script which automatically generates appropriate symlinks for existing naming schemes in GNOME and KDE so that compatibility with current desktop applications will be preserved.

Metainformation

To make it easier for developers to search for icons in the Tango set, please provide keywords in the icon file. For example, appropriate keywords for a joystick icon are: controller, joystick, game, gaming, HID.

For SVG icons, the metainformation is written using the Dublin Core namespace.

Inkscape users can conveniently enter the data in the document properties (Ctrl+Shift+D).

FIXME: PNG icons?

Suggested Workflow & Support Files

While each artist prefers his or her own way of working, here's a suggestion how to create all the needed icon versions with as little effort as possible.

  1. Start with the vector icon, having an extra 1:1 view to precisely positioned orthogonals.
  2. Once finished with the SVG icon, render the icon at 22×22 pixels (either as an export from your vector software or as an import in your bitmap editor) and use the results as a starting point. Most of the time, all you need to do is to recreate the outline stroke and the inner tango highlight with a 1×1 pixel brush.
  3. The 16×16 pixel version may start from the SVG as well, but usually the shapes need to be simplified significantly. Having the 22×22 pixel version open just for precise color picking is enough. Sometimes it's also good to start with a detail of the 22×22 pixel version.

Here's a few sample videos of a Tango icon creation workflow in Inkscape and GIMP.

Alternatively, you can create the low resolution version in the vector editor as well:

  1. Create a duplicate of the vector icon (in your vector editor).
  2. Reduce the graphic to the target size.
  3. Tweak the shapes, aligning the vectors (or groups of vectors) to the pixel grid.
  4. Export and tweak if necessary.

Things to Keep in Mind…

Here are a few things we suggest you take in consideration when transition from existing icon style…

a KDE artist

  • The stroke (object outline) is 1 pixel for the 48×48 pixel target resolution. KDE icons tend to have a thicker outline.
  • Only add glossiness for objects which have a shiny property in real life.

a GNOME artist

  • The toolbar size of 24×24 pixels is not used in Tango themes; it's 22×22 pixels instead.
  • The color palette is more vibrant, saturated.
  • Every icon requires all the sizes provided.

Frequent Mistakes

Bad-buttonizing.png

This icon does not have an easily distinguishable silhouette.

Bad-polarizing.png

The overdone shiny, reflective highlight obscures the actual content.]]